Automatic redirect to login page in case of single cluster. Improved …

…error message
streamshub · Aug 9, 2024 · 118eed4 · 118eed4
1 parent 26f3a1d
commit 118eed4
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 77 deletions.
diff --git a/ui/api/kafka/actions.ts b/ui/api/kafka/actions.ts
@@ -48,7 +48,7 @@ export async function getKafkaClusters(): Promise<ClusterList[]> {
     return ClustersResponseSchema.parse(rawData).data;
   } catch (err) {
     log.error(err, "getKafkaClusters");
-    return [];
+    throw new Error("getKafkaClusters: couldn't connect with backend");
   }
 }
 

diff --git a/ui/app/[locale]/(public)/(home)/page.tsx b/ui/app/[locale]/(public)/(home)/page.tsx
@@ -1,9 +1,10 @@
-import { getConsumerGroups } from "@/api/consumerGroups/actions";
-import { getKafkaCluster, getKafkaClusters } from "@/api/kafka/actions";
-import { ClusterList } from "@/api/kafka/schema";
+import { getKafkaClusters } from "@/api/kafka/actions";
 import { AppLayout } from "@/components/AppLayout";
+import { ClustersTable } from "@/components/ClustersTable";
+import { ExpandableCard } from "@/components/ExpandableCard";
 import { Number } from "@/components/Format/Number";
 import { ExternalLink } from "@/components/Navigation/ExternalLink";
