From 5ebb50816d585b558917ceddc6d1aa4441193d40 Mon Sep 17 00:00:00 2001 From: Erik Jan de Wit Date: Mon, 2 May 2022 16:30:24 +0200 Subject: [PATCH] Added search and operational info (#2530) --- package-lock.json | 14 ++--- package.json | 2 +- public/resources/en/dashboard.json | 4 +- src/dashboard/Dashboard.tsx | 37 +---------- src/dashboard/ProviderInfo.tsx | 98 ++++++++++++++++++++++++++++++ 5 files changed, 111 insertions(+), 44 deletions(-) create mode 100644 src/dashboard/ProviderInfo.tsx diff --git a/package-lock.json b/package-lock.json index d26e73364a..36893fc79d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,7 @@ "name": "keycloak-admin-ui", "license": "Apache", "dependencies": { - "@keycloak/keycloak-admin-client": "^18.0.1-dev.4", + "@keycloak/keycloak-admin-client": "^19.0.0-dev.0", "@patternfly/patternfly": "^4.185.1", "@patternfly/react-code-editor": "^4.43.16", "@patternfly/react-core": "^4.202.16", @@ -3942,9 +3942,9 @@ } }, "node_modules/@keycloak/keycloak-admin-client": { - "version": "18.0.1-dev.4", - "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.4.tgz", - "integrity": "sha512-J3do2wqPaSLddVABzZ9K5h/WXNmC751rO+glIORJNwXRIcl38b0oziD5fMzAgRhmsu1egZrEDM8h89phdFj2Cw==", + "version": "19.0.0-dev.0", + "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-19.0.0-dev.0.tgz", + "integrity": "sha512-QkCPuWUxf0rVw/V24VoaLC4luDLePGScyT12pVYaujZX9VaWQTNdZS3Ipm47W2+kNQQvL2NPWxKkWJmEWXyMiQ==", "dependencies": { "axios": "^0.26.1", "camelize-ts": "^1.0.8", @@ -26699,9 +26699,9 @@ } }, "@keycloak/keycloak-admin-client": { - "version": "18.0.1-dev.4", - "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-18.0.1-dev.4.tgz", - "integrity": "sha512-J3do2wqPaSLddVABzZ9K5h/WXNmC751rO+glIORJNwXRIcl38b0oziD5fMzAgRhmsu1egZrEDM8h89phdFj2Cw==", + "version": "19.0.0-dev.0", + "resolved": "https://registry.npmjs.org/@keycloak/keycloak-admin-client/-/keycloak-admin-client-19.0.0-dev.0.tgz", + "integrity": "sha512-QkCPuWUxf0rVw/V24VoaLC4luDLePGScyT12pVYaujZX9VaWQTNdZS3Ipm47W2+kNQQvL2NPWxKkWJmEWXyMiQ==", "requires": { "axios": "^0.26.1", "camelize-ts": "^1.0.8", diff --git a/package.json b/package.json index 9ece782c5c..2fc51167af 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "server:import-client": "./scripts/import-client.mjs" }, "dependencies": { - "@keycloak/keycloak-admin-client": "^18.0.1-dev.4", + "@keycloak/keycloak-admin-client": "^19.0.0-dev.0", "@patternfly/patternfly": "^4.185.1", "@patternfly/react-code-editor": "^4.43.16", "@patternfly/react-core": "^4.202.16", diff --git a/public/resources/en/dashboard.json b/public/resources/en/dashboard.json index c49d71d8ff..9c5bf4eb49 100644 --- a/public/resources/en/dashboard.json +++ b/public/resources/en/dashboard.json @@ -16,5 +16,7 @@ "providerInfo": "Provider info", "providers": "Providers", "realmInfo": "Realm info", - "spi": "SPI" + "spi": "SPI", + "showMore": "Show more", + "showLess": "Show less" } \ No newline at end of file diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index 4f24a9baf6..8d3cd4aa59 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/Dashboard.tsx @@ -26,14 +26,6 @@ import { TextContent, Title, } from "@patternfly/react-core"; -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"; @@ -48,6 +40,7 @@ import { import { DashboardTab, toDashboard } from "./routes/Dashboard"; import "./dashboard.css"; +import { ProviderInfo } from "./ProviderInfo"; const EmptyDashboard = () => { const { t } = useTranslation("dashboard"); @@ -221,33 +214,7 @@ const Dashboard = () => { title={{t("providerInfo")}} {...route("providers")} > - - - - - {t("spi")} - {t("providers")} - - - - {Object.keys(serverInfo.providers || []).map((name) => ( - - {name} - -
    - {Object.keys( - serverInfo.providers?.[name].providers || [] - ).map((value) => ( -
  • {value}
    • - ))} -
- - - ))} - - - - + diff --git a/src/dashboard/ProviderInfo.tsx b/src/dashboard/ProviderInfo.tsx new file mode 100644 index 0000000000..dbeebc9f91 --- /dev/null +++ b/src/dashboard/ProviderInfo.tsx @@ -0,0 +1,98 @@ +import React, { Fragment, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { ExpandableSection, PageSection } from "@patternfly/react-core"; +import { + TableComposable, + Tbody, + Td, + Th, + Thead, + Tr, +} from "@patternfly/react-table"; + +import { useServerInfo } from "../context/server-info/ServerInfoProvider"; +import { TableToolbar } from "../components/table-toolbar/TableToolbar"; + +export const ProviderInfo = () => { + const { t } = useTranslation("dashboard"); + const serverInfo = useServerInfo(); + const [filter, setFilter] = useState(""); + const [open, setOpen] = useState([]); + + const providerInfo = useMemo( + () => + Object.entries(serverInfo.providers || []).filter(([key]) => + key.includes(filter) + ), + [filter] + ); + + const toggleOpen = (option: string) => { + if (open.includes(option)) { + setOpen(open.filter((item: string) => item !== option)); + } else { + setOpen([...open, option]); + } + }; + + return ( + + + + + + {t("spi")} + {t("providers")} + + + + {providerInfo.map(([name, { providers }]) => ( + + {name} + +
    + {Object.entries(providers).map( + ([key, { operationalInfo }]) => ( + +
  • {key}
    • + {operationalInfo && ( + toggleOpen(key)} + toggleText={ + open.includes(key) + ? t("showLess") + : t("showMore") + } + > + + + {Object.entries(operationalInfo).map( + ([key, value]) => ( + + {key} + {value} + + ) + )} + + + + )} +     + ) + )} +
+ + + ))} + + + + + ); +};