remove info decorator

openshift · Aug 11, 2020 · 4c81d75 · 4c81d75
1 parent 678b385
commit 4c81d75
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 41 deletions.
diff --git a/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx b/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  ExclamationTriangleIcon,
-  ExclamationCircleIcon,
-  InfoCircleIcon,
-} from '@patternfly/react-icons';
+import { ExclamationTriangleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
 import { AlertSeverity } from '@console/internal/components/monitoring/types';
 
 interface AlertSeverityIconProps {
@@ -37,15 +33,7 @@ const AlertSeverityIcon: React.FC<AlertSeverityIconProps> = ({
         />
       );
     default:
-      return (
-        <InfoCircleIcon
-          style={{
-            fontSize,
-            color: 'var(--pf-global--info-color--100)',
-          }}
-          alt="Monitoring Alert"
-        />
-      );
+      return null;
   }
 };
 

diff --git a/frontend/packages/console-shared/src/utils/__mocks__/alerts-and-rules-data.ts b/frontend/packages/console-shared/src/utils/__mocks__/alerts-and-rules-data.ts
@@ -123,6 +123,154 @@ export const mockAlerts: Alerts = {
   ],
 };
 
+export const mockAlerts2: Alert[] = [
+  {
+    labels: {
+      alertname: 'KubeNodeNotReady',
+      severity: 'info',
+      endpoint: 'web',
+      instance: '10.131.0.35:8080',
+      job: 'prometheus-example-app',
+      namespace: 'ns1',
+      pod: 'prometheus-example-pod',
+      prometheus: 'openshift-user-workload-monitoring/user-workload',
+      service: 'prometheus-example-app',
+      version: 'v0.1.0',
+    },
+    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.',
+    },
+    state: AlertStates.Firing,
+    activeAt: '2020-06-09T04:06:36.662770393Z',
+    value: 0,
+    rule: {
+      labels: {},
+      alerts: [],
+      annotations: {},
+      duration: 12,
+      id: '778oioioi',
+      name: 'xyz',
+      query: 'query1',
+      state: RuleStates.Firing,
+      type: 'type-1',
+    },
+  },
+  {
+    labels: {
+      alertname: 'KubeNodeNotReady',
+      severity: 'none',
+      endpoint: 'web',
+      instance: '10.131.0.35:8080',
+      job: 'prometheus-example-app',
+      namespace: 'ns1',
+      pod: 'prometheus-example-pod',
+      prometheus: 'openshift-user-workload-monitoring/user-workload',
+      service: 'prometheus-example-app',
+      version: 'v0.1.0',
+    },
+    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.',
+    },
+    state: AlertStates.Firing,
+    activeAt: '2020-06-09T04:06:36.662770393Z',
+    value: 0,
+    rule: {
+      labels: {},
+      alerts: [],
+      annotations: {},
+      duration: 12,
+      id: '778oioioi',
+      name: 'xyz',
+      query: 'query1',
+      state: RuleStates.Firing,
+      type: 'type-1',
+    },
+  },
+];
+
+export const expectedFiringAlerts: Alert[] = [
+  {
+    labels: {
+      alertname: 'KubeNodeNotReady',
+      severity: 'warning',
+      endpoint: 'web',
+      instance: '10.131.0.35:8080',
+      job: 'prometheus-example-app',
+      namespace: 'ns1',
+      pod: 'prometheus-example-pod',
+      prometheus: 'openshift-user-workload-monitoring/user-workload',
+      service: 'prometheus-example-app',
+      version: 'v0.1.0',
+    },
+    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.',
+    },
+    state: AlertStates.Firing,
+    activeAt: '2020-06-09T04:06:36.662770393Z',
+    value: 0,
+    rule: {
+      labels: {},
+      alerts: [],
+      annotations: {},
+      duration: 12,
+      id: '778oioioi',
+      name: 'xyz',
+      query: 'query1',
+      state: RuleStates.Firing,
+      type: 'type-1',
+    },
+  },
+  {
+    rule: {
+      state: RuleStates.Pending,
+      name: 'AlertmanagerReceiversNotConfigured',
+      query: 'cluster:alertmanager_routing_enabled:max == 0',
+      duration: 600,
+      labels: { prometheus: 'openshift-monitoring/k8s', severity: 'warning' },
+      annotations: {
+        message:
+          'Alerts are not configured to be sent to a notifica…how to configure notifications with Alertmanager.',
+      },
+      alerts: [],
+      id: '542717799',
+      type: 'type-2',
+    },
+    labels: { alertname: 'AlertmanagerReceiversNotConfigured', severity: 'warning' },
+    annotations: {
+      message:
+        'Alerts are not configured to be sent to a notifica…how to configure notifications with Alertmanager.',
+    },
+    state: AlertStates.Firing,
+    activeAt: '2020-07-15T06:36:06.662770393Z',
+    value: 132,
+  },
+  {
+    rule: {
+      state: RuleStates.Firing,
+      name: 'WatchDog',
+      query: 'vector(1)',
+      duration: 600,
+      labels: { prometheus: 'openshift-monitoring/k8s', severity: 'none' },
+      annotations: {
+        message: 'This alert is meant to ensure that entire pipeline is functional.',
+      },
+      alerts: [],
+      id: '542717499',
+      type: 'type-3',
+    },
+    labels: { alertname: 'WatchDog', severity: 'none' },
+    annotations: {
+      message: 'This alert is meant to ensure that entire pipeline is functional.',
+    },
+    state: AlertStates.Firing,
+    activeAt: '2020-07-15T06:36:06.662770393Z',
+    value: 12,
+  },
+];
+
 export const expectedSortedAlerts: Alert[] = [
   {
     labels: {

diff --git a/frontend/packages/console-shared/src/utils/__tests__/alert-utils.spec.ts b/frontend/packages/console-shared/src/utils/__tests__/alert-utils.spec.ts
@@ -0,0 +1,28 @@
+import {
+  mockAlerts,
+  mockAlerts2,
+  expectedFiringAlerts,
+} from '@console/shared/src/utils/__mocks__/alerts-and-rules-data';
+import { AlertSeverity } from '@console/internal/components/monitoring/types';
+import {
+  getSeverityAlertType,
+  getFiringAlerts,
+  shouldHideMonitoringAlertDecorator,
+} from '../alert-utils';
+
+describe('alert-utils', () => {
+  it('should get firing alerts', () => {
+    const firingAlerts = getFiringAlerts(mockAlerts.data);
+    expect(firingAlerts).toEqual(expectedFiringAlerts);
+  });
+
+  it('should fetch the severity of the most important alert', () => {
+    const severityAlertType = getSeverityAlertType(mockAlerts.data);
+    expect(severityAlertType).toEqual(AlertSeverity.Critical);
+  });
+  it('should hide monitoring alert decorator for alerts having severity as info/none', () => {
+    const severityAlertType = getSeverityAlertType(mockAlerts2);
+    const hideMonitoringAlertDecorator = shouldHideMonitoringAlertDecorator(severityAlertType);
+    expect(hideMonitoringAlertDecorator).toBe(true);
+  });
+});
diff --git a/frontend/packages/console-shared/src/utils/alert-utils.ts b/frontend/packages/console-shared/src/utils/alert-utils.ts
@@ -7,9 +7,12 @@ export const sortMonitoringAlerts = (alerts: Alert[]): Alert[] =>
 
 export const getSeverityAlertType = (alerts: Alert[]): AlertSeverity => {
   const sortedAlerts = sortMonitoringAlerts(alerts);
-  const severityType = (sortedAlerts[0]?.labels?.severity as AlertSeverity) ?? null;
+  const severityType = (sortedAlerts[0]?.labels?.severity as AlertSeverity) ?? AlertSeverity.None;
   return severityType;
 };
 
 export const getFiringAlerts = (alerts: Alert[]): Alert[] =>
   _.filter(alerts, (alert) => alert.state === AlertStates.Firing);
+
+export const shouldHideMonitoringAlertDecorator = (severityAlertType: AlertSeverity): boolean =>
+  severityAlertType === AlertSeverity.None || severityAlertType === AlertSeverity.Info;
diff --git a/...ckages/dev-console/src/components/topology/components/nodes/MonitoringAlertsDecorator.tsx b/...ckages/dev-console/src/components/topology/components/nodes/MonitoringAlertsDecorator.tsx
@@ -5,7 +5,12 @@ import { Node, SELECTION_EVENT } from '@patternfly/react-topology';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { Alert } from '@console/internal/components/monitoring/types';
 import { selectOverviewDetailsTab } from '@console/internal/actions/ui';
-import { getSeverityAlertType, getFiringAlerts, AlertSeverityIcon } from '@console/shared';
+import {
+  getSeverityAlertType,
+  getFiringAlerts,
+  AlertSeverityIcon,
+  shouldHideMonitoringAlertDecorator,
+} from '@console/shared';
 import { Decorator } from './Decorator';
 
 type DispatchProps = {
@@ -46,16 +51,16 @@ const MonitoringAlertsDecorator: React.FC<MonitoringAlertsDecoratorType> = ({
       .fireEvent(SELECTION_EVENT, [workload.getId()]);
   };
 
+  if (shouldHideMonitoringAlertDecorator(severityAlertType)) return null;
+
   return (
-    firingAlerts.length > 0 && (
-      <Tooltip key="monitoringAlert" content="Monitoring Alert" position={TooltipPosition.left}>
-        <Decorator x={x} y={y} radius={radius} onClick={showSidebar}>
-          <g transform={`translate(-${radius / 2}, -${radius / 2})`}>
-            <AlertSeverityIcon severityAlertType={severityAlertType} fontSize={radius} />
-          </g>
-        </Decorator>
-      </Tooltip>
-    )
+    <Tooltip key="monitoringAlert" content="Monitoring Alert" position={TooltipPosition.left}>
+      <Decorator x={x} y={y} radius={radius} onClick={showSidebar}>
+        <g transform={`translate(-${radius / 2}, -${radius / 2})`}>
+          <AlertSeverityIcon severityAlertType={severityAlertType} fontSize={radius} />
+        </g>
+      </Decorator>
+    </Tooltip>
   );
 };
 

diff --git a/frontend/packages/dev-console/src/components/topology/list-view/TopologyListViewNode.tsx b/frontend/packages/dev-console/src/components/topology/list-view/TopologyListViewNode.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
+import { connect } from 'react-redux';
 import {
   Button,
   DataList,
@@ -12,7 +13,14 @@ import {
   TooltipPosition,
 } from '@patternfly/react-core';
 import { isNode, Node, observer } from '@patternfly/react-topology';
-import { getSeverityAlertType, AlertSeverityIcon, getFiringAlerts } from '@console/shared';
+import {
+  getSeverityAlertType,
+  AlertSeverityIcon,
+  getFiringAlerts,
+  shouldHideMonitoringAlertDecorator,
+} from '@console/shared';
+import { selectOverviewDetailsTab } from '@console/internal/actions/ui';
+
 import { useSearchFilter } from '../filters';
 import { getResourceKind } from '../topology-utils';
 import { labelForNodeKind } from './list-view-utils';
@@ -23,8 +31,6 @@ import {
   StatusCell,
   TypedResourceBadgeCell,
 } from './cells';
-import { selectOverviewDetailsTab } from '@console/internal/actions/ui';
-import { connect } from 'react-redux';
 
 interface DispatchProps {
   onSelectTab?: (name: string) => void;
@@ -72,7 +78,7 @@ const ObservedTopologyListViewNode: React.FC<TopologyListViewNodeProps & Dispatc
       onSelectTab('Monitoring');
     };
     const severityAlertType = getSeverityAlertType(alerts);
-    alertIndicator = (
+    alertIndicator = shouldHideMonitoringAlertDecorator(severityAlertType) ? null : (
       <Tooltip key="monitoringAlert" content="Monitoring Alert" position={TooltipPosition.right}>
         <Button
           variant="plain"

diff --git a/frontend/public/components/overview/project-overview.tsx b/frontend/public/components/overview/project-overview.tsx
@@ -15,6 +15,7 @@ import {
   AlertSeverityIcon,
   getSeverityAlertType,
   getFiringAlerts,
+  shouldHideMonitoringAlertDecorator,
 } from '@console/shared';
 import { K8sResourceKind } from '../../module/k8s';
 import * as UIActions from '../../actions/ui';
@@ -26,7 +27,6 @@ import {
   resourceObjPath,
   truncateMiddle,
 } from '../utils';
-
 import { OverviewGroup, OverviewMetrics } from '.';
 
 // Consider this mobile if the device screen width is less than 768. (This value shouldn't change.)
@@ -303,6 +303,13 @@ const ProjectOverviewListItem = connect<
       selectOverviewDetailsTab('Monitoring');
       selectItem(uid);
     };
+    const alertIndicator = shouldHideMonitoringAlertDecorator(severityAlertType) ? null : (
+      <Tooltip key="monitoringAlert" content="Monitoring Alert" position={TooltipPosition.right}>
+        <Button onClick={onSeverityIconClick} variant="plain">
+          <AlertSeverityIcon severityAlertType={severityAlertType} />
+        </Button>
+      </Tooltip>
+    );
 
     const heading = (
       <h3 className="project-overview__item-heading">
@@ -323,17 +330,7 @@ const ProjectOverviewListItem = connect<
               <ControllerLink controller={current} />
             </>
           )}
-          {firingAlerts.length > 0 && (
-            <Tooltip
-              key="monitoringAlert"
-              content="Monitoring Alert"
-              position={TooltipPosition.right}
-            >
-              <Button onClick={onSeverityIconClick} variant="plain">
-                <AlertSeverityIcon severityAlertType={severityAlertType} />
-              </Button>
-            </Tooltip>
-          )}
+          {alertIndicator}
           {deletionTimestamp && <ResourceItemDeleting />}
         </span>
       </h3>