show empty message for no alerts

openshift · Dec 21, 2020 · 683afe6 · 683afe6
1 parent 36558f2
commit 683afe6
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/frontend/packages/dev-console/src/components/monitoring/alerts/MonitoringAlerts.tsx b/frontend/packages/dev-console/src/components/monitoring/alerts/MonitoringAlerts.tsx
@@ -13,7 +13,7 @@ import { getAlertsAndRules } from '@console/internal/components/monitoring/utils
 import { monitoringSetRules, monitoringLoaded, sortList } from '@console/internal/actions/ui';
 import { Rule } from '@console/internal/components/monitoring/types';
 import { RootState } from '@console/internal/redux';
-import { getURLSearchParams } from '@console/internal/components/utils';
+import { getURLSearchParams, EmptyBox, LoadingBox } from '@console/internal/components/utils';
 import { getFilteredRows } from '@console/internal/components/factory';
 import { alertingRuleStateOrder } from '@console/internal/reducers/monitoring';
 import { usePrometheusRulesPoll } from '@console/internal/components/graphs/prometheus-rules-hook';
@@ -108,6 +108,13 @@ export const MonitoringAlerts: React.FC<props> = ({ match, rules, filters, listS
     setSortBy({ index, direction });
   };
 
+  if (loading && !loadError) {
+    return <LoadingBox />;
+  }
+  if (_.isEmpty(response?.data)) {
+    return <EmptyBox label={t('devconsole~Alerts')} />;
+  }
+
   return (
     <>
       <Helmet>

diff --git a/...packages/dev-console/src/components/monitoring/alerts/__tests__/MonitoringAlerts.spec.tsx b/...packages/dev-console/src/components/monitoring/alerts/__tests__/MonitoringAlerts.spec.tsx
@@ -3,8 +3,10 @@ import { Map } from 'immutable';
 import * as redux from 'react-redux';
 import { shallow } from 'enzyme';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import * as prometheusHook from '@console/internal/components/graphs/prometheus-rules-hook';
 import { FilterToolbar } from '@console/internal/components/filter-toolbar';
 import { MonitoringAlerts } from '../MonitoringAlerts';
+import { EmptyBox } from '@console/internal/components/utils';
 
 jest.mock('react-i18next', () => {
   const reactI18next = require.requireActual('react-i18next');
@@ -38,11 +40,71 @@ describe('MonitoringAlerts', () => {
   // @ts-ignore
   const spyDispatch = jest.spyOn(redux, 'useDispatch');
   spyDispatch.mockReturnValue(() => {});
+
   it('should render monitoring alerts', () => {
+    const spyPrometheusRulesPoll = jest.spyOn(prometheusHook, 'usePrometheusRulesPoll');
+    spyPrometheusRulesPoll.mockReturnValueOnce([
+      {
+        data: {
+          groups: [
+            {
+              name: 'kubernetes.rules',
+              rules: [
+                {
+                  alerts: [
+                    {
+                      annotations: {
+                        message:
+                          'Alerts are not configured to be sent to a notification system, meaning that you may not be notified in a timely fashion when important failures occur. Check the OpenShift documentation to learn how to configure notifications with Alertmanager.',
+                      },
+                      labels: {
+                        alertname: 'AlertmanagerReceiversNotConfigured',
+                        severity: 'warning',
+                      },
+                      state: 'firing',
+                    },
+                  ],
+                  annotations: {
+                    message:
+                      'Alerts are not configured to be sent to a notification system, meaning that you may not be notified in a timely fashion when important failures occur. Check the OpenShift documentation to learn how to configure notifications with Alertmanager.',
+                  },
+                  labels: { prometheus: 'openshift-monitoring/k8s', severity: 'warning' },
+                  name: 'AlertmanagerReceiversNotConfigured',
+                  query: 'cluster:alertmanager_routing_enabled:max == 0',
+                  state: 'firing',
+                  type: 'alerting',
+                },
+                {
+                  alerts: [],
+                  annotations: {
+                    message:
+                      'Cluster Monitoring Operator is experiencing reconciliation error rate of {{ printf "%0.0f" $value }}%.',
+                  },
+                  labels: { prometheus: 'openshift-monitoring/k8s', severity: 'warning' },
+                  name: 'ClusterMonitoringOperatorReconciliationErrors',
+                  query:
+                    'rate(cluster_monitoring_operator_reconcile_errors_total[15m]) * 100 / rate(cluster_monitoring_operator_reconcile_attempts_total[15m]) > 10',
+                  state: 'inactive',
+                  type: 'alerting',
+                },
+              ],
+            },
+          ],
+        },
+      },
+      null,
+      false,
+    ]);
     const wrapper = shallow(<MonitoringAlerts {...monitoringAlertsProps} />);
     expect(wrapper.find(FilterToolbar).exists()).toBe(true);
     expect(wrapper.find(Table).exists()).toBe(true);
     expect(wrapper.find(TableHeader).exists()).toBe(true);
     expect(wrapper.find(TableBody).exists()).toBe(true);
   });
+  it('should show empty state message', () => {
+    const spyPrometheusRulesPoll = jest.spyOn(prometheusHook, 'usePrometheusRulesPoll');
+    spyPrometheusRulesPoll.mockReturnValueOnce([{}, null, false]);
+    const wrapper = shallow(<MonitoringAlerts {...monitoringAlertsProps} />);
+    expect(wrapper.find(EmptyBox).exists()).toBe(true);
+  });
 });