diff --git a/src/renderer/components/Experiment/Eval/Eval.tsx b/src/renderer/components/Experiment/Eval/Eval.tsx index 8ea629d7b307c1fa71d01148d86e101e00c8c9e1..84cf8c28c23f4bffbf76acd463665b6c430ac0e1 100644 --- a/src/renderer/components/Experiment/Eval/Eval.tsx +++ b/src/renderer/components/Experiment/Eval/Eval.tsx @@ -39,6 +39,7 @@ import { Editor } from '@monaco-editor/react'; import fairyflossTheme from '../../Shared/fairyfloss.tmTheme.js'; import ResultsModal from './ResultsModal'; import DynamicPluginForm from '../DynamicPluginForm'; +import EvalJobsTable from './EvalJobsTable.tsx'; const parseTmTheme = require('monaco-themes').parseTmTheme; function listEvals(evalString) { @@ -114,10 +115,10 @@ export default function Eval({ isLoading: pluginsIsLoading, } = useSWR( experimentInfo?.id && - chatAPI.Endpoints.Experiment.ListScriptsOfType( - experimentInfo?.id, - 'evaluator' - ), + chatAPI.Endpoints.Experiment.ListScriptsOfType( + experimentInfo?.id, + 'evaluator' + ), fetcher ); @@ -149,7 +150,7 @@ export default function Eval({ method: 'POST', body: value, } - ).then(() => { }); + ).then(() => {}); } } @@ -164,7 +165,14 @@ export default function Eval({ return ( <> - <Sheet> + <Sheet + sx={{ + overflow: 'hidden', + height: '100%', + display: 'flex', + flexDirection: 'column', + }} + > {/* Plugins: {JSON.stringify(plugins)} */} <ResultsModal @@ -267,17 +275,17 @@ export default function Eval({ <Typography level="h1" mb={1}> Evaluate </Typography> - <Alert color="neutral" sx={{ mb: 2 }}> - This feature is still in development. We could use your help! - </Alert> + <Typography level="h2" mb={1}> + Tasks + </Typography> {plugins?.length === 0 ? ( <Alert color="danger"> No Evaluation Scripts available, please install an evaluator plugin. </Alert> ) : ( <Dropdown> - <MenuButton startDecorator={<PlusCircleIcon />} variant="solid"> - Add Evaluation + <MenuButton startDecorator={<PlusCircleIcon />} variant="soft"> + Add Evaluation Task </MenuButton> <Menu> {plugins?.map((row) => ( @@ -373,6 +381,7 @@ export default function Eval({ )} </tbody> </Table> + <EvalJobsTable experimentInfo={experimentInfo} /> </Sheet> </> ); diff --git a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx new file mode 100644 index 0000000000000000000000000000000000000000..1b1c08a455ca6ff7a10344f8a90b26b94b5fe219 --- /dev/null +++ b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx @@ -0,0 +1,89 @@ +import { + Box, + Button, + ButtonGroup, + Chip, + Sheet, + Table, + Typography, +} from '@mui/joy'; +import React, { useState, useEffect } from 'react'; +import useSWR from 'swr'; +import * as chatAPI from '../../../lib/transformerlab-api-sdk'; +import dayjs from 'dayjs'; + +const fetcher = (url) => fetch(url).then((res) => res.json()); + +const EvalJobsTable = () => { + const [state, setState] = useState(null); + + const { + data: jobs, + error: jobsError, + isLoading: jobsIsLoading, + mutate: jobsMutate, + } = useSWR(chatAPI.Endpoints.Jobs.GetJobsOfType('EVAL', ''), fetcher, { + refreshInterval: 2000, + }); + + useEffect(() => { + // Component did mount logic here + }, []); + + return ( + <Sheet + sx={{ + overflow: 'hidden', + height: '100%', + display: 'flex', + flexDirection: 'column', + }} + > + <Typography level="h2">Executions</Typography> + <Sheet sx={{ overflowY: 'scroll' }}> + <Table> + <thead> + <tr> + <th width="50px">Id</th> + <th>Status</th> + <th>Progress</th> + <th>Started At</th> + <th>Finished At</th> + <th>Actions</th> + </tr> + </thead> + <tbody> + {jobs?.map((job) => ( + <tr key={job.id}> + <td>{job.id}</td> + <td> + {job?.job_data?.plugin} + <br /> + {job?.job_data?.evaluator} + </td> + <td> + <Chip>{job.status}</Chip> + <br /> + Progress: {job?.progress} + </td> + <td>{String(dayjs(job?.created_at))}</td> + <td>{String(dayjs(job?.updated_at))}</td> + <td> + <ButtonGroup> + <Button>View Output</Button> + <Button>Cancel</Button> + </ButtonGroup> + </td> + </tr> + ))} + </tbody> + </Table> + {/* <Box sx={{ overflow: 'scroll' }}> + <pre>{JSON.stringify(jobs, null, 2)}</pre> + </Box> */} + </Sheet> + </Sheet> + ); +}; + +export default EvalJobsTable;