Update expiry badge display for certs

frontend/src/hooks/api/ca/constants.tsx

@@ -11,7 +11,7 @@ export const caStatusToNameMap: { [K in CaStatus]: string } = {
   [CaStatus.PENDING_CERTIFICATE]: "Pending Certificate"
 };
 
-export const getStatusBadgeVariant = (status: CaStatus) => {
+export const getCaStatusBadgeVariant = (status: CaStatus) => {
   switch (status) {
     case CaStatus.ACTIVE:
       return "success";

frontend/src/hooks/api/certificates/constants.tsx

@@ -5,6 +5,17 @@ export const certStatusToNameMap: { [K in CertStatus]: string } = {
   [CertStatus.REVOKED]: "Revoked"
 };
 
+export const getCertStatusBadgeVariant = (status: CertStatus) => {
+  switch (status) {
+    case CertStatus.ACTIVE:
+      return "success";
+    case CertStatus.REVOKED:
+      return "danger";
+    default:
+      return "primary";
+  }
+};
+
 export const certKeyAlgorithmToNameMap: { [K in CertKeyAlgorithm]: string } = {
   [CertKeyAlgorithm.RSA_2048]: "RSA 2048",
   [CertKeyAlgorithm.RSA_4096]: "RSA 4096",

frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaTable.tsx

@@ -39,7 +39,7 @@ import { CaStatus, useListWorkspaceCas } from "@app/hooks/api";
 import {
   caStatusToNameMap,
   caTypeToNameMap,
-  getStatusBadgeVariant
+  getCaStatusBadgeVariant
 } from "@app/hooks/api/ca/constants";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -92,7 +92,7 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
                   >
                     <Td>{ca.friendlyName}</Td>
                     <Td>
-                      <Badge variant={getStatusBadgeVariant(ca.status)}>
+                      <Badge variant={getCaStatusBadgeVariant(ca.status)}>
                         {caStatusToNameMap[ca.status]}
                       </Badge>
                     </Td>
@@ -100,9 +100,6 @@ export const CaTable = ({ handlePopUpOpen }: Props) => {
                     <Td>
                       <div className="flex items-center ">
                         <p>{ca.notAfter ? format(new Date(ca.notAfter), "yyyy-MM-dd") : "-"}</p>
-                        {/* <Badge variant="danger" className="ml-4">
-                          Expires Soon
-                        </Badge> */}
                       </div>
                     </Td>
                     <Td className="flex justify-end">

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificatesTable.tsx

@@ -13,6 +13,7 @@ import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
+  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -31,9 +32,10 @@ import {
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useListWorkspaceCertificates } from "@app/hooks/api";
-import { certStatusToNameMap } from "@app/hooks/api/certificates/constants";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { getCertValidUntilBadgeDetails } from "./CertificatesTable.utils";
+
 type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<
@@ -60,14 +62,14 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
   });
 
   return (
-    <div>
     <TableContainer>
       <Table>
         <THead>
           <Tr>
             <Th>Friendly Name</Th>
             <Th>Status</Th>
-              <Th>Valid Until</Th>
+            <Th>Not Before</Th>
+            <Th>Not After</Th>
             <Th />
           </Tr>
         </THead>
@@ -75,10 +77,20 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
           {isLoading && <TableSkeleton columns={3} innerKey="project-cas" />}
           {!isLoading &&
             data?.certificates.map((certificate) => {
+              const { variant, label } = getCertValidUntilBadgeDetails(certificate.notAfter);
               return (
                 <Tr className="h-10" key={`certificate-${certificate.id}`}>
                   <Td>{certificate.friendlyName}</Td>
-                    <Td>{certStatusToNameMap[certificate.status]}</Td>
+                  <Td>
+                    <Badge className="" 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")
@@ -200,6 +212,5 @@ export const CertificatesTable = ({ handlePopUpOpen }: Props) => {
         <EmptyState title="No certificates have been created" icon={faCertificate} />
       )}
     </TableContainer>
-    </div>
   );
 };

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificatesTable.utils.ts

@@ -0,0 +1,28 @@
+import ms from "ms";
+
+export const getCertValidUntilBadgeDetails = (notAfter: string) => {
+  const currentDate = new Date().getTime();
+  const notAfterDate = new Date(notAfter).getTime();
+  const diffInMs = notAfterDate - currentDate;
+
+  let variant: "success" | "primary" | "danger" = "success";
+  let label = "Healthy";
+
+  if (diffInMs > ms("60d")) {
+    variant = "success";
+  } else if (diffInMs > ms("30d")) {
+    variant = "primary";
+  } else {
+    variant = "danger";
+  }
+
+  if (diffInMs > ms("60d")) {
+    label = "Healthy";
+  } else if (diffInMs > ms("0d")) {
+    label = `Expires in ${ms(diffInMs)}`;
+  } else {
+    label = "Expired";
+  }
+
+  return { variant, label };
+};

frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/PkiAlertsTab.tsx

@@ -1,6 +1,6 @@
 import { motion } from "framer-motion";
 
-import { PkiAlertsSection, PkiCollectionSection } from "./components";
+import { PkiAlertsSection } from "./components";
 
 export const PkiAlertsTab = () => {
   return (
@@ -11,7 +11,6 @@ export const PkiAlertsTab = () => {
       animate={{ opacity: 1, translateX: 0 }}
       exit={{ opacity: 0, translateX: 30 }}
     >
-      <PkiCollectionSection />
       <PkiAlertsSection />
     </motion.div>
   );

frontend/src/views/Project/CertificatesPage/components/PkiAlertsTab/components/PkiCollectionTable.tsx

@@ -63,7 +63,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
                     }
                   >
                     <Td>{pkiCollection.name}</Td>
-                    <Td>{pkiCollection.description}</Td>
+                    <Td>{pkiCollection.description ? pkiCollection.description : "-"}</Td>
                     <Td>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild className="rounded-lg">