wip(frontend): list catalog runs

backend/src/catalog/controllers.rs

@@ -67,7 +67,6 @@ pub async fn list_catalog_runs_by_catalog_slug(
     }
 }
 
-
 #[debug_handler]
 pub async fn exec_catalog_service_validate_scripts(
     Extension(yaml_config): Extension<Arc<YamlConfig>>,

backend/src/database.rs

@@ -82,6 +82,7 @@ pub async fn list_catalog_runs_by_catalog_and_service_slugs(
             SELECT *
             FROM catalog_runs
             WHERE catalog_slug = $1 AND service_slug = $2
+            ORDER BY created_at DESC
         "#
         )
             .bind(catalog_slug)
@@ -101,6 +102,7 @@ pub async fn list_catalog_runs_by_catalog_slug(
             SELECT *
             FROM catalog_runs
             WHERE catalog_slug = $1
+            ORDER BY created_at DESC
         "#
         )
             .bind(catalog_slug)

frontend/src/components/self-service/SelfServiceRunTable.tsx

@@ -0,0 +1,69 @@
+import {millisToHumanTime} from "@/lib/utils.ts";
+
+interface Props {
+  runs: any[]
+}
+
+function getTotalExecutionTime(tasks: any[]): number {
+  return tasks.reduce((acc, task) => {
+    if (task.post_validate_output && task.post_validate_output.execution_time_in_millis) {
+      return acc + task.post_validate_output.execution_time_in_millis
+    }
+
+    return acc
+  }, 0)
+}
+
+export default function SelfServiceRunTable({runs}: Props): JSX.Element {
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mt-4 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead>
+              <tr>
+                <th
+                  scope="col"
+                  className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8"
+                >
+                  Date
+                </th>
+                <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Status
+                </th>
+                <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Tasks
+                </th>
+                <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
+                  Execution Time
+                </th>
+                <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6 lg:pr-8">
+                  <span className="sr-only">Edit</span>
+                </th>
+              </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 bg-white">
+              {runs.map((run) => (
+                <tr key={run.id}>
+                  <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 lg:pl-8">
+                    {run.created_at}
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{run.status}</td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{run.tasks.length}/{run.tasks.length}</td>
+                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{millisToHumanTime(getTotalExecutionTime(run.tasks))}</td>
+                  <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
+                    <a href="#" className="text-indigo-600 hover:text-indigo-900">
+                      Details<span className="sr-only">, {run.name}</span>
+                    </a>
+                  </td>
+                </tr>
+              ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/self-service/SelfServiceTabRun.tsx

@@ -1,15 +1,35 @@
 import EmptyState from "@/components/common/EmptyState.tsx";
+import {useQuery} from "@tanstack/react-query";
+import {API_URL} from "@/config.ts";
+import {useEffect, useState} from "react";
+import SelfServiceRunTable from "@/components/self-service/SelfServiceRunTable.tsx";
 
 interface Props {
   catalogSlug: string
 }
 
 export default function SelfServiceTabRun({catalogSlug}: Props) {
-  console.log(catalogSlug);
+  const [runs, setRuns] = useState([])
 
-  return <>
-    <div className="my-5">
+  const {status, data} = useQuery({
+    queryKey: [`catalogs-${catalogSlug}-runs`],
+    queryFn: () =>
+      fetch(`${API_URL}/catalogs/${catalogSlug}/runs`).then(
+        (res) => res.json(),
+      ),
+  })
+
+  useEffect(() => {
+    if (status === 'success') {
+      setRuns(data.results)
+    }
+  }, [status, data]);
+
+  if (runs.length === 0) {
+    return <div className="my-5">
       <EmptyState text="No Runs" subText="This catalog has no runs"/>
     </div>
-  </>
+  }
+
+  return <SelfServiceRunTable runs={runs}/>
 }

frontend/src/lib/utils.ts

@@ -8,3 +8,16 @@ export function cn(...inputs: ClassValue[]) {
 export function classNames(...classes: any[]): string {
   return classes.filter(Boolean).join(' ')
 }
+
+export function millisToHumanTime(duration: number): string {
+  let milliseconds = Math.floor((duration % 1000) / 100)
+  let seconds = Math.floor((duration / 1000) % 60)
+  let minutes = Math.floor((duration / (1000 * 60)) % 60)
+  let hours = Math.floor((duration / (1000 * 60 * 60)) % 24)
+
+  let s_hours = (hours < 10) ? "0" + hours : hours;
+  let s_minutes = (minutes < 10) ? "0" + minutes : minutes;
+  let s_seconds = (seconds < 10) ? "0" + seconds : seconds;
+
+  return s_hours + ":" + s_minutes + ":" + s_seconds + "." + milliseconds;
+}