awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-14 21:51:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make PR review adjustments, ssh ca public key endpoint, ssh cert template status

Browse Source
This commit is contained in:
Tuan Dang
2024-12-08 21:23:00 -08:00
parent ec1ce3dc06
commit 42249726d4
23 changed files with 380 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/ca/constants.tsx
+2 -1
View File
@@ -1,4 +1,5 @@
import { SshCaStatus } from "@app/hooks/api/ssh-ca";
import { SshCertTemplateStatus } from "@app/hooks/api/sshCertificateTemplates";
import { CaStatus, CaType } from "./enums";
@@ -13,7 +14,7 @@ export const caStatusToNameMap: { [K in CaStatus]: string } = {
[CaStatus.PENDING_CERTIFICATE]: "Pending Certificate"
};
export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus) => {
export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus | SshCertTemplateStatus) => {
switch (status) {
case CaStatus.ACTIVE:
return "success";
frontend/src/hooks/api/ssh-ca/types.ts
+2
View File
@@ -10,6 +10,8 @@ export type TSshCertificate = {
publicKey: string;
principals: string[];
keyId: string;
notBefore: string;
notAfter: string;
};
export type TSshCertificateAuthority = {
frontend/src/hooks/api/sshCertificateTemplates/index.tsx
+3 -1
View File
@@ -1,5 +1,7 @@
export {
useCreateSshCertTemplate,
useDeleteSshCertTemplate,
useUpdateSshCertTemplate} from "./mutations";
useUpdateSshCertTemplate
} from "./mutations";
export { useGetSshCertTemplate } from "./queries";
export * from "./types";
frontend/src/hooks/api/sshCertificateTemplates/types.ts
+7
View File
@@ -1,6 +1,12 @@
export enum SshCertTemplateStatus {
ACTIVE = "active",
DISABLED = "disabled"
}
export type TSshCertificateTemplate = {
id: string;
sshCaId: string;
status: SshCertTemplateStatus;
name: string;
ttl: string;
maxTTL: string;
@@ -25,6 +31,7 @@ export type TCreateSshCertificateTemplateDTO = {
export type TUpdateSshCertificateTemplateDTO = {
id: string;
status?: SshCertTemplateStatus;
name?: string;
ttl?: string;
maxTTL?: string;
frontend/src/views/Org/SshCaPage/components/SshCertificateModal.tsx
+48 -32
View File
@@ -14,7 +14,12 @@ import {
SelectItem
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import { useIssueSshCreds, useListOrgSshCertificateTemplates, useSignSshKey } from "@app/hooks/api";
import {
SshCertTemplateStatus,
useGetSshCertTemplate,
useIssueSshCreds,
useListOrgSshCertificateTemplates,
useSignSshKey} from "@app/hooks/api";
import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
import { SshCertType } from "@app/hooks/api/ssh-ca/constants";
@@ -22,14 +27,8 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
import { SshCertificateContent } from "./SshCertificateContent";
/**
* // NOTE (dangtony98): current UI only supports SSH certificate
* issuance via /issue endpoint but should extend to also support
* /sign endpoint as this is already supported in the backend
*/
const schema = z.object({
templateName: z.string(),
templateId: z.string(),
publicKey: z.string().optional(),
keyAlgorithm: z.enum([
CertKeyAlgorithm.RSA_2048,
@@ -72,7 +71,11 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
const { mutateAsync: signSshKey } = useSignSshKey();
const { mutateAsync: issueSshCreds } = useIssueSshCreds();
const popUpData = popUp?.sshCertificate?.data as { sshCaId: string; templateName: string };
const popUpData = popUp?.sshCertificate?.data as {
sshCaId: string;
templateName: string;
templateId: string;
};
const { data: templatesData } = useListOrgSshCertificateTemplates({
orgId: currentOrg?.id || ""
@@ -83,7 +86,8 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
handleSubmit,
reset,
formState: { isSubmitting },
setValue
setValue,
watch
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
@@ -92,16 +96,18 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
}
});
const templateId = watch("templateId");
const { data: templateData } = useGetSshCertTemplate(templateId);
useEffect(() => {
if (popUpData) {
setValue("templateName", popUpData.templateName);
setValue("templateId", popUpData.templateId);
} else if (templatesData && templatesData.certificateTemplates.length > 0) {
setValue("templateName", templatesData.certificateTemplates[0].name);
setValue("templateId", templatesData.certificateTemplates[0].id);
}
}, [popUpData]);
const onFormSubmit = async ({
templateName,
keyAlgorithm,
certType,
publicKey: existingPublicKey,
@@ -110,10 +116,12 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
keyId
}: FormData) => {
try {
if (!templateData) return;
switch (operation) {
case SshCertificateOperation.SIGN_SSH_KEY: {
const { serialNumber, signedKey } = await signSshKey({
templateName,
templateName: templateData.name,
publicKey: existingPublicKey,
certType,
principals: principals.split(",").map((user) => user.trim()),
@@ -129,7 +137,7 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
}
case SshCertificateOperation.ISSUE_SSH_CREDS: {
const { serialNumber, publicKey, privateKey, signedKey } = await issueSshCreds({
templateName,
templateName: templateData.name,
keyAlgorithm,
certType,
principals: principals.split(",").map((user) => user.trim()),
@@ -179,7 +187,7 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="templateName"
name="templateId"
defaultValue=""
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
@@ -195,11 +203,13 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
className="w-full"
isDisabled={Boolean(popUpData?.sshCaId)}
>
{(templatesData?.certificateTemplates || []).map(({ id, name }) => (
<SelectItem value={name} key={`ssh-cert-template-${id}`}>
{name}
</SelectItem>
))}
{(templatesData?.certificateTemplates || [])
.filter((template) => template.status === SshCertTemplateStatus.ACTIVE)
.map(({ id, name }) => (
<SelectItem value={id} key={`ssh-cert-template-${id}`}>
{name}
</SelectItem>
))}
</Select>
</FormControl>
)}
@@ -235,8 +245,12 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
onValueChange={(e) => onChange(e)}
className="w-full"
>
<SelectItem value={SshCertType.USER}>User</SelectItem>
<SelectItem value={SshCertType.HOST}>Host</SelectItem>
{templateData && templateData.allowUserCertificates && (
<SelectItem value={SshCertType.USER}>User</SelectItem>
)}
{templateData && templateData.allowHostCertificates && (
<SelectItem value={SshCertType.HOST}>Host</SelectItem>
)}
</Select>
</FormControl>
)}
@@ -308,15 +322,17 @@ export const SshCertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
</FormControl>
)}
/>
<Controller
control={control}
name="keyId"
render={({ field, fieldState: { error } }) => (
<FormControl label="Key ID" isError={Boolean(error)} errorText={error?.message}>
<Input {...field} placeholder="12345678" />
</FormControl>
)}
/>
{templateData && templateData.allowCustomKeyIds && (
<Controller
control={control}
name="keyId"
render={({ field, fieldState: { error } }) => (
<FormControl label="Key ID" isError={Boolean(error)} errorText={error?.message}>
<Input {...field} placeholder="12345678" />
</FormControl>
)}
/>
)}
<div className="mt-4 flex items-center">
<Button
className="mr-4"
frontend/src/views/Org/SshCaPage/components/SshCertificateTemplatesSection.tsx
+66 -1
View File
@@ -6,7 +6,10 @@ import { OrgPermissionCan } from "@app/components/permissions";
import { DeleteActionModal, IconButton } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useDeleteSshCertTemplate } from "@app/hooks/api";
import {
SshCertTemplateStatus,
useDeleteSshCertTemplate,
useUpdateSshCertTemplate} from "@app/hooks/api";
import { SshCertificateModal } from "./SshCertificateModal";
import { SshCertificateTemplateModal } from "./SshCertificateTemplateModal";
@@ -19,12 +22,14 @@ type Props = {
export const SshCertificateTemplatesSection = ({ caId }: Props) => {
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"sshCertificateTemplate",
"sshCertificateTemplateStatus",
"sshCertificate",
"deleteSshCertificateTemplate",
"upgradePlan"
] as const);
const { mutateAsync: deleteSshCertTemplate } = useDeleteSshCertTemplate();
const { mutateAsync: updateSshCertTemplate } = useUpdateSshCertTemplate();
const onRemoveSshCertificateTemplateSubmit = async (id: string) => {
try {
@@ -47,6 +52,35 @@ export const SshCertificateTemplatesSection = ({ caId }: Props) => {
}
};
const onUpdateSshCaStatus = async ({
certTemplateId,
status
}: {
certTemplateId: string;
status: SshCertTemplateStatus;
}) => {
try {
await updateSshCertTemplate({ id: certTemplateId, status });
await createNotification({
text: `Successfully ${
status === SshCertTemplateStatus.ACTIVE ? "enabled" : "disabled"
} SSH certificate template`,
type: "success"
});
handlePopUpClose("sshCertificateTemplateStatus");
} catch (err) {
console.error(err);
createNotification({
text: `Failed to ${
status === SshCertTemplateStatus.ACTIVE ? "enabled" : "disabled"
} SSH certificate template`,
type: "error"
});
}
};
return (
<div className="h-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">
@@ -90,6 +124,37 @@ export const SshCertificateTemplatesSection = ({ caId }: Props) => {
)
}
/>
<DeleteActionModal
isOpen={popUp.sshCertificateTemplateStatus.isOpen}
title={`Are you sure want to ${
(popUp?.sshCertificateTemplateStatus?.data as { status: string })?.status ===
SshCertTemplateStatus.ACTIVE
? "enable"
: "disable"
} this certificate template?`}
subTitle={
(popUp?.sshCertificateTemplateStatus?.data as { status: string })?.status ===
SshCertTemplateStatus.ACTIVE
? "This action will allow certificate issuance under this template again."
: "This action will prevent certificate issuance under this template."
}
onChange={(isOpen) => handlePopUpToggle("sshCertificateTemplateStatus", isOpen)}
deleteKey="confirm"
onDeleteApproved={() =>
onUpdateSshCaStatus(
popUp?.sshCertificateTemplateStatus?.data as {
certTemplateId: string;
status: SshCertTemplateStatus;
}
)
}
buttonText={
(popUp?.sshCertificateTemplateStatus?.data as { status: string })?.status ===
SshCertTemplateStatus.ACTIVE
? "Enable"
: "Disable"
}
/>
</div>
);
};
frontend/src/views/Org/SshCaPage/components/SshCertificateTemplatesTable.tsx
+56 -5
View File
@@ -1,9 +1,16 @@
import { faCertificate, faEllipsis, faFileAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
import {
faBan,
faCertificate,
faEllipsis,
faFileAlt,
faTrash
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { OrgPermissionCan } from "@app/components/permissions";
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
@@ -20,19 +27,28 @@ import {
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { useGetSshCaCertTemplates } from "@app/hooks/api";
import { SshCertTemplateStatus,useGetSshCaCertTemplates } from "@app/hooks/api";
import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
sshCaId: string;
handlePopUpOpen: (
popUpName: keyof UsePopUpState<
["sshCertificateTemplate", "sshCertificate", "deleteSshCertificateTemplate", "upgradePlan"]
[
"sshCertificateTemplate",
"sshCertificateTemplateStatus",
"sshCertificate",
"deleteSshCertificateTemplate",
"upgradePlan"
]
>,
data?: {
id?: string;
name?: string;
sshCaId?: string;
certTemplateId?: string;
status?: SshCertTemplateStatus;
templateName?: string;
}
) => void;
@@ -40,7 +56,6 @@ type Props = {
export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props) => {
const { data, isLoading } = useGetSshCaCertTemplates(sshCaId);
return (
<div>
<TableContainer>
@@ -48,6 +63,7 @@ export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props
<THead>
<Tr>
<Th>Name</Th>
<Th>Status</Th>
<Th />
</Tr>
</THead>
@@ -58,6 +74,11 @@ export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props
return (
<Tr className="h-10" key={`certificate-${certificateTemplate.id}`}>
<Td>{certificateTemplate.name}</Td>
<Td>
<Badge variant={getCaStatusBadgeVariant(certificateTemplate.status)}>
{caStatusToNameMap[certificateTemplate.status]}
</Badge>
</Td>
<Td className="flex justify-end">
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
@@ -68,6 +89,36 @@ export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="p-1">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.SshCertificateTemplates}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("sshCertificateTemplateStatus", {
certTemplateId: certificateTemplate.id,
status:
certificateTemplate.status === SshCertTemplateStatus.ACTIVE
? SshCertTemplateStatus.DISABLED
: SshCertTemplateStatus.ACTIVE
});
}}
disabled={!isAllowed}
icon={<FontAwesomeIcon icon={faBan} />}
>
{`${
certificateTemplate.status === SshCertTemplateStatus.ACTIVE
? "Disable"
: "Enable"
} Template`}
</DropdownMenuItem>
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.SshCertificateTemplates}
@@ -83,7 +134,7 @@ export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props
<FontAwesomeIcon icon={faCertificate} size="sm" className="mr-1" />
}
>
Issue SSH Certificate
Issue Certificate
</DropdownMenuItem>
</OrgPermissionCan>
<OrgPermissionCan
frontend/src/views/Org/SshPage/components/SshCertificatesTable.tsx
+21 -7
View File
@@ -1,7 +1,9 @@
import { useState } from "react";
import { faCertificate } from "@fortawesome/free-solid-svg-icons";
import { format } from "date-fns";
import {
Badge,
EmptyState,
Pagination,
Table,
@@ -15,7 +17,8 @@ import {
} from "@app/components/v2";
import { useOrganization } from "@app/context";
import { useListOrgSshCertificates } from "@app/hooks/api";
import { sshCertTypeToNameMap } from "@app/hooks/api/ssh-ca/constants";
import { getSshCertStatusBadgeDetails } from "./SshCertificatesTable.utils";
const PER_PAGE_INIT = 25;
@@ -30,27 +33,38 @@ export const SshCertificatesTable = () => {
limit: perPage
});
console.log("SSH Certificates Table data: ", data);
return (
<TableContainer>
<Table>
<THead>
<Tr>
<Th>Serial Number</Th>
<Th>Certificate Type</Th>
<Th>Principals</Th>
<Th>Status</Th>
<Th>Not Before</Th>
<Th>Not After</Th>
</Tr>
</THead>
<TBody>
{isLoading && <TableSkeleton columns={4} innerKey="org-ssh-certificates" />}
{!isLoading &&
data?.certificates?.map((certificate) => {
const { variant, label } = getSshCertStatusBadgeDetails(certificate.notAfter);
return (
<Tr className="h-10" key={`certificate-${certificate.id}`}>
<Td>{certificate.serialNumber}</Td>
<Td>{sshCertTypeToNameMap[certificate.certType]}</Td>
<Td>{certificate.principals.join(", ")}</Td>
<Td>
<Badge variant={variant}>{label}</Badge>
</Td>
<Td>
{certificate.notBefore
? format(new Date(certificate.notBefore), "yyyy-MM-dd")
: "-"}
</Td>
<Td>
{certificate.notAfter
? format(new Date(certificate.notAfter), "yyyy-MM-dd")
: "-"}
</Td>
</Tr>
);
})}
frontend/src/views/Org/SshPage/components/SshCertificatesTable.utils.ts
+17
View File
@@ -0,0 +1,17 @@
export const getSshCertStatusBadgeDetails = (notAfter: string) => {
const currentDate = new Date().getTime();
const notAfterDate = new Date(notAfter).getTime();
let variant: "success" | "primary" | "danger" = "success";
let label = "Active";
if (notAfterDate > currentDate) {
variant = "success";
label = "Active";
} else {
variant = "danger";
label = "Expired";
}
return { variant, label };
};