From fe5481a8e7f71c47f3fad5ea91e4b0dd78afd836 Mon Sep 17 00:00:00 2001 From: Srikanth Chekuri Date: Sun, 21 Sep 2025 19:15:52 +0530 Subject: [PATCH] Revert "feat: change Bar color opacity and make stacking as default (#9026)" This reverts commit 9d999feabb2d4ea9dc73e4cb22322611a1228e3b. --- .../src/container/ApiMonitoring/utils.tsx | 1 + .../GridCard/WidgetGraphComponent.test.tsx | 1 + .../MeterExplorer/Breakdown/graphs.ts | 1 + .../MetricsApplication.factory.ts | 1 + .../NewWidget/RightContainer/index.tsx | 2 + .../NewWidget/__test__/NewWidget.test.tsx | 95 +------------------ frontend/src/container/NewWidget/index.tsx | 10 ++ frontend/src/container/NewWidget/utils.ts | 2 +- .../__tests__/tablePanelWrapperHelper.ts | 1 + .../__tests__/valuePanelWrapperHelper.ts | 1 + .../container/QueryTable/__test__/mocks.ts | 1 + frontend/src/hooks/dashboard/utils.ts | 1 + .../src/lib/uPlotLib/utils/getSeriesData.ts | 2 +- .../utils/tests/getSeriesData.test.ts | 2 +- .../MQDetails/MetricPage/MetricPageUtil.ts | 1 + frontend/src/types/api/dashboard/getAll.ts | 1 + 16 files changed, 26 insertions(+), 97 deletions(-) diff --git a/frontend/src/container/ApiMonitoring/utils.tsx b/frontend/src/container/ApiMonitoring/utils.tsx index bb68d12248ee..6026ddbb8d9e 100644 --- a/frontend/src/container/ApiMonitoring/utils.tsx +++ b/frontend/src/container/ApiMonitoring/utils.tsx @@ -3168,6 +3168,7 @@ export const getStatusCodeBarChartWidgetData = ( }, description: '', id: '315b15fa-ff0c-442f-89f8-2bf4fb1af2f2', + isStacked: false, panelTypes: PANEL_TYPES.BAR, title: '', opacity: '', diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx index 463a3b0a2191..7ceb52799866 100644 --- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx +++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx @@ -39,6 +39,7 @@ const mockProps: WidgetGraphComponentProps = { description: '', fillSpans: false, id: '17f905f6-d355-46bd-a78e-cbc87e6f58cc', + isStacked: false, mergeAllActiveQueries: false, nullZeroValues: 'zero', opacity: '1', diff --git a/frontend/src/container/MeterExplorer/Breakdown/graphs.ts b/frontend/src/container/MeterExplorer/Breakdown/graphs.ts index 4948537f98b6..a122bdcf7c0f 100644 --- a/frontend/src/container/MeterExplorer/Breakdown/graphs.ts +++ b/frontend/src/container/MeterExplorer/Breakdown/graphs.ts @@ -38,6 +38,7 @@ export const getWidgetQueryBuilder = ({ }: GetWidgetQueryPropsReturn): Widgets => ({ description: description || '', id: id || uuid(), + isStacked: false, nullZeroValues: nullZeroValues || '', opacity: '1', panelTypes, diff --git a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts b/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts index 0157acfeac28..15eff76f8b7c 100644 --- a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts +++ b/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts @@ -14,6 +14,7 @@ export const getWidgetQueryBuilder = ({ }: GetWidgetQueryBuilderProps): Widgets => ({ description: '', id: id || v4(), + isStacked: false, nullZeroValues: '', opacity: '0', panelTypes, diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx index 4a374d977d07..3e693b625876 100644 --- a/frontend/src/container/NewWidget/RightContainer/index.tsx +++ b/frontend/src/container/NewWidget/RightContainer/index.tsx @@ -535,6 +535,8 @@ interface RightContainerProps { setTitle: Dispatch>; description: string; setDescription: Dispatch>; + stacked: boolean; + setStacked: Dispatch>; opacity: string; setOpacity: Dispatch>; selectedNullZeroValue: string; diff --git a/frontend/src/container/NewWidget/__test__/NewWidget.test.tsx b/frontend/src/container/NewWidget/__test__/NewWidget.test.tsx index 3548583a5090..68b58f3e017d 100644 --- a/frontend/src/container/NewWidget/__test__/NewWidget.test.tsx +++ b/frontend/src/container/NewWidget/__test__/NewWidget.test.tsx @@ -6,48 +6,7 @@ // - Handling multiple rows correctly // - Handling widgets with different heights -import { PANEL_TYPES } from 'constants/queryBuilder'; -import { DashboardProvider } from 'providers/Dashboard/Dashboard'; -import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider'; -import { I18nextProvider } from 'react-i18next'; -import { useSearchParams } from 'react-router-dom-v5-compat'; -import i18n from 'ReactI18'; -import { render } from 'tests/test-utils'; - -import NewWidget from '..'; -import { - getDefaultWidgetData, - placeWidgetAtBottom, - placeWidgetBetweenRows, -} from '../utils'; - -const MOCK_SEARCH_PARAMS = - '?graphType=bar&widgetId=b473eef0-8eb5-4dd3-8089-c1817734084f&compositeQuery=%7B"id"%3A"f026c678-9abf-42af-a3dc-f73dc8cbb810"%2C"builder"%3A%7B"queryData"%3A%5B%7B"dataSource"%3A"metrics"%2C"queryName"%3A"A"%2C"aggregateOperator"%3A"count"%2C"aggregateAttribute"%3A%7B"id"%3A"----"%2C"dataType"%3A""%2C"key"%3A""%2C"type"%3A""%7D%2C"timeAggregation"%3A"rate"%2C"spaceAggregation"%3A"sum"%2C"filter"%3A%7B"expression"%3A""%7D%2C"aggregations"%3A%5B%7B"metricName"%3A""%2C"temporality"%3A""%2C"timeAggregation"%3A"count"%2C"spaceAggregation"%3A"sum"%2C"reduceTo"%3A"avg"%7D%5D%2C"functions"%3A%5B%5D%2C"filters"%3A%7B"items"%3A%5B%5D%2C"op"%3A"AND"%7D%2C"expression"%3A"A"%2C"disabled"%3Afalse%2C"stepInterval"%3Anull%2C"having"%3A%5B%5D%2C"limit"%3Anull%2C"orderBy"%3A%5B%5D%2C"groupBy"%3A%5B%5D%2C"legend"%3A""%2C"reduceTo"%3A"avg"%2C"source"%3A""%7D%5D%2C"queryFormulas"%3A%5B%5D%2C"queryTraceOperator"%3A%5B%5D%7D%2C"clickhouse_sql"%3A%5B%7B"name"%3A"A"%2C"legend"%3A""%2C"disabled"%3Afalse%2C"query"%3A""%7D%5D%2C"promql"%3A%5B%7B"name"%3A"A"%2C"query"%3A""%2C"legend"%3A""%2C"disabled"%3Afalse%7D%5D%2C"queryType"%3A"builder"%7D&relativeTime=30m'; -// Mocks -jest.mock('uplot', () => ({ - paths: { spline: jest.fn(), bars: jest.fn() }, - default: jest.fn(() => ({ paths: { spline: jest.fn(), bars: jest.fn() } })), -})); - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useLocation: (): { pathname: string; search: string } => ({ - pathname: '', - search: MOCK_SEARCH_PARAMS, - }), -})); - -jest.mock('hooks/useSafeNavigate', () => ({ - useSafeNavigate: (): { safeNavigate: jest.Mock } => ({ - safeNavigate: jest.fn(), - }), -})); - -jest.mock('react-router-dom-v5-compat', () => ({ - ...jest.requireActual('react-router-dom-v5-compat'), - useSearchParams: jest.fn(), - useNavigationType: jest.fn(() => 'PUSH'), -})); +import { placeWidgetAtBottom, placeWidgetBetweenRows } from '../utils'; describe('placeWidgetAtBottom', () => { it('should place widget at (0,0) when layout is empty', () => { @@ -257,55 +216,3 @@ describe('placeWidgetBetweenRows', () => { ]); }); }); - -describe('getDefaultWidgetData', () => { - it('should set stackedBarChart to true by default for new panel creation', () => { - const widgetId = 'test-widget-123'; - const panelType = PANEL_TYPES.BAR; - - const result = getDefaultWidgetData(widgetId, panelType); - - expect(result.stackedBarChart).toBe(true); - expect(result.id).toBe(widgetId); - expect(result.panelTypes).toBe(panelType); - }); -}); - -describe('Stacking bar in new panel', () => { - it('New panel should have stack bar - true by default', () => { - // Mock useSearchParams to return the expected values - (useSearchParams as jest.Mock).mockReturnValue([ - new URLSearchParams(MOCK_SEARCH_PARAMS), - jest.fn(), - ]); - - const { container, getByText, getByRole } = render( - - - - - - - , - ); - - // Verify label is present - expect(getByText('Stack series')).toBeInTheDocument(); - - // Verify section exists - const section = container.querySelector('section > .stack-chart'); - expect(section).toBeInTheDocument(); - - // Verify switch is present and enabled (ant-switch-checked) - const switchBtn = section?.querySelector('.ant-switch'); - expect(switchBtn).toBeInTheDocument(); - expect(switchBtn).toHaveClass('ant-switch-checked'); - - // (Optional) More semantic: verify by role - expect(getByRole('switch')).toBeChecked(); - }); -}); diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 290b8d359b23..f5ad39688734 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -178,6 +178,10 @@ function NewWidget({ selectedWidget?.yAxisUnit || 'none', ); + const [stacked, setStacked] = useState( + selectedWidget?.isStacked || false, + ); + const [stackedBarChart, setStackedBarChart] = useState( selectedWidget?.stackedBarChart || false, ); @@ -254,6 +258,7 @@ function NewWidget({ query: currentQuery, title, description, + isStacked: stacked, opacity, nullZeroValues: selectedNullZeroValue, yAxisUnit, @@ -287,6 +292,7 @@ function NewWidget({ selectedTracesFields, softMax, softMin, + stacked, thresholds, title, yAxisUnit, @@ -488,6 +494,7 @@ function NewWidget({ ...(selectedWidget || ({} as Widgets)), description: selectedWidget?.description || '', timePreferance: selectedTime.enum, + isStacked: selectedWidget?.isStacked || false, opacity: selectedWidget?.opacity || '1', nullZeroValues: selectedWidget?.nullZeroValues || 'zero', title: selectedWidget?.title, @@ -517,6 +524,7 @@ function NewWidget({ ...(selectedWidget || ({} as Widgets)), description: selectedWidget?.description || '', timePreferance: selectedTime.enum, + isStacked: selectedWidget?.isStacked || false, opacity: selectedWidget?.opacity || '1', nullZeroValues: selectedWidget?.nullZeroValues || 'zero', title: selectedWidget?.title, @@ -810,6 +818,8 @@ function NewWidget({ setTitle={setTitle} description={description} setDescription={setDescription} + stacked={stacked} + setStacked={setStacked} stackedBarChart={stackedBarChart} setStackedBarChart={setStackedBarChart} opacity={opacity} diff --git a/frontend/src/container/NewWidget/utils.ts b/frontend/src/container/NewWidget/utils.ts index 918324b22bab..1be37cf5a433 100644 --- a/frontend/src/container/NewWidget/utils.ts +++ b/frontend/src/container/NewWidget/utils.ts @@ -543,6 +543,7 @@ export const getDefaultWidgetData = ( id, title: '', description: '', + isStacked: false, nullZeroValues: '', opacity: '', panelTypes: name, @@ -553,7 +554,6 @@ export const getDefaultWidgetData = ( timePreferance: 'GLOBAL_TIME', softMax: null, softMin: null, - stackedBarChart: true, selectedLogFields: defaultLogsSelectedColumns.map((field) => ({ ...field, type: field.fieldContext ?? '', diff --git a/frontend/src/container/PanelWrapper/__tests__/tablePanelWrapperHelper.ts b/frontend/src/container/PanelWrapper/__tests__/tablePanelWrapperHelper.ts index ca44be8268ad..f20df538a77e 100644 --- a/frontend/src/container/PanelWrapper/__tests__/tablePanelWrapperHelper.ts +++ b/frontend/src/container/PanelWrapper/__tests__/tablePanelWrapperHelper.ts @@ -2,6 +2,7 @@ export const tablePanelWidgetQuery = { id: '727533b0-7718-4f99-a1db-a1875649325c', title: '', description: '', + isStacked: false, nullZeroValues: 'zero', opacity: '1', panelTypes: 'table', diff --git a/frontend/src/container/PanelWrapper/__tests__/valuePanelWrapperHelper.ts b/frontend/src/container/PanelWrapper/__tests__/valuePanelWrapperHelper.ts index 83ce4336e895..4a88f4b9f3cb 100644 --- a/frontend/src/container/PanelWrapper/__tests__/valuePanelWrapperHelper.ts +++ b/frontend/src/container/PanelWrapper/__tests__/valuePanelWrapperHelper.ts @@ -2,6 +2,7 @@ export const valuePanelWidget = { id: 'b8b93086-ef01-47bf-9044-1e7abd583be4', title: 'signoz latency in ms', description: '', + isStacked: false, nullZeroValues: 'zero', opacity: '1', panelTypes: 'value', diff --git a/frontend/src/container/QueryTable/__test__/mocks.ts b/frontend/src/container/QueryTable/__test__/mocks.ts index 38fb2c92682f..8c2758508831 100644 --- a/frontend/src/container/QueryTable/__test__/mocks.ts +++ b/frontend/src/container/QueryTable/__test__/mocks.ts @@ -236,6 +236,7 @@ export const WidgetHeaderProps: any = { description: '', fillSpans: false, id: 'add65f0d-7662-4024-af51-da567759235d', + isStacked: false, mergeAllActiveQueries: false, nullZeroValues: 'zero', opacity: '1', diff --git a/frontend/src/hooks/dashboard/utils.ts b/frontend/src/hooks/dashboard/utils.ts index 39bd00f2d1b7..f9f4267baf29 100644 --- a/frontend/src/hooks/dashboard/utils.ts +++ b/frontend/src/hooks/dashboard/utils.ts @@ -52,6 +52,7 @@ export const addEmptyWidgetInDashboardJSONWithQuery = ( id: widgetId, query, description: '', + isStacked: false, nullZeroValues: '', opacity: '', title: '', diff --git a/frontend/src/lib/uPlotLib/utils/getSeriesData.ts b/frontend/src/lib/uPlotLib/utils/getSeriesData.ts index 8dff3d445c93..1ae9593474fd 100644 --- a/frontend/src/lib/uPlotLib/utils/getSeriesData.ts +++ b/frontend/src/lib/uPlotLib/utils/getSeriesData.ts @@ -86,7 +86,7 @@ const getSeries = ({ ? hiddenGraph[i] : true, label, - fill: panelType && panelType === PANEL_TYPES.BAR ? `${color}` : undefined, + fill: panelType && panelType === PANEL_TYPES.BAR ? `${color}40` : undefined, stroke: color, width: 2, spanGaps: true, diff --git a/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts b/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts index b0a900bf2b48..199df6f540fc 100644 --- a/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts +++ b/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts @@ -14,7 +14,7 @@ describe('Get Series Data', () => { expect(seriesData.length).toBe(5); expect(seriesData[1].label).toBe('firstLegend'); expect(seriesData[1].show).toBe(true); - expect(seriesData[1].fill).toBe('#C71585'); + expect(seriesData[1].fill).toBe('#C7158540'); expect(seriesData[1].width).toBe(2); }); diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts index fa477028a19b..974b0c176493 100644 --- a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts +++ b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts @@ -39,6 +39,7 @@ export const getWidgetQueryBuilder = ({ }: GetWidgetQueryPropsReturn): Widgets => ({ description: description || '', id: id || uuid(), + isStacked: false, nullZeroValues: nullZeroValues || '', opacity: '1', panelTypes, diff --git a/frontend/src/types/api/dashboard/getAll.ts b/frontend/src/types/api/dashboard/getAll.ts index 3d8304e24aea..82dc5cc89541 100644 --- a/frontend/src/types/api/dashboard/getAll.ts +++ b/frontend/src/types/api/dashboard/getAll.ts @@ -104,6 +104,7 @@ export interface ColumnUnit { [key: string]: string; } export interface IBaseWidget { + isStacked: boolean; id: string; panelTypes: PANEL_TYPES; title: ReactNode;