feat: UI changes for Apicurio integration (#1242)

* feat: UI work for Apicurio integration * Add external link to view schema content --------- Signed-off-by: hemahg <[email protected]>
streamshub · Dec 4, 2024 · fdc98ff · fdc98ff
1 parent c8bacd7
commit fdc98ff
Show file tree

Hide file tree

Showing 11 changed files with 381 additions and 93 deletions.
diff --git a/ui/api/schema/action.ts b/ui/api/schema/action.ts
@@ -0,0 +1,12 @@
+"use server";
+
+import { getHeaders } from "../api";
+
+export async function getSchema(contentLink: string) {
+  const url = `${process.env.BACKEND_URL}/${contentLink}`;
+  const res = await fetch(url, {
+    headers: await getHeaders(),
+  });
+  const rawData = await res.text();
+  return rawData;
+}
diff --git a/...locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx b/...locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/ConnectedMessagesTable.tsx
@@ -30,12 +30,14 @@ export function ConnectedMessagesTable({
   topicName,
   selectedMessage: serverSelectedMessage,
   partitions,
+  baseurl
 }: {
   kafkaId: string;
   topicId: string;
   topicName: string;
   selectedMessage: Message | undefined;
   partitions: number;
+  baseurl: string;
 }) {
   const [params, sp] = useParseSearchParams();
   const updateUrl = useFilterParams(sp);
@@ -208,6 +210,7 @@ export function ConnectedMessagesTable({
             onSelectMessage={setSelected}
             onDeselectMessage={deselectMessage}
             onReset={onReset}
+            baseurl={baseurl}
           >
             {limit === "continuously" && (
               <Refresher

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/page.tsx
@@ -37,6 +37,7 @@ export default async function ConnectedMessagesPage({
       topicName={topic.attributes.name!}
       selectedMessage={selectedMessage}
       partitions={topic.attributes.numPartitions ?? 0}
+      baseurl={`/kafka/${kafkaId}/topics/${topicId}/messages`}
     />
   );
 }
diff --git a/...locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/schema/ConnectedSchema.tsx b/...locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/schema/ConnectedSchema.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { SchemaValue } from "@/components/MessagesTable/components/SchemaValue";
+import { PageSection, Title } from "@patternfly/react-core";
+
+export function ConnectedSchema({
+  content,
+  name,
+}: {
+  content: string;
+  name: string;
+}) {
+  return (
+    <PageSection variant="light">
+      <Title headingLevel={"h4"}>{name}</Title>
+      <SchemaValue schema={content} name={name} />
+    </PageSection>
+  );
+}
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/schema/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/[topicId]/messages/schema/page.tsx
@@ -0,0 +1,21 @@
+import { getSchema } from "@/api/schema/action";
+import { ConnectedSchema } from "./ConnectedSchema";
+
+export default async function ConnectedSchemaPage({
+  searchParams,
+}: {
+  searchParams: { content?: string; schemaname?: string };
+}) {
+  const urlSearchParams = new URLSearchParams(searchParams);
+
+  const content = urlSearchParams.get("content");
+  const schemaname = urlSearchParams.get("schemaname");
+
+  if (!content) {
+    throw new Error("Content parameter is missing.");
+  }
+
+  const schemaContent = await getSchema(content);
+
+  return <ConnectedSchema content={schemaContent} name={schemaname || ""} />;
+}
diff --git a/ui/components/MessagesTable/MessagesTable.tsx b/ui/components/MessagesTable/MessagesTable.tsx
@@ -12,7 +12,10 @@ import {
   TextContent,
   Tooltip,
 } from "@/libs/patternfly/react-core";
-import { ExclamationTriangleIcon, HelpIcon } from "@/libs/patternfly/react-icons";
+import {
+  ExclamationTriangleIcon,
+  HelpIcon,
+} from "@/libs/patternfly/react-icons";
 import {
   BaseCellProps,
   InnerScrollContainer,
@@ -36,6 +39,7 @@ import { NoData } from "./components/NoData";
 import { NoResultsEmptyState } from "./components/NoResultsEmptyState";
 import { UnknownValuePreview } from "./components/UnknownValuePreview";
 import { beautifyUnknownValue, isSameMessage } from "./components/utils";
+import { ExternalLink } from "../Navigation/ExternalLink";
 
 const columnWidths: Record<Column, BaseCellProps["width"]> = {
   "offset-partition": 10,
@@ -48,10 +52,12 @@ const columnWidths: Record<Column, BaseCellProps["width"]> = {
 };
 
 const defaultColumns: Column[] = [
-  "timestampUTC",
   "offset-partition",
+  "timestampUTC",
   "key",
+  "headers",
   "value",
+  "size",
 ];
 
 export type MessagesTableProps = {
@@ -71,6 +77,7 @@ export type MessagesTableProps = {
   onSelectMessage: (message: Message) => void;
   onDeselectMessage: () => void;
   onReset: () => void;
+  baseurl: string;
 };
 
 export function MessagesTable({
@@ -91,6 +98,7 @@ export function MessagesTable({
   onDeselectMessage,
   onReset,
   children,
+  baseurl,
 }: PropsWithChildren<MessagesTableProps>) {
   const t = useTranslations("message-browser");
   const columnLabels = useColumnLabels();
@@ -181,7 +189,7 @@ export function MessagesTable({
                     <Th
                       key={key}
                       width={columnWidths[column]}
-                      modifier={"nowrap"}
+                      modifier={"fitContent"}
                       sort={
                         column === "timestamp" ||
                         column === "timestampUTC" ||
@@ -209,11 +217,7 @@ export function MessagesTable({
 
                     function Cell({ children }: PropsWithChildren) {
                       return (
-                        <Td
-                          key={key}
-                          dataLabel={columnLabels[column]}
-                          modifier={"nowrap"}
-                        >
+                        <Td key={key} dataLabel={columnLabels[column]}>
                           {children}
                         </Td>
                       );
@@ -264,30 +268,49 @@ export function MessagesTable({
                           <Cell>
                             {row.attributes.key ? (
                               <>
-                              <UnknownValuePreview
-                                value={row.attributes.key}
-                                highlight={filterQuery}
-                                onClick={() => {
-                                  setDefaultTab("key");
-                                  onSelectMessage(row);
-                                }}
-                              />
-                              {row.relationships.keySchema && (
-                                <TextContent>
-                                  <Text component={"small"}>
-                                    {row.relationships.keySchema?.meta?.artifactType && (
-                                        <>
-                                        {row.relationships.keySchema?.meta?.artifactType}
-                                        </>
-                                    )}
-                                    {row.relationships.keySchema?.meta?.errors && (
+                                <UnknownValuePreview
+                                  value={row.attributes.key}
+                                  highlight={filterQuery}
+                                  onClick={() => {
+                                    setDefaultTab("key");
+                                    onSelectMessage(row);
+                                  }}
+                                />
+                                {row.relationships.keySchema && (
+                                  <TextContent>
+                                    <Text component={"small"}>
+                                      {row.relationships.keySchema?.meta
+                                        ?.name &&
+                                      row.relationships.keySchema?.links
+                                        ?.content ? (
+                                        <ExternalLink
+                                          testId={"key-schema"}
+                                          href={`${baseurl}/schema?content=${encodeURIComponent(row.relationships.keySchema?.links?.content)}&schemaname=${encodeURIComponent(
+                                            row.relationships.keySchema?.meta
+                                              ?.name,
+                                          )}`}
+                                        >
+                                          {
+                                            row.relationships.keySchema?.meta
+                                              ?.name
+                                          }
+                                        </ExternalLink>
+                                      ) : (
+                                        row.relationships.keySchema?.meta?.name
+                                      )}
+                                      {row.relationships.keySchema?.meta
+                                        ?.errors && (
                                         <>
-                                        <ExclamationTriangleIcon /> { row.relationships.keySchema?.meta?.errors[0].detail }
+                                          <ExclamationTriangleIcon />{" "}
+                                          {
+                                            row.relationships.keySchema?.meta
+                                              ?.errors[0].detail
+                                          }
                                         </>
-                                    )}
-                                  </Text>
-                                </TextContent>
-                              )}
+                                      )}
+                                    </Text>
+                                  </TextContent>
+                                )}
                               </>
                             ) : (
                               empty
@@ -318,30 +341,47 @@ export function MessagesTable({
                           <Cell>
                             {row.attributes.value ? (
                               <>
-                              <UnknownValuePreview
-                                value={row.attributes.value}
-                                highlight={filterQuery}
-                                onClick={() => {
-                                  setDefaultTab("value");
-                                  onSelectMessage(row);
-                                }}
-                              />
-                              {row.relationships.valueSchema && (
-                                <TextContent>
-                                  <Text component={"small"}>
-                                    {row.relationships.valueSchema?.meta?.artifactType && (
-                                      <>
-                                      {row.relationships.valueSchema?.meta?.artifactType}
-                                      </>
-                                    )}
-                                    {row.relationships.valueSchema?.meta?.errors && (
-                                      <>
-                                      <ExclamationTriangleIcon /> { row.relationships.valueSchema?.meta?.errors[0].detail }
-                                      </>
-                                    )}
-                                  </Text>
-                                </TextContent>
-                              )}
+                                <UnknownValuePreview
+                                  value={row.attributes.value}
+                                  highlight={filterQuery}
+                                  onClick={() => {
+                                    setDefaultTab("value");
+                                    onSelectMessage(row);
+                                  }}
+                                />
+                                {row.relationships.valueSchema && (
+                                  <TextContent>
+                                    <Text component={"small"}>
+                                      {row.relationships.valueSchema?.meta
+                                        ?.name &&
+                                      row.relationships.valueSchema?.links
+                                        ?.content ? (
+                                        <ExternalLink
+                                          testId="schema-value"
+                                          href={`${baseurl}/schema?content=${encodeURIComponent(row.relationships.valueSchema.links.content)}&schemaname=${encodeURIComponent(row.relationships.valueSchema.meta.name)}`}
+                                        >
+                                          {
+                                            row.relationships.valueSchema.meta
+                                              .name
+                                          }
+                                        </ExternalLink>
+                                      ) : (
+                                        row.relationships.valueSchema?.meta
+                                          ?.name
+                                      )}
+                                      {row.relationships.valueSchema?.meta
+                                        ?.errors && (
+                                        <>
+                                          <ExclamationTriangleIcon />{" "}
+                                          {
+                                            row.relationships.valueSchema?.meta
+                                              ?.errors[0].detail
+                                          }
+                                        </>
+                                      )}
+                                    </Text>
+                                  </TextContent>
+                                )}
                               </>
                             ) : (
                               empty

diff --git a/ui/components/MessagesTable/components/MessageDetails.stories.tsx b/ui/components/MessagesTable/components/MessageDetails.stories.tsx
@@ -16,7 +16,9 @@ export default {
         partition: 4,
         offset: 16,
         size: 1234,
-        timestamp: new Date(Date.UTC(2024, 11, 31, 23, 59, 59, 999)).toISOString(),
+        timestamp: new Date(
+          Date.UTC(2024, 11, 31, 23, 59, 59, 999),
+        ).toISOString(),
         headers: {
           "post-office-box": "string",
           "extended-address": "string",
@@ -29,6 +31,23 @@ export default {
         value:
           '{"order":{"address":{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},"contact":{"firstName":"james","lastName":"smith","phone":"512-123-1234"},"orderId":"123"},"primitives":{"stringPrimitive":"some value","booleanPrimitive":true,"numberPrimitive":24},"addressList":[{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"},{"street":"123 any st","city":"Austin","state":"TX","zip":"78626"}]}',
       },
+      relationships: {
+        keySchema: null,
+        valueSchema: {
+          meta: {
+            artifactType: "AVRO",
+            name: "com.example.price",
+          },
+          data: {
+            type: "schemas",
+            id: "eyJnbG9iYWxJZCI6MX0=",
+          },
+          links: {
+            content:
+              "/api/registries/my-apicurio-registry/schemas/eyJnbG9iYWxJZCI6MX0=",
+          },
+        },
+      },
     },
     defaultTab: "value",
     onClose: fn(),