fix(dashboard): fixing datetime at builds list

Now tooltip shows right date and time. Closes #318
kernelci · Sep 20, 2024 · 4aac24a · 4aac24a
1 parent 96c292c
commit 4aac24a
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 21 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -16,6 +16,7 @@
     "pypush": "cd .. && cd backend && sh pre-push"
   },
   "dependencies": {
+    "@date-fns/tz": "^1.0.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.7",
@@ -42,6 +43,7 @@
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.0.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "lucide-react": "^0.396.0",
     "react": "^18.3.1",

diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
diff --git a/dashboard/src/components/Accordion/Accordion.tsx b/dashboard/src/components/Accordion/Accordion.tsx
@@ -28,6 +28,8 @@ import {
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
 
+import { TooltipDateTime } from '@/components/TooltipDateTime';
+
 import AccordionBuildContent from './BuildAccordionContent';
 
 export interface IAccordion {
@@ -165,7 +167,18 @@ const AccordionBuildsTrigger = ({
     <>
       <TableCell>{triggerInfo.config}</TableCell>
       <TableCell>{triggerInfo.compiler}</TableCell>
-      <TableCell>{triggerInfo.date}</TableCell>
+      <TableCell>
+        {triggerInfo.date ? (
+          <TooltipDateTime
+            dateTime={triggerInfo.date}
+            lineBreak={true}
+            showLabelTime={true}
+            showLabelTZ={true}
+          />
+        ) : (
+          '-'
+        )}
+      </TableCell>
       <TableCell>
         <ColoredCircle
           className="max-w-6"
@@ -255,7 +268,14 @@ const TestTableRow = ({ test, onClick }: ITestTableRow): JSX.Element => {
     >
       <TableCell>{test.path}</TableCell>
       <TableCell>{test.status}</TableCell>
-      <TableCell>{test.start_time ?? '-'}</TableCell>
+      <TableCell>
+        <TooltipDateTime
+          dateTime={test.start_time}
+          lineBreak={true}
+          showLabelTime={true}
+          showLabelTZ={true}
+        />
+      </TableCell>
       <TableCell>{test.duration ?? '-'}</TableCell>
       <TableCell>
         <ChevronRightAnimate />

diff --git a/dashboard/src/components/Table/BootsTable.tsx b/dashboard/src/components/Table/BootsTable.tsx
@@ -5,6 +5,7 @@ import { useNavigate, useSearch } from '@tanstack/react-router';
 import { MdChevronRight } from 'react-icons/md';
 
 import BaseTable from '@/components/Table/BaseTable';
+import { TooltipDateTime } from '@/components/TooltipDateTime';
 import { TableInfo } from '@/components/Table/TableInfo';
 import { TableCell, TableRow } from '@/components/ui/table';
 import { usePagination } from '@/hooks/usePagination';
@@ -124,7 +125,14 @@ const BootsTable = ({ treeId, testHistory }: ITestsTable): JSX.Element => {
       <TableRow onClick={() => onClickName(test.id)} key={test.id}>
         <TableCell>{test.path}</TableCell>
         <TableCell>{test.status}</TableCell>
-        <TableCell>{test.startTime ?? '-'}</TableCell>
+        <TableCell>
+          <TooltipDateTime
+            dateTime={test.startTime}
+            lineBreak={true}
+            showLabelTime={true}
+            showLabelTZ={true}
+          />
+        </TableCell>
         <TableCell>{test.duration ?? '-'}</TableCell>
         <TableCell>
           <MdChevronRight />

diff --git a/dashboard/src/components/Table/TreeTable.tsx b/dashboard/src/components/Table/TreeTable.tsx
@@ -18,6 +18,8 @@ import { TreeTableBody, zOrigin } from '@/types/tree/Tree';
 
 import { TableRow, TableCell, TableBody } from '@/components/ui/table';
 
+import { TooltipDateTime } from '@/components/TooltipDateTime';
+
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/Tooltip';
 
 import HeaderWithInfo from '@/pages/TreeDetails/Tabs/HeaderWithInfo';
@@ -101,10 +103,6 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => {
     ],
   );
 
-  const dateObj = new Date(row.date);
-  const date = dateObj.toLocaleDateString();
-  const time = dateObj.toLocaleTimeString();
-
   return (
     <TableRow>
       <TableCell
@@ -138,18 +136,7 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => {
         onClick={navigateToTreeDetailPage}
         data-target="treeDetails.builds"
       >
-        <Tooltip>
-          <TooltipTrigger>
-            <div>{date}</div>
-          </TooltipTrigger>
-          <TooltipContent>
-            <div className="text-center">
-              {date}
-              <br />
-              {time}
-            </div>
-          </TooltipContent>
-        </Tooltip>
+        <TooltipDateTime dateTime={row.date} lineBreak={true} />
       </TableCell>
       <TableCell
         onClick={navigateToTreeDetailPage}

diff --git a/dashboard/src/components/TooltipDateTime/TooltipDateTime.tsx b/dashboard/src/components/TooltipDateTime/TooltipDateTime.tsx
@@ -0,0 +1,56 @@
+import { format, isValid } from 'date-fns';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/Tooltip';
+import { getDateOffset } from '@/utils/utils';
+
+type TooltipDateTimeProps = {
+  dateTime: string;
+  dateFormat?: string;
+  timeFormat?: string;
+  lineBreak?: boolean;
+  showLabelTime?: boolean;
+  showLabelTZ?: boolean;
+  showTooltip?: boolean;
+};
+
+const TooltipDateTime = ({
+  dateTime,
+  dateFormat,
+  timeFormat,
+  lineBreak = true,
+  showLabelTime,
+  showLabelTZ = false,
+  showTooltip = true,
+}: TooltipDateTimeProps): JSX.Element => {
+  const dateObj = new Date(dateTime);
+  if (!isValid(dateObj)) return <div>-</div>;
+
+  const date = dateFormat
+    ? format(dateObj, dateFormat)
+    : dateObj.toLocaleDateString();
+  const time = timeFormat
+    ? format(dateObj, timeFormat)
+    : dateObj.toLocaleTimeString();
+  const tz = getDateOffset(dateObj);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <div>
+          {date} {showLabelTime ? time : ''} {showLabelTZ ? tz : ''}
+        </div>
+      </TooltipTrigger>
+      {showTooltip && (
+        <TooltipContent>
+          <div className="text-center">
+            {date}
+            {lineBreak ? <br /> : ' '}
+            {time} {tz}
+          </div>
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+};
+
+export default TooltipDateTime;
diff --git a/dashboard/src/components/TooltipDateTime/index.tsx b/dashboard/src/components/TooltipDateTime/index.tsx
@@ -0,0 +1,3 @@
+import TooltipDateTime from './TooltipDateTime';
+
+export { TooltipDateTime };
diff --git a/dashboard/src/pages/BuildDetails/BuildDetails.tsx b/dashboard/src/pages/BuildDetails/BuildDetails.tsx
@@ -14,6 +14,8 @@ import { ISection } from '@/components/Section/Section';
 import { useBuildDetails } from '@/api/BuildDetails';
 import UnexpectedError from '@/components/UnexpectedError/UnexpectedError';
 
+import { formatDate } from '@/utils/utils';
+
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -85,7 +87,7 @@ const BuildDetails = (): JSX.Element => {
               },
               {
                 title: intl.formatMessage({ id: 'global.date' }),
-                linkText: valueOrEmpty(data.timestamp),
+                linkText: formatDate(valueOrEmpty(data.start_time)),
               },
               {
                 title: intl.formatMessage({ id: 'global.defconfig' }),

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
@@ -156,7 +156,7 @@ const BuildTab = ({ treeDetailsData }: BuildTab): JSX.Element => {
       ) : (
         '-'
       ),
-      date: row.date?.split('T')[0],
+      date: row.date,
     }));
   }, [treeDetailsData?.builds]);
 

diff --git a/dashboard/src/utils/utils.ts b/dashboard/src/utils/utils.ts
@@ -1,3 +1,5 @@
+import { format } from 'date-fns';
+
 export function formatDate(date: Date | string): string {
   const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
@@ -14,3 +16,7 @@ export function formatDate(date: Date | string): string {
 
   return new Intl.DateTimeFormat('en-US', options).format(date);
 }
+
+export const getDateOffset = (date: Date): string => {
+  return format(date, 'z');
+};