grafana/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx
Andrej Ocenas 218a8de220
NodeGraph: Add node graph visualization (#29706)
* Add GraphView component

* Add service map panel

* Add more metadata visuals

* Add context menu on click

* Add context menu for services

* Fix service map in dashboard

* Add field proxy in explore linkSupplier

* Refactor the link creation

* Remove test file

* Fix scale change when view is panned

* Fix node centering

* Don't show context menu if no links

* Fix service map containers

* Add collapsible around the service map

* Fix stats computation

* Remove debug log

* Fix time stats

* Allow string timestamp

* Make panning bounded

* Add zooming by mouse wheel

* Clean up the colors

* Fix stats for single trace graph

* Don't show debug config

* Add more complex layout

* Update layout with better fixing of the root nodes

* Code cleanup

* Change how we pass in link creation function and some more cleanup

* Refactor the panel section into separate render methods

* Make the edge hover more readable

* Move stats computation to data source

* Put edge labels to front

* Simplify layout for better multi graph layout

* Update for dark theme

* Move function to utils

* Visual improvements

* Improve context menu detail

* Allow custom details

* Rename to NodeGraph

* Remove unused dependencies

* Use named color palette and add some fallbacks for missing data

* Add test data scenario

* Rename plugin

* Switch scroll zoom direction to align with google maps

* Do some perf optimisations and rise the node limit

* Update alert styling

* Rename function

* Add tests

* Add more tests

* Change data frame column mapping to use column names

* Fix test

* Fix type errors

* Don't show context menu without links

* Add beta status to panel

* Fix tests

* Changed function to standard methods

* Fix typing

* Clean up yarn.lock

* Add some UI improvements

- better styling of the zoom buttons
- disable buttons when max reached

* Fix panel references after rename

* Add panel icon
2021-01-19 16:34:43 +01:00

24 lines
651 B
TypeScript

import React from 'react';
import { PanelProps } from '@grafana/data';
import { Options } from './types';
import { NodeGraph } from '@grafana/ui';
import { useLinks } from '../../../features/explore/utils/links';
export const NodeGraphPanel: React.FunctionComponent<PanelProps<Options>> = ({ width, height, data }) => {
if (!data || !data.series.length) {
return (
<div className="panel-empty">
<p>No data found in response</p>
</div>
);
}
const getLinks = useLinks(data.timeRange);
return (
<div style={{ width, height }}>
<NodeGraph dataFrames={data.series} getLinks={getLinks} />
</div>
);
};