Refresh rules if alerts don't know their name (#1201)

src/components/pages/dashboard/dashboard.js

@@ -79,8 +79,8 @@ export class Dashboard extends Component {
   }
 
   componentDidMount() {
-    // Load the rules
-    if (!this.props.rulesError) this.props.fetchRules();
+    // Ensure the rules are loaded
+    this.refreshRules();
 
     // Telemetry stream - START
     const onPendingStart = () => this.setState({ telemetryIsPending: true });
@@ -272,6 +272,10 @@ export class Dashboard extends Component {
     )
   );
 
+  refreshRules = () => {
+    if (!this.props.rulesError && !this.props.rulesIsPending) this.props.fetchRules();
+  }
+
   render() {
     const {
       theme,
@@ -347,6 +351,16 @@ export class Dashboard extends Component {
       count: Math.min(alert.count, Config.maxAlertsCount)
     }));
 
+    // Determine if the rules for all of the alerts are actually loaded.
+    const unloadedRules =
+      topAlerts.filter(alert => !rules[alert.ruleId]).length
+      + currentActiveAlerts.filter(alert => !rules[alert.ruleId]).length;
+    if (unloadedRules > 0) {
+      // Fetch the rules since at least one alert doesn't know the name for its rule
+      this.refreshRules();
+    }
+
+
     // Convert the list of alerts by device id to alerts by device type
     const alertsPerDeviceType = Object.keys(alertsPerDeviceId).reduce((acc, deviceId) => {
       const deviceType = (devices[deviceId] || {}).type || deviceId;

src/components/pages/dashboard/panels/alerts/alertsPanel.js

@@ -50,7 +50,7 @@ export class AlertsPanel extends Component {
       columnDefs: translateColumnDefs(t, this.columnDefs),
       rowData: alerts,
       suppressFlyouts: true,
-      gridAutoHeight: true,
+      domLayout: 'autoHeight',
       deltaRowDataMode: false,
       t
     };

src/components/pages/deployments/deploymentDetails/deploymentDetailsGrid/deploymentDetailsGridConfig.js

@@ -49,5 +49,5 @@ export const defaultDeploymentDetailsGridProps = {
   deltaRowDataMode: true,
   enableSorting: true,
   unSortIcon: true,
-  gridAutoHeight: true
+  domLayout: 'autoHeight'
 };

src/components/pages/devices/flyouts/deviceDetails/deviceDetails.js

@@ -226,7 +226,7 @@ export class DeviceDetails extends Component {
       rowData: isPending ? undefined : this.applyRuleNames(this.state.alerts || [], this.props.rules || []),
       t: this.props.t,
       deviceGroups: this.props.deviceGroups,
-      gridAutoHeight: true,
+      domLayout: 'autoHeight',
       columnDefs: translateColumnDefs(this.props.t, this.columnDefs),
       suppressFlyouts: true
     };

src/components/pages/maintenance/jobDetails/jobDetails.js

@@ -105,7 +105,7 @@ export class JobDetails extends Component {
 
     const selectedJob = this.state.selectedJob;
     const jobGridProps = {
-      gridAutoHeight: true,
+      domLayout: 'autoHeight',
       rowData: isPending ? undefined : selectedJob ? [selectedJob] : [],
       pagination: false,
       t,
@@ -113,7 +113,7 @@ export class JobDetails extends Component {
     };
 
     const jobStatusGridProps = {
-      gridAutoHeight: true,
+      domLayout: 'autoHeight',
       rowData: this.state.jobStatusIsPending ? undefined : [this.state.jobStatus],
       pagination: true,
       paginationPageSize: Config.smallGridPageSize,
@@ -157,7 +157,7 @@ export class JobDetails extends Component {
                     ?
                     <DevicesGridContainer
                       t={t}
-                      gridAutoHeight={true}
+                      domLayout="autoHeight"
                       rowData={this.state.selectedDevices}
                       onContextMenuChange={this.onContextMenuChange} />
                     : t('maintenance.noOccurrenceSelected')

src/components/pages/maintenance/ruleDetails/ruleDetails.js

@@ -274,7 +274,7 @@ export class RuleDetails extends Component {
     const alertName = (this.state.selectedRule || {}).name || selectedId;
 
     const alertsGridProps = {
-      gridAutoHeight: true,
+      domLayout: 'autoHeight',
       rowSelection: 'multiple',
       deltaRowDataMode: true,
       getRowNodeId: ({ id }) => id,
@@ -407,7 +407,7 @@ export class RuleDetails extends Component {
                     <h4 className="sub-heading">{t('maintenance.alertedDevices')}</h4>
                     <DevicesGridContainer
                       t={t}
-                      gridAutoHeight={true}
+                      domLayout="autoHeight"
                       onGridReady={this.onDeviceGridReady}
                       rowData={isPending ? undefined : this.state.devices}
                       onContextMenuChange={this.onContextMenuChange('deviceContextBtns')}