Merge pull request #256 from edewit/events-tab
initial version of the events tab
This commit is contained in:
mfrances17
GitHub
commit
af986e0f13
5 changed files with 288 additions and 4 deletions
|
|
@ -24,6 +24,7 @@
|
|||
"i18next": "^19.6.2",
|
||||
"keycloak-admin": "1.14.2",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^16.8.5",
|
||||
"react-dom": "^16.8.5",
|
||||
"react-hook-form": "^6.8.2",
|
||||
|
|
|
|||
147
src/events/AdminEvents.tsx
Normal file
147
src/events/AdminEvents.tsx
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import React, { ReactNode, useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Button,
|
||||
Modal,
|
||||
ModalVariant,
|
||||
ToolbarItem,
|
||||
} from "@patternfly/react-core";
|
||||
import moment from "moment";
|
||||
|
||||
import { useAdminClient } from "../context/auth/AdminClient";
|
||||
import { DataList } from "../components/table-toolbar/DataList";
|
||||
import { RealmContext } from "../context/realm-context/RealmContext";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableVariant,
|
||||
} from "@patternfly/react-table";
|
||||
import AdminEventRepresentation from "keycloak-admin/lib/defs/adminEventRepresentation";
|
||||
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
|
||||
|
||||
type DisplayDialogProps = {
|
||||
titleKey: string;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const DisplayDialog = ({ titleKey, onClose, children }: DisplayDialogProps) => {
|
||||
const { t } = useTranslation("events");
|
||||
return (
|
||||
<Modal
|
||||
variant={ModalVariant.medium}
|
||||
title={t(titleKey)}
|
||||
isOpen={true}
|
||||
onClose={onClose}
|
||||
>
|
||||
{children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export const AdminEvents = () => {
|
||||
const { t } = useTranslation("events");
|
||||
const adminClient = useAdminClient();
|
||||
const { realm } = useContext(RealmContext);
|
||||
|
||||
const [key, setKey] = useState("");
|
||||
const refresh = () => setKey(`${new Date().getTime()}`);
|
||||
|
||||
const [authEvent, setAuthEvent] = useState<AdminEventRepresentation>();
|
||||
const [representationEvent, setRepresentationEvent] = useState<
|
||||
AdminEventRepresentation
|
||||
>();
|
||||
|
||||
const loader = async (first?: number, max?: number, search?: string) => {
|
||||
const params = {
|
||||
first: first!,
|
||||
max: max!,
|
||||
realm,
|
||||
};
|
||||
if (search) {
|
||||
console.log("how to search?", search);
|
||||
}
|
||||
return await adminClient.realms.findAdminEvents({ ...params });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{authEvent && (
|
||||
<DisplayDialog titleKey="auth" onClose={() => setAuthEvent(undefined)}>
|
||||
<Table
|
||||
aria-label="authData"
|
||||
variant={TableVariant.compact}
|
||||
cells={[t("attribute"), t("value")]}
|
||||
rows={Object.entries(authEvent.authDetails!)}
|
||||
>
|
||||
<TableHeader />
|
||||
<TableBody />
|
||||
</Table>
|
||||
</DisplayDialog>
|
||||
)}
|
||||
{representationEvent && (
|
||||
<DisplayDialog
|
||||
titleKey="representation"
|
||||
onClose={() => setRepresentationEvent(undefined)}
|
||||
>
|
||||
some json from the changed values
|
||||
</DisplayDialog>
|
||||
)}
|
||||
<DataList
|
||||
key={key}
|
||||
loader={loader}
|
||||
isPaginated
|
||||
ariaLabelKey="events:adminEvents"
|
||||
searchPlaceholderKey="events:searchForEvent"
|
||||
toolbarItem={
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<Button onClick={refresh}>{t("refresh")}</Button>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
}
|
||||
actions={[
|
||||
{
|
||||
title: t("auth"),
|
||||
onRowClick: (event) => setAuthEvent(event),
|
||||
},
|
||||
{
|
||||
title: t("representation"),
|
||||
onRowClick: (event) => setRepresentationEvent(event),
|
||||
},
|
||||
]}
|
||||
columns={[
|
||||
{
|
||||
name: "time",
|
||||
displayKey: "events:time",
|
||||
cellRenderer: (row) => moment(row.time).fromNow(),
|
||||
},
|
||||
{
|
||||
name: "resourcePath",
|
||||
displayKey: "events:resourcePath",
|
||||
},
|
||||
{
|
||||
name: "resourceType",
|
||||
displayKey: "events:resourceType",
|
||||
},
|
||||
{
|
||||
name: "operationType",
|
||||
displayKey: "events:operationType",
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
displayKey: "events:user",
|
||||
cellRenderer: (event) => event.authDetails?.userId,
|
||||
},
|
||||
]}
|
||||
emptyState={
|
||||
<ListEmptyState
|
||||
message={t("emptyEvents")}
|
||||
instructions={t("emptyEventsInstructions")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,10 +1,122 @@
|
|||
import { PageSection } from "@patternfly/react-core";
|
||||
import React from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Button,
|
||||
Label,
|
||||
PageSection,
|
||||
Tab,
|
||||
Tabs,
|
||||
TabTitleText,
|
||||
ToolbarItem,
|
||||
} from "@patternfly/react-core";
|
||||
import moment from "moment";
|
||||
import EventRepresentation from "keycloak-admin/lib/defs/eventRepresentation";
|
||||
|
||||
import { useAdminClient } from "../context/auth/AdminClient";
|
||||
import { ViewHeader } from "../components/view-header/ViewHeader";
|
||||
import { DataList } from "../components/table-toolbar/DataList";
|
||||
import { RealmContext } from "../context/realm-context/RealmContext";
|
||||
import { InfoCircleIcon } from "@patternfly/react-icons";
|
||||
import { AdminEvents } from "./AdminEvents";
|
||||
import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
|
||||
|
||||
export const EventsSection = () => {
|
||||
const { t } = useTranslation("events");
|
||||
const adminClient = useAdminClient();
|
||||
const { realm } = useContext(RealmContext);
|
||||
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [key, setKey] = useState("");
|
||||
const refresh = () => setKey(`${new Date().getTime()}`);
|
||||
|
||||
const loader = async (first?: number, max?: number, search?: string) => {
|
||||
const params = {
|
||||
first: first!,
|
||||
max: max!,
|
||||
realm,
|
||||
};
|
||||
if (search) {
|
||||
console.log("how to search?", search);
|
||||
}
|
||||
return await adminClient.realms.findEvents({ ...params });
|
||||
};
|
||||
|
||||
const StatusRow = (event: EventRepresentation) => {
|
||||
return (
|
||||
<>
|
||||
<Label color="red" icon={<InfoCircleIcon />}>
|
||||
{event.type}
|
||||
</Label>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageSection variant="light">The Events Page</PageSection>
|
||||
<ViewHeader titleKey="events:title" subKey="events:eventExplain" />
|
||||
<PageSection variant="light">
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onSelect={(_, key) => setActiveTab(key as number)}
|
||||
isBox
|
||||
>
|
||||
<Tab
|
||||
eventKey={0}
|
||||
title={<TabTitleText>{t("userEvents")}</TabTitleText>}
|
||||
>
|
||||
<DataList
|
||||
key={key}
|
||||
loader={loader}
|
||||
isPaginated
|
||||
ariaLabelKey="events:title"
|
||||
searchPlaceholderKey="events:searchForEvent"
|
||||
toolbarItem={
|
||||
<>
|
||||
<ToolbarItem>
|
||||
<Button onClick={refresh}>{t("refresh")}</Button>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
name: "time",
|
||||
displayKey: "events:time",
|
||||
cellRenderer: (row) => moment(row.time).fromNow(),
|
||||
},
|
||||
{
|
||||
name: "userId",
|
||||
displayKey: "events:user",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
displayKey: "events:eventType",
|
||||
cellRenderer: StatusRow,
|
||||
},
|
||||
{
|
||||
name: "ipAddress",
|
||||
displayKey: "events:ipAddress",
|
||||
},
|
||||
{
|
||||
name: "clientId",
|
||||
displayKey: "events:client",
|
||||
},
|
||||
]}
|
||||
emptyState={
|
||||
<ListEmptyState
|
||||
message={t("emptyEvents")}
|
||||
instructions={t("emptyEventsInstructions")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
eventKey={1}
|
||||
title={<TabTitleText>{t("adminEvents")}</TabTitleText>}
|
||||
>
|
||||
<AdminEvents />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</PageSection>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,24 @@
|
|||
{
|
||||
"events": {
|
||||
"title": "Events"
|
||||
"title": "Events",
|
||||
"eventExplain": "If you want to configure user events, Admin events or Event listeners, please enter Event configs page realm settings to configure.",
|
||||
"userEvents": "User events",
|
||||
"adminEvents": "Admin events",
|
||||
"searchForEvent": "Search user event",
|
||||
"refresh": "Refresh",
|
||||
"emptyEvents": "No events logged",
|
||||
"emptyEventsInstructions": "Configure event logging in the realm settings",
|
||||
"time": "Time",
|
||||
"user": "User",
|
||||
"eventType": "Event type",
|
||||
"ipAddress": "IP address",
|
||||
"client": "Client",
|
||||
"resourcePath": "Resource path",
|
||||
"resourceType": "Resource type",
|
||||
"operationType": "Operation type",
|
||||
"auth": "Auth",
|
||||
"attribute": "Attribute",
|
||||
"value": "Value",
|
||||
"representation": "Representation"
|
||||
}
|
||||
}
|
||||
|
|
@ -14048,6 +14048,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4:
|
|||
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
|
||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||
|
||||
moment@^2.29.1:
|
||||
version "2.29.1"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||
|
||||
moo@^0.5.0:
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"
|
||||
|
|
|
|||
Loading…
Reference in a new issue