NIFI-14431 - Added "Details & Attributes" side panel to content viewer.

Author: Freedom9339

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="data.flowFile || data.provEvent">
+            <content-details [data]="data" (downloadContent)="downloadContent($event)"></content-details>
+        </div>
     </div>
 </div>

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

@@ -21,12 +21,14 @@ import { ContentViewerComponent } from './content-viewer.component';
 import { provideMockStore } from '@ngrx/store/testing';
 import { contentViewersFeatureKey } from '../state';
 import { viewerOptionsFeatureKey } from '../state/viewer-options';
-import { initialState } from '../state/viewer-options/viewer-options.reducer';
+import { initialState as viewerOptionsInitialState } from '../state/viewer-options/viewer-options.reducer';
 import { MatSelectModule } from '@angular/material/select';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatIconModule } from '@angular/material/icon';
 import { NifiTooltipDirective } from '@nifi/shared';
+import { contentFeatureKey } from '../state/content';
+import { initialState as contentInitialState } from '../state/content/content.reducer';
 
 describe('ContentViewerComponent', () => {
     let component: ContentViewerComponent;
@@ -40,7 +42,8 @@ describe('ContentViewerComponent', () => {
                 provideMockStore({
                     initialState: {
                         [contentViewersFeatureKey]: {
-                            [viewerOptionsFeatureKey]: initialState
+                            [viewerOptionsFeatureKey]: viewerOptionsInitialState,
+                            [contentFeatureKey]: contentInitialState
                         }
                     }
                 })

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

@@ -25,13 +25,22 @@ 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 {
+    downloadContentWithEvent,
+    downloadContentWithFlowFile,
+    loadSideBarData,
+    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 { selectSideBarData } from '../state/content/content.selectors';
+import { SideBarData } from '../state/content';
 
 interface SupportedContentViewer {
     supportedMimeTypes: SupportedMimeTypes;
@@ -49,6 +58,7 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     viewerForm: FormGroup;
     viewAsOptions: SelectGroup[] = [];
     panelWidth: string | null = 'auto';
+    data!: SideBarData;
 
     private supportedMimeTypeId = 0;
     private supportedContentViewerLookup: Map<number, SupportedContentViewer> = new Map<
@@ -61,6 +71,9 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     viewerSelected: boolean = false;
     mimeType: string | undefined;
     private clientId: string | undefined;
+    private uri: string | undefined;
+    private eventId: number | undefined;
+    private clusterNodeId: string | undefined;
 
     private queryParamsLoaded = false;
     private viewerOptionsLoaded = false;
@@ -72,6 +85,10 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     ) {
         this.viewerForm = this.formBuilder.group({ viewAs: null });
 
+        this.store.select(selectSideBarData).subscribe((data) => {
+            this.data = data;
+        });
+
         this.store
             .select(selectViewerOptions)
             .pipe(
@@ -199,7 +216,9 @@ 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'];
+                this.eventId = queryParams['eventId'];
                 if (ref) {
                     this.store.dispatch(
                         setRef({
@@ -219,6 +238,7 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
     ngOnInit(): void {
         this.store.dispatch(loadContentViewerOptions());
         this.store.dispatch(loadAbout());
+        this.store.dispatch(loadSideBarData());
     }
 
     private handleDefaultSelection(): void {
@@ -303,6 +323,27 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
         }
     }
 
+    downloadContent(direction?: string): void {
+        if (this.eventId && direction) {
+            this.store.dispatch(
+                downloadContentWithEvent({
+                    eventId: this.eventId,
+                    direction: direction,
+                    clusterNodeId: this.clusterNodeId
+                })
+            );
+        } else if (this.uri) {
+            this.store.dispatch(
+                downloadContentWithFlowFile({
+                    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,7 @@ 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 { ContentDetails } from '../ui/content-details/content-details.component';
 
 @NgModule({
     declarations: [ContentViewerComponent],
@@ -45,7 +46,8 @@ import { NifiTooltipDirective } from '@nifi/shared';
         HexViewer,
         ImageViewer,
         NgOptimizedImage,
-        NifiTooltipDirective
+        NifiTooltipDirective,
+        ContentDetails
     ]
 })
 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 { loadSideBarDataRequestSuccess } from './index';
+import { DownloadFlowFileContentRequest } from '../../../queue/state/queue-listing';
 
 export const setRef = createAction('[Content] Set Ref', props<{ ref: string }>());
 
@@ -25,3 +27,20 @@ export const navigateToBundledContentViewer = createAction(
 );
 
 export const resetContent = createAction('[Content] Reset Content');
+
+export const loadSideBarData = createAction('[Content] Load SideBar Data');
+
+export const loadSideBarDataSuccess = createAction(
+    '[Content] Load SideBar Data Success',
+    props<{ response: loadSideBarDataRequestSuccess }>()
+);
+
+export const downloadContentWithFlowFile = createAction(
+    '[Content] Download Content With FlowFile',
+    props<{ request: DownloadFlowFileContentRequest }>()
+);
+
+export const downloadContentWithEvent = createAction(
+    '[Content] Download Content With Event',
+    props<{ eventId: number; direction: string; clusterNodeId?: string }>()
+);

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

@@ -18,16 +18,23 @@
 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';
+import { ProvenanceService } from '../../../provenance/service/provenance.service';
 
 @Injectable()
 export class ContentEffects {
     constructor(
         private actions$: Actions,
         private router: Router,
-        private nifiCommon: NiFiCommon
+        private nifiCommon: NiFiCommon,
+        private queueService: QueueService,
+        private provenanceService: ProvenanceService,
+        private store: Store<NiFiState>
     ) {}
 
     navigateToBundledContentViewer$ = createEffect(
@@ -46,4 +53,99 @@ export class ContentEffects {
             ),
         { dispatch: false }
     );
+
+    loadSideBarData$ = createEffect(() =>
+        this.actions$.pipe(
+            ofType(ContentActions.loadSideBarData),
+            withLatestFrom(this.store.pipe(select(selectQueryParams))),
+            switchMap(([, params]) => {
+                if (params['eventId']) {
+                    return from(
+                        this.provenanceService.getProvenanceEvent(params['eventId'], params['clusterNodeId'])
+                    ).pipe(
+                        map((response) => {
+                            return ContentActions.loadSideBarDataSuccess({
+                                response: {
+                                    data: {
+                                        flowFile: undefined,
+                                        provEvent: response.provenanceEvent
+                                    }
+                                }
+                            });
+                        }),
+                        catchError(() =>
+                            of(
+                                ContentActions.loadSideBarDataSuccess({
+                                    response: {
+                                        data: {
+                                            flowFile: undefined,
+                                            provEvent: undefined
+                                        }
+                                    }
+                                })
+                            )
+                        )
+                    );
+                } else {
+                    return 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.loadSideBarDataSuccess({
+                                response: {
+                                    data: {
+                                        flowFile: response.flowFile,
+                                        provEvent: undefined
+                                    }
+                                }
+                            });
+                        }),
+                        catchError(() =>
+                            of(
+                                ContentActions.loadSideBarDataSuccess({
+                                    response: {
+                                        data: {
+                                            flowFile: undefined,
+                                            provEvent: undefined
+                                        }
+                                    }
+                                })
+                            )
+                        )
+                    );
+                }
+            })
+        )
+    );
+
+    downloadContentWithFlowFile$ = createEffect(
+        () => () =>
+            this.actions$.pipe(
+                ofType(ContentActions.downloadContentWithFlowFile),
+                map((action) => action.request),
+                tap((request) => this.queueService.downloadContent(request))
+            ),
+        { dispatch: false }
+    );
+
+    downloadContentWithEvent$ = createEffect(
+        () => () =>
+            this.actions$.pipe(
+                ofType(ContentActions.downloadContentWithEvent),
+                map((request) => {
+                    this.provenanceService.downloadContent(request.eventId, request.direction, request.clusterNodeId);
+                })
+            ),
+        { dispatch: false }
+    );
 }

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

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

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 selectSideBarData = createSelector(selectContentState, (state: ContentState) => state.data);

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

@@ -15,8 +15,21 @@
  * limitations under the License.
  */
 
+import { FlowFile } from '../../../queue/state/queue-listing';
+import { ProvenanceEvent } from '../../../../state/shared';
+
 export const contentFeatureKey = 'content';
 
 export interface ContentState {
     ref: string | null;
+    data: SideBarData;
+}
+
+export interface loadSideBarDataRequestSuccess {
+    data: SideBarData;
+}
+
+export interface SideBarData {
+    flowFile: FlowFile | undefined;
+    provEvent: ProvenanceEvent | undefined;
 }