Switched to a universal table library

ui/src/app/datasets/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Modal } from '@/components/Modal';
 import Link from 'next/link';
 import { TextInput } from '@/components/formInputs';
@@ -9,78 +9,116 @@ import { Button } from '@headlessui/react';
 import { FaRegTrashAlt } from 'react-icons/fa';
 import { openConfirm } from '@/components/ConfirmModal';
 import { TopBar, MainContent } from '@/components/layout';
+import UniversalTable, { TableColumn } from '@/components/UniversalTable';
 
 export default function Datasets() {
   const { datasets, status, refreshDatasets } = useDatasetList();
   const [newDatasetName, setNewDatasetName] = useState('');
   const [isNewDatasetModalOpen, setIsNewDatasetModalOpen] = useState(false);
+
+  // Transform datasets array into rows with objects
+  const tableRows = datasets.map(dataset => ({
+    name: dataset,
+    actions: dataset, // Pass full dataset name for actions
+  }));
+
+  const columns: TableColumn[] = [
+    {
+      title: 'Dataset Name',
+      key: 'name',
+      render: row => (
+        <Link href={`/datasets/${row.name}`} className="text-gray-200 hover:text-gray-100">
+          {row.name}
+        </Link>
+      ),
+    },
+    {
+      title: 'Actions',
+      key: 'actions',
+      className: 'w-20 text-right',
+      render: row => (
+        <button
+          className="text-gray-200 hover:bg-red-600 p-2 rounded-full transition-colors"
+          onClick={() => handleDeleteDataset(row.name)}
+        >
+          <FaRegTrashAlt />
+        </button>
+      ),
+    },
+  ];
+
+  const handleDeleteDataset = (datasetName: string) => {
+    openConfirm({
+      title: 'Delete Dataset',
+      message: `Are you sure you want to delete the dataset "${datasetName}"? This action cannot be undone.`,
+      type: 'warning',
+      confirmText: 'Delete',
+      onConfirm: () => {
+        fetch('/api/datasets/delete', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ name: datasetName }),
+        })
+          .then(res => res.json())
+          .then(data => {
+            console.log('Dataset deleted:', data);
+            refreshDatasets();
+          })
+          .catch(error => {
+            console.error('Error deleting dataset:', error);
+          });
+      },
+    });
+  };
+
+  const handleCreateDataset = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await fetch('/api/datasets/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name: newDatasetName }),
+      });
+      const data = await response.json();
+      console.log('New dataset created:', data);
+      refreshDatasets();
+      setNewDatasetName('');
+      setIsNewDatasetModalOpen(false);
+    } catch (error) {
+      console.error('Error creating new dataset:', error);
+    }
+  };
+
   return (
     <>
       <TopBar>
         <div>
-          <h1 className="text-lg">Datasets</h1>
+          <h1 className="text-2xl font-semibold text-gray-100">Datasets</h1>
         </div>
         <div className="flex-1"></div>
         <div>
           <Button
-            className="text-gray-200 bg-slate-600 px-3 py-1 rounded-md"
+            className="text-gray-200 bg-slate-600 px-4 py-2 rounded-md hover:bg-slate-500 transition-colors"
             onClick={() => setIsNewDatasetModalOpen(true)}
           >
             New Dataset
           </Button>
         </div>
       </TopBar>
+
       <MainContent>
-        {status === 'loading' && <p>Loading...</p>}
-        {status === 'error' && <p>Error fetching datasets</p>}
-        {status === 'success' && (
-          <div className="space-y-1">
-            {datasets.length === 0 && <p>No datasets found</p>}
-            {datasets.map((dataset: string) => (
-              <div className="flex justify-between bg-gray-900 hover:bg-gray-800 transition-colors" key={dataset}>
-                <div>
-                  <Link href={`/datasets/${dataset}`} className="cursor-pointer block px-4 py-2" key={dataset}>
-                    {dataset}
-                  </Link>
-                </div>
-                <div className="flex-1"></div>
-                <div>
-                  <button
-                    className="text-gray-200 hover:bg-red-600 px-2 py-2 mt-1 mr-1 rounded-full transition-colors"
-                    onClick={() => {
-                      openConfirm({
-                        title: 'Delete Dataset',
-                        message: `Are you sure you want to delete the dataset "${dataset}"? This action cannot be undone.`,
-                        type: 'warning',
-                        confirmText: 'Delete',
-                        onConfirm: () => {
-                          fetch('/api/datasets/delete', {
-                            method: 'POST',
-                            headers: {
-                              'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify({ name: dataset }),
-                          })
-                            .then(res => res.json())
-                            .then(data => {
-                              console.log('Dataset deleted:', data);
-                              refreshDatasets();
-                            })
-                            .catch(error => {
-                              console.error('Error deleting dataset:', error);
-                            });
-                        },
-                      });
-                    }}
-                  >
-                    <FaRegTrashAlt />
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
+        <UniversalTable
+          columns={columns}
+          rows={tableRows}
+          isLoading={status === 'loading'}
+          onRefresh={refreshDatasets}
+        />
       </MainContent>
+
       <Modal
         isOpen={isNewDatasetModalOpen}
         onClose={() => setIsNewDatasetModalOpen(false)}
@@ -88,47 +126,25 @@ export default function Datasets() {
         size="md"
       >
         <div className="space-y-4 text-gray-200">
-          <form
-            onSubmit={e => {
-              e.preventDefault();
-              console.log('Creating new dataset');
-              // make post with name to create new dataset
-              fetch('/api/datasets/create', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ name: newDatasetName }),
-              })
-                .then(res => res.json())
-                .then(data => {
-                  console.log('New dataset created:', data);
-                  refreshDatasets();
-                  setNewDatasetName('');
-                  setIsNewDatasetModalOpen(false);
-                })
-                .catch(error => {
-                  console.error('Error creating new dataset:', error);
-                });
-            }}
-          >
-            <div className="text-sm text-gray-600">
+          <form onSubmit={handleCreateDataset}>
+            <div className="text-sm text-gray-400">
               This will create a new folder with the name below in your dataset folder.
             </div>
-            <div>
+            <div className="mt-4">
               <TextInput label="Dataset Name" value={newDatasetName} onChange={value => setNewDatasetName(value)} />
             </div>
 
             <div className="mt-6 flex justify-end space-x-3">
               <button
+                type="button"
                 className="rounded-md bg-gray-700 px-4 py-2 text-gray-200 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500"
                 onClick={() => setIsNewDatasetModalOpen(false)}
               >
                 Cancel
               </button>
               <button
-                className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 type="submit"
+                className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
               >
                 Confirm
               </button>

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>
+  );
+}