From 9c9ed741b2a29f6310c4b0559f745203455bd2ea Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Mon, 8 Jul 2024 20:02:10 +0530 Subject: [PATCH] feat: changed name from 'Histogram' to 'Frequency chart' (#5369) * feat: changed name from 'Histogram' to 'Frequence chart' * feat: cdoe refactor and test case changes * feat: added test case for frequency chart --- .../src/container/LogsExplorerViews/index.tsx | 6 +-- .../tests/LogsExplorerViews.test.tsx | 5 ++- .../ToolbarActions/LeftToolbarActions.tsx | 10 ++--- .../ToolbarActions/ToolbarActions.styles.scss | 2 +- .../tests/ToolbarActions.test.tsx | 14 +++---- .../__tests__/LogsExplorer.test.tsx | 39 +++++++++++++++++-- frontend/src/pages/LogsExplorer/index.tsx | 12 +++--- 7 files changed, 61 insertions(+), 27 deletions(-) diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index ced6556f44..b95fd6e6c4 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -63,10 +63,10 @@ import { v4 } from 'uuid'; function LogsExplorerViews({ selectedView, - showHistogram, + showFrequencyChart, }: { selectedView: SELECTED_VIEWS; - showHistogram: boolean; + showFrequencyChart: boolean; }): JSX.Element { const { notifications } = useNotifications(); const history = useHistory(); @@ -561,7 +561,7 @@ function LogsExplorerViews({ return (
- {showHistogram && ( + {showFrequencyChart && ( - + diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx b/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx index 487e85b785..d02a546f1f 100644 --- a/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx +++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/LeftToolbarActions.tsx @@ -10,7 +10,7 @@ interface LeftToolbarActionsProps { selectedView: string; onToggleHistrogramVisibility: () => void; onChangeSelectedView: (view: SELECTED_VIEWS) => void; - showHistogram: boolean; + showFrequencyChart: boolean; } const activeTab = 'active-tab'; @@ -22,7 +22,7 @@ export default function LeftToolbarActions({ selectedView, onToggleHistrogramVisibility, onChangeSelectedView, - showHistogram, + showFrequencyChart, }: LeftToolbarActionsProps): JSX.Element { const { clickhouse, search, queryBuilder: QB } = items; @@ -71,11 +71,11 @@ export default function LeftToolbarActions({ )}
-
- Histogram +
+ Frequency chart diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss b/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss index a29f031e37..a848cf8680 100644 --- a/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss +++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss @@ -37,7 +37,7 @@ } } - .histogram-view-controller { + .frequency-chart-view-controller { display: flex; align-items: center; padding-left: 8px; diff --git a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx index 414df975df..751bdbf99d 100644 --- a/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx +++ b/frontend/src/container/QueryBuilder/components/ToolbarActions/tests/ToolbarActions.test.tsx @@ -8,7 +8,7 @@ import RightToolbarActions from '../RightToolbarActions'; describe('ToolbarActions', () => { it('LeftToolbarActions - renders correctly with default props', async () => { const handleChangeSelectedView = jest.fn(); - const handleToggleShowHistogram = jest.fn(); + const handleToggleShowFrequencyChart = jest.fn(); const { queryByTestId } = render( { }} selectedView={SELECTED_VIEWS.SEARCH} onChangeSelectedView={handleChangeSelectedView} - onToggleHistrogramVisibility={handleToggleShowHistogram} - showHistogram + onToggleHistrogramVisibility={handleToggleShowFrequencyChart} + showFrequencyChart />, ); expect(screen.getByTestId('search-view')).toBeInTheDocument(); @@ -51,7 +51,7 @@ describe('ToolbarActions', () => { it('renders - clickhouse view and test histogram toggle', async () => { const handleChangeSelectedView = jest.fn(); - const handleToggleShowHistogram = jest.fn(); + const handleToggleShowFrequencyChart = jest.fn(); const { queryByTestId, getByRole } = render( { }} selectedView={SELECTED_VIEWS.QUERY_BUILDER} onChangeSelectedView={handleChangeSelectedView} - onToggleHistrogramVisibility={handleToggleShowHistogram} - showHistogram + onToggleHistrogramVisibility={handleToggleShowFrequencyChart} + showFrequencyChart />, ); @@ -88,7 +88,7 @@ describe('ToolbarActions', () => { expect(handleChangeSelectedView).toBeCalled(); await userEvent.click(getByRole('switch')); - expect(handleToggleShowHistogram).toBeCalled(); + expect(handleToggleShowFrequencyChart).toBeCalled(); }); it('RightToolbarActions - render correctly with props', async () => { diff --git a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx index 7100a5a5b1..ff0f891333 100644 --- a/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx +++ b/frontend/src/pages/LogsExplorer/__tests__/LogsExplorer.test.tsx @@ -35,12 +35,14 @@ jest.mock( return
Time Series Chart
; }, ); + +const frequencyChartContent = 'Frequency chart content'; jest.mock( 'container/LogsExplorerChart', () => // eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name function () { - return
Histogram Chart
; + return
{frequencyChartContent}
; }, ); @@ -83,13 +85,13 @@ describe('Logs Explorer Tests', () => { , ); - // check the presence of histogram chart - expect(getByText('Histogram Chart')).toBeInTheDocument(); + // check the presence of frequency chart content + expect(getByText(frequencyChartContent)).toBeInTheDocument(); // toggle the chart and check it gets removed from the DOM const histogramToggle = getByRole('switch'); await userEvent.click(histogramToggle); - expect(queryByText('Histogram Chart')).not.toBeInTheDocument(); + expect(queryByText(frequencyChartContent)).not.toBeInTheDocument(); // check the presence of search bar and query builder and absence of clickhouse const searchView = getByTestId('search-view'); @@ -229,4 +231,33 @@ describe('Logs Explorer Tests', () => { const aggrInterval = queryAllByText('AGGREGATION INTERVAL'); expect(aggrInterval.length).toBe(2); }); + + test('frequency chart visibility and switch toggle', async () => { + const { getByRole, queryByText } = render( + + + + + + , + + + + + , + ); + + // check the presence of Frequency Chart + expect(queryByText('Frequency chart')).toBeInTheDocument(); + + // check the default state of the histogram toggle + const histogramToggle = getByRole('switch'); + expect(histogramToggle).toBeInTheDocument(); + expect(histogramToggle).toBeChecked(); + expect(queryByText(frequencyChartContent)).toBeInTheDocument(); + + // toggle the chart and check it gets removed from the DOM + await userEvent.click(histogramToggle); + expect(queryByText(frequencyChartContent)).not.toBeInTheDocument(); + }); }); diff --git a/frontend/src/pages/LogsExplorer/index.tsx b/frontend/src/pages/LogsExplorer/index.tsx index d8f5f38804..d4422f58fe 100644 --- a/frontend/src/pages/LogsExplorer/index.tsx +++ b/frontend/src/pages/LogsExplorer/index.tsx @@ -16,15 +16,15 @@ import { WrapperStyled } from './styles'; import { SELECTED_VIEWS } from './utils'; function LogsExplorer(): JSX.Element { - const [showHistogram, setShowHistogram] = useState(true); + const [showFrequencyChart, setShowFrequencyChart] = useState(true); const [selectedView, setSelectedView] = useState( SELECTED_VIEWS.SEARCH, ); const { handleRunQuery, currentQuery } = useQueryBuilder(); - const handleToggleShowHistogram = (): void => { - setShowHistogram(!showHistogram); + const handleToggleShowFrequencyChart = (): void => { + setShowFrequencyChart(!showFrequencyChart); }; const handleChangeSelectedView = (view: SELECTED_VIEWS): void => { @@ -78,8 +78,8 @@ function LogsExplorer(): JSX.Element { items={toolbarViews} selectedView={selectedView} onChangeSelectedView={handleChangeSelectedView} - onToggleHistrogramVisibility={handleToggleShowHistogram} - showHistogram={showHistogram} + onToggleHistrogramVisibility={handleToggleShowFrequencyChart} + showFrequencyChart={showFrequencyChart} /> } rightActions={} @@ -96,7 +96,7 @@ function LogsExplorer(): JSX.Element {