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

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