awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 19:16:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish docs for pki alerting + expose endpoints

Browse Source
This commit is contained in:
Tuan Dang
2024-08-09 19:22:47 -07:00
parent e1b9965f01
commit f4244c6d4d
38 changed files with 630 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/components/PkiAlertModal.tsx
+4 -9
View File
@@ -11,8 +11,7 @@ import {
Modal,
ModalContent,
Select,
SelectItem,
TextArea
SelectItem
} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import {
@@ -193,7 +192,7 @@ export const PkiAlertModal = ({ popUp, handlePopUpToggle }: Props) => {
defaultValue=""
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="PKI Collection"
label="Certificate Collection"
errorText={error?.message}
isError={Boolean(error)}
isRequired
@@ -262,16 +261,12 @@ export const PkiAlertModal = ({ popUp, handlePopUpToggle }: Props) => {
name="emails"
render={({ field, fieldState: { error } }) => (
<FormControl
label="Recipient Email(s)"
label="Emails to Alert"
isError={Boolean(error)}
errorText={error?.message}
isRequired
>
<TextArea
{...field}
placeholder="[email protected], [email protected], ..."
reSize="none"
/>
<Input {...field} placeholder="[email protected], [email protected], ..." />
</FormControl>
)}
/>
frontend/src/views/Project/PkiCollectionPage/PkiCollectionPage.tsx
+11 -2
View File
@@ -17,7 +17,8 @@ import {
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { useDeletePkiCollection,useGetPkiCollectionById } from "@app/hooks/api";
import { useDeletePkiCollection, useGetPkiCollectionById } from "@app/hooks/api";
import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
import { usePopUp } from "@app/hooks/usePopUp";
import { PkiCollectionModal } from "../CertificatesPage/components/PkiAlertsTab/components/PkiCollectionModal";
@@ -137,7 +138,15 @@ export const PkiCollectionPage = withProjectPermission(
handlePopUpOpen={handlePopUpOpen}
/>
</div>
<PkiCollectionItemsSection collectionId={collectionId} />
<div className="w-full">
<div className="mb-4">
<PkiCollectionItemsSection collectionId={collectionId} type={PkiItemType.CA} />
</div>
<PkiCollectionItemsSection
collectionId={collectionId}
type={PkiItemType.CERTIFICATE}
/>
</div>
</div>
</div>
)}
frontend/src/views/Project/PkiCollectionPage/components/AddPkiCollectionItemModal.tsx
+24 -20
View File
@@ -9,13 +9,14 @@ import {
CaStatus,
useAddItemToPkiCollection,
useListWorkspaceCas,
useListWorkspaceCertificates} from "@app/hooks/api";
useListWorkspaceCertificates
} from "@app/hooks/api";
import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
import { UsePopUpState } from "@app/hooks/usePopUp";
const schema = z
.object({
type: z.nativeEnum(PkiItemType),
// type: z.nativeEnum(PkiItemType),
itemId: z.string()
})
.required();
@@ -24,6 +25,7 @@ type FormData = z.infer<typeof schema>;
type Props = {
collectionId: string;
type: PkiItemType;
popUp: UsePopUpState<["addPkiCollectionItem"]>;
handlePopUpToggle: (
popUpName: keyof UsePopUpState<["addPkiCollectionItem"]>,
@@ -33,7 +35,12 @@ type Props = {
// note: this component should be optimized so it is easier
// to find certificates and CAs
export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpToggle }: Props) => {
export const AddPkiCollectionItemModal = ({
collectionId,
type,
popUp,
handlePopUpToggle
}: Props) => {
const { currentWorkspace } = useWorkspace();
const { data: cas } = useListWorkspaceCas({
@@ -53,18 +60,15 @@ export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpTogg
control,
handleSubmit,
reset,
formState: { isSubmitting },
watch
formState: { isSubmitting }
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
type: PkiItemType.CA
}
resolver: zodResolver(schema)
// defaultValues: {
// type: PkiItemType.CA
// }
});
const itemType = watch("type");
const onFormSubmit = async ({ type, itemId }: FormData) => {
const onFormSubmit = async ({ itemId }: FormData) => {
try {
const item = await addItemToPkiCollection({
collectionId,
@@ -94,9 +98,9 @@ export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpTogg
reset();
}}
>
<ModalContent title="Add CA / Certificate to Collection">
<ModalContent title={`Add ${pkiItemTypeToNameMap[type]} to Collection`}>
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
{/* <Controller
control={control}
name="type"
defaultValue={PkiItemType.CA}
@@ -117,18 +121,18 @@ export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpTogg
</Select>
</FormControl>
)}
/>
{itemType === PkiItemType.CA && (
/> */}
{type === PkiItemType.CA && (
<Controller
control={control}
name="itemId"
defaultValue=""
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="CA"
label={pkiItemTypeToNameMap[type]}
errorText={error?.message}
isError={Boolean(error)}
className="mt-4"
// className="mt-4"
>
<Select
defaultValue={field.value}
@@ -146,7 +150,7 @@ export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpTogg
)}
/>
)}
{itemType === PkiItemType.CERTIFICATE && (
{type === PkiItemType.CERTIFICATE && (
<Controller
control={control}
name="itemId"
@@ -156,7 +160,7 @@ export const AddPkiCollectionItemModal = ({ collectionId, popUp, handlePopUpTogg
label="Certificate"
errorText={error?.message}
isError={Boolean(error)}
className="mt-4"
// className="mt-4"
>
<Select
defaultValue={field.value}
frontend/src/views/Project/PkiCollectionPage/components/PkiCollectionItemsSection.tsx
+12 -3
View File
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { DeleteActionModal, IconButton } from "@app/components/v2";
import { useGetPkiCollectionById, useRemoveItemFromPkiCollection } from "@app/hooks/api";
import { PkiItemType } from "@app/hooks/api/pkiCollections/constants";
import { usePopUp } from "@app/hooks/usePopUp";
import { AddPkiCollectionItemModal } from "./AddPkiCollectionItemModal";
@@ -11,9 +12,10 @@ import { PkiCollectionItemsTable } from "./PkiCollectionItemsTable";
type Props = {
collectionId: string;
type: PkiItemType;
};
export const PkiCollectionItemsSection = ({ collectionId }: Props) => {
export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
const { data: pkiCollection } = useGetPkiCollectionById(collectionId);
const { mutateAsync: removeItemFromPkiCollection } = useRemoveItemFromPkiCollection();
@@ -40,10 +42,12 @@ export const PkiCollectionItemsSection = ({ collectionId }: Props) => {
}
};
const sectionName = type === PkiItemType.CA ? "Certificate Authorities" : "Certificates";
return pkiCollection ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Items</h3>
<h3 className="text-lg font-semibold text-mineshaft-100">{sectionName}</h3>
<IconButton
ariaLabel="copy icon"
variant="plain"
@@ -56,10 +60,15 @@ export const PkiCollectionItemsSection = ({ collectionId }: Props) => {
</IconButton>
</div>
<div className="py-4">
<PkiCollectionItemsTable collectionId={collectionId} handlePopUpOpen={handlePopUpOpen} />
<PkiCollectionItemsTable
type={type}
collectionId={collectionId}
handlePopUpOpen={handlePopUpOpen}
/>
</div>
<AddPkiCollectionItemModal
collectionId={collectionId}
type={type}
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
/>
frontend/src/views/Project/PkiCollectionPage/components/PkiCollectionItemsTable.tsx
+15 -9
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { faBoxesStacked, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns";
import { ProjectPermissionCan } from "@app/components/permissions";
import {
@@ -15,27 +16,30 @@ import {
Th,
THead,
Tooltip,
Tr} from "@app/components/v2";
Tr
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { useListPkiCollectionItems } from "@app/hooks/api";
import { PkiItemType,pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
import { PkiItemType, pkiItemTypeToNameMap } from "@app/hooks/api/pkiCollections/constants";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
collectionId: string;
type: PkiItemType;
handlePopUpOpen: (popUpName: keyof UsePopUpState<["deletePkiCollectionItem"]>, data?: {}) => void;
};
const PER_PAGE_INIT = 25;
export const PkiCollectionItemsTable = ({ collectionId, handlePopUpOpen }: Props) => {
export const PkiCollectionItemsTable = ({ collectionId, type, handlePopUpOpen }: Props) => {
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(PER_PAGE_INIT);
const { data, isLoading } = useListPkiCollectionItems({
collectionId,
offset: (page - 1) * perPage,
limit: perPage
limit: perPage,
type
});
return (
@@ -44,8 +48,9 @@ export const PkiCollectionItemsTable = ({ collectionId, handlePopUpOpen }: Props
<Table>
<THead>
<Tr>
<Th>Resource</Th>
<Th>ID</Th>
<Th>Friendly Name</Th>
<Th>Not Before</Th>
<Th>Not After</Th>
<Th className="w-5" />
</Tr>
</THead>
@@ -55,8 +60,9 @@ export const PkiCollectionItemsTable = ({ collectionId, handlePopUpOpen }: Props
data?.collectionItems.map((collectionItem) => {
return (
<Tr className="group" key={`pki-collection-item-${collectionItem.id}`}>
<Td>{pkiItemTypeToNameMap[collectionItem.type as PkiItemType]}</Td>
<Td>{collectionItem.itemId}</Td>
<Td className="w-1/3">{collectionItem.friendlyName}</Td>
<Td>{format(new Date(collectionItem.notBefore), "yyyy-MM-dd")}</Td>
<Td>{format(new Date(collectionItem.notAfter), "yyyy-MM-dd")}</Td>
<Td>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<ProjectPermissionCan
@@ -102,7 +108,7 @@ export const PkiCollectionItemsTable = ({ collectionId, handlePopUpOpen }: Props
)}
{!isLoading && !data?.collectionItems?.length && (
<EmptyState
title="No CAs or certificates have been added to this collection"
title={`No ${pkiItemTypeToNameMap[type]}s have been added to this collection`}
icon={faBoxesStacked}
/>
)}