Chore/better cron status (supabase#30818)

* Better cron statuses

* Adjust time display

* Make status badge a proper component

Author: saltcod

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts

@@ -117,7 +117,12 @@ export function calculateDuration(start: string, end: string): string {
   const startTime = new Date(start).getTime()
   const endTime = new Date(end).getTime()
   const duration = endTime - startTime
-  return isNaN(duration) ? 'Invalid Date' : `${duration} ms`
+
+  if (isNaN(duration)) return 'Invalid Date'
+
+  if (duration < 1000) return `${duration}ms`
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`
+  return `${(duration / 60000).toFixed(1)}m`
 }
 
 export function formatDate(dateString: string): string {

apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx

@@ -1,5 +1,5 @@
 import { toString as CronToString } from 'cronstrue'
-import { List } from 'lucide-react'
+import { CircleCheck, CircleX, List, Loader } from 'lucide-react'
 import Link from 'next/link'
 import { UIEvent, useCallback, useEffect, useMemo } from 'react'
 import DataGrid, { Column, Row } from 'react-data-grid'
@@ -12,7 +12,6 @@ import {
   useCronJobRunsInfiniteQuery,
 } from 'data/database-cron-jobs/database-cron-jobs-runs-infinite-query'
 import {
-  Badge,
   Button,
   cn,
   LoadingLine,
@@ -66,9 +65,7 @@ const cronJobColumns = [
     id: 'status',
     name: 'Status',
     minWidth: 75,
-    value: (row: CronJobRun) => (
-      <Badge variant={row.status === 'succeeded' ? 'success' : 'warning'}>{row.status}</Badge>
-    ),
+    value: (row: CronJobRun) => <StatusBadge status={row.status} />,
   },
   {
     id: 'start_time',
@@ -80,15 +77,19 @@ const cronJobColumns = [
     id: 'end_time',
     name: 'End Time',
     minWidth: 120,
-    value: (row: CronJobRun) => <div className="text-xs">{formatDate(row.end_time)}</div>,
+    value: (row: CronJobRun) => (
+      <div className="text-xs">{row.status === 'succeeded' ? formatDate(row.end_time) : '-'}</div>
+    ),
   },
 
   {
     id: 'duration',
     name: 'Duration',
     minWidth: 100,
     value: (row: CronJobRun) => (
-      <div className="text-xs">{calculateDuration(row.start_time, row.end_time)}</div>
+      <span className="text-xs">
+        {row.status === 'succeeded' ? calculateDuration(row.start_time, row.end_time) : ''}
+      </span>
     ),
   },
 ]
@@ -291,3 +292,35 @@ export const PreviousRunsTab = () => {
     </div>
   )
 }
+
+interface StatusBadgeProps {
+  status: string
+}
+
+function StatusBadge({ status }: StatusBadgeProps) {
+  if (status === 'succeeded') {
+    return (
+      <span className="text-brand-600 flex items-center gap-1">
+        <CircleCheck size={14} /> Succeeded
+      </span>
+    )
+  }
+
+  if (status === 'failed') {
+    return (
+      <span className="text-destructive flex items-center gap-1">
+        <CircleX size={14} /> Failed
+      </span>
+    )
+  }
+
+  if (['running', 'starting', 'sending', 'connecting'].includes(status)) {
+    return (
+      <span className="text-_secondary flex items-center gap-1">
+        <Loader size={14} className="animate-spin" /> Running
+      </span>
+    )
+  }
+
+  return null
+}

apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts

@@ -18,7 +18,8 @@ export type CronJobRun = {
   database: string
   username: string
   command: string
-  status: 'succeeded' | 'failed'
+  // statuses https://github.com/citusdata/pg_cron/blob/f5d111117ddc0f4d83a1bad34d61b857681b6720/include/job_metadata.h#L20
+  status: 'starting' | 'running' | 'sending' | 'connecting' | 'succeeded' | 'failed'
   return_message: string
   start_time: string
   end_time: string
@@ -35,9 +36,9 @@ export async function getDatabaseCronJobRuns({
   if (!projectRef) throw new Error('Project ref is required')
 
   let query = `
-    SELECT * FROM cron.job_run_details 
-    WHERE 
-      jobid = '${jobId}' 
+    SELECT * FROM cron.job_run_details
+    WHERE
+      jobid = '${jobId}'
       ${afterTimestamp ? `AND start_time < '${afterTimestamp}'` : ''}
     ORDER BY start_time DESC
     LIMIT ${CRON_JOB_RUNS_PAGE_SIZE}`