IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

NodeGraph: fix rendering of node graph in dashboard panel (#44552)

Browse Source 
Signed-off-by: tharun <rajendrantharun@live.com>
This commit is contained in:
Tharun Rajendran 2022-01-27 22:49:54 +05:30 committed by GitHub
parent b5dd4842d0
commit 5721933e4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/features/explore/Explore.tsx
View File

@ -6,7 +6,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui'; import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui';
import { AbsoluteTimeRange, DataFrame, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data'; import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data';
import LogsContainer from './LogsContainer'; import LogsContainer from './LogsContainer';
import { QueryRows } from './QueryRows'; import { QueryRows } from './QueryRows';
@ -33,6 +33,7 @@ import { ExploreGraphLabel } from './ExploreGraphLabel';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { AbsoluteTimeEvent } from 'app/types/events'; import { AbsoluteTimeEvent } from 'app/types/events';
import { Unsubscribable } from 'rxjs'; import { Unsubscribable } from 'rxjs';
import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils';
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
@ -283,20 +284,14 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
const { exploreId, showTrace, queryResponse } = this.props; const { exploreId, showTrace, queryResponse } = this.props;
return ( return (
<NodeGraphContainer <NodeGraphContainer
dataFrames={this.getNodeGraphDataFrames(queryResponse.series)} dataFrames={this.memoizedGetNodeGraphDataFrames(queryResponse.series)}
exploreId={exploreId} exploreId={exploreId}
withTraceView={showTrace} withTraceView={showTrace}
/> />
); );
} }
getNodeGraphDataFrames = memoizeOne((frames: DataFrame[]) => { memoizedGetNodeGraphDataFrames = memoizeOne(getNodeGraphDataFrames);
// 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) => frame.meta?.preferredVisualisationType === 'nodeGraph');
});
renderTraceViewPanel() { renderTraceViewPanel() {
const { queryResponse, splitOpen, exploreId } = this.props; const { queryResponse, splitOpen, exploreId } = this.props;

5
public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx
View File

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import { PanelProps } from '@grafana/data'; import { PanelProps } from '@grafana/data';
import memoizeOne from 'memoize-one';
import { Options } from './types'; import { Options } from './types';
import { NodeGraph } from './NodeGraph'; import { NodeGraph } from './NodeGraph';
import { getNodeGraphDataFrames } from './utils';
import { useLinks } from '../../../features/explore/utils/links'; import { useLinks } from '../../../features/explore/utils/links';
export const NodeGraphPanel: React.FunctionComponent<PanelProps<Options>> = ({ width, height, data }) => { export const NodeGraphPanel: React.FunctionComponent<PanelProps<Options>> = ({ width, height, data }) => {
@ -14,9 +16,10 @@ export const NodeGraphPanel: React.FunctionComponent<PanelProps<Options>> = ({ w
); );
} }
const memoizedGetNodeGraphDataFrames = memoizeOne(getNodeGraphDataFrames);
return ( return (
<div style={{ width, height }}> <div style={{ width, height }}>
<NodeGraph dataFrames={data.series} getLinks={getLinks} /> <NodeGraph dataFrames={memoizedGetNodeGraphDataFrames(data.series)} getLinks={getLinks} />
</div> </div>
); );
}; };

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

@ -317,3 +317,11 @@ export function graphBounds(nodes: NodeDatum[]): Bounds {
}, },
}; };
} }
export function getNodeGraphDataFrames(frames: DataFrame[]) {
// 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) => frame.meta?.preferredVisualisationType === 'nodeGraph');
}