@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
58 lines • 8.54 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { FeatureType, } from "@keycloak/keycloak-admin-client/lib/defs/featureRepresentation";
import { HelpItem, label, useEnvironment } from "../ui-shared";
import { ActionList, ActionListItem, Brand, Button, Card, CardBody, CardTitle, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, EmptyState, EmptyStateBody, EmptyStateHeader, Grid, GridItem, Label, List, ListItem, ListVariant, PageSection, Tab, TabTitleText, Text, TextContent, TextVariants, Title, } from "@patternfly/react-core";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { KeycloakSpinner } from "../ui-shared";
import { RoutableTabs, useRoutableTab, } from "../components/routable-tabs/RoutableTabs";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import helpUrls from "../help-urls";
import useLocaleSort, { mapByKey } from "../utils/useLocaleSort";
import { ProviderInfo } from "../dashboard/ProviderInfo";
import { toDashboard } from "../dashboard/routes/Dashboard";
import "./dashboard.css";
const EmptyDashboard = () => {
const { environment } = useEnvironment();
const { t } = useTranslation();
const { realm, realmRepresentation: realmInfo } = useRealm();
const brandImage = environment.logo ? environment.logo : "/icon.svg";
const realmDisplayInfo = label(t, realmInfo === null || realmInfo === void 0 ? void 0 : realmInfo.displayName, realm);
return (_jsx(PageSection, { variant: "light", children: _jsxs(EmptyState, { variant: "lg", children: [_jsx(Brand, { src: environment.resourceUrl + brandImage, alt: "Keycloak icon", className: "keycloak__dashboard_icon" }), _jsx(EmptyStateHeader, { titleText: _jsx(_Fragment, { children: t("welcome") }), headingLevel: "h2" }), _jsx(EmptyStateHeader, { titleText: realmDisplayInfo, headingLevel: "h1" }), _jsx(EmptyStateBody, { children: t("introduction") })] }) }));
};
const FeatureItem = ({ feature }) => {
const { t } = useTranslation();
return (_jsxs(ListItem, { className: "pf-v5-u-mb-sm", children: [feature.name, "\u00A0", feature.type === FeatureType.Experimental && (_jsx(Label, { color: "orange", children: t("experimental") })), feature.type === FeatureType.Preview && (_jsx(Label, { color: "blue", children: t("preview") })), feature.type === FeatureType.Default && (_jsx(Label, { color: "green", children: t("supported") }))] }));
};
const Dashboard = () => {
var _a, _b, _c, _d;
const { t } = useTranslation();
const { realm, realmRepresentation: realmInfo } = useRealm();
const serverInfo = useServerInfo();
const localeSort = useLocaleSort();
const sortedFeatures = useMemo(() => { var _a; return localeSort((_a = serverInfo.features) !== null && _a !== void 0 ? _a : [], mapByKey("name")); }, [serverInfo.features]);
const disabledFeatures = useMemo(() => sortedFeatures.filter((f) => !f.enabled) || [], [serverInfo.features]);
const enabledFeatures = useMemo(() => sortedFeatures.filter((f) => f.enabled) || [], [serverInfo.features]);
const useTab = (tab) => useRoutableTab(toDashboard({
realm,
tab,
}));
const realmDisplayInfo = label(t, realmInfo === null || realmInfo === void 0 ? void 0 : realmInfo.displayName, realm);
const welcomeTab = useTab("welcome");
const infoTab = useTab("info");
const providersTab = useTab("providers");
if (Object.keys(serverInfo).length === 0) {
return _jsx(KeycloakSpinner, {});
}
return (_jsxs(_Fragment, { children: [_jsx(PageSection, { variant: "light", children: _jsx(TextContent, { className: "pf-v5-u-mr-sm", children: _jsx(Text, { component: "h1", children: t("realmNameTitle", { name: realm }) }) }) }), _jsx(PageSection, { variant: "light", className: "pf-v5-u-p-0", children: _jsxs(RoutableTabs, { "data-testid": "dashboard-tabs", defaultLocation: toDashboard({
realm,
tab: "welcome",
}), isBox: true, mountOnEnter: true, children: [_jsx(Tab, { id: "welcome", "data-testid": "welcomeTab", title: _jsx(TabTitleText, { children: t("welcomeTabTitle") }), ...welcomeTab, children: _jsx(PageSection, { variant: "light", children: _jsxs("div", { className: "pf-v5-l-grid pf-v5-u-ml-lg", children: [_jsx("div", { className: "pf-v5-l-grid__item pf-m-12-col", children: _jsx(Title, { className: "pf-v5-u-font-weight-bold", headingLevel: "h2", size: "3xl", children: t("welcomeTo", { realmDisplayInfo }) }) }), _jsx("div", { className: "pf-v5-l-grid__item keycloak__dashboard_welcome_tab", children: _jsx(Text, { component: TextVariants.h3, children: t("welcomeText") }) }), _jsx("div", { className: "pf-v5-l-grid__item pf-m-10-col pf-v5-u-mt-md", children: _jsx(Button, { className: "pf-v5-u-px-lg pf-v5-u-py-sm", component: "a", href: helpUrls.documentation, target: "_blank", variant: "primary", children: t("viewDocumentation") }) }), _jsxs(ActionList, { className: "pf-v5-u-mt-sm", children: [_jsx(ActionListItem, { children: _jsx(Button, { component: "a", href: helpUrls.guides, target: "_blank", variant: "tertiary", children: t("viewGuides") }) }), _jsx(ActionListItem, { children: _jsx(Button, { component: "a", href: helpUrls.community, target: "_blank", variant: "tertiary", children: t("joinCommunity") }) }), _jsx(ActionListItem, { children: _jsx(Button, { component: "a", href: helpUrls.blog, target: "_blank", variant: "tertiary", children: t("readBlog") }) })] })] }) }) }), _jsx(Tab, { id: "info", "data-testid": "infoTab", title: _jsx(TabTitleText, { children: t("serverInfo") }), ...infoTab, children: _jsx(PageSection, { variant: "light", children: _jsxs(Grid, { hasGutter: true, children: [_jsx(GridItem, { lg: 2, sm: 12, children: _jsxs(Card, { className: "keycloak__dashboard_card", children: [_jsx(CardTitle, { children: t("serverInfo") }), _jsx(CardBody, { children: _jsx(DescriptionList, { children: _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("version") }), _jsx(DescriptionListDescription, { children: (_a = serverInfo.systemInfo) === null || _a === void 0 ? void 0 : _a.version })] }) }) }), _jsx(CardTitle, { children: t("memory") }), _jsx(CardBody, { children: _jsx(DescriptionList, { children: _jsxs(DescriptionListGroup, { children: [_jsx(DescriptionListTerm, { children: t("totalMemory") }), _jsx(DescriptionListDescription, { children: (_b = serverInfo.memoryInfo) === null || _b === void 0 ? void 0 : _b.totalFormated }), _jsx(DescriptionListTerm, { children: t("freeMemory") }), _jsx(DescriptionListDescription, { children: (_c = serverInfo.memoryInfo) === null || _c === void 0 ? void 0 : _c.freeFormated }), _jsx(DescriptionListTerm, { children: t("usedMemory") }), _jsx(DescriptionListDescription, { children: (_d = serverInfo.memoryInfo) === null || _d === void 0 ? void 0 : _d.usedFormated })] }) }) })] }) }), _jsx(GridItem, { lg: 10, sm: 12, children: _jsxs(Card, { className: "keycloak__dashboard_card", children: [_jsx(CardTitle, { children: t("profile") }), _jsx(CardBody, { children: _jsxs(DescriptionList, { children: [_jsxs(DescriptionListGroup, { children: [_jsxs(DescriptionListTerm, { children: [t("enabledFeatures"), " ", _jsx(HelpItem, { fieldLabelId: "enabledFeatures", helpText: t("infoEnabledFeatures") })] }), _jsx(DescriptionListDescription, { children: _jsx(List, { variant: ListVariant.inline, children: enabledFeatures.map((feature) => (_jsx(FeatureItem, { feature: feature }, feature.name))) }) })] }), _jsxs(DescriptionListGroup, { children: [_jsxs(DescriptionListTerm, { children: [t("disabledFeatures"), " ", _jsx(HelpItem, { fieldLabelId: "disabledFeatures", helpText: t("infoDisabledFeatures") })] }), _jsx(DescriptionListDescription, { children: _jsx(List, { variant: ListVariant.inline, children: disabledFeatures.map((feature) => (_jsx(FeatureItem, { feature: feature }, feature.name))) }) })] })] }) })] }) })] }) }) }), _jsx(Tab, { id: "providers", "data-testid": "providersTab", title: _jsx(TabTitleText, { children: t("providerInfo") }), ...providersTab, children: _jsx(ProviderInfo, {}) })] }) })] }));
};
export default function DashboardSection() {
const { realm } = useRealm();
const isMasterRealm = realm === "master";
return (_jsxs(_Fragment, { children: [!isMasterRealm && _jsx(EmptyDashboard, {}), isMasterRealm && _jsx(Dashboard, {})] }));
}
//# sourceMappingURL=Dashboard.js.map