From 36bf49834047cf5ec0a1b2f85522ff374445a90c Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Thu, 25 Apr 2024 12:25:22 -0400 Subject: [PATCH] NIFI-13094: About dialog (#8698) * NIFI-13094: - Adding the about dialog. - Adding favicon. * NIFI-13094: - Addressing review feedback. This closes #8698 --- ...configuration-history-listing.component.ts | 2 - .../manage-remote-ports.component.ts | 9 +-- .../feature/provenance.component.ts | 2 - .../pages/queue/feature/queue.component.ts | 13 +---- .../nifi/src/app/state/about/about.actions.ts | 4 +- .../nifi/src/app/state/about/about.effects.ts | 27 ++++++++- .../nifi/src/app/state/about/about.reducer.ts | 14 +---- .../main/nifi/src/app/state/about/index.ts | 11 ++-- .../about-dialog/about-dialog.component.html | 50 +++++++++++++++++ .../about-dialog/about-dialog.component.scss | 22 ++++++++ .../about-dialog.component.spec.ts | 42 ++++++++++++++ .../about-dialog/about-dialog.component.ts | 56 +++++++++++++++++++ .../navigation/navigation.component.html | 2 +- .../common/navigation/navigation.component.ts | 6 ++ .../main/nifi/src/assets/icons/nifi-drop.svg | 17 ++++++ .../nifi/src/assets/icons/nifi-logo-about.svg | 17 ++++++ .../src/main/nifi/src/index.html | 2 +- 17 files changed, 247 insertions(+), 49 deletions(-) create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.html create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.spec.ts create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.ts create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-drop.svg create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-logo-about.svg diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.ts index ade586ed38..23ab09d939 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-listing.component.ts @@ -44,7 +44,6 @@ import { MatOptionModule } from '@angular/material/core'; import { MatSelectModule } from '@angular/material/select'; import { MatDatepickerModule } from '@angular/material/datepicker'; import { selectAbout } from '../../../../state/about/about.selectors'; -import { loadAbout } from '../../../../state/about/about.actions'; import { debounceTime } from 'rxjs'; import { NiFiCommon } from '../../../../service/nifi-common.service'; import { MatButtonModule } from '@angular/material/button'; @@ -133,7 +132,6 @@ export class FlowConfigurationHistoryListing implements OnInit, OnDestroy { ngOnInit(): void { this.refresh(); - this.store.dispatch(loadAbout()); this.onFormChanges(); } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.ts index 505a97172a..58a24fb390 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; import { Store } from '@ngrx/store'; import { filter, switchMap, take, tap } from 'rxjs'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @@ -52,13 +52,12 @@ import { selectTimeOffset } from '../../../../state/flow-configuration/flow-configuration.selectors'; import { selectAbout } from '../../../../state/about/about.selectors'; -import { loadAbout } from '../../../../state/about/about.actions'; @Component({ templateUrl: './manage-remote-ports.component.html', styleUrls: ['./manage-remote-ports.component.scss'] }) -export class ManageRemotePorts implements OnInit, OnDestroy { +export class ManageRemotePorts implements OnDestroy { initialSortColumn: 'name' | 'type' | 'tasks' | 'count' | 'size' | 'duration' | 'compression' | 'actions' = 'name'; initialSortDirection: 'asc' | 'desc' = 'asc'; activeSort: Sort = { @@ -167,10 +166,6 @@ export class ManageRemotePorts implements OnInit, OnDestroy { }); } - ngOnInit(): void { - this.store.dispatch(loadAbout()); - } - isInitialLoading(state: RemotePortsState): boolean { // using the current timestamp to detect the initial load event return state.loadedTimestamp == initialState.loadedTimestamp; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.ts index 349592a07f..40bc123306 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.ts @@ -19,7 +19,6 @@ import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { NiFiState } from '../../../state'; import { loadProvenanceOptions } from '../state/provenance-event-listing/provenance-event-listing.actions'; -import { loadAbout } from '../../../state/about/about.actions'; @Component({ selector: 'provenance', @@ -31,6 +30,5 @@ export class Provenance implements OnInit { ngOnInit(): void { this.store.dispatch(loadProvenanceOptions()); - this.store.dispatch(loadAbout()); } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.ts index fcdc6c74b0..63d9d2b830 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.ts @@ -15,20 +15,11 @@ * limitations under the License. */ -import { Component, OnInit } from '@angular/core'; -import { Store } from '@ngrx/store'; -import { NiFiState } from '../../../state'; -import { loadAbout } from '../../../state/about/about.actions'; +import { Component } from '@angular/core'; @Component({ selector: 'queue', templateUrl: './queue.component.html', styleUrls: ['./queue.component.scss'] }) -export class Queue implements OnInit { - constructor(private store: Store) {} - - ngOnInit(): void { - this.store.dispatch(loadAbout()); - } -} +export class Queue {} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.actions.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.actions.ts index a57ba69726..e1cae45d3e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.actions.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.actions.ts @@ -22,6 +22,4 @@ export const loadAbout = createAction('[About] Load About'); export const loadAboutSuccess = createAction('[About] Load About Success', props<{ response: LoadAboutResponse }>()); -export const aboutApiError = createAction('[About] About Api Error', props<{ error: string }>()); - -export const clearAboutApiError = createAction('[About] Clear About Api Error'); +export const openAboutDialog = createAction('[About] Open About Dialog'); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.effects.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.effects.ts index 901fe305f1..2661061cd0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.effects.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.effects.ts @@ -18,14 +18,20 @@ import { Injectable } from '@angular/core'; import { Actions, createEffect, ofType } from '@ngrx/effects'; import * as AboutActions from './about.actions'; -import { catchError, from, map, of, switchMap } from 'rxjs'; +import * as ErrorActions from '../error/error.actions'; +import { catchError, from, map, of, switchMap, tap } from 'rxjs'; import { AboutService } from '../../service/about.service'; +import { HttpErrorResponse } from '@angular/common/http'; +import { MatDialog } from '@angular/material/dialog'; +import { AboutDialog } from '../../ui/common/about-dialog/about-dialog.component'; +import { MEDIUM_DIALOG } from '../../index'; @Injectable() export class AboutEffects { constructor( private actions$: Actions, - private aboutService: AboutService + private aboutService: AboutService, + private dialog: MatDialog ) {} loadAbout$ = createEffect(() => @@ -39,10 +45,25 @@ export class AboutEffects { response }) ), - catchError((error) => of(AboutActions.aboutApiError({ error: error.error }))) + catchError((errorResponse: HttpErrorResponse) => + of(ErrorActions.snackBarError({ error: errorResponse.error })) + ) ) ); }) ) ); + + openAboutDialog$ = createEffect( + () => + this.actions$.pipe( + ofType(AboutActions.openAboutDialog), + tap(() => { + this.dialog.open(AboutDialog, { + ...MEDIUM_DIALOG + }); + }) + ), + { dispatch: false } + ); } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.reducer.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.reducer.ts index db98b4bb6d..02711cbdf5 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.reducer.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/about.reducer.ts @@ -17,11 +17,10 @@ import { createReducer, on } from '@ngrx/store'; import { AboutState } from './index'; -import { aboutApiError, clearAboutApiError, loadAbout, loadAboutSuccess } from './about.actions'; +import { loadAbout, loadAboutSuccess } from './about.actions'; export const initialState: AboutState = { about: null, - error: null, status: 'pending' }; @@ -34,17 +33,6 @@ export const aboutReducer = createReducer( on(loadAboutSuccess, (state, { response }) => ({ ...state, about: response.about, - error: null, status: 'success' as const - })), - on(aboutApiError, (state, { error }) => ({ - ...state, - error: error, - status: 'error' as const - })), - on(clearAboutApiError, (state) => ({ - ...state, - error: null, - status: 'pending' as const })) ); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/index.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/index.ts index ed3f499c14..d44a22451e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/index.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/about/index.ts @@ -27,14 +27,13 @@ export interface About { uri: string; contentViewerUrl: string; timezone: string; - buildTag: string; - buildRevision: string; - buildBranch: string; - buildTimestamp: string; + buildTag?: string; + buildRevision?: string; + buildBranch?: string; + buildTimestamp?: string; } export interface AboutState { about: About | null; - error: string | null; - status: 'pending' | 'loading' | 'error' | 'success'; + status: 'pending' | 'loading' | 'success'; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.html new file mode 100644 index 0000000000..f0a1454440 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.html @@ -0,0 +1,50 @@ + + +
+

About

+ +
+ @if (about$ | async; as about) { +
+ NiFi Logo +
+
+
{{ about.version }}
+ @if (about.buildTimestamp) { +
{{ about.buildTimestamp }}
+ } + @if (about.buildTag && about.buildTag !== 'HEAD') { +
Tagged {{ about.buildTag }}
+ } + @if (about.buildRevision) { +
From {{ about.buildRevision }} on branch {{ about.buildBranch }}
+ } +
+
+ Apache NiFi is a framework to support highly scalable and flexible dataflows. It can be run on + laptops up through clusters of enterprise class servers. Instead of dictating a particular dataflow + or behavior it empowers you to design your own optimal dataflow tailored to your specific + environment. +
+ } +
+ + + + +
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.scss new file mode 100644 index 0000000000..5d15f8667d --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.scss @@ -0,0 +1,22 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use '@angular/material' as mat; + +.about-dialog { + @include mat.button-density(-1); +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.spec.ts new file mode 100644 index 0000000000..d3b6db234a --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.spec.ts @@ -0,0 +1,42 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutDialog } from './about-dialog.component'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideMockStore } from '@ngrx/store/testing'; +import { initialState } from '../../../state/component-state/component-state.reducer'; + +describe('AboutDialog', () => { + let component: AboutDialog; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [AboutDialog, NoopAnimationsModule], + providers: [provideMockStore({ initialState })] + }); + fixture = TestBed.createComponent(AboutDialog); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.ts new file mode 100644 index 0000000000..b4d1280d04 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/about-dialog/about-dialog.component.ts @@ -0,0 +1,56 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatTableModule } from '@angular/material/table'; +import { MatSortModule } from '@angular/material/sort'; +import { AsyncPipe, NgOptimizedImage } from '@angular/common'; +import { NifiTooltipDirective } from '../tooltips/nifi-tooltip.directive'; +import { NifiSpinnerDirective } from '../spinner/nifi-spinner.directive'; +import { Store } from '@ngrx/store'; +import { ReactiveFormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { AboutState } from '../../../state/about'; +import { selectAbout } from '../../../state/about/about.selectors'; + +@Component({ + selector: 'about', + standalone: true, + templateUrl: './about-dialog.component.html', + imports: [ + MatButtonModule, + MatDialogModule, + MatTableModule, + MatSortModule, + NifiTooltipDirective, + NifiSpinnerDirective, + AsyncPipe, + ReactiveFormsModule, + MatFormFieldModule, + MatInputModule, + NgOptimizedImage + ], + styleUrls: ['./about-dialog.component.scss'] +}) +export class AboutDialog { + about$ = this.store.select(selectAbout); + + constructor(private store: Store) {} +} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html index 5f442bbd37..fc4ebdf18c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html @@ -140,7 +140,7 @@ Help - diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts index 2e5bf355ad..382951bc25 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts @@ -36,6 +36,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox'; import { OS_SETTING, LIGHT_THEME, DARK_THEME, ThemingService } from '../../../service/theming.service'; import { loadFlowConfiguration } from '../../../state/flow-configuration/flow-configuration.actions'; import { startCurrentUserPolling, stopCurrentUserPolling } from '../../../state/current-user/current-user.actions'; +import { loadAbout, openAboutDialog } from '../../../state/about/about.actions'; @Component({ selector: 'navigation', @@ -83,6 +84,7 @@ export class Navigation implements OnInit, OnDestroy { } ngOnInit(): void { + this.store.dispatch(loadAbout()); this.store.dispatch(loadFlowConfiguration()); this.store.dispatch(startCurrentUserPolling()); } @@ -123,6 +125,10 @@ export class Navigation implements OnInit, OnDestroy { ); } + viewAbout() { + this.store.dispatch(openAboutDialog()); + } + getCanvasLink(): string { const canvasRoute = this.storage.getItem('current-canvas-route'); return canvasRoute || '/'; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-drop.svg b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-drop.svg new file mode 100644 index 0000000000..c6c3defa03 --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-drop.svg @@ -0,0 +1,17 @@ + +Untitled-1 \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-logo-about.svg b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-logo-about.svg new file mode 100644 index 0000000000..62a8c64fda --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/icons/nifi-logo-about.svg @@ -0,0 +1,17 @@ + + \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html index b0e2c1a7af..af246a04c7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/index.html @@ -21,7 +21,7 @@ NiFi - +