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

Co-authored-by: Andrew Azores <[email protected]>

Author: aali309

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) =>