feat: change the log viewer to a subtitle button

- add a button below the section title in builds and tests details Close #992
kernelci · Feb 24, 2025 · ac0d5e4 · ac0d5e4
1 parent bc229ca
commit ac0d5e4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 35 deletions.
diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx
@@ -15,7 +15,7 @@ import IssueSection from '@/components/Issue/IssueSection';
 
 import { shouldTruncate, valueOrEmpty } from '@/lib/string';
 
-import { Sheet, SheetTrigger } from '@/components/Sheet';
+import { Sheet } from '@/components/Sheet';
 
 import type {
   TableFilter,
@@ -35,11 +35,12 @@ import { getFilesSection } from '@/components/Section/FilesSection';
 
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-import { LogViewIcon } from '@/components/Icons/LogView';
 import { StatusIcon } from '@/components/Icons/StatusIcons';
 
 import PageWithTitle from '@/components/PageWithTitle';
 
+import ButtonOpenLogSheet from '@/components/Button/ButtonOpenLogSheet';
+
 import BuildDetailsTestSection from './BuildDetailsTestSection';
 
 interface BuildDetailsProps {
@@ -66,8 +67,6 @@ const BuildDetails = ({
 
   const { formatMessage } = useIntl();
 
-  const hasUsefulLogInfo = data?.log_url || data?.log_excerpt;
-
   const [sheetType, setSheetType] = useState<SheetType>('log');
   const [jsonContent, setJsonContent] = useState<IJsonContent>();
 
@@ -108,6 +107,7 @@ const BuildDetails = ({
             ? `${data.git_commit_name} • ${data.config_name}`
             : data.config_name,
         ),
+        subtitle: <ButtonOpenLogSheet setSheetToLog={setSheetToLog} />,
         leftIcon: <StatusIcon status={data?.valid} />,
         eyebrow: formatMessage({ id: 'buildDetails.buildDetails' }),
         subsections: [
@@ -190,9 +190,7 @@ const BuildDetails = ({
                 linkText: (
                   <TruncatedValueTooltip value={data.log_url} isUrl={true} />
                 ),
-                icon: hasUsefulLogInfo ? <LogViewIcon /> : undefined,
-                wrapperComponent: hasUsefulLogInfo ? SheetTrigger : undefined,
-                onClick: hasUsefulLogInfo ? setSheetToLog : undefined,
+                link: data.log_url,
               },
               {
                 title: 'buildDetails.kernelConfig',
@@ -206,7 +204,7 @@ const BuildDetails = ({
         ],
       },
     ];
-  }, [data, formatMessage, hasUsefulLogInfo, buildId, setSheetToLog]);
+  }, [data, setSheetToLog, formatMessage, buildId]);
 
   const sectionsData: ISection[] = useMemo(() => {
     return [...generalSections, miscSection, filesSection].filter(

diff --git a/dashboard/src/components/Button/ButtonOpenLogSheet.tsx b/dashboard/src/components/Button/ButtonOpenLogSheet.tsx
@@ -0,0 +1,22 @@
+import type { JSX } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { SheetTrigger } from '@/components/Sheet';
+import { BlueSearchIcon } from '@/components/Icons/BlueSearch';
+
+const ButtonOpenLogSheet = ({
+  setSheetToLog,
+}: {
+  setSheetToLog: () => void;
+}): JSX.Element => (
+  <SheetTrigger
+    className="text-blue flex flex-row items-center gap-2 self-start"
+    onClick={setSheetToLog}
+  >
+    <FormattedMessage id="global.viewLog" />
+    <BlueSearchIcon />
+  </SheetTrigger>
+);
+
+export default ButtonOpenLogSheet;
diff --git a/dashboard/src/components/Icons/BlueSearch.tsx b/dashboard/src/components/Icons/BlueSearch.tsx
@@ -0,0 +1,7 @@
+import { MdOutlineSearch } from 'react-icons/md';
+
+import type { JSX } from 'react';
+
+export const BlueSearchIcon = (): JSX.Element => (
+  <MdOutlineSearch className="text-blue" />
+);
diff --git a/dashboard/src/components/Icons/LogView.tsx b/dashboard/src/components/Icons/LogView.tsx
diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx
@@ -8,7 +8,7 @@ import { Link, useRouterState, useSearch } from '@tanstack/react-router';
 
 import { shouldTruncate, truncateBigText, valueOrEmpty } from '@/lib/string';
 import type { TTestDetails } from '@/types/tree/TestDetails';
-import { Sheet, SheetTrigger } from '@/components/Sheet';
+import { Sheet } from '@/components/Sheet';
 import { useTestDetails, useTestIssues } from '@/api/testDetails';
 
 import { RedirectFrom } from '@/types/general';
@@ -28,12 +28,12 @@ import { getFilesSection } from '@/components/Section/FilesSection';
 import { TruncatedValueTooltip } from '@/components/Tooltip/TruncatedValueTooltip';
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-import { LogViewIcon } from '@/components/Icons/LogView';
 import { LinkIcon } from '@/components/Icons/Link';
 import { StatusIcon } from '@/components/Icons/StatusIcons';
 
 import PageWithTitle from '@/components/PageWithTitle';
 import { getTitle } from '@/utils/utils';
+import ButtonOpenLogSheet from '@/components/Button/ButtonOpenLogSheet';
 
 const LinkItem = ({ children, ...props }: LinkProps): JSX.Element => {
   return (
@@ -141,8 +141,6 @@ const TestDetailsSections = ({
     test.tree_name,
   ]);
 
-  const hasUsefulLogInfo = test.log_url || test.log_excerpt;
-
   const setSheetToLog = useCallback(
     (): void => setSheetType('log'),
     [setSheetType],
@@ -151,6 +149,7 @@ const TestDetailsSections = ({
   const generalSection: ISection = useMemo(() => {
     return {
       title: test.path,
+      subtitle: <ButtonOpenLogSheet setSheetToLog={setSheetToLog} />,
       eyebrow: formatMessage({ id: 'test.details' }),
       leftIcon: <StatusIcon status={test.status} />,
       subsections: [
@@ -179,14 +178,12 @@ const TestDetailsSections = ({
             },
             {
               title: 'global.logs',
-              icon: hasUsefulLogInfo ? <LogViewIcon /> : undefined,
               linkText: shouldTruncate(valueOrEmpty(test.log_url)) ? (
                 <TruncatedValueTooltip value={test.log_url} isUrl={true} />
               ) : (
                 valueOrEmpty(test.log_url)
               ),
-              wrapperComponent: hasUsefulLogInfo ? SheetTrigger : undefined,
-              onClick: hasUsefulLogInfo ? setSheetToLog : undefined,
+              link: test.log_url,
             },
             {
               title: 'commonDetails.gitCommitHash',
@@ -264,7 +261,6 @@ const TestDetailsSections = ({
     test.id,
     test.environment_compatible,
     formatMessage,
-    hasUsefulLogInfo,
     setSheetToLog,
     treeDetailsLink,
     buildDetailsLink,

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -181,7 +181,7 @@ export const messages = {
     'global.unknown': 'Unknown',
     'global.url': 'URL',
     'global.viewJson': 'View Json',
-    'global.viewLog': 'View Log',
+    'global.viewLog': 'View Log Excerpt',
     'global.warning': 'Warning',
     'globalDetails.artifacts': 'Artifacts',
     'globalDetails.environmentMiscData': 'Environment Misc Data',