[ui] add json schema in most json viewer

Platane · Platane · commit 21bb1eb7872c · 2025-12-09T15:37:12.000+01:00
diff --git a/quickwit/quickwit-ui/package.json b/quickwit/quickwit-ui/package.json
@@ -10,6 +10,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@monaco-editor/react": "4.7.0",
+    "@openapi-contrib/openapi-schema-to-json-schema": "5.1.0",
     "@mui/icons-material": "7.3.5",
     "@mui/lab": "7.0.1-beta.19",
     "@mui/material": "7.3.5",
diff --git a/quickwit/quickwit-ui/src/components/JsonEditor.tsx b/quickwit/quickwit-ui/src/components/JsonEditor.tsx
@@ -12,17 +12,38 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { BeforeMount, Editor, OnMount } from "@monaco-editor/react";
-import { useCallback } from "react";
+import { BeforeMount, Editor, OnMount, useMonaco } from "@monaco-editor/react";
+import { useCallback, useEffect, useId } from "react";
 import { EDITOR_THEME } from "../utils/theme";
 
 export function JsonEditor({
   content,
   resizeOnMount,
+  jsonSchema,
 }: {
   content: unknown;
   resizeOnMount: boolean;
+  jsonSchema?: object;
 }) {
+  const monaco = useMonaco();
+  const arbitraryFilename = "inmemory://" + useId();
+
+  // Apply json schema
+  useEffect(() => {
+    if (!monaco || !jsonSchema) return;
+
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [
+        {
+          uri: "http://quickwit-schema.json",
+          fileMatch: [arbitraryFilename],
+          schema: jsonSchema,
+        },
+      ],
+    });
+  }, [monaco, jsonSchema, arbitraryFilename]);
+
   // Setting editor height based on lines height and count to stretch and fit its content.
   const onMount: OnMount = useCallback(
     (editor) => {
@@ -53,6 +74,7 @@ export function JsonEditor({
 
   return (
     <Editor
+      path={arbitraryFilename}
       language="json"
       value={JSON.stringify(content, null, 2)}
       beforeMount={beforeMount}
diff --git a/quickwit/quickwit-ui/src/services/jsonShema.ts b/quickwit/quickwit-ui/src/services/jsonShema.ts
@@ -0,0 +1,52 @@
+// Copyright 2021-Present Datadog, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { openapiSchemaToJsonSchema } from "@openapi-contrib/openapi-schema-to-json-schema";
+import React from "react";
+
+/**
+ * return the json schema for the given component
+ * based on the openapi schema at /openapi.json
+ *
+ * @param ref is a path to the component, usually starting with #/components/schemas/...
+ */
+export const useJsonSchema = (ref: string) => {
+  const [openApiSchema, setOpenApiSchema] = React.useState<any>(null);
+
+  console.log(openApiSchema);
+
+  React.useEffect(() => {
+    schemaPromise = schemaPromise || fetchOpenApiSchema();
+    schemaPromise.then(setOpenApiSchema);
+  }, []);
+
+  const jsonShema = React.useMemo(() => {
+    if (!openApiSchema) return null;
+    return openapiSchemaToJsonSchema({
+      ...openApiSchema,
+      $ref: ref,
+    });
+  }, [openApiSchema, ref]);
+
+  return jsonShema;
+};
+
+let schemaPromise: Promise<any> | null = null;
+export const fetchOpenApiSchema = async () => {
+  const response = await fetch("/openapi.json");
+  if (!response.ok) {
+    throw new Error(`Failed to fetch OpenAPI schema: ${response.statusText}`);
+  }
+  return await response.json();
+};
diff --git a/quickwit/quickwit-ui/src/views/ClusterView.tsx b/quickwit/quickwit-ui/src/views/ClusterView.tsx
@@ -24,6 +24,7 @@ import {
 import Loader from "../components/Loader";
 import ErrorResponseDisplay from "../components/ResponseErrorDisplay";
 import { Client } from "../services/client";
+import { useJsonSchema } from "../services/jsonShema";
 import { Cluster, ResponseError } from "../utils/models";
 
 function ClusterView() {
@@ -56,9 +57,18 @@ function ClusterView() {
     if (loading || cluster == null) {
       return <Loader />;
     }
-    return <JsonEditor content={cluster} resizeOnMount={false} />;
+    return (
+      <JsonEditor
+        jsonSchema={jsonSchema}
+        content={cluster}
+        resizeOnMount={false}
+      />
+    );
   };
 
+  const jsonSchema =
+    useJsonSchema("#/components/schemas/ClusterSnapshot") ?? undefined;
+
   return (
     <ViewUnderAppBarBox>
       <FullBoxContainer>
diff --git a/quickwit/quickwit-ui/src/views/IndexView.tsx b/quickwit/quickwit-ui/src/views/IndexView.tsx
@@ -27,6 +27,7 @@ import {
 } from "../components/LayoutUtils";
 import Loader from "../components/Loader";
 import { Client } from "../services/client";
+import { useJsonSchema } from "../services/jsonShema";
 import { Index } from "../utils/models";
 
 export type ErrorResult = {
@@ -53,14 +54,18 @@ function IndexView() {
   const { indexId } = useParams();
   const [loading, setLoading] = useState(false);
   const [, setLoadingError] = useState<ErrorResult | null>(null);
-  const [tabIndex, setTabIndex] = useState("1");
+  const [tab, setTab] = useState<
+    | "summary"
+    | "sources"
+    | "doc-mapping"
+    | "indexing-settings"
+    | "search-settings"
+    | "retention-settings"
+    | "splits"
+  >("summary");
   const [index, setIndex] = useState<Index>();
   const quickwitClient = useMemo(() => new Client(), []);
 
-  const handleTabIndexChange = (_: React.SyntheticEvent, newValue: string) => {
-    setTabIndex(newValue);
-  };
-
   const fetchIndex = useCallback(() => {
     setLoading(true);
     if (indexId === undefined) {
@@ -94,53 +99,41 @@ function IndexView() {
             height: "calc(100% - 48px)",
           }}
         >
-          <TabContext value={tabIndex}>
+          <TabContext value={tab}>
             <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-              <TabList onChange={handleTabIndexChange} aria-label="Index tabs">
-                <Tab label="Summary" value="1" />
-                <Tab label="Sources" value="2" />
-                <Tab label="Doc Mapping" value="3" />
-                <Tab label="Indexing settings" value="4" />
-                <Tab label="Search settings" value="5" />
-                <Tab label="Retention settings" value="6" />
-                <Tab label="Splits" value="7" />
+              <TabList
+                onChange={(_, newTab) => setTab(newTab)}
+                aria-label="Index tabs"
+              >
+                <Tab label="Summary" value="summary" />
+                <Tab label="Sources" value="sources" />
+                <Tab label="Doc Mapping" value="doc-mapping" />
+                <Tab label="Indexing settings" value="indexing-settings" />
+                <Tab label="Search settings" value="search-settings" />
+                <Tab label="Retention settings" value="retention-settings" />
+                <Tab label="Splits" value="splits" />
               </TabList>
             </Box>
-            <CustomTabPanel value="1">
-              <IndexSummary index={index} />
+            <CustomTabPanel value="summary">
+              <SummaryTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="2">
-              <JsonEditor
-                content={index.metadata.sources}
-                resizeOnMount={false}
-              />
+            <CustomTabPanel value="sources">
+              <SourcesTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="3">
-              <JsonEditor
-                content={index.metadata.index_config.doc_mapping}
-                resizeOnMount={false}
-              />
+            <CustomTabPanel value="doc-mapping">
+              <DocMappingTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="4">
-              <JsonEditor
-                content={index.metadata.index_config.indexing_settings}
-                resizeOnMount={false}
-              />
+            <CustomTabPanel value="indexing-settings">
+              <IndexingSettingsTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="5">
-              <JsonEditor
-                content={index.metadata.index_config.search_settings}
-                resizeOnMount={false}
-              />
+            <CustomTabPanel value="search-settings">
+              <SearchSettingsTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="6">
-              <JsonEditor
-                content={index.metadata.index_config.retention || {}}
-                resizeOnMount={false}
-              />
+            <CustomTabPanel value="retention-settings">
+              <RetentionSettingsTab index={index} />
             </CustomTabPanel>
-            <CustomTabPanel value="7">
-              <JsonEditor content={index.splits} resizeOnMount={false} />
+            <CustomTabPanel value="splits">
+              <SplitsTab index={index} />
             </CustomTabPanel>
           </TabContext>
         </Box>
@@ -169,3 +162,93 @@ function IndexView() {
 }
 
 export default IndexView;
+
+function SummaryTab({ index }: { index: Index }) {
+  return <IndexSummary index={index} />;
+}
+
+function SourcesTab({ index }: { index: Index }) {
+  const jsonSchema =
+    useJsonSchema(
+      "#/components/schemas/IndexMetadataV0_8/properties/sources",
+    ) ?? undefined;
+
+  return (
+    <JsonEditor
+      content={index.metadata.sources}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
+
+function DocMappingTab({ index }: { index: Index }) {
+  const jsonSchema =
+    useJsonSchema("#/components/schemas/DocMapping") ?? undefined;
+  return (
+    <JsonEditor
+      content={index.metadata.index_config.doc_mapping}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
+
+function IndexingSettingsTab({ index }: { index: Index }) {
+  const jsonSchema =
+    useJsonSchema("#/components/schemas/IndexingSettings") ?? undefined;
+
+  return (
+    <JsonEditor
+      content={index.metadata.index_config.indexing_settings}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
+
+function SearchSettingsTab({ index }: { index: Index }) {
+  const jsonSchema =
+    useJsonSchema("#/components/schemas/SearchSettings") ?? undefined;
+
+  return (
+    <JsonEditor
+      content={index.metadata.index_config.search_settings}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
+
+function RetentionSettingsTab({ index }: { index: Index }) {
+  const jsonSchema =
+    useJsonSchema("#/components/schemas/RetentionPolicy") ?? undefined;
+
+  return (
+    <JsonEditor
+      content={index.metadata.index_config.retention || {}}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
+
+function SplitsTab({ index }: { index: Index }) {
+  const splitShema = useJsonSchema("#/components/schemas/Split");
+  const jsonSchema =
+    (splitShema && {
+      ...splitShema,
+      $ref: undefined,
+      type: "array",
+      items: { $ref: "#/components/schemas/Split" },
+    }) ??
+    undefined;
+
+  return (
+    <JsonEditor
+      content={index.splits}
+      resizeOnMount={false}
+      jsonSchema={jsonSchema}
+    />
+  );
+}
diff --git a/quickwit/quickwit-ui/yarn.lock b/quickwit/quickwit-ui/yarn.lock