+import { RedirectOnLoad } from "@/components/Navigation/RedirectOnLoad";
 import {
   CardBody,
   DataList,
@@ -22,22 +23,23 @@ import {
   Text,
   TextContent,
   Title,
-  Tooltip,
 } from "@/libs/patternfly/react-core";
-import { HelpIcon } from "@/libs/patternfly/react-icons";
+import { redirect } from "@/navigation";
 import { isProductizedBuild } from "@/utils/env";
-import { useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
-import { ClustersTable } from "@/components/ClustersTable";
-import { ExpandableCard } from "@/components/ExpandableCard";
 import styles from "./home.module.css";
 
-export default function Home() {
-  const t = useTranslations();
-  const allClusters = getKafkaClusters();
+export default async function Home() {
+  const t = await getTranslations();
+  const allClusters = await getKafkaClusters();
   const productName = t("common.product");
   const brand = t("common.brand");
 
+  if (allClusters.length === 1) {
+    return <RedirectOnLoad url={`/kafka/${allClusters[0].id}/login`} />;
+  }
+
   return (
     <AppLayout>
       <PageSection padding={{ default: "noPadding" }} variant={"light"}>
@@ -66,7 +68,7 @@ export default function Home() {
                   {t.rich("homepage.platform_openshift_cluster")}
                   <Text component={"small"}>
                     <Suspense fallback={<Skeleton width={"200px"} />}>
-                      <ClustersCount clusterPromise={allClusters} />
+                      <Number value={allClusters.length} />
                       &nbsp;{t("homepage.connected_kafka_clusters")}
                     </Suspense>
                   </Text>
@@ -76,7 +78,7 @@ export default function Home() {
             >
               <CardBody>
                 <Suspense fallback={<ClustersTable clusters={undefined} />}>
-                  <ConnectedClustersTable clusterPromise={allClusters} />
+                  <ClustersTable clusters={allClusters} />
                 </Suspense>
               </CardBody>
             </ExpandableCard>
@@ -236,21 +238,3 @@ export default function Home() {
     </AppLayout>
   );
 }
-
-async function ClustersCount({
-  clusterPromise,
-}: {
-  clusterPromise: Promise<ClusterList[]>;
-}) {
-  const count = (await clusterPromise).length;
-  return <Number value={count} />;
-}
-
-async function ConnectedClustersTable({
-  clusterPromise,
-}: {
-  clusterPromise: Promise<ClusterList[]>;
-}) {
-  const clusters = await clusterPromise;
-  return <ClustersTable clusters={clusters} />;
-}
diff --git a/ui/app/[locale]/layout.tsx b/ui/app/[locale]/layout.tsx
@@ -22,13 +22,9 @@ export default async function Layout({ children, params: { locale } }: Props) {
   const authOptions = await getAuthOptions();
   const session = await getServerSession(authOptions);
   return (
-    <html lang="en">
-      <body>
-        <NextIntlProvider locale={locale} messages={messages}>
-          {children}
-        </NextIntlProvider>
-      </body>
-    </html>
+    <NextIntlProvider locale={locale} messages={messages}>
+      {children}
+    </NextIntlProvider>
   );
 }
 

diff --git a/ui/app/[locale]/(authorized)/error.tsx → ui/app/error.tsx b/ui/app/[locale]/(authorized)/error.tsx → ui/app/error.tsx
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -7,5 +7,9 @@ type Props = {
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
 export default function RootLayout({ children }: Props) {
-  return children;
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
 }
diff --git a/ui/app/[locale]/(authorized)/loading.tsx → ui/app/loading.tsx b/ui/app/[locale]/(authorized)/loading.tsx → ui/app/loading.tsx
diff --git a/ui/components/ApplicationError.tsx b/ui/components/ApplicationError.tsx
@@ -26,11 +26,10 @@ export function ApplicationError({
   error: Error & { digest?: string };
   onReset: () => void;
 }) {
-  const t = useTranslations();
   return (
     <EmptyState variant={"lg"}>
       <EmptyStateHeader
-        titleText={t("ApplicationError.title")}
+        titleText={"This page is temporarily unavailable"}
         headingLevel="h1"
         icon={
           <EmptyStateIcon
@@ -41,38 +40,34 @@ export function ApplicationError({
       />
       <EmptyStateBody>
         <TextContent>
-          <Text>{t("ApplicationError.body")}</Text>
+          <Text>
+            Try clicking the button below, or refreshing the page. If the
+            problem persists, contact your organization administrator.
+          </Text>
         </TextContent>
       </EmptyStateBody>
 
       <EmptyStateFooter>
         <EmptyStateActions>
           <Button variant="primary" onClick={onReset}>
-            {t("ApplicationError.retry")}
+            Retry
           </Button>
         </EmptyStateActions>
       </EmptyStateFooter>
       <EmptyStateFooter>
-        <ExpandableSection
-          initialExpanded={false}
-          toggleText={t("ApplicationError.error_details")}
-        >
+        <ExpandableSection initialExpanded={false} toggleText={"Show more"}>
           {error.digest && (
             <Title headingLevel={"h2"} className={"pf-v5-u-mb-lg"}>
               {error.digest}
             </Title>
           )}
           <DescriptionList>
             <DescriptionListGroup>
-              <DescriptionListTerm>
-                {t("ApplicationError.error")}
-              </DescriptionListTerm>
+              <DescriptionListTerm>Error</DescriptionListTerm>
               <DescriptionListDescription>
                 {error.name}
               </DescriptionListDescription>
-              <DescriptionListTerm>
-                {t("ApplicationError.message")}
-              </DescriptionListTerm>
+              <DescriptionListTerm>Message</DescriptionListTerm>
               <DescriptionListDescription>
                 {error.message}
               </DescriptionListDescription>

diff --git a/ui/components/ClustersTable.tsx b/ui/components/ClustersTable.tsx
@@ -1,14 +1,11 @@
 "use client";
 
 import { ClusterList } from "@/api/kafka/schema";
-import { useOpenClusterConnectionPanel } from "@/components/ClusterDrawerContext";
 import { ButtonLink } from "@/components/Navigation/ButtonLink";
 import { ResponsiveTable } from "@/components/Table";
 import { Truncate } from "@/libs/patternfly/react-core";
-import { ExternalLinkAltIcon } from "@/libs/patternfly/react-icons";
 import { TableVariant } from "@/libs/patternfly/react-table";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 
 const columns = ["name", "version", "namespace", "login"] as const;
 
@@ -18,7 +15,6 @@ export function ClustersTable({
   clusters: ClusterList[] | undefined;
 }) {
   const t = useTranslations();
-  const open = useOpenClusterConnectionPanel();
   return (
     <ResponsiveTable
       ariaLabel={"Kafka clusters"}
@@ -28,13 +24,25 @@ export function ClustersTable({
       renderHeader={({ column, Th }) => {
         switch (column) {
           case "name":
-            return <Th key="name_header" width={25}>{t("ClustersTable.name")}</Th>;
+            return (
+              <Th key="name_header" width={25}>
+                {t("ClustersTable.name")}
+              </Th>
+            );
           case "version":
-            return <Th key="version_header">{t("ClustersTable.kafka_version")}</Th>;
+            return (
+              <Th key="version_header">{t("ClustersTable.kafka_version")}</Th>
+            );
           case "namespace":
             return <Th key="namespace_header">{t("ClustersTable.project")}</Th>;
           case "login":
-            return <Th key="login_header" modifier={"fitContent"} aria-label="Login buttons" />;
+            return (
+              <Th
+                key="login_header"
+                modifier={"fitContent"}
+                aria-label="Login buttons"
+              />
+            );
         }
       }}
       renderCell={({ key, column, row, Td }) => {
@@ -80,6 +88,8 @@ export function ClustersTable({
       //     ]}
       //   />
       // )}
-    />
+    >
+      {t("ClustersTable.no_data")}
+    </ResponsiveTable>
   );
 }
diff --git a/ui/components/EmptyStateLoading.tsx b/ui/components/EmptyStateLoading.tsx
@@ -4,14 +4,12 @@ import {
   EmptyStateIcon,
   Spinner,
 } from "@/libs/patternfly/react-core";
-import { useTranslations } from "next-intl";
 
 export function EmptyStateLoading() {
-  const t = useTranslations();
   return (
     <EmptyState>
       <EmptyStateHeader
-        titleText={t("Loading.loading")}
+        titleText={"Loading"}
         headingLevel="h4"
         icon={<EmptyStateIcon icon={Spinner} />}
       />

diff --git a/ui/components/Table/ResponsiveTable.tsx b/ui/components/Table/ResponsiveTable.tsx
@@ -374,9 +374,11 @@ export const ResponsiveTable = <TRow, TCol>({
         );
       })}
       {data?.length === 0 && (
-        <Tr>
-          <Td colSpan={columns.length}>{children}</Td>
-        </Tr>
+        <Tbody>
+          <Tr>
+            <Td colSpan={columns.length}>{children}</Td>
+          </Tr>
+        </Tbody>
       )}
     </Table>
   );

diff --git a/ui/messages/en.json b/ui/messages/en.json
@@ -327,7 +327,8 @@
     "connection_not_configured": "Connection not configured",
     "online": "online",
     "connection_details": "Connection details",
-    "view_openshift_console": "View in OpenShift console"
+    "view_openshift_console": "View in OpenShift console",
+    "no_data": "No clusters available."
   },
   "ColumnsModal": {
     "title": "Manage columns",
@@ -433,14 +434,6 @@
     "show_internal_topics": "Show internal topics",
     "view_documentation": "Learn about configuring Kafka topics"
   },
-  "ApplicationError": {
-    "body": "Try clicking the button below, or refreshing the page. If the problem persists, contact your organization administrator.",
-    "error": "Error",
-    "title": "This page is temporarily unavailable",
-    "retry": "Retry",
-    "message": "Message",
-    "error_details": "Show more"
-  },
   "ClusterOverview": {
     "header": "Cluster overview",
     "description": "Key performance indicators and important information regarding the Kafka cluster.",