Add a tab to the UI to show the config file for the job. Read only.

ui/src/app/jobs/[jobID]/page.tsx

@@ -1,27 +1,45 @@
 'use client';
 
-import { useMemo, useState, use } from 'react';
+import { useState, use } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
 import { Button } from '@headlessui/react';
 import { TopBar, MainContent } from '@/components/layout';
 import useJob from '@/hooks/useJob';
-import { startJob, stopJob } from '@/utils/jobs';
 import SampleImages from '@/components/SampleImages';
 import JobOverview from '@/components/JobOverview';
-import { JobConfig } from '@/types';
 import { redirect } from 'next/navigation';
 import JobActionBar from '@/components/JobActionBar';
+import JobConfigViewer from '@/components/JobConfigViewer';
+import { Job } from '@prisma/client';
 
-type PageKey = 'overview' | 'samples';
+type PageKey = 'overview' | 'samples' | 'config';
 
 interface Page {
   name: string;
   value: PageKey;
+  component: React.ComponentType<{ job: Job }>;
+  mainCss?: string;
 }
 
 const pages: Page[] = [
-  { name: 'Overview', value: 'overview' },
+  {
-  { name: 'Samples', value: 'samples' },
+    name: 'Overview',
+    value: 'overview',
+    component: JobOverview,
+    mainCss: 'pt-24',
+  },
+  {
+    name: 'Samples',
+    value: 'samples',
+    component: SampleImages,
+    mainCss: 'pt-24',
+  },
+  {
+    name: 'Config File',
+    value: 'config',
+    component: JobConfigViewer,
+    mainCss: 'pt-[80px] px-0 pb-0',
+  },
 ];
 
 export default function JobPage({ params }: { params: { jobID: string } }) {
@@ -54,13 +72,15 @@ export default function JobPage({ params }: { params: { jobID: string } }) {
           />
         )}
       </TopBar>
-      <MainContent className="pt-24">
+      <MainContent className={pages.find(page => page.value === pageKey)?.mainCss}>
         {status === 'loading' && job == null && <p>Loading...</p>}
         {status === 'error' && job == null && <p>Error fetching job</p>}
         {job && (
           <>
-            {pageKey === 'overview' && <JobOverview job={job} />}
+            {pages.map(page => {
-            {pageKey === 'samples' && <SampleImages job={job} />}
+              const Component = page.component;
+              return page.value === pageKey ? <Component key={page.value} job={job} /> : null;
+            })}
           </>
         )}
       </MainContent>

ui/src/components/JobConfigViewer.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { useEffect, useState } from 'react';
+import YAML from 'yaml';
+import Editor from '@monaco-editor/react';
+
+import { Job } from '@prisma/client';
+
+interface Props {
+  job: Job;
+}
+
+const yamlConfig: YAML.DocumentOptions &
+  YAML.SchemaOptions &
+  YAML.ParseOptions &
+  YAML.CreateNodeOptions &
+  YAML.ToStringOptions = {
+  indent: 2,
+  lineWidth: 999999999999,
+  defaultStringType: 'QUOTE_DOUBLE',
+  defaultKeyType: 'PLAIN',
+  directives: true,
+};
+
+export default function JobConfigViewer({ job }: Props) {
+  const [editorValue, setEditorValue] = useState<string>('');
+  useEffect(() => {
+    if (job?.job_config) {
+      const yamlContent = YAML.stringify(JSON.parse(job.job_config), yamlConfig);
+      setEditorValue(yamlContent);
+    }
+  }, [job]);
+  return (
+    <>
+      <Editor
+        height="100%"
+        width="100%"
+        defaultLanguage="yaml"
+        value={editorValue}
+        theme="vs-dark"
+        options={{
+          minimap: { enabled: true },
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          readOnly: true,
+        }}
+      />
+    </>
+  );
+}