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

cryostatio · Apr 16, 2024 · 73e5d53 · 73e5d53
1 parent c93e6b4
commit 73e5d53
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 182 deletions.
diff --git a/src/app/SecurityPanel/CertificateUploadModal.tsx b/src/app/SecurityPanel/CertificateUploadModal.tsx
diff --git a/src/app/SecurityPanel/ImportCertificate.tsx b/src/app/SecurityPanel/ImportCertificate.tsx
@@ -15,34 +15,69 @@
  */
 
 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,
+  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';
 
 export const CertificateImport: React.FC = () => {
-  const [showModal, setShowModal] = React.useState(false);
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const [certs, setCerts] = React.useState([] as string[]);
 
-  const handleModalClose = () => {
-    setShowModal(false);
-  };
+  React.useEffect(() => {
+    addSubscription(context.api.doGet('tls/certs', 'v3').subscribe(setCerts));
+  }, [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>
+          {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 +87,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,

diff --git a/src/app/SecurityPanel/SecurityPanel.tsx b/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 { StoreCredentialsCard } from './Credentials/StoreCredentials';
-import { ImportCertificate } from './ImportCertificate';
+import { ListCertificates } from './ImportCertificate';
 
 export interface SecurityPanelProps {}
 
 export const SecurityPanel: React.FC<SecurityPanelProps> = (_) => {
-  const securityCards = [ImportCertificate, StoreCredentialsCard].map((c) => ({
+  const securityCards = [ListCertificates, StoreCredentialsCard].map((c) => ({
     key: c.key,
     title: c.title,
     description: c.description,

diff --git a/src/app/Shared/Services/api.types.ts b/src/app/Shared/Services/api.types.ts
@@ -17,7 +17,7 @@
 import { AlertVariant } from '@patternfly/react-core';
 import { Observable } from 'rxjs';
 
-export type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'v2.2' | 'v2.3' | 'v2.4' | 'beta';
+export type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'v2.2' | 'v2.3' | 'v2.4' | 'v3' | 'beta';
 
 // ======================================
 // Common Resources

diff --git a/src/app/Topology/Shared/utils.tsx b/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>,