feat(certs): replace cert upload flow with cert listing (#1240)

src/app/AppLayout/SslErrorModal.tsx

@@ -42,7 +42,7 @@ export const SslErrorModal: React.FC<SslErrorModalProps> = ({ visible, onDismiss
       description="The connection failed because the SSL Certificate for the target is not trusted."
     >
       <Text>
-        To add the SSL certificate for this target, go to &nbsp;
+        To view the trusted application certificates, go to &nbsp;
         <Button variant="primary" onClick={handleClick}>
           Security
         </Button>

src/app/SecurityPanel/ImportCertificate.tsx

@@ -15,34 +15,80 @@
  */
 
 import { JmxSslDescription } from '@app/Shared/Components/JmxSslDescription';
-import { Button, Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateVariant,
+  Label,
+  List,
+  ListItem,
+  Panel,
+  PanelMain,
+  PanelMainBody,
+  Popover,
+  Spinner,
+  Text,
+  TextContent,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { CertificateUploadModal } from './CertificateUploadModal';
 import { SecurityCard } from './types';
+import { tap } from 'rxjs/operators';
 
 export const CertificateImport: React.FC = () => {
-  const [showModal, setShowModal] = React.useState(false);
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const [loading, setLoading] = React.useState(true);
+  const [certs, setCerts] = React.useState([] as string[]);
 
-  const handleModalClose = () => {
-    setShowModal(false);
-  };
+  React.useEffect(() => {
+    setLoading(true);
+    addSubscription(
+      context.api
+        .doGet('tls/certs', 'v3')
+        .pipe(tap((_) => setLoading(false)))
+        .subscribe(setCerts),
+    );
+  }, [setLoading, addSubscription, context.api, setCerts]);
 
   return (
-    <>
-      <Button variant="primary" aria-label="import" onClick={() => setShowModal(true)}>
-        Upload
-      </Button>
-      <CertificateUploadModal visible={showModal} onClose={handleModalClose} />
-    </>
+    <Panel isScrollable>
+      <PanelMain>
+        <PanelMainBody>
+          {loading ? (
+            <Spinner />
+          ) : certs.length ? (
+            <List isPlain isBordered>
+              {certs.map((cert) => (
+                <ListItem key={cert}>
+                  <Label>{cert}</Label>
+                </ListItem>
+              ))}
+            </List>
+          ) : (
+            <EmptyState variant={EmptyStateVariant.xs}>
+              <Title headingLevel="h4" size="md">
+                No certificates
+              </Title>
+              <EmptyStateBody>No additional certificates are loaded.</EmptyStateBody>
+            </EmptyState>
+          )}
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
   );
 };
 
-export const ImportCertificate: SecurityCard = {
+export const ListCertificates: SecurityCard = {
   key: 'ssl',
   title: (
     <Text>
-      Import SSL Certificates
+      Imported SSL Certificates
       <Popover maxWidth="40rem" headerContent="JMX over SSL" bodyContent={<JmxSslDescription />}>
         <Button variant="plain">
           <OutlinedQuestionCircleIcon />
@@ -52,8 +98,11 @@ export const ImportCertificate: SecurityCard = {
   ),
   description: (
     <TextContent>
-      <Text component={TextVariants.small}>Add SSL certificates to the Cryostat server truststore.</Text>
-      <Text component={TextVariants.small}>You must restart the Cryostat server to reload the certificate store.</Text>
+      <Text component={TextVariants.small}>
+        The following certificates are present in Cryostat&apos;s additional trust store. Contact your Cryostat
+        administrator if your application requires a new trusted certificate. You must restart the Cryostat server to
+        reload the certificate store after adding new certificates.
+      </Text>
     </TextContent>
   ),
   content: CertificateImport,

src/app/SecurityPanel/SecurityPanel.tsx

@@ -17,12 +17,12 @@ import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { Card, CardBody, CardTitle, Text, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
 import { StoredCredentialsCard } from './Credentials/StoredCredentials';
-import { ImportCertificate } from './ImportCertificate';
+import { ListCertificates } from './ImportCertificate';
 
 export interface SecurityPanelProps {}
 
 export const SecurityPanel: React.FC<SecurityPanelProps> = (_) => {
-  const securityCards = [ImportCertificate, StoredCredentialsCard].map((c) => ({
+  const securityCards = [ListCertificates, StoredCredentialsCard].map((c) => ({
     key: c.key,
     title: c.title,
     description: c.description,

src/app/Topology/Shared/utils.tsx

@@ -81,7 +81,7 @@ export const getStatusTargetNode = (node: TargetNode | EnvironmentNode): [NodeSt
                 </DescriptionListTermHelpText>{' '}
                 for JMX,{' '}
                 <WarningResolverAsLink key={`${node.target.alias}-resolver-as-link-to-security`} to="/security">
-                  add the SSL certificate
+                  check if the SSL certificate is loaded.
                 </WarningResolverAsLink>
                 .
               </Text>,