You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by rf...@apache.org on 2024/01/16 13:48:27 UTC
(nifi) branch main updated: NIFI-12597: Introducing a common navigation bar across all pages (#8237)
This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 7c09aabb4a NIFI-12597: Introducing a common navigation bar across all pages (#8237)
7c09aabb4a is described below
commit 7c09aabb4a1db9054b9e2f7f5f9cc50ec66256db
Author: Matt Gilman <ma...@gmail.com>
AuthorDate: Tue Jan 16 08:48:22 2024 -0500
NIFI-12597: Introducing a common navigation bar across all pages (#8237)
* NIFI-12597:
- Introducing a common navigation bar across all pages.
* NIFI-12597:
- Introducing navigation bar to queue listing.
This closes #8237
---
.../feature/access-policies.component.html | 12 +-
.../feature/access-policies.component.spec.ts | 10 +-
.../feature/access-policies.module.ts | 4 +-
.../bulletins/feature/bulletins.component.html | 14 +-
.../pages/bulletins/feature/bulletins.module.ts | 4 +-
.../pages/counters/feature/counters.component.html | 14 +-
.../counters/feature/counters.component.spec.ts | 10 +-
.../app/pages/counters/feature/counters.module.ts | 4 +-
.../header/flow-status/flow-status.component.scss | 3 -
.../ui/canvas/header/header.component.html | 176 ++++-----------------
.../ui/canvas/header/header.component.scss | 47 ------
.../ui/canvas/header/header.component.spec.ts | 39 +++--
.../ui/canvas/header/header.component.ts | 47 +-----
.../feature/parameter-contexts.component.html | 14 +-
.../feature/parameter-contexts.component.spec.ts | 10 +-
.../feature/parameter-contexts.module.ts | 4 +-
.../provenance/feature/provenance.component.html | 14 +-
.../feature/provenance.component.spec.ts | 12 +-
.../pages/provenance/feature/provenance.module.ts | 4 +-
.../app/pages/queue/feature/queue.component.html | 12 +-
.../pages/queue/feature/queue.component.spec.ts | 10 +-
.../src/app/pages/queue/feature/queue.module.ts | 7 +-
.../src/app/pages/queue/service/queue.service.ts | 10 +-
.../flowfile-table/flowfile-table.component.ts | 2 -
.../pages/settings/feature/settings.component.html | 12 +-
.../settings/feature/settings.component.spec.ts | 12 +-
.../app/pages/settings/feature/settings.module.ts | 4 +-
.../pages/summary/feature/summary.component.html | 12 +-
.../summary/feature/summary.component.spec.ts | 10 +-
.../app/pages/summary/feature/summary.module.ts | 4 +-
.../app/pages/users/feature/users.component.html | 14 +-
.../pages/users/feature/users.component.spec.ts | 10 +-
.../src/app/pages/users/feature/users.module.ts | 4 +-
.../ui/common/navigation/navigation.component.html | 145 +++++++++++++++++
.../common/navigation/navigation.component.scss} | 5 +-
.../navigation/navigation.component.spec.ts} | 17 +-
.../common/navigation/navigation.component.ts} | 65 +++-----
.../src/main/nifi/src/styles.scss | 5 +
38 files changed, 384 insertions(+), 418 deletions(-)
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
index 42f3ca3285..0c95453fea 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.html
@@ -15,14 +15,14 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5">
<h3 class="text-xl bold access-policies-header">Access Policies</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
</div>
- <div class="flex-1">
+ <div class="px-5 flex-1">
<router-outlet></router-outlet>
</div>
</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.spec.ts
index 21cbd7545d..035f496df0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.spec.ts
@@ -21,15 +21,23 @@ import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { initialState } from '../state/access-policy/access-policy.reducer';
+import { Component } from '@angular/core';
describe('AccessPolicies', () => {
let component: AccessPolicies;
let fixture: ComponentFixture<AccessPolicies>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AccessPolicies],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.module.ts
index 9e7a66b10b..163a532eed 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.module.ts
@@ -26,6 +26,7 @@ import { MatDialogModule } from '@angular/material/dialog';
import { AccessPolicyEffects } from '../state/access-policy/access-policy.effects';
import { TenantsEffects } from '../state/tenants/tenants.effects';
import { PolicyComponentEffects } from '../state/policy-component/policy-component.effects';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [AccessPolicies],
@@ -35,7 +36,8 @@ import { PolicyComponentEffects } from '../state/policy-component/policy-compone
AccessPoliciesRoutingModule,
StoreModule.forFeature(accessPoliciesFeatureKey, reducers),
EffectsModule.forFeature(AccessPolicyEffects, TenantsEffects, PolicyComponentEffects),
- MatDialogModule
+ MatDialogModule,
+ Navigation
]
})
export class AccessPoliciesModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
index 5e212d9d69..94f3467a2f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold bulletin-board-header">NiFi Bulletin Board</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
- <bulletin-board></bulletin-board>
+ <bulletin-board class="flex-1"></bulletin-board>
</div>
</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.module.ts
index f2f180b490..8d6f02b924 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.module.ts
@@ -25,6 +25,7 @@ import { BulletinBoardEffects } from '../state/bulletin-board/bulletin-board.eff
import { BulletinsRoutingModule } from './bulletins-routing.module';
import { CounterListingModule } from '../../counters/ui/counter-listing/counter-listing.module';
import { BulletinBoard } from '../ui/bulletin-board/bulletin-board.component';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Bulletins],
@@ -35,7 +36,8 @@ import { BulletinBoard } from '../ui/bulletin-board/bulletin-board.component';
StoreModule.forFeature(bulletinsFeatureKey, reducers),
EffectsModule.forFeature(BulletinBoardEffects),
CounterListingModule,
- BulletinBoard
+ BulletinBoard,
+ Navigation
]
})
export class BulletinsModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
index 73fcf5e390..6847c486aa 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold counter-header">NiFi Counters</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
- <counter-listing></counter-listing>
+ <counter-listing class="flex-1"></counter-listing>
</div>
</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.spec.ts
index e30779c978..fba71a451e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.spec.ts
@@ -22,15 +22,23 @@ import { initialState } from '../state/counter-listing/counter-listing.reducer';
import { CounterListing } from '../ui/counter-listing/counter-listing.component';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
+import { Component } from '@angular/core';
describe('Counters', () => {
let component: Counters;
let fixture: ComponentFixture<Counters>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Counters, CounterListing],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [provideMockStore({ initialState })]
});
fixture = TestBed.createComponent(Counters);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.module.ts
index 0d4d5d8939..1b8acdfa5c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.module.ts
@@ -25,6 +25,7 @@ import { EffectsModule } from '@ngrx/effects';
import { CounterListingEffects } from '../state/counter-listing/counter-listing.effects';
import { CounterListingModule } from '../ui/counter-listing/counter-listing.module';
import { MatDialogModule } from '@angular/material/dialog';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Counters],
@@ -35,7 +36,8 @@ import { MatDialogModule } from '@angular/material/dialog';
StoreModule.forFeature(countersFeatureKey, reducers),
EffectsModule.forFeature(CounterListingEffects),
CounterListingModule,
- MatDialogModule
+ MatDialogModule,
+ Navigation
]
})
export class CountersModule {}
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/canvas/header/flow-status/flow-status.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.scss
index d49379d56e..090fd9bf93 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.scss
@@ -18,9 +18,6 @@
.flow-status {
border-bottom: 1px solid #aabbc3;
box-sizing: content-box;
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
- position: relative;
- z-index: 2;
font-size: 15px;
.fa,
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/canvas/header/header.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
index a4d6754461..7a2c476c19 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
@@ -15,151 +15,37 @@
~ limitations under the License.
-->
-<header>
- <nav class="bg-nifi-primary nifi-header">
- <div class="flex justify-between items-center h-16 pl-4">
- <div class="flex">
- <div class="h-16 w-28 mr-6 relative">
- <img ngSrc="assets/icons/nifi-logo.svg" fill priority alt="NiFi Logo" />
- </div>
- <new-canvas-item
- [type]="ComponentType.Processor"
- iconClass="icon-processor"
- iconHoverClass="icon-processor-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.InputPort"
- iconClass="icon-port-in"
- iconHoverClass="icon-port-in-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.OutputPort"
- iconClass="icon-port-out"
- iconHoverClass="icon-port-out-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.ProcessGroup"
- iconClass="icon-group"
- iconHoverClass="icon-group-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.RemoteProcessGroup"
- iconClass="icon-group-remote"
- iconHoverClass="icon-group-remote-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.Funnel"
- iconClass="icon-funnel"
- iconHoverClass="icon-funnel-add"></new-canvas-item>
- <new-canvas-item
- [type]="ComponentType.Label"
- iconClass="icon-label"
- iconHoverClass="icon-label-add"></new-canvas-item>
- </div>
- <div class="flex justify-between items-center gap-x-1" *ngIf="currentUser$ | async as user">
- <div class="flex flex-col justify-between items-end gap-y-1">
- <div class="current-user">{{ user.identity }}</div>
- <a href="#" *ngIf="allowLogin(user)">log in</a>
- <a (click)="logout()" *ngIf="hasToken()">log out</a>
- </div>
- <button
- mat-button
- [matMenuTriggerFor]="globalMenu"
- class="h-16 w-16 flex items-center justify-center icon global-menu">
- <i class="fa fa-navicon"></i>
- </button>
- <mat-menu #globalMenu="matMenu" xPosition="before">
- <button mat-menu-item class="global-menu-item" [routerLink]="['/summary']">
- <i class="fa fa-fw fa-table mr-2"></i>
- Summary
- </button>
- <button
- mat-menu-item
- class="global-menu-item"
- [routerLink]="['/counters']"
- [disabled]="!user.countersPermissions.canRead">
- <i class="icon fa-fw icon-counter mr-2"></i>
- Counter
- </button>
- <button mat-menu-item class="global-menu-item" [routerLink]="['/bulletins']">
- <i class="fa fa-fw fa-sticky-note-o mr-2"></i>
- Bulletin Board
- </button>
- <mat-divider></mat-divider>
- <button
- mat-menu-item
- class="global-menu-item"
- [routerLink]="['/provenance']"
- [disabled]="!user.provenancePermissions.canRead">
- <i class="icon fa-fw icon-provenance mr-2"></i>
- Data Provenance
- </button>
- <mat-divider></mat-divider>
- <button
- mat-menu-item
- class="global-menu-item"
- [routerLink]="['/settings']"
- [disabled]="!user.controllerPermissions.canRead">
- <i class="fa fa-fw fa-wrench mr-2"></i>
- Controller Settings
- </button>
- <button mat-menu-item class="global-menu-item" [routerLink]="['/parameter-contexts']">
- <i class="fa fa-fw mr-2"></i>
- Parameter Contexts
- </button>
- <button mat-menu-item class="global-menu-item">
- <i class="fa fa-fw fa-cubes mr-2"></i>
- Cluster
- </button>
- <button mat-menu-item class="global-menu-item">
- <i class="fa fa-fw fa-history mr-2"></i>
- Flow Configuration History
- </button>
- <button mat-menu-item class="global-menu-item" (click)="viewNodeStatusHistory()">
- <i class="fa fa-fw fa-area-chart mr-2"></i>
- Node Status History
- </button>
- <button
- mat-menu-item
- class="global-menu-item"
- [disabled]="!user.systemPermissions.canRead"
- (click)="viewSystemDiagnostics()">
- <i class="fa fa-fw mr-2"></i>
- System Diagnostics
- </button>
- <ng-container *ngIf="flowConfiguration$ | async as flowConfiguration">
- <ng-container *ngIf="flowConfiguration.supportsManagedAuthorizer">
- <mat-divider></mat-divider>
- <button
- mat-menu-item
- class="global-menu-item"
- [routerLink]="['/users']"
- [disabled]="!user.tenantsPermissions.canRead">
- <i class="fa fa-fw fa-users mr-2"></i>
- Users
- </button>
- <button
- mat-menu-item
- class="global-menu-item"
- [routerLink]="['/access-policies', 'global']"
- [disabled]="
- !user.tenantsPermissions.canRead ||
- !user.policiesPermissions.canRead ||
- !user.policiesPermissions.canWrite
- ">
- <i class="fa fa-fw fa-key mr-2"></i>
- Policies
- </button>
- </ng-container>
- </ng-container>
- <mat-divider></mat-divider>
- <button mat-menu-item class="global-menu-item">
- <i class="fa fa-fw fa-question-circle mr-2"></i>
- Help
- </button>
- <button mat-menu-item class="global-menu-item">
- <i class="fa fa-fw fa-info-circle mr-2"></i>
- About
- </button>
- </mat-menu>
- </div>
- </div>
- </nav>
+<header class="nifi-header">
+ <navigation>
+ <new-canvas-item
+ [type]="ComponentType.Processor"
+ iconClass="icon-processor"
+ iconHoverClass="icon-processor-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.InputPort"
+ iconClass="icon-port-in"
+ iconHoverClass="icon-port-in-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.OutputPort"
+ iconClass="icon-port-out"
+ iconHoverClass="icon-port-out-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.ProcessGroup"
+ iconClass="icon-group"
+ iconHoverClass="icon-group-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.RemoteProcessGroup"
+ iconClass="icon-group-remote"
+ iconHoverClass="icon-group-remote-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.Funnel"
+ iconClass="icon-funnel"
+ iconHoverClass="icon-funnel-add"></new-canvas-item>
+ <new-canvas-item
+ [type]="ComponentType.Label"
+ iconClass="icon-label"
+ iconHoverClass="icon-label-add"></new-canvas-item>
+ </navigation>
<flow-status
[controllerStatus]="(controllerStatus$ | async)!"
[lastRefreshed]="(lastRefreshed$ | async)!"
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/canvas/header/header.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.scss
index e9b32765a1..2944f98194 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.scss
@@ -14,50 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-.nifi-header {
- position: relative;
- z-index: 3;
-
- .icon {
- font-size: 32px;
- color: #004849;
- }
-
- .current-user {
- font-family: 'Roboto Slab';
- font-style: normal;
- font-weight: normal;
- font-size: 12px;
- max-width: 250px;
- text-overflow: ellipsis;
- line-height: normal;
- overflow: hidden;
- white-space: nowrap;
- color: #262626;
- }
-
- a {
- font-size: 12px;
- text-transform: uppercase;
- }
-
- .global-menu {
- height: 64px;
- width: 64px;
- border-radius: 0;
- }
-
- .global-menu:hover {
- background-color: #e3e8eb;
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
- }
-}
-
-button.global-menu-item {
- .fa,
- .icon {
- text-align: start;
- color: #728e9b;
- }
-}
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/canvas/header/header.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.spec.ts
index 0413141ea2..b9bd124c11 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.spec.ts
@@ -24,27 +24,35 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NewCanvasItem } from './new-canvas-item/new-canvas-item.component';
import { MatMenuModule } from '@angular/material/menu';
import { MatDividerModule } from '@angular/material/divider';
-import { FlowStatus } from './flow-status/flow-status.component';
-import { RouterModule } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
import {
selectClusterSummary,
selectControllerBulletins,
selectControllerStatus
} from '../../../state/flow/flow.selectors';
import { ClusterSummary, ControllerStatus } from '../../../state/flow';
-import { Search } from './search/search.component';
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { selectCurrentUser } from '../../../../../state/current-user/current-user.selectors';
-import * as fromUser from '../../../../../state/current-user/current-user.reducer';
-import { selectFlowConfiguration } from '../../../../../state/flow-configuration/flow-configuration.selectors';
-import * as fromFlowConfiguration from '../../../../../state/flow-configuration/flow-configuration.reducer';
+import { Component } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
+ @Component({
+ selector: 'flow-status',
+ standalone: true,
+ template: ''
+ })
+ class MockFlowStatus {}
+
const clusterSummary: ClusterSummary = {
clustered: false,
connectedToCluster: false,
@@ -76,17 +84,16 @@ describe('HeaderComponent', () => {
imports: [
HeaderComponent,
NewCanvasItem,
- FlowStatus,
- Search,
HttpClientTestingModule,
+ MockFlowStatus,
MatMenuModule,
MatDividerModule,
- RouterModule,
RouterTestingModule,
CdkOverlayOrigin,
CdkConnectedOverlay,
FormsModule,
- ReactiveFormsModule
+ ReactiveFormsModule,
+ MockNavigation
],
providers: [
provideMockStore({
@@ -103,14 +110,6 @@ describe('HeaderComponent', () => {
{
selector: selectControllerBulletins,
value: []
- },
- {
- selector: selectCurrentUser,
- value: fromUser.initialState.user
- },
- {
- selector: selectFlowConfiguration,
- value: fromFlowConfiguration.initialState.flowConfiguration
}
]
})
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/canvas/header/header.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/canvas/header/header.component.ts
index 02e4d77bfe..5af040a7aa 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.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/canvas/header/header.component.ts
@@ -26,10 +26,6 @@ import {
selectCurrentProcessGroupId,
selectLastRefreshed
} from '../../../state/flow/flow.selectors';
-import { selectCurrentUser } from '../../../../../state/current-user/current-user.selectors';
-import { CurrentUser } from '../../../../../state/current-user';
-import { AuthStorage } from '../../../../../service/auth-storage.service';
-import { AuthService } from '../../../../../service/auth.service';
import { LoadingService } from '../../../../../service/loading.service';
import { NewCanvasItem } from './new-canvas-item/new-canvas-item.component';
import { MatButtonModule } from '@angular/material/button';
@@ -38,9 +34,7 @@ import { AsyncPipe, NgIf, NgOptimizedImage } from '@angular/common';
import { MatDividerModule } from '@angular/material/divider';
import { RouterLink } from '@angular/router';
import { FlowStatus } from './flow-status/flow-status.component';
-import { getNodeStatusHistoryAndOpenDialog } from '../../../../../state/status-history/status-history.actions';
-import { getSystemDiagnosticsAndOpenDialog } from '../../../../../state/system-diagnostics/system-diagnostics.actions';
-import { selectFlowConfiguration } from '../../../../../state/flow-configuration/flow-configuration.selectors';
+import { Navigation } from '../../../../../ui/common/navigation/navigation.component';
@Component({
selector: 'fd-header',
@@ -55,7 +49,8 @@ import { selectFlowConfiguration } from '../../../../../state/flow-configuration
RouterLink,
NgIf,
FlowStatus,
- NgOptimizedImage
+ NgOptimizedImage,
+ Navigation
],
styleUrls: ['./header.component.scss']
})
@@ -66,46 +61,10 @@ export class HeaderComponent {
lastRefreshed$ = this.store.select(selectLastRefreshed);
clusterSummary$ = this.store.select(selectClusterSummary);
controllerBulletins$ = this.store.select(selectControllerBulletins);
- currentUser$ = this.store.select(selectCurrentUser);
- flowConfiguration$ = this.store.select(selectFlowConfiguration);
currentProcessGroupId$ = this.store.select(selectCurrentProcessGroupId);
constructor(
private store: Store<CanvasState>,
- private authStorage: AuthStorage,
- private authService: AuthService,
public loadingService: LoadingService
) {}
-
- allowLogin(user: CurrentUser): boolean {
- return user.anonymous && location.protocol === 'https:';
- }
-
- hasToken(): boolean {
- return this.authStorage.hasToken();
- }
-
- logout(): void {
- this.authService.logout();
- }
-
- viewNodeStatusHistory(): void {
- this.store.dispatch(
- getNodeStatusHistoryAndOpenDialog({
- request: {
- source: 'menu'
- }
- })
- );
- }
-
- viewSystemDiagnostics() {
- this.store.dispatch(
- getSystemDiagnosticsAndOpenDialog({
- request: {
- nodewise: false
- }
- })
- );
- }
}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
index 21abf532d3..63474c1a0b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold parameter-context-header">Parameter Contexts</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
- <parameter-context-listing></parameter-context-listing>
+ <parameter-context-listing class="flex-1"></parameter-context-listing>
</div>
</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.spec.ts
index 967273619b..36122c1452 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.spec.ts
@@ -23,15 +23,23 @@ import { initialState } from '../state/parameter-context-listing/parameter-conte
import { ParameterContextListing } from '../ui/parameter-context-listing/parameter-context-listing.component';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
+import { Component } from '@angular/core';
describe('ParameterContexts', () => {
let component: ParameterContexts;
let fixture: ComponentFixture<ParameterContexts>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ParameterContexts, ParameterContextListing],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.module.ts
index f5216d10da..6d07b9dfbd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.module.ts
@@ -24,6 +24,7 @@ import { ParameterContextsRoutingModule } from './parameter-contexts-routing.mod
import { parameterContextsFeatureKey, reducers } from '../state';
import { ParameterContextListingEffects } from '../state/parameter-context-listing/parameter-context-listing.effects';
import { ParameterContextListingModule } from '../ui/parameter-context-listing/parameter-context-listing.module';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [ParameterContexts],
@@ -33,7 +34,8 @@ import { ParameterContextListingModule } from '../ui/parameter-context-listing/p
ParameterContextsRoutingModule,
StoreModule.forFeature(parameterContextsFeatureKey, reducers),
EffectsModule.forFeature(ParameterContextListingEffects),
- ParameterContextListingModule
+ ParameterContextListingModule,
+ Navigation
]
})
export class ParameterContextsModule {}
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.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
index f14af50f77..718af5c6b5 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.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
- <h3 class="text-xl bold provenance-header">Provenance</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <h3 class="px-5 text-xl bold provenance-header">Provenance</h3>
+ <div class="px-5 flex-1">
<router-outlet></router-outlet>
</div>
</div>
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.spec.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.spec.ts
index 200affe6d8..ab5bc363f0 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.spec.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.spec.ts
@@ -22,15 +22,25 @@ import { provideMockStore } from '@ngrx/store/testing';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { initialState } from '../state/provenance-event-listing/provenance-event-listing.reducer';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { Component } from '@angular/core';
describe('Provenance', () => {
let component: Provenance;
let fixture: ComponentFixture<Provenance>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Provenance],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
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.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.module.ts
index 6943a4db9f..c6b7c5ac76 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.module.ts
@@ -25,6 +25,7 @@ import { provenanceFeatureKey, reducers } from '../state';
import { ProvenanceEventListingEffects } from '../state/provenance-event-listing/provenance-event-listing.effects';
import { MatDialogModule } from '@angular/material/dialog';
import { LineageEffects } from '../state/lineage/lineage.effects';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Provenance],
@@ -34,7 +35,8 @@ import { LineageEffects } from '../state/lineage/lineage.effects';
MatDialogModule,
ProvenanceRoutingModule,
StoreModule.forFeature(provenanceFeatureKey, reducers),
- EffectsModule.forFeature(ProvenanceEventListingEffects, LineageEffects)
+ EffectsModule.forFeature(ProvenanceEventListingEffects, LineageEffects),
+ Navigation
]
})
export class ProvenanceModule {}
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.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html
index c349efca0c..ee813dae39 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.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.html
@@ -15,13 +15,11 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-end">
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1">
<router-outlet></router-outlet>
</div>
</div>
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.spec.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.spec.ts
index 1eb8b766a1..9a2cb5ce7a 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.spec.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.spec.ts
@@ -22,15 +22,23 @@ import { provideMockStore } from '@ngrx/store/testing';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { initialState } from '../state/queue-listing/queue-listing.reducer';
+import { Component } from '@angular/core';
describe('Queue', () => {
let component: Queue;
let fixture: ComponentFixture<Queue>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Queue],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
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.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.module.ts
index 222a2ec746..b8d398036a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.module.ts
@@ -17,17 +17,14 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
import { Queue } from './queue.component';
import { QueueRoutingModule } from './queue-routing.module';
-import { queueFeatureKey, reducers } from '../state';
import { MatDialogModule } from '@angular/material/dialog';
-import { QueueListingEffects } from '../state/queue-listing/queue-listing.effects';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Queue],
exports: [Queue],
- imports: [CommonModule, MatDialogModule, QueueRoutingModule]
+ imports: [CommonModule, MatDialogModule, QueueRoutingModule, Navigation]
})
export class QueueModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/service/queue.service.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/service/queue.service.ts
index 7d3322addf..afdd3e763a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/service/queue.service.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/service/queue.service.ts
@@ -16,16 +16,10 @@
*/
import { Injectable } from '@angular/core';
-import { Observable, throwError } from 'rxjs';
+import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { NiFiCommon } from '../../../service/nifi-common.service';
-import { ParameterContextUpdateRequest, SubmitParameterContextUpdate } from '../../../state/shared';
-import {
- FlowFileSummary,
- ListingRequest,
- ListingRequestEntity,
- SubmitQueueListingRequest
-} from '../state/queue-listing';
+import { FlowFileSummary, ListingRequest, SubmitQueueListingRequest } from '../state/queue-listing';
@Injectable({ providedIn: 'root' })
export class QueueService {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.ts
index 0f0480a3cf..2fdc7d5b76 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.ts
@@ -22,11 +22,9 @@ import { BulletinsTip } from '../../../../../ui/common/tooltips/bulletins-tip/bu
import { ValidationErrorsTip } from '../../../../../ui/common/tooltips/validation-errors-tip/validation-errors-tip.component';
import { NiFiCommon } from '../../../../../service/nifi-common.service';
import { NgForOf, NgIf } from '@angular/common';
-import { ProvenanceEventSummary } from '../../../../../state/shared';
import { RouterLink } from '@angular/router';
import { FlowFileSummary, ListingRequest } from '../../../state/queue-listing';
import { CurrentUser } from '../../../../../state/current-user';
-import { Flow } from '../../../../flow-designer/state/flow';
@Component({
selector: 'flowfile-table',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
index 7b9a734ec0..c1a6c9cf57 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold settings-header">NiFi Settings</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1 flex flex-col">
<div class="settings-tabs">
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
<a
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.spec.ts
index 4b63282a51..5c5a4e15e1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.spec.ts
@@ -23,15 +23,23 @@ import { MatTabsModule } from '@angular/material/tabs';
import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { initialState } from '../state/general/general.reducer';
+import { Component } from '@angular/core';
-describe('SettingsComponent', () => {
+describe('Settings', () => {
let component: Settings;
let fixture: ComponentFixture<Settings>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Settings],
- imports: [MatTabsModule, RouterModule, RouterTestingModule],
+ imports: [MatTabsModule, RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.module.ts
index 421a5b433c..ba43f59442 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.module.ts
@@ -34,6 +34,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { ReportingTasksEffects } from '../state/reporting-tasks/reporting-tasks.effects';
import { RegistryClientsEffects } from '../state/registry-clients/registry-clients.effects';
import { FlowAnalysisRulesEffects } from '../state/flow-analysis-rules/flow-analysis-rules.effects';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Settings],
@@ -55,7 +56,8 @@ import { FlowAnalysisRulesEffects } from '../state/flow-analysis-rules/flow-anal
FlowAnalysisRulesEffects,
RegistryClientsEffects
),
- MatTabsModule
+ MatTabsModule,
+ Navigation
]
})
export class SettingsModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
index 56cfeb3b7e..fb3ceb8f50 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold summary-header">NiFi Summary</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1 flex flex-col">
<div class="summary-tabs">
<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
<a
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.spec.ts
index daa907c9ea..4ee074b327 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.spec.ts
@@ -22,15 +22,23 @@ import { RouterTestingModule } from '@angular/router/testing';
import { provideMockStore } from '@ngrx/store/testing';
import { Summary } from './summary.component';
import { initialState } from '../state/summary-listing/summary-listing.reducer';
+import { Component } from '@angular/core';
describe('Summary', () => {
let component: Summary;
let fixture: ComponentFixture<Summary>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Summary],
- imports: [MatTabsModule, RouterModule, RouterTestingModule],
+ imports: [MatTabsModule, RouterModule, RouterTestingModule, MockNavigation],
providers: [
provideMockStore({
initialState
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.module.ts
index 237110465e..24896d8717 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.module.ts
@@ -31,6 +31,7 @@ import { OutputPortStatusListingModule } from '../ui/output-port-status-listing/
import { InputPortStatusListingModule } from '../ui/input-port-status-listing/input-port-status-listing.module';
import { SummaryListingEffects } from '../state/summary-listing/summary-listing.effects';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Summary],
@@ -48,7 +49,8 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
InputPortStatusListingModule,
StoreModule.forFeature(summaryFeatureKey, reducers),
EffectsModule.forFeature(SummaryListingEffects),
- NgxSkeletonLoaderModule
+ NgxSkeletonLoaderModule,
+ Navigation
]
})
export class SummaryModule {}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
index c37530a5cf..88cc6d7676 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.html
@@ -15,14 +15,12 @@
~ limitations under the License.
-->
-<div class="p-4 flex flex-col h-screen justify-between gap-y-5">
- <div class="flex justify-between">
+<div class="pb-5 flex flex-col h-screen justify-between gap-y-5">
+ <header class="nifi-header">
+ <navigation></navigation>
+ </header>
+ <div class="px-5 flex-1 flex flex-col">
<h3 class="text-xl bold user-header">NiFi Users</h3>
- <button class="nifi-button" [routerLink]="['/']">
- <i class="fa fa-times"></i>
- </button>
- </div>
- <div class="flex-1">
- <user-listing></user-listing>
+ <user-listing class="flex-1"></user-listing>
</div>
</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.spec.ts
index e50430ffc8..f8a619d9e9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.component.spec.ts
@@ -22,15 +22,23 @@ import { RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { UserListing } from '../ui/user-listing/user-listing.component';
import { initialState } from '../state/user-listing/user-listing.reducer';
+import { Component } from '@angular/core';
describe('Users', () => {
let component: Users;
let fixture: ComponentFixture<Users>;
+ @Component({
+ selector: 'navigation',
+ standalone: true,
+ template: ''
+ })
+ class MockNavigation {}
+
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [Users, UserListing],
- imports: [RouterModule, RouterTestingModule],
+ imports: [RouterModule, RouterTestingModule, MockNavigation],
providers: [provideMockStore({ initialState })]
});
fixture = TestBed.createComponent(Users);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.module.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.module.ts
index f6aa8908c7..23460a1eec 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.module.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/users.module.ts
@@ -25,6 +25,7 @@ import { EffectsModule } from '@ngrx/effects';
import { MatDialogModule } from '@angular/material/dialog';
import { UserListingEffects } from '../state/user-listing/user-listing.effects';
import { UserListingModule } from '../ui/user-listing/user-listing.module';
+import { Navigation } from '../../../ui/common/navigation/navigation.component';
@NgModule({
declarations: [Users],
@@ -35,7 +36,8 @@ import { UserListingModule } from '../ui/user-listing/user-listing.module';
StoreModule.forFeature(usersFeatureKey, reducers),
EffectsModule.forFeature(UserListingEffects),
MatDialogModule,
- UserListingModule
+ UserListingModule,
+ Navigation
]
})
export class UsersModule {}
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
new file mode 100644
index 0000000000..9e458f955c
--- /dev/null
+++ 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
@@ -0,0 +1,145 @@
+<!--
+ ~ 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.
+ -->
+
+<nav class="bg-nifi-primary nifi-navigation">
+ <div class="flex justify-between items-center h-16 pl-4">
+ <div class="flex">
+ <div class="h-16 w-28 mr-6 relative">
+ <img
+ ngSrc="assets/icons/nifi-logo.svg"
+ fill
+ priority
+ alt="NiFi Logo"
+ class="pointer"
+ [routerLink]="['/']" />
+ </div>
+ <ng-content></ng-content>
+ </div>
+ <div class="flex justify-between items-center gap-x-1" *ngIf="currentUser$ | async as user">
+ <div class="flex flex-col justify-between items-end gap-y-1">
+ <div class="current-user">{{ user.identity }}</div>
+ <a href="#" *ngIf="allowLogin(user)">log in</a>
+ <a (click)="logout()" *ngIf="hasToken()">log out</a>
+ </div>
+ <button
+ mat-button
+ [matMenuTriggerFor]="globalMenu"
+ class="h-16 w-16 flex items-center justify-center icon global-menu">
+ <i class="fa fa-navicon"></i>
+ </button>
+ <mat-menu #globalMenu="matMenu" xPosition="before">
+ <button mat-menu-item class="global-menu-item" [routerLink]="['/']">
+ <i class="icon icon-drop mr-2"></i>
+ Canvas
+ </button>
+ <mat-divider></mat-divider>
+ <button mat-menu-item class="global-menu-item" [routerLink]="['/summary']">
+ <i class="fa fa-fw fa-table mr-2"></i>
+ Summary
+ </button>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [routerLink]="['/counters']"
+ [disabled]="!user.countersPermissions.canRead">
+ <i class="icon fa-fw icon-counter mr-2"></i>
+ Counter
+ </button>
+ <button mat-menu-item class="global-menu-item" [routerLink]="['/bulletins']">
+ <i class="fa fa-fw fa-sticky-note-o mr-2"></i>
+ Bulletin Board
+ </button>
+ <mat-divider></mat-divider>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [routerLink]="['/provenance']"
+ [disabled]="!user.provenancePermissions.canRead">
+ <i class="icon fa-fw icon-provenance mr-2"></i>
+ Data Provenance
+ </button>
+ <mat-divider></mat-divider>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [routerLink]="['/settings']"
+ [disabled]="!user.controllerPermissions.canRead">
+ <i class="fa fa-fw fa-wrench mr-2"></i>
+ Controller Settings
+ </button>
+ <button mat-menu-item class="global-menu-item" [routerLink]="['/parameter-contexts']">
+ <i class="fa fa-fw mr-2"></i>
+ Parameter Contexts
+ </button>
+ <button mat-menu-item class="global-menu-item">
+ <i class="fa fa-fw fa-cubes mr-2"></i>
+ Cluster
+ </button>
+ <button mat-menu-item class="global-menu-item">
+ <i class="fa fa-fw fa-history mr-2"></i>
+ Flow Configuration History
+ </button>
+ <button mat-menu-item class="global-menu-item" (click)="viewNodeStatusHistory()">
+ <i class="fa fa-fw fa-area-chart mr-2"></i>
+ Node Status History
+ </button>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [disabled]="!user.systemPermissions.canRead"
+ (click)="viewSystemDiagnostics()">
+ <i class="fa fa-fw mr-2"></i>
+ System Diagnostics
+ </button>
+ <ng-container *ngIf="flowConfiguration$ | async as flowConfiguration">
+ <ng-container *ngIf="flowConfiguration.supportsManagedAuthorizer">
+ <mat-divider></mat-divider>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [routerLink]="['/users']"
+ [disabled]="!user.tenantsPermissions.canRead">
+ <i class="fa fa-fw fa-users mr-2"></i>
+ Users
+ </button>
+ <button
+ mat-menu-item
+ class="global-menu-item"
+ [routerLink]="['/access-policies', 'global']"
+ [disabled]="
+ !user.tenantsPermissions.canRead ||
+ !user.policiesPermissions.canRead ||
+ !user.policiesPermissions.canWrite
+ ">
+ <i class="fa fa-fw fa-key mr-2"></i>
+ Policies
+ </button>
+ <mat-divider></mat-divider>
+ </ng-container>
+ </ng-container>
+ <button mat-menu-item class="global-menu-item">
+ <i class="fa fa-fw fa-question-circle mr-2"></i>
+ Help
+ </button>
+ <button mat-menu-item class="global-menu-item">
+ <i class="fa fa-fw fa-info-circle mr-2"></i>
+ About
+ </button>
+ </mat-menu>
+ </div>
+ </div>
+</nav>
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/canvas/header/header.component.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.scss
similarity index 96%
copy from nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.scss
copy to nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.scss
index e9b32765a1..04694f6a07 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.scss
@@ -15,10 +15,7 @@
* limitations under the License.
*/
-.nifi-header {
- position: relative;
- z-index: 3;
-
+.nifi-navigation {
.icon {
font-size: 32px;
color: #004849;
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.spec.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.spec.ts
similarity index 75%
copy from nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/feature/queue.component.spec.ts
copy to nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.spec.ts
index 1eb8b766a1..2edfc45248 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.spec.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.spec.ts
@@ -17,27 +17,26 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Queue } from './queue.component';
+import { Navigation } from './navigation.component';
import { provideMockStore } from '@ngrx/store/testing';
-import { RouterModule } from '@angular/router';
+import { initialState } from '../../../state/current-user/current-user.reducer';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
-import { initialState } from '../state/queue-listing/queue-listing.reducer';
-describe('Queue', () => {
- let component: Queue;
- let fixture: ComponentFixture<Queue>;
+describe('Navigation', () => {
+ let component: Navigation;
+ let fixture: ComponentFixture<Navigation>;
beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [Queue],
- imports: [RouterModule, RouterTestingModule],
+ imports: [Navigation, HttpClientTestingModule, RouterTestingModule],
providers: [
provideMockStore({
initialState
})
]
});
- fixture = TestBed.createComponent(Queue);
+ fixture = TestBed.createComponent(Navigation);
component = fixture.componentInstance;
fixture.detectChanges();
});
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/canvas/header/header.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
similarity index 50%
copy from nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.ts
copy to 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 02e4d77bfe..97b65669cd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.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
@@ -16,65 +16,36 @@
*/
import { Component } from '@angular/core';
-import { ComponentType } from '../../../../../state/shared';
-import { Store } from '@ngrx/store';
-import { CanvasState } from '../../../state';
-import {
- selectClusterSummary,
- selectControllerBulletins,
- selectControllerStatus,
- selectCurrentProcessGroupId,
- selectLastRefreshed
-} from '../../../state/flow/flow.selectors';
-import { selectCurrentUser } from '../../../../../state/current-user/current-user.selectors';
-import { CurrentUser } from '../../../../../state/current-user';
-import { AuthStorage } from '../../../../../service/auth-storage.service';
-import { AuthService } from '../../../../../service/auth.service';
-import { LoadingService } from '../../../../../service/loading.service';
-import { NewCanvasItem } from './new-canvas-item/new-canvas-item.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
import { AsyncPipe, NgIf, NgOptimizedImage } from '@angular/common';
import { MatDividerModule } from '@angular/material/divider';
+import { MatMenuModule } from '@angular/material/menu';
+import { getNodeStatusHistoryAndOpenDialog } from '../../../state/status-history/status-history.actions';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../state/system-diagnostics/system-diagnostics.actions';
+import { Store } from '@ngrx/store';
+import { AuthStorage } from '../../../service/auth-storage.service';
+import { AuthService } from '../../../service/auth.service';
+import { CurrentUser } from '../../../state/current-user';
import { RouterLink } from '@angular/router';
-import { FlowStatus } from './flow-status/flow-status.component';
-import { getNodeStatusHistoryAndOpenDialog } from '../../../../../state/status-history/status-history.actions';
-import { getSystemDiagnosticsAndOpenDialog } from '../../../../../state/system-diagnostics/system-diagnostics.actions';
-import { selectFlowConfiguration } from '../../../../../state/flow-configuration/flow-configuration.selectors';
+import { selectCurrentUser } from '../../../state/current-user/current-user.selectors';
+import { MatButtonModule } from '@angular/material/button';
+import { NiFiState } from '../../../state';
+import { selectFlowConfiguration } from '../../../state/flow-configuration/flow-configuration.selectors';
@Component({
- selector: 'fd-header',
+ selector: 'navigation',
standalone: true,
- templateUrl: './header.component.html',
- imports: [
- NewCanvasItem,
- MatButtonModule,
- MatMenuModule,
- AsyncPipe,
- MatDividerModule,
- RouterLink,
- NgIf,
- FlowStatus,
- NgOptimizedImage
- ],
- styleUrls: ['./header.component.scss']
+ imports: [NgOptimizedImage, AsyncPipe, MatDividerModule, MatMenuModule, NgIf, RouterLink, MatButtonModule],
+ templateUrl: './navigation.component.html',
+ styleUrls: ['./navigation.component.scss']
})
-export class HeaderComponent {
- protected readonly ComponentType = ComponentType;
-
- controllerStatus$ = this.store.select(selectControllerStatus);
- lastRefreshed$ = this.store.select(selectLastRefreshed);
- clusterSummary$ = this.store.select(selectClusterSummary);
- controllerBulletins$ = this.store.select(selectControllerBulletins);
+export class Navigation {
currentUser$ = this.store.select(selectCurrentUser);
flowConfiguration$ = this.store.select(selectFlowConfiguration);
- currentProcessGroupId$ = this.store.select(selectCurrentProcessGroupId);
constructor(
- private store: Store<CanvasState>,
+ private store: Store<NiFiState>,
private authStorage: AuthStorage,
- private authService: AuthService,
- public loadingService: LoadingService
+ private authService: AuthService
) {}
allowLogin(user: CurrentUser): boolean {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index 7632849f0b..602d7943cd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -248,6 +248,11 @@ a:hover {
text-decoration-color: #004849;
}
+header.nifi-header {
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
+ position: relative;
+}
+
/*
Icon for styling mat-icon in forms throughout the application.
*/