This is an automated email from the ASF dual-hosted git repository.
mcgilman 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 1cb0a53711 [NIFI-12848] - fixed ExpressionChanged error in Status
History dialog (#8455)
1cb0a53711 is described below
commit 1cb0a537118a413622e3ce7b2485820c4910a04c
Author: Rob Fellows <[email protected]>
AuthorDate: Wed Feb 28 16:17:33 2024 -0500
[NIFI-12848] - fixed ExpressionChanged error in Status History dialog
(#8455)
* color the legend text to match the color of the corresponding line in the
chart for each node
This closes #8455
---
.../nifi/src/app/ui/common/status-history/index.ts | 7 ++++
.../status-history-chart.component.ts | 14 ++++++-
.../status-history/status-history.component.html | 43 ++++++++++++++--------
.../status-history/status-history.component.ts | 31 +++++++++++++---
4 files changed, 73 insertions(+), 22 deletions(-)
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 @@
<ngx-skeleton-loader
count="3"></ngx-skeleton-loader>
</div>
} @else {
- @if (instances.length > 0) {
+ @if (instances.length > 0 &&
fieldDescriptors.length > 0) {
@if (componentDetails$ | async; as
componentDetails) {
<div class="flex flex-1 w-full gap-x-4">
<div class="component-details flex
flex-col gap-y-3">
- @for (entry of
Object.entries(componentDetails); track entry) {
- @if (entry[0] && entry[1]) {
+ @for (detail of details; track
detail) {
+ @if (detail.key &&
detail.value) {
<div class="flex flex-col">
- <div>{{ entry[0]
}}</div>
- <div class="value">{{
entry[1] }}</div>
+ <div>{{ detail.key
}}</div>
+ <div class="value">{{
detail.value }}</div>
</div>
}
}
@@ -63,7 +63,12 @@
[checked]="
!!instanceVisibility['nifi-instance-id']
"></mat-checkbox>
- <mat-label>NiFi</mat-label>
+ <mat-label
+ [ngStyle]="{
+ color:
getColor(nodeStats, NIFI_NODE_CONFIG.nifiInstanceId)
+ }"
+ >NiFi</mat-label
+ >
</div>
</div>
@if (!!nodes && nodes.length > 0) {
@@ -76,17 +81,25 @@
{{ nodeStats.mean
}}
</div>
</div>
- <!-- TODO display nodes to
select from-->
<div class="legend-entry">
@for (node of nodes;
track node) {
- <mat-checkbox
- color="primary"
-
[value]="node.id"
-
(change)="selectNode($event)"
- [checked]="
-
!!instanceVisibility['nifi-instance-id']
-
"></mat-checkbox>
- <mat-label>{{
node.label }}</mat-label>
+ @if
(node.snapshots?.length) {
+ <div
class="flex">
+
<mat-checkbox
+
color="primary"
+
[value]="node.id"
+
(change)="selectNode($event)"
+
[checked]="
+
!!instanceVisibility[node.id]
+
"></mat-checkbox>
+ <mat-label
+
[ngStyle]="{
+
color: getColor(nodeStats, node.id)
+ }"
+ >{{
node.label }}</mat-label
+ >
+ </div>
+ }
}
</div>
</div>
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;
}
