diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx b/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx index 691f53da589b..8cbfb1cbc2ad 100644 --- a/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx +++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx @@ -3,6 +3,8 @@ import './ToolbarActions.styles.scss'; import { FilterOutlined } from '@ant-design/icons'; import { Button, Switch, Tooltip, Typography } from 'antd'; import cx from 'classnames'; +import { PANEL_TYPES } from 'constants/queryBuilder'; +import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { Atom, SquareMousePointer, Terminal } from 'lucide-react'; import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils'; @@ -30,6 +32,7 @@ export default function LeftToolbarActions({ handleFilterVisibilityChange, }: LeftToolbarActionsProps): JSX.Element { const { clickhouse, search, queryBuilder: QB } = items; + const { panelType } = useQueryBuilder(); return (
@@ -85,12 +88,27 @@ export default function LeftToolbarActions({
Frequency chart - + {panelType === PANEL_TYPES.TABLE ? ( + + + + + + ) : ( + + )}
); diff --git a/frontend/src/pages/LogsExplorer/index.tsx b/frontend/src/pages/LogsExplorer/index.tsx index 8d5a972cc169..f8dae42d1479 100644 --- a/frontend/src/pages/LogsExplorer/index.tsx +++ b/frontend/src/pages/LogsExplorer/index.tsx @@ -8,6 +8,7 @@ import ExplorerCard from 'components/ExplorerCard/ExplorerCard'; import QuickFilters from 'components/QuickFilters/QuickFilters'; import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types'; import { LOCALSTORAGE } from 'constants/localStorage'; +import { PANEL_TYPES } from 'constants/queryBuilder'; import LogExplorerQuerySection from 'container/LogExplorerQuerySection'; import LogsExplorerViews from 'container/LogsExplorerViews'; import { @@ -33,6 +34,8 @@ import { SELECTED_VIEWS } from './utils'; function LogsExplorer(): JSX.Element { const [showFrequencyChart, setShowFrequencyChart] = useState(true); + const showFrequencyChartRef = useRef(true); + const prevPanelTypeRef = useRef(null); const [selectedView, setSelectedView] = useState( SELECTED_VIEWS.SEARCH, ); @@ -48,7 +51,7 @@ function LogsExplorer(): JSX.Element { return true; }); - const { handleRunQuery, currentQuery } = useQueryBuilder(); + const { handleRunQuery, currentQuery, panelType } = useQueryBuilder(); const listQueryKeyRef = useRef(); @@ -165,6 +168,18 @@ function LogsExplorer(): JSX.Element { [mergeWithRequiredColumns, logListOptionsFromLocalStorage], ); + useEffect(() => { + if (prevPanelTypeRef.current !== panelType) { + if (panelType === PANEL_TYPES.TABLE) { + showFrequencyChartRef.current = showFrequencyChart; + setShowFrequencyChart(false); + } else if (prevPanelTypeRef.current === PANEL_TYPES.TABLE) { + setShowFrequencyChart(showFrequencyChartRef.current); + } + prevPanelTypeRef.current = panelType; + } + }, [panelType, showFrequencyChart]); + useEffect(() => { if (!preferences || preferencesLoading) { return;