opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-25 17:44:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Node Graph Panel: Add options to configure units and arc colors (#51057)

Browse Source 
* Node Graph Panel: Add options to configure units and arc colors

* Add tests
This commit is contained in:
Connor Lindsey
2022-06-23 07:20:56 -06:00
committed by GitHub
parent d20afa2a39
commit 16aaffe0a1
6 changed files with 265 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
public/app/plugins/panel/nodeGraph/utils.ts
View File

@ -3,13 +3,14 @@ import {
DataFrame,
Field,
FieldCache,
FieldColorModeId,
FieldType,
GrafanaTheme2,
MutableDataFrame,
NodeGraphDataFrameFieldNames,
} from '@grafana/data';
import { EdgeDatum, NodeDatum } from './types';
import { EdgeDatum, NodeDatum, NodeGraphOptions } from './types';
type Line = { x1: number; y1: number; x2: number; y2: number };
@ -327,12 +328,12 @@ export function graphBounds(nodes: NodeDatum[]): Bounds {
};
}
export function getNodeGraphDataFrames(frames: DataFrame[]) {
export function getNodeGraphDataFrames(frames: DataFrame[], options?: NodeGraphOptions) {
// TODO: this not in sync with how other types of responses are handled. Other types have a query response
// processing pipeline which ends up populating redux state with proper data. As we move towards more dataFrame
// oriented API it seems like a better direction to move such processing into to visualisations and do minimal
// and lazy processing here. Needs bigger refactor so keeping nodeGraph and Traces as they are for now.
return frames.filter((frame) => {
let nodeGraphFrames = frames.filter((frame) => {
if (frame.meta?.preferredVisualisationType === 'nodeGraph') {
return true;
}
@ -348,4 +349,58 @@ export function getNodeGraphDataFrames(frames: DataFrame[]) {
return false;
});
// If panel options are provided, interpolate their values in to the data frames
if (options) {
nodeGraphFrames = applyOptionsToFrames(nodeGraphFrames, options);
}
return nodeGraphFrames;
}
export const applyOptionsToFrames = (frames: DataFrame[], options: NodeGraphOptions): DataFrame[] => {
return frames.map((frame) => {
const fieldsCache = new FieldCache(frame);
// Edges frame has source which can be used to identify nodes vs edges frames
if (fieldsCache.getFieldByName(NodeGraphDataFrameFieldNames.source.toLowerCase())) {
if (options?.edges?.mainStatUnit) {
const field = frame.fields.find((field) => field.name.toLowerCase() === NodeGraphDataFrameFieldNames.mainStat);
if (field) {
field.config = { ...field.config, unit: options.edges.mainStatUnit };
}
}
if (options?.edges?.secondaryStatUnit) {
const field = frame.fields.find(
(field) => field.name.toLowerCase() === NodeGraphDataFrameFieldNames.secondaryStat
);
if (field) {
field.config = { ...field.config, unit: options.edges.secondaryStatUnit };
}
}
} else {
if (options?.nodes?.mainStatUnit) {
const field = frame.fields.find((field) => field.name.toLowerCase() === NodeGraphDataFrameFieldNames.mainStat);
if (field) {
field.config = { ...field.config, unit: options.nodes.mainStatUnit };
}
}
if (options?.nodes?.secondaryStatUnit) {
const field = frame.fields.find(
(field) => field.name.toLowerCase() === NodeGraphDataFrameFieldNames.secondaryStat
);
if (field) {
field.config = { ...field.config, unit: options.nodes.secondaryStatUnit };
}
}
if (options?.nodes?.arcs?.length) {
for (const arc of options.nodes.arcs) {
const field = frame.fields.find((field) => field.name.toLowerCase() === arc.field);
if (field && arc.color) {
field.config = { ...field.config, color: { fixedColor: arc.color, mode: FieldColorModeId.Fixed } };
}
}
}
}
return frame;
});
};