feat(FE): Show schema

src/pages/schema-registry/schema-list.tsx

@@ -9,13 +9,13 @@ function getSchemaNamesList(config: SchemaRegistry): Promise<string[]> {
   return invoke<string[]>("list_subjects", { config });
 }
 
-export const SchemaList = ({
-  schemaRegistry,
-  onTopicSelected,
-}: {
+type SchemaListProps = {
   schemaRegistry: SchemaRegistry;
   onTopicSelected: (topicName: string) => void;
-}) => {
+};
+
+export const SchemaList = (props: SchemaListProps) => {
+  const { schemaRegistry, onTopicSelected } = props;
   const [state, setState] = useState<{ schemas: string[]; search?: string; loading: boolean }>({
     schemas: [],
     loading: true,

src/pages/schema-registry/schema.tsx

@@ -1,11 +1,26 @@
-import { ActionIcon, Container, Divider, Group, Title, Tooltip } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons";
+import { Container, Divider, Group, Select, Title, Tooltip } from "@mantine/core";
+import { Prism } from "@mantine/prism";
+import { IconVersions } from "@tabler/icons";
 import { invoke } from "@tauri-apps/api";
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 import { SchemaRegistry } from "../../models/kafka";
+import { notifyAlert, notifySuccess } from "../../providers";
+import { TauriError, format } from "../../tauri";
 
-const getLatestSchema = (subjectName: string, config: SchemaRegistry) =>
-  invoke("get_schema", { subjectName, config }).catch((err) => console.error(err));
+type SchemaVersion = {
+  subject: string;
+  id: number;
+  version: number;
+  schema: string;
+};
+
+const getSchemaVersions = (subjectName: string, config: SchemaRegistry) =>
+  invoke<[SchemaVersion]>("get_schema", { subjectName, config })
+    .then((res) => {
+      notifySuccess(`${res.length} schema version found for ${subjectName}`);
+      return res;
+    })
+    .catch((err: TauriError) => notifyAlert(format(err)));
 
 export const Schema = ({
   schemaName,
@@ -14,23 +29,55 @@ export const Schema = ({
   schemaName: string;
   schemaRegistry: SchemaRegistry;
 }) => {
-  useMemo(async () => {
-    const lastSchema = await getLatestSchema(schemaName, schemaRegistry);
-    console.log(lastSchema);
-  }, [schemaName]);
+  const [state, setState] = useState<{
+    schemas: SchemaVersion[];
+    version?: number;
+  }>({ schemas: [] });
+
+  const lastSchemaVersion = (schemas: SchemaVersion[]) =>
+    Math.max(...schemas.map((s) => s.version));
+
+  useEffect(() => {
+    const update = async () => {
+      const schemas = (await getSchemaVersions(schemaName, schemaRegistry)) ?? [];
+      setState({ schemas, version: lastSchemaVersion(schemas) });
+    };
+    update();
+  }, [schemaName, schemaRegistry]);
+
+  const getCurrentSchema = () => {
+    if (state.schemas.length > 0) {
+      const version = state.version ?? lastSchemaVersion(state.schemas);
+      const currentSchema = state.schemas.find((s) => s.version == version)?.schema;
+      return currentSchema ? JSON.stringify(JSON.parse(currentSchema), null, 2) : null;
+    }
+    return null;
+  };
+
   return (
     <Container style={{ width: "100%" }}>
       <Group position={"apart"}>
         <Title>{schemaName}</Title>
         <Group>
-          <Tooltip label="Topic info">
+          {/* todo: <Tooltip position="left" label="Schema info">
             <ActionIcon>
               <IconInfoCircle />
             </ActionIcon>
-          </Tooltip>
+          </Tooltip> */}
         </Group>
       </Group>
-      <Divider mt={10} />
+      <Divider my={10} />
+      <Group>
+        <Tooltip position="right" label="Schema version">
+          <Select
+            icon={<IconVersions />}
+            data={state.schemas.map((s) => s.version.toString())}
+            value={state.version?.toString()}
+            onChange={(v) => v && setState({ ...state, version: +v })}
+          />
+        </Tooltip>
+      </Group>
+      <Prism language="json">{getCurrentSchema() ?? ""}</Prism>
     </Container>
   );
 };