enh(Resources/header): Display the 2 access pictograms logs and repor…

…t on details panel (#11478) * Display the 2 access pictograms logs and report on details panel * Update www/front_src/src/Resources/Details/Header.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Resources/Details/Header.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * fixes * fix test * fix eslint * update style * update style * add test * use divider insead of border css * Update www/front_src/src/Resources/Details/Header.tsx Co-authored-by: Tom Darneix <tomdar87@outlook.com> * Update www/front_src/src/Resources/Details/index.test.tsx Co-authored-by: Bruno d'Auria <bdauria@centreon.com> Co-authored-by: Tom Darneix <tomdar87@outlook.com> Co-authored-by: Bruno d'Auria <bdauria@centreon.com>
centreon · Aug 24, 2022 · d30f5cc · d30f5cc
1 parent d15ee12
commit d30f5cc
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 127 deletions.
diff --git 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,
@@ -12,7 +13,10 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import SettingsIcon from '@mui/icons-material/Settings';
+import LogsIcon from '@mui/icons-material/Assignment';
+import ReportIcon from '@mui/icons-material/Assessment';
 import { CreateCSSProperties } from '@mui/styles';
+import Divider from '@mui/material/Divider';
 
 import {
   StatusChip,
@@ -26,13 +30,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 '.';
 
@@ -41,22 +46,33 @@ interface MakeStylesProps {
 }
 
 const useStyles = makeStyles<Theme, MakeStylesProps>((theme) => ({
+  containerIcons: {
+    alignItems: 'center',
+    display: 'flex',
+  },
+  divider: {
+    borderColor: theme.palette.text.secondary,
+    margin: theme.spacing(1, 0.5),
+  },
   header: ({ displaySeverity }): CreateCSSProperties<MakeStylesProps> => ({
     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',
     display: 'grid',
     gridGap: theme.spacing(1),
     gridTemplateColumns: 'auto minmax(0, 1fr)',
   },
+  report: {
+    marginLeft: theme.spacing(0.5),
+  },
   resourceName: {
     alignItems: 'center',
     columnGap: theme.spacing(1),
@@ -108,6 +124,7 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
     displaySeverity: not(isNil(details?.severity)),
   });
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const { copy } = useCopyToClipboard({
     errorMessage: t(labelSomethingWentWrong),
@@ -116,6 +133,19 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
 
   const copyLink = (): Promise<void> => copy(window.location.href);
 
+  const navigateToResourceUris = (
+    category: keyof ResourceUris,
+  ): (() => void) => {
+    return (): void => {
+      const url = replaceBasename({
+        endpoint: prop(category, resourceUris) || '',
+        newWord: '/',
+      });
+
+      navigate(`${url}`);
+    };
+  };
+
   if (details === undefined) {
     return <LoadingSkeleton />;
   }
@@ -194,19 +224,37 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
           </div>
         )}
       </div>
-      <ShortcutsTooltip
-        data-testid={labelShortcuts}
-        resourceUris={resourceUris}
-      />
-      <IconButton
-        ariaLabel={t(labelCopyLink)}
-        data-testid={labelCopyLink}
-        size="small"
-        title={t(labelCopyLink)}
-        onClick={copyLink}
-      >
-        <CopyIcon fontSize="small" />
-      </IconButton>
+      <div className={classes.containerIcons}>
+        <IconButton
+          ariaLabel={t(labelViewLogs)}
+          data-testid={labelViewLogs}
+          size="small"
+          title={t(labelViewLogs)}
+          onClick={navigateToResourceUris('logs')}
+        >
+          <LogsIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          ariaLabel={t(labelViewReport)}
+          className={classes.report}
+          data-testid={labelViewReport}
+          size="small"
+          title={t(labelViewReport)}
+          onClick={navigateToResourceUris('reporting')}
+        >
+          <ReportIcon fontSize="small" />
+        </IconButton>
+        <Divider flexItem className={classes.divider} orientation="vertical" />
+        <IconButton
+          ariaLabel={t(labelCopyLink)}
+          data-testid={labelCopyLink}
+          size="small"
+          title={t(labelCopyLink)}
+          onClick={copyLink}
+        >
+          <CopyIcon fontSize="small" />
+        </IconButton>
+      </div>
     </div>
   );
 };

diff --git a/www/front_src/src/Resources/Details/ShortcutsTooltip.tsx b/www/front_src/src/Resources/Details/ShortcutsTooltip.tsx
diff --git a/www/front_src/src/Resources/Details/index.test.tsx b/www/front_src/src/Resources/Details/index.test.tsx
@@ -43,9 +43,9 @@ import {
   labelCommand,
   labelComment,
   labelConfigure,
+  labelDetails,
   labelViewLogs,
   labelViewReport,
-  labelDetails,
   labelCopyLink,
   labelServices,
   labelFqdn,
@@ -62,7 +62,6 @@ import {
   labelAvg,
   labelCompactTimePeriod,
   labelCheck,
-  labelShortcuts,
   labelMonitoringServer,
   labelToday,
   labelYesterday,
@@ -575,6 +574,12 @@ const renderDetails = (): RenderResult => render(<DetailsWithJotai />);
 
 const mockedLocalStorageGetItem = jest.fn();
 const mockedLocalStorageSetItem = jest.fn();
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: (): jest.Mock => mockedNavigate,
+}));
 
 Storage.prototype.getItem = mockedLocalStorageGetItem;
 Storage.prototype.setItem = mockedLocalStorageSetItem;
@@ -986,15 +991,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',
           },
         },
       },
@@ -1004,26 +1009,25 @@ 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(getByLabelText(labelShortcuts).firstChild as HTMLElement);
+    expect(getByLabelText(labelViewReport)).toBeInTheDocument();
 
-    expect(getAllByLabelText(labelViewLogs)[0]).toHaveAttribute(
-      'href',
-      '/logs',
-    );
-    expect(getAllByLabelText(labelViewReport)[0]).toHaveAttribute(
-      'href',
-      '/reporting',
-    );
+    userEvent.click(getByTestId(labelViewLogs));
+
+    expect(mockedNavigate).toHaveBeenCalledWith('/logs');
+
+    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
@@ -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);
+};