misc: add indicators for errors

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}