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 && }
-
+
);