From 33d26258c30644b7d11489e7b47c1ae9cdaf996e Mon Sep 17 00:00:00 2001
From: Thuan Vo <thvo@redhat.com>
Date: Tue, 21 Mar 2023 19:45:08 -0400
Subject: [PATCH] feat(cred): credential test table

Signed-off-by: Thuan Vo <thvo@redhat.com>
---
 src/app/AppLayout/CredentialAuthForm.tsx      |  58 ++-
 .../Credentials/CreateCredentialModal.tsx     | 180 ++++++---
 .../Credentials/CredentialTestTable.tsx       | 347 ++++++++++++++++++
 src/app/SecurityPanel/Credentials/utils.tsx   |  70 ++++
 src/app/Shared/Services/Api.service.tsx       |  39 +-
 src/app/app.css                               |   6 +-
 src/app/utils/utils.ts                        |  17 +
 7 files changed, 648 insertions(+), 69 deletions(-)
 create mode 100644 src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
 create mode 100644 src/app/SecurityPanel/Credentials/utils.tsx

diff --git a/src/app/AppLayout/CredentialAuthForm.tsx b/src/app/AppLayout/CredentialAuthForm.tsx
index 99262694e9..32245c2af5 100644
--- a/src/app/AppLayout/CredentialAuthForm.tsx
+++ b/src/app/AppLayout/CredentialAuthForm.tsx
@@ -39,15 +39,31 @@ import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
 import { ActionGroup, Button, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import * as React from 'react';
 
+export interface AuthCredential {
+  username: string;
+  password: string;
+}
+
 export interface CredentialAuthFormProps {
   onDismiss: () => void;
   onSave: (username: string, password: string) => void;
   focus?: boolean;
   loading?: boolean;
+  isDisabled?: boolean;
   children?: React.ReactNode;
+  onCredentialChange?: (credential: AuthCredential) => void;
 }
 
-export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismiss, onSave, ...props }) => {
+export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({
+  onDismiss,
+  onSave,
+  onCredentialChange,
+  loading,
+  isDisabled,
+  focus,
+  children,
+  ...props
+}) => {
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
 
@@ -73,35 +89,49 @@ export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismis
     () =>
       ({
         spinnerAriaValueText: 'Saving',
-        spinnerAriaLabel: 'saving-jmx-credentials',
-        isLoading: props.loading,
+        spinnerAriaLabel: 'saving-credentials',
+        isLoading: loading,
       } as LoadingPropsType),
-    [props.loading]
+    [loading]
   );
 
   return (
-    <Form>
-      {props.children}
+    <Form {...props}>
+      {children}
       <FormGroup isRequired label="Username" fieldId="username">
         <TextInput
           value={username}
-          isDisabled={props.loading}
+          isDisabled={isDisabled || loading}
           isRequired
           type="text"
           id="username"
-          onChange={setUsername}
+          onChange={(v) => {
+            setUsername(v);
+            onCredentialChange &&
+              onCredentialChange({
+                username: v,
+                password: password,
+              });
+          }}
           onKeyUp={handleKeyUp}
-          autoFocus={props.focus}
+          autoFocus={focus}
         />
       </FormGroup>
       <FormGroup isRequired label="Password" fieldId="password">
         <TextInput
           value={password}
-          isDisabled={props.loading}
+          isDisabled={isDisabled || loading}
           isRequired
           type="password"
           id="password"
-          onChange={setPassword}
+          onChange={(v) => {
+            setPassword(v);
+            onCredentialChange &&
+              onCredentialChange({
+                username: username,
+                password: v,
+              });
+          }}
           onKeyUp={handleKeyUp}
         />
       </FormGroup>
@@ -110,11 +140,11 @@ export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismis
           variant="primary"
           onClick={handleSave}
           {...saveButtonLoadingProps}
-          isDisabled={props.loading || username === '' || password === ''}
+          isDisabled={isDisabled || loading || username === '' || password === ''}
         >
-          {props.loading ? 'Saving' : 'Save'}
+          {loading ? 'Saving' : 'Save'}
         </Button>
-        <Button variant="secondary" onClick={handleDismiss} isDisabled={props.loading}>
+        <Button variant="secondary" onClick={handleDismiss} isDisabled={isDisabled || loading}>
           Cancel
         </Button>
       </ActionGroup>
diff --git a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
index 30a1ca8df4..12b0a22047 100644
--- a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
+++ b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
@@ -35,14 +35,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { CredentialAuthForm } from '@app/AppLayout/CredentialAuthForm';
+import { AuthCredential, CredentialAuthForm } from '@app/AppLayout/CredentialAuthForm';
 import { MatchExpressionHint } from '@app/Shared/MatchExpression/MatchExpressionHint';
 import { MatchExpressionVisualizer } from '@app/Shared/MatchExpression/MatchExpressionVisualizer';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { Target } from '@app/Shared/Services/Target.service';
 import { SearchExprService, SearchExprServiceContext } from '@app/Topology/Shared/utils';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { evaluateTargetWithExpr, portalRoot } from '@app/utils/utils';
+import { evaluateTargetWithExpr, portalRoot, StreamOf } from '@app/utils/utils';
 import {
   Button,
   Card,
@@ -53,11 +53,17 @@ import {
   Modal,
   ModalVariant,
   Popover,
+  Tab,
+  Tabs,
+  TabTitleIcon,
+  TabTitleText,
   TextArea,
   ValidatedOptions,
 } from '@patternfly/react-core';
-import { HelpIcon } from '@patternfly/react-icons';
+import { FlaskIcon, HelpIcon, TopologyIcon } from '@patternfly/react-icons';
 import * as React from 'react';
+import { CredentialTestTable } from './CredentialTestTable';
+import { CredentialContext, TestAllContext, useAuthCredential } from './utils';
 
 export interface CreateCredentialModalProps {
   visible: boolean;
@@ -72,51 +78,61 @@ export const CreateCredentialModal: React.FunctionComponent<CreateCredentialModa
   ...props
 }) => {
   const matchExpreRef = React.useRef(new SearchExprService());
+  const loadingRef = React.useRef(new StreamOf(false));
+  const testAllRef = React.useRef(new StreamOf(false));
+  const credentialRef = React.useRef(new StreamOf<AuthCredential>({ username: '', password: '' }));
+  const addSubscription = useSubscriptions();
+
   const [inProgress, setInProgress] = React.useState(false);
 
-  const alertOptions = React.useMemo(() => ({ hideActions: true }), []);
+  React.useEffect(() => {
+    addSubscription(loadingRef.current.get().subscribe(setInProgress));
+  }, [addSubscription, loadingRef, setInProgress]);
 
   return (
-    <SearchExprServiceContext.Provider value={matchExpreRef.current}>
-      <Modal
-        appendTo={portalRoot}
-        isOpen={visible}
-        tabIndex={0} // enable keyboard-accessible scrolling
-        variant={ModalVariant.large}
-        showClose={!inProgress}
-        className="add-credential-modal"
-        onClose={onDismiss}
-        title="Store Credentials"
-        description="Create stored credentials for target JVMs. Cryostat will use these credentials to connect to Cryostat agents or target JVMs over JMX (if required)."
-      >
-        <Grid hasGutter style={{ height: '100%' }}>
-          <GridItem xl={4}>
-            <Card isFullHeight isFlat>
-              <CardBody className="overflow-auto">
-                <AuthForm
-                  visible={visible}
-                  onDismiss={onDismiss}
-                  onPropsSave={onPropsSave}
-                  progressChange={setInProgress}
-                  {...props}
-                />
-              </CardBody>
-            </Card>
-          </GridItem>
-          <GridItem xl={8}>
-            <Card isFullHeight isFlat>
-              <CardBody className="overflow-auto">
-                <MatchExpressionVisualizer alertOptions={alertOptions} />
-              </CardBody>
-            </Card>
-          </GridItem>
-        </Grid>
-      </Modal>
-    </SearchExprServiceContext.Provider>
+    <Modal
+      appendTo={portalRoot}
+      isOpen={visible}
+      tabIndex={0} // enable keyboard-accessible scrolling
+      variant={ModalVariant.large}
+      showClose={!inProgress}
+      className="add-credential-modal"
+      onClose={onDismiss}
+      title="Store Credentials"
+      description="Create stored credentials for target JVMs. Cryostat will use these credentials to connect to Cryostat agents or target JVMs over JMX (if required)."
+    >
+      <SearchExprServiceContext.Provider value={matchExpreRef.current}>
+        <CredentialContext.Provider value={credentialRef.current}>
+          <TestAllContext.Provider value={testAllRef.current}>
+            <Grid hasGutter style={{ height: '100%' }}>
+              <GridItem xl={4}>
+                <Card isFullHeight isFlat>
+                  <CardBody className="overflow-auto">
+                    <AuthForm
+                      {...props}
+                      onDismiss={onDismiss}
+                      onPropsSave={onPropsSave}
+                      progressChange={setInProgress}
+                    />
+                  </CardBody>
+                </Card>
+              </GridItem>
+              <GridItem xl={8}>
+                <Card isFullHeight isFlat>
+                  <CardBody className="overflow-auto">
+                    <FormHelper />
+                  </CardBody>
+                </Card>
+              </GridItem>
+            </Grid>
+          </TestAllContext.Provider>
+        </CredentialContext.Provider>
+      </SearchExprServiceContext.Provider>
+    </Modal>
   );
 };
 
-interface AuthFormProps extends CreateCredentialModalProps {
+interface AuthFormProps extends Omit<CreateCredentialModalProps, 'visible'> {
   progressChange?: (inProgress: boolean) => void;
 }
 
@@ -126,29 +142,26 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
   const matchExprService = React.useContext(SearchExprServiceContext);
   const [matchExpression, setMatchExpression] = React.useState('');
   const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
-  const [loading, setLoading] = React.useState(false);
+  const [_, setCredential] = useAuthCredential(true);
+  const [saving, setSaving] = React.useState(false);
 
   const [targets, setTargets] = React.useState<Target[]>([]);
 
   const onSave = React.useCallback(
     (username: string, password: string) => {
-      setLoading(true);
+      setSaving(true);
       addSubscription(
         context.api.postCredentials(matchExpression, username, password).subscribe((ok) => {
-          setLoading(false);
+          setSaving(false);
           if (ok) {
             onPropsSave();
           }
         })
       );
     },
-    [addSubscription, onPropsSave, context.api, matchExpression, setLoading]
+    [addSubscription, onPropsSave, context.api, matchExpression, setSaving]
   );
 
-  React.useEffect(() => {
-    progressChange && progressChange(loading);
-  }, [loading, progressChange]);
-
   React.useEffect(() => {
     addSubscription(context.targets.targets().subscribe(setTargets));
   }, [addSubscription, context.targets, setTargets]);
@@ -157,7 +170,13 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
     let validation: ValidatedOptions = ValidatedOptions.default;
     if (matchExpression !== '' && targets.length > 0) {
       try {
-        const atLeastOne = targets.some((t) => evaluateTargetWithExpr(t, matchExpression));
+        const atLeastOne = targets.some((t) => {
+          const res = evaluateTargetWithExpr(t, matchExpression);
+          if (typeof res === 'boolean') {
+            return res;
+          }
+          throw new Error('Invalid match expression');
+        });
         validation = atLeastOne ? ValidatedOptions.success : ValidatedOptions.warning;
       } catch (err) {
         validation = ValidatedOptions.error;
@@ -166,8 +185,20 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
     setMatchExpressionValid(validation);
   }, [matchExpression, targets, setMatchExpressionValid]);
 
+  React.useEffect(() => {
+    progressChange && progressChange(saving);
+  }, [saving, progressChange]);
+
   return (
-    <CredentialAuthForm {...props} onSave={onSave} onDismiss={onDismiss} focus={false} loading={loading}>
+    <CredentialAuthForm
+      {...props}
+      onSave={onSave}
+      onDismiss={onDismiss}
+      focus={false}
+      loading={saving}
+      isDisabled={false}
+      onCredentialChange={setCredential}
+    >
       <FormGroup
         label="Match Expression"
         labelIcon={
@@ -207,7 +238,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
       >
         <TextArea
           value={matchExpression}
-          isDisabled={loading}
+          isDisabled={false}
           isRequired
           type="text"
           id="rule-matchexpr"
@@ -225,3 +256,48 @@ export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, prog
     </CredentialAuthForm>
   );
 };
+
+type _SupportedTab = 'visualizer' | 'test';
+
+export const FormHelper: React.FC = ({ ...props }) => {
+  const alertOptions = React.useMemo(() => ({ hideActions: true }), []);
+  const [activeTab, setActiveTab] = React.useState<_SupportedTab>('visualizer');
+
+  const handleTabChange = React.useCallback(
+    (_: React.MouseEvent, key: string | number) => setActiveTab(`${key}` as _SupportedTab),
+    [setActiveTab]
+  );
+
+  return (
+    <Tabs {...props} activeKey={activeTab} onSelect={handleTabChange}>
+      <Tab
+        eventKey={'visualizer'}
+        title={
+          <>
+            <TabTitleIcon>
+              <TopologyIcon />
+            </TabTitleIcon>
+            <TabTitleText>Visualizer</TabTitleText>
+          </>
+        }
+      >
+        <div style={{ marginTop: '1em', height: '100%' }}>
+          <MatchExpressionVisualizer alertOptions={alertOptions} />
+        </div>
+      </Tab>
+      <Tab
+        eventKey={'test'}
+        title={
+          <>
+            <TabTitleIcon>
+              <FlaskIcon />
+            </TabTitleIcon>
+            <TabTitleText>Test</TabTitleText>
+          </>
+        }
+      >
+        <CredentialTestTable />
+      </Tab>
+    </Tabs>
+  );
+};
diff --git a/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
new file mode 100644
index 0000000000..65ea8b40b0
--- /dev/null
+++ b/src/app/SecurityPanel/Credentials/CredentialTestTable.tsx
@@ -0,0 +1,347 @@
+/*
+ * 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 { LinearDotSpinner } from '@app/Shared/LinearDotSpinner';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { Target } from '@app/Shared/Services/Target.service';
+import { useSearchExpression } from '@app/Topology/Shared/utils';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { evaluateTargetWithExpr } from '@app/utils/utils';
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Label,
+  LabelProps,
+  Popover,
+  SearchInput,
+  Select,
+  SelectOption,
+  SelectVariant,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';
+import {
+  InnerScrollContainer,
+  OuterScrollContainer,
+  TableComposable,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
+import * as React from 'react';
+import { TestAllContext, useAuthCredential } from './utils';
+
+export interface CredentialTestTableProps {}
+
+export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...props }) => {
+  const addSubscription = useSubscriptions();
+  const context = React.useContext(ServiceContext);
+
+  const [targets, setTargets] = React.useState<Target[]>([]);
+  const [matchExpression] = useSearchExpression();
+  const [filters, setFilters] = React.useState<TestState[]>([]);
+  const [searchText, setSearchText] = React.useState('');
+
+  React.useEffect(() => {
+    addSubscription(context.targets.targets().subscribe(setTargets));
+  }, [addSubscription, context.targets, setTargets]);
+
+  const matchedTargets = React.useMemo(() => {
+    if ((matchExpression ?? '') === '' || !targets.length) {
+      return targets;
+    }
+    try {
+      return targets.filter((t) => {
+        const res = evaluateTargetWithExpr(t, matchExpression);
+        if (typeof res === 'boolean') {
+          return res;
+        }
+        throw new Error('Invalid match expression');
+      });
+    } catch (err) {
+      return [];
+    }
+  }, [targets, matchExpression]);
+
+  const rows = React.useMemo(
+    () =>
+      matchedTargets.map((t) => (
+        <CredentialTestRow target={t} key={t.connectUrl} filters={filters} searchText={searchText} />
+      )),
+    [matchedTargets, filters, searchText]
+  );
+
+  const toolbar = React.useMemo(
+    () => <CredentialToolbar onFilter={setFilters} onSearch={setSearchText} />,
+    [setFilters, setSearchText]
+  );
+
+  return (
+    <>
+      {matchedTargets.length ? (
+        rows.length ? (
+          <OuterScrollContainer>
+            {toolbar}
+            <InnerScrollContainer>
+              <TableComposable {...props}>
+                <Thead>
+                  <Tr>
+                    <Th>Target</Th>
+                    <Th textCenter width={20}>
+                      Status
+                    </Th>
+                  </Tr>
+                </Thead>
+                <Tbody>{rows}</Tbody>
+              </TableComposable>
+            </InnerScrollContainer>
+          </OuterScrollContainer>
+        ) : (
+          <Bullseye>
+            <EmptyState variant={EmptyStateVariant.full}>
+              <EmptyStateIcon variant="container" component={SearchIcon} />
+              <Title headingLevel="h3" size="lg">
+                No Targets Found
+              </Title>
+              <EmptyStateBody>Clear filters and try again.</EmptyStateBody>
+            </EmptyState>
+          </Bullseye>
+        )
+      ) : (
+        <Bullseye>
+          <EmptyState variant={EmptyStateVariant.full}>
+            <EmptyStateIcon variant="container" component={SearchIcon} />
+            <Title headingLevel="h3" size="lg">
+              No Targets Matched
+            </Title>
+            <EmptyStateBody>Enter another match expression and try again.</EmptyStateBody>
+          </EmptyState>
+        </Bullseye>
+      )}
+    </>
+  );
+};
+
+enum TestState {
+  NO_STATUS = 'No Status',
+  INVALID = 'Invalid',
+  VALID = 'Valid',
+}
+
+const getColor = (state: TestState): LabelProps['color'] => {
+  switch (state) {
+    case TestState.VALID:
+      return 'green';
+    case TestState.INVALID:
+      return 'red';
+    case TestState.NO_STATUS:
+    default:
+      return 'grey';
+  }
+};
+
+interface TestStatus {
+  state: TestState;
+  error?: Error;
+}
+
+export interface CredentialTestRowProps {
+  target: Target;
+  filters?: TestState[];
+  searchText?: string;
+}
+
+export const CredentialTestRow: React.FC<CredentialTestRowProps> = ({
+  target,
+  filters = [],
+  searchText = '',
+  ...props
+}) => {
+  const [status, setStatus] = React.useState<TestStatus>({
+    state: TestState.NO_STATUS,
+    error: undefined,
+  });
+  const context = React.useContext(ServiceContext);
+  const [loading, setLoading] = React.useState(false);
+  const [credential] = useAuthCredential();
+  const addSubscription = useSubscriptions();
+
+  const isEmptyCredential = React.useMemo(() => credential.password === '' || credential.username === '', [credential]);
+
+  const isShowed = React.useMemo(() => {
+    const regex = new RegExp(searchText, 'i');
+    if (searchText !== '' && !(regex.test(target.alias) || regex.test(target.connectUrl))) {
+      return false;
+    }
+    return !filters.length || filters.includes(status.state);
+  }, [target, filters, searchText, status.state]);
+
+  const handleTest = React.useCallback(() => {
+    if (loading || isEmptyCredential) {
+      return; // Do not repeat request or send when input fields are empty
+    }
+    setLoading(true);
+    addSubscription(
+      context.api.checkCredentialsForTarget(target, credential).subscribe((err) => {
+        setLoading(false);
+        setStatus({
+          error: err,
+          state: err ? TestState.INVALID : TestState.VALID,
+        });
+      })
+    );
+  }, [setStatus, addSubscription, context.api, target, credential, isEmptyCredential, loading]);
+
+  return isShowed ? (
+    <Tr {...props} id={`${target.connectUrl}-test-row`}>
+      <Td dataLabel="Target">{!target.alias ? target.connectUrl : `${target.alias} (${target.connectUrl})`}</Td>
+      <Td dataLabel="Status" textCenter>
+        {loading ? (
+          <Bullseye>
+            <LinearDotSpinner />
+          </Bullseye>
+        ) : status.state === TestState.INVALID ? (
+          <Popover
+            aria-label={`Test Error Details (${target.connectUrl})`}
+            alertSeverityVariant="danger"
+            headerIcon={<ExclamationCircleIcon />}
+            headerContent={<div>Invalid credentials</div>}
+            bodyContent={<div>{status.error?.message || 'Unknown error'}</div>}
+          >
+            <Label style={{ cursor: 'pointer' }} color={getColor(status.state)}>
+              {status.state}
+            </Label>
+          </Popover>
+        ) : (
+          <Label color={getColor(status.state)}>{status.state}</Label>
+        )}
+      </Td>
+      <Td textCenter>
+        <Button variant="secondary" isDisabled={loading || isEmptyCredential} onClick={handleTest}>
+          Test
+        </Button>
+      </Td>
+    </Tr>
+  ) : null;
+};
+
+interface CredentialToolbarProps {
+  onFilter?: (filters: TestState[]) => void;
+  onSearch?: (searchText: string) => void;
+}
+
+const CredentialToolbar: React.FC<CredentialToolbarProps> = ({ onFilter, onSearch, ...props }) => {
+  const testAllContext = React.useContext(TestAllContext);
+  const [credential] = useAuthCredential();
+
+  const handleTestAll = React.useCallback(() => {
+    testAllContext.set(true);
+  }, [testAllContext]);
+
+  const disableTestButton = React.useMemo(() => credential.username === '' || credential.password === '', [credential]);
+
+  return (
+    <Toolbar {...props} isSticky id="credential-test-table-toolbar" aria-label="credential-test-table-toolbar">
+      <ToolbarContent>
+        <ToolbarItem variant="search-filter">
+          <SearchInput aria-label="Items example search input" onChange={onSearch} />
+        </ToolbarItem>
+        <ToolbarGroup variant="filter-group">
+          <StatusFilter onChange={onFilter} />
+        </ToolbarGroup>
+        <ToolbarItem>
+          <Tooltip content={'Test credentials against all matching targets. This operation can be slow.'}>
+            <Button variant="primary" onClick={handleTestAll} isAriaDisabled={disableTestButton}>
+              Test All
+            </Button>
+          </Tooltip>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+const StatusFilter: React.FC<{ onChange?: (filters: TestState[]) => void }> = ({ onChange, ...props }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [filters, setFilters] = React.useState<TestState[]>([]);
+
+  const handleToggle = React.useCallback(() => setIsOpen((old) => !old), [setIsOpen]);
+
+  const handleSelect = React.useCallback(
+    (_: React.MouseEvent, value: TestState) => {
+      setFilters((old) => {
+        if (old.includes(value)) {
+          return old.filter((v) => v !== value);
+        }
+        return [...old, value];
+      });
+    },
+    [setFilters]
+  );
+
+  React.useEffect(() => onChange && onChange(filters), [filters, onChange]);
+
+  return (
+    <Select
+      {...props}
+      variant={SelectVariant.checkbox}
+      aria-label="Status"
+      onToggle={handleToggle}
+      onSelect={handleSelect}
+      selections={filters}
+      isOpen={isOpen}
+      placeholderText="Status"
+    >
+      {Object.values(TestState).map((state) => (
+        <SelectOption key={state} value={state}>
+          <Label color={getColor(state)}>{state}</Label>
+        </SelectOption>
+      ))}
+    </Select>
+  );
+};
diff --git a/src/app/SecurityPanel/Credentials/utils.tsx b/src/app/SecurityPanel/Credentials/utils.tsx
new file mode 100644
index 0000000000..2678f8ae56
--- /dev/null
+++ b/src/app/SecurityPanel/Credentials/utils.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { AuthCredential } from '@app/AppLayout/CredentialAuthForm';
+import { StreamOf } from '@app/utils/utils';
+import * as React from 'react';
+import { debounceTime, Subscription } from 'rxjs';
+
+export const CredentialContext = React.createContext(new StreamOf<AuthCredential>({ username: '', password: '' }));
+
+export const TestAllContext = React.createContext(new StreamOf<boolean>(false));
+
+export const useAuthCredential = (
+  ignoreEmit?: boolean,
+  debounceMs = 50
+): [AuthCredential, (credential: AuthCredential) => void] => {
+  const [credential$, setCredential$] = React.useState<AuthCredential>({ username: '', password: '' });
+  const authCredentialContext = React.useContext(CredentialContext);
+
+  React.useEffect(() => {
+    let sub: Subscription | undefined;
+    if (!ignoreEmit) {
+      sub = authCredentialContext.get().pipe(debounceTime(debounceMs)).subscribe(setCredential$);
+    }
+    return () => sub && sub.unsubscribe();
+  }, [setCredential$, authCredentialContext, debounceMs, ignoreEmit]);
+
+  const setCredential = React.useCallback(
+    (credential: AuthCredential) => {
+      authCredentialContext.set(credential);
+    },
+    [authCredentialContext]
+  );
+
+  return [credential$, setCredential];
+};
diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx
index 6a04ceb3cf..15ee403673 100644
--- a/src/app/Shared/Services/Api.service.tsx
+++ b/src/app/Shared/Services/Api.service.tsx
@@ -41,6 +41,7 @@ import { RecordingLabel } from '@app/RecordingMetadata/RecordingLabel';
 import { Rule } from '@app/Rules/Rules';
 import { EnvironmentNode } from '@app/Topology/typings';
 import { createBlobURL } from '@app/utils/utils';
+import { Base64 } from 'js-base64';
 import _ from 'lodash';
 import { EMPTY, forkJoin, from, Observable, ObservableInput, of, ReplaySubject, shareReplay, throwError } from 'rxjs';
 import { fromFetch } from 'rxjs/fetch';
@@ -697,9 +698,17 @@ export class ApiService {
     apiVersion: ApiVersion = 'v1',
     params?: URLSearchParams,
     suppressNotifications?: boolean,
-    skipStatusCheck?: boolean
+    skipStatusCheck?: boolean,
+    headers?: HeadersInit
   ): Observable<T> {
-    return this.sendRequest(apiVersion, path, { method: 'GET' }, params, suppressNotifications, skipStatusCheck).pipe(
+    return this.sendRequest(
+      apiVersion,
+      path,
+      { method: 'GET', headers },
+      params,
+      suppressNotifications,
+      skipStatusCheck
+    ).pipe(
       map((resp) => resp.json()),
       concatMap(from),
       first()
@@ -1154,6 +1163,32 @@ export class ApiService {
     );
   }
 
+  checkCredentialsForTarget(
+    target: Target,
+    credentials: { username: string; password: string }
+  ): Observable<Error | undefined> {
+    const headers = new window.Headers();
+    const basic = `${credentials.username}:${credentials.password}`;
+    headers.set('X-JMX-Authorization', `Basic ${Base64.encode(basic)}`);
+    return this.doGet<ActiveRecording[]>(
+      `targets/${encodeURIComponent(target.connectUrl)}/recordings`,
+      'v1',
+      undefined,
+      true,
+      true,
+      headers
+    ).pipe(
+      first(),
+      map((_) => undefined),
+      catchError((err) => {
+        if (isHttpError(err)) {
+          return err.httpResponse.text().then((detail) => new Error(detail));
+        }
+        return of(err);
+      })
+    );
+  }
+
   downloadDashboardLayout(layout: DashboardLayout): void {
     const serializedLayout = this.getSerializedDashboardLayout(layout);
     const filename = `cryostat-dashboard-${layout.name}.json`;
diff --git a/src/app/app.css b/src/app/app.css
index 49eda68e4b..d55709bc40 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -517,7 +517,11 @@ input[type=number].datetime-picker__number-input {
 
 .add-credential-modal {
   width: 80% !important;
-  height: 80%;
+  height: 85%;
+}
+
+.add-credential-modal .pf-c-tab-content {
+  height: 90%;
 }
 
 .overflow-auto {
diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts
index c04dc74d11..e62654c9e3 100644
--- a/src/app/utils/utils.ts
+++ b/src/app/utils/utils.ts
@@ -37,6 +37,7 @@
  */
 
 import _ from 'lodash';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 const SECOND_MILLIS = 1000;
 const MINUTE_MILLIS = 60 * SECOND_MILLIS;
@@ -169,3 +170,19 @@ export const evaluateTargetWithExpr = (target: unknown, matchExpression: string)
 };
 
 export const portalRoot = document.getElementById('portal-root') || document.body;
+
+export class StreamOf<T> {
+  private readonly _stream$: BehaviorSubject<T>;
+
+  constructor(first: T) {
+    this._stream$ = new BehaviorSubject<T>(first);
+  }
+
+  get(): Observable<T> {
+    return this._stream$.asObservable();
+  }
+
+  set(value: T): void {
+    this._stream$.next(value);
+  }
+}