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

Logs Panel: Table UI - Query with few rows renders short table (#77653)

Browse Source 
* remove height calculation based on row count
This commit is contained in:
Galen Kistler
2023-11-07 09:22:11 -06:00
committed by GitHub
parent 8f49ec91df
commit 0ae3cd6fa5
1 changed files with 7 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/app/features/explore/Logs/LogsTableWrap.tsx
View File

@@ -50,8 +50,7 @@ export function LogsTableWrap(props: Props) {
// Filtered copy of columnsWithMeta that only includes matching results
const [filteredColumnsWithMeta, setFilteredColumnsWithMeta] = useState<fieldNameMetaStore | undefined>(undefined);
const [height, setHeight] = useState<number>(600);
const height = getTableHeight();
const dataFrame = logsFrames[0];
const getColumnsFromProps = useCallback(
@@ -200,11 +199,6 @@ export function LogsTableWrap(props: Props) {
// The panel state is updated when the user interacts with the multi-select sidebar
}, [dataFrame, getColumnsFromProps]);
// As the number of rows change, so too must the height of the table
useEffect(() => {
setHeight(getTableHeight(dataFrame.length, false));
}, [dataFrame.length]);
if (!columnsWithMeta) {
return null;
}
@@ -359,17 +353,10 @@ function getStyles(theme: GrafanaTheme2, height: number, width: number) {
};
}
/**
* from public/app/features/explore/Table/TableContainer.tsx
*/
const getTableHeight = (rowCount: number, hasSubFrames: boolean) => {
if (rowCount === 0) {
return 200;
}
// 600px is pretty small for taller monitors, using the innerHeight minus an arbitrary 500px so the table can be viewed in its entirety without needing to scroll outside the panel to see the top and the bottom
const max = Math.max(window.innerHeight - 500, 600);
const min = Math.max(rowCount * 36, hasSubFrames ? 300 : 0) + 40 + 46;
// tries to estimate table height, with a min of 300 and a max of 600
// if there are multiple tables, there is no min
return Math.min(max, min);
const getTableHeight = () => {
// Instead of making the height of the table based on the content (like in the table panel itself), let's try to use the vertical space that is available.
// Since this table is in explore, we can expect the user to be running multiple queries that return disparate numbers of rows and labels in the same session
// Also changing the height of the table between queries can be and cause content to jump, so we'll set a minimum height of 500px, and a max based on the innerHeight
// Ideally the table container should always be able to fit in the users viewport without needing to scroll
return Math.max(window.innerHeight - 500, 500);
};