feat: show dataset execution time and duration (#84)

ntua-unit-of-control-and-informatics · Dec 2, 2024 · 40a9e7b · 40a9e7b
1 parent 582b6e1
commit 40a9e7b
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 11 deletions.
diff --git a/src/app/dashboard/models/[modelId]/[tabName]/page.tsx b/src/app/dashboard/models/[modelId]/[tabName]/page.tsx
@@ -17,7 +17,7 @@ import { Tooltip } from '@nextui-org/tooltip';
 import { logger } from '@/logger';
 import CustomErrorPage from '@/app/components/CustomErrorPage';
 import Alert from '@/app/components/Alert';
-import { getUserFriendlyDate } from '@/app/util/date';
+import { getUserFriendlyDateWithSuffix } from '@/app/util/date';
 import { addDays } from 'date-fns';
 import { Link } from '@nextui-org/link';
 import { User } from '@nextui-org/react';
@@ -155,7 +155,7 @@ export default async function Page({ params }: { params: ModelPageParams }) {
       log.error('Archived at date is missing on an archived model');
       return '';
     }
-    return getUserFriendlyDate(addDays(new Date(archivedAt), 30));
+    return getUserFriendlyDateWithSuffix(addDays(new Date(archivedAt), 30));
   };
 
   return (

diff --git a/src/app/dashboard/models/[modelId]/components/DatasetResults.tsx b/src/app/dashboard/models/[modelId]/components/DatasetResults.tsx
@@ -27,8 +27,7 @@ import { Button } from '@nextui-org/button';
 import {
   ArrowDownTrayIcon,
   BugAntIcon,
-  EyeIcon,
-  InformationCircleIcon,
+  CalendarDaysIcon,
 } from '@heroicons/react/24/solid';
 import { Accordion, AccordionItem } from '@nextui-org/accordion';
 import { logger } from '@/logger';
@@ -45,6 +44,13 @@ import { Tab, Tabs } from '@nextui-org/tabs';
 import PBPKPlots from '@/app/dashboard/models/[modelId]/components/PBPKPlots';
 import { Pagination } from '@nextui-org/pagination';
 import { Input } from '@nextui-org/input';
+import { Tooltip } from '@nextui-org/tooltip';
+import { format, formatDistance } from 'date-fns';
+import { ClockIcon } from '@heroicons/react/24/outline';
+import {
+  getUserFriendlyDateWithSuffix,
+  getUserFriendlyDuration,
+} from '@/app/util/date';
 
 const log = logger.child({ module: 'dataset' });
 
@@ -78,6 +84,40 @@ function downloadResultsCSV(model: ModelDto, dataset: DatasetDto) {
     .catch((error) => log.error('Error:', error));
 }
 
+function getExecutionTimeNode(dataset: DatasetDto | null | undefined) {
+  if (!dataset?.executedAt) return null;
+  const executionFinishedAt = dataset?.executionFinishedAt as unknown as string;
+  const executedAt = dataset?.executedAt as unknown as string;
+
+  const executionTimeInMs =
+    new Date(executionFinishedAt).getTime() - new Date(executedAt).getTime();
+
+  return (
+    <>
+      <div className="flex items-center gap-2 text-foreground/50">
+        <Tooltip content="Executed at" closeDelay={0}>
+          <div className="flex items-center gap-1">
+            <CalendarDaysIcon className="size-6" />
+            <span className="text-sm">
+              {getUserFriendlyDateWithSuffix(new Date(executedAt))}
+            </span>
+          </div>
+        </Tooltip>
+        {dataset?.executionFinishedAt && (
+          <Tooltip content="Execution duration" closeDelay={0}>
+            <div className="flex items-center gap-1">
+              <ClockIcon className="size-6" />
+              <span className="text-sm">
+                {getUserFriendlyDuration(executionTimeInMs)}
+              </span>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    </>
+  );
+}
+
 export default function DatasetResults({
   datasetId,
   model,
@@ -196,7 +236,7 @@ export default function DatasetResults({
                 </Accordion>
               </div>
             )}
-            <div>
+            <div className="flex items-center">
               <Link
                 href={`/dashboard/models/${model.id}/results/${datasetId}`}
                 isExternal
@@ -207,6 +247,7 @@ export default function DatasetResults({
               </Link>
               {getDatasetStatusNode(dataset)}
             </div>
+            <div>{getExecutionTimeNode(dataset)}</div>
             {!isLoaded && (
               <div className="flex w-full flex-col gap-2">
                 <Skeleton className="h-3 w-3/5 rounded-lg" />

diff --git a/src/app/dashboard/models/[modelId]/components/JaqpotTimeAgo.tsx b/src/app/dashboard/models/[modelId]/components/JaqpotTimeAgo.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { getUserFriendlyDate } from '@/app/util/date';
+import { getUserFriendlyDateWithSuffix } from '@/app/util/date';
 
 export default function JaqpotTimeAgo({ date }: { date: Date }) {
   return (
     <div title={date.toLocaleString()} className="whitespace-nowrap">
-      {getUserFriendlyDate(date)}
+      {getUserFriendlyDateWithSuffix(date)}
     </div>
   );
 }
diff --git a/src/app/dashboard/organizations/[orgName]/components/OrganizationInvitations.tsx b/src/app/dashboard/organizations/[orgName]/components/OrganizationInvitations.tsx
@@ -17,7 +17,7 @@ import useSWR, { Fetcher } from 'swr';
 import SWRClientFetchError from '@/app/components/SWRClientFetchError';
 import { ApiResponse } from '@/app/util/response';
 import { CustomError } from '@/app/types/CustomError';
-import { getUserFriendlyDate } from '@/app/util/date';
+import { getUserFriendlyDateWithSuffix } from '@/app/util/date';
 import { Button } from '@nextui-org/button';
 import { Tooltip } from '@nextui-org/tooltip';
 import toast from 'react-hot-toast';
@@ -78,7 +78,7 @@ export default function OrganizationInvitations({
     apiResponse?.data?.map((invitation, index) => {
       return {
         ...invitation,
-        expirationDate: getUserFriendlyDate(
+        expirationDate: getUserFriendlyDateWithSuffix(
           new Date(invitation.expirationDate as unknown as string),
         ),
         key: index,

diff --git a/src/app/dashboard/organizations/[orgName]/components/tabs/OrganizationPeopleTab.tsx b/src/app/dashboard/organizations/[orgName]/components/tabs/OrganizationPeopleTab.tsx
@@ -17,7 +17,7 @@ import useSWR, { Fetcher } from 'swr';
 import SWRClientFetchError from '@/app/components/SWRClientFetchError';
 import { ApiResponse } from '@/app/util/response';
 import { CustomError } from '@/app/types/CustomError';
-import { getUserFriendlyDate } from '@/app/util/date';
+import { getUserFriendlyDateWithSuffix } from '@/app/util/date';
 import { Button } from '@nextui-org/button';
 import { Tooltip } from '@nextui-org/tooltip';
 import toast from 'react-hot-toast';

diff --git a/src/app/util/date.ts b/src/app/util/date.ts
@@ -1,5 +1,9 @@
 import { formatDistance } from 'date-fns';
 
-export function getUserFriendlyDate(date: Date) {
+export function getUserFriendlyDateWithSuffix(date: Date) {
   return formatDistance(date, new Date(), { addSuffix: true });
 }
+
+export function getUserFriendlyDuration(durationInMs: number) {
+  return formatDistance(0, durationInMs, { includeSeconds: true });
+}