diff --git a/public/app/features/explore/Logs/LogsColumnSearch.tsx b/public/app/features/explore/Logs/LogsColumnSearch.tsx index 1d82f11d039..33faae16435 100644 --- a/public/app/features/explore/Logs/LogsColumnSearch.tsx +++ b/public/app/features/explore/Logs/LogsColumnSearch.tsx @@ -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)}`, }), }; } diff --git a/public/app/features/explore/Logs/LogsTableWrap.tsx b/public/app/features/explore/Logs/LogsTableWrap.tsx index 9911a50e622..9580773368a 100644 --- a/public/app/features/explore/Logs/LogsTableWrap.tsx +++ b/public/app/features/explore/Logs/LogsTableWrap.tsx @@ -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 ( <>
@@ -505,16 +513,24 @@ export function LogsTableWrap(props: Props) { )}
-
- - -
+ +
+ + +
+