diff --git a/frontend/src/container/FormAlertRules/ChQuerySection.tsx b/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx similarity index 70% rename from frontend/src/container/FormAlertRules/ChQuerySection.tsx rename to frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx index 49af0aed04..aa316fe558 100644 --- a/frontend/src/container/FormAlertRules/ChQuerySection.tsx +++ b/frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx @@ -3,6 +3,8 @@ import { IClickHouseQueryHandleChange } from 'container/NewWidget/LeftContainer/ import React from 'react'; import { IChQueries } from 'types/api/alerts/compositeQuery'; +import { rawQueryToIChQuery, toIClickHouseQuery } from './transform'; + function ChQuerySection({ chQueries, setChQueries, @@ -12,34 +14,25 @@ function ChQuerySection({ legend, toggleDelete, }: IClickHouseQueryHandleChange): void => { - let chQuery = chQueries.A; + const chQuery = rawQueryToIChQuery( + chQueries.A, + rawQuery, + legend, + toggleDelete, + ); - if (rawQuery) { - chQuery.rawQuery = rawQuery; - chQuery.query = rawQuery; - } - - if (legend) chQuery.legend = legend; - if (toggleDelete) { - chQuery = { - rawQuery: '', - legend: '', - name: 'A', - disabled: false, - query: '', - }; - } setChQueries({ A: { ...chQuery, }, }); }; + return ( ); diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/index.ts b/frontend/src/container/FormAlertRules/ChQuerySection/index.ts new file mode 100644 index 0000000000..a28e8594db --- /dev/null +++ b/frontend/src/container/FormAlertRules/ChQuerySection/index.ts @@ -0,0 +1,3 @@ +import ChQuerySection from './ChQuerySection'; + +export default ChQuerySection; diff --git a/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts b/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts new file mode 100644 index 0000000000..5f5198ec81 --- /dev/null +++ b/frontend/src/container/FormAlertRules/ChQuerySection/transform.ts @@ -0,0 +1,37 @@ +import { IChQuery } from 'types/api/alerts/compositeQuery'; +import { IClickHouseQuery } from 'types/api/dashboard/getAll'; + +// @description rawQueryToIChQuery transforms raw query (from ClickHouseQueryBuilder) +// to alert specific IChQuery format +export const rawQueryToIChQuery = ( + src: IChQuery, + rawQuery: string | undefined, + legend: string | undefined, + toggleDelete: boolean | undefined, +): IChQuery => { + if (toggleDelete) { + return { + rawQuery: '', + legend: '', + name: 'A', + disabled: false, + query: '', + }; + } + + return { + rawQuery: rawQuery !== undefined ? rawQuery : src.rawQuery, + query: rawQuery !== undefined ? rawQuery : src.rawQuery, + legend: legend !== undefined ? legend : src.legend, + name: 'A', + disabled: false, + }; +}; + +// @description toIClickHouseQuery transforms IChQuery (alert specific) to +// ClickHouseQueryBuilder format. The main difference is +// use of rawQuery (in ClickHouseQueryBuilder) +// and query (in alert builder) +export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => { + return { ...src, name: 'A', rawQuery: src.query }; +}; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx index 0ace45fdc8..389b7e15c4 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query.tsx @@ -54,6 +54,7 @@ function ClickHouseQueryBuilder({ } size="middle" defaultValue={queryData.legend} + value={queryData.legend} addonBefore="Legend Format" />