Improved loading of the sidebar

streamshub · Aug 9, 2024 · 2dd05d8 · 2dd05d8
1 parent 82d5689
commit 2dd05d8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 52 deletions.
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks.tsx
@@ -2,33 +2,44 @@ import { getKafkaCluster } from "@/api/kafka/actions";
 import { NavItemLink } from "@/components/Navigation/NavItemLink";
 import { NavGroup, NavList } from "@/libs/patternfly/react-core";
 import { useTranslations } from "next-intl";
+import { Suspense } from "react";
 
-export async function ClusterLinks({ kafkaId }: { kafkaId: string }) {
+export function ClusterLinks({ kafkaId }: { kafkaId: string }) {
   const t = useTranslations();
-  const cluster = await getKafkaCluster(kafkaId);
-  if (cluster) {
-    return (
-      <NavList>
-        <NavGroup title={cluster.attributes.name}>
-          <NavItemLink url={`/kafka/${kafkaId}/overview`}>
-            {t("AppLayout.cluster_overview")}
-          </NavItemLink>
-          <NavItemLink url={`/kafka/${kafkaId}/topics`}>
-            {t("AppLayout.topics")}
-          </NavItemLink>
-          <NavItemLink url={`/kafka/${kafkaId}/nodes`}>
-            {t("AppLayout.brokers")}
-          </NavItemLink>
-          {/*
+  return (
+    <NavList>
+      <NavGroup
+        title={
+          (
+            <Suspense>
+              <ClusterName kafkaId={kafkaId} />
+            </Suspense>
+          ) as unknown as string
+        }
+      >
+        <NavItemLink url={`/kafka/${kafkaId}/overview`}>
+          {t("AppLayout.cluster_overview")}
+        </NavItemLink>
+        <NavItemLink url={`/kafka/${kafkaId}/topics`}>
+          {t("AppLayout.topics")}
+        </NavItemLink>
+        <NavItemLink url={`/kafka/${kafkaId}/nodes`}>
+          {t("AppLayout.brokers")}
+        </NavItemLink>
+        {/*
       <NavItemLink url={`/kafka/${kafkaId}/service-registry`}>
         Service registry
       </NavItemLink>
 */}
-          <NavItemLink url={`/kafka/${kafkaId}/consumer-groups`}>
-            {t("AppLayout.consumer_groups")}
-          </NavItemLink>
-        </NavGroup>
-      </NavList>
-    );
-  }
+        <NavItemLink url={`/kafka/${kafkaId}/consumer-groups`}>
+          {t("AppLayout.consumer_groups")}
+        </NavItemLink>
+      </NavGroup>
+    </NavList>
+  );
+}
+
+async function ClusterName({ kafkaId }: { kafkaId: string }) {
+  const cluster = await getKafkaCluster(kafkaId);
+  return cluster?.attributes.name ?? `Cluster ${kafkaId}`;
 }
diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/layout.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/layout.tsx
@@ -1,20 +1,16 @@
-import { getKafkaCluster, getKafkaClusters } from "@/api/kafka/actions";
 import { ClusterLinks } from "@/app/[locale]/(authorized)/kafka/[kafkaId]/ClusterLinks";
 import { getAuthOptions } from "@/app/api/auth/[...nextauth]/route";
 import { AppLayout } from "@/components/AppLayout";
 import { AppLayoutProvider } from "@/components/AppLayoutProvider";
-import { getServerSession } from "next-auth";
-import { KafkaParams } from "./kafka.params";
-import { KafkaBreadcrumbItem } from "./KafkaBreadcrumbItem";
 import {
   Breadcrumb,
-  BreadcrumbItem,
   PageBreadcrumb,
   PageGroup,
 } from "@/libs/patternfly/react-core";
+import { getServerSession } from "next-auth";
 import { useTranslations } from "next-intl";
-import { notFound } from "next/navigation";
 import { PropsWithChildren, ReactNode, Suspense } from "react";
+import { KafkaParams } from "./kafka.params";
 
 export default async function AsyncLayout({
   children,
@@ -62,11 +58,7 @@ function Layout({
     <AppLayoutProvider>
       <AppLayout
         username={username}
-        sidebar={
-          <Suspense>
-            <ClusterLinks kafkaId={kafkaId} />
-          </Suspense>
-        }
+        sidebar={<ClusterLinks kafkaId={kafkaId} />}
       >
         <PageGroup stickyOnBreakpoint={{ default: "top" }}>
           <PageBreadcrumb>
@@ -80,21 +72,3 @@ function Layout({
     </AppLayoutProvider>
   );
 }
-
-async function ConnectedKafkaBreadcrumbItem({
-  kafkaId,
-  isActive,
-}: KafkaParams & { isActive: boolean }) {
-  const cluster = await getKafkaCluster(kafkaId);
-  if (!cluster) {
-    notFound();
-  }
-  const clusters = await getKafkaClusters();
-  return (
-    <KafkaBreadcrumbItem
-      selected={cluster}
-      clusters={clusters}
-      isActive={isActive}
-    />
-  );
-}