NIFI-14431 - Checkin initial changes

Author: Freedom9339

nifi-frontend/src/main/frontend/apps/nifi/proxy.config.mjs

@@ -16,7 +16,7 @@
  */
 
 const target = {
-    target: 'https://localhost:8443',
+    target: 'http://localhost:8443',
     secure: false,
     logLevel: 'debug',
     changeOrigin: true,

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.component.html

@@ -55,11 +55,16 @@
             </div>
         </form>
     </div>
-    <div class="p-2 flex-1 flex border overflow-y-auto">
-        @if (viewerSelected) {
-            <router-outlet></router-outlet>
-        } @else {
-            <div class="unset">No data reference specified</div>
-        }
+    <div class="p-2 flex-1 flex overflow-y-auto">
+        <div class="p-2 flex-1 flex border overflow-y-auto">
+            @if (viewerSelected) {
+                <router-outlet></router-outlet>
+            } @else {
+                <div class="unset">No data reference specified</div>
+            }
+        </div>
+        <div *ngIf="flowFile != undefined">
+            <flowfile-details [flowFile]="flowFile" (downloadContent)="downloadContent()"></flowfile-details>
+        </div>
     </div>
 </div>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.component.ts

@@ -25,13 +25,21 @@ import { ContentViewer, HEX_VIEWER_URL, SupportedMimeTypes } from '../state/view
 import { isDefinedAndNotNull, NiFiCommon, SelectGroup, SelectOption, selectQueryParams, TextTip } from '@nifi/shared';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { concatLatestFrom } from '@ngrx/operators';
-import { navigateToBundledContentViewer, resetContent, setRef } from '../state/content/content.actions';
+import {
+    downloadFlowFileContentFromViewer,
+    loadFlowFile,
+    navigateToBundledContentViewer,
+    resetContent,
+    setRef
+} from '../state/content/content.actions';
 import { MatSelectChange } from '@angular/material/select';
 import { loadAbout } from '../../../state/about/about.actions';
 import { selectAbout } from '../../../state/about/about.selectors';
 import { filter, map, switchMap, take } from 'rxjs';
 import { navigateToExternalViewer } from '../state/external-viewer/external-viewer.actions';
 import { snackBarError } from '../../../state/error/error.actions';
+import { FlowFile } from '../../queue/state/queue-listing';
+import { selectFlowFile } from '../state/content/content.selectors';
 
 interface SupportedContentViewer {
     supportedMimeTypes: SupportedMimeTypes;
@@ -49,6 +57,7 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     viewerForm: FormGroup;
     viewAsOptions: SelectGroup[] = [];
     panelWidth: string | null = 'auto';
+    flowFile: FlowFile | undefined;
 
     private supportedMimeTypeId = 0;
     private supportedContentViewerLookup: Map<number, SupportedContentViewer> = new Map<
@@ -61,6 +70,8 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     viewerSelected: boolean = false;
     mimeType: string | undefined;
     private clientId: string | undefined;
+    private uri: string | undefined;
+    private clusterNodeId: string | undefined;
 
     private queryParamsLoaded = false;
     private viewerOptionsLoaded = false;
@@ -72,6 +83,10 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     ) {
         this.viewerForm = this.formBuilder.group({ viewAs: null });
 
+        this.store.select(selectFlowFile).subscribe((flowFile) => {
+            this.flowFile = flowFile;
+        });
+
         this.store
             .select(selectViewerOptions)
             .pipe(
@@ -199,7 +214,8 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
                 const ref = queryParams['ref'];
                 this.mimeType = queryParams['mimeType'];
                 this.clientId = queryParams['clientId'];
-
+                this.uri = queryParams['uri'];
+                this.clusterNodeId = queryParams['clusterNodeId'];
                 if (ref) {
                     this.store.dispatch(
                         setRef({
@@ -219,6 +235,7 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.store.dispatch(loadContentViewerOptions());
         this.store.dispatch(loadAbout());
+        this.store.dispatch(loadFlowFile());
     }
 
     private handleDefaultSelection(): void {
@@ -303,6 +320,19 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
         }
     }
 
+    downloadContent(): void {
+        if (this.uri) {
+            this.store.dispatch(
+                downloadFlowFileContentFromViewer({
+                    request: {
+                        uri: this.uri,
+                        clusterNodeId: this.clusterNodeId
+                    }
+                })
+            );
+        }
+    }
+
     ngOnDestroy(): void {
         this.store.dispatch(resetContent());
         this.store.dispatch(resetContentViewerOptions());

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.module.ts

@@ -30,6 +30,8 @@ import { ImageViewer } from '../ui/image-viewer/image-viewer.component';
 import { ContentEffects } from '../state/content/content.effects';
 import { ExternalViewerEffects } from '../state/external-viewer/external-viewer.effects';
 import { NifiTooltipDirective } from '@nifi/shared';
+import { FlowFileDialog } from '../../queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component';
+import { FlowFileDetails } from '../ui/flowfile-details/flowfile-details.component';
 
 @NgModule({
     declarations: [ContentViewerComponent],
@@ -45,7 +47,10 @@ import { NifiTooltipDirective } from '@nifi/shared';
         HexViewer,
         ImageViewer,
         NgOptimizedImage,
-        NifiTooltipDirective
+        NifiTooltipDirective,
+        FlowFileDialog,
+        FlowFileDetails,
+        FlowFileDetails
     ]
 })
 export class ContentViewerModule {}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/state/content/content.actions.ts

@@ -16,6 +16,8 @@
  */
 
 import { createAction, props } from '@ngrx/store';
+import { loadFlowFileRequestSuccess } from './index';
+import { DownloadFlowFileContentRequest } from '../../../queue/state/queue-listing';
 
 export const setRef = createAction('[Content] Set Ref', props<{ ref: string }>());
 
@@ -25,3 +27,15 @@ export const navigateToBundledContentViewer = createAction(
 );
 
 export const resetContent = createAction('[Content] Reset Content');
+
+export const loadFlowFile = createAction('[Content] Load FlowFile');
+
+export const loadFlowFileSuccess = createAction(
+    '[Content] Load FlowFile Success',
+    props<{ response: loadFlowFileRequestSuccess }>()
+);
+
+export const downloadFlowFileContentFromViewer = createAction(
+    '[Content] Download FlowFile Content',
+    props<{ request: DownloadFlowFileContentRequest }>()
+);

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/state/content/content.effects.ts

@@ -18,16 +18,21 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as ContentActions from './content.actions';
-import { map, tap } from 'rxjs';
+import { catchError, from, map, of, switchMap, tap, withLatestFrom } from 'rxjs';
 import { NavigationExtras, Router } from '@angular/router';
-import { NiFiCommon } from '@nifi/shared';
+import { NiFiCommon, selectQueryParams } from '@nifi/shared';
+import { select, Store } from '@ngrx/store';
+import { NiFiState } from '../../../../state';
+import { QueueService } from '../../../queue/service/queue.service';
 
 @Injectable()
 export class ContentEffects {
     constructor(
         private actions$: Actions,
         private router: Router,
-        private nifiCommon: NiFiCommon
+        private nifiCommon: NiFiCommon,
+        private queueService: QueueService,
+        private store: Store<NiFiState>
     ) {}
 
     navigateToBundledContentViewer$ = createEffect(
@@ -46,4 +51,53 @@ export class ContentEffects {
             ),
         { dispatch: false }
     );
+
+    loadFlowFile$ = createEffect(() =>
+        this.actions$.pipe(
+            ofType(ContentActions.loadFlowFile),
+            withLatestFrom(this.store.pipe(select(selectQueryParams))),
+            switchMap(([, params]) =>
+                from(
+                    this.queueService.getFlowFile({
+                        filename: '',
+                        lineageDuration: 0,
+                        penalized: false,
+                        penaltyExpiresIn: 0,
+                        queuedDuration: 0,
+                        size: 0,
+                        uuid: '',
+                        uri: params['uri'],
+                        clusterNodeId: params['clusterNodeId']
+                    })
+                ).pipe(
+                    map((response) => {
+                        return ContentActions.loadFlowFileSuccess({
+                            response: {
+                                flowFile: response.flowFile
+                            }
+                        });
+                    }),
+                    catchError(() =>
+                        of(
+                            ContentActions.loadFlowFileSuccess({
+                                response: {
+                                    flowFile: undefined
+                                }
+                            })
+                        )
+                    )
+                )
+            )
+        )
+    );
+
+    downloadFlowFileContentFromViewer$ = createEffect(
+        () => () =>
+            this.actions$.pipe(
+                ofType(ContentActions.downloadFlowFileContentFromViewer),
+                map((action) => action.request),
+                tap((request) => this.queueService.downloadContent(request))
+            ),
+        { dispatch: false }
+    );
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/state/content/content.reducer.ts

@@ -17,10 +17,11 @@
 
 import { createReducer, on } from '@ngrx/store';
 import { ContentState } from './index';
-import { resetContent, setRef } from './content.actions';
+import { loadFlowFileSuccess, resetContent, setRef } from './content.actions';
 
 export const initialState: ContentState = {
-    ref: null
+    ref: null,
+    flowFile: undefined
 };
 
 export const contentReducer = createReducer(
@@ -31,5 +32,9 @@ export const contentReducer = createReducer(
     })),
     on(resetContent, () => ({
         ...initialState
+    })),
+    on(loadFlowFileSuccess, (state, { response }) => ({
+        ...state,
+        flowFile: response.flowFile
     }))
 );

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/state/content/content.selectors.ts

@@ -25,3 +25,5 @@ export const selectContentState = createSelector(
 );
 
 export const selectRef = createSelector(selectContentState, (state: ContentState) => state.ref);
+
+export const selectFlowFile = createSelector(selectContentState, (state: ContentState) => state.flowFile);

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/state/content/index.ts

@@ -15,8 +15,20 @@
  * limitations under the License.
  */
 
+import { FlowFile } from '../../../queue/state/queue-listing';
+
 export const contentFeatureKey = 'content';
 
 export interface ContentState {
     ref: string | null;
+    flowFile: FlowFile | undefined;
+}
+
+export interface loadFlowFileRequest {
+    uri: string;
+    clusterNodeId: string;
+}
+
+export interface loadFlowFileRequestSuccess {
+    flowFile: FlowFile | undefined;
 }