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: Table UI - Allow users to resize field selection section (#81201)

Browse Source 
* allow user resize of fields section in table ui

---------

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Galen Kistler 2024-01-31 11:58:02 -06:00 committed by GitHub
parent 1749ec9d5e
commit d1b938ba15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/explore/Logs/LogsColumnSearch.tsx
View File

@ -7,7 +7,7 @@ import { Field, Input, useTheme2 } from '@grafana/ui/src';
function getStyles(theme: GrafanaTheme2) {
return {
searchWrap: css({
padding: theme.spacing(0.4),
padding: `${theme.spacing(0.4)} 0 ${theme.spacing(0.4)} ${theme.spacing(0.4)}`,
}),
};
}

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

@ -1,4 +1,5 @@
import { css } from '@emotion/css';
import { Resizable, ResizeCallback } from 're-resizable';
import React, { useCallback, useEffect, useState } from 'react';
import {
@ -265,6 +266,9 @@ export function LogsTableWrap(props: Props) {
// The panel state is updated when the user interacts with the multi-select sidebar
}, [currentDataFrame, getColumnsFromProps]);
const [sidebarWidth, setSidebarWidth] = useState(220);
const tableWidth = props.width - sidebarWidth;
if (!columnsWithMeta) {
return null;
}
@ -472,11 +476,15 @@ export function LogsTableWrap(props: Props) {
props.updatePanelState({ refId: value.value, labelFieldName: logsFrame?.getLabelFieldName() ?? undefined });
};
const sidebarWidth = 220;
const totalWidth = props.width;
const tableWidth = totalWidth - sidebarWidth;
const styles = getStyles(props.theme, height, sidebarWidth);
const getOnResize: ResizeCallback = (event, direction, ref) => {
const newSidebarWidth = Number(ref.style.width.slice(0, -2));
if (!isNaN(newSidebarWidth)) {
setSidebarWidth(newSidebarWidth);
}
};
return (
<>
<div>
@ -505,16 +513,24 @@ export function LogsTableWrap(props: Props) {
)}
</div>
<div className={styles.wrapper}>
<section className={styles.sidebar}>
<LogsColumnSearch value={searchValue} onChange={onSearchInputChange} />
<LogsTableMultiSelect
reorderColumn={reorderColumn}
toggleColumn={toggleColumn}
filteredColumnsWithMeta={filteredColumnsWithMeta}
columnsWithMeta={columnsWithMeta}
clear={clearSelection}
/>
</section>
<Resizable
enable={{
right: true,
}}
handleClasses={{ right: styles.rzHandle }}
onResize={getOnResize}
>
<section className={styles.sidebar}>
<LogsColumnSearch value={searchValue} onChange={onSearchInputChange} />
<LogsTableMultiSelect
reorderColumn={reorderColumn}
toggleColumn={toggleColumn}
filteredColumnsWithMeta={filteredColumnsWithMeta}
columnsWithMeta={columnsWithMeta}
clear={clearSelection}
/>
</section>
</Resizable>
<LogsTable
logsFrame={logsFrame}
onClickFilterLabel={props.onClickFilterLabel}
@ -547,7 +563,21 @@ function getStyles(theme: GrafanaTheme2, height: number, width: number) {
fontSize: theme.typography.pxToRem(11),
overflowY: 'hidden',
width: width,
paddingRight: theme.spacing(1.5),
paddingRight: theme.spacing(3),
}),
rzHandle: css({
background: theme.colors.secondary.main,
transition: '0.3s background ease-in-out',
position: 'relative',
height: '50% !important',
width: `${theme.spacing(1)} !important`,
top: '25% !important',
right: `${theme.spacing(1)} !important`,
cursor: 'grab',
borderRadius: theme.shape.radius.pill,
['&:hover']: {
background: theme.colors.secondary.shade,
},
}),
};
}