ui/dashboard: Add network plane health in Network panel

Remove the ServiceItem from DashboardServices and create the HealthItem component with it
Add DashboardPlane component containing 2 HealthItems
Add tests for the new DashbordPlane component
history.push replaced by history.replace in the HealthItem component

Ref: #3511

shell-ui/src/alerts/alertHooks.js

@@ -19,7 +19,7 @@ export const getVolumesAlertSelectors = (): FilterLabels => {
 
 export const getNetworksAlertSelectors = (): FilterLabels => {
  return {
- alertname: ['ControlPlaneNetworkDegraded', 'WorkloadPlaneNetworkDegraded'],
+ alertname: ['NetworkDegraded'],
  };
 };
 

ui/src/components/DashboardNetwork.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+
+import { spacing } from '@scality/core-ui/dist/style/theme';
+import { PageSubtitle } from '../components/style/CommonLayoutStyle';
+
+import DashboardPlane from './DashboardPlane';
+
+export const NetworkContainer = styled.div`
+ padding: ${spacing.sp2} ${spacing.sp4};
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+`;
+
+export const PanelActions = styled.div`
+ display: flex;
+ padding: ${spacing.sp4};
+ align-items: center;
+ justify-content: space-between;
+`;
+
+const DashboardNetwork = () => {
+ const intl = useIntl();
+
+ return (
+ <NetworkContainer>
+ <PanelActions>
+ <PageSubtitle>{intl.formatMessage({ id: 'network' })}</PageSubtitle>
+ </PanelActions>
+ <DashboardPlane />
+ </NetworkContainer>
+ );
+};
+
+export default DashboardNetwork;

ui/src/components/DashboardPlane.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import {
+ useAlertLibrary,
+ useHighestSeverityAlerts,
+ highestAlertToStatus,
+} from '../containers/AlertProvider';
+import { PageSubtitle } from './style/CommonLayoutStyle';
+import { PanelActions, NetworkContainer } from './DashboardNetwork';
+import HealthItem from './HealthItem.js';
+import { spacing } from '@scality/core-ui/dist/style/theme';
+
+const PlanesContainer = styled.div`
+ padding-left: ${spacing.sp8};
+ display: flex;
+ flex-direction: row;
+`;
+
+const PlaneContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+ margin-right: ${spacing.sp40};
+`;
+
+const DashboardPlane = () => {
+ const intl = useIntl();
+ const alertsLibrary = useAlertLibrary();
+
+ const planesHighestSecurityAlert = useHighestSeverityAlerts(
+ alertsLibrary.getNetworksAlertSelectors(),
+ );
+ const planesStatus = highestAlertToStatus(planesHighestSecurityAlert);
+
+ return (
+ <NetworkContainer>
+ <PanelActions>
+ <PageSubtitle>Planes</PageSubtitle>
+ </PanelActions>
+ <PlanesContainer>
+ <PlaneContainer>
+ <HealthItem
+ label={intl.formatMessage({ id: 'control_plane' })}
+ status={planesStatus}
+ alerts={planesHighestSecurityAlert}
+ showArrow={false}
+ />
+ </PlaneContainer>
+ <PlaneContainer>
+ <HealthItem
+ label={intl.formatMessage({ id: 'workload_plane' })}
+ status={planesStatus}
+ alerts={planesHighestSecurityAlert}
+ showArrow={false}
+ />
+ </PlaneContainer>
+ </PlanesContainer>
+ </NetworkContainer>
+ );
+};
+
+export default DashboardPlane;

ui/src/components/DashboardPlane.test.js

@@ -0,0 +1,102 @@
+//@flow
+import React from 'react';
+import { screen } from '@testing-library/react';
+import DashboardPlane from './DashboardPlane';
+import { render } from './__TEST__/util';
+import type { Alert } from '../services/alertUtils';
+import { useHighestSeverityAlerts } from '../containers/AlertProvider';
+import {
+ STATUS_WARNING,
+ STATUS_CRITICAL,
+ STATUS_HEALTH,
+} from '../constants.js';
+
+const alertsCritical = [
+ {
+ id: 'alert1',
+ severity: STATUS_CRITICAL,
+ startsAt: '2021-07-28T10:36:24.293Z',
+ },
+];
+const alertsWarning = [
+ {
+ id: 'alert2',
+ severity: STATUS_WARNING,
+ startsAt: '2021-07-28T10:36:24.293Z',
+ },
+];
+const noAlerts = [];
+
+jest.mock('../containers/AlertProvider', () => ({
+ __esModule: true,
+ default: ({ children }) => <>{children}</>,
+ useHighestSeverityAlerts: jest.fn(),
+ useAlertLibrary: () => ({
+ getNetworksAlertSelectors: () => {},
+ }),
+ highestAlertToStatus: (alerts?: Alert[]): string => {
+ return (alerts?.[0] && ((alerts[0].severity: any): string)) || 'healthy';
+ },
+}));
+
+jest.mock('../containers/ConfigProvider', () => ({
+ __esModule: true,
+ default: ({ children }) => <>{children}</>,
+ useLinkOpener: () => ({
+ openLink: jest.fn(),
+ }),
+ useDiscoveredViews: () => [
+ {
+ app: {
+ kind: '',
+ name: '',
+ version: '',
+ url: '',
+ appHistoryBasePath: '',
+ },
+ isFederated: true,
+ view: { path: '/alerts' },
+ },
+ ],
+}));
+
+const NB_ITEMS = 2;
+
+describe("the dashboard network's plane panel", () => {
+ test("displays the network's plane panel and display 2 green statuses when no alerts are present", async () => {
+ // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
+ (useHighestSeverityAlerts: any).mockImplementation(() => noAlerts);
+ render(<DashboardPlane />);
+ expect(screen.getAllByLabelText(`status ${STATUS_HEALTH}`)).toHaveLength(
+ NB_ITEMS,
+ );
+ });
+
+ test('displays 2 warning statuses when warning alerts are present as well as link to the alerts page', async () => {
+ // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
+ (useHighestSeverityAlerts: any).mockImplementation(() => alertsWarning);
+
+ // Render
+ render(<DashboardPlane />);
+
+ // Verify
+ expect(screen.getAllByLabelText(`status ${STATUS_WARNING}`)).toHaveLength(
+ NB_ITEMS,
+ );
+ expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS);
+ });
+
+ test('displays 2 critical statuses when warning alerts are present as well as link to the alerts page', async () => {
+ // Have to any type jest.fn function to avoid Flow warning for mockImplementation()
+ (useHighestSeverityAlerts: any).mockImplementation(() => alertsCritical);
+
+ // Render
+ render(<DashboardPlane />);
+
+ // Verify
+ expect(screen.getAllByLabelText(`status ${STATUS_CRITICAL}`)).toHaveLength(
+ NB_ITEMS,
+ );
+ expect(screen.getAllByTestId('alert-link')).toHaveLength(NB_ITEMS);
+ });
+});