diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/index.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/index.ts index c8f629b3fc..8c7bcb223e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/index.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/index.ts @@ -30,8 +30,15 @@ export const NIFI_NODE_CONFIG = { nifiInstanceLabel: 'NiFi' }; +export interface StatsNode { + id: string; + label: string; + color: string; +} + export interface Stats { min: string; max: string; mean: string; + nodes?: StatsNode[]; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts index 70af558817..a46444eeb7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts @@ -462,7 +462,12 @@ export class StatusHistoryChart { this.nodeStats$.next({ min: nodeMinValue, max: nodeMaxValue, - mean: nodeMeanValue + mean: nodeMeanValue, + nodes: nodes.map((n) => ({ + id: n.id, + label: n.label, + color: color(n.label) + })) }); // only consider the cluster with data in the brush @@ -482,7 +487,12 @@ export class StatusHistoryChart { this.clusterStats$.next({ min: clusterMinValue, max: clusterMaxValue, - mean: clusterMeanValue + mean: clusterMeanValue, + nodes: cluster.map((n) => ({ + id: n.id, + label: n.label, + color: color(n.label) + })) }); }; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html index ab7e1f6893..a8595386a3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html @@ -26,15 +26,15 @@ } @else { - @if (instances.length > 0) { + @if (instances.length > 0 && fieldDescriptors.length > 0) { @if (componentDetails$ | async; as componentDetails) {
- @for (entry of Object.entries(componentDetails); track entry) { - @if (entry[0] && entry[1]) { + @for (detail of details; track detail) { + @if (detail.key && detail.value) {
-
{{ entry[0] }}
-
{{ entry[1] }}
+
{{ detail.key }}
+
{{ detail.value }}
} } @@ -63,7 +63,12 @@ [checked]=" !!instanceVisibility['nifi-instance-id'] "> - NiFi + NiFi
@if (!!nodes && nodes.length > 0) { @@ -76,17 +81,25 @@ {{ nodeStats.mean }} -
@for (node of nodes; track node) { - - {{ node.label }} + @if (node.snapshots?.length) { +
+ + {{ node.label }} +
+ } }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts index e0aa42fcee..e5aea4ced2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts @@ -18,7 +18,7 @@ import { AfterViewInit, Component, DestroyRef, inject, Inject, OnInit } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { StatusHistoryService } from '../../../service/status-history.service'; -import { AsyncPipe } from '@angular/common'; +import { AsyncPipe, NgStyle } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; import { FieldDescriptor, @@ -45,7 +45,7 @@ import * as d3 from 'd3'; import { NiFiCommon } from '../../../service/nifi-common.service'; import { TextTip } from '../tooltips/text-tip/text-tip.component'; import { NifiTooltipDirective } from '../tooltips/nifi-tooltip.directive'; -import { TextTipInput } from '../../../state/shared'; +import { isDefinedAndNotNull, TextTipInput } from '../../../state/shared'; import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox'; import { Resizable } from '../resizable/resizable.component'; import { Instance, NIFI_NODE_CONFIG, Stats } from './index'; @@ -67,7 +67,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; NifiTooltipDirective, MatCheckboxModule, Resizable, - StatusHistoryChart + StatusHistoryChart, + NgStyle ], styleUrls: ['./status-history.component.scss'] }) @@ -79,6 +80,8 @@ export class StatusHistory implements OnInit, AfterViewInit { fieldDescriptors$ = this.store.select(selectStatusHistoryFieldDescriptors); fieldDescriptors: FieldDescriptor[] = []; + details: { key: string; value: string }[] = []; + minDate = ''; maxDate = ''; statusHistoryForm: FormGroup; @@ -86,12 +89,14 @@ export class StatusHistory implements OnInit, AfterViewInit { nodeStats: Stats = { max: 'NA', min: 'NA', - mean: 'NA' + mean: 'NA', + nodes: [] }; clusterStats: Stats = { max: 'NA', min: 'NA', - mean: 'NA' + mean: 'NA', + nodes: [] }; nodes: any[] = []; @@ -186,6 +191,10 @@ export class StatusHistory implements OnInit, AfterViewInit { this.statusHistoryForm.get('fieldDescriptor')?.setValue(descriptors[0]); this.selectedDescriptor = descriptors[0]; }); + + this.componentDetails$.pipe(isDefinedAndNotNull(), take(1)).subscribe((details) => { + this.details = Object.entries(details).map((entry) => ({ key: entry[0], value: entry[1] })); + }); } ngAfterViewInit(): void { @@ -254,4 +263,16 @@ export class StatusHistory implements OnInit, AfterViewInit { this.selectedDescriptor = { ...this.selectedDescriptor }; } } + + getColor(stats: Stats, nodeId: string): string { + if (stats.nodes && stats.nodes.length > 0) { + const nodeColor = stats.nodes?.find((c) => c.id === nodeId); + if (nodeColor) { + return nodeColor.color; + } + } + return 'unset'; + } + + protected readonly NIFI_NODE_CONFIG = NIFI_NODE_CONFIG; }