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

NodeGraph: Fix empty state to display 'No Data' message (#43633)

Browse Source 
* Fix "0" when no nodes present in NodeGraph

* Show no data message in NodeGraph

* Fix tests
This commit is contained in:
Connor Lindsey
2022-01-04 08:45:00 -07:00
committed by GitHub
parent c302552714
commit 2aad6e57c0
2 changed files with 68 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/panel/nodeGraph/NodeGraph.test.tsx
View File

@ -14,12 +14,14 @@ jest.mock('react-use/lib/useMeasure', () => {
}); });
describe('NodeGraph', () => { describe('NodeGraph', () => {
it('doesnt fail without any data', async () => { it('shows no data message without any data', async () => {
render(<NodeGraph dataFrames={[]} getLinks={() => []} />); render(<NodeGraph dataFrames={[]} getLinks={() => []} />);
await screen.findByText('No data');
}); });
it('can zoom in and out', async () => { it('can zoom in and out', async () => {
render(<NodeGraph dataFrames={[]} getLinks={() => []} />); render(<NodeGraph dataFrames={[makeNodesDataFrame(2), makeEdgesDataFrame([[0, 1]])]} getLinks={() => []} />);
const zoomIn = await screen.findByTitle(/Zoom in/); const zoomIn = await screen.findByTitle(/Zoom in/);
const zoomOut = await screen.findByTitle(/Zoom out/); const zoomOut = await screen.findByTitle(/Zoom out/);

22
public/app/plugins/panel/nodeGraph/NodeGraph.tsx
View File

@ -44,6 +44,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
user-select: none; user-select: none;
`, `,
noDataMsg: css`
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: ${theme.typography.h4.fontSize};
color: ${theme.colors.text.secondary};
`,
mainGroup: css` mainGroup: css`
label: mainGroup; label: mainGroup;
will-change: transform; will-change: transform;
@ -67,6 +76,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding-bottom: 5px; padding-bottom: 5px;
margin-right: 10px; margin-right: 10px;
`, `,
viewControlsWrapper: css`
margin-left: auto;
`,
alert: css` alert: css`
label: alert; label: alert;
padding: 5px 8px; padding: 5px 8px;
@ -177,6 +189,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
</div> </div>
) : null} ) : null}
{dataFrames.length ? (
<svg <svg
ref={panRef} ref={panRef}
viewBox={`${-(width / 2)} ${-(height / 2)} ${width} ${height}`} viewBox={`${-(width / 2)} ${-(height / 2)} ${width} ${height}`}
@ -210,9 +223,12 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
{!config.gridLayout && <EdgeLabels edges={edges} nodeHoveringId={nodeHover} edgeHoveringId={edgeHover} />} {!config.gridLayout && <EdgeLabels edges={edges} nodeHoveringId={nodeHover} edgeHoveringId={edgeHover} />}
</g> </g>
</svg> </svg>
) : (
<div className={styles.noDataMsg}>No data</div>
)}
<div className={styles.viewControls}> <div className={styles.viewControls}>
{nodes.length && ( {nodes.length ? (
<div className={styles.legend}> <div className={styles.legend}>
<Legend <Legend
sortable={config.gridLayout} sortable={config.gridLayout}
@ -226,8 +242,9 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
}} }}
/> />
</div> </div>
)} ) : null}
<div className={styles.viewControlsWrapper}>
<ViewControls<Config> <ViewControls<Config>
config={config} config={config}
onConfigChange={(cfg) => { onConfigChange={(cfg) => {
@ -243,6 +260,7 @@ export function NodeGraph({ getLinks, dataFrames, nodeLimit }: Props) {
disableZoomOut={isMinZoom} disableZoomOut={isMinZoom}
/> />
</div> </div>
</div>
{hiddenNodesCount > 0 && ( {hiddenNodesCount > 0 && (
<div className={styles.alert} aria-label={'Nodes hidden warning'}> <div className={styles.alert} aria-label={'Nodes hidden warning'}>