chore(ts): continue to fix broken actions

src/app/Archives/AllTargetsArchivedRecordingsTable.tsx

@@ -382,7 +382,7 @@ export const AllTargetsArchivedRecordingsTable: React.FC<AllTargetsArchivedRecor
         <EmptyState>
           <EmptyStateIcon icon={SearchIcon} />
           <Title headingLevel="h4" size="lg">
-            No Targets
+            No Archived Recordings
           </Title>
         </EmptyState>
       </>

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -59,7 +59,7 @@ export const CustomRecordingForm: React.FC = () => {
   const notifications = React.useContext(NotificationsContext);
   const history = useHistory();
   const addSubscription = useSubscriptions();
-  const location = useLocation<Partial<CustomRecordingFormData>>();
+  const location = useLocation<Partial<CustomRecordingFormData> | undefined>();
 
   const [formData, setFormData] = React.useState<CustomRecordingFormData>({
     name: '',
@@ -293,7 +293,6 @@ export const CustomRecordingForm: React.FC = () => {
             setAdvancedRecordingOptions(recordingOptions);
           },
           error: (error) => {
-            // FIXME: https://github.com/cryostatio/cryostat-web/issues/943
             setErrorMessage(isTargetAgentHttp(target) ? 'Unsupported operation: Create recordings' : error.message);
             setTemplates([]);
             setFormData((old) => ({ ...old, template: undefined }));
@@ -370,7 +369,8 @@ export const CustomRecordingForm: React.FC = () => {
       maxSize,
       maxSizeUnit,
       continuous,
-    } = location.state;
+      skipDurationCheck,
+    } = location.state || {};
     setFormData((old) => ({
       ...old,
       name: name ?? '',
@@ -381,11 +381,13 @@ export const CustomRecordingForm: React.FC = () => {
         : ValidatedOptions.error,
       template,
       restart: restart ?? false,
+      continuous: continuous || false,
       labels: labels ?? [],
       labelsValid: ValidatedOptions.default, // RecordingLabelFields component handles validating
       duration: continuous ? 0 : duration ?? 30,
       durationUnit: durationUnit ?? 1000,
-      // FIXME: durationValid: continuous || (duration ?? 30) > 0 ? ValidatedOptions.success : ValidatedOptions.error,
+      durationValid:
+        skipDurationCheck || continuous || (duration ?? 30) > 0 ? ValidatedOptions.success : ValidatedOptions.error,
       maxAge: maxAge ?? 0,
       maxAgeUnit: maxAgeUnit ?? 1,
       maxSize: maxSize ?? 0,
@@ -402,6 +404,7 @@ export const CustomRecordingForm: React.FC = () => {
       />
     );
   }
+
   return (
     <>
       <Text component={TextVariants.small}>

src/app/CreateRecording/types.ts

@@ -28,6 +28,7 @@ interface _FormBaseData {
   restart: boolean;
   duration: number;
   durationUnit: number;
+  skipDurationCheck?: boolean;
   maxAge: number;
   maxAgeUnit: number;
   maxSize: number;

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -17,7 +17,6 @@ import { ErrorView } from '@app/ErrorView/ErrorView';
 import { authFailMessage, isAuthFail } from '@app/ErrorView/types';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import {
-  automatedAnalysisAddGlobalFilterIntent,
   emptyAutomatedAnalysisFilters,
   TargetAutomatedAnalysisFilters,
 } from '@app/Shared/Redux/Filters/AutomatedAnalysisFilterSlice';
@@ -28,6 +27,7 @@ import {
   automatedAnalysisDeleteAllFiltersIntent,
   automatedAnalysisDeleteCategoryFiltersIntent,
   automatedAnalysisDeleteFilterIntent,
+  automatedAnalysisAddGlobalFilterIntent,
   RootState,
   StateDispatch,
 } from '@app/Shared/Redux/ReduxStore';

src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx

@@ -215,6 +215,7 @@ export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (p
         restart: true,
         labels: [{ key: 'origin', value: RECORDING_NAME }],
         duration: -1,
+        skipDurationCheck: true,
         // TODO these are arbitrary defaults that will be set in the recording creation form.
         // Should these values be inferred in some more intelligent way?
         maxAge: 120,

src/app/Dashboard/DashboardCard.tsx

@@ -20,9 +20,7 @@ import * as React from 'react';
 import { DraggableRef } from './DraggableRef';
 import { ResizableRef } from './ResizableRef';
 import { DashboardCardSizes } from './types';
-import { DRAGGABLE_REF_KLAZZ } from './utils';
-
-export const DashboardCardContext = React.createContext<React.RefObject<HTMLDivElement>>(React.createRef());
+import { DashboardCardContext, DRAGGABLE_REF_KLAZZ } from './utils';
 
 export interface DashboardCardProps extends CardProps {
   dashboardId: number;

src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx

@@ -16,7 +16,6 @@
 import { NodeType, Target } from '@app/Shared/Services/api.types';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { NodeAction } from '@app/Topology/Actions/NodeActions';
 import EntityDetails from '@app/Topology/Entity/EntityDetails';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { CardActions, CardBody, CardHeader } from '@patternfly/react-core';
@@ -25,6 +24,7 @@ import * as React from 'react';
 import { DashboardCard } from '../DashboardCard';
 import { DashboardCardDescriptor, DashboardCardFC, DashboardCardSizes, DashboardCardTypeProps } from '../types';
 import '@app/Topology/styles/base.css';
+import { NodeAction } from '@app/Topology/Actions/types';
 
 export interface JvmDetailsCardProps extends DashboardCardTypeProps {}
 

src/app/Dashboard/ResizableRef.tsx

@@ -18,8 +18,8 @@ import { gridSpans } from '@patternfly/react-core';
 import _ from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { DashboardCardContext } from './DashboardCard';
 import { CardConfig, DashboardCardSizes } from './types';
+import { DashboardCardContext } from './utils';
 
 export interface ResizableRefProps {
   cardId: number;

src/app/Dashboard/utils.tsx

@@ -308,3 +308,5 @@ export const transformAADescription = (description: string): JSX.Element => {
     </>
   );
 };
+
+export const DashboardCardContext = React.createContext<React.RefObject<HTMLDivElement>>(React.createRef());

src/app/RecordingMetadata/RecordingLabelFields.tsx

@@ -90,18 +90,10 @@ export const RecordingLabelFields: React.FC<RecordingLabelFieldsProps> = ({
     [labels, setLabels],
   );
 
-  const isLabelValid = React.useCallback(matchesLabelSyntax, [matchesLabelSyntax]);
-
-  const isDuplicateKey = React.useCallback((key: string, labels: RecordingLabel[]) => {
-    return labels.filter((label) => label.key === key).length > 1;
-  }, []);
-
-  const allLabelsValid = React.useMemo(() => {
-    if (!labels.length) {
-      return true;
-    }
-    return labels.reduce((prev, curr) => isLabelValid(curr) && !isDuplicateKey(curr.key, labels) && prev, true);
-  }, [labels, isLabelValid, isDuplicateKey]);
+  const isDuplicateKey = React.useCallback(
+    (key: string, labels: RecordingLabel[]) => labels.filter((label) => label.key === key).length > 1,
+    [],
+  );
 
   const validKeys = React.useMemo(() => {
     const arr = Array(labels.length).fill(ValidatedOptions.default);
@@ -124,8 +116,12 @@ export const RecordingLabelFields: React.FC<RecordingLabelFieldsProps> = ({
   }, [labels]);
 
   React.useEffect(() => {
-    setValid(getValidatedOption(allLabelsValid));
-  }, [setValid, allLabelsValid]);
+    const valid = labels.reduce(
+      (prev, curr) => matchesLabelSyntax(curr) && !isDuplicateKey(curr.key, labels) && prev,
+      true,
+    );
+    setValid(getValidatedOption(valid));
+  }, [setValid, labels, isDuplicateKey]);
 
   const handleUploadLabel = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -516,7 +516,7 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
       <DrawerContent panelContent={LabelsPanel} className="recordings-table-drawer-content">
         <DrawerContentBody hasPadding>
           <RecordingsTable
-            tableTitle="Archived Flight Recordings"
+            tableTitle="Archived Recordings"
             toolbar={RecordingsToolbar}
             tableColumns={columnConfig}
             tableFooter={

src/app/Rules/CreateRule.tsx

@@ -21,9 +21,11 @@ import { MatchExpressionVisualizer } from '@app/Shared/Components/MatchExpressio
 import { SelectTemplateSelectorForm } from '@app/Shared/Components/SelectTemplateSelectorForm';
 import { LoadingProps } from '@app/Shared/Components/types';
 import { EventTemplate, Target, Rule } from '@app/Shared/Services/api.types';
+import { MatchExpressionService } from '@app/Shared/Services/MatchExpression.service';
 import { NotificationsContext } from '@app/Shared/Services/Notifications.service';
+import { SearchExprServiceContext } from '@app/Shared/Services/service.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { SearchExprService, SearchExprServiceContext, useExprSvc } from '@app/Topology/Shared/utils';
+import { useMatchExpressionSvc } from '@app/utils/hooks/useMatchExpressionSvc';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
 import {
@@ -64,7 +66,7 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
   const notifications = React.useContext(NotificationsContext);
   const history = useHistory();
   // Do not use useSearchExpression for display. This causes the cursor to jump to the end due to async updates.
-  const matchExprService = useExprSvc();
+  const matchExprService = useMatchExpressionSvc();
   const addSubscription = useSubscriptions();
 
   const [formData, setFormData] = React.useState<RuleFormData>({
@@ -289,7 +291,7 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
             ),
           ),
         )
-        .subscribe((templates) => {
+        .subscribe((templates: EventTemplate[]) => {
           setTemplates(templates);
           setFormData((old) => {
             const matched = templates.find((t) => t.name === old.template?.name && t.type === old.template?.type);
@@ -325,7 +327,7 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
           setEvaluating(false);
           setFormData((old) => ({
             ...old,
-            matchExpression: err
+            matchExpressionValid: err
               ? ValidatedOptions.error
               : !ts
               ? ValidatedOptions.default
@@ -644,7 +646,7 @@ enabled in the future.`}
 };
 
 export const CreateRule: React.FC = () => {
-  const matchExpreRef = React.useRef(new SearchExprService());
+  const matchExpreRef = React.useRef(new MatchExpressionService());
 
   const breadcrumbs: BreadcrumbTrail[] = React.useMemo(
     () => [

src/app/SecurityPanel/Credentials/CreateCredentialModal.tsx

@@ -17,8 +17,10 @@ import { AuthCredential, CredentialAuthForm } from '@app/AppLayout/CredentialAut
 import { MatchExpressionHint } from '@app/Shared/Components/MatchExpression/MatchExpressionHint';
 import { MatchExpressionVisualizer } from '@app/Shared/Components/MatchExpression/MatchExpressionVisualizer';
 import { Target } from '@app/Shared/Services/api.types';
+import { MatchExpressionService } from '@app/Shared/Services/MatchExpression.service';
+import { SearchExprServiceContext } from '@app/Shared/Services/service.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { SearchExprService, SearchExprServiceContext, useExprSvc } from '@app/Topology/Shared/utils';
+import { useMatchExpressionSvc } from '@app/utils/hooks/useMatchExpressionSvc';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { portalRoot, StreamOf } from '@app/utils/utils';
 import {
@@ -57,7 +59,7 @@ export const CreateCredentialModal: React.FC<CreateCredentialModalProps> = ({
   onPropsSave,
   ...props
 }) => {
-  const matchExpreRef = React.useRef(new SearchExprService());
+  const matchExpreRef = React.useRef(new MatchExpressionService());
   const loadingRef = React.useRef(new StreamOf(false));
   const credentialRef = React.useRef(new StreamOf<AuthCredential>({ username: '', password: '' }));
   const testPoolRef = React.useRef(new Set<TestRequest>());
@@ -119,7 +121,7 @@ interface AuthFormProps extends Omit<CreateCredentialModalProps, 'visible'> {
 export const AuthForm: React.FC<AuthFormProps> = ({ onDismiss, onPropsSave, progressChange, ...props }) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
-  const matchExprService = useExprSvc();
+  const matchExprService = useMatchExpressionSvc();
   const [matchExpressionInput, setMatchExpressionInput] = React.useState('');
   const [matchExpressionValid, setMatchExpressionValid] = React.useState(ValidatedOptions.default);
   const [_, setCredential] = useAuthCredential(true);

src/app/SecurityPanel/Credentials/CredentialTestTable.tsx

@@ -17,7 +17,7 @@ import { LinearDotSpinner } from '@app/Shared/Components/LinearDotSpinner';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import { Target } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { useExprSvc } from '@app/Topology/Shared/utils';
+import { useMatchExpressionSvc } from '@app/utils/hooks/useMatchExpressionSvc';
 import { useSort } from '@app/utils/hooks/useSort';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { TableColumn, portalRoot, sortResources } from '@app/utils/utils';
@@ -80,7 +80,7 @@ export interface CredentialTestTableProps {}
 export const CredentialTestTable: React.FC<CredentialTestTableProps> = ({ ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
-  const matchExprService = useExprSvc();
+  const matchExprService = useMatchExpressionSvc();
   const [sortBy, getSortParams] = useSort();
 
   const [matchedExpr, setMatchExpr] = React.useState('');

src/app/SecurityPanel/Credentials/StoreCredentials.tsx

@@ -42,7 +42,7 @@ import { ExpandableRowContent, TableComposable, Tbody, Td, Th, Thead, Tr } from
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { forkJoin } from 'rxjs';
-import { SecurityCard } from '../SecurityPanel';
+import { SecurityCard } from '../types';
 import { CreateCredentialModal } from './CreateCredentialModal';
 import { MatchedTargetsTable } from './MatchedTargetsTable';
 

src/app/SecurityPanel/ImportCertificate.tsx

@@ -17,7 +17,7 @@
 import { Button } from '@patternfly/react-core';
 import * as React from 'react';
 import { CertificateUploadModal } from './CertificateUploadModal';
-import { SecurityCard } from './SecurityPanel';
+import { SecurityCard } from './types';
 
 export const CertificateImport: React.FC = () => {
   const [showModal, setShowModal] = React.useState(false);

src/app/SecurityPanel/SecurityPanel.tsx

@@ -44,9 +44,3 @@ export const SecurityPanel: React.FC<SecurityPanelProps> = (_) => {
 };
 
 export default SecurityPanel;
-
-export interface SecurityCard {
-  title: string;
-  description: JSX.Element | string;
-  content: React.FC;
-}

src/app/SecurityPanel/types.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright The Cryostat Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface SecurityCard {
+  title: string;
+  description: JSX.Element | string;
+  content: React.FC;
+}

src/app/Settings/Config/NotificationControl.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { messageKeys, NotificationCategory } from '@app/Shared/Services/api.types';
+import { NotificationCategory } from '@app/Shared/Services/api.types';
+import { messageKeys } from '@app/Shared/Services/api.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import {

src/app/Settings/Settings.tsx

@@ -50,7 +50,7 @@ import { NotificationControl } from './Config/NotificationControl';
 import { Theme } from './Config/Theme';
 import { WebSocketDebounce } from './Config/WebSocketDebounce';
 import { SettingGroup, SettingTab, _TransformedUserSetting } from './types';
-import { paramAsTab, tabAsParam, _getGroupFeatureLevel } from './utils';
+import { paramAsTab, tabAsParam, getGroupFeatureLevel } from './utils';
 
 export const allSettings = [
   NotificationControl,
@@ -125,7 +125,7 @@ export const Settings: React.FC<SettingsProps> = (_) => {
         groupLabel: t(cat),
         groupKey: cat,
         settings: panels,
-        featureLevel: _getGroupFeatureLevel(panels),
+        featureLevel: getGroupFeatureLevel(panels),
       };
     }) as SettingGroup[];
   }, [settings, t]);

src/app/Settings/utils.ts

@@ -39,7 +39,7 @@ export const getDefaultTheme = (): ThemeSetting => {
   return ThemeSetting.LIGHT;
 };
 
-export const _getGroupFeatureLevel = (settings: _TransformedUserSetting[]): FeatureLevel => {
+export const getGroupFeatureLevel = (settings: _TransformedUserSetting[]): FeatureLevel => {
   if (!settings.length) {
     return FeatureLevel.DEVELOPMENT;
   }

src/app/Shared/Components/MatchExpression/MatchExpressionVisualizer.tsx

@@ -15,13 +15,15 @@
  */
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import { Target, NodeType } from '@app/Shared/Services/api.types';
+import { MatchedTargetsServiceContext } from '@app/Shared/Services/service.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import EntityDetails, { AlertOptions } from '@app/Topology/Entity/EntityDetails';
 import { TopologyControlBar } from '@app/Topology/GraphView/TopologyControlBar';
 import { SavedGraphPosition, SavedNodePosition } from '@app/Topology/GraphView/TopologyGraphView';
 import { getNodeById } from '@app/Topology/GraphView/utils';
-import { MatchedTargetsServiceContext, useExprSvc, useMatchedTargetsSvcSource } from '@app/Topology/Shared/utils';
 import { TopologySideBar } from '@app/Topology/SideBar/TopologySideBar';
+import { useMatchedTargetsSvcSource } from '@app/utils/hooks/useMatchedTargetsSvcSource';
+import { useMatchExpressionSvc } from '@app/utils/hooks/useMatchExpressionSvc';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { getFromLocalStorage, saveToLocalStorage } from '@app/utils/LocalStorage';
 import { hashCode } from '@app/utils/utils';
@@ -298,7 +300,7 @@ const GraphView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ..
 const ListView: React.FC<{ alertOptions?: AlertOptions }> = ({ alertOptions, ...props }) => {
   const addSubscription = useSubscriptions();
   const context = React.useContext(ServiceContext);
-  const matchExprService = useExprSvc();
+  const matchExprService = useMatchExpressionSvc();
 
   const [matchedExpr, setMatchExpr] = React.useState('');
   const [matchedTargets, setMatchedTargets] = React.useState<Target[]>([]);

src/app/Shared/Redux/Middlewares/PersistMiddleware.tsx

@@ -20,7 +20,7 @@ import { enumValues as TopologyConfigActions } from '../Configurations/TopologyC
 import { enumValues as AutomatedAnalysisFilterActions } from '../Filters/AutomatedAnalysisFilterSlice';
 import { enumValues as RecordingFilterActions } from '../Filters/RecordingFilterSlice';
 import { enumValues as TopologyFilterActions } from '../Filters/TopologyFilterSlice';
-import { RootState } from '../ReduxStore';
+import type { RootState } from '../ReduxStore';
 
 /* eslint-disable-next-line  @typescript-eslint/ban-types*/
 export const persistMiddleware: Middleware<{}, RootState> =