Events css fixes (#1074)
* admin events: decreased form width and spaces between fields * events: css fixes Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
parent
9850505001
commit
2657eaf1d8
3 changed files with 387 additions and 389 deletions
|
@ -3,8 +3,6 @@ import {
|
|||
Button,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
Flex,
|
||||
FlexItem,
|
||||
Form,
|
||||
FormGroup,
|
||||
Modal,
|
||||
|
@ -13,6 +11,7 @@ import {
|
|||
SelectVariant,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
ToolbarItem,
|
||||
} from "@patternfly/react-core";
|
||||
import {
|
||||
cellWidth,
|
||||
|
@ -160,138 +159,136 @@ export const AdminEvents = () => {
|
|||
const adminEventSearchFormDisplay = () => {
|
||||
return (
|
||||
<>
|
||||
<Flex direction={{ default: "column" }}>
|
||||
<FlexItem>
|
||||
<Dropdown
|
||||
id="admin-events-search-select"
|
||||
data-testid="AdminEventsSearchSelector"
|
||||
className="pf-u-mt-md pf-u-ml-md pf-u-mb-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="adminEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
{t("searchForAdminEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__events_search__form"
|
||||
data-testid="searchForm"
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
id="admin-events-search-select"
|
||||
data-testid="AdminEventsSearchSelector"
|
||||
className="pf-u-ml-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="adminEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
<FormGroup
|
||||
label={t("resourceType")}
|
||||
fieldId="kc-resourceType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("operationType")}
|
||||
fieldId="kc-operationType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("user")}
|
||||
fieldId="kc-user"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-user"
|
||||
name="user"
|
||||
data-testid="user-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("realm")}
|
||||
fieldId="kc-realm"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("ipAddress")}
|
||||
fieldId="kc-ipAddress"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-ipAddress"
|
||||
name="ipAddress"
|
||||
data-testid="ipAddress-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__admin_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchAdminEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
{t("searchForAdminEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__admin_events_search__form"
|
||||
data-testid="searchForm"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
<FormGroup
|
||||
label={t("resourceType")}
|
||||
fieldId="kc-resourceType"
|
||||
className="keycloak__events_search__form_multiline_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("operationType")}
|
||||
fieldId="kc-operationType"
|
||||
className="keycloak__events_search__form_multiline_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("user")}
|
||||
fieldId="kc-user"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-user"
|
||||
name="user"
|
||||
data-testid="user-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("realm")}
|
||||
fieldId="kc-realm"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Select
|
||||
variant={SelectVariant.single}
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
isOpen={selectOpen}
|
||||
></Select>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("ipAddress")}
|
||||
fieldId="kc-ipAddress"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-ipAddress"
|
||||
name="ipAddress"
|
||||
data-testid="ipAddress-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__admin_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchAdminEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -9,8 +9,6 @@ import {
|
|||
DescriptionListTerm,
|
||||
Dropdown,
|
||||
DropdownToggle,
|
||||
Flex,
|
||||
FlexItem,
|
||||
Form,
|
||||
FormGroup,
|
||||
PageSection,
|
||||
|
@ -21,6 +19,7 @@ import {
|
|||
TabTitleText,
|
||||
TextInput,
|
||||
Tooltip,
|
||||
ToolbarItem,
|
||||
} from "@patternfly/react-core";
|
||||
import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
|
||||
import { cellWidth, expandable } from "@patternfly/react-table";
|
||||
|
@ -185,206 +184,204 @@ export const EventsSection = () => {
|
|||
const userEventSearchFormDisplay = () => {
|
||||
return (
|
||||
<>
|
||||
<Flex direction={{ default: "column" }}>
|
||||
<FlexItem>
|
||||
<Dropdown
|
||||
id="user-events-search-select"
|
||||
data-testid="UserEventsSearchSelector"
|
||||
className="pf-u-mt-md pf-u-ml-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="userEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
{t("searchForUserEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__events_search__form"
|
||||
data-testid="searchForm"
|
||||
<ToolbarItem>
|
||||
<Dropdown
|
||||
id="user-events-search-select"
|
||||
data-testid="UserEventsSearchSelector"
|
||||
className="pf-u-ml-md"
|
||||
toggle={
|
||||
<DropdownToggle
|
||||
data-testid="userEventsSearchSelectorToggle"
|
||||
onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
|
||||
className="keycloak__events_search_selector_dropdown__toggle"
|
||||
>
|
||||
<FormGroup
|
||||
label={t("userId")}
|
||||
fieldId="kc-userId"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-userId"
|
||||
name="user"
|
||||
data-testid="userId-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("eventType")}
|
||||
fieldId="kc-eventType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (newValue: EventType[]) => void;
|
||||
value: EventType[];
|
||||
}) => (
|
||||
<Select
|
||||
className="keycloak__events_search__event_type_select"
|
||||
name="eventType"
|
||||
data-testid="event-type-searchField"
|
||||
chipGroupProps={{
|
||||
numChips: 1,
|
||||
expandedText: "Hide",
|
||||
collapsedText: "Show ${remaining}",
|
||||
}}
|
||||
variant={SelectVariant.typeaheadMulti}
|
||||
typeAheadAriaLabel="Select"
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
selections={value}
|
||||
onSelect={(_, selectedValue) => {
|
||||
const option = selectedValue.toString() as EventType;
|
||||
const changedValue = value.includes(option)
|
||||
? value.filter((item) => item !== option)
|
||||
: [...value, option];
|
||||
|
||||
onChange(changedValue);
|
||||
}}
|
||||
onClear={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange([]);
|
||||
}}
|
||||
isOpen={selectOpen}
|
||||
aria-labelledby={"eventType"}
|
||||
chipGroupComponent={
|
||||
<ChipGroup>
|
||||
{value.map((chip) => (
|
||||
<Chip
|
||||
key={chip}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange(value.filter((val) => val !== chip));
|
||||
}}
|
||||
>
|
||||
{chip}
|
||||
</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
}
|
||||
>
|
||||
{events?.enabledEventTypes?.map((option) => (
|
||||
<SelectOption key={option} value={option} />
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("client")}
|
||||
fieldId="kc-client"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-client"
|
||||
name="client"
|
||||
data-testid="client-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__user_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
onClick={submitSearch}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchUserEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
{t("searchForUserEvent")}
|
||||
</DropdownToggle>
|
||||
}
|
||||
isOpen={searchDropdownOpen}
|
||||
>
|
||||
<Form
|
||||
isHorizontal
|
||||
className="keycloak__user_events_search__form"
|
||||
data-testid="searchForm"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
{Object.entries(activeFilters).length > 0 && (
|
||||
<div className="keycloak__searchChips pf-u-ml-md">
|
||||
{Object.entries(activeFilters).map((filter) => {
|
||||
const [key, value] = filter as [
|
||||
keyof UserEventSearchForm,
|
||||
string | EventType[]
|
||||
];
|
||||
<FormGroup
|
||||
label={t("userId")}
|
||||
fieldId="kc-userId"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-userId"
|
||||
name="user"
|
||||
data-testid="userId-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("eventType")}
|
||||
fieldId="kc-eventType"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<Controller
|
||||
name="type"
|
||||
control={control}
|
||||
render={({
|
||||
onChange,
|
||||
value,
|
||||
}: {
|
||||
onChange: (newValue: EventType[]) => void;
|
||||
value: EventType[];
|
||||
}) => (
|
||||
<Select
|
||||
className="keycloak__events_search__event_type_select"
|
||||
name="eventType"
|
||||
data-testid="event-type-searchField"
|
||||
chipGroupProps={{
|
||||
numChips: 1,
|
||||
expandedText: "Hide",
|
||||
collapsedText: "Show ${remaining}",
|
||||
}}
|
||||
variant={SelectVariant.typeaheadMulti}
|
||||
typeAheadAriaLabel="Select"
|
||||
onToggle={(isOpen) => setSelectOpen(isOpen)}
|
||||
selections={value}
|
||||
onSelect={(_, selectedValue) => {
|
||||
const option = selectedValue.toString() as EventType;
|
||||
const changedValue = value.includes(option)
|
||||
? value.filter((item) => item !== option)
|
||||
: [...value, option];
|
||||
|
||||
return (
|
||||
<ChipGroup
|
||||
className="pf-u-mr-md pf-u-mb-md"
|
||||
key={key}
|
||||
categoryName={filterLabels[key]}
|
||||
isClosable
|
||||
onClick={() => removeFilter(key)}
|
||||
onChange(changedValue);
|
||||
}}
|
||||
onClear={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange([]);
|
||||
}}
|
||||
isOpen={selectOpen}
|
||||
aria-labelledby={"eventType"}
|
||||
chipGroupComponent={
|
||||
<ChipGroup>
|
||||
{value.map((chip) => (
|
||||
<Chip
|
||||
key={chip}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onChange(value.filter((val) => val !== chip));
|
||||
}}
|
||||
>
|
||||
{chip}
|
||||
</Chip>
|
||||
))}
|
||||
</ChipGroup>
|
||||
}
|
||||
>
|
||||
{typeof value === "string" ? (
|
||||
<Chip isReadOnly>{value}</Chip>
|
||||
) : (
|
||||
value.map((entry) => (
|
||||
<Chip
|
||||
key={entry}
|
||||
onClick={() => removeFilterValue(key, entry)}
|
||||
>
|
||||
{entry}
|
||||
</Chip>
|
||||
))
|
||||
)}
|
||||
</ChipGroup>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
{events?.enabledEventTypes?.map((option) => (
|
||||
<SelectOption key={option} value={option} />
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("client")}
|
||||
fieldId="kc-client"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-client"
|
||||
name="client"
|
||||
data-testid="client-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateFrom")}
|
||||
fieldId="kc-dateFrom"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateFrom"
|
||||
name="dateFrom"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateFrom-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
label={t("dateTo")}
|
||||
fieldId="kc-dateTo"
|
||||
className="keycloak__events_search__form_label"
|
||||
>
|
||||
<TextInput
|
||||
ref={register()}
|
||||
type="text"
|
||||
id="kc-dateTo"
|
||||
name="dateTo"
|
||||
className="pf-c-form-control pf-m-icon pf-m-calendar"
|
||||
placeholder="yyyy-MM-dd"
|
||||
data-testid="dateTo-searchField"
|
||||
/>
|
||||
</FormGroup>
|
||||
<ActionGroup>
|
||||
<Button
|
||||
className="keycloak__user_events_search__form_btn"
|
||||
variant={"primary"}
|
||||
onClick={submitSearch}
|
||||
data-testid="search-events-btn"
|
||||
isDisabled={!isDirty}
|
||||
>
|
||||
{t("searchUserEventsBtn")}
|
||||
</Button>
|
||||
</ActionGroup>
|
||||
</Form>
|
||||
</Dropdown>
|
||||
<Button
|
||||
className="pf-u-ml-md"
|
||||
onClick={refresh}
|
||||
data-testid="refresh-btn"
|
||||
>
|
||||
{t("refresh")}
|
||||
</Button>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
{Object.entries(activeFilters).length > 0 && (
|
||||
<div className="keycloak__searchChips pf-u-ml-md">
|
||||
{Object.entries(activeFilters).map((filter) => {
|
||||
const [key, value] = filter as [
|
||||
keyof UserEventSearchForm,
|
||||
string | EventType[]
|
||||
];
|
||||
|
||||
return (
|
||||
<ChipGroup
|
||||
className="pf-u-mr-md pf-u-mb-md"
|
||||
key={key}
|
||||
categoryName={filterLabels[key]}
|
||||
isClosable
|
||||
onClick={() => removeFilter(key)}
|
||||
>
|
||||
{typeof value === "string" ? (
|
||||
<Chip isReadOnly>{value}</Chip>
|
||||
) : (
|
||||
value.map((entry) => (
|
||||
<Chip
|
||||
key={entry}
|
||||
onClick={() => removeFilterValue(key, entry)}
|
||||
>
|
||||
{entry}
|
||||
</Chip>
|
||||
))
|
||||
)}
|
||||
</ChipGroup>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</ToolbarItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -411,57 +408,55 @@ export const EventsSection = () => {
|
|||
eventKey="userEvents"
|
||||
title={<TabTitleText>{t("userEvents")}</TabTitleText>}
|
||||
>
|
||||
<div className="keycloak__events_table">
|
||||
<KeycloakDataTable
|
||||
key={key}
|
||||
loader={loader}
|
||||
detailColumns={[
|
||||
{
|
||||
name: "details",
|
||||
enabled: (event) => event.details !== undefined,
|
||||
cellRenderer: DetailCell,
|
||||
},
|
||||
]}
|
||||
isPaginated
|
||||
ariaLabelKey="events:title"
|
||||
toolbarItem={userEventSearchFormDisplay()}
|
||||
columns={[
|
||||
{
|
||||
name: "time",
|
||||
displayKey: "events:time",
|
||||
cellRenderer: (row) => moment(row.time).format("LLL"),
|
||||
cellFormatters: [expandable],
|
||||
},
|
||||
{
|
||||
name: "userId",
|
||||
displayKey: "events:user",
|
||||
cellRenderer: UserDetailLink,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
displayKey: "events:eventType",
|
||||
cellRenderer: StatusRow,
|
||||
},
|
||||
{
|
||||
name: "ipAddress",
|
||||
displayKey: "events:ipAddress",
|
||||
transforms: [cellWidth(10)],
|
||||
},
|
||||
{
|
||||
name: "clientId",
|
||||
displayKey: "events:client",
|
||||
},
|
||||
]}
|
||||
emptyState={
|
||||
<div className="pf-u-mt-md">
|
||||
<ListEmptyState
|
||||
message={t("emptyEvents")}
|
||||
instructions={t("emptyEventsInstructions")}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<KeycloakDataTable
|
||||
key={key}
|
||||
loader={loader}
|
||||
detailColumns={[
|
||||
{
|
||||
name: "details",
|
||||
enabled: (event) => event.details !== undefined,
|
||||
cellRenderer: DetailCell,
|
||||
},
|
||||
]}
|
||||
isPaginated
|
||||
ariaLabelKey="events:title"
|
||||
toolbarItem={userEventSearchFormDisplay()}
|
||||
columns={[
|
||||
{
|
||||
name: "time",
|
||||
displayKey: "events:time",
|
||||
cellRenderer: (row) => moment(row.time).format("LLL"),
|
||||
cellFormatters: [expandable],
|
||||
},
|
||||
{
|
||||
name: "userId",
|
||||
displayKey: "events:user",
|
||||
cellRenderer: UserDetailLink,
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
displayKey: "events:eventType",
|
||||
cellRenderer: StatusRow,
|
||||
},
|
||||
{
|
||||
name: "ipAddress",
|
||||
displayKey: "events:ipAddress",
|
||||
transforms: [cellWidth(10)],
|
||||
},
|
||||
{
|
||||
name: "clientId",
|
||||
displayKey: "events:client",
|
||||
},
|
||||
]}
|
||||
emptyState={
|
||||
<div className="pf-u-mt-md">
|
||||
<ListEmptyState
|
||||
message={t("emptyEvents")}
|
||||
instructions={t("emptyEventsInstructions")}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Tab>
|
||||
<Tab
|
||||
eventKey="adminEvents"
|
||||
|
|
|
@ -8,10 +8,18 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.keycloak__events_search__form {
|
||||
.keycloak__user_events_search__form {
|
||||
--pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
|
||||
}
|
||||
|
||||
.keycloak__admin_events_search__form {
|
||||
--pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 12rem;
|
||||
}
|
||||
|
||||
.keycloak__user_events_search__form,
|
||||
.keycloak__admin_events_search__form {
|
||||
margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
|
||||
--pf-c-form__group--m-action--MarginTop: 0rem;
|
||||
--pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
|
||||
--pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
|
||||
}
|
||||
|
||||
|
@ -19,13 +27,11 @@
|
|||
--pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
|
||||
}
|
||||
|
||||
.keycloak__events_search__form_multiline_label {
|
||||
height: 2.2rem;
|
||||
}
|
||||
|
||||
.keycloak__events_search__event_type_select .pf-c-select__menu {
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
background-color: transparent;
|
||||
--pf-c-toolbar--PaddingTop: 0;
|
||||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
}
|
Loading…
Reference in a new issue