mirror of https://github.com/apache/nifi.git
[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
This commit is contained in:
Rob Fellows
GitHub
parent
74bd798097
commit
1cb0a53711
|
|
@ -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[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}))
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue