awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-11 23:29:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add date filter and pagination component to audit log v2

Browse Source
This commit is contained in:
Tuan Dang
2023-08-08 12:52:34 +07:00
parent 1ac607b42e
commit 6cb8cf53f8
13 changed files with 235 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Pagination/Pagination.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export type PaginationProps = {
perPage?: number;
onChangePage: (pageNumber: number) => void;
onChangePerPage: (newRows: number) => void;
className: string;
className?: string;
perPageList?: number[];
};
frontend/src/hooks/api/auditLogs/queries.tsx
+10 -6
View File
@@ -31,15 +31,19 @@ export const useGetAuditLogs = (workspaceId: string, filters: AuditLogFilters) =
params.append("actor", filters.actor);
}
if (filters.actor) {
params.append("actor", filters.actor);
if (filters.startDate) {
params.append("startDate", filters.startDate.toISOString());
}
params.append("offset ", String(filters.offset));
params.append("limit ", String(filters.limit));
if (filters.endDate) {
params.append("endDate", filters.endDate.toISOString());
}
params.append("offset", String(filters.offset));
params.append("limit", String(filters.limit));
const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(`/api/v1/workspace/${workspaceId}/audit-logs`, { params });
return data.auditLogs;
const { data } = await apiRequest.get<{ auditLogs: AuditLog[], totalCount: number }>(`/api/v1/workspace/${workspaceId}/audit-logs`, { params });
return data;
}
});
}
frontend/src/hooks/api/auditLogs/types.tsx
+2
View File
@@ -323,4 +323,6 @@ export type AuditLogFilters = {
actor?: string;
offset: number;
limit: number;
startDate?: Date;
endDate?: Date;
}
frontend/src/views/Project/LogsPage/components/LogsFilter.tsx
+119 -63
View File
@@ -1,18 +1,19 @@
import { useState } from "react";
import { Control, Controller, UseFormReset } from "react-hook-form";
import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
Button,
DatePicker,
FormControl,
Select,
SelectItem} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import { useGetAuditLogActorFilterOpts } from "@app/hooks/api";
import { eventToNameMap, userAgentTTypeoNameMap } from "~/hooks/api/auditLogs/constants";
import { ActorType } from "~/hooks/api/auditLogs/enums";
import { Actor } from "~/hooks/api/auditLogs/types";
import { eventToNameMap, userAgentTTypeoNameMap } from "@app/hooks/api/auditLogs/constants";
import { ActorType } from "@app/hooks/api/auditLogs/enums";
import { Actor } from "@app/hooks/api/auditLogs/types";
import { AuditLogFilterFormData } from "./types";
@@ -28,6 +29,9 @@ export const LogsFilter = ({
control,
reset
}: Props) => {
const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
const { currentWorkspace } = useWorkspace();
const { data, isLoading } = useGetAuditLogActorFilterOpts(currentWorkspace?._id ?? "");
@@ -58,65 +62,41 @@ export const LogsFilter = ({
return (
<div className="flex justify-between items-center">
<div className="flex items-center">
<div className="w-40 mr-4">
<Controller
control={control}
name="eventType"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Event"
errorText={error?.message}
isError={Boolean(error)}
<Controller
control={control}
name="eventType"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Event"
errorText={error?.message}
isError={Boolean(error)}
className="w-40 mr-4"
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{eventTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
</div>
{eventTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
{!isLoading && data && data.length > 0 && (
<div className="w-40 mr-4">
<Controller
control={control}
name="actor"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Actor"
errorText={error?.message}
isError={Boolean(error)}
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{data.map((actor) => renderActorSelectItem(actor))}
</Select>
</FormControl>
)}
/>
</div>
)}
<div className="w-40">
<Controller
control={control}
name="userAgentType"
name="actor"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Source"
label="Actor"
errorText={error?.message}
isError={Boolean(error)}
className="w-40 mr-4"
>
<Select
defaultValue={field.value}
@@ -124,16 +104,90 @@ export const LogsFilter = ({
onValueChange={(e) => onChange(e)}
className="w-full"
>
{userAgentTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
{data.map((actor) => renderActorSelectItem(actor))}
</Select>
</FormControl>
)}
/>
</div>
)}
<Controller
control={control}
name="userAgentType"
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Source"
errorText={error?.message}
isError={Boolean(error)}
className="w-40 mr-4"
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{userAgentTypes.map(({ label, value }) => (
<SelectItem value={String(value || "")} key={label}>
{label}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<Controller
name="startDate"
control={control}
render={({ field: { onChange, ...field }, fieldState: { error } }) => {
return (
<FormControl
label="Start date"
errorText={error?.message}
isError={Boolean(error)}
className="mr-4"
>
<DatePicker
value={field.value || undefined}
onChange={date => {
onChange(date);
setIsStartDatePickerOpen(false);
}}
popUpProps={{
open: isStartDatePickerOpen,
onOpenChange: setIsStartDatePickerOpen
}}
popUpContentProps={{}}
/>
</FormControl>
);
}}
/>
<Controller
name="endDate"
control={control}
render={({ field: { onChange, ...field }, fieldState: { error } }) => {
return (
<FormControl
label="End date"
errorText={error?.message}
isError={Boolean(error)}
>
<DatePicker
value={field.value || undefined}
onChange={date => {
onChange(date);
setIsEndDatePickerOpen(false);
}}
popUpProps={{
open: isEndDatePickerOpen,
onOpenChange: setIsEndDatePickerOpen
}}
popUpContentProps={{}}
/>
</FormControl>
);
}}
/>
</div>
<div>
<Button
@@ -143,9 +197,11 @@ export const LogsFilter = ({
type="submit"
leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="mr-2" />}
onClick={() => reset({
eventType: "",
eventType: undefined,
actor: "",
userAgentType: ""
userAgentType: "",
startDate: undefined,
endDate: undefined
})}
>
Clear filters
frontend/src/views/Project/LogsPage/components/LogsSection.tsx
+20 -4
View File
@@ -1,24 +1,35 @@
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { EventType, UserAgentType } from "~/hooks/api/auditLogs/enums";
import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
import { LogsFilter } from "./LogsFilter";
import { LogsTable } from "./LogsTable";
import { AuditLogFilterFormData,auditLogFilterFormSchema } from "./types";
import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
export const LogsSection = () => {
const {
control,
reset,
watch,
setValue,
} = useForm<AuditLogFilterFormData>({
resolver: yupResolver(auditLogFilterFormSchema)
resolver: yupResolver(auditLogFilterFormSchema),
defaultValues: {
page: 1,
perPage: 10
}
});
const eventType = watch("eventType") as EventType | undefined;
const userAgentType = watch("userAgentType") as UserAgentType | undefined;
const actor = watch("actor") as string | undefined;
const actor = watch("actor");
const startDate = watch("startDate");
const endDate = watch("endDate");
const page = watch("page") as number;
const perPage = watch("perPage") as number;
return (
<div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
@@ -35,6 +46,11 @@ export const LogsSection = () => {
eventType={eventType}
userAgentType={userAgentType}
actor={actor}
startDate={startDate}
endDate={endDate}
page={page}
perPage={perPage}
setValue={setValue}
/>
</div>
);
frontend/src/views/Project/LogsPage/components/LogsTable.tsx
+36 -13
View File
@@ -2,6 +2,7 @@ import { faFile } from "@fortawesome/free-solid-svg-icons";
import {
EmptyState,
Pagination,
Table,
TableContainer,
TableSkeleton,
@@ -9,33 +10,44 @@ import {
Td,
Th,
THead,
Tr
} from "@app/components/v2";
Tr} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import { useGetAuditLogs } from "@app/hooks/api";
import { EventType, UserAgentType } from "~/hooks/api/auditLogs/enums";
import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
import { LogsTableRow } from "./LogsTableRow";
import { SetValueType } from "./types";
type Props = {
eventType: EventType | undefined;
userAgentType: UserAgentType | undefined;
actor: string | undefined;
eventType?: EventType;
userAgentType?: UserAgentType;
actor?: string;
startDate?: Date;
endDate?: Date;
page: number;
perPage: number;
setValue: SetValueType;
}
export const LogsTable = ({
eventType,
userAgentType,
actor
actor,
startDate,
endDate,
page,
perPage,
setValue
}: Props) => {
const { currentWorkspace } = useWorkspace();
const { data, isLoading } = useGetAuditLogs(currentWorkspace?._id ?? "", {
eventType,
userAgentType,
actor,
offset: 0, // TODO: update with pagination
limit: 20 // TODO: update with pagination
startDate,
endDate,
offset: (page - 1) * perPage,
limit: perPage
});
return (
@@ -51,14 +63,14 @@ export const LogsTable = ({
</Tr>
</THead>
<TBody>
{!isLoading && data && data.map((auditLog) => (
{!isLoading && data?.auditLogs && data?.auditLogs.map((auditLog) => (
<LogsTableRow
auditLog={auditLog}
key={`audit-log-${auditLog._id}`}
/>
))}
{isLoading && <TableSkeleton innerKey="logs-table" columns={5} key="logs" />}
{!isLoading && data && data.length === 0 && (
{!isLoading && data?.auditLogs && data?.auditLogs.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState
@@ -70,6 +82,17 @@ export const LogsTable = ({
)}
</TBody>
</Table>
{!isLoading && data?.totalCount !== undefined && (
<Pagination
count={data?.totalCount}
page={page}
perPage={perPage}
onChangePage={(newPage) => setValue("page", newPage)}
onChangePerPage={(newPerPage) => setValue("perPage", newPerPage)}
/>
)}
</TableContainer>
);
}
}
// TODO: retrieve count
frontend/src/views/Project/LogsPage/components/types.tsx
+15 -2
View File
@@ -1,6 +1,6 @@
import * as yup from "yup";
import { EventType, UserAgentType } from "~/hooks/api/auditLogs/enums";
import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
export const auditLogFilterFormSchema = yup.object({
eventType: yup.string()
@@ -8,6 +8,19 @@ export const auditLogFilterFormSchema = yup.object({
actor: yup.string(),
userAgentType: yup.string()
.oneOf(Object.values(UserAgentType), "Invalid user agent type"),
startDate: yup.date(),
endDate: yup.date().min(yup.ref("startDate"), "End date cannot be before start date"),
page: yup.number(),
perPage: yup.number()
}).required();
export type AuditLogFilterFormData = yup.InferType<typeof auditLogFilterFormSchema>;
export type AuditLogFilterFormData = yup.InferType<typeof auditLogFilterFormSchema>;
export type SetValueType = (
name: keyof AuditLogFilterFormData,
value: any,
options?: {
shouldValidate?: boolean,
shouldDirty?: boolean
}
) => void;