feat: add status icon to details header

Closes #895
kernelci · Feb 13, 2025 · 7dfe38f · 7dfe38f
1 parent 900ed46
commit 7dfe38f
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 14 deletions.
diff --git a/dashboard/src/components/BuildDetails/BuildDetails.tsx b/dashboard/src/components/BuildDetails/BuildDetails.tsx
@@ -1,5 +1,3 @@
-import { MdClose, MdCheck } from 'react-icons/md';
-
 import { useIntl } from 'react-intl';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useCallback, useMemo, useState } from 'react';
@@ -35,6 +33,7 @@ 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 BuildDetailsTestSection from './BuildDetailsTestSection';
 
@@ -104,6 +103,7 @@ const BuildDetails = ({
             ? `${data.git_commit_name} • ${data.config_name}`
             : data.config_name,
         ),
+        leftIcon: <StatusIcon status={data?.valid} />,
         eyebrow: formatMessage({ id: 'buildDetails.buildDetails' }),
         subsections: [
           {
@@ -158,11 +158,7 @@ const BuildDetails = ({
                   : data.valid !== null
                     ? 'INVALID'
                     : 'NULL',
-                icon: data.valid ? (
-                  <MdCheck className="text-green text-xl" />
-                ) : (
-                  <MdClose className="text-red text-xl" />
-                ),
+                icon: <StatusIcon status={data?.valid} className="text-xl" />,
               },
               {
                 title: 'global.architecture',

diff --git a/dashboard/src/components/Icons/StatusIcons.tsx b/dashboard/src/components/Icons/StatusIcons.tsx
@@ -0,0 +1,30 @@
+import { match, P } from 'ts-pattern';
+
+import { MdCheck, MdClose, MdOutlinePending } from 'react-icons/md';
+
+import { cn } from '@/lib/utils';
+
+import type { Status } from '@/types/database';
+
+const commonClass = 'text-2xl';
+
+export const StatusIcon = ({
+  className,
+  status,
+}: {
+  className?: string;
+  status?: Status | boolean;
+}): JSX.Element => {
+  return match(status)
+    .with(P.union('PASS', true), _ => (
+      <MdCheck className={cn(commonClass, className, 'text-green')} />
+    ))
+    .with(P.union('FAIL', false), _ => (
+      <MdClose className={cn(commonClass, className, 'text-red')} />
+    ))
+    .otherwise(_ => (
+      <MdOutlinePending
+        className={cn(commonClass, className, 'text-amber-500')}
+      />
+    ));
+};
diff --git a/dashboard/src/components/Section/LogspecSection.tsx b/dashboard/src/components/Section/LogspecSection.tsx
@@ -33,7 +33,7 @@ export const getLogspecSection = ({
 
   const logspecSection: ISection = {
     title: title,
-    icon: <LogspecInfoIcon />,
+    rightIcon: <LogspecInfoIcon />,
     subsections: [
       {
         // General subsection

diff --git a/dashboard/src/components/Section/Section.tsx b/dashboard/src/components/Section/Section.tsx
@@ -12,7 +12,8 @@ import { LinkIcon } from '@/components/Icons/Link';
 
 export interface ISection {
   title: string;
-  icon?: JSX.Element;
+  rightIcon?: JSX.Element;
+  leftIcon?: JSX.Element;
   subsections?: ISubsection[];
   eyebrow?: string | ReactElement;
 }
@@ -84,7 +85,8 @@ const Section = ({
   title,
   subsections,
   eyebrow,
-  icon,
+  rightIcon,
+  leftIcon,
 }: ISection): JSX.Element => {
   const sections = useMemo(
     () =>
@@ -101,9 +103,10 @@ const Section = ({
     <div className="text-dim-gray flex flex-col gap-4">
       <div className="flex flex-col gap-2">
         <span className="text-sm">{eyebrow}</span>
-        <div className="flex flex-row gap-2">
+        <div className="flex flex-row items-center gap-2">
+          {leftIcon}
           <span className="text-2xl font-bold">{title}</span>
-          {icon}
+          {rightIcon}
         </div>
       </div>
       {sections}

diff --git a/dashboard/src/components/Section/SectionGroup.tsx b/dashboard/src/components/Section/SectionGroup.tsx
@@ -16,7 +16,8 @@ const SectionGroup = ({ sections }: ISectionGroup): JSX.Element => {
           title={section.title}
           subsections={section.subsections}
           eyebrow={section.eyebrow}
-          icon={section.icon}
+          leftIcon={section.leftIcon}
+          rightIcon={section.rightIcon}
         />
       )),
     [sections],

diff --git a/dashboard/src/components/TestDetails/TestDetails.tsx b/dashboard/src/components/TestDetails/TestDetails.tsx
@@ -29,6 +29,7 @@ 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';
 
 const TestDetailsSections = ({
   test,
@@ -86,12 +87,14 @@ const TestDetailsSections = ({
     return {
       title: test.path,
       eyebrow: formatMessage({ id: 'test.details' }),
+      leftIcon: <StatusIcon status={test.status} />,
       subsections: [
         {
           infos: [
             {
               title: 'global.status',
               linkText: truncateBigText(test.status),
+              icon: <StatusIcon status={test.status} className="text-xl" />,
             },
             {
               title: 'global.tree',

diff --git a/dashboard/src/types/tree/TestDetails.tsx b/dashboard/src/types/tree/TestDetails.tsx
@@ -1,3 +1,5 @@
+import type { Status } from '@/types/database';
+
 export type TTestDetails = {
   architecture: string;
   build_id: string;
@@ -12,7 +14,7 @@ export type TTestDetails = {
   log_url: string | undefined;
   path: string;
   start_time: string;
-  status: string;
+  status: Status;
   environment_compatible?: string[];
   environment_misc?: Record<string, unknown>;
   misc?: Record<string, unknown>;