GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 07:19:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide PromQL from table panel type (#6117)

Browse Source 
* 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
This commit is contained in:
SagarRajput-7 2024-10-09 11:27:47 +05:30 committed by GitHub
parent 137059ded6
commit a24fb5d84f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 112 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
View File

@ -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: (
<Button className="nav-btns">
<Atom size={14} />
<Typography>Query Builder</Typography>
</Button>
),
tab: <Typography>Query Builder</Typography>,
children: (
<QueryBuilder
panelType={PANEL_TYPES.LIST}
filterConfigs={filterConfigs}
version={selectedDashboard?.data?.version || 'v3'}
isListViewPanel
/>
),
},
];
const items = useMemo(() => {
const supportedQueryTypes = PANEL_TYPE_TO_QUERY_TYPES[selectedGraph] || [];
const items = [
{
key: EQueryType.QUERY_BUILDER,
const queryTypeComponents = {
[EQueryType.QUERY_BUILDER]: {
icon: <Atom size={14} />,
label: 'Query Builder',
component: (
<QueryBuilder
panelType={selectedGraph}
filterConfigs={filterConfigs}
version={selectedDashboard?.data?.version || 'v3'}
isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
/>
),
},
[EQueryType.CLICKHOUSE]: {
icon: <Terminal size={14} />,
label: 'ClickHouse Query',
component: <ClickHouseQueryContainer />,
},
[EQueryType.PROM]: {
icon: (
<PromQLIcon
fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
/>
),
label: 'PromQL',
component: <PromQLQueryContainer />,
},
};
return supportedQueryTypes.map((queryType) => ({
key: queryType,
label: (
<Button className="nav-btns">
<Atom size={14} />
<Typography>Query Builder</Typography>
{queryTypeComponents[queryType].icon}
<Typography>{queryTypeComponents[queryType].label}</Typography>
</Button>
),
tab: <Typography>Query Builder</Typography>,
children: (
<QueryBuilder
panelType={selectedGraph}
filterConfigs={filterConfigs}
version={selectedDashboard?.data?.version || 'v3'}
/>
),
},
{
key: EQueryType.CLICKHOUSE,
label: (
<Button className="nav-btns">
<Terminal size={14} />
<Typography>ClickHouse Query</Typography>
</Button>
),
tab: <Typography>ClickHouse Query</Typography>,
children: <ClickHouseQueryContainer />,
},
{
key: EQueryType.PROM,
label: (
<Tooltip title="PromQL">
<Button className="nav-btns">
<PromQLIcon
fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
/>
<Typography>PromQL</Typography>
</Button>
</Tooltip>
),
tab: <Typography>PromQL</Typography>,
children: <PromQLQueryContainer />,
},
];
tab: <Typography>{queryTypeComponents[queryType].label}</Typography>,
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 (
<div className="dashboard-navigation">
<Tabs
@ -267,7 +265,7 @@ function QuerySection({
</Button>
</span>
}
items={selectedGraph === PANEL_TYPES.LIST ? listItems : items}
items={items}
/>
</div>
);

41
frontend/src/container/NewWidget/utils.ts
View File

@ -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, EQueryType[]> = {
[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,
],
};