import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import {
Brand,
Card,
CardBody,
CardTitle,
DescriptionList,
DescriptionListDescription,
DescriptionListGroup,
DescriptionListTerm,
EmptyState,
EmptyStateBody,
Grid,
GridItem,
Label,
List,
ListItem,
ListVariant,
PageSection,
Tab,
TabTitleText,
Text,
TextContent,
Title,
} from "@patternfly/react-core";
import FeatureRepresentation, {
FeatureType,
} from "@keycloak/keycloak-admin-client/lib/defs/featureRepresentation";
import { useRealm } from "../context/realm-context/RealmContext";
import { useServerInfo } from "../context/server-info/ServerInfoProvider";
import { HelpItem } from "ui-shared";
import environment from "../environment";
import { KeycloakSpinner } from "../components/keycloak-spinner/KeycloakSpinner";
import useLocaleSort, { mapByKey } from "../utils/useLocaleSort";
import {
RoutableTabs,
useRoutableTab,
} from "../components/routable-tabs/RoutableTabs";
import { DashboardTab, toDashboard } from "./routes/Dashboard";
import { ProviderInfo } from "./ProviderInfo";
import "./dashboard.css";
const EmptyDashboard = () => {
const { t } = useTranslation();
const { realm } = useRealm();
const brandImage = environment.logo ? environment.logo : "/icon.svg";
return (
{t("welcome")}
{realm}
{t("introduction")}
);
};
type FeatureItemProps = {
feature: FeatureRepresentation;
};
const FeatureItem = ({ feature }: FeatureItemProps) => {
const { t } = useTranslation();
return (
{feature.name}
{feature.type === FeatureType.Experimental && (
)}
{feature.type === FeatureType.Preview && (
)}
{feature.type === FeatureType.Default && (
)}
);
};
const Dashboard = () => {
const { t } = useTranslation();
const { realm } = useRealm();
const serverInfo = useServerInfo();
const localeSort = useLocaleSort();
const sortedFeatures = useMemo(
() => localeSort(serverInfo.features ?? [], 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: DashboardTab) =>
useRoutableTab(
toDashboard({
realm,
tab,
}),
);
const infoTab = useTab("info");
const providersTab = useTab("providers");
if (Object.keys(serverInfo).length === 0) {
return ;
}
return (
<>
{t("realmNameTitle", { name: realm })}
{t("serverInfo")}}
{...infoTab}
>
{t("serverInfo")}
{t("version")}
{serverInfo.systemInfo?.version}
{t("memory")}
{t("totalMemory")}
{serverInfo.memoryInfo?.totalFormated}
{t("freeMemory")}
{serverInfo.memoryInfo?.freeFormated}
{t("usedMemory")}
{serverInfo.memoryInfo?.usedFormated}
{t("profile")}
{t("enabledFeatures")}{" "}
{enabledFeatures.map((feature) => (
))}
{t("disabledFeatures")}{" "}
{disabledFeatures.map((feature) => (
))}
{t("providerInfo")}}
{...providersTab}
>
>
);
};
export default function DashboardSection() {
const { realm } = useRealm();
const isMasterRealm = realm === "master";
return (
<>
{!isMasterRealm && }
{isMasterRealm && }
>
);
}