awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +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

2
backend/src/controllers/v1/membershipController.ts
View File

@@ -1,6 +1,6 @@
import { Request, Response } from "express";
import { Types } from "mongoose";
import { Key, Membership, MembershipOrg, User, IUser } from "../../models";
import { IUser, Key, Membership, MembershipOrg, User } from "../../models";
import { EventType } from "../../ee/models";
import { deleteMembership as deleteMember, findMembership } from "../../helpers/membership";
import { sendMail } from "../../helpers/nodemailer";

4
backend/src/controllers/v1/secretsFolderController.ts
View File

@@ -17,8 +17,8 @@ import {
} from "../../services/FolderService";
import { ADMIN, MEMBER } from "../../variables";
import { validateMembership } from "../../helpers/membership";
import { FolderVersion, EventType } from "../../ee/models";
import { EESecretService, EEAuditLogService } from "../../ee/services";
import { EventType, FolderVersion } from "../../ee/models";
import { EEAuditLogService, EESecretService } from "../../ee/services";
// verify workspace id/environment
export const createFolder = async (req: Request, res: Response) => {

4
backend/src/controllers/v2/environmentController.ts
View File

@@ -8,8 +8,8 @@ import {
ServiceTokenData,
Workspace,
} from "../../models";
import { SecretVersion, EventType } from "../../ee/models";
import { EELicenseService, EEAuditLogService } from "../../ee/services";
import { EventType, SecretVersion } from "../../ee/models";
import { EEAuditLogService, EELicenseService } from "../../ee/services";
import { BadRequestError, WorkspaceNotFoundError } from "../../utils/errors";
import _ from "lodash";
import { PERMISSION_READ_SECRETS, PERMISSION_WRITE_SECRETS } from "../../variables";

28
backend/src/ee/controllers/v1/workspaceController.ts
View File

@@ -4,6 +4,7 @@ import { Membership, Secret, ServiceTokenData, User } from "../../../models";
import {
ActorType,
AuditLog,
EventType,
FolderVersion,
IPType,
ISecretVersion,
@@ -13,14 +14,13 @@ import {
ServiceActor,
TFolderRootVersionSchema,
TrustedIP,
UserActor,
EventType
UserActor
} from "../../models";
import { EESecretService } from "../../services";
import { getLatestSecretVersionIds } from "../../helpers/secretVersion";
import Folder, { TFolderSchema } from "../../../models/folder";
import { searchByFolderId } from "../../../services/FolderService";
import { EELicenseService, EEAuditLogService } from "../../services";
import { EEAuditLogService, EELicenseService } from "../../services";
import { extractIPDetails, isValidIpOrCidr } from "../../../utils/ip";
/**
@@ -611,7 +611,10 @@ export const getWorkspaceAuditLogs = async (req: Request, res: Response) => {
const offset: number = parseInt(req.query.offset as string);
const limit: number = parseInt(req.query.limit as string);
const auditLogs = await AuditLog.find({
const startDate = req.query.startDate as string;
const endDate = req.query.endDate as string;
const query = {
workspace: new Types.ObjectId(workspaceId),
...(eventType ? {
"event.type": eventType
@@ -626,14 +629,25 @@ export const getWorkspaceAuditLogs = async (req: Request, res: Response) => {
} : {
"actor.metadata.serviceId": actor.split("-", 2)[1]
})
} : {}),
...(startDate || endDate ? {
createdAt: {
...(startDate && { $gte: new Date(startDate) }),
...(endDate && { $lte: new Date(endDate) })
}
} : {})
})
}
const auditLogs = await AuditLog.find(query)
.sort({ createdAt: -1 })
.skip(offset)
.limit(limit);
const totalCount = await AuditLog.countDocuments(query);
return res.status(200).send({
auditLogs
auditLogs,
totalCount
});
}

8
backend/src/ee/routes/v1/workspace.ts
View File

@@ -96,9 +96,11 @@ router.get(
param("workspaceId").exists().trim(),
query("eventType").isString().isIn(Object.values(EventType)).optional({ nullable: true }),
query("userAgentType").isString().isIn(Object.values(UserAgentType)).optional({ nullable: true }),
query("actor").isString().optional({ nullable: true }),
query("offset").default("0"),
query("limit").default("20"),
query("actor").optional({ nullable: true }),
query("startDate").isISO8601().withMessage("Invalid start date format").optional({ nullable: true }),
query("endDate").isISO8601().withMessage("Invalid end date format").optional({ nullable: true }),
query("offset"),
query("limit"),
validateRequest,
workspaceController.getWorkspaceAuditLogs
);

2
backend/src/services/FolderService.ts
View File

@@ -1,6 +1,6 @@
import { nanoid } from "nanoid";
import { Types } from "mongoose";
import Folder, { TFolderSchema, TFolderRootSchema } from "../models/folder";
import Folder, { TFolderRootSchema, TFolderSchema } from "../models/folder";
import { ResourceNotFoundError } from "../utils/errors";
type TAppendFolderDTO = {

2
frontend/src/components/v2/Pagination/Pagination.tsx
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[];
};

16
frontend/src/hooks/api/auditLogs/queries.tsx
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;
}
});
}

2
frontend/src/hooks/api/auditLogs/types.tsx
View File

@@ -323,4 +323,6 @@ export type AuditLogFilters = {
actor?: string;
offset: number;
limit: number;
startDate?: Date;
endDate?: Date;
}

182
frontend/src/views/Project/LogsPage/components/LogsFilter.tsx
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

24
frontend/src/views/Project/LogsPage/components/LogsSection.tsx
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>
);

49
frontend/src/views/Project/LogsPage/components/LogsTable.tsx
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

17
frontend/src/views/Project/LogsPage/components/types.tsx
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;