show run date in runs page

fix #129
lucafaggianelli · Jun 9, 2023 · d99e29c · d99e29c
1 parent 59d0586
commit d99e29c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 16 deletions.
diff --git a/frontend/src/components/LogViewer.tsx b/frontend/src/components/LogViewer.tsx
@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Badge,
+  Bold,
   Color,
   Flex,
   Grid,
@@ -19,7 +20,11 @@ import useWebSocket from 'react-use-websocket'
 
 import { getLogs, getWebsocketUrl } from '@/repository'
 import { LogEntry, LogLevel, Pipeline, WebSocketMessage } from '@/types'
-import { formatTimestamp, getTasksColors } from '@/utils'
+import {
+  formatNumber,
+  formatTimestamp,
+  getTasksColors,
+} from '@/utils'
 import TracebackInfoDialog from './TracebackInfoDialog'
 
 interface Props {
@@ -154,14 +159,15 @@ const LogViewer: React.FC<Props> = ({ pipeline, runId }) => {
               return (
                 <TableRow key={log.id}>
                   <TableCell>
-                    <span className="font-mono text-xs text-slate-500">
-                      {formatTimestamp(log.timestamp)}
-                    </span>
-                    {duration >= 0 && (
-                      <span className="font-mono text-xs text-slate-500 ml-2">
-                        +{duration} ms
-                      </span>
-                    )}
+                    <Text className="font-mono text-xs">
+                      <span>{formatTimestamp(log.timestamp)}</span>
+
+                      {duration >= 0 && (
+                        <span className="text-slate-400 ml-2">
+                          +{formatNumber(duration)} ms
+                        </span>
+                      )}
+                    </Text>
                   </TableCell>
                   <TableCell>
                     <Badge size="xs" color={LOG_LEVELS_COLORS[log.level]}>

diff --git a/frontend/src/pages/pipelines/[pipelineId]/triggers/[triggerId]/runs/[runId]/index.tsx b/frontend/src/pages/pipelines/[pipelineId]/triggers/[triggerId]/runs/[runId]/index.tsx
@@ -1,5 +1,15 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { Card, CategoryBar, Flex, Grid, Metric, Text, Title } from '@tremor/react'
+import {
+  Bold,
+  Card,
+  CategoryBar,
+  Flex,
+  Grid,
+  Metric,
+  Text,
+  Title,
+} from '@tremor/react'
+import { addMilliseconds, isSameDay } from 'date-fns'
 import { useParams } from 'react-router-dom'
 import useWebSocket from 'react-use-websocket'
 import { useEffect } from 'react'
@@ -12,7 +22,11 @@ import RunsTasksList from '@/components/Tasks'
 import { MANUAL_TRIGGER } from '@/constants'
 import { getPipeline, getRun, getWebsocketUrl } from '@/repository'
 import { Pipeline, Trigger, WebSocketMessage } from '@/types'
-import { TASKS_COLORS, getTasksColors } from '@/utils'
+import {
+  TASKS_COLORS,
+  formatDate,
+  formatTimestamp,
+} from '@/utils'
 
 const RunViewPage = () => {
   const { lastJsonMessage } = useWebSocket(getWebsocketUrl().toString())
@@ -66,8 +80,15 @@ const RunViewPage = () => {
     return <div>Trigger not found</div>
   }
 
-  const totalTasksDuration = (run.tasks_run || []).reduce((tot, cur) => tot + cur.duration, 0)
-  const tasksRunDurations = (run.tasks_run || []).map(tr => tr.duration / totalTasksDuration * 100)
+  const totalTasksDuration = (run.tasks_run || []).reduce(
+    (tot, cur) => tot + cur.duration,
+    0
+  )
+  const tasksRunDurations = (run.tasks_run || []).map((tr) =>
+    totalTasksDuration ? (tr.duration / totalTasksDuration) * 100 : 0
+  )
+
+  const runEndTime = addMilliseconds(run.start_time, run.duration)
 
   return (
     <PageLayout
@@ -97,6 +118,24 @@ const RunViewPage = () => {
             showLabels={false}
             className="mt-3"
           />
+
+          <Flex alignItems="start" className="mt-2">
+            <div>
+              <Text>
+                <Bold>{formatTimestamp(run.start_time)}</Bold>
+              </Text>
+              <Text className="mt-1">{formatDate(run.start_time)}</Text>
+            </div>
+
+            <div className="text-right">
+              <Text>
+                <Bold>{formatTimestamp(runEndTime)}</Bold>
+              </Text>
+              {!isSameDay(run.start_time, runEndTime) && (
+                <Text>{formatDate(runEndTime)}</Text>
+              )}
+            </div>
+          </Flex>
         </Card>
       </Grid>
 

diff --git a/frontend/src/repository.ts b/frontend/src/repository.ts
@@ -105,6 +105,10 @@ export const getRun = async (runId: number): Promise<PipelineRun> => {
 export const getLogs = async (runId: number): Promise<LogEntry[]> => {
   const rawLogs = await client.get<string>(`/runs/${runId}/logs`)
 
+  if (!rawLogs) {
+    return []
+  }
+
   // Logs data is in JSONL format (1 JSON object per line)
   return rawLogs.split('\n').map((line, i) => {
     const parsed = JSON.parse(line)

diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -55,3 +55,11 @@ export const formatDateTime = (date: Date) =>
 
 export const formatTimestamp = (date: Date) =>
   format(date, 'HH:mm:ss.SSS')
+
+export const formatDate = (date: Date) =>
+  format(date, 'd MMM yyyy')
+
+const numberFormatter = new Intl.NumberFormat()
+
+export const formatNumber = (value: number) =>
+  numberFormatter.format(value)
diff --git a/src/plombery/database/schemas.py b/src/plombery/database/schemas.py
@@ -18,7 +18,7 @@ class Config:
 
 class PipelineRun(PipelineRunBase):
     id: int
-    duration: int
+    duration: float
     tasks_run: List[TaskRun]
 
 

diff --git a/src/plombery/schemas.py b/src/plombery/schemas.py
@@ -1,7 +1,7 @@
 from typing import List, Optional
 from enum import Enum
 
-from pydantic import BaseModel, Field, NonNegativeInt
+from pydantic import BaseModel, Field, NonNegativeFloat
 
 
 class PipelineRunStatus(str, Enum):
@@ -12,7 +12,7 @@ class PipelineRunStatus(str, Enum):
 
 
 class TaskRun(BaseModel):
-    duration: Optional[NonNegativeInt]
+    duration: Optional[NonNegativeFloat]
     """Task duration in milliseconds"""
     has_output: bool = False
     """True if the task generated an output"""