feat(API): update web-client to use v4 API endpoint

src/app/CreateRecording/CustomRecordingForm.tsx

@@ -273,10 +273,8 @@ export const CustomRecordingForm: React.FC = () => {
       }
       addSubscription(
         forkJoin({
-          templates: context.api.doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`),
-          recordingOptions: context.api.doGet<AdvancedRecordingOptions>(
-            `targets/${encodeURIComponent(target.connectUrl)}/recordingOptions`,
-          ),
+          templates: context.api.getTargetEventTemplates(target),
+          recordingOptions: context.api.doGet<AdvancedRecordingOptions>(`targets/${target.id}/recordingOptions`),
         }).subscribe({
           next: ({ templates, recordingOptions }) => {
             setErrorMessage('');

src/app/CreateRecording/SnapshotRecordingForm.tsx

@@ -40,9 +40,9 @@ export const SnapshotRecordingForm: React.FC<SnapshotRecordingFormProps> = (_) =
       context.api
         .createSnapshot()
         .pipe(first())
-        .subscribe((success) => {
+        .subscribe((result) => {
           setLoading(false);
-          if (success) {
+          if (result) {
             exitForm();
           }
         }),

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx

@@ -98,7 +98,7 @@ import _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { filter, first, map, tap } from 'rxjs';
+import { concatMap, filter, first, map, tap } from 'rxjs';
 import { DashboardCard } from '../DashboardCard';
 import { DashboardCardDescriptor, DashboardCardFC, DashboardCardSizes, DashboardCardTypeProps } from '../types';
 import { AutomatedAnalysisCardList } from './AutomatedAnalysisCardList';
@@ -529,20 +529,28 @@ export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps>
       generateReport();
     } else {
       addSubscription(
-        context.api.deleteRecording('automated-analysis').subscribe({
-          next: () => {
-            generateReport();
-          },
-          error: (error) => {
-            handleStateErrors(error.message);
-          },
-        }),
+        context.target
+          .target()
+          .pipe(
+            filter((t) => !!t),
+            concatMap((t) => context.api.targetRecordingRemoteIdByOrigin(t!, automatedAnalysisRecordingName)),
+            concatMap((id) => context.api.deleteRecording(id!)),
+          )
+          .subscribe({
+            next: () => {
+              generateReport();
+            },
+            error: (error) => {
+              handleStateErrors(error.message);
+            },
+          }),
       );
     }
   }, [
     addSubscription,
     context.api,
     context.reports,
+    context.target,
     targetConnectURL,
     usingCachedReport,
     usingArchivedReport,

src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisConfigForm.tsx

@@ -99,15 +99,7 @@ export const AutomatedAnalysisConfigForm: React.FC<AutomatedAnalysisConfigFormPr
     (target?: Target) => {
       setIsLoading(true);
       addSubscription(
-        iif(
-          () => !target,
-          of([]),
-          context.api
-            .doGet<
-              EventTemplate[]
-            >(`targets/${encodeURIComponent(target?.connectUrl || '')}/templates`, 'v1', undefined, undefined, true)
-            .pipe(first()),
-        ).subscribe({
+        iif(() => !target, of([]), context.api.getTargetEventTemplates(target!, false, true).pipe(first())).subscribe({
           next: (templates: EventTemplate[]) => {
             setErrorMessage('');
             setTemplates(templates);

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

@@ -23,6 +23,7 @@ import {
   BehaviorSubject,
   concatMap,
   distinctUntilChanged,
+  filter,
   finalize,
   first,
   map,
@@ -115,9 +116,15 @@ export class JFRMetricsChartController {
       .subscribe((v) => {
         this._state$.next(v ? ControllerState.READY : ControllerState.NO_DATA);
         if (v) {
-          this._api
-            .uploadActiveRecordingToGrafana(RECORDING_NAME)
-            .pipe(first())
+          this._target
+            .target()
+            .pipe(
+              filter((t) => !!t),
+              first(),
+              concatMap((t) => this._api.targetRecordingRemoteIdByOrigin(t!, RECORDING_NAME)),
+              filter((remoteId) => remoteId != null),
+              concatMap((id) => this._api.uploadActiveRecordingToGrafana(id!).pipe(first())),
+            )
             .subscribe((_) => {
               this._state$.next(ControllerState.READY);
             });
@@ -129,7 +136,7 @@ export class JFRMetricsChartController {
     if (!target) {
       return of(false);
     }
-    return this._api.targetHasRecording(target, {
+    return this._api.targetHasJFRMetricsRecording(target, {
       state: RecordingState.RUNNING,
       labels: [`origin=${RECORDING_NAME}`],
     });

src/app/Events/EventTemplates.tsx

@@ -167,9 +167,7 @@ export const EventTemplates: React.FC<EventTemplatesProps> = () => {
         .pipe(
           filter((target) => !!target),
           first(),
-          concatMap((target: Target) =>
-            context.api.doGet<EventTemplate[]>(`targets/${encodeURIComponent(target.connectUrl)}/templates`),
-          ),
+          concatMap((target: Target) => context.api.getTargetEventTemplates(target)),
         )
         .subscribe({
           next: handleTemplates,

src/app/Events/EventTypes.tsx

@@ -123,9 +123,7 @@ export const EventTypes: React.FC<EventTypesProps> = () => {
         .pipe(
           filter((target) => !!target),
           first(),
-          concatMap((target: Target) =>
-            context.api.doGet<EventType[]>(`targets/${encodeURIComponent(target.connectUrl)}/events`),
-          ),
+          concatMap((target: Target) => context.api.getTargetEventTypes(target)),
         )
         .subscribe({
           next: handleTypes,

src/app/RecordingMetadata/BulkEditLabels.tsx

@@ -160,9 +160,7 @@ export const BulkEditLabels: React.FC<BulkEditLabelsProps> = ({
     } else if (isTargetRecording) {
       observable = context.target.target().pipe(
         filter((target) => !!target),
-        concatMap((target: Target) =>
-          context.api.doGet<ActiveRecording[]>(`targets/${encodeURIComponent(target.connectUrl)}/recordings`),
-        ),
+        concatMap((target: Target) => context.api.getTargetActiveRecordings(target)),
         first(),
       );
     } else {
@@ -261,9 +259,9 @@ export const BulkEditLabels: React.FC<BulkEditLabelsProps> = ({
         const event = parts[1];
 
         const isMatch =
-          currentTarget?.connectUrl === event.message.target ||
+          currentTarget?.jvmId === event.message.jvmId ||
           currentTarget?.jvmId === event.message.recording.jvmId ||
-          currentTarget?.connectUrl === 'uploads';
+          currentTarget?.jvmId === 'uploads';
 
         setRecordings((oldRecordings) => {
           return oldRecordings.map((recording) => {

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -228,9 +228,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
         .target()
         .pipe(
           filter((target) => !!target),
-          concatMap((target: Target) =>
-            context.api.doGet<ActiveRecording[]>(`targets/${encodeURIComponent(target.connectUrl)}/recordings`),
-          ),
+          concatMap((target: Target) => context.api.getTargetActiveRecordings(target)),
           first(),
         )
         .subscribe({
@@ -259,7 +257,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
           context.notificationChannel.messages(NotificationCategory.SnapshotCreated),
         ),
       ]).subscribe(([currentTarget, event]) => {
-        if (currentTarget?.connectUrl != event.message.target && currentTarget?.jvmId != event.message.jvmId) {
+        if (currentTarget?.jvmId != event.message.jvmId) {
           return;
         }
         setRecordings((old) => old.concat([event.message.recording]));
@@ -276,7 +274,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
           context.notificationChannel.messages(NotificationCategory.SnapshotDeleted),
         ),
       ]).subscribe(([currentTarget, event]) => {
-        if (currentTarget?.connectUrl != event.message.target && currentTarget?.jvmId != event.message.jvmId) {
+        if (currentTarget?.jvmId != event.message.jvmId) {
           return;
         }
 
@@ -292,7 +290,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
         context.target.target(),
         context.notificationChannel.messages(NotificationCategory.ActiveRecordingStopped),
       ]).subscribe(([currentTarget, event]) => {
-        if (currentTarget?.connectUrl != event.message.target && currentTarget?.jvmId != event.message.jvmId) {
+        if (currentTarget?.jvmId != event.message.jvmId) {
           return;
         }
         setRecordings((old) => {
@@ -323,7 +321,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
         context.target.target(),
         context.notificationChannel.messages(NotificationCategory.RecordingMetadataUpdated),
       ]).subscribe(([currentTarget, event]) => {
-        if (currentTarget?.connectUrl != event.message.target && currentTarget?.jvmId != event.message.jvmId) {
+        if (currentTarget?.jvmId != event.message.jvmId) {
           return;
         }
         setRecordings((old) => {
@@ -391,7 +389,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
     filteredRecordings.forEach((r: ActiveRecording) => {
       if (checkedIndices.includes(r.id)) {
         handleRowCheck(false, r.id);
-        tasks.push(context.api.archiveRecording(r.name).pipe(first()));
+        tasks.push(context.api.archiveRecording(r.remoteId).pipe(first()));
       }
     });
     addSubscription(
@@ -417,7 +415,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
       if (checkedIndices.includes(r.id)) {
         handleRowCheck(false, r.id);
         if (r.state === RecordingState.RUNNING || r.state === RecordingState.STARTING) {
-          tasks.push(context.api.stopRecording(r.name).pipe(first()));
+          tasks.push(context.api.stopRecording(r.remoteId).pipe(first()));
         }
       }
     });
@@ -443,7 +441,7 @@ export const ActiveRecordingsTable: React.FC<ActiveRecordingsTableProps> = (prop
     filteredRecordings.forEach((r: ActiveRecording) => {
       if (checkedIndices.includes(r.id)) {
         context.reports.delete(r);
-        tasks.push(context.api.deleteRecording(r.name).pipe(first()));
+        tasks.push(context.api.deleteRecording(r.remoteId).pipe(first()));
       }
     });
     addSubscription(
@@ -1011,7 +1009,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
         <RecordingActions
           index={index}
           recording={recording}
-          uploadFn={() => context.api.uploadActiveRecordingToGrafana(recording.name)}
+          uploadFn={() => context.api.uploadActiveRecordingToGrafana(recording.remoteId)}
         />
       </Tr>
     );

src/app/Recordings/ArchivedRecordingsTable.tsx

@@ -326,7 +326,7 @@ export const ArchivedRecordingsTable: React.FC<ArchivedRecordingsTableProps> = (
           context.notificationChannel.messages(NotificationCategory.ActiveRecordingSaved),
         ),
       ]).subscribe(([currentTarget, event]) => {
-        if (currentTarget?.connectUrl != event.message.target && currentTarget?.jvmId != event.message.jvmId) {
+        if (currentTarget?.jvmId != event.message.jvmId) {
           return;
         }
         setRecordings((old) =>

src/app/Rules/CreateRule.tsx

@@ -273,13 +273,9 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
               () => 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
-                    ),
+                  context.api.getTargetEventTemplates(t, true, true).pipe(
+                    catchError((_) => of<EventTemplate[]>([])), // Fail silently
+                  ),
                 ),
               ).pipe(
                 map((allTemplates) => {

src/app/SecurityPanel/Credentials/StoredCredentials.tsx

@@ -18,7 +18,7 @@ import { DeleteOrDisableWarningType } from '@app/Modal/types';
 import { JmxAuthDescription } from '@app/Shared/Components/JmxAuthDescription';
 import { LoadingView } from '@app/Shared/Components/LoadingView';
 import { MatchExpressionDisplay } from '@app/Shared/Components/MatchExpression/MatchExpressionDisplay';
-import { StoredCredential, NotificationCategory } from '@app/Shared/Services/api.types';
+import { MatchedCredential, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSort } from '@app/utils/hooks/useSort';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
@@ -68,7 +68,7 @@ import { SecurityCard } from '../types';
 import { CreateCredentialModal } from './CreateCredentialModal';
 import { MatchedTargetsTable } from './MatchedTargetsTable';
 
-export const includesCredential = (credentials: StoredCredential[], credential: StoredCredential): boolean => {
+export const includesCredential = (credentials: MatchedCredential[], credential: MatchedCredential): boolean => {
   return credentials.some((cred) => cred.id === credential.id);
 };
 
@@ -84,16 +84,16 @@ const enum Actions {
 }
 
 interface State {
-  credentials: StoredCredential[];
-  expandedCredentials: StoredCredential[];
-  checkedCredentials: StoredCredential[];
+  credentials: MatchedCredential[];
+  expandedCredentials: MatchedCredential[];
+  checkedCredentials: MatchedCredential[];
   isHeaderChecked: boolean;
 }
 
 const reducer = (state: State, action) => {
   switch (action.type) {
     case Actions.HANDLE_REFRESH: {
-      const credentials: StoredCredential[] = action.payload.credentials;
+      const credentials: MatchedCredential[] = action.payload.credentials;
       const updatedCheckedCredentials = state.checkedCredentials.filter((cred) =>
         includesCredential(credentials, cred),
       );
@@ -118,7 +118,7 @@ const reducer = (state: State, action) => {
       };
     }
     case Actions.HANDLE_CREDENTIALS_DELETED_NOTIFICATION: {
-      const deletedCredential: StoredCredential = action.payload.credential;
+      const deletedCredential: MatchedCredential = action.payload.credential;
       const updatedCheckedCredentials = state.checkedCredentials.filter((o) => o.id !== deletedCredential.id);
 
       return {
@@ -155,8 +155,8 @@ const reducer = (state: State, action) => {
     case Actions.HANDLE_ATLEAST_ONE_MATCH_ROW_CHECK:
     case Actions.HANDLE_NO_MATCH_ROW_CHECK: {
       const noMatch = action.payload.noMatch;
-      const checkedCredentials = state.credentials.filter(({ numMatchingTargets }) =>
-        noMatch ? numMatchingTargets === 0 : numMatchingTargets > 0,
+      const checkedCredentials = state.credentials.filter(({ targets }) =>
+        noMatch ? targets.length === 0 : targets.length > 0,
       );
       return {
         ...state,
@@ -165,7 +165,7 @@ const reducer = (state: State, action) => {
       };
     }
     case Actions.HANDLE_TOGGLE_EXPANDED: {
-      const credential: StoredCredential = action.payload.credential;
+      const credential: MatchedCredential = action.payload.credential;
       const matched = state.expandedCredentials.some((o) => o.id === credential.id);
       const updated = state.expandedCredentials.filter((o) => o.id !== credential.id);
       if (!matched) {
@@ -202,9 +202,9 @@ export const StoredCredentials = () => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
   const [state, dispatch] = React.useReducer(reducer, {
-    credentials: [] as StoredCredential[],
-    expandedCredentials: [] as StoredCredential[],
-    checkedCredentials: [] as StoredCredential[],
+    credentials: [] as MatchedCredential[],
+    expandedCredentials: [] as MatchedCredential[],
+    checkedCredentials: [] as MatchedCredential[],
     isHeaderChecked: false,
   } as State);
   const [sortBy, getSortParams] = useSort();
@@ -216,7 +216,7 @@ export const StoredCredentials = () => {
   const refreshStoredCredentialsAndCounts = React.useCallback(() => {
     setIsLoading(true);
     addSubscription(
-      context.api.getCredentials().subscribe((credentials: StoredCredential[]) => {
+      context.api.getCredentials().subscribe((credentials: MatchedCredential[]) => {
         dispatch({ type: Actions.HANDLE_REFRESH, payload: { credentials: credentials } });
         setIsLoading(false);
       }),
@@ -425,7 +425,7 @@ export const StoredCredentials = () => {
               <Icon iconSize="md">
                 <ContainerNodeIcon />
               </Icon>
-              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>{credential.numMatchingTargets}</span>
+              <span style={{ marginLeft: 'var(--pf-v5-global--spacer--sm)' }}>{credential.targets.length}</span>
             </Button>
           </Td>
         </Tr>

src/app/SecurityPanel/ImportCertificate.tsx

@@ -52,7 +52,7 @@ export const CertificateImport: React.FC = () => {
     setLoading(true);
     addSubscription(
       context.api
-        .doGet('tls/certs', 'v3')
+        .doGet('tls/certs')
         .pipe(tap((_) => setLoading(false)))
         .subscribe(setCerts),
     );