[NIFI-12759] go to RPG (#8378)

This closes #8378

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts

@@ -24,6 +24,7 @@ import {
     deleteComponents,
     enterProcessGroup,
     getParameterContextsAndOpenGroupComponentsDialog,
+    goToRemoteProcessGroup,
     leaveProcessGroup,
     moveComponents,
     navigateToComponent,
@@ -953,8 +954,13 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider {
                 },
                 clazz: 'fa fa-external-link',
                 text: 'Go to',
-                action: () => {
-                    // TODO - openUri
+                action: (selection: any) => {
+                    if (selection.size() === 1 && this.canvasUtils.isRemoteProcessGroup(selection)) {
+                        const selectionData = selection.datum();
+                        const uri = selectionData.component.targetUri;
+
+                        this.store.dispatch(goToRemoteProcessGroup({ request: { uri } }));
+                    }
                 }
             },
             {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/flow.service.ts

@@ -27,6 +27,7 @@ import {
     CreateProcessorRequest,
     CreateRemoteProcessGroupRequest,
     DeleteComponentRequest,
+    GoToRemoteProcessGroupRequest,
     ProcessGroupRunStatusRequest,
     ReplayLastProvenanceEventRequest,
     RunOnceRequest,
@@ -123,6 +124,10 @@ export class FlowService implements PropertyDescriptorRetriever {
         });
     }
 
+    goToRemoteProcessGroup(goToRemoteProcessGroupRequest: GoToRemoteProcessGroupRequest) {
+        window.open(encodeURI(goToRemoteProcessGroupRequest.uri));
+    }
+
     createProcessor(processGroupId = 'root', createProcessor: CreateProcessorRequest): Observable<any> {
         return this.httpClient.post(`${FlowService.API}/process-groups/${processGroupId}/processors`, {
             revision: createProcessor.revision,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts

@@ -74,7 +74,8 @@ import {
     StopProcessGroupResponse,
     CenterComponentRequest,
     ImportFromRegistryDialogRequest,
-    ImportFromRegistryRequest
+    ImportFromRegistryRequest,
+    GoToRemoteProcessGroupRequest
 } from './index';
 import { StatusHistoryRequest } from '../../../../state/status-history';
 
@@ -226,6 +227,11 @@ export const openNewRemoteProcessGroupDialog = createAction(
     props<{ request: CreateComponentRequest }>()
 );
 
+export const goToRemoteProcessGroup = createAction(
+    `${CANVAS_PREFIX} Go To Remote Process Group`,
+    props<{ request: GoToRemoteProcessGroupRequest }>()
+);
+
 export const createProcessGroup = createAction(
     `${CANVAS_PREFIX} Create Process Group`,
     props<{ request: CreateProcessGroupRequest }>()

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts

@@ -95,6 +95,7 @@ import { RegistryService } from '../../service/registry.service';
 import { ImportFromRegistry } from '../../ui/canvas/items/flow/import-from-registry/import-from-registry.component';
 import { selectCurrentUser } from '../../../../state/current-user/current-user.selectors';
 import { NoRegistryClientsDialog } from '../../ui/common/no-registry-clients-dialog/no-registry-clients-dialog.component';
+import { showOkDialog } from './flow.actions';
 
 @Injectable()
 export class FlowEffects {
@@ -337,6 +338,24 @@ export class FlowEffects {
         )
     );
 
+    goToRemoteProcessGroup$ = createEffect(
+        () =>
+            this.actions$.pipe(
+                ofType(FlowActions.goToRemoteProcessGroup),
+                map((action) => action.request),
+                tap((request) => {
+                    if (request.uri) {
+                        this.flowService.goToRemoteProcessGroup(request);
+                    } else {
+                        this.store.dispatch(
+                            showOkDialog({ title: 'Remote Process Group', message: 'No target URI defined.' })
+                        );
+                    }
+                })
+            ),
+        { dispatch: false }
+    );
+
     openNewProcessGroupDialog$ = createEffect(
         () =>
             this.actions$.pipe(

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts

@@ -204,6 +204,10 @@ export interface CreateProcessorDialogRequest {
     processorTypes: DocumentedType[];
 }
 
+export interface GoToRemoteProcessGroupRequest {
+    uri: string;
+}
+
 export interface CreateProcessorRequest extends CreateComponentRequest {
     processorType: string;
     processorBundle: Bundle;