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

…t on details panel (#11618)

* Display the 2 access pictograms logs and report on details panel

* Update www/front_src/src/Resources/Details/Header.tsx

Co-authored-by: JKancel <JKancel@users.noreply.github.com>

* Update www/front_src/src/Resources/Details/Header.tsx

Co-authored-by: JKancel <JKancel@users.noreply.github.com>

Co-authored-by: JKancel <JKancel@users.noreply.github.com>

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,22 +47,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),
@@ -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,7 +137,20 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
     }
   };
 
-  if (details === undefined) {
+  const navigateToResourceUris = (
+    category: keyof ResourceUris,
+  ): (() => void) => {
+    return (): void => {
+      const url = replaceBasename({
+        endpoint: prop(category, resourceUris) || '',
+        newWord: '/',
+      });
+
+      navigate(url);
+    };
+  };
+
+  if (!details) {
     return <LoadingSkeleton />;
   }
 
@@ -196,19 +226,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={copyResourceLink}
-      >
-        <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={copyResourceLink}
+        >
+          <CopyIcon fontSize="small" />
+        </IconButton>
+      </div>
     </div>
   );
 };

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 => (
   </Provider>
 );
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: (): jest.Mock => mockedNavigate,
+}));
+
 const renderDetails = (): RenderResult => render(<DetailsWithJotai />);
 
 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 () => {

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