Merge pull request #24 from eyefloaters/bookmarks

Bookmarks

.github/project.yml

@@ -1,5 +1,5 @@
 name: Web UI
 release:
-  current-version: 0.0.4
-  next-version: 0.0.5-SNAPSHOT
+  current-version: 0.0.5
+  next-version: 0.0.6-SNAPSHOT
 

ui/api/bookmarks.ts

@@ -0,0 +1,72 @@
+"use server";
+import { Bookmark, BookmarkSchema, Cluster, Response } from "@/api/types";
+import { getSession, setSession } from "@/utils/session";
+import { redirect } from "next/navigation";
+
+export async function getBookmarks(): Promise<Bookmark[]> {
+  const session = await getSession();
+
+  if (session?.bookmarks && Array.isArray(session.bookmarks)) {
+    return session.bookmarks.map((p) => BookmarkSchema.parse(p));
+  }
+  return [];
+}
+
+export async function getBookmark(id: string) {
+  const bookmarks = await getBookmarks();
+
+  const bookmark = bookmarks.find((p) => p.id === id);
+  if (!bookmark) {
+    redirect("/");
+  }
+  return bookmark;
+}
+
+export async function setPartialBookmark(formData: FormData) {
+  const session = await getSession();
+  const newBookmark = session?.newBookmark || {};
+  const data = Object.fromEntries(formData);
+  const newSession = { ...session, newBookmark: { ...newBookmark, ...data } };
+  console.dir({ data, session, newSession });
+  await setSession(newSession);
+}
+
+export async function createBookmark({
+  name,
+  bootstrapServer,
+  principal,
+  cluster,
+}: {
+  bootstrapServer: string;
+  principal: string;
+  name: string;
+  cluster: Cluster | undefined;
+}) {
+  const session = await getSession();
+  const bookmarks = (session?.bookmarks || []) as Bookmark[];
+  const newProfile: Bookmark = {
+    id: crypto.randomUUID(),
+    type: "bookmark",
+    attributes: {
+      cluster,
+      mechanism: "PLAIN",
+      name,
+      bootstrapServer,
+      principal,
+    },
+  };
+  const newAuthProfiles = [...bookmarks, newProfile];
+  await setSession({ bookmarks: newAuthProfiles, newBookmark: undefined });
+  return newProfile;
+}
+
+export async function getClusters(): Promise<Cluster[]> {
+  const url = `${process.env.BACKEND_URL}/api/kafkas?fields%5Bkafkas%5D=name,bootstrapServers,authType`;
+  const res = await fetch(url, {
+    headers: {
+      Accept: "application/json",
+    },
+  });
+  const rawData = await res.json();
+  return Response.parse(rawData).data;
+}

ui/api/topics.tsx → ui/api/topics.ts

@@ -1,61 +1,4 @@
-import { z } from "zod";
-
-const PartitionSchema = z.object({
-  partition: z.number(),
-  leader: z.object({
-    id: z.number(),
-    host: z.string(),
-    port: z.number(),
-  }),
-  replicas: z.array(
-    z.object({
-      id: z.number(),
-      host: z.string(),
-      port: z.number(),
-    }),
-  ),
-  isr: z.array(
-    z.object({
-      id: z.number(),
-      host: z.string(),
-      port: z.number(),
-    }),
-  ),
-  offset: z.object({
-    offset: z.number(),
-    leaderEpoch: z.number(),
-  }),
-});
-
-const ConfigSchema = z.object({
-  value: z.string(),
-  source: z.string(),
-  sensitive: z.boolean(),
-  readOnly: z.boolean(),
-  type: z.string(),
-});
-
-const TopicSchema = z.object({
-  id: z.string(),
-  type: z.string(),
-  attributes: z.object({
-    name: z.string(),
-    internal: z.boolean(),
-    partitions: z.array(PartitionSchema),
-    authorizedOperations: z.array(z.string()),
-    configs: z.record(z.string(), ConfigSchema),
-  }),
-});
-
-const TopicsResponse = z.object({
-  data: z.array(TopicSchema),
-});
-
-const TopicResponse = z.object({
-  data: TopicSchema,
-});
-
-export type Topic = z.infer<typeof TopicSchema>;
+import { Topic, TopicResponse, TopicsResponse } from "@/api/types";
 
 export async function getTopics(kafkaId: string): Promise<Topic[]> {
   const url = `${process.env.BACKEND_URL}/api/kafkas/${kafkaId}/topics?fields%5Btopics%5D=name,internal,partitions,authorizedOperations,configs&offsetSpec=latest`;

ui/api/types.ts

@@ -0,0 +1,77 @@
+import { z } from "zod";
+
+const ClusterSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  attributes: z.object({
+    name: z.string(),
+    bootstrapServers: z.string(),
+  }),
+});
+export const Response = z.object({
+  data: z.array(ClusterSchema),
+});
+export type Cluster = z.infer<typeof ClusterSchema>;
+export const BookmarkSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  attributes: z.object({
+    name: z.string(),
+    bootstrapServer: z.string(),
+    principal: z.string(),
+    cluster: ClusterSchema.optional(),
+    mechanism: z.string(),
+  }),
+});
+export type Bookmark = z.infer<typeof BookmarkSchema>;
+const PartitionSchema = z.object({
+  partition: z.number(),
+  leader: z.object({
+    id: z.number(),
+    host: z.string(),
+    port: z.number(),
+  }),
+  replicas: z.array(
+    z.object({
+      id: z.number(),
+      host: z.string(),
+      port: z.number(),
+    }),
+  ),
+  isr: z.array(
+    z.object({
+      id: z.number(),
+      host: z.string(),
+      port: z.number(),
+    }),
+  ),
+  offset: z.object({
+    offset: z.number(),
+    leaderEpoch: z.number(),
+  }),
+});
+const ConfigSchema = z.object({
+  value: z.string(),
+  source: z.string(),
+  sensitive: z.boolean(),
+  readOnly: z.boolean(),
+  type: z.string(),
+});
+const TopicSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  attributes: z.object({
+    name: z.string(),
+    internal: z.boolean(),
+    partitions: z.array(PartitionSchema),
+    authorizedOperations: z.array(z.string()),
+    configs: z.record(z.string(), ConfigSchema),
+  }),
+});
+export const TopicsResponse = z.object({
+  data: z.array(TopicSchema),
+});
+export const TopicResponse = z.object({
+  data: TopicSchema,
+});
+export type Topic = z.infer<typeof TopicSchema>;