Switched to a universal table library

ui/src/components/JobsTable.tsx

@@ -1,7 +1,7 @@
 import useJobsList from '@/hooks/useJobsList';
-import Loading from './Loading';
-import { JobConfig } from '@/types';
 import Link from 'next/link';
+import UniversalTable, { TableColumn } from '@/components/UniversalTable';
+import { JobConfig } from '@/types';
 
 interface JobsTableProps {}
 
@@ -9,75 +9,60 @@ export default function JobsTable(props: JobsTableProps) {
   const { jobs, status, refreshJobs } = useJobsList();
   const isLoading = status === 'loading';
 
-  return (
-    <div className="w-full bg-gray-900 rounded-md shadow-md">
-      {isLoading ? (
-        <div className="p-4 flex justify-center">
-          <Loading />
-        </div>
-      ) : jobs.length === 0 ? (
-        <div className="p-6 text-center text-gray-400">
-          <p className="text-sm">No jobs available</p>
-          <button
-            onClick={() => refreshJobs()}
-            className="mt-2 px-3 py-1 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded transition-colors"
-          >
-            Refresh
-          </button>
-        </div>
-      ) : (
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm text-left text-gray-300">
-            <thead className="text-xs uppercase bg-gray-800 text-gray-400">
-              <tr>
-                <th className="px-3 py-2">Name</th>
-                <th className="px-3 py-2">Steps</th>
-                <th className="px-3 py-2">GPU</th>
-                <th className="px-3 py-2">Status</th>
-                <th className="px-3 py-2">Info</th>
-              </tr>
-            </thead>
-            <tbody>
-              {jobs?.map((job, index) => {
-                const jobConfig: JobConfig = JSON.parse(job.job_config);
-                const totalSteps = jobConfig.config.process[0].train.steps;
+  const columns: TableColumn[] = [
+    {
+      title: 'Name',
+      key: 'name',
+      render: row => (
+        <Link href={`/jobs/${row.id}`} className="font-medium whitespace-nowrap">
+          {row.name}
+        </Link>
+      ),
+    },
+    {
+      title: 'Steps',
+      key: 'steps',
+      render: row => {
+        const jobConfig: JobConfig = JSON.parse(row.job_config);
+        const totalSteps = jobConfig.config.process[0].train.steps;
 
-                // Style for alternating rows
-                const rowClass = index % 2 === 0 ? 'bg-gray-900' : 'bg-gray-800';
+        return (
+          <div className="flex items-center">
+            <span>
+              {row.step} / {totalSteps}
+            </span>
+            <div className="w-16 bg-gray-700 rounded-full h-1.5 ml-2">
+              <div
+                className="bg-blue-500 h-1.5 rounded-full"
+                style={{ width: `${(row.step / totalSteps) * 100}%` }}
+              ></div>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      title: 'GPU',
+      key: 'gpu_ids',
+    },
+    {
+      title: 'Status',
+      key: 'status',
+      render: row => {
+        let statusClass = 'text-gray-400';
+        if (row.status === 'completed') statusClass = 'text-green-400';
+        if (row.status === 'failed') statusClass = 'text-red-400';
+        if (row.status === 'running') statusClass = 'text-blue-400';
 
-                // Style based on job status
-                let statusClass = 'text-gray-400';
-                if (job.status === 'completed') statusClass = 'text-green-400';
-                if (job.status === 'failed') statusClass = 'text-red-400';
-                if (job.status === 'running') statusClass = 'text-blue-400';
+        return <span className={statusClass}>{row.status}</span>;
+      },
+    },
+    {
+      title: 'Info',
+      key: 'info',
+      className: 'truncate max-w-xs',
+    },
+  ];
 
-                return (
-                  <tr key={job.id} className={`${rowClass} border-b border-gray-700 hover:bg-gray-700`}>
-                    <td className="px-3 py-2 font-medium whitespace-nowrap">
-                      <Link href={`/jobs/${job.id}`}>{job.name}</Link></td>
-                    <td className="px-3 py-2">
-                      <div className="flex items-center">
-                        <span>
-                          {job.step} / {totalSteps}
-                        </span>
-                        <div className="w-16 bg-gray-700 rounded-full h-1.5 ml-2">
-                          <div
-                            className="bg-blue-500 h-1.5 rounded-full"
-                            style={{ width: `${(job.step / totalSteps) * 100}%` }}
-                          ></div>
-                        </div>
-                      </div>
-                    </td>
-                    <td className="px-3 py-2">{job.gpu_ids}</td>
-                    <td className={`px-3 py-2 ${statusClass}`}>{job.status}</td>
-                    <td className="px-3 py-2 truncate max-w-xs">{job.info}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </div>
-  );
+  return <UniversalTable columns={columns} rows={jobs} isLoading={isLoading} onRefresh={refreshJobs} />;
 }

ui/src/components/UniversalTable.tsx

@@ -0,0 +1,72 @@
+import Loading from './Loading';
+import classNames from 'classnames';
+
+export interface TableColumn {
+  title: string;
+  key: string;
+  render?: (row: any) => React.ReactNode;
+  className?: string;
+}
+
+interface TableRow {
+  [key: string]: any;
+}
+
+interface TableProps {
+  columns: TableColumn[];
+  rows: TableRow[];
+  isLoading: boolean;
+  onRefresh: () => void;
+}
+
+export default function UniversalTable({ columns, rows, isLoading, onRefresh = () => {} }: TableProps) {
+  return (
+    <div className="w-full bg-gray-900 rounded-md shadow-md">
+      {isLoading ? (
+        <div className="p-4 flex justify-center">
+          <Loading />
+        </div>
+      ) : rows.length === 0 ? (
+        <div className="p-6 text-center text-gray-400">
+          <p className="text-sm">Empty</p>
+          <button
+            onClick={() => onRefresh()}
+            className="mt-2 px-3 py-1 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded transition-colors"
+          >
+            Refresh
+          </button>
+        </div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm text-left text-gray-300">
+            <thead className="text-xs uppercase bg-gray-800 text-gray-400">
+              <tr>
+                {columns.map(column => (
+                  <th key={column.key} className="px-3 py-2">
+                    {column.title}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows?.map((row, index) => {
+                // Style for alternating rows
+                const rowClass = index % 2 === 0 ? 'bg-gray-900' : 'bg-gray-800';
+
+                return (
+                  <tr key={index} className={`${rowClass} border-b border-gray-700 hover:bg-gray-700`}>
+                    {columns.map(column => (
+                      <td key={column.key} className={classNames('px-3 py-2', column.className)}>
+                        {column.render ? column.render(row) : row[column.key]}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}