From 7bc6e795d184c46d4c0b2435c4e5c28a72967f9a Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Wed, 5 Mar 2025 12:22:47 -0500
Subject: [PATCH] separate view jobs into new component
---
.../Settings/TransformerLabSettings.tsx | 49 +------------
.../components/Settings/ViewJobsTab.tsx | 70 +++++++++++++++++++
2 files changed, 72 insertions(+), 47 deletions(-)
create mode 100644 src/renderer/components/Settings/ViewJobsTab.tsx
diff --git a/src/renderer/components/Settings/TransformerLabSettings.tsx b/src/renderer/components/Settings/TransformerLabSettings.tsx
index a00f2837..dbbb132a 100644
--- a/src/renderer/components/Settings/TransformerLabSettings.tsx
+++ b/src/renderer/components/Settings/TransformerLabSettings.tsx
@@ -27,6 +27,7 @@ import { EyeIcon, EyeOffIcon, RotateCcwIcon } from 'lucide-react';
// Import the AIProvidersSettings component.
import AIProvidersSettings from './AIProvidersSettings';
+import ViewJobsTab from './ViewJobsTab';
const fetcher = (url) => fetch(url).then((res) => res.json());
@@ -208,53 +209,7 @@ export default function TransformerLabSettings() {
</Button>
</TabPanel>
<TabPanel value={1}>
- <Typography level="title-lg" marginBottom={2}>
- View Jobs (debug):{' '}
- <IconButton onClick={() => jobsMutate()}>
- <RotateCcwIcon size="14px" />
- </IconButton>
- </Typography>
- <Select
- sx={{ width: '400px' }}
- value={showJobsOfType}
- onChange={(e, newValue) => {
- setShowJobsOfType(newValue);
- }}
- >
- <Option value="NONE">None</Option>
- <Option value="">All</Option>
- <Option value="DOWNLOAD_MODEL">Download Model</Option>
- <Option value="LOAD_MODEL">Load Model</Option>
- <Option value="TRAIN">Train</Option>
- <Option value="GENERATE">Generate</Option>
- <Option value="EVAL">Evaluate</Option>
- </Select>
- {showJobsOfType !== 'NONE' && (
- <Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
- <thead>
- <tr>
- <td>Job ID</td>
- <td>Job Type</td>
- <td>Job Status</td>
- <td>Job Progress</td>
- <td>Job Data</td>
- </tr>
- </thead>
- <tbody>
- {jobs?.map((job) => (
- <tr key={job.id}>
- <td>{job.id}</td>
- <td>{job.type}</td>
- <td>{job.status}</td>
- <td>{job.progress}</td>
- <td>
- <pre>{JSON.stringify(job.job_data, null, 2)}</pre>
- </td>
- </tr>
- ))}
- </tbody>
- </Table>
- )}
+ <ViewJobsTab />
</TabPanel>
</Tabs>
</Sheet>
diff --git a/src/renderer/components/Settings/ViewJobsTab.tsx b/src/renderer/components/Settings/ViewJobsTab.tsx
new file mode 100644
index 00000000..aad08ea1
--- /dev/null
+++ b/src/renderer/components/Settings/ViewJobsTab.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Typography, IconButton, Select, Option, Table } from '@mui/joy';
+import { RotateCcwIcon } from 'lucide-react';
+import useSWR from 'swr';
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function ViewJobsTab() {
+ const [showJobsOfType, setShowJobsOfType] = React.useState('NONE');
+
+ const {
+ data: jobs,
+ error: jobsError,
+ isLoading: jobsIsLoading,
+ mutate: jobsMutate,
+ } = useSWR(chatAPI.Endpoints.Jobs.GetJobsOfType(showJobsOfType, ''), fetcher);
+
+ return (
+ <>
+ <Typography level="title-lg" marginBottom={2}>
+ View Jobs (debug):{' '}
+ <IconButton onClick={() => jobsMutate()}>
+ <RotateCcwIcon size="14px" />
+ </IconButton>
+ </Typography>
+ <Select
+ sx={{ width: '400px' }}
+ value={showJobsOfType}
+ onChange={(e, newValue) => {
+ setShowJobsOfType(newValue);
+ }}
+ >
+ <Option value="NONE">None</Option>
+ <Option value="">All</Option>
+ <Option value="DOWNLOAD_MODEL">Download Model</Option>
+ <Option value="LOAD_MODEL">Load Model</Option>
+ <Option value="TRAIN">Train</Option>
+ <Option value="GENERATE">Generate</Option>
+ <Option value="EVAL">Evaluate</Option>
+ </Select>
+ {showJobsOfType !== 'NONE' && (
+ <Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
+ <thead>
+ <tr>
+ <td>Job ID</td>
+ <td>Job Type</td>
+ <td>Job Status</td>
+ <td>Job Progress</td>
+ <td>Job Data</td>
+ </tr>
+ </thead>
+ <tbody>
+ {jobs?.map((job) => (
+ <tr key={job.id}>
+ <td>{job.id}</td>
+ <td>{job.type}</td>
+ <td>{job.status}</td>
+ <td>{job.progress}</td>
+ <td>
+ <pre>{JSON.stringify(job.job_data, null, 2)}</pre>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </Table>
+ )}
+ </>
+ );
+}
--
GitLab