fix: LogViewer Breadcrumb links (#1803)

* The self link to Log Viewer is disabled (following the behaviour of
   other pages)
 * The dynamic link to Hardware Details now redirects to the proper
   page, using the hardwareId from the page that launched the log.

 Closes #1506

Author: alanpeixinho

dashboard/src/components/Log/LogViewerCard.tsx

@@ -2,7 +2,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { useMemo, type JSX } from 'react';
 
-import { Link, useRouterState } from '@tanstack/react-router';
+import { Link, useParams, useRouterState } from '@tanstack/react-router';
 
 import { SearchIcon } from '@/components/Icons/SearchIcon';
 import { StatusIcon } from '@/components/Icons/StatusIcons';
@@ -61,6 +61,7 @@ export const LogViewerCard = ({
     }
   }, [logUrl]);
 
+  const { hardwareId } = useParams({ strict: false });
   const { treeName, branch, id } = useRouterState({
     select: s => s.location.state,
   });
@@ -70,13 +71,17 @@ export const LogViewerCard = ({
   const logDataHash = logData?.git_commit_hash;
 
   const stateIsSetted = treeName && branch && id;
-  const stateParams = useMemo(
-    () =>
-      !stateIsSetted
-        ? { treeName: logDataTreeName, branch: logDataBranch, id: logDataHash }
-        : {},
-    [stateIsSetted, logDataTreeName, logDataBranch, logDataHash],
-  );
+  const stateParams = useMemo(() => {
+    if (stateIsSetted) {
+      return hardwareId ? { hardwareId } : {};
+    }
+    return {
+      hardwareId: hardwareId,
+      treeName: logDataTreeName,
+      branch: logDataBranch,
+      id: logDataHash,
+    };
+  }, [stateIsSetted, hardwareId, logDataTreeName, logDataBranch, logDataHash]);
 
   const linkComponent = useMemo(() => {
     if (logUrl) {

dashboard/src/main.tsx

@@ -44,6 +44,7 @@ declare module '@tanstack/react-router' {
     from?: RedirectFrom;
     treeName?: string;
     branch?: string;
+    hardwareId?: string;
     treeStatusCount?: {
       builds?: RequiredStatusCount;
       boots?: RequiredStatusCount;

dashboard/src/pages/LogViewer.tsx

@@ -69,8 +69,9 @@ export function LogViewer(): JSX.Element {
   ) : undefined;
   const { data: logData, isLoading } = useLogData(itemId ?? '', type);
 
-  const { treeName, branch, id } = historyState;
-  const canGoDirect = treeName && branch && id;
+  const { treeName, branch, id, hardwareId } = historyState;
+  const hasTreeDetailsLink = treeName && branch && id;
+  const hasHardwareDetailsLink = !!hardwareId;
 
   const breadcrumbComponent = useMemo(() => {
     if (!type || !itemId) {
@@ -92,15 +93,25 @@ export function LogViewer(): JSX.Element {
         messageId: base.messageId,
       });
 
-      if (canGoDirect) {
+      if (hasHardwareDetailsLink) {
+        components.push({
+          linkProps: {
+            to: '/hardware/$hardwareId',
+            params: { hardwareId },
+            state: s => s,
+            search: previousSearch,
+          },
+          messageId: 'hardware.details',
+        });
+      } else if (hasTreeDetailsLink) {
         components.push({
           linkProps: {
             to: '/tree/$treeName/$branch/$hash',
             params: { treeName: treeName, branch: branch, hash: id },
             state: s => s,
             search: previousSearch,
           },
-          messageId: details.messageId,
+          messageId: 'tree.details',
         });
       } else {
         components.push({
@@ -127,7 +138,7 @@ export function LogViewer(): JSX.Element {
         components.push({
           linkProps: {
             to: test.path,
-            params: { [details.paramKey]: id, buildId: itemId },
+            params: { [details.paramKey]: id, testId: itemId },
             state: s => s,
           },
           messageId: test.messageId,
@@ -153,7 +164,10 @@ export function LogViewer(): JSX.Element {
       }
     }
 
-    components.push({ linkProps: {}, messageId: 'logSheet.title' });
+    components.push({
+      linkProps: { disabled: true },
+      messageId: 'logSheet.title',
+    });
 
     return <MemoizedBreadcrumbGenerator components={components} />;
   }, [
@@ -164,7 +178,9 @@ export function LogViewer(): JSX.Element {
     branch,
     treeName,
     id,
-    canGoDirect,
+    hardwareId,
+    hasHardwareDetailsLink,
+    hasTreeDetailsLink,
   ]);
 
   return (