Refactor: log viewer improvements details pages

dashboard/src/components/BuildDetails/BuildDetails.tsx

@@ -20,7 +20,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,
@@ -40,12 +40,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 { MemoizedBuildDetailsOGTags } from '@/components/OpenGraphTags/BuildDetailsOGTags';
+import ButtonOpenLogSheet from '@/components/Button/ButtonOpenLogSheet';
 
 import BuildDetailsTestSection from './BuildDetailsTestSection';
 
@@ -74,8 +74,6 @@ const BuildDetails = ({
   const navigate = useNavigate({ from: '/build/$buildId' });
   const { formatMessage } = useIntl();
 
-  const hasUsefulLogInfo = data?.log_url || data?.log_excerpt;
-
   const [sheetType, setSheetType] = useState<SheetType>('log');
   const [jsonContent, setJsonContent] = useState<IJsonContent>();
   const logOpenChange = useCallback(
@@ -124,6 +122,7 @@ const BuildDetails = ({
     return [
       {
         title: buildDetailsTitle,
+        subtitle: <ButtonOpenLogSheet setSheetToLog={setSheetToLog} />,
         leftIcon: <StatusIcon status={data?.valid} />,
         eyebrow: formatMessage({ id: 'buildDetails.buildDetails' }),
         subsections: [
@@ -206,9 +205,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',
@@ -222,14 +219,7 @@ const BuildDetails = ({
         ],
       },
     ];
-  }, [
-    data,
-    buildDetailsTitle,
-    formatMessage,
-    buildId,
-    hasUsefulLogInfo,
-    setSheetToLog,
-  ]);
+  }, [data, buildDetailsTitle, setSheetToLog, formatMessage, buildId]);
 
   const sectionsData: ISection[] = useMemo(() => {
     return [...generalSections, miscSection, filesSection].filter(
@@ -282,6 +272,7 @@ const BuildDetails = ({
             <LogOrJsonSheetContent
               type={sheetType}
               jsonContent={jsonContent}
+              hideIssueSection
               logUrl={data?.log_url}
               logExcerpt={data?.log_excerpt}
             />

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 { SearchIcon } from '@/components/Icons/SearchIcon';
+
+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" />
+    <SearchIcon />
+  </SheetTrigger>
+);
+
+export default ButtonOpenLogSheet;

dashboard/src/components/Icons/SearchIcon.tsx

@@ -0,0 +1,7 @@
+import { MdOutlineSearch } from 'react-icons/md';
+
+import type { JSX } from 'react';
+
+export const SearchIcon = (): JSX.Element => (
+  <MdOutlineSearch className="text-blue" />
+);

dashboard/src/components/Sheet/LogOrJsonSheetContent.tsx

@@ -26,6 +26,7 @@ interface ILogSheet {
   navigationLogsActions?: TNavigationLogActions;
   currentLinkProps?: LinkProps;
   issues?: TIssue[];
+  hideIssueSection?: boolean;
   status?: UseQueryResult['status'];
   error?: UseQueryResult['error'];
 }
@@ -43,6 +44,7 @@ export const LogOrJsonSheetContent = ({
   navigationLogsActions,
   currentLinkProps,
   issues,
+  hideIssueSection,
   status,
   error,
 }: ILogSheet): JSX.Element => {
@@ -66,12 +68,15 @@ export const LogOrJsonSheetContent = ({
             logExcerpt={logExcerpt}
             isLoading={navigationLogsActions?.isLoading}
           />
-          <IssueSection
-            data={issues}
-            status={status ?? 'success'}
-            error={error?.message}
-            variant="warning"
-          />
+
+          {!hideIssueSection && (
+            <IssueSection
+              data={issues}
+              status={status ?? 'success'}
+              error={error?.message}
+              variant="warning"
+            />
+          )}
         </>
       ) : (
         <ReactJsonView

dashboard/src/components/TestDetails/TestDetails.tsx

@@ -14,7 +14,7 @@ import {
 
 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';
@@ -34,7 +34,6 @@ 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';
 
@@ -43,6 +42,7 @@ import { getTitle } from '@/utils/utils';
 import { getTestHardware } from '@/lib/test';
 
 import { MemoizedTestDetailsOGTags } from '@/components/OpenGraphTags/TestDetailsOGTags';
+import ButtonOpenLogSheet from '@/components/Button/ButtonOpenLogSheet';
 
 const LinkItem = ({ children, ...props }: LinkProps): JSX.Element => {
   return (
@@ -129,8 +129,6 @@ const TestDetailsSections = ({
     test.tree_name,
   ]);
 
-  const hasUsefulLogInfo = test.log_url || test.log_excerpt;
-
   const setSheetToLog = useCallback(
     (): void => setSheetType('log'),
     [setSheetType],
@@ -139,6 +137,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: [
@@ -167,14 +166,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',
@@ -252,7 +249,6 @@ const TestDetailsSections = ({
     test.id,
     test.environment_compatible,
     formatMessage,
-    hasUsefulLogInfo,
     setSheetToLog,
     treeDetailsLink,
     buildDetailsLink,
@@ -368,6 +364,7 @@ const TestDetails = ({ breadcrumb }: TestsDetailsProps): JSX.Element => {
             type={sheetType}
             jsonContent={jsonContent}
             logUrl={data?.log_url}
+            hideIssueSection
             logExcerpt={data?.log_excerpt}
           />
         </Sheet>

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',