misc: add indicators for errors

frontend/src/hooks/api/pkiSubscriber/queries.tsx

@@ -39,13 +39,16 @@ export const pkiSubscriberKeys = {
     ] as const
 };
 
-export const useGetPkiSubscriber = ({
-  subscriberName,
-  projectId
-}: {
-  subscriberName: string;
-  projectId: string;
-}) => {
+export const useGetPkiSubscriber = (
+  {
+    subscriberName,
+    projectId
+  }: {
+    subscriberName: string;
+    projectId: string;
+  },
+  options?: TReactQueryOptions["options"]
+) => {
   return useQuery({
     queryKey: pkiSubscriberKeys.getPkiSubscriber({ subscriberName, projectId }),
     queryFn: async () => {
@@ -59,7 +62,8 @@ export const useGetPkiSubscriber = ({
       );
       return pkiSubscriber;
     },
-    enabled: Boolean(subscriberName) && Boolean(projectId)
+    enabled: Boolean(subscriberName) && Boolean(projectId),
+    ...options
   });
 };
 

frontend/src/hooks/api/pkiSubscriber/types.ts

@@ -5,6 +5,11 @@ export enum PkiSubscriberStatus {
   DISABLED = "disabled"
 }
 
+export enum SubscriberOperationStatus {
+  SUCCESS = "success",
+  FAILED = "failed"
+}
+
 export type TPkiSubscriber = {
   id: string;
   projectId: string;
@@ -17,6 +22,9 @@ export type TPkiSubscriber = {
   keyUsages: CertKeyUsage[];
   extendedKeyUsages: CertExtendedKeyUsage[];
   supportsImmediateCertIssuance?: boolean;
+  lastOperationStatus?: SubscriberOperationStatus;
+  lastOperationMessage?: string;
+  lastOperationAt?: string;
 };
 
 export type TCreatePkiSubscriberDTO = {

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberCertificatesTable.tsx

@@ -56,7 +56,7 @@ export const PkiSubscriberCertificatesTable = ({ subscriberName, handlePopUpOpen
       limit: perPage
     },
     {
-      refetchInterval: 10 * 1000 // 10 seconds
+      refetchInterval: 5000
     }
   );
 

frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/components/PkiSubscriberDetailsSection.tsx

@@ -5,7 +5,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, IconButton, Modal, ModalContent, Tooltip } from "@app/components/v2";
+import {
+  Button,
+  GenericFieldLabel,
+  IconButton,
+  Modal,
+  ModalContent,
+  Tooltip
+} from "@app/components/v2";
 import {
   ProjectPermissionPkiSubscriberActions,
   ProjectPermissionSub,
@@ -19,6 +26,7 @@ import {
   useOrderPkiSubscriberCert
 } from "@app/hooks/api";
 import { pkiSubscriberStatusToNameMap } from "@app/hooks/api/pkiSubscriber/constants";
+import { SubscriberOperationStatus } from "@app/hooks/api/pkiSubscriber/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { CertificateContent } from "../../CertificatesPage/components/CertificateContent";
@@ -45,10 +53,15 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
     initialState: "Copy ID to clipboard"
   });
 
-  const { data: pkiSubscriber } = useGetPkiSubscriber({
-    subscriberName,
-    projectId
-  });
+  const { data: pkiSubscriber } = useGetPkiSubscriber(
+    {
+      subscriberName,
+      projectId
+    },
+    {
+      refetchInterval: 5000
+    }
+  );
 
   const { mutateAsync: issuePkiSubscriberCert, isPending: isIssuingCert } =
     useIssuePkiSubscriberCert();
@@ -163,9 +176,26 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
           <p className="text-sm font-semibold text-mineshaft-300">Common Name</p>
           <p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
         </div>
+        {pkiSubscriber.lastOperationAt && (
+          <div className="mb-4">
+            <p className="text-sm font-semibold text-mineshaft-300">Last Operation (Local Time)</p>
+            <p className="text-sm text-mineshaft-300">
+              {new Date(pkiSubscriber.lastOperationAt).toLocaleString()}
+            </p>
+          </div>
+        )}
+        {pkiSubscriber.lastOperationStatus === SubscriberOperationStatus.FAILED && (
+          <div className="mb-4">
+            <GenericFieldLabel labelClassName="text-red" label="Last Operation Status">
+              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">
+                {pkiSubscriber.lastOperationMessage}
+              </p>
+            </GenericFieldLabel>
+          </div>
+        )}
         {canIssuePkiSubscriberCert && (
           <Button
-            className="mt-4 w-full"
+            className="mt-2 w-full"
             colorSchema="primary"
             type="button"
             isLoading={isIssuingCert}