50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
'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,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|