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;