feat(jmx): re-implement enhanced transient JMX credentials

src/app/AppLayout/AuthModal.tsx

@@ -64,8 +64,7 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
               first(),
               filter((target) => target !== NO_TARGET),
               map((target) => target.connectUrl),
-              map((connectUrl) => `target.connectUrl == "${connectUrl}"`),
-              mergeMap((matchExpression) => context.api.postCredentials(matchExpression, username, password))
+              mergeMap((connectUrl) => context.jmxCredentials.setCredential(connectUrl, username, password))
             )
             .subscribe((result) => {
               if (result) {
@@ -95,7 +94,12 @@ export const AuthModal: React.FunctionComponent<AuthModalProps> = (props) => {
           <Link onClick={props.onDismiss} to="/security">
             Security
           </Link>{' '}
-          to add a credential matching multiple targets.
+          to add a credential matching multiple targets. Visit{' '}
+          <Link onClick={props.onDismiss} to="/settings">
+            Settings
+          </Link>{' '}
+          to confirm and configure whether these credentials will be held only for this browser session or stored
+          encrypted in the Cryostat backend.
         </Text>
       }
     >

src/app/AppLayout/JmxAuthForm.tsx

@@ -57,7 +57,6 @@ export const JmxAuthForm: React.FunctionComponent<JmxAuthFormProps> = (props) =>
 
   const handleSave = React.useCallback(() => {
     props.onSave(username, password).then(() => {
-      clear();
       context.target.setAuthRetry();
     });
   }, [context, context.target, clear, props.onSave, username, password]);

src/app/Rules/Rules.tsx

@@ -36,17 +36,22 @@
  * SOFTWARE.
  */
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import {
+  Button,
   Card,
   CardBody,
+  CardHeader,
+  CardHeaderMain,
   EmptyState,
   EmptyStateIcon,
+  Text,
+  TextVariants,
   Title,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
   ToolbarGroup,
-  Button,
 } from '@patternfly/react-core';
 import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
 import {
@@ -378,6 +383,21 @@ export const Rules = () => {
             {viewContent()}
           </CardBody>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardHeaderMain>
+              <Text component={TextVariants.h4}>About Automated Rules</Text>
+            </CardHeaderMain>
+          </CardHeader>
+          <CardBody>
+            Automated Rules define a dynamic set of Target JVMs to connect to and start{' '}
+            <Link to="/recordings">Active Recordings</Link> using a specific <Link to="/events">Event Template</Link>{' '}
+            when the Automated Rule is created and when any new matching Target JVMs appear. If your Target JVM
+            connections require JMX Credentials, you can configure these in <Link to="/security">Security</Link>.
+            Automated Rules can be configured to periodically copy the contents of the Active Recording to{' '}
+            <Link to="/archives">Archives</Link> to ensure you always have up-to-date information about your JVMs.
+          </CardBody>
+        </Card>
       </BreadcrumbPage>
       <RuleUploadModal visible={isUploadModalOpen} onClose={handleUploadModalClose}></RuleUploadModal>
     </>

src/app/SecurityPanel/Credentials/StoreJmxCredentials.tsx

@@ -36,12 +36,15 @@
  * SOFTWARE.
  */
 import * as React from 'react';
+import _ from 'lodash';
+import { Link } from 'react-router-dom';
 import {
   Badge,
   Button,
   Checkbox,
   EmptyState,
   EmptyStateIcon,
+  Text,
   Title,
   Toolbar,
   ToolbarContent,
@@ -62,7 +65,6 @@ import { LoadingView } from '@app/LoadingView/LoadingView';
 import { DeleteWarningModal } from '@app/Modal/DeleteWarningModal';
 import { DeleteWarningType } from '@app/Modal/DeleteWarningUtils';
 import { MatchedTargetsTable } from './MatchedTargetsTable';
-import _ from 'lodash';
 
 const enum Actions {
   HANDLE_REFRESH,
@@ -457,6 +459,14 @@ export const StoreJmxCredentials = () => {
 
 export const StoreJmxCredentialsCard: SecurityCard = {
   title: 'Store JMX Credentials',
-  description: `Credentials that Cryostat uses to connect to target JVMs over JMX are stored here.`,
+  description: (
+    <Text>
+      Credentials that Cryostat uses to connect to target JVMs over JMX are stored here. These are stored in encrypted
+      storage managed by the Cryostat backend. These credentials may be used for manually managing recordings and event
+      templates on target JVMs, as well as for Automated Rules which run in the background and open unattended target
+      connections. Any locally-stored client credentials held by your browser session are not displayed here. See{' '}
+      <Link to="/settings">Settings</Link> to configure locally-stored credentials.
+    </Text>
+  ),
   content: StoreJmxCredentials,
 };

src/app/SecurityPanel/SecurityPanel.tsx

@@ -65,6 +65,6 @@ export const SecurityPanel = () => {
 
 export interface SecurityCard {
   title: string;
-  description: string;
+  description: JSX.Element | string;
   content: React.FunctionComponent;
 }

src/app/Settings/AutoRefresh.tsx

@@ -105,6 +105,7 @@ const Component = () => {
 
 export const AutoRefresh: UserSetting = {
   title: 'Auto-Refresh',
-  description: 'Set the refresh period for content views.',
+  description:
+    'Set the refresh period for content views. Views normally update dynamically via WebSocket notifications, so this should not be needed unless WebSockets are not working.',
   content: Component,
 };

src/app/Settings/CredentialsStorage.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Select, SelectOption, SelectVariant, Text } from '@patternfly/react-core';
+
+import { UserSetting } from './Settings';
+import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
+
+export interface Location {
+  key: string;
+  description: string;
+}
+
+export class Locations {
+  static readonly BROWSER_SESSION: Location = {
+    key: 'Session (Browser Memory)',
+    description:
+      'Keep credentials in browser memory for the current session only. When you close this browser tab the credentials will be forgotten.',
+  };
+  static readonly BACKEND: Location = {
+    key: 'Backend',
+    description:
+      'Keep credentials in encrypted Cryostat backend storage. These credentials will be available to other users and will be used for Automated Rules.',
+  };
+}
+
+const locations = [Locations.BROWSER_SESSION, Locations.BACKEND];
+
+const getLocation = (key: string): Location => {
+  for (let l of locations) {
+    if (l.key === key) {
+      return l;
+    }
+  }
+  return Locations.BROWSER_SESSION;
+};
+
+const Component = () => {
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [selection, setSelection] = React.useState(Locations.BROWSER_SESSION.key);
+
+  const handleSelect = React.useCallback(
+    (_, selection) => {
+      let location = getLocation(selection);
+      setSelection(location.key);
+      setExpanded(false);
+      saveToLocalStorage('JMX_CREDENTIAL_LOCATION', selection);
+    },
+    [getLocation, setSelection, setExpanded, saveToLocalStorage]
+  );
+
+  React.useEffect(() => {
+    handleSelect(undefined, getFromLocalStorage('JMX_CREDENTIAL_LOCATION', Locations.BROWSER_SESSION.key));
+  }, [handleSelect, getFromLocalStorage]);
+
+  return (
+    <>
+      <Select
+        variant={SelectVariant.single}
+        onToggle={setExpanded}
+        onSelect={handleSelect}
+        isOpen={isExpanded}
+        selections={selection}
+      >
+        {locations.map((location) => (
+          <SelectOption key={location.key} value={location.key} description={location.description} />
+        ))}
+      </Select>
+    </>
+  );
+};
+
+export const CredentialsStorage: UserSetting = {
+  title: 'JMX Credentials Storage',
+  description: (
+    <Text>
+      When you attempt to connect to a target application which requires authentication, you will see a prompt for
+      credentials to present to the application and complete the connection. You can choose where to persist these
+      credentials. Any credentials added through the <Link to="/security">Security</Link> panel will always be stored in
+      Cryostat backend encrypted storage.
+    </Text>
+  ),
+  content: Component,
+};

src/app/Settings/Settings.tsx

@@ -40,31 +40,31 @@ import * as React from 'react';
 import { Card, CardBody, CardTitle, Text, TextVariants } from '@patternfly/react-core';
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 
-import { AutoRefresh } from './AutoRefresh';
 import { NotificationControl } from './NotificationControl';
-import { WebSocketDebounce } from './WebSocketDebounce';
+import { CredentialsStorage } from './CredentialsStorage';
 import { DeletionDialogControl } from './DeletionDialogControl';
+import { WebSocketDebounce } from './WebSocketDebounce';
+import { AutoRefresh } from './AutoRefresh';
 
 export const Settings: React.FunctionComponent<{}> = () => {
-  const settings = [AutoRefresh, NotificationControl, DeletionDialogControl, WebSocketDebounce].map((c) => ({
-    title: c.title,
-    description: c.description,
-    element: React.createElement(c.content, null),
-  }));
-
+  const settings = [NotificationControl, CredentialsStorage, DeletionDialogControl, WebSocketDebounce, AutoRefresh].map(
+    (c) => ({
+      title: c.title,
+      description: c.description,
+      element: React.createElement(c.content, null),
+    })
+  );
   return (
     <>
       <BreadcrumbPage pageTitle="Settings">
         {settings.map((s) => (
-          <>
-            <Card>
-              <CardTitle>
-                <Text component={TextVariants.h1}>{s.title}</Text>
-                <Text component={TextVariants.small}>{s.description}</Text>
-              </CardTitle>
-              <CardBody>{s.element}</CardBody>
-            </Card>
-          </>
+          <Card key={s.title}>
+            <CardTitle>
+              <Text component={TextVariants.h1}>{s.title}</Text>
+              <Text component={TextVariants.small}>{s.description}</Text>
+            </CardTitle>
+            <CardBody>{s.element}</CardBody>
+          </Card>
         ))}
       </BreadcrumbPage>
     </>
@@ -73,6 +73,6 @@ export const Settings: React.FunctionComponent<{}> = () => {
 
 export interface UserSetting {
   title: string;
-  description: string;
+  description: JSX.Element | string;
   content: React.FunctionComponent;
 }

src/app/Settings/WebSocketDebounce.tsx

@@ -37,7 +37,7 @@
  */
 
 import * as React from 'react';
-import { NumberInput, Text, TextVariants } from '@patternfly/react-core';
+import { NumberInput } from '@patternfly/react-core';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { UserSetting } from './Settings';