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 { Trans, useTranslation } from "react-i18next";
-import { xor } from "lodash-es";
+import {
+  TableComposable,
+  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) => {
-    return serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
-  };
+  const isExperimentalFeature = (feature: string) =>
+    serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
 
-  const isPreviewFeature = (feature: string) => {
-    return serverInfo.profileInfo?.previewFeatures?.includes(feature);
-  };
+  const isPreviewFeature = (feature: string) =>
+    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,79 +118,138 @@ const Dashboard = () => {
           </Text>
         </TextContent>
       </PageSection>
-      <PageSection>
-        <Grid hasGutter>
-          <GridItem lg={2} sm={12}>
-            <Card className="keycloak__dashboard_card">
-              <CardTitle>{t("serverInfo")}</CardTitle>
-              <CardBody>
-                <DescriptionList>
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>{t("version")}</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      {serverInfo.systemInfo?.version}
-                    </DescriptionListDescription>
-                    <DescriptionListTerm>{t("product")}</DescriptionListTerm>
-                    <DescriptionListDescription>
-                      {toUpperCase(serverInfo.profileInfo?.name!)}
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                </DescriptionList>
-              </CardBody>
-            </Card>
-          </GridItem>
-          <GridItem lg={10} sm={12}>
-            <Card className="keycloak__dashboard_card">
-              <CardTitle>{t("profile")}</CardTitle>
-              <CardBody>
-                <DescriptionList>
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>
-                      {t("enabledFeatures")}{" "}
-                      <HelpItem
-                        fieldLabelId="dashboard:enabledFeatures"
-                        helpText="dashboard:infoEnabledFeatures"
-                      />
-                    </DescriptionListTerm>
-                    <DescriptionListDescription>
-                      <List variant={ListVariant.inline}>
-                        {enabledFeatures.map((feature) => (
-                          <ListItem key={feature}>
-                            {feature}{" "}
-                            {isExperimentalFeature(feature) ? (
-                              <Label color="orange">{t("experimental")}</Label>
-                            ) : null}
-                            {isPreviewFeature(feature) ? (
-                              <Label color="blue">{t("preview")}</Label>
-                            ) : null}
-                          </ListItem>
-                        ))}
-                      </List>
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                  <DescriptionListGroup>
-                    <DescriptionListTerm>
-                      {t("disabledFeatures")}{" "}
-                      <HelpItem
-                        fieldLabelId="dashboard:disabledFeatures"
-                        helpText="dashboard:infoDisabledFeatures"
-                      />
-                    </DescriptionListTerm>
-                    <DescriptionListDescription>
-                      <List variant={ListVariant.inline}>
-                        {serverInfo.profileInfo?.disabledFeatures?.map(
-                          (feature) => (
-                            <ListItem key={feature}>{feature}</ListItem>
-                          )
-                        )}
-                      </List>
-                    </DescriptionListDescription>
-                  </DescriptionListGroup>
-                </DescriptionList>
-              </CardBody>
-            </Card>
-          </GridItem>
-        </Grid>
+      <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">
+                    <CardTitle>{t("serverInfo")}</CardTitle>
+                    <CardBody>
+                      <DescriptionList>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("version")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {serverInfo.systemInfo?.version}
+                          </DescriptionListDescription>
+                          <DescriptionListTerm>
+                            {t("product")}
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            {toUpperCase(serverInfo.profileInfo?.name!)}
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                      </DescriptionList>
+                    </CardBody>
+                  </Card>
+                </GridItem>
+                <GridItem lg={10} sm={12}>
+                  <Card className="keycloak__dashboard_card">
+                    <CardTitle>{t("profile")}</CardTitle>
+                    <CardBody>
+                      <DescriptionList>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("enabledFeatures")}{" "}
+                            <HelpItem
+                              fieldLabelId="dashboard:enabledFeatures"
+                              helpText="dashboard:infoEnabledFeatures"
+                            />
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            <List variant={ListVariant.inline}>
+                              {enabledFeatures.map((feature) => (
+                                <ListItem key={feature}>
+                                  {feature}{" "}
+                                  {isExperimentalFeature(feature) ? (
+                                    <Label color="orange">
+                                      {t("experimental")}
+                                    </Label>
+                                  ) : null}
+                                  {isPreviewFeature(feature) ? (
+                                    <Label color="blue">{t("preview")}</Label>
+                                  ) : null}
+                                </ListItem>
+                              ))}
+                            </List>
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                        <DescriptionListGroup>
+                          <DescriptionListTerm>
+                            {t("disabledFeatures")}{" "}
+                            <HelpItem
+                              fieldLabelId="dashboard:disabledFeatures"
+                              helpText="dashboard:infoDisabledFeatures"
+                            />
+                          </DescriptionListTerm>
+                          <DescriptionListDescription>
+                            <List variant={ListVariant.inline}>
+                              {serverInfo.profileInfo?.disabledFeatures?.map(
+                                (feature) => (
+                                  <ListItem key={feature}>{feature}</ListItem>
+                                )
+                              )}
+                            </List>
+                          </DescriptionListDescription>
+                        </DescriptionListGroup>
+                      </DescriptionList>
+                    </CardBody>
+                  </Card>
+                </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,
 ];