From e61357807b73ac5e89c2dbe6a523a0e326602fdd Mon Sep 17 00:00:00 2001 From: nouha Date: Thu, 25 Aug 2022 09:27:41 +0000 Subject: [PATCH 1/3] Display the 2 access pictograms logs and report on details panel --- .../src/Resources/Details/Header.tsx | 82 ++++++++++++---- .../Resources/Details/ShortcutsTooltip.tsx | 94 ------------------- .../src/Resources/Details/index.test.tsx | 34 +++---- www/front_src/src/Resources/helpers.ts | 16 ++++ 4 files changed, 99 insertions(+), 127 deletions(-) delete mode 100644 www/front_src/src/Resources/Details/ShortcutsTooltip.tsx create mode 100644 www/front_src/src/Resources/helpers.ts diff --git a/www/front_src/src/Resources/Details/Header.tsx b/www/front_src/src/Resources/Details/Header.tsx index 2a6c9580112..fdb424a77d0 100644 --- a/www/front_src/src/Resources/Details/Header.tsx +++ b/www/front_src/src/Resources/Details/Header.tsx @@ -1,5 +1,6 @@ import { useTranslation } from 'react-i18next'; import { hasPath, isNil, not, path, prop } from 'ramda'; +import { useNavigate } from 'react-router-dom'; import { Grid, @@ -13,6 +14,9 @@ import makeStyles from '@mui/styles/makeStyles'; import CopyIcon from '@mui/icons-material/FileCopy'; import SettingsIcon from '@mui/icons-material/Settings'; import { CreateCSSProperties } from '@mui/styles'; +import LogsIcon from '@mui/icons-material/Assignment'; +import ReportIcon from '@mui/icons-material/Assessment'; +import Divider from '@mui/material/Divider'; import { StatusChip, @@ -27,13 +31,14 @@ import { labelConfigure, labelCopyLink, labelLinkCopied, - labelShortcuts, + labelViewLogs, + labelViewReport, labelSomethingWentWrong, } from '../translatedLabels'; import { Parent, ResourceUris } from '../models'; +import { replaceBasename } from '../helpers'; import SelectableResourceName from './tabs/Details/SelectableResourceName'; -import ShortcutsTooltip from './ShortcutsTooltip'; import { DetailsSectionProps } from '.'; @@ -42,15 +47,23 @@ interface MakeStylesProps { } const useStyles = makeStyles((theme) => ({ + containerIcons: { + alignItems: 'center', + display: 'flex', + }, + divider: { + borderColor: theme.palette.text.secondary, + margin: theme.spacing(1, 0.5), + }, header: ({ displaySeverity }): CreateCSSProperties => ({ alignItems: 'center', display: 'grid', gridGap: theme.spacing(2), gridTemplateColumns: `${ displaySeverity ? 'auto' : '' - } auto minmax(0, 1fr) auto auto`, + } auto minmax(0, 1fr) auto`, height: 43, - padding: theme.spacing(0, 1), + padding: theme.spacing(0, 2.5, 0, 1), }), parent: { alignItems: 'center', @@ -58,6 +71,9 @@ const useStyles = makeStyles((theme) => ({ gridGap: theme.spacing(1), gridTemplateColumns: 'auto minmax(0, 1fr)', }, + report: { + marginLeft: theme.spacing(0.5), + }, resourceName: { alignItems: 'center', columnGap: theme.spacing(1), @@ -109,6 +125,7 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => { displaySeverity: not(isNil(details?.severity_level)), }); const { t } = useTranslation(); + const navigate = useNavigate(); const { showSuccessMessage, showErrorMessage } = useSnackbar(); const copyResourceLink = (): void => { @@ -120,6 +137,19 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => { } }; + const navigateToResourceUris = ( + category: keyof ResourceUris, + ): (() => void) => { + return (): void => { + const url = replaceBasename({ + endpoint: prop(category, resourceUris) || '', + newWord: '/', + }); + + navigate(`${url}`); + }; + }; + if (details === undefined) { return ; } @@ -196,19 +226,37 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => { )} - - - - +
+ + + + + + + + + + +
); }; diff --git a/www/front_src/src/Resources/Details/ShortcutsTooltip.tsx b/www/front_src/src/Resources/Details/ShortcutsTooltip.tsx deleted file mode 100644 index 804275ca452..00000000000 --- a/www/front_src/src/Resources/Details/ShortcutsTooltip.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { isNil, prop } from 'ramda'; -import { useTranslation } from 'react-i18next'; - -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; -import LogsIcon from '@mui/icons-material/Assignment'; -import ReportIcon from '@mui/icons-material/Assessment'; -import { - Link, - List, - ListItem, - ListItemIcon, - ListItemText, - Tooltip, -} from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; - -import { PopoverMenu } from '@centreon/ui'; - -import { ResourceUris } from '../models'; -import { - labelActionNotPermitted, - labelShortcuts, - labelViewLogs, - labelViewReport, -} from '../translatedLabels'; - -interface Props { - resourceUris: ResourceUris; -} - -const useStyles = makeStyles((theme) => ({ - iconContainer: { - minWidth: theme.spacing(4.5), - }, - link: { - display: 'contents', - }, -})); - -const ShortcutsTooltip = ({ resourceUris }: Props): JSX.Element => { - const classes = useStyles(); - const { t } = useTranslation(); - - const shortcuts = [ - { - Icon: LogsIcon, - id: 'Logs', - name: labelViewLogs, - uri: prop('logs', resourceUris), - }, - { - Icon: ReportIcon, - id: 'Reporting', - name: labelViewReport, - uri: prop('reporting', resourceUris), - }, - ]; - - return ( - } - title={t(labelShortcuts)} - > - {(): JSX.Element => ( - - {shortcuts.map(({ Icon, uri, name, id }) => ( - -
- - - - - - {t(name)} - - -
- - ))} - - )} - - ); -}; - -export default ShortcutsTooltip; diff --git a/www/front_src/src/Resources/Details/index.test.tsx b/www/front_src/src/Resources/Details/index.test.tsx index 53543304a89..20ff9c0226f 100644 --- a/www/front_src/src/Resources/Details/index.test.tsx +++ b/www/front_src/src/Resources/Details/index.test.tsx @@ -38,6 +38,7 @@ import { labelCurrentNotificationNumber, labelPerformanceData, label7Days, + labelDetails, label1Day, label31Days, labelCopy, @@ -46,7 +47,6 @@ import { labelConfigure, labelViewLogs, labelViewReport, - labelDetails, labelCopyLink, labelServices, labelFqdn, @@ -64,7 +64,6 @@ import { labelAvg, labelCompactTimePeriod, labelCheck, - labelShortcuts, labelMonitoringServer, labelToday, labelYesterday, @@ -558,6 +557,13 @@ const DetailsWithJotai = (): JSX.Element => ( ); +const mockedNavigate = jest.fn(); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: (): jest.Mock => mockedNavigate, +})); + const renderDetails = (): RenderResult => render(); const mockedLocalStorageGetItem = jest.fn(); @@ -980,15 +986,15 @@ describe(Details, () => { ); }); - it('displays the shortcut links when the More icon is clicked', async () => { + it('navigates to logs and report pages when the corresponding icons are clicked', async () => { mockedAxios.get.mockResolvedValueOnce({ data: { ...retrievedDetails, links: { ...retrievedDetails.links, uris: { - logs: '/logs', - reporting: '/reporting', + logs: 'logs', + reporting: 'reporting', }, }, }, @@ -998,26 +1004,22 @@ describe(Details, () => { { name: 'details', value: serviceDetailsUrlParameters }, ]); - const { getByLabelText, getAllByLabelText } = renderDetails(); + const { getByLabelText, getByTestId } = renderDetails(); await waitFor(() => { expect(mockedAxios.get).toHaveBeenCalled(); }); await waitFor(() => - expect(getByLabelText(labelShortcuts)).toBeInTheDocument(), + expect(getByLabelText(labelViewLogs)).toBeInTheDocument(), ); + userEvent.click(getByTestId(labelViewLogs)); - userEvent.click(getByLabelText(labelShortcuts).firstChild as HTMLElement); + expect(mockedNavigate).toHaveBeenCalledWith('/logs'); - expect(getAllByLabelText(labelViewLogs)[0]).toHaveAttribute( - 'href', - '/logs', - ); - expect(getAllByLabelText(labelViewReport)[0]).toHaveAttribute( - 'href', - '/reporting', - ); + userEvent.click(getByTestId(labelViewReport)); + + expect(mockedNavigate).toHaveBeenCalledWith('/reporting'); }); it('sets the details according to the details URL query parameter when given', async () => { diff --git a/www/front_src/src/Resources/helpers.ts b/www/front_src/src/Resources/helpers.ts new file mode 100644 index 00000000000..25a4d1afbd3 --- /dev/null +++ b/www/front_src/src/Resources/helpers.ts @@ -0,0 +1,16 @@ +interface ReplaceBasename { + endpoint: string; + newWord: string; +} + +export const replaceBasename = ({ + newWord, + endpoint, +}: ReplaceBasename): string => { + const basename = + (document + .getElementsByTagName('base')[0] + ?.getAttribute('href') as string) || ''; + + return endpoint.replace(basename, newWord); +}; From 836eae286c5e845edd9faf1397d38ec8876569c9 Mon Sep 17 00:00:00 2001 From: Nouha-ElAbrouki <97687698+Noha-ElAbrouki@users.noreply.github.com> Date: Tue, 30 Aug 2022 17:52:50 +0200 Subject: [PATCH 2/3] Update www/front_src/src/Resources/Details/Header.tsx Co-authored-by: JKancel --- www/front_src/src/Resources/Details/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/front_src/src/Resources/Details/Header.tsx b/www/front_src/src/Resources/Details/Header.tsx index fdb424a77d0..0b681c3fc73 100644 --- a/www/front_src/src/Resources/Details/Header.tsx +++ b/www/front_src/src/Resources/Details/Header.tsx @@ -146,7 +146,7 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => { newWord: '/', }); - navigate(`${url}`); + navigate(url); }; }; From 37850b3d4c0115fda927cd326b1774788870f12a Mon Sep 17 00:00:00 2001 From: Nouha-ElAbrouki <97687698+Noha-ElAbrouki@users.noreply.github.com> Date: Tue, 30 Aug 2022 17:52:55 +0200 Subject: [PATCH 3/3] Update www/front_src/src/Resources/Details/Header.tsx Co-authored-by: JKancel --- www/front_src/src/Resources/Details/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/front_src/src/Resources/Details/Header.tsx b/www/front_src/src/Resources/Details/Header.tsx index 0b681c3fc73..1ea9d3e243b 100644 --- a/www/front_src/src/Resources/Details/Header.tsx +++ b/www/front_src/src/Resources/Details/Header.tsx @@ -150,7 +150,7 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => { }; }; - if (details === undefined) { + if (!details) { return ; }