Initial version without filter (#2518)

public/resources/en/dashboard.json

@@ -12,5 +12,9 @@
   "infoEnabledFeatures": "Something about what enabled features are.",
   "infoDisabledFeatures": "Something about what disabled features are.",
   "disabledFeatures": "Disabled features",
-  "adminUiVersion": "<0 className=\"pf-u-mr-md\">Admin UI version</0>{{version}}"
+  "adminUiVersion": "<0 className=\"pf-u-mr-md\">Admin UI version</0>{{version}}",
+  "providerInfo": "Provider info",
+  "providers": "Providers",
+  "realmInfo": "Realm info",
+  "spi": "SPI"
 }

src/dashboard/Dashboard.tsx

@@ -1,3 +1,7 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
+import { xor } from "lodash-es";
 import {
   Brand,
   Card,
@@ -16,22 +20,34 @@ import {
   ListItem,
   ListVariant,
   PageSection,
+  Tab,
+  TabTitleText,
   Text,
   TextContent,
   Title,
 } from "@patternfly/react-core";
-import React from "react";
+import {
-import { Trans, useTranslation } from "react-i18next";
+  TableComposable,
-import { xor } from "lodash-es";
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@patternfly/react-table";
 
 import { useRealm } from "../context/realm-context/RealmContext";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { toUpperCase } from "../util";
 import { HelpItem } from "../components/help-enabler/HelpItem";
 import environment from "../environment";
+import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
+import {
+  routableTab,
+  RoutableTabs,
+} from "../components/routable-tabs/RoutableTabs";
+import { DashboardTab, toDashboard } from "./routes/Dashboard";
 
 import "./dashboard.css";
-import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
 
 const EmptyDashboard = () => {
   const { t } = useTranslation("dashboard");
@@ -60,6 +76,7 @@ const Dashboard = () => {
   const { t } = useTranslation("dashboard");
   const { realm } = useRealm();
   const serverInfo = useServerInfo();
+  const history = useHistory();
 
   const enabledFeatures = xor(
     serverInfo.profileInfo?.disabledFeatures,
@@ -67,18 +84,25 @@ const Dashboard = () => {
     serverInfo.profileInfo?.previewFeatures
   );
 
-  const isExperimentalFeature = (feature: string) => {
+  const isExperimentalFeature = (feature: string) =>
-    return serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
+    serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
-  };
 
-  const isPreviewFeature = (feature: string) => {
+  const isPreviewFeature = (feature: string) =>
-    return serverInfo.profileInfo?.previewFeatures?.includes(feature);
+    serverInfo.profileInfo?.previewFeatures?.includes(feature);
-  };
 
   if (Object.keys(serverInfo).length === 0) {
     return <KeycloakSpinner />;
   }
 
+  const route = (tab: DashboardTab) =>
+    routableTab({
+      to: toDashboard({
+        realm,
+        tab,
+      }),
+      history,
+    });
+
   return (
     <>
       <PageSection variant="light">
@@ -94,7 +118,23 @@ const Dashboard = () => {
           </Text>
         </TextContent>
       </PageSection>
-      <PageSection>
+      <PageSection variant="light" className="pf-u-p-0">
+        <RoutableTabs
+          data-testid="dashboard-tabs"
+          defaultLocation={toDashboard({
+            realm,
+            tab: "info",
+          })}
+          isBox
+          mountOnEnter
+        >
+          <Tab
+            id="info"
+            data-testid="infoTab"
+            title={<TabTitleText>{t("realmInfo")}</TabTitleText>}
+            {...route("info")}
+          >
+            <PageSection variant="light">
               <Grid hasGutter>
                 <GridItem lg={2} sm={12}>
                   <Card className="keycloak__dashboard_card">
@@ -102,11 +142,15 @@ const Dashboard = () => {
                     <CardBody>
                       <DescriptionList>
                         <DescriptionListGroup>
-                    <DescriptionListTerm>{t("version")}</DescriptionListTerm>
+                          <DescriptionListTerm>
+                            {t("version")}
+                          </DescriptionListTerm>
                           <DescriptionListDescription>
                             {serverInfo.systemInfo?.version}
                           </DescriptionListDescription>
-                    <DescriptionListTerm>{t("product")}</DescriptionListTerm>
+                          <DescriptionListTerm>
+                            {t("product")}
+                          </DescriptionListTerm>
                           <DescriptionListDescription>
                             {toUpperCase(serverInfo.profileInfo?.name!)}
                           </DescriptionListDescription>
@@ -134,7 +178,9 @@ const Dashboard = () => {
                                 <ListItem key={feature}>
                                   {feature}{" "}
                                   {isExperimentalFeature(feature) ? (
-                              <Label color="orange">{t("experimental")}</Label>
+                                    <Label color="orange">
+                                      {t("experimental")}
+                                    </Label>
                                   ) : null}
                                   {isPreviewFeature(feature) ? (
                                     <Label color="blue">{t("preview")}</Label>
@@ -168,6 +214,43 @@ const Dashboard = () => {
                 </GridItem>
               </Grid>
             </PageSection>
+          </Tab>
+          <Tab
+            id="providers"
+            data-testid="providersTab"
+            title={<TabTitleText>{t("providerInfo")}</TabTitleText>}
+            {...route("providers")}
+          >
+            <PageSection variant="light">
+              <TableComposable variant="compact">
+                <Thead>
+                  <Tr>
+                    <Th width={20}>{t("spi")}</Th>
+                    <Th>{t("providers")}</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {Object.keys(serverInfo.providers || []).map((name) => (
+                    <Tr key={name}>
+                      <Td>{name}</Td>
+                      <Td>
+                        <ul>
+                          {Object.keys(
+                            serverInfo.providers?.[name].providers || []
+                          ).map((value) => (
+                            <li key={value}>{value}</li>
+                          ))}
+                        </ul>
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </TableComposable>
+              <ul></ul>
+            </PageSection>
+          </Tab>
+        </RoutableTabs>
+      </PageSection>
     </>
   );
 };

src/dashboard/routes/Dashboard.ts

@@ -3,10 +3,12 @@ import { lazy } from "react";
 import { generatePath } from "react-router-dom";
 import type { RouteDef } from "../../route-config";
 
-export type DashboardParams = { realm?: string };
+export type DashboardTab = "info" | "providers";
+
+export type DashboardParams = { realm?: string; tab?: DashboardTab };
 
 export const DashboardRoute: RouteDef = {
-  path: "/:realm?",
+  path: "/:realm?/:tab?",
   component: lazy(() => import("../Dashboard")),
   breadcrumb: (t) => t("common:home"),
   access: "anyone",

src/route-config.ts

@@ -43,7 +43,7 @@ export const routes: RouteDef[] = [
   ...sessionRoutes,
   ...userFederationRoutes,
   ...userRoutes,
-  ...dashboardRoutes,
   ...groupsRoutes,
+  ...dashboardRoutes,
   NotFoundRoute,
 ];