IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 05:29:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Make service graph visualization use available vertical space (#50518)

Browse Source 
* Explore: make service graph visualization use available vertical space

* Use react-use
This commit is contained in:
Connor Lindsey 2022-06-14 08:33:22 -06:00 committed by GitHub
parent 0073f1b0b5
commit ddf0f94248
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/app/features/explore/NodeGraphContainer.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { useToggle } from 'react-use';
import { useToggle, useWindowSize } from 'react-use';
import { applyFieldOverrides, DataFrame, GrafanaTheme2 } from '@grafana/data';
import { Badge, Collapse, useStyles2, useTheme2 } from '@grafana/ui';
@ -54,6 +54,18 @@ export function UnconnectedNodeGraphContainer(props: Props) {
const { nodes } = useCategorizeFrames(frames);
const [open, toggleOpen] = useToggle(false);
// Calculate node graph height based on window and top position, with some padding
const { height: windowHeight } = useWindowSize();
const containerRef = useRef<HTMLDivElement>(null);
const [top, setTop] = useState(250);
useEffect(() => {
if (containerRef.current) {
const { top } = containerRef.current.getBoundingClientRect();
setTop(top);
}
}, [containerRef]);
const height = windowHeight - top - 32;
const countWarning =
withTraceView && nodes[0]?.length > 1000 ? (
<span className={styles.warningText}> ({nodes[0].length} nodes, can be slow to load)</span>
@ -72,7 +84,17 @@ export function UnconnectedNodeGraphContainer(props: Props) {
isOpen={withTraceView ? open : true}
onToggle={withTraceView ? () => toggleOpen() : undefined}
>
<div style={{ height: withTraceView ? 500 : 600 }}>
<div
ref={containerRef}
style={
withTraceView
? { height: 500 }
: {
minHeight: 600,
height,
}
}
>
<NodeGraph dataFrames={frames} getLinks={getLinks} />
</div>
</Collapse>