From a24fb5d84fd45daed675e9896cd6b84682178ca3 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:27:47 +0530
Subject: [PATCH] fix: hide PromQL from table panel type (#6117)
* fix: hide PromQL from table panel type
* fix: handled switch back to query tab if promql was selected earlier
* fix: made a constant for panel-type to query-type
---
.../LeftContainer/QuerySection/index.tsx | 144 +++++++++---------
frontend/src/container/NewWidget/utils.ts | 41 +++++
2 files changed, 112 insertions(+), 73 deletions(-)
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 38fe984165..71d259784a 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,14 +1,17 @@
import './QuerySection.styles.scss';
import { Color } from '@signozhq/design-tokens';
-import { Button, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Tabs, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import PromQLIcon from 'assets/Dashboard/PromQl';
import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
import TextToolTip from 'components/TextToolTip';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import { getDefaultWidgetData } from 'container/NewWidget/utils';
+import {
+ getDefaultWidgetData,
+ PANEL_TYPE_TO_QUERY_TYPES,
+} from 'container/NewWidget/utils';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -112,16 +115,18 @@ function QuerySection({
],
);
- const handleQueryCategoryChange = (qCategory: string): void => {
- const currentQueryType = qCategory;
-
- featureResponse.refetch().then(() => {
- handleStageQuery({
- ...currentQuery,
- queryType: currentQueryType as EQueryType,
+ const handleQueryCategoryChange = useCallback(
+ (qCategory: string): void => {
+ const currentQueryType = qCategory;
+ featureResponse.refetch().then(() => {
+ handleStageQuery({
+ ...currentQuery,
+ queryType: currentQueryType as EQueryType,
+ });
});
- });
- };
+ },
+ [currentQuery, featureResponse, handleStageQuery],
+ );
const handleRunQuery = (): void => {
const widgetId = urlQuery.get('widgetId');
@@ -147,72 +152,55 @@ function QuerySection({
return config;
}, []);
- const listItems = [
- {
- key: EQueryType.QUERY_BUILDER,
- label: (
-
- ),
- tab: Query Builder,
- children: (
-
- ),
- },
- ];
+ const items = useMemo(() => {
+ const supportedQueryTypes = PANEL_TYPE_TO_QUERY_TYPES[selectedGraph] || [];
- const items = [
- {
- key: EQueryType.QUERY_BUILDER,
+ const queryTypeComponents = {
+ [EQueryType.QUERY_BUILDER]: {
+ icon: ,
+ label: 'Query Builder',
+ component: (
+
+ ),
+ },
+ [EQueryType.CLICKHOUSE]: {
+ icon: ,
+ label: 'ClickHouse Query',
+ component: ,
+ },
+ [EQueryType.PROM]: {
+ icon: (
+
+ ),
+ label: 'PromQL',
+ component: ,
+ },
+ };
+
+ return supportedQueryTypes.map((queryType) => ({
+ key: queryType,
label: (
),
- tab: Query Builder,
- children: (
-
- ),
- },
- {
- key: EQueryType.CLICKHOUSE,
- label: (
-
- ),
- tab: ClickHouse Query,
- children: ,
- },
- {
- key: EQueryType.PROM,
- label: (
-
-
-
- ),
- tab: PromQL,
- children: ,
- },
- ];
+ tab: {queryTypeComponents[queryType].label},
+ children: queryTypeComponents[queryType].component,
+ }));
+ }, [
+ selectedGraph,
+ filterConfigs,
+ selectedDashboard?.data?.version,
+ isDarkMode,
+ ]);
useEffect(() => {
registerShortcut(QBShortcuts.StageAndRunQuery, handleRunQuery);
@@ -223,6 +211,16 @@ function QuerySection({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [handleRunQuery]);
+ useEffect(() => {
+ // switch to query builder if query type is not supported
+ if (
+ selectedGraph === PANEL_TYPES.TABLE &&
+ currentQuery.queryType === EQueryType.PROM
+ ) {
+ handleQueryCategoryChange(EQueryType.QUERY_BUILDER);
+ }
+ }, [currentQuery, handleQueryCategoryChange, selectedGraph]);
+
return (
}
- items={selectedGraph === PANEL_TYPES.LIST ? listItems : items}
+ items={items}
/>
);
diff --git a/frontend/src/container/NewWidget/utils.ts b/frontend/src/container/NewWidget/utils.ts
index 22d4fa763b..cd684cad78 100644
--- a/frontend/src/container/NewWidget/utils.ts
+++ b/frontend/src/container/NewWidget/utils.ts
@@ -11,6 +11,7 @@ import {
import { cloneDeep, isEqual, set, unset } from 'lodash-es';
import { Widgets } from 'types/api/dashboard/getAll';
import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
import { DataSource } from 'types/common/queryBuilder';
export const getIsQueryModified = (
@@ -492,3 +493,43 @@ export const getDefaultWidgetData = (
...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
],
});
+
+export const PANEL_TYPE_TO_QUERY_TYPES: Record = {
+ [PANEL_TYPES.TIME_SERIES]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.TABLE]: [EQueryType.QUERY_BUILDER, EQueryType.CLICKHOUSE],
+ [PANEL_TYPES.VALUE]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.LIST]: [EQueryType.QUERY_BUILDER],
+ [PANEL_TYPES.TRACE]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.BAR]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.PIE]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.HISTOGRAM]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+ [PANEL_TYPES.EMPTY_WIDGET]: [
+ EQueryType.QUERY_BUILDER,
+ EQueryType.CLICKHOUSE,
+ EQueryType.PROM,
+ ],
+};