diff --git a/src/app/AppLayout/AuthModal.tsx b/src/app/AppLayout/AuthModal.tsx
index c73dbb29b..31b132841 100644
--- a/src/app/AppLayout/AuthModal.tsx
+++ b/src/app/AppLayout/AuthModal.tsx
@@ -43,7 +43,7 @@ import { Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { filter, first, map, mergeMap } from 'rxjs';
-import { JmxAuthForm } from './JmxAuthForm';
+import { CredentialAuthForm } from './CredentialAuthForm';
 
 export interface AuthModalProps {
   visible: boolean;
@@ -103,7 +103,7 @@ export const AuthModal: React.FC<AuthModalProps> = ({ onDismiss, onSave: onProps
         </Text>
       }
     >
-      <JmxAuthForm onSave={onSave} onDismiss={onDismiss} focus={true} loading={loading} />
+      <CredentialAuthForm onSave={onSave} onDismiss={onDismiss} focus={true} loading={loading} />
     </Modal>
   );
 };
diff --git a/src/app/AppLayout/JmxAuthForm.tsx b/src/app/AppLayout/CredentialAuthForm.tsx
similarity index 96%
rename from src/app/AppLayout/JmxAuthForm.tsx
rename to src/app/AppLayout/CredentialAuthForm.tsx
index 45430abc4..99262694e 100644
--- a/src/app/AppLayout/JmxAuthForm.tsx
+++ b/src/app/AppLayout/CredentialAuthForm.tsx
@@ -39,7 +39,7 @@ import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
 import { ActionGroup, Button, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import * as React from 'react';
 
-export interface JmxAuthFormProps {
+export interface CredentialAuthFormProps {
   onDismiss: () => void;
   onSave: (username: string, password: string) => void;
   focus?: boolean;
@@ -47,7 +47,7 @@ export interface JmxAuthFormProps {
   children?: React.ReactNode;
 }
 
-export const JmxAuthForm: React.FC<JmxAuthFormProps> = ({ onDismiss, onSave, ...props }) => {
+export const CredentialAuthForm: React.FC<CredentialAuthFormProps> = ({ onDismiss, onSave, ...props }) => {
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');
 
diff --git a/src/app/BreadcrumbPage/BreadcrumbPage.tsx b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
index bb683ed51..b166819dd 100644
--- a/src/app/BreadcrumbPage/BreadcrumbPage.tsx
+++ b/src/app/BreadcrumbPage/BreadcrumbPage.tsx
@@ -56,14 +56,9 @@ export const BreadcrumbPage: React.FC<BreadcrumbPageProps> = (props) => {
       <PageSection>
         <Breadcrumb>
           {(props.breadcrumbs || []).map(({ title, path }) => (
-            <BreadcrumbItem
-              key={path}
-              render={() => (
-                <>
-                  <Link to={path}>{title}</Link>
-                </>
-              )}
-            ></BreadcrumbItem>
+            <BreadcrumbItem key={path}>
+              <Link to={path}>{title}</Link>
+            </BreadcrumbItem>
           ))}
           <BreadcrumbHeading>{props.pageTitle}</BreadcrumbHeading>
         </Breadcrumb>
diff --git a/src/app/Modal/DeleteWarningUtils.tsx b/src/app/Modal/DeleteWarningUtils.tsx
index 214a5689e..e5c8b1281 100644
--- a/src/app/Modal/DeleteWarningUtils.tsx
+++ b/src/app/Modal/DeleteWarningUtils.tsx
@@ -43,7 +43,7 @@ export enum DeleteOrDisableWarningType {
   DeleteEventTemplates = 'DeleteEventTemplates',
   DeleteProbeTemplates = 'DeleteProbeTemplates',
   DeleteActiveProbes = 'DeleteActiveProbes',
-  DeleteJMXCredentials = 'DeleteJMXCredentials',
+  DeleteCredentials = 'DeleteCredentials',
   DeleteCustomTargets = 'DeleteCustomTargets',
   DeleteDashboardLayout = 'DeleteDashboardLayout',
 }
@@ -112,12 +112,12 @@ export const DeleteActiveProbes: DeleteOrDisableWarning = {
   ariaLabel: 'Active Probes remove warning',
 };
 
-export const DeleteJMXCredentials: DeleteOrDisableWarning = {
-  id: DeleteOrDisableWarningType.DeleteJMXCredentials,
-  title: 'Permanently delete JMX Credentials?',
-  label: 'Delete JMX Credentials',
+export const DeleteCredentials: DeleteOrDisableWarning = {
+  id: DeleteOrDisableWarningType.DeleteCredentials,
+  title: 'Permanently delete Credentials?',
+  label: 'Delete Credentials',
   description: `Credential data for this target will be lost.`,
-  ariaLabel: 'JMX Credentials delete warning',
+  ariaLabel: 'Credentials delete warning',
 };
 
 export const DeleteCustomTargets: DeleteOrDisableWarning = {
@@ -144,7 +144,7 @@ export const DeleteWarningKinds: DeleteOrDisableWarning[] = [
   DeleteEventTemplates,
   DeleteProbeTemplates,
   DeleteActiveProbes,
-  DeleteJMXCredentials,
+  DeleteCredentials,
   DeleteCustomTargets,
   DeleteDashboardLayout,
 ];
diff --git a/src/app/Rules/CreateRule.tsx b/src/app/Rules/CreateRule.tsx
index 631500859..a68819ef1 100644
--- a/src/app/Rules/CreateRule.tsx
+++ b/src/app/Rules/CreateRule.tsx
@@ -37,15 +37,17 @@
  */
 import { BreadcrumbPage, BreadcrumbTrail } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { EventTemplate } from '@app/CreateRecording/CreateRecording';
-import { authFailMessage, ErrorView, isAuthFail } from '@app/ErrorView/ErrorView';
 import { NotificationsContext } from '@app/Notifications/Notifications';
-import { MatchExpressionEvaluator } from '@app/Shared/MatchExpressionEvaluator';
+import { MatchExpressionHint } from '@app/Shared/MatchExpression/MatchExpressionHint';
+import { MatchExpressionVisualizer } from '@app/Shared/MatchExpression/MatchExpressionVisualizer';
 import { LoadingPropsType } from '@app/Shared/ProgressIndicator';
 import { TemplateType } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { NO_TARGET, Target } from '@app/Shared/Services/Target.service';
+import { Target } from '@app/Shared/Services/Target.service';
 import { SelectTemplateSelectorForm } from '@app/TemplateSelector/SelectTemplateSelectorForm';
+import { SearchExprService, SearchExprServiceContext } from '@app/Topology/Shared/utils';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { evaluateTargetWithExpr } from '@app/utils/utils';
 import {
   ActionGroup,
   Button,
@@ -57,34 +59,42 @@ import {
   FormSelectOption,
   Grid,
   GridItem,
+  Popover,
   Split,
   SplitItem,
   Switch,
   Text,
+  TextArea,
   TextInput,
   TextVariants,
   ValidatedOptions,
 } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+import _ from 'lodash';
 import * as React from 'react';
 import { useHistory, withRouter } from 'react-router-dom';
-import { BehaviorSubject, iif } from 'rxjs';
-import { first, map, mergeMap } from 'rxjs/operators';
+import { forkJoin, iif, of, Subject } from 'rxjs';
+import { catchError, debounceTime, map, switchMap } from 'rxjs/operators';
 import { Rule } from './Rules';
 
 // FIXME check if this is correct/matches backend name validation
 export const RuleNamePattern = /^[\w_]+$/;
 
-const Comp: React.FC = () => {
+interface CreateRuleFormProps {}
+
+const CreateRuleForm: React.FC<CreateRuleFormProps> = ({ ...props }) => {
   const context = React.useContext(ServiceContext);
   const notifications = React.useContext(NotificationsContext);
   const history = useHistory();
+  // Note: Do not use useSearchExpression(). This causes the cursor to jump to the end due to async updates.
+  const matchExprService = React.useContext(SearchExprServiceContext);
+  const [matchExpression, setMatchExpression] = React.useState('');
   const addSubscription = useSubscriptions();
 
   const [name, setName] = React.useState('');
   const [nameValid, setNameValid] = React.useState(ValidatedOptions.default);
   const [description, setDescription] = React.useState('');
   const [enabled, setEnabled] = React.useState(true);
-  const [matchExpression, setMatchExpression] = React.useState('');
   const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
   const [templates, setTemplates] = React.useState([] as EventTemplate[]);
   const [templateName, setTemplateName] = React.useState<string | undefined>(undefined);
@@ -98,17 +108,11 @@ const Comp: React.FC = () => {
   const [initialDelay, setInitialDelay] = React.useState(0);
   const [initialDelayUnits, setInitialDelayUnits] = React.useState(1);
   const [preservedArchives, setPreservedArchives] = React.useState(0);
-  const [errorMessage, setErrorMessage] = React.useState('');
   const [loading, setLoading] = React.useState(false);
+  const [targets, setTargets] = React.useState<Target[]>([]);
 
-  const targetSubject = React.useRef(new BehaviorSubject(NO_TARGET)).current;
-
-  const handleTargetChange = React.useCallback(
-    (target: Target) => {
-      targetSubject.next(target);
-    },
-    [targetSubject]
-  );
+  const matchedTargetsRef = React.useRef(new Subject<Target[]>());
+  const matchedTargets = matchedTargetsRef.current;
 
   const handleNameChange = React.useCallback(
     (name) => {
@@ -176,8 +180,6 @@ const Comp: React.FC = () => {
     [setPreservedArchives]
   );
 
-  const handleError = React.useCallback((error) => setErrorMessage(error.message), [setErrorMessage]);
-
   const handleSubmit = React.useCallback((): void => {
     setLoading(true);
     const notificationMessages: string[] = [];
@@ -232,60 +234,69 @@ const Comp: React.FC = () => {
     maxSizeUnits,
   ]);
 
-  const handleTemplateList = React.useCallback(
-    (templates: EventTemplate[]) => {
-      setTemplates(templates);
-      setErrorMessage('');
-    },
-    [setTemplates, setErrorMessage]
-  );
-
-  const refreshTemplateList = React.useCallback(() => {
+  React.useEffect(() => {
     addSubscription(
-      targetSubject
+      matchedTargets
         .pipe(
-          mergeMap((target) =>
+          debounceTime(100),
+          switchMap((targets) =>
             iif(
-              () => target !== NO_TARGET,
-              context.api.doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`),
-              context.api
-                .doGet<EventTemplate[]>(`targets/localhost:0/templates`)
-                .pipe(
-                  map((templates) =>
-                    templates.filter((template) => template.provider !== 'Cryostat' || template.name !== 'Cryostat')
-                  )
+              () => targets.length > 0,
+              forkJoin(
+                targets.map((t) =>
+                  context.api
+                    .doGet<EventTemplate[]>(
+                      `targets/${encodeURIComponent(t.connectUrl)}/templates`,
+                      'v1',
+                      undefined,
+                      true,
+                      true
+                    )
+                    .pipe(
+                      catchError((_) => of<EventTemplate[]>([])) // Fail silently
+                    )
                 )
+              ).pipe(
+                map((allTemplates) => {
+                  const allFiltered = allTemplates.filter((ts) => ts.length);
+                  return allFiltered.length
+                    ? allFiltered.reduce((acc, curr) => _.intersectionWith(acc, curr, _.isEqual))
+                    : [];
+                })
+              ),
+              of([])
             )
-          ),
-          first()
+          )
         )
-        .subscribe({
-          next: handleTemplateList,
-          error: handleError,
-        })
+        .subscribe(setTemplates)
     );
-  }, [addSubscription, context.api, targetSubject, handleError, handleTemplateList]);
+  }, [addSubscription, context.api, matchedTargets]);
 
   React.useEffect(() => {
-    addSubscription(targetSubject.subscribe(refreshTemplateList));
-  }, [addSubscription, targetSubject, refreshTemplateList]);
+    addSubscription(context.targets.targets().subscribe(setTargets));
+  }, [addSubscription, context.targets, setTargets]);
 
-  // Note: authFailure can be reused
-  // since no operation on global target selection is done here.
   React.useEffect(() => {
-    addSubscription(
-      context.target.authFailure().subscribe(() => {
-        setErrorMessage(authFailMessage);
-      })
-    );
-  }, [addSubscription, context.target, setErrorMessage]);
-
-  const breadcrumbs: BreadcrumbTrail[] = [
-    {
-      title: 'Automated Rules',
-      path: '/rules',
-    },
-  ];
+    // Set validations
+    let validation: ValidatedOptions = ValidatedOptions.default;
+    let matches: Target[] = [];
+    if (matchExpression !== '' && targets.length > 0) {
+      try {
+        matches = targets.filter((t) => {
+          const res = evaluateTargetWithExpr(t, matchExpression);
+          if (typeof res === 'boolean') {
+            return res;
+          }
+          throw new Error('Invalid match expression');
+        });
+        validation = matches.length ? ValidatedOptions.success : ValidatedOptions.warning;
+      } catch (err) {
+        validation = ValidatedOptions.error;
+      }
+    }
+    setMatchExpressionValid(validation);
+    matchedTargets.next(matches);
+  }, [matchExpression, targets, matchedTargets, setMatchExpressionValid, setTemplateName]);
 
   const createButtonLoadingProps = React.useMemo(
     () =>
@@ -304,305 +315,338 @@ const Comp: React.FC = () => {
     return '';
   }, [templateName, templateType]);
 
-  const authRetry = React.useCallback(() => {
-    context.target.setAuthRetry();
-  }, [context.target]);
+  return (
+    <Form {...props}>
+      <Text component={TextVariants.small}>
+        Automated Rules are configurations that instruct Cryostat to create JDK Flight Recordings on matching target JVM
+        applications. Each Automated Rule specifies parameters for which Event Template to use, how much data should be
+        kept in the application recording buffer, and how frequently Cryostat should copy the application recording
+        buffer into Cryostat&apos;s own archived storage.
+      </Text>
+      <FormGroup
+        label="Name"
+        isRequired
+        fieldId="rule-name"
+        helperText="Enter a rule name."
+        helperTextInvalid="A rule name may only contain letters, numbers, and underscores."
+        validated={nameValid}
+      >
+        <TextInput
+          value={name}
+          isDisabled={loading}
+          isRequired
+          type="text"
+          id="rule-name"
+          aria-describedby="rule-name-helper"
+          onChange={handleNameChange}
+          validated={nameValid}
+        />
+      </FormGroup>
+      <FormGroup
+        label="Description"
+        fieldId="rule-description"
+        helperText="Enter a rule description. This is only used for display purposes to aid in identifying rules and their intentions."
+      >
+        <TextArea
+          value={description}
+          isDisabled={loading}
+          type="text"
+          id="rule-description"
+          aria-describedby="rule-description-helper"
+          resizeOrientation="vertical"
+          autoResize
+          onChange={setDescription}
+        />
+      </FormGroup>
+      <FormGroup
+        label="Match Expression"
+        labelIcon={
+          <Popover
+            headerContent="Match Expression Hint"
+            bodyContent={
+              <>
+                Try an expression like:
+                <MatchExpressionHint target={targets[0]} />
+              </>
+            }
+            hasAutoWidth
+          >
+            <Button
+              variant="plain"
+              aria-label="More info for match expression field"
+              onClick={(e) => e.preventDefault()}
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon />
+            </Button>
+          </Popover>
+        }
+        isRequired
+        fieldId="rule-matchexpr"
+        helperText={
+          matchExpressionValid === ValidatedOptions.warning
+            ? `Warning: Match expression matches no targets.`
+            : `
+  Enter a match expression. This is a Java-like code snippet that is evaluated against each target
+  application to determine whether the rule should be applied. Select a target from the dropdown
+  on the right to view the context object available within the match expression context and test
+  if the expression matches.`
+        }
+        helperTextInvalid="Invalid Match Expression."
+        validated={matchExpressionValid}
+      >
+        <TextArea
+          value={matchExpression}
+          isDisabled={loading}
+          isRequired
+          type="text"
+          id="rule-matchexpr"
+          aria-describedby="rule-matchexpr-helper"
+          resizeOrientation="vertical"
+          autoResize
+          onChange={(value) => {
+            setMatchExpression(value);
+            matchExprService.setSearchExpression(value);
+          }}
+          validated={matchExpressionValid}
+        />
+      </FormGroup>
+      <FormGroup
+        label="Enabled"
+        isRequired
+        fieldId="rule-enabled"
+        helperText={`Rules take effect when created if enabled and will be matched against all
+discovered target applications immediately. When new target applications appear they are
+checked against all enabled rules. Disabled rules have no effect but are available to be
+enabled in the future.`}
+      >
+        <Switch
+          id="rule-enabled"
+          isDisabled={loading}
+          aria-label="Apply this rule to matching targets"
+          isChecked={enabled}
+          onChange={setEnabled}
+        />
+      </FormGroup>
+      <FormGroup
+        label="Template"
+        isRequired
+        fieldId="recording-template"
+        validated={!templateName ? ValidatedOptions.default : ValidatedOptions.success}
+        helperText="The Event Template to be applied by this Rule against matching target applications."
+        helperTextInvalid="A Template must be selected"
+      >
+        <SelectTemplateSelectorForm
+          selected={selectedSpecifier}
+          disabled={loading}
+          validated={!templateName ? ValidatedOptions.default : ValidatedOptions.success}
+          templates={templates}
+          onSelect={handleTemplateChange}
+        />
+      </FormGroup>
+      <FormGroup
+        label="Maximum Size"
+        fieldId="maxSize"
+        helperText="The maximum size of recording data retained in the target application's recording buffer."
+      >
+        <Split hasGutter={true}>
+          <SplitItem isFilled>
+            <TextInput
+              value={maxSize}
+              isDisabled={loading}
+              isRequired
+              type="number"
+              id="maxSize"
+              aria-label="max size value"
+              onChange={handleMaxSizeChange}
+              min="0"
+            />
+          </SplitItem>
+          <SplitItem>
+            <FormSelect
+              value={maxSizeUnits}
+              isDisabled={loading}
+              onChange={handleMaxSizeUnitChange}
+              aria-label="Max size units input"
+            >
+              <FormSelectOption key="1" value="1" label="B" />
+              <FormSelectOption key="2" value={1024} label="KiB" />
+              <FormSelectOption key="3" value={1024 * 1024} label="MiB" />
+            </FormSelect>
+          </SplitItem>
+        </Split>
+      </FormGroup>
+      <FormGroup
+        label="Maximum Age"
+        fieldId="maxAge"
+        helperText="The maximum age of recording data retained in the target application's recording buffer."
+      >
+        <Split hasGutter={true}>
+          <SplitItem isFilled>
+            <TextInput
+              value={maxAge}
+              isDisabled={loading}
+              isRequired
+              type="number"
+              id="maxAge"
+              aria-label="Max age duration"
+              onChange={handleMaxAgeChange}
+              min="0"
+            />
+          </SplitItem>
+          <SplitItem>
+            <FormSelect
+              value={maxAgeUnits}
+              isDisabled={loading}
+              onChange={handleMaxAgeUnitChange}
+              aria-label="Max Age units Input"
+            >
+              <FormSelectOption key="1" value="1" label="Seconds" />
+              <FormSelectOption key="2" value={60} label="Minutes" />
+              <FormSelectOption key="3" value={60 * 60} label="Hours" />
+            </FormSelect>
+          </SplitItem>
+        </Split>
+      </FormGroup>
+      <FormGroup
+        label="Archival Period"
+        fieldId="archivalPeriod"
+        helperText="Time between copies of active recording data being pulled into Cryostat archive storage."
+      >
+        <Split hasGutter={true}>
+          <SplitItem isFilled>
+            <TextInput
+              value={archivalPeriod}
+              isDisabled={loading}
+              isRequired
+              type="number"
+              id="archivalPeriod"
+              aria-label="archival period"
+              onChange={handleArchivalPeriodChange}
+              min="0"
+            />
+          </SplitItem>
+          <SplitItem>
+            <FormSelect
+              value={archivalPeriodUnits}
+              isDisabled={loading}
+              onChange={handleArchivalPeriodUnitsChange}
+              aria-label="archival period units input"
+            >
+              <FormSelectOption key="1" value="1" label="Seconds" />
+              <FormSelectOption key="2" value={60} label="Minutes" />
+              <FormSelectOption key="3" value={60 * 60} label="Hours" />
+            </FormSelect>
+          </SplitItem>
+        </Split>
+      </FormGroup>
+      <FormGroup
+        label="Initial Delay"
+        fieldId="initialDelay"
+        helperText="Initial delay before archiving starts. The first archived copy will be made this long after the recording is started. The second archived copy will occur one Archival Period later."
+      >
+        <Split hasGutter={true}>
+          <SplitItem isFilled>
+            <TextInput
+              value={initialDelay}
+              isDisabled={loading}
+              isRequired
+              type="number"
+              id="initialDelay"
+              aria-label="initial delay"
+              onChange={handleInitialDelayChange}
+              min="0"
+            />
+          </SplitItem>
+          <SplitItem>
+            <FormSelect
+              value={initialDelayUnits}
+              isDisabled={loading}
+              onChange={handleInitialDelayUnitsChanged}
+              aria-label="initial delay units input"
+            >
+              <FormSelectOption key="1" value="1" label="Seconds" />
+              <FormSelectOption key="2" value={60} label="Minutes" />
+              <FormSelectOption key="3" value={60 * 60} label="Hours" />
+            </FormSelect>
+          </SplitItem>
+        </Split>
+      </FormGroup>
+      <FormGroup
+        label="Preserved Archives"
+        fieldId="preservedArchives"
+        helperText="The number of archived recording copies to preserve in archives for each target application affected by this rule."
+      >
+        <TextInput
+          value={preservedArchives}
+          isDisabled={loading}
+          isRequired
+          type="number"
+          id="preservedArchives"
+          aria-label="preserved archives"
+          onChange={handlePreservedArchivesChange}
+          min="0"
+        />
+      </FormGroup>
+      <ActionGroup>
+        <Button
+          variant="primary"
+          onClick={handleSubmit}
+          isDisabled={
+            loading || nameValid !== ValidatedOptions.success || !templateName || !templateType || !matchExpression
+          }
+          {...createButtonLoadingProps}
+        >
+          {loading ? 'Creating' : 'Create'}
+        </Button>
+        <Button variant="secondary" onClick={history.goBack} isAriaDisabled={loading}>
+          Cancel
+        </Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+const Comp: React.FC = () => {
+  const matchExpreRef = React.useRef(new SearchExprService());
+  const breadcrumbs: BreadcrumbTrail[] = React.useMemo(
+    () => [
+      {
+        title: 'Automated Rules',
+        path: '/rules',
+      },
+    ],
+    []
+  );
+
+  const gridStyles: React.CSSProperties = React.useMemo(
+    () => ({
+      // viewportHeight - masterheadHeight - pageSectionPadding - breadcrumbHeight
+      height: 'calc(100vh - 4.375rem - 48px - 1.5rem)',
+    }),
+    []
+  );
 
   return (
     <BreadcrumbPage pageTitle="Create" breadcrumbs={breadcrumbs}>
-      <Grid hasGutter>
-        <GridItem xl={7}>
-          {errorMessage ? (
-            <ErrorView
-              title={'Error retrieving event templates'}
-              message={errorMessage}
-              retry={isAuthFail(errorMessage) ? authRetry : undefined}
-            />
-          ) : (
-            <Card>
-              <CardBody>
-                <Form>
-                  <Text component={TextVariants.small}>
-                    Automated Rules are configurations that instruct Cryostat to create JDK Flight Recordings on
-                    matching target JVM applications. Each Automated Rule specifies parameters for which Event Template
-                    to use, how much data should be kept in the application recording buffer, and how frequently
-                    Cryostat should copy the application recording buffer into Cryostat&apos;s own archived storage.
-                  </Text>
-                  <FormGroup
-                    label="Name"
-                    isRequired
-                    fieldId="rule-name"
-                    helperText="Enter a rule name."
-                    helperTextInvalid="A rule name may only contain letters, numbers, and underscores."
-                    validated={nameValid}
-                  >
-                    <TextInput
-                      value={name}
-                      isDisabled={loading}
-                      isRequired
-                      type="text"
-                      id="rule-name"
-                      aria-describedby="rule-name-helper"
-                      onChange={handleNameChange}
-                      validated={nameValid}
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label="Description"
-                    fieldId="rule-description"
-                    helperText="Enter a rule description. This is only used for display purposes to aid in identifying rules and their intentions."
-                  >
-                    <TextInput
-                      value={description}
-                      isDisabled={loading}
-                      type="text"
-                      id="rule-description"
-                      aria-describedby="rule-description-helper"
-                      onChange={setDescription}
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label="Match Expression"
-                    isRequired
-                    fieldId="rule-matchexpr"
-                    helperText={`
-                      Enter a match expression. This is a Java-like code snippet that is evaluated against each target
-                      application to determine whether the rule should be applied. Select a target from the dropdown
-                      on the right to view the context object available within the match expression context and test
-                      if the expression matches.`}
-                    helperTextInvalid="Invalid Match Expression."
-                    validated={matchExpressionValid}
-                  >
-                    <TextInput
-                      value={matchExpression}
-                      isDisabled={loading}
-                      isRequired
-                      type="text"
-                      id="rule-matchexpr"
-                      aria-describedby="rule-matchexpr-helper"
-                      placeholder={
-                        targetSubject.value === NO_TARGET
-                          ? undefined
-                          : `target.connectUrl == '${targetSubject.value.connectUrl}'`
-                      }
-                      onChange={setMatchExpression}
-                      validated={matchExpressionValid}
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label="Enabled"
-                    isRequired
-                    fieldId="rule-enabled"
-                    helperText={`Rules take effect when created if enabled and will be matched against all
-                  discovered target applications immediately. When new target applications appear they are
-                  checked against all enabled rules. Disabled rules have no effect but are available to be
-                  enabled in the future.`}
-                  >
-                    <Switch
-                      id="rule-enabled"
-                      isDisabled={loading}
-                      aria-label="Apply this rule to matching targets"
-                      isChecked={enabled}
-                      onChange={setEnabled}
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label="Template"
-                    isRequired
-                    fieldId="recording-template"
-                    validated={!templateName ? ValidatedOptions.default : ValidatedOptions.success}
-                    helperText="The Event Template to be applied by this Rule against matching target applications."
-                    helperTextInvalid="A Template must be selected"
-                  >
-                    <SelectTemplateSelectorForm
-                      selected={selectedSpecifier}
-                      disabled={loading}
-                      validated={!templateName ? ValidatedOptions.default : ValidatedOptions.success}
-                      templates={templates}
-                      onSelect={handleTemplateChange}
-                    />
-                  </FormGroup>
-                  <FormGroup
-                    label="Maximum Size"
-                    fieldId="maxSize"
-                    helperText="The maximum size of recording data retained in the target application's recording buffer."
-                  >
-                    <Split hasGutter={true}>
-                      <SplitItem isFilled>
-                        <TextInput
-                          value={maxSize}
-                          isDisabled={loading}
-                          isRequired
-                          type="number"
-                          id="maxSize"
-                          aria-label="max size value"
-                          onChange={handleMaxSizeChange}
-                          min="0"
-                        />
-                      </SplitItem>
-                      <SplitItem>
-                        <FormSelect
-                          value={maxSizeUnits}
-                          isDisabled={loading}
-                          onChange={handleMaxSizeUnitChange}
-                          aria-label="Max size units input"
-                        >
-                          <FormSelectOption key="1" value="1" label="B" />
-                          <FormSelectOption key="2" value={1024} label="KiB" />
-                          <FormSelectOption key="3" value={1024 * 1024} label="MiB" />
-                        </FormSelect>
-                      </SplitItem>
-                    </Split>
-                  </FormGroup>
-                  <FormGroup
-                    label="Maximum Age"
-                    fieldId="maxAge"
-                    helperText="The maximum age of recording data retained in the target application's recording buffer."
-                  >
-                    <Split hasGutter={true}>
-                      <SplitItem isFilled>
-                        <TextInput
-                          value={maxAge}
-                          isDisabled={loading}
-                          isRequired
-                          type="number"
-                          id="maxAge"
-                          aria-label="Max age duration"
-                          onChange={handleMaxAgeChange}
-                          min="0"
-                        />
-                      </SplitItem>
-                      <SplitItem>
-                        <FormSelect
-                          value={maxAgeUnits}
-                          isDisabled={loading}
-                          onChange={handleMaxAgeUnitChange}
-                          aria-label="Max Age units Input"
-                        >
-                          <FormSelectOption key="1" value="1" label="Seconds" />
-                          <FormSelectOption key="2" value={60} label="Minutes" />
-                          <FormSelectOption key="3" value={60 * 60} label="Hours" />
-                        </FormSelect>
-                      </SplitItem>
-                    </Split>
-                  </FormGroup>
-                  <FormGroup
-                    label="Archival Period"
-                    fieldId="archivalPeriod"
-                    helperText="Time between copies of active recording data being pulled into Cryostat archive storage."
-                  >
-                    <Split hasGutter={true}>
-                      <SplitItem isFilled>
-                        <TextInput
-                          value={archivalPeriod}
-                          isDisabled={loading}
-                          isRequired
-                          type="number"
-                          id="archivalPeriod"
-                          aria-label="archival period"
-                          onChange={handleArchivalPeriodChange}
-                          min="0"
-                        />
-                      </SplitItem>
-                      <SplitItem>
-                        <FormSelect
-                          value={archivalPeriodUnits}
-                          isDisabled={loading}
-                          onChange={handleArchivalPeriodUnitsChange}
-                          aria-label="archival period units input"
-                        >
-                          <FormSelectOption key="1" value="1" label="Seconds" />
-                          <FormSelectOption key="2" value={60} label="Minutes" />
-                          <FormSelectOption key="3" value={60 * 60} label="Hours" />
-                        </FormSelect>
-                      </SplitItem>
-                    </Split>
-                  </FormGroup>
-                  <FormGroup
-                    label="Initial Delay"
-                    fieldId="initialDelay"
-                    helperText="Initial delay before archiving starts. The first archived copy will be made this long after the recording is started. The second archived copy will occur one Archival Period later."
-                  >
-                    <Split hasGutter={true}>
-                      <SplitItem isFilled>
-                        <TextInput
-                          value={initialDelay}
-                          isDisabled={loading}
-                          isRequired
-                          type="number"
-                          id="initialDelay"
-                          aria-label="initial delay"
-                          onChange={handleInitialDelayChange}
-                          min="0"
-                        />
-                      </SplitItem>
-                      <SplitItem>
-                        <FormSelect
-                          value={initialDelayUnits}
-                          isDisabled={loading}
-                          onChange={handleInitialDelayUnitsChanged}
-                          aria-label="initial delay units input"
-                        >
-                          <FormSelectOption key="1" value="1" label="Seconds" />
-                          <FormSelectOption key="2" value={60} label="Minutes" />
-                          <FormSelectOption key="3" value={60 * 60} label="Hours" />
-                        </FormSelect>
-                      </SplitItem>
-                    </Split>
-                  </FormGroup>
-                  <FormGroup
-                    label="Preserved Archives"
-                    fieldId="preservedArchives"
-                    helperText="The number of archived recording copies to preserve in archives for each target application affected by this rule."
-                  >
-                    <TextInput
-                      value={preservedArchives}
-                      isDisabled={loading}
-                      isRequired
-                      type="number"
-                      id="preservedArchives"
-                      aria-label="preserved archives"
-                      onChange={handlePreservedArchivesChange}
-                      min="0"
-                    />
-                  </FormGroup>
-                  <ActionGroup>
-                    <Button
-                      variant="primary"
-                      onClick={handleSubmit}
-                      isDisabled={
-                        loading ||
-                        nameValid !== ValidatedOptions.success ||
-                        !templateName ||
-                        !templateType ||
-                        !matchExpression
-                      }
-                      {...createButtonLoadingProps}
-                    >
-                      {loading ? 'Creating' : 'Create'}
-                    </Button>
-                    <Button variant="secondary" onClick={history.goBack} isAriaDisabled={loading}>
-                      Cancel
-                    </Button>
-                  </ActionGroup>
-                </Form>
+      <SearchExprServiceContext.Provider value={matchExpreRef.current} data-full-height>
+        <Grid hasGutter style={gridStyles}>
+          <GridItem xl={5} order={{ xl: '0', default: '1' }}>
+            <Card isFullHeight>
+              <CardBody className="overflow-auto">
+                <CreateRuleForm />
+              </CardBody>
+            </Card>
+          </GridItem>
+          <GridItem xl={7} order={{ xl: '1', default: '0' }}>
+            <Card isFullHeight>
+              <CardBody className="overflow-auto">
+                <MatchExpressionVisualizer />
               </CardBody>
             </Card>
-          )}
-        </GridItem>
-        <GridItem xl={5}>
-          <Card>
-            <CardBody>
-              <MatchExpressionEvaluator
-                inlineHint
-                matchExpression={matchExpression}
-                onChange={setMatchExpressionValid}
-                onTargetChange={handleTargetChange}
-              />
-            </CardBody>
-          </Card>
-        </GridItem>
-      </Grid>
+          </GridItem>
+        </Grid>
+      </SearchExprServiceContext.Provider>
     </BreadcrumbPage>
   );
 };
diff --git a/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
new file mode 100644
index 000000000..30a1ca8df
--- /dev/null
+++ b/src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx
@@ -0,0 +1,227 @@
+/*
+ * 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 { 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 {
+  Button,
+  Card,
+  CardBody,
+  FormGroup,
+  Grid,
+  GridItem,
+  Modal,
+  ModalVariant,
+  Popover,
+  TextArea,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+
+export interface CreateCredentialModalProps {
+  visible: boolean;
+  onDismiss: () => void;
+  onPropsSave: () => void;
+}
+
+export const CreateCredentialModal: React.FunctionComponent<CreateCredentialModalProps> = ({
+  visible,
+  onDismiss,
+  onPropsSave,
+  ...props
+}) => {
+  const matchExpreRef = React.useRef(new SearchExprService());
+  const [inProgress, setInProgress] = React.useState(false);
+
+  const alertOptions = React.useMemo(() => ({ hideActions: true }), []);
+
+  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>
+  );
+};
+
+interface AuthFormProps extends CreateCredentialModalProps {
+  progressChange?: (inProgress: boolean) => void;
+}
+
+export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, progressChange, ...props }) => {
+  const context = React.useContext(ServiceContext);
+  const addSubscription = useSubscriptions();
+  const matchExprService = React.useContext(SearchExprServiceContext);
+  const [matchExpression, setMatchExpression] = React.useState('');
+  const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
+  const [loading, setLoading] = React.useState(false);
+
+  const [targets, setTargets] = React.useState<Target[]>([]);
+
+  const onSave = React.useCallback(
+    (username: string, password: string) => {
+      setLoading(true);
+      addSubscription(
+        context.api.postCredentials(matchExpression, username, password).subscribe((ok) => {
+          setLoading(false);
+          if (ok) {
+            onPropsSave();
+          }
+        })
+      );
+    },
+    [addSubscription, onPropsSave, context.api, matchExpression, setLoading]
+  );
+
+  React.useEffect(() => {
+    progressChange && progressChange(loading);
+  }, [loading, progressChange]);
+
+  React.useEffect(() => {
+    addSubscription(context.targets.targets().subscribe(setTargets));
+  }, [addSubscription, context.targets, setTargets]);
+
+  React.useEffect(() => {
+    let validation: ValidatedOptions = ValidatedOptions.default;
+    if (matchExpression !== '' && targets.length > 0) {
+      try {
+        const atLeastOne = targets.some((t) => evaluateTargetWithExpr(t, matchExpression));
+        validation = atLeastOne ? ValidatedOptions.success : ValidatedOptions.warning;
+      } catch (err) {
+        validation = ValidatedOptions.error;
+      }
+    }
+    setMatchExpressionValid(validation);
+  }, [matchExpression, targets, setMatchExpressionValid]);
+
+  return (
+    <CredentialAuthForm {...props} onSave={onSave} onDismiss={onDismiss} focus={false} loading={loading}>
+      <FormGroup
+        label="Match Expression"
+        labelIcon={
+          <Popover
+            headerContent="Match Expression Hint"
+            bodyContent={
+              <>
+                Try an expression like:
+                <MatchExpressionHint target={targets[0]} />
+              </>
+            }
+            hasAutoWidth
+          >
+            <Button
+              variant="plain"
+              aria-label="More info for match expression field"
+              onClick={(e) => e.preventDefault()}
+              className="pf-c-form__group-label-help"
+            >
+              <HelpIcon />
+            </Button>
+          </Popover>
+        }
+        isRequired
+        fieldId="match-expression"
+        helperText={
+          matchExpressionValid === ValidatedOptions.warning
+            ? `Warning: Match expression matches no targets.`
+            : `
+        Enter a match expression. This is a Java-like code snippet that is evaluated against each target
+        application to determine whether the rule should be applied. Select a target from the dropdown
+        on the right to view the context object available within the match expression context and test
+        if the expression matches.`
+        }
+        helperTextInvalid="Invalid Match Expression."
+        validated={matchExpressionValid}
+      >
+        <TextArea
+          value={matchExpression}
+          isDisabled={loading}
+          isRequired
+          type="text"
+          id="rule-matchexpr"
+          aria-describedby="rule-matchexpr-helper"
+          onChange={(v) => {
+            setMatchExpression(v);
+            matchExprService.setSearchExpression(v);
+          }}
+          validated={matchExpressionValid}
+          autoFocus
+          autoResize
+          resizeOrientation="vertical"
+        />
+      </FormGroup>
+    </CredentialAuthForm>
+  );
+};
diff --git a/src/app/SecurityPanel/Credentials/CreateJmxCredentialModal.tsx b/src/app/SecurityPanel/Credentials/CreateJmxCredentialModal.tsx
deleted file mode 100644
index 28e622018..000000000
--- a/src/app/SecurityPanel/Credentials/CreateJmxCredentialModal.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * 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 { JmxAuthForm } from '@app/AppLayout/JmxAuthForm';
-import { MatchExpressionEvaluator } from '@app/Shared/MatchExpressionEvaluator';
-import { ServiceContext } from '@app/Shared/Services/Services';
-import { NO_TARGET } from '@app/Shared/Services/Target.service';
-import { useSubscriptions } from '@app/utils/useSubscriptions';
-import { portalRoot } from '@app/utils/utils';
-import {
-  FormGroup,
-  Modal,
-  ModalVariant,
-  Text,
-  TextInput,
-  TextVariants,
-  ValidatedOptions,
-} from '@patternfly/react-core';
-import * as React from 'react';
-
-export interface CreateJmxCredentialModalProps {
-  visible: boolean;
-  onDismiss: () => void;
-  onPropsSave: () => void;
-}
-
-export const CreateJmxCredentialModal: React.FunctionComponent<CreateJmxCredentialModalProps> = ({
-  visible,
-  onDismiss,
-  onPropsSave,
-}) => {
-  const context = React.useContext(ServiceContext);
-  const addSubscription = useSubscriptions();
-  const [matchExpression, setMatchExpression] = React.useState('');
-  const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
-  const [loading, setLoading] = React.useState(false);
-  const [target, setTarget] = React.useState(NO_TARGET);
-
-  const onSave = React.useCallback(
-    (username: string, password: string) => {
-      setLoading(true);
-      addSubscription(
-        context.api.postCredentials(matchExpression, username, password).subscribe((ok) => {
-          setLoading(false);
-          if (ok) {
-            onPropsSave();
-          }
-        })
-      );
-    },
-    [addSubscription, onPropsSave, context.api, matchExpression, setLoading]
-  );
-
-  return (
-    <Modal
-      appendTo={portalRoot}
-      isOpen={visible}
-      variant={ModalVariant.large}
-      showClose={!loading}
-      onClose={onDismiss}
-      title="Store JMX Credentials"
-      description="Creates stored credentials for target JVMs according to various properties.
-        If a Target JVM requires JMX authentication, Cryostat will use stored credentials
-        when attempting to open JMX connections to the target."
-    >
-      <JmxAuthForm onSave={onSave} onDismiss={onDismiss} focus={false} loading={loading}>
-        <MatchExpressionEvaluator
-          matchExpression={matchExpression}
-          onChange={setMatchExpressionValid}
-          onTargetChange={setTarget}
-        />
-        <FormGroup
-          label="Match Expression"
-          isRequired
-          fieldId="match-expression"
-          helperText={
-            <Text component={TextVariants.small}>
-              Enter a match expression. This is a Java-like code snippet that is evaluated against each target
-              application to determine whether the rule should be applied. Select a target from the dropdown below to
-              view the context object available within the match expression context and test if the expression matches.
-            </Text>
-          }
-          validated={matchExpressionValid}
-        >
-          <TextInput
-            value={matchExpression}
-            isDisabled={loading}
-            isRequired
-            type="text"
-            id="rule-matchexpr"
-            aria-describedby="rule-matchexpr-helper"
-            placeholder={target === NO_TARGET ? undefined : `target.connectUrl == '${target.connectUrl}'`}
-            onChange={setMatchExpression}
-            validated={matchExpressionValid}
-            autoFocus
-          />
-        </FormGroup>
-      </JmxAuthForm>
-    </Modal>
-  );
-};
diff --git a/src/app/SecurityPanel/Credentials/StoreJmxCredentials.tsx b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
similarity index 93%
rename from src/app/SecurityPanel/Credentials/StoreJmxCredentials.tsx
rename to src/app/SecurityPanel/Credentials/StoreCredentials.tsx
index 9f8f62e7f..dadc12933 100644
--- a/src/app/SecurityPanel/Credentials/StoreJmxCredentials.tsx
+++ b/src/app/SecurityPanel/Credentials/StoreCredentials.tsx
@@ -63,7 +63,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { concatMap, forkJoin, Observable, of } from 'rxjs';
 import { SecurityCard } from '../SecurityPanel';
-import { CreateJmxCredentialModal } from './CreateJmxCredentialModal';
+import { CreateCredentialModal } from './CreateCredentialModal';
 import { MatchedTargetsTable } from './MatchedTargetsTable';
 
 const enum Actions {
@@ -174,7 +174,7 @@ const reducer = (state, action) => {
   }
 };
 
-export const StoreJmxCredentials = () => {
+export const StoreCredentials = () => {
   const context = React.useContext(ServiceContext);
   const [state, dispatch] = React.useReducer(reducer, {
     credentials: [] as StoredCredential[],
@@ -275,7 +275,7 @@ export const StoreJmxCredentials = () => {
   }, [setShowAuthModal]);
 
   const handleDeleteButton = React.useCallback(() => {
-    if (context.settings.deletionDialogsEnabledFor(DeleteOrDisableWarningType.DeleteJMXCredentials)) {
+    if (context.settings.deletionDialogsEnabledFor(DeleteOrDisableWarningType.DeleteCredentials)) {
       setWarningModalOpen(true);
     } else {
       handleDeleteCredentials();
@@ -289,13 +289,13 @@ export const StoreJmxCredentials = () => {
   const TargetCredentialsToolbar = () => {
     const buttons = React.useMemo(() => {
       const arr = [
-        <Button key="add" variant="primary" aria-label="add-jmx-credential" onClick={handleAuthModalOpen}>
+        <Button key="add" variant="primary" aria-label="add-credential" onClick={handleAuthModalOpen}>
           Add
         </Button>,
         <Button
           key="delete"
           variant="danger"
-          aria-label="delete-selected-jmx-credential"
+          aria-label="delete-selected-credential"
           onClick={handleDeleteButton}
           isDisabled={!state.checkedCredentials.length}
         >
@@ -314,7 +314,7 @@ export const StoreJmxCredentials = () => {
     const deleteCredentialModal = React.useMemo(() => {
       return (
         <DeleteWarningModal
-          warningType={DeleteOrDisableWarningType.DeleteJMXCredentials}
+          warningType={DeleteOrDisableWarningType.DeleteCredentials}
           visible={warningModalOpen}
           onAccept={handleDeleteCredentials}
           onClose={handleWarningModalClose}
@@ -453,7 +453,7 @@ export const StoreJmxCredentials = () => {
     <>
       <TargetCredentialsToolbar />
       {content}
-      <CreateJmxCredentialModal
+      <CreateCredentialModal
         visible={showAuthModal}
         onDismiss={handleAuthModalClose}
         onPropsSave={handleAuthModalClose}
@@ -462,16 +462,16 @@ export const StoreJmxCredentials = () => {
   );
 };
 
-export const StoreJmxCredentialsCard: SecurityCard = {
-  title: 'Store JMX Credentials',
+export const StoreCredentialsCard: SecurityCard = {
+  title: 'Store Credentials',
   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.
+      Credentials that Cryostat uses to connect to Cryostat agents or 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,
+  content: StoreCredentials,
 };
diff --git a/src/app/SecurityPanel/SecurityPanel.tsx b/src/app/SecurityPanel/SecurityPanel.tsx
index 3104e41c2..f82a42915 100644
--- a/src/app/SecurityPanel/SecurityPanel.tsx
+++ b/src/app/SecurityPanel/SecurityPanel.tsx
@@ -38,13 +38,13 @@
 import { BreadcrumbPage } from '@app/BreadcrumbPage/BreadcrumbPage';
 import { Card, CardBody, CardTitle, Text, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
-import { StoreJmxCredentialsCard } from './Credentials/StoreJmxCredentials';
+import { StoreCredentialsCard } from './Credentials/StoreCredentials';
 import { ImportCertificate } from './ImportCertificate';
 
 export interface SecurityPanelProps {}
 
 export const SecurityPanel: React.FunctionComponent<SecurityPanelProps> = (_) => {
-  const securityCards = [ImportCertificate, StoreJmxCredentialsCard].map((c) => ({
+  const securityCards = [ImportCertificate, StoreCredentialsCard].map((c) => ({
     title: c.title,
     description: c.description,
     element: React.createElement(c.content, null),
diff --git a/src/app/Shared/MatchExpression/MatchExpressionHint.tsx b/src/app/Shared/MatchExpression/MatchExpressionHint.tsx
new file mode 100644
index 000000000..753c7b437
--- /dev/null
+++ b/src/app/Shared/MatchExpression/MatchExpressionHint.tsx
@@ -0,0 +1,90 @@
+/*
+ * 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 { ClipboardCopyButton, CodeBlock, CodeBlockAction, CodeBlockCode } from '@patternfly/react-core';
+import * as React from 'react';
+import { Target } from '../Services/Target.service';
+
+export interface MatchExpressionHintProps {
+  target?: Target;
+}
+
+export const MatchExpressionHint: React.FC<MatchExpressionHintProps> = ({ target, ...props }) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const exampleExpression = React.useMemo(() => {
+    let body: string;
+    if (!target || !target.alias || !target.connectUrl) {
+      body = 'true';
+    } else {
+      body = `target.alias == '${target.alias}' || target.annotations.cryostat['PORT'] == ${target.annotations?.cryostat['PORT']}`;
+    }
+    body = JSON.stringify(body, null, 2);
+    body = body.substring(1, body.length - 1);
+    return body;
+  }, [target]);
+
+  const onSaveToClipboard = React.useCallback(() => {
+    setCopied(true);
+    navigator.clipboard.writeText(exampleExpression);
+  }, [setCopied, exampleExpression]);
+
+  const actions = React.useMemo(() => {
+    return (
+      <CodeBlockAction>
+        <ClipboardCopyButton
+          id="match-expression-copy-button"
+          textId="match-expression-code-content"
+          aria-label="Copy to clipboard"
+          onClick={onSaveToClipboard}
+          exitDelay={copied ? 1500 : 600}
+          maxWidth="110px"
+          variant="plain"
+          onTooltipHidden={() => setCopied(false)}
+        >
+          {copied ? 'Copied!' : 'Click to copy to clipboard'}
+        </ClipboardCopyButton>
+      </CodeBlockAction>
+    );
+  }, [copied, onSaveToClipboard, setCopied]);
+
+  return (
+    <CodeBlock {...props} actions={actions}>
+      <CodeBlockCode>{exampleExpression}</CodeBlockCode>
+    </CodeBlock>
+  );
+};
diff --git a/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx b/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
new file mode 100644
index 000000000..f82efb374
--- /dev/null
+++ b/src/app/Shared/MatchExpression/MatchExpressionVisualizer.tsx
@@ -0,0 +1,420 @@
+/*
+ * 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 { TopologyControlBar } from '@app/Topology/GraphView/TopologyControlBar';
+import { SavedGraphPosition, SavedNodePosition } from '@app/Topology/GraphView/TopologyGraphView';
+import { getNodeById } from '@app/Topology/GraphView/UtilsFactory';
+import EntityDetails, { AlertOptions } from '@app/Topology/Shared/Entity/EntityDetails';
+import { useSearchExpression } from '@app/Topology/Shared/utils';
+import { TopologySideBar } from '@app/Topology/SideBar/TopologySideBar';
+import { NodeType } from '@app/Topology/typings';
+import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
+import { useSubscriptions } from '@app/utils/useSubscriptions';
+import { evaluateTargetWithExpr, hashCode } from '@app/utils/utils';
+import {
+  Bullseye,
+  DataList,
+  DataListCell,
+  DataListContent,
+  DataListItem,
+  DataListItemCells,
+  DataListItemRow,
+  DataListToggle,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateSecondaryActions,
+  EmptyStateVariant,
+  Flex,
+  FlexItem,
+  Radio,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { ContainerNodeIcon, SearchIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
+import {
+  action,
+  GraphElement,
+  GRAPH_POSITION_CHANGE_EVENT,
+  Model,
+  NODE_POSITIONED_EVENT,
+  SelectionEventListener,
+  SELECTION_EVENT,
+  TopologyView,
+  Visualization,
+  VisualizationProvider,
+  VisualizationSurface,
+} from '@patternfly/react-topology';
+import _ from 'lodash';
+import * as React from 'react';
+import { ServiceContext } from '../Services/Services';
+import { Target } from '../Services/Target.service';
+import { componentFactory, createTargetNode, layoutFactory, transformData } from './utils';
+
+export interface MatchExpressionVisualizerProps {
+  alertOptions?: AlertOptions;
+}
+
+export const MatchExpressionVisualizer: React.FC<MatchExpressionVisualizerProps> = ({ alertOptions, ...props }) => {
+  const [isGraph, setIsGraph] = React.useState(true);
+  return (
+    <Stack {...props} hasGutter>
+      <StackItem>
+        <LayoutRadioGroup onChange={setIsGraph} />
+      </StackItem>
+      <StackItem isFilled>
+        {isGraph ? <GraphView alertOptions={alertOptions} /> : <ListView alertOptions={alertOptions} />}
+      </StackItem>
+    </Stack>
+  );
+};
+
+interface LayoutRadioGroupProps {
+  onChange: (isGraph: boolean) => void;
+}
+
+const LayoutRadioGroup: React.FC<LayoutRadioGroupProps> = ({ onChange, ...props }) => {
+  const [isGraph, setIsGraph] = React.useState(true);
+  const configs = React.useMemo(
+    () => [
+      {
+        title: 'Graph View',
+        isGraph: true,
+      },
+      {
+        title: 'List View',
+        isGraph: false,
+      },
+    ],
+    []
+  );
+
+  React.useEffect(() => onChange(isGraph), [isGraph, onChange]);
+
+  return (
+    <Flex {...props} alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem spacer={{ default: 'spacerSm' }}>
+        <span style={{ fontWeight: '700' }}>Visualize via:</span>
+      </FlexItem>
+      {configs.map((conf) => (
+        <FlexItem key={conf.title}>
+          <Radio
+            isChecked={conf.isGraph === isGraph}
+            name={conf.title}
+            onChange={() => setIsGraph(conf.isGraph)}
+            label={conf.title}
+            id={conf.title}
+          />
+        </FlexItem>
+      ))}
+    </Flex>
+  );
+};
+
+const GraphView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
+  const addSubscription = useSubscriptions();
+  const context = React.useContext(ServiceContext);
+
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([]); // selectedIds is exactly matched by VisualizationSurface
+  const [selectedEntity, setSelectedEntity] = React.useState<GraphElement>();
+  const [targets, setTargets] = React.useState<Target[]>([]);
+
+  const _createVisualization = React.useCallback(() => {
+    const _newVisualization = new Visualization();
+
+    // Register factory for a layout variant
+    _newVisualization.registerLayoutFactory(layoutFactory);
+
+    // Register factory for each node variant
+    _newVisualization.registerComponentFactory(componentFactory);
+
+    // Selection event
+    _newVisualization.addEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
+      setSelectedIds(ids);
+      setSelectedEntity(ids[0] ? _newVisualization.getElementById(ids[0]) : undefined);
+    });
+
+    _newVisualization.addEventListener(
+      GRAPH_POSITION_CHANGE_EVENT,
+      _.debounce(() => {
+        const { graph } = _newVisualization.toModel();
+        if (graph) {
+          const saved: SavedGraphPosition = {
+            id: graph.id,
+            type: graph.type,
+            x: graph.x,
+            y: graph.y,
+            scale: graph.scale,
+            scaleExtent: graph.scaleExtent,
+          };
+          saveToLocalStorage('MATCH_EXPRES_VIS_GRAPH_POSITIONS', saved);
+        }
+      }, 200)
+    );
+
+    _newVisualization.addEventListener(
+      NODE_POSITIONED_EVENT,
+      _.debounce(() => {
+        const { nodes } = _newVisualization.toModel();
+        if (nodes) {
+          const savedPos: SavedNodePosition[] = nodes.map((n) => ({
+            id: n.id,
+            x: n.x,
+            y: n.y,
+            collapsed: n.collapsed,
+          }));
+          saveToLocalStorage('MATCH_EXPRES_VIS_NODE_POSITIONS', savedPos);
+        }
+      }, 200)
+    );
+
+    return _newVisualization;
+  }, [setSelectedIds, setSelectedEntity]);
+
+  const visualizationRef = React.useRef(_createVisualization());
+  const visualization = visualizationRef.current;
+
+  const targetNodes = React.useMemo(() => targets.map(createTargetNode), [targets]);
+  const _transformedData = React.useMemo(() => transformData(targetNodes), [targetNodes]);
+
+  React.useEffect(() => {
+    addSubscription(context.targets.targets().subscribe(setTargets));
+  }, [addSubscription, context.targets, setTargets]);
+
+  React.useEffect(() => {
+    const graphData: SavedGraphPosition = getFromLocalStorage('MATCH_EXPRES_VIS_GRAPH_POSITIONS', {});
+    const nodePositions: SavedNodePosition[] = getFromLocalStorage('MATCH_EXPRES_VIS_NODE_POSITIONS', []);
+
+    const model: Model = {
+      nodes: _transformedData.nodes.map((n) => {
+        const savedData = nodePositions.find((ps) => ps.id === n.id);
+        if (savedData) {
+          n = {
+            ...n,
+            x: savedData.x,
+            y: savedData.y,
+            collapsed: savedData.collapsed,
+          };
+        }
+        return n;
+      }),
+      edges: _transformedData.edges,
+      graph: {
+        id: 'cryostat-match-expression-visualizer',
+        type: 'graph',
+        layout: 'Grid',
+        data: {
+          id: hashCode(targetNodes.toString()),
+          name: 'Universe',
+          nodeType: NodeType.UNIVERSE,
+          labels: {},
+          children: targetNodes,
+        },
+        x: graphData.x,
+        y: graphData.y,
+        scale: graphData.scale,
+        scaleExtent: graphData.scaleExtent,
+      },
+    };
+
+    // Initialize the controller with model to create nodes
+    visualization.fromModel(model, false);
+
+    const _id = setTimeout(
+      action(() => {
+        if (!graphData.id || !graphData.x || !graphData.y) {
+          visualization.getGraph().fit();
+        }
+      })
+    );
+    return () => clearTimeout(_id);
+  }, [_transformedData, targetNodes, visualization]);
+
+  // Note: Do not reorder. Must be called after registering model
+  React.useEffect(() => {
+    // Clear selection when discovery tree is updated and entity (target) is lost
+    setSelectedIds((old) => {
+      if (!getNodeById(_transformedData.nodes, old[0])) {
+        setSelectedEntity(undefined);
+        return [];
+      }
+      setSelectedEntity(old[0] ? visualization.getElementById(old[0]) : undefined);
+      return old;
+    });
+  }, [setSelectedIds, setSelectedEntity, _transformedData, visualization]);
+
+  const handleDrawerClose = React.useCallback(() => setSelectedIds([]), [setSelectedIds]);
+
+  const sidebar = React.useMemo(() => {
+    if (!selectedEntity) {
+      return null;
+    }
+    return (
+      <TopologySideBar onClose={handleDrawerClose}>
+        <EntityDetails entity={selectedEntity} alertOptions={alertOptions} />
+      </TopologySideBar>
+    );
+  }, [handleDrawerClose, selectedEntity, alertOptions]);
+
+  return (
+    <TopologyView
+      {...props}
+      id="topology__visualization-container"
+      className={css('topology__main-container')}
+      controlBar={<TopologyControlBar visualization={visualization} noCollapse />}
+      sideBar={sidebar}
+      sideBarOpen={selectedIds.length > 0}
+      sideBarResizable={true}
+      minSideBarSize={`200px`}
+      defaultSideBarSize={`400px`}
+    >
+      <VisualizationProvider controller={visualization}>
+        <VisualizationSurface state={{ selectedIds }} />
+      </VisualizationProvider>
+    </TopologyView>
+  );
+};
+
+const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
+  const addSubscription = useSubscriptions();
+  const context = React.useContext(ServiceContext);
+  const [matchExpression] = useSearchExpression();
+  const [targets, setTargets] = React.useState<Target[]>([]);
+
+  const [expanded, setExpanded] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    addSubscription(context.targets.targets().subscribe(setTargets));
+  }, [addSubscription, context.targets, setTargets]);
+
+  const toggleExpand = React.useCallback(
+    (id: string) => {
+      setExpanded((old) => {
+        if (old.includes(id)) {
+          return old.filter((_id) => _id !== id);
+        }
+        return [...old, id];
+      });
+    },
+    [setExpanded]
+  );
+
+  const targetNodes = React.useMemo(() => targets.map(createTargetNode), [targets]);
+
+  const filtered = React.useMemo(
+    () =>
+      targetNodes.filter(({ target }) => {
+        if (!matchExpression) {
+          return true;
+        }
+        try {
+          const res = evaluateTargetWithExpr(target, matchExpression);
+          if (typeof res === 'boolean') {
+            return res;
+          }
+          return false;
+        } catch (err) {
+          return false;
+        }
+      }),
+    [targetNodes, matchExpression]
+  );
+
+  const content = React.useMemo(() => {
+    if (!filtered || !filtered.length) {
+      return (
+        <Bullseye>
+          <EmptyState variant={EmptyStateVariant.full}>
+            <EmptyStateIcon variant="container" component={SearchIcon} />
+            <Title headingLevel="h3" size="lg">
+              No Targets Matched
+            </Title>
+            <EmptyStateSecondaryActions>
+              <EmptyStateBody>Clear Match Expression and try again.</EmptyStateBody>
+            </EmptyStateSecondaryActions>
+          </EmptyState>
+        </Bullseye>
+      );
+    }
+    return filtered.map((tn) => {
+      const { connectUrl, alias } = tn.target;
+      return (
+        <DataListItem {...props} key={connectUrl} isExpanded={expanded.includes(connectUrl)}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggleExpand(connectUrl)}
+              isExpanded={expanded.includes(connectUrl)}
+              id={`${connectUrl}-expand-toggle`}
+              aria-controls={`${connectUrl}-expand`}
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <ContainerNodeIcon />
+                </DataListCell>,
+                <DataListCell key={`${connectUrl}-identifier`}>
+                  {!alias || alias === connectUrl ? `${connectUrl}` : `${alias} (${connectUrl})`}
+                </DataListCell>,
+              ]}
+            />
+          </DataListItemRow>
+          {expanded.includes(connectUrl) ? (
+            <DataListContent
+              aria-label={`${connectUrl} Details`}
+              id={`${connectUrl}-expand`}
+              isHidden={!expanded.includes(connectUrl)}
+            >
+              <EntityDetails
+                entity={{ getData: () => tn }}
+                columnModifier={{ default: '3Col' }}
+                alertOptions={alertOptions}
+              />
+            </DataListContent>
+          ) : null}
+        </DataListItem>
+      );
+    });
+  }, [filtered, expanded, toggleExpand, props, alertOptions]);
+
+  return (
+    <DataList aria-label={'Target List'} style={{ height: '100%' }}>
+      {content}
+    </DataList>
+  );
+};
diff --git a/src/app/Shared/MatchExpression/utils.tsx b/src/app/Shared/MatchExpression/utils.tsx
new file mode 100644
index 000000000..8d3c4970f
--- /dev/null
+++ b/src/app/Shared/MatchExpression/utils.tsx
@@ -0,0 +1,129 @@
+/*
+ * 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 CustomNode from '@app/Topology/GraphView/CustomNode';
+import { NodeType, TargetNode } from '@app/Topology/typings';
+import { hashCode } from '@app/utils/utils';
+import {
+  ComponentFactory,
+  DefaultEdge,
+  DefaultGroup,
+  EdgeModel,
+  Graph,
+  GraphComponent,
+  GridLayout,
+  Layout,
+  LayoutFactory,
+  ModelKind,
+  nodeDragSourceSpec,
+  NodeModel,
+  NodeShape,
+  withDragNode,
+  withPanZoom,
+  withSelection,
+} from '@patternfly/react-topology';
+import { Target } from '../Services/Target.service';
+
+export const layoutFactory: LayoutFactory = (type: string, graph: Graph): Layout | undefined => {
+  switch (type) {
+    case 'Grid':
+      return new GridLayout(graph, { layoutOnDrag: false });
+    default:
+      console.warn(`${type} layout is not supported`);
+      return undefined;
+  }
+};
+
+// This method lets you customize the components in your topology view (e.g. nodes, groups, and edges)
+export const componentFactory: ComponentFactory = (kind: ModelKind, type: string) => {
+  switch (type) {
+    case 'group':
+      return DefaultGroup;
+    default:
+      switch (kind) {
+        case ModelKind.graph:
+          return withPanZoom()(GraphComponent);
+        case ModelKind.node:
+          return withDragNode(nodeDragSourceSpec('node', false, false))(
+            withSelection({ multiSelect: false, controlled: true })(CustomNode)
+          );
+        case ModelKind.edge:
+          return DefaultEdge;
+        default:
+          return undefined;
+      }
+  }
+};
+
+export const createTargetNode = (target: Target): TargetNode => {
+  return {
+    id: hashCode(JSON.stringify(target)),
+    name: target.connectUrl,
+    nodeType: NodeType.TARGET,
+    labels: {},
+    target: target,
+  };
+};
+
+const DEFAULT_NODE_DIAMETER = 50;
+const DEFAULT_NODE_PADDINGS = [0, 35];
+
+export const transformData = (
+  targets: TargetNode[]
+): {
+  nodes: NodeModel[];
+  edges: EdgeModel[];
+} => {
+  return {
+    nodes: targets.map((tn) => ({
+      id: tn.target.connectUrl,
+      type: 'node',
+      label: tn.target.alias || tn.target.connectUrl,
+      shape: NodeShape.ellipse,
+      width: DEFAULT_NODE_DIAMETER,
+      height: DEFAULT_NODE_DIAMETER,
+      style: {
+        padding: DEFAULT_NODE_PADDINGS,
+      },
+      data: {
+        ...tn,
+      },
+    })),
+    edges: [],
+  };
+};
diff --git a/src/app/Shared/MatchExpressionEvaluator.tsx b/src/app/Shared/MatchExpressionEvaluator.tsx
deleted file mode 100644
index fd0dbee3a..000000000
--- a/src/app/Shared/MatchExpressionEvaluator.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-/*
- * 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 { SerializedTarget } from '@app/Shared/SerializedTarget';
-import { NO_TARGET, Target } from '@app/Shared/Services/Target.service';
-import { TargetSelect } from '@app/TargetSelect/TargetSelect';
-import { evaluateTargetWithExpr } from '@app/utils/utils';
-import {
-  ClipboardCopyButton,
-  CodeBlock,
-  CodeBlockAction,
-  CodeBlockCode,
-  Label,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
-  Text,
-  Tooltip,
-  ValidatedOptions,
-} from '@patternfly/react-core';
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  HelpIcon,
-  InfoCircleIcon,
-  WarningTriangleIcon,
-} from '@patternfly/react-icons';
-import * as React from 'react';
-
-export interface MatchExpressionEvaluatorProps {
-  inlineHint?: boolean;
-  matchExpression?: string;
-  onChange?: (validated: ValidatedOptions) => void;
-  onTargetChange?: (target: Target) => void;
-}
-
-export const MatchExpressionEvaluator: React.FC<MatchExpressionEvaluatorProps> = ({
-  inlineHint,
-  matchExpression,
-  onChange,
-  onTargetChange,
-}) => {
-  const [target, setTarget] = React.useState(NO_TARGET);
-  const [valid, setValid] = React.useState(ValidatedOptions.default);
-  const [copied, setCopied] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!matchExpression || !target.connectUrl) {
-      setValid(ValidatedOptions.default);
-      return;
-    }
-    try {
-      const res = evaluateTargetWithExpr(target, matchExpression);
-      if (typeof res === 'boolean') {
-        setValid(res ? ValidatedOptions.success : ValidatedOptions.warning);
-        return;
-      }
-      setValid(ValidatedOptions.error);
-      return;
-    } catch (err) {
-      setValid(ValidatedOptions.error);
-      return;
-    }
-  }, [target, matchExpression, setValid]);
-
-  React.useEffect(() => {
-    if (onChange) {
-      onChange(valid);
-    }
-  }, [onChange, valid]);
-
-  React.useEffect(() => {
-    onTargetChange && onTargetChange(target);
-  }, [onTargetChange, target]);
-
-  const statusLabel = React.useMemo(() => {
-    switch (valid) {
-      case ValidatedOptions.success:
-        return (
-          <Label color="green" icon={<CheckCircleIcon />}>
-            Match Expression Matches Selected Target
-          </Label>
-        );
-      case ValidatedOptions.warning:
-        return (
-          <Label color="orange" icon={<WarningTriangleIcon />}>
-            Match Expression Valid, Does Not Match Selected Target
-          </Label>
-        );
-      case ValidatedOptions.error:
-        return (
-          <Label color="red" icon={<ExclamationCircleIcon />}>
-            Invalid Match Expression
-          </Label>
-        );
-      default:
-        if (!target.connectUrl) {
-          return (
-            <Label color="grey" icon={<InfoCircleIcon />}>
-              No Target Selected
-            </Label>
-          );
-        }
-        return (
-          <Label color="grey" icon={<InfoCircleIcon />}>
-            No Match Expression
-          </Label>
-        );
-    }
-  }, [valid, target.connectUrl]);
-
-  const exampleExpression = React.useMemo(() => {
-    let body: string;
-    if (!target || !target.alias || !target.connectUrl) {
-      body = 'true';
-    } else {
-      body = `target.alias == '${target.alias}' || target.annotations.cryostat['PORT'] == ${target.annotations?.cryostat['PORT']}`;
-    }
-    body = JSON.stringify(body, null, 2);
-    body = body.substring(1, body.length - 1);
-    return body;
-  }, [target]);
-
-  const onSaveToClipboard = React.useCallback(() => {
-    setCopied(true);
-    navigator.clipboard.writeText(exampleExpression);
-  }, [setCopied, exampleExpression]);
-
-  const actions = React.useMemo(() => {
-    return (
-      <>
-        <CodeBlockAction>
-          <ClipboardCopyButton
-            id="match-expression-copy-button"
-            textId="match-expression-code-content"
-            aria-label="Copy to clipboard"
-            onClick={onSaveToClipboard}
-            exitDelay={copied ? 1500 : 600}
-            maxWidth="110px"
-            variant="plain"
-            onTooltipHidden={() => setCopied(false)}
-          >
-            {copied ? 'Copied!' : 'Click to copy to clipboard'}
-          </ClipboardCopyButton>
-        </CodeBlockAction>
-      </>
-    );
-  }, [copied, onSaveToClipboard, setCopied]);
-
-  return (
-    <>
-      <Stack hasGutter>
-        <StackItem>
-          <TargetSelect simple onSelect={setTarget} />
-        </StackItem>
-        <StackItem>
-          <Split hasGutter isWrappable>
-            <SplitItem>{statusLabel}</SplitItem>
-            <SplitItem>
-              {inlineHint ? (
-                <Tooltip
-                  content={
-                    <div>
-                      Hint: try an expression like <br />
-                      {exampleExpression}
-                    </div>
-                  }
-                >
-                  <HelpIcon />
-                </Tooltip>
-              ) : (
-                <></>
-              )}
-            </SplitItem>
-          </Split>
-        </StackItem>
-        {inlineHint ? (
-          <StackItem>
-            <Text>Hint: try an expression like</Text>
-            <CodeBlock actions={actions}>
-              <CodeBlockCode>{exampleExpression}</CodeBlockCode>
-            </CodeBlock>
-          </StackItem>
-        ) : (
-          <></>
-        )}
-        <StackItem>
-          <SerializedTarget target={target} />
-        </StackItem>
-      </Stack>
-    </>
-  );
-};
diff --git a/src/app/Shared/PropertyPath.tsx b/src/app/Shared/PropertyPath.tsx
new file mode 100644
index 000000000..534b6a30e
--- /dev/null
+++ b/src/app/Shared/PropertyPath.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import _ from 'lodash';
+import React from 'react';
+
+export interface PropertyPathProps {
+  kind: string;
+  path: string | string[];
+}
+
+export const PropertyPath: React.FC<PropertyPathProps> = ({ kind, path, ...props }) => {
+  const pathArray: string[] = _.toPath(path);
+
+  return (
+    <Breadcrumb {...props}>
+      <BreadcrumbItem>{kind}</BreadcrumbItem>
+      {pathArray.map((property, i) => {
+        return (
+          <BreadcrumbItem key={`${property}-${i}`} isActive={i === pathArray.length - 1}>
+            {property}
+          </BreadcrumbItem>
+        );
+      })}
+    </Breadcrumb>
+  );
+};
diff --git a/src/app/Shared/Services/Targets.service.tsx b/src/app/Shared/Services/Targets.service.tsx
index 735ae7b8a..003cf907a 100644
--- a/src/app/Shared/Services/Targets.service.tsx
+++ b/src/app/Shared/Services/Targets.service.tsx
@@ -79,7 +79,7 @@ export class TargetsService {
             const idx = _.findIndex(this._targets$.getValue(), (t) => t.connectUrl === evt.serviceRef.connectUrl);
             if (idx >= 0) {
               this._targets$.getValue().splice(idx, 1, evt.serviceRef);
-              this._targets$.next(this._targets$.getValue());
+              this._targets$.next([...this._targets$.getValue()]);
             }
           }
           break;
diff --git a/src/app/Topology/Actions/NodeActions.tsx b/src/app/Topology/Actions/NodeActions.tsx
index 78e1165ea..3013492a6 100644
--- a/src/app/Topology/Actions/NodeActions.tsx
+++ b/src/app/Topology/Actions/NodeActions.tsx
@@ -478,7 +478,7 @@ export const ActionDropdown: React.FC<ActionDropdownProps> = ({
       className={css(className)}
       aria-label={'entity-action-menu'}
       position={position || 'right'}
-      menuAppendTo={menuAppendTo || (() => document.getElementById('topology-card') || document.body)}
+      menuAppendTo={menuAppendTo || document.body}
       onSelect={handleClose}
       isOpen={actionOpen}
       onClick={(e) => e.stopPropagation()}
diff --git a/src/app/Topology/Actions/WarningResolver.tsx b/src/app/Topology/Actions/WarningResolver.tsx
index 9a46b1df3..b3242f9d3 100644
--- a/src/app/Topology/Actions/WarningResolver.tsx
+++ b/src/app/Topology/Actions/WarningResolver.tsx
@@ -36,7 +36,7 @@
  * SOFTWARE.
  */
 import { NotificationsContext } from '@app/Notifications/Notifications';
-import { CreateJmxCredentialModal } from '@app/SecurityPanel/Credentials/CreateJmxCredentialModal';
+import { CreateCredentialModal } from '@app/SecurityPanel/Credentials/CreateCredentialModal';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Button, ButtonProps } from '@patternfly/react-core';
@@ -82,7 +82,7 @@ export const WarningResolverAsActionButton: React.FC<WarningResolverAsActionButt
   );
 };
 
-export type ModalComponent = typeof CreateJmxCredentialModal;
+export type ModalComponent = typeof CreateCredentialModal;
 
 export interface WarningResolverAsCredModalProps {
   children?: React.ReactNode;
@@ -101,7 +101,7 @@ export const WarningResolverAsCredModal: React.FC<WarningResolverAsCredModalProp
 
   return (
     <>
-      <CreateJmxCredentialModal
+      <CreateCredentialModal
         visible={showAuthModal}
         onDismiss={handleAuthModalClose}
         onPropsSave={handleAuthModalClose}
diff --git a/src/app/Topology/GraphView/TopologyControlBar.tsx b/src/app/Topology/GraphView/TopologyControlBar.tsx
index 1e5783af0..c334f3a5e 100644
--- a/src/app/Topology/GraphView/TopologyControlBar.tsx
+++ b/src/app/Topology/GraphView/TopologyControlBar.tsx
@@ -48,54 +48,65 @@ import { CollapseIcon } from '../Shared/CollapseIcon';
 
 export interface TopologyControlBarProps {
   visualization: Visualization;
+  noCollapse?: boolean;
   className?: string;
 }
 
-export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({ visualization, className, ...props }) => {
+export const TopologyControlBar: React.FC<TopologyControlBarProps> = ({
+  visualization,
+  noCollapse,
+  className,
+  ...props
+}) => {
+  const buttonConfigs = React.useMemo(() => {
+    const base = [
+      ...createTopologyControlButtons({
+        ...defaultControlButtonsOptions,
+        zoomInCallback: action(() => {
+          visualization.getGraph().scaleBy(4 / 3);
+        }),
+        zoomInTip: 'Zoom in',
+        zoomInAriaLabel: 'Zoom in',
+        zoomOutCallback: action(() => {
+          visualization.getGraph().scaleBy(3 / 4);
+        }),
+        zoomOutTip: 'Zoom out',
+        zoomOutAriaLabel: 'Zoom out',
+        fitToScreenCallback: action(() => {
+          visualization.getGraph().fit(120);
+        }),
+        fitToScreenTip: 'Fit to screen',
+        fitToScreenAriaLabel: 'Fit to screen',
+        resetViewCallback: action(() => {
+          visualization.getGraph().reset();
+          visualization.getGraph().layout();
+        }),
+        resetViewTip: 'Reset view',
+        resetViewAriaLabel: 'Reset view',
+        legend: false,
+      }),
+    ];
+
+    if (!noCollapse) {
+      base.push({
+        id: 'collapse-all-group',
+        icon: <CollapseIcon />,
+        tooltip: 'Collapse all groups',
+        callback: action(() => {
+          // Close top-level groups
+          visualization
+            .getGraph()
+            .getNodes()
+            .forEach((n) => n.setCollapsed(true));
+        }),
+      });
+    }
+    return base;
+  }, [visualization, noCollapse]);
+
   return (
     <div className={css('topology-control-bar', className)}>
-      <PFTopologyControlBar
-        {...props}
-        controlButtons={[
-          ...createTopologyControlButtons({
-            ...defaultControlButtonsOptions,
-            zoomInCallback: action(() => {
-              visualization.getGraph().scaleBy(4 / 3);
-            }),
-            zoomInTip: 'Zoom in',
-            zoomInAriaLabel: 'Zoom in',
-            zoomOutCallback: action(() => {
-              visualization.getGraph().scaleBy(3 / 4);
-            }),
-            zoomOutTip: 'Zoom out',
-            zoomOutAriaLabel: 'Zoom out',
-            fitToScreenCallback: action(() => {
-              visualization.getGraph().fit(120);
-            }),
-            fitToScreenTip: 'Fit to screen',
-            fitToScreenAriaLabel: 'Fit to screen',
-            resetViewCallback: action(() => {
-              visualization.getGraph().reset();
-              visualization.getGraph().layout();
-            }),
-            resetViewTip: 'Reset view',
-            resetViewAriaLabel: 'Reset view',
-            legend: false,
-          }),
-          {
-            id: 'collapse-all-group',
-            icon: <CollapseIcon />,
-            tooltip: 'Collapse all groups',
-            callback: action(() => {
-              // Close top-level groups
-              visualization
-                .getGraph()
-                .getNodes()
-                .forEach((n) => n.setCollapsed(true));
-            }),
-          },
-        ]}
-      />
+      <PFTopologyControlBar {...props} controlButtons={buttonConfigs} />
     </div>
   );
 };
diff --git a/src/app/Topology/Shared/Entity/EntityDetails.tsx b/src/app/Topology/Shared/Entity/EntityDetails.tsx
index cc3752091..ec4c7da7b 100644
--- a/src/app/Topology/Shared/Entity/EntityDetails.tsx
+++ b/src/app/Topology/Shared/Entity/EntityDetails.tsx
@@ -37,6 +37,7 @@
  */
 
 import { LinearDotSpinner } from '@app/Shared/LinearDotSpinner';
+import { PropertyPath } from '@app/Shared/PropertyPath';
 import { MBeanMetrics, MBeanMetricsResponse } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { ActionDropdown, NodeAction } from '@app/Topology/Actions/NodeActions';
@@ -102,6 +103,7 @@ export interface EntityDetailsProps {
   entity?: GraphElement | ListElement;
   columnModifier?: React.ComponentProps<typeof DescriptionList>['columnModifier'];
   className?: string;
+  alertOptions?: AlertOptions;
   actionFilter?: (_: NodeAction) => boolean;
 }
 
@@ -112,6 +114,7 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
   className,
   columnModifier,
   actionFilter,
+  alertOptions,
   ...props
 }) => {
   const [activeTab, setActiveTab] = React.useState<_supportedTab>('details');
@@ -124,13 +127,16 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
       const _actions = actionFactory(entity, 'dropdownItem', actionFilter);
 
       return (
-        <div {...props}>
+        <div {...props} style={{ height: '100%' }}>
           <EntityDetailHeader
             titleContent={titleContent}
+            alertOptions={alertOptions}
             badge={nodeTypeToAbbr(data.nodeType)}
             badgeTooltipContent={data.nodeType}
             status={isTarget ? getStatusTargetNode(data) : []}
-            actionDropdown={<ActionDropdown actions={_actions} className={'entity-overview__action-menu'} />}
+            actionDropdown={
+              _actions.length ? <ActionDropdown actions={_actions} className={'entity-overview__action-menu'} /> : null
+            }
           />
           <Divider />
           <Tabs
@@ -157,11 +163,11 @@ export const EntityDetails: React.FC<EntityDetailsProps> = ({
       );
     }
     return null;
-  }, [entity, setActiveTab, activeTab, props, columnModifier, actionFilter]);
+  }, [entity, setActiveTab, activeTab, props, columnModifier, actionFilter, alertOptions]);
   return <div className={css(className)}>{viewContent}</div>;
 };
 
-type DescriptionConfig = {
+export type DescriptionConfig = {
   key: React.Key;
   title: React.ReactNode;
   helperTitle: React.ReactNode;
@@ -169,7 +175,7 @@ type DescriptionConfig = {
   content: React.ReactNode;
 };
 
-const mapSection = (d: DescriptionConfig) => (
+export const mapSection = (d: DescriptionConfig) => (
   <DescriptionListGroup key={d.key}>
     <DescriptionListTermHelpText>
       <Popover headerContent={d.helperTitle} bodyContent={d.helperDescription}>
@@ -180,6 +186,17 @@ const mapSection = (d: DescriptionConfig) => (
   </DescriptionListGroup>
 );
 
+export const constructHelperDescription = (description: React.ReactNode, kind: string, path: string | string[]) => {
+  return (
+    <Stack hasGutter>
+      <StackItem>{description}</StackItem>
+      <StackItem>
+        <PropertyPath kind={kind} path={path} />
+      </StackItem>
+    </Stack>
+  );
+};
+
 export const TargetDetails: React.FC<{
   targetNode: TargetNode;
   columnModifier?: React.ComponentProps<typeof DescriptionList>['columnModifier'];
@@ -193,36 +210,47 @@ export const TargetDetails: React.FC<{
         key: 'Connection URL',
         title: 'Connection URL',
         helperTitle: 'Connection URL',
-        helperDescription: 'JMX Service URL',
+        helperDescription: constructHelperDescription('JMX Service URL.', 'Target', ['connectUrl']),
         content: serviceRef.connectUrl,
       },
       {
         key: 'Alias',
         title: 'Alias',
         helperTitle: 'Alias',
-        helperDescription: 'Connection Nickname (same as Connection URL if not specified).',
+        helperDescription: constructHelperDescription(
+          'Connection Nickname (same as Connection URL if not specified).',
+          'Target',
+          ['alias']
+        ),
         content: serviceRef.alias,
       },
       {
         key: 'JVM ID',
         title: 'JVM ID',
         helperTitle: 'JVM ID',
-        helperDescription: 'The ID of the current JVM.',
+        helperDescription: constructHelperDescription('The ID of the current JVM.', 'Target', ['jvmId']),
         content: serviceRef.jvmId || <EmptyText text="No JVM ID" />,
       },
       {
         key: 'Labels',
         title: 'Labels',
         helperTitle: 'Labels',
-        helperDescription: 'Map of string keys and values that can be used to organize and categorize targets.',
+        helperDescription: constructHelperDescription(
+          'Map of string keys and values that can be used to organize and categorize targets.',
+          'Target',
+          ['labels']
+        ),
         content: <EntityLabels labels={serviceRef.labels} maxDisplay={3} />,
       },
       {
         key: 'Annotations',
         title: 'Annotations',
         helperTitle: 'Annotations',
-        helperDescription:
+        helperDescription: constructHelperDescription(
           'Annotations is an unstructured key value map stored with a target that may be set by external tools.',
+          'Target',
+          ['annotations']
+        ),
         content: <EntityAnnotations annotations={serviceRef.annotations} maxDisplay={3} />,
       },
     ];
@@ -281,7 +309,7 @@ const MBeanDetails: React.FC<{
             { connectUrl }
           )
           .pipe(
-            map((resp) => resp.data.targetNodes[0].mbeanMetrics),
+            map((resp) => resp.data.targetNodes[0].mbeanMetrics || {}),
             catchError((_) => of({}))
           )
           .subscribe(setMbeanMetrics)
@@ -621,12 +649,17 @@ export const GroupResources: React.FC<{ envNode: EnvironmentNode }> = ({ envNode
   );
 };
 
+export interface AlertOptions {
+  hideActions?: boolean;
+}
+
 export interface EntityDetailHeaderProps {
   titleContent: React.ReactNode;
   badgeTooltipContent?: React.ReactNode;
   badge?: ReturnType<typeof nodeTypeToAbbr>;
   actionDropdown?: React.ReactNode;
   status: [NodeStatus?, StatusExtra?];
+  alertOptions?: AlertOptions;
 }
 
 export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
@@ -635,6 +668,7 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
   badgeTooltipContent,
   actionDropdown,
   status: statusContent,
+  alertOptions = {},
   ...props
 }) => {
   const [status, extra] = statusContent;
@@ -657,7 +691,7 @@ export const EntityDetailHeader: React.FC<EntityDetailHeaderProps> = ({
         >
           <Stack hasGutter>
             <StackItem key={'alert-description'}>{extra?.description}</StackItem>
-            {extra?.callForAction ? (
+            {extra?.callForAction && !alertOptions.hideActions ? (
               <StackItem key={'alert-call-for-action'}>
                 <Flex>
                   {extra.callForAction.map((action, index) => (
diff --git a/src/app/Topology/Shared/utils.tsx b/src/app/Topology/Shared/utils.tsx
index 18fc82720..d66975bc6 100644
--- a/src/app/Topology/Shared/utils.tsx
+++ b/src/app/Topology/Shared/utils.tsx
@@ -215,7 +215,7 @@ export const isTargetNodeFiltered = ({ target }: TargetNode, filters?: TopologyF
   return matched;
 };
 
-class SearchExprService {
+export class SearchExprService {
   private readonly _state$ = new BehaviorSubject<string>('');
 
   searchExpression(): Observable<string> {
@@ -227,9 +227,7 @@ class SearchExprService {
   }
 }
 
-export const defaultSearchExpression = new SearchExprService();
-
-export const SearchExprServiceContext = React.createContext(defaultSearchExpression);
+export const SearchExprServiceContext = React.createContext(new SearchExprService());
 
 export const useSearchExpression = (debounceMs = 0): [string, (expr: string) => void] => {
   const [expr, setExpr] = React.useState('');
diff --git a/src/app/Topology/Topology.tsx b/src/app/Topology/Topology.tsx
index 7f148c800..d6d7f5da7 100644
--- a/src/app/Topology/Topology.tsx
+++ b/src/app/Topology/Topology.tsx
@@ -45,7 +45,6 @@ import { RootState } from '@app/Shared/Redux/ReduxStore';
 import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
-import '@app/Topology/styles/base.css';
 import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { Bullseye, Card, CardBody } from '@patternfly/react-core';
@@ -55,11 +54,7 @@ import { Link, withRouter } from 'react-router-dom';
 import { TopologyGraphView } from './GraphView/TopologyGraphView';
 import { TopologyListView } from './ListView/TopologyListView';
 import { HintBanner } from './Shared/HintBanner';
-import {
-  defaultSearchExpression as defaultSearchExprService,
-  DiscoveryTreeContext,
-  SearchExprServiceContext,
-} from './Shared/utils';
+import { DiscoveryTreeContext, SearchExprService, SearchExprServiceContext } from './Shared/utils';
 import { DEFAULT_EMPTY_UNIVERSE } from './typings';
 
 export interface TopologyProps {}
@@ -67,6 +62,7 @@ export interface TopologyProps {}
 export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
+  const matchExpreRef = React.useRef(new SearchExprService());
   const firstFetchRef = React.useRef(false);
   const firstFetched = firstFetchRef.current;
 
@@ -150,7 +146,7 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
     }
 
     return (
-      <SearchExprServiceContext.Provider value={defaultSearchExprService}>
+      <SearchExprServiceContext.Provider value={matchExpreRef.current}>
         {isGraphView ? (
           <TopologyGraphView transformConfig={transformConfig} />
         ) : (
@@ -158,7 +154,16 @@ export const Topology: React.FC<TopologyProps> = ({ ..._props }) => {
         )}
       </SearchExprServiceContext.Provider>
     );
-  }, [isGraphView, transformConfig, firstFetched, error, firstFetchRef, setError, _refreshDiscoveryTree]);
+  }, [
+    isGraphView,
+    transformConfig,
+    firstFetched,
+    error,
+    firstFetchRef,
+    matchExpreRef,
+    setError,
+    _refreshDiscoveryTree,
+  ]);
 
   return (
     <>
diff --git a/src/app/Topology/styles/base.css b/src/app/Topology/styles/base.css
index 6fcf69922..be54807f2 100644
--- a/src/app/Topology/styles/base.css
+++ b/src/app/Topology/styles/base.css
@@ -169,7 +169,7 @@ Below CSS rules only apply to Topology components
 }
 
 .entity-overview__alert-banner {
-  margin-top: 1em;
+  margin-top: 1em !important;
 }
 
 .entity-overview__header {
@@ -267,16 +267,6 @@ Below CSS rules only apply to Topology components
   margin-left: var(--pf-c-select__menu-group-title--PaddingLeft);
 }
 
-.topology__display-option_badge {
-  background-color: var(--pf-global--palette--blue-500);
-  color: #fff;
-  padding: 2px 12px 2px 12px;
-  margin-right: 8px;
-  text-align: center;
-  border-radius: 500px;
-  font-size: 0.9em;
-}
-
 .topology__visualization-container {
   padding: 1em;
 }
diff --git a/src/app/Topology/typings.ts b/src/app/Topology/typings.ts
index 8b7e2b2f8..b01353b46 100644
--- a/src/app/Topology/typings.ts
+++ b/src/app/Topology/typings.ts
@@ -59,6 +59,8 @@ export enum NodeType {
   REPLICATIONCONTROLLER = 'ReplicationController',
   POD = 'Pod',
   ENDPOINT = 'Endpoint',
+  // Standalone targets
+  TARGET = 'Target',
 }
 
 export interface NodeLabels {
diff --git a/src/app/app.css b/src/app/app.css
index 7b2cb2660..49eda68e4 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -514,3 +514,12 @@ input[type=number].datetime-picker__number-input {
 .pf-c-skip-to-content {
   position: absolute !important;
 }
+
+.add-credential-modal {
+  width: 80% !important;
+  height: 80%;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 22cf0ac79..acfb6330d 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -35,6 +35,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import '@app/Topology/styles/base.css';
 import '@app/app.css';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/quickstarts/dist/quickstarts.css';
diff --git a/src/app/utils/LocalStorage.ts b/src/app/utils/LocalStorage.ts
index 3c0ccb683..6a274afff 100644
--- a/src/app/utils/LocalStorage.ts
+++ b/src/app/utils/LocalStorage.ts
@@ -60,6 +60,8 @@ export enum LocalStorageKey {
   NOTIFICATIONS_ENABLED,
   WEBSOCKET_DEBOUNCE_MS,
   DATETIME_FORMAT,
+  MATCH_EXPRES_VIS_GRAPH_POSITIONS,
+  MATCH_EXPRES_VIS_NODE_POSITIONS,
 }
 
 export type LocalStorageKeyStrings = keyof typeof LocalStorageKey;
diff --git a/src/test/Rules/CreateRule.test.tsx b/src/test/Rules/CreateRule.test.tsx
index 751b18552..9e8d69b55 100644
--- a/src/test/Rules/CreateRule.test.tsx
+++ b/src/test/Rules/CreateRule.test.tsx
@@ -38,15 +38,19 @@
 import { EventTemplate } from '@app/CreateRecording/CreateRecording';
 import { CreateRule } from '@app/Rules/CreateRule';
 import { Rule } from '@app/Rules/Rules';
-import { defaultServices, Services } from '@app/Shared/Services/Services';
-import { Target, TargetService } from '@app/Shared/Services/Target.service';
+import { defaultServices } from '@app/Shared/Services/Services';
+import { Target } from '@app/Shared/Services/Target.service';
 import '@testing-library/jest-dom';
-import { act as doAct, cleanup, screen } from '@testing-library/react';
+import { cleanup, screen, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import * as React from 'react';
-import { of, Subject } from 'rxjs';
+import { of } from 'rxjs';
 import { renderWithServiceContextAndRouter } from '../Common';
 
+jest.mock('@app/Shared/MatchExpression/MatchExpressionVisualizer', () => ({
+  MatchExpressionVisualizer: () => <>Match Expression Visualizer</>,
+}));
+
 const escapeKeyboardInput = (value: string) => {
   return value.replace(/[{[]/g, '$&$&');
 };
@@ -56,8 +60,8 @@ const mockTarget: Target = {
   connectUrl: mockConnectUrl,
   alias: 'io.cryostat.Cryostat',
   annotations: {
-    cryostat: new Map<string, string>([['PORT', '9091']]),
-    platform: new Map<string, string>(),
+    cryostat: { PORT: 9091 },
+    platform: {},
   },
 };
 const mockEventTemplate: EventTemplate = {
@@ -88,51 +92,19 @@ jest.mock('react-router-dom', () => ({
   useHistory: () => history,
 }));
 
-jest.mock('@app/Shared/Services/Target.service', () => ({
-  ...jest.requireActual('@app/Shared/Services/Target.service'), // Require actual implementation of utility functions for Target
-}));
-
 const createSpy = jest.spyOn(defaultServices.api, 'createRule').mockReturnValue(of(true));
 jest.spyOn(defaultServices.api, 'doGet').mockReturnValue(of([mockEventTemplate]));
 jest.spyOn(defaultServices.targets, 'targets').mockReturnValue(of([mockTarget]));
-jest.spyOn(defaultServices.target, 'authFailure').mockReturnValue(of());
 
 describe('<CreateRule />', () => {
   beforeEach(() => {
     history.go(-history.length);
+    jest.mocked(defaultServices.api.doGet).mockClear();
+    jest.mocked(defaultServices.targets.targets).mockClear();
   });
 
   afterEach(cleanup);
 
-  it('should show error view if failing to retrieve templates', async () => {
-    const subj = new Subject<void>();
-    const mockTargetSvc = {
-      target: () => of(mockTarget),
-      setTarget: (_) => undefined,
-      authFailure: () => subj.asObservable(),
-    } as TargetService;
-    const services: Services = {
-      ...defaultServices,
-      target: mockTargetSvc,
-    };
-
-    renderWithServiceContextAndRouter(<CreateRule />, { history: history, services: services });
-
-    await doAct(async () => subj.next());
-
-    const failTitle = screen.getByText('Error retrieving event templates');
-    expect(failTitle).toBeInTheDocument();
-    expect(failTitle).toBeVisible();
-
-    const authFailText = screen.getByText('Auth failure');
-    expect(authFailText).toBeInTheDocument();
-    expect(authFailText).toBeVisible();
-
-    const retryButton = screen.getByText('Retry');
-    expect(retryButton).toBeInTheDocument();
-    expect(retryButton).toBeVisible();
-  });
-
   it('should submit form if form input is valid', async () => {
     const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
 
@@ -175,7 +147,9 @@ describe('<CreateRule />', () => {
     await user.type(nameInput, mockRule.name);
     await user.type(descriptionInput, mockRule.description);
     await user.type(matchExpressionInput, escapeKeyboardInput(mockRule.matchExpression));
+    await waitFor(() => expect(defaultServices.api.doGet).toHaveBeenCalledTimes(1));
     await user.selectOptions(templateSelect, ['Profiling']);
+
     await user.type(maxSizeInput, `${mockRule.maxSizeBytes}`);
     await user.type(maxAgeInput, `${mockRule.maxAgeSeconds}`);
     await user.type(archivalPeriodInput, `${mockRule.archivalPeriodSeconds}`);
@@ -196,10 +170,6 @@ describe('<CreateRule />', () => {
   it('should show error helper text if rule form inputs are invalid', async () => {
     const { user } = renderWithServiceContextAndRouter(<CreateRule />, { history });
 
-    // Select a target first
-    await user.click(screen.getByText('Select target...'));
-    await user.click(screen.getByText('io.cryostat.Cryostat (service:jmx:rmi://someUrl)'));
-
     const nameInput = screen.getByLabelText('Name *');
     expect(nameInput).toBeInTheDocument();
     expect(nameInput).toBeVisible();
diff --git a/src/test/SecurityPanel/Credentials/StoreJmxCredentials.test.tsx b/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
similarity index 90%
rename from src/test/SecurityPanel/Credentials/StoreJmxCredentials.test.tsx
rename to src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
index 864a195e8..c4554bfc9 100644
--- a/src/test/SecurityPanel/Credentials/StoreJmxCredentials.test.tsx
+++ b/src/test/SecurityPanel/Credentials/StoreCredentials.test.tsx
@@ -35,10 +35,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { DeleteJMXCredentials, DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
+import { DeleteCredentials, DeleteOrDisableWarningType } from '@app/Modal/DeleteWarningUtils';
 import { NotificationsContext, NotificationsInstance } from '@app/Notifications/Notifications';
-import { CreateJmxCredentialModalProps } from '@app/SecurityPanel/Credentials/CreateJmxCredentialModal';
-import { StoreJmxCredentials } from '@app/SecurityPanel/Credentials/StoreJmxCredentials';
+import { CreateCredentialModalProps } from '@app/SecurityPanel/Credentials/CreateCredentialModal';
+import { StoreCredentials } from '@app/SecurityPanel/Credentials/StoreCredentials';
 import { MatchedCredential, StoredCredential } from '@app/Shared/Services/Api.service';
 import { NotificationMessage } from '@app/Shared/Services/NotificationChannel.service';
 import { ServiceContext, defaultServices } from '@app/Shared/Services/Services';
@@ -93,18 +93,18 @@ const mockFoundTargetNotification = {
   message: { event: { kind: 'FOUND', serviceRef: mockYetAnotherMatchingTarget } },
 } as NotificationMessage;
 
-jest.mock('@app/SecurityPanel/Credentials/CreateJmxCredentialModal', () => {
+jest.mock('@app/SecurityPanel/Credentials/CreateCredentialModal', () => {
   return {
-    CreateJmxCredentialModal: jest.fn((props: CreateJmxCredentialModalProps) => {
+    CreateCredentialModal: jest.fn((props: CreateCredentialModalProps) => {
       return (
         <Modal
           isOpen={props.visible}
           variant={ModalVariant.large}
           showClose={true}
           onClose={props.onDismiss}
-          title="CreateJmxCredentialModal"
+          title="CreateCredentialModal"
         >
-          Jmx Auth Form
+          Auth Form + Match Expression Visualizer
         </Modal>
       );
     }),
@@ -165,7 +165,7 @@ jest
 
   .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'increments the correct count and updates the correct nested table when a found target notification is received'
 
-  .mockReturnValueOnce(of([])) // 'opens the JMX auth modal when Add is clicked'
+  .mockReturnValueOnce(of([])) // 'opens the auth modal when Add is clicked'
 
   .mockReturnValueOnce(of([mockCredential, mockAnotherCredential])) // 'shows a popup when Delete is clicked and makes a delete request when deleting one credential after confirming Delete'
 
@@ -188,7 +188,7 @@ jest
 
 jest.spyOn(defaultServices.settings, 'deletionDialogsEnabledFor').mockReturnValueOnce(true);
 
-describe('<StoreJmxCredentials />', () => {
+describe('<StoreCredentials />', () => {
   afterEach(cleanup);
 
   it('renders correctly', async () => {
@@ -198,7 +198,7 @@ describe('<StoreJmxCredentials />', () => {
       tree = renderer.create(
         <ServiceContext.Provider value={defaultServices}>
           <NotificationsContext.Provider value={NotificationsInstance}>
-            <StoreJmxCredentials />
+            <StoreCredentials />
           </NotificationsContext.Provider>
         </ServiceContext.Provider>
       );
@@ -210,7 +210,7 @@ describe('<StoreJmxCredentials />', () => {
 
   it('adds the correct table entry when a stored notification is received', async () => {
     const apiRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
-    renderWithServiceContext(<StoreJmxCredentials />);
+    renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.getByText(mockCredential.matchExpression)).toBeInTheDocument();
     expect(screen.getByText(mockCredential.numMatchingTargets)).toBeInTheDocument();
@@ -219,7 +219,7 @@ describe('<StoreJmxCredentials />', () => {
 
   it('removes the correct table entry when a deletion notification is received', async () => {
     const apiRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
-    renderWithServiceContext(<StoreJmxCredentials />);
+    renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.queryByText(mockCredential.matchExpression)).not.toBeInTheDocument();
     expect(screen.queryByText(mockCredential.numMatchingTargets)).not.toBeInTheDocument();
@@ -230,7 +230,7 @@ describe('<StoreJmxCredentials />', () => {
 
   it('renders an empty table after receiving deletion notifications for all credentials', async () => {
     const apiRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
-    renderWithServiceContext(<StoreJmxCredentials />);
+    renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.queryByText(mockCredential.matchExpression)).not.toBeInTheDocument();
     expect(screen.queryByText(mockCredential.numMatchingTargets)).not.toBeInTheDocument();
@@ -241,7 +241,7 @@ describe('<StoreJmxCredentials />', () => {
   });
 
   it('expands to show the correct nested targets', async () => {
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.queryByText('Target')).not.toBeInTheDocument();
     expect(screen.queryByText(`${mockTarget.alias} (${mockTarget.connectUrl})`)).not.toBeInTheDocument();
@@ -270,7 +270,7 @@ describe('<StoreJmxCredentials />', () => {
   });
 
   it('decrements the correct count and updates the correct nested table when a lost target notification is received', async () => {
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     // both counts should now be equal to 1
     const counts = screen.getAllByText(mockAnotherCredential.numMatchingTargets - 1);
@@ -292,7 +292,7 @@ describe('<StoreJmxCredentials />', () => {
   });
 
   it('increments the correct count and updates the correct nested table when a found target notification is received', async () => {
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.getByText(mockCredential.numMatchingTargets)).toBeInTheDocument();
     expect(screen.getByText(mockAnotherCredential.numMatchingTargets + 1)).toBeInTheDocument();
@@ -317,20 +317,20 @@ describe('<StoreJmxCredentials />', () => {
     ).toBeInTheDocument();
   });
 
-  it('opens the JMX auth modal when Add is clicked', async () => {
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+  it('opens the auth modal when Add is clicked', async () => {
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     await user.click(screen.getByText('Add'));
-    expect(screen.getByText('CreateJmxCredentialModal')).toBeInTheDocument();
+    expect(screen.getByText('CreateCredentialModal')).toBeInTheDocument();
 
     await user.click(screen.getByLabelText('Close'));
-    expect(screen.queryByText('CreateJmxCredentialModal')).not.toBeInTheDocument();
+    expect(screen.queryByText('CreateCredentialModal')).not.toBeInTheDocument();
   });
 
   it('shows a popup when Delete is clicked and makes a delete request when deleting one credential after confirming Delete', async () => {
     const queryRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     const deleteRequestSpy = jest.spyOn(defaultServices.api, 'deleteCredentials');
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.getByText(mockCredential.matchExpression)).toBeInTheDocument();
     expect(screen.getByText(mockAnotherCredential.matchExpression)).toBeInTheDocument();
@@ -338,14 +338,14 @@ describe('<StoreJmxCredentials />', () => {
     await user.click(screen.getByLabelText('credentials-table-row-0-check'));
     await user.click(screen.getByText('Delete'));
 
-    expect(screen.getByLabelText(DeleteJMXCredentials.ariaLabel)).toBeInTheDocument();
+    expect(screen.getByLabelText(DeleteCredentials.ariaLabel)).toBeInTheDocument();
 
     const dialogWarningSpy = jest.spyOn(defaultServices.settings, 'setDeletionDialogsEnabledFor');
     await user.click(screen.getByLabelText("Don't ask me again"));
-    await user.click(within(screen.getByLabelText(DeleteJMXCredentials.ariaLabel)).getByText('Delete'));
+    await user.click(within(screen.getByLabelText(DeleteCredentials.ariaLabel)).getByText('Delete'));
 
     expect(dialogWarningSpy).toBeCalledTimes(1);
-    expect(dialogWarningSpy).toBeCalledWith(DeleteOrDisableWarningType.DeleteJMXCredentials, false);
+    expect(dialogWarningSpy).toBeCalledWith(DeleteOrDisableWarningType.DeleteCredentials, false);
     expect(queryRequestSpy).toHaveBeenCalledTimes(1);
     expect(deleteRequestSpy).toHaveBeenCalledTimes(1);
   });
@@ -353,7 +353,7 @@ describe('<StoreJmxCredentials />', () => {
   it('makes multiple delete requests when all credentials are deleted at once w/o popup warning', async () => {
     const queryRequestSpy = jest.spyOn(defaultServices.api, 'getCredentials');
     const deleteRequestSpy = jest.spyOn(defaultServices.api, 'deleteCredentials');
-    const { user } = renderWithServiceContext(<StoreJmxCredentials />);
+    const { user } = renderWithServiceContext(<StoreCredentials />);
 
     expect(screen.getByText(mockCredential.matchExpression)).toBeInTheDocument();
     expect(screen.getByText(mockCredential.numMatchingTargets)).toBeInTheDocument();
diff --git a/src/test/SecurityPanel/Credentials/__snapshots__/StoreJmxCredentials.test.tsx.snap b/src/test/SecurityPanel/Credentials/__snapshots__/StoreCredentials.test.tsx.snap
similarity index 98%
rename from src/test/SecurityPanel/Credentials/__snapshots__/StoreJmxCredentials.test.tsx.snap
rename to src/test/SecurityPanel/Credentials/__snapshots__/StoreCredentials.test.tsx.snap
index ee81df017..acca2c917 100644
--- a/src/test/SecurityPanel/Credentials/__snapshots__/StoreJmxCredentials.test.tsx.snap
+++ b/src/test/SecurityPanel/Credentials/__snapshots__/StoreCredentials.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<StoreJmxCredentials /> renders correctly 1`] = `
+exports[`<StoreCredentials /> renders correctly 1`] = `
 Array [
   <div
     className="pf-c-toolbar"
@@ -20,7 +20,7 @@ Array [
         >
           <button
             aria-disabled={false}
-            aria-label="add-jmx-credential"
+            aria-label="add-credential"
             className="pf-c-button pf-m-primary"
             data-ouia-component-id="OUIA-Generated-Button-primary-2"
             data-ouia-component-type="PF4/Button"
@@ -38,7 +38,7 @@ Array [
         >
           <button
             aria-disabled={true}
-            aria-label="delete-selected-jmx-credential"
+            aria-label="delete-selected-credential"
             className="pf-c-button pf-m-danger pf-m-disabled"
             data-ouia-component-id="OUIA-Generated-Button-danger-2"
             data-ouia-component-type="PF4/Button"
diff --git a/src/test/Settings/NotificationControl.test.tsx b/src/test/Settings/NotificationControl.test.tsx
index 2d0b1b9ff..e0b1d5ab6 100644
--- a/src/test/Settings/NotificationControl.test.tsx
+++ b/src/test/Settings/NotificationControl.test.tsx
@@ -54,7 +54,9 @@ const notiCountSubj = new BehaviorSubject<number>(defaultNumOfNotifications);
 
 jest.spyOn(defaultServices.settings, 'notificationsEnabled').mockReturnValue(defaults);
 jest.spyOn(defaultServices.settings, 'visibleNotificationsCount').mockReturnValue(notiCountSubj.asObservable());
-jest.spyOn(defaultServices.settings, 'setVisibleNotificationCount').mockImplementation((c) => notiCountSubj.next(c));
+jest
+  .spyOn(defaultServices.settings, 'setVisibleNotificationCount')
+  .mockImplementation((c) => doAct(() => notiCountSubj.next(c)));
 
 describe('<NotificationControl/>', () => {
   beforeEach(() => {
diff --git a/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap b/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
index ec28df114..d7fde8e30 100644
--- a/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
+++ b/src/test/Settings/__snapshots__/DeletionDialogControl.test.tsx.snap
@@ -391,15 +391,15 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
             data-ouia-component-id="OUIA-Generated-Switch-9"
             data-ouia-component-type="PF4/Switch"
             data-ouia-safe={true}
-            htmlFor="DeleteJMXCredentials"
+            htmlFor="DeleteCredentials"
           >
             <input
               aria-label=""
-              aria-labelledby="DeleteJMXCredentials-on"
+              aria-labelledby="DeleteCredentials-on"
               checked={true}
               className="pf-c-switch__input"
               disabled={false}
-              id="DeleteJMXCredentials"
+              id="DeleteCredentials"
               onChange={[Function]}
               type="checkbox"
             />
@@ -409,16 +409,16 @@ exports[`<DeletionDialogControl/> renders correctly 1`] = `
             <span
               aria-hidden="true"
               className="pf-c-switch__label pf-m-on"
-              id="DeleteJMXCredentials-on"
+              id="DeleteCredentials-on"
             >
-              Delete JMX Credentials
+              Delete Credentials
             </span>
             <span
               aria-hidden="true"
               className="pf-c-switch__label pf-m-off"
-              id="DeleteJMXCredentials-off"
+              id="DeleteCredentials-off"
             >
-              Delete JMX Credentials
+              Delete Credentials
             </span>
           </label>
         </div>