diff --git a/ui/src/components/DashboardPlane.js b/ui/src/components/DashboardPlane.js index 8cb961bbf3..993dc03565 100644 --- a/ui/src/components/DashboardPlane.js +++ b/ui/src/components/DashboardPlane.js @@ -1,13 +1,12 @@ import React from 'react'; import { useIntl } from 'react-intl'; import styled from 'styled-components'; - import { useAlertLibrary, useHighestSeverityAlerts, highestAlertToStatus, } from '../containers/AlertProvider'; -import { PageSubtitle } from '../components/style/CommonLayoutStyle'; +import { PageSubtitle } from './style/CommonLayoutStyle'; import { PanelActions, NetworkContainer } from './DashboardNetwork'; import HealthItem from './HealthItem.js'; import { spacing } from '@scality/core-ui/dist/style/theme'; @@ -44,6 +43,7 @@ const DashboardPlane = () => { label={intl.formatMessage({ id: 'control_plane' })} status={planesStatus} alerts={planesHighestSecurityAlert} + showArrow={false} /> @@ -51,6 +51,7 @@ const DashboardPlane = () => { label={intl.formatMessage({ id: 'workload_plane' })} status={planesStatus} alerts={planesHighestSecurityAlert} + showArrow={false} /> diff --git a/ui/src/components/DashboardPlane.test.js b/ui/src/components/DashboardPlane.test.js index 22e39b9db6..f9f7cb0347 100644 --- a/ui/src/components/DashboardPlane.test.js +++ b/ui/src/components/DashboardPlane.test.js @@ -39,17 +39,34 @@ jest.mock('../containers/AlertProvider', () => ({ }, })); +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 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 render(); - - // Verify expect(screen.getAllByLabelText(`status ${STATUS_HEALTH}`)).toHaveLength( NB_ITEMS, ); @@ -59,10 +76,7 @@ describe("the dashboard network's plane panel", () => { // Have to any type jest.fn function to avoid Flow warning for mockImplementation() (useHighestSeverityAlerts: any).mockImplementation(() => alertsWarning); - // Render render(); - - // Verify expect(screen.getAllByLabelText(`status ${STATUS_WARNING}`)).toHaveLength( NB_ITEMS, ); @@ -73,10 +87,7 @@ describe("the dashboard network's plane panel", () => { // Have to any type jest.fn function to avoid Flow warning for mockImplementation() (useHighestSeverityAlerts: any).mockImplementation(() => alertsCritical); - // Render render(); - - // Verify expect(screen.getAllByLabelText(`status ${STATUS_CRITICAL}`)).toHaveLength( NB_ITEMS, ); diff --git a/ui/src/components/DashboardServices.test.js b/ui/src/components/DashboardServices.test.js index be2418eff2..bf32d09fd8 100644 --- a/ui/src/components/DashboardServices.test.js +++ b/ui/src/components/DashboardServices.test.js @@ -46,6 +46,27 @@ jest.mock('../containers/AlertProvider', () => ({ }, })); +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' }, + }, + ], +})); + describe('the dashboard inventory panel', () => { test('displays the services panel and display all 8 green statuses when no alerts are present', async () => { // Have to any type jest.fn function to avoid Flow warning for mockImplementation() diff --git a/ui/src/components/HealthItem.js b/ui/src/components/HealthItem.js index d2d6d30ffb..6f00f16650 100644 --- a/ui/src/components/HealthItem.js +++ b/ui/src/components/HealthItem.js @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { Link } from 'react-router-dom'; import { useIntl } from 'react-intl'; import { Tooltip, StatusText } from '@scality/core-ui'; import { @@ -14,6 +13,11 @@ import type { Status } from '../containers/AlertProvider'; import CircleStatus from './CircleStatus'; import { STATUS_HEALTH } from '../constants.js'; import { formatDateToMid1 } from '../services/utils'; +import { + useDiscoveredViews, + useLinkOpener, +} from '../containers/ConfigProvider'; +import { useHistory } from 'react-router'; const ServiceItemLabelWrapper = styled.div` display: flex; @@ -87,12 +91,19 @@ const HealthItem = ({ label, status, alerts, + showArrow = true, }: { label: string, status: Status, alerts: Alert[], }) => { const intl = useIntl(); + const { openLink } = useLinkOpener(); + const history = useHistory(); + const discoveredViews = useDiscoveredViews(); + const alertView = discoveredViews.find( + (view) => view.view.path === '/alerts', + ); if (!alerts.length && status === STATUS_HEALTH) return ( @@ -132,15 +143,21 @@ const HealthItem = ({ } > - +
{ + history.push('/alerts'); + openLink(alertView); + }} + data-testid="alert-link" + > {label} - + {showArrow && } - +
);