diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index e0a60dac..b2d912b3 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -39,6 +39,7 @@
"react-dom": "^18.3.1",
"react-hook-form": "^7.52.2",
"react-router-dom": "^6.26.0",
+ "react-syntax-highlighter": "^15.5.0",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
"timeago.js": "4.0.0-beta.3",
@@ -49,6 +50,7 @@
"@types/node": "^22.1.0",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
+ "@types/react-syntax-highlighter": "^15.5.13",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
diff --git a/packages/dashboard/src/components/JobView.tsx b/packages/dashboard/src/components/JobView.tsx
index 9a9b12ac..ba35eeb5 100644
--- a/packages/dashboard/src/components/JobView.tsx
+++ b/packages/dashboard/src/components/JobView.tsx
@@ -3,6 +3,7 @@ import { JobLogs } from "./JobLogs";
import AlertCircle from "lucide-react/icons/alert-circle";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { getDurationStr } from "@/lib/helpers";
+import { JsonHighlight } from "./JsonHighlight";
import type { JobDto } from "@/tsr";
type JobViewProps = {
@@ -27,11 +28,11 @@ export function JobView({ job }: JobViewProps) {
Output
-
+ {job.outputData ?
: null}
@@ -43,21 +44,6 @@ export function JobView({ job }: JobViewProps) {
);
}
-function Format({ data }: { data: string | null }) {
- let parsedData: unknown;
- try {
- if (data) {
- parsedData = JSON.parse(data);
- }
- } catch {}
-
- return parsedData ? (
-
- {JSON.stringify(parsedData, null, 2)}
-
- ) : null;
-}
-
function JobError({ error }: { error: string }) {
return (
diff --git a/packages/dashboard/src/components/JsonHighlight.tsx b/packages/dashboard/src/components/JsonHighlight.tsx
new file mode 100644
index 00000000..1fd7f8c9
--- /dev/null
+++ b/packages/dashboard/src/components/JsonHighlight.tsx
@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+
+// @ts-expect-error
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+
+// @ts-expect-error
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
+
+// @ts-expect-error
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/stackoverflow-light";
+
+style["hljs"].padding = "1rem";
+delete style["hljs"].background;
+
+SyntaxHighlighter.registerLanguage("json", json);
+
+type SyntaxHighlightProps = {
+ json: string;
+};
+
+export function JsonHighlight({ json }: SyntaxHighlightProps) {
+ const data = useMemo(() => {
+ const parsed = JSON.parse(json);
+ return JSON.stringify(parsed, null, 2);
+ }, [json]);
+
+ return (
+
+ {data}
+
+ );
+}
diff --git a/packages/dashboard/src/components/OpenApiReference.tsx b/packages/dashboard/src/components/OpenApiReference.tsx
index 8868fee6..0e0099cb 100644
--- a/packages/dashboard/src/components/OpenApiReference.tsx
+++ b/packages/dashboard/src/components/OpenApiReference.tsx
@@ -7,7 +7,7 @@ type OpenApiReferenceProps = {
};
export function OpenApiReference({ url }: OpenApiReferenceProps) {
- const { data } = tsr.getSpec.useQuery({
+ const { data } = tsr.getSpec.useSuspenseQuery({
queryKey: ["spec"],
});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebd7b562..6e60b9a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,6 +244,9 @@ importers:
react-router-dom:
specifier: ^6.26.0
version: 6.26.0(react-dom@18.3.1)(react@18.3.1)
+ react-syntax-highlighter:
+ specifier: ^15.5.0
+ version: 15.5.0(react@18.3.1)
tailwind-merge:
specifier: ^2.4.0
version: 2.4.0
@@ -269,6 +272,9 @@ importers:
'@types/react-dom':
specifier: ^18.3.0
version: 18.3.0
+ '@types/react-syntax-highlighter':
+ specifier: ^15.5.13
+ version: 15.5.13
'@vitejs/plugin-react':
specifier: ^4.3.1
version: 4.3.1(vite@5.3.5)
@@ -5852,6 +5858,12 @@ packages:
resolution: {integrity: sha512-RpQH4rXLuvTXKR0zqHq3go0RVXYv/YVqv4TnPH95VbwUxZdQlK1EtcMvQvMpDngHbt13Csh9Z4qT9AbkiQH5BA==}
dev: false
+ /@types/hast@2.3.10:
+ resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+ dependencies:
+ '@types/unist': 2.0.11
+ dev: false
+
/@types/hast@3.0.4:
resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
dependencies:
@@ -5949,6 +5961,12 @@ packages:
dependencies:
'@types/react': 18.3.3
+ /@types/react-syntax-highlighter@15.5.13:
+ resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}
+ dependencies:
+ '@types/react': 18.3.3
+ dev: true
+
/@types/react@18.3.3:
resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
dependencies:
@@ -5982,6 +6000,10 @@ packages:
resolution: {integrity: sha512-chhaNf2oKHlRkDGt+tiKE2Z5aJ6qalm7Z9rlLdBwmOiAAf09YQvvoLXjWK4HWPF1xU/fqvMgfNfpVoBscA/tKA==}
dev: true
+ /@types/unist@2.0.11:
+ resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+ dev: false
+
/@types/unist@3.0.2:
resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
@@ -6974,14 +6996,26 @@ packages:
resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
dev: false
+ /character-entities-legacy@1.1.4:
+ resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+ dev: false
+
/character-entities-legacy@3.0.0:
resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
dev: false
+ /character-entities@1.2.4:
+ resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+ dev: false
+
/character-entities@2.0.2:
resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
dev: false
+ /character-reference-invalid@1.1.4:
+ resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+ dev: false
+
/check-error@1.0.3:
resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
dependencies:
@@ -7125,6 +7159,10 @@ packages:
delayed-stream: 1.0.0
dev: false
+ /comma-separated-tokens@1.0.8:
+ resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+ dev: false
+
/comma-separated-tokens@2.0.3:
resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
dev: false
@@ -7824,6 +7862,12 @@ packages:
dependencies:
reusify: 1.0.4
+ /fault@1.0.4:
+ resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+ dependencies:
+ format: 0.2.2
+ dev: false
+
/fb-watchman@2.0.2:
resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
dependencies:
@@ -7997,6 +8041,11 @@ packages:
mime-types: 2.1.35
dev: false
+ /format@0.2.2:
+ resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+ engines: {node: '>=0.4.x'}
+ dev: false
+
/formdata-node@4.4.1:
resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==}
engines: {node: '>= 12.20'}
@@ -8323,6 +8372,10 @@ packages:
'@types/hast': 3.0.4
dev: false
+ /hast-util-parse-selector@2.2.5:
+ resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+ dev: false
+
/hast-util-parse-selector@4.0.0:
resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
dependencies:
@@ -8409,6 +8462,16 @@ packages:
'@types/hast': 3.0.4
dev: false
+ /hastscript@6.0.0:
+ resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+ dependencies:
+ '@types/hast': 2.3.10
+ comma-separated-tokens: 1.0.8
+ hast-util-parse-selector: 2.2.5
+ property-information: 5.6.0
+ space-separated-tokens: 1.1.5
+ dev: false
+
/hastscript@8.0.0:
resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
dependencies:
@@ -8434,6 +8497,10 @@ packages:
resolution: {integrity: sha512-1dcNjxp2VHFnQkDn/Jrvz4IITgpalWbH6HlaTrZGXuZ5jA1+oIjJtGXYjem6V5rD0tCDGCVNYpD+mJRaNi0Jcw==}
dev: false
+ /highlight.js@10.7.3:
+ resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+ dev: false
+
/highlight.js@11.10.0:
resolution: {integrity: sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==}
engines: {node: '>=12.0.0'}
@@ -8618,6 +8685,17 @@ packages:
is-windows: 1.0.2
dev: false
+ /is-alphabetical@1.0.4:
+ resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+ dev: false
+
+ /is-alphanumerical@1.0.4:
+ resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+ dependencies:
+ is-alphabetical: 1.0.4
+ is-decimal: 1.0.4
+ dev: false
+
/is-arguments@1.1.1:
resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
engines: {node: '>= 0.4'}
@@ -8647,6 +8725,10 @@ packages:
dependencies:
hasown: 2.0.2
+ /is-decimal@1.0.4:
+ resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+ dev: false
+
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
@@ -8673,6 +8755,10 @@ packages:
dependencies:
is-extglob: 2.1.1
+ /is-hexadecimal@1.0.4:
+ resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+ dev: false
+
/is-interactive@1.0.0:
resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
engines: {node: '>=8'}
@@ -9522,6 +9608,13 @@ packages:
tslib: 2.6.3
dev: true
+ /lowlight@1.20.0:
+ resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+ dependencies:
+ fault: 1.0.4
+ highlight.js: 10.7.3
+ dev: false
+
/lowlight@3.1.0:
resolution: {integrity: sha512-CEbNVoSikAxwDMDPjXlqlFYiZLkDJHwyGu/MfOsJnF3d7f3tds5J3z8s/l9TMXhzfsJCCJEAsD78842mwmg0PQ==}
dependencies:
@@ -10437,6 +10530,17 @@ packages:
resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
dev: false
+ /parse-entities@2.0.0:
+ resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+ dependencies:
+ character-entities: 1.2.4
+ character-entities-legacy: 1.1.4
+ character-reference-invalid: 1.1.4
+ is-alphanumerical: 1.0.4
+ is-decimal: 1.0.4
+ is-hexadecimal: 1.0.4
+ dev: false
+
/parse-filepath@1.0.2:
resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
engines: {node: '>=0.8'}
@@ -10770,6 +10874,16 @@ packages:
parse-ms: 4.0.0
dev: false
+ /prismjs@1.27.0:
+ resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+ engines: {node: '>=6'}
+ dev: false
+
+ /prismjs@1.29.0:
+ resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+ engines: {node: '>=6'}
+ dev: false
+
/process-warning@3.0.0:
resolution: {integrity: sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ==}
dev: false
@@ -10795,6 +10909,12 @@ packages:
kleur: 3.0.3
sisteransi: 1.0.5
+ /property-information@5.6.0:
+ resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+ dependencies:
+ xtend: 4.0.2
+ dev: false
+
/property-information@6.5.0:
resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
dev: false
@@ -10993,6 +11113,19 @@ packages:
tslib: 2.6.3
dev: false
+ /react-syntax-highlighter@15.5.0(react@18.3.1):
+ resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+ peerDependencies:
+ react: '>= 0.14.0'
+ dependencies:
+ '@babel/runtime': 7.25.0
+ highlight.js: 10.7.3
+ lowlight: 1.20.0
+ prismjs: 1.29.0
+ react: 18.3.1
+ refractor: 3.6.0
+ dev: false
+
/react@18.3.1:
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
engines: {node: '>=0.10.0'}
@@ -11085,6 +11218,14 @@ packages:
'@redis/time-series': 1.1.0(@redis/client@1.6.0)
dev: false
+ /refractor@3.6.0:
+ resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+ dependencies:
+ hastscript: 6.0.0
+ parse-entities: 2.0.0
+ prismjs: 1.27.0
+ dev: false
+
/regenerate-unicode-properties@10.1.1:
resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
engines: {node: '>=4'}
@@ -11765,6 +11906,10 @@ packages:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
+ /space-separated-tokens@1.1.5:
+ resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+ dev: false
+
/space-separated-tokens@2.0.2:
resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
dev: false
@@ -12998,6 +13143,11 @@ packages:
optional: true
dev: false
+ /xtend@4.0.2:
+ resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+ engines: {node: '>=0.4'}
+ dev: false
+
/y-codemirror.next@0.3.5(@codemirror/state@6.4.1)(@codemirror/view@6.30.0)(yjs@13.6.18):
resolution: {integrity: sha512-VluNu3e5HfEXybnypnsGwKAj+fKLd4iAnR7JuX1Sfyydmn1jCBS5wwEL/uS04Ch2ib0DnMAOF6ZRR/8kK3wyGw==}
requiresBuild: true