diff --git a/frontend/src/constants/dashboard.ts b/frontend/src/constants/dashboard.ts index 587b781906..2941f00077 100644 --- a/frontend/src/constants/dashboard.ts +++ b/frontend/src/constants/dashboard.ts @@ -1,5 +1,3 @@ -import { EAggregateOperator, EReduceOperator } from 'types/common/dashboard'; - export const PromQLQueryTemplate = { query: '', legend: '', @@ -11,24 +9,3 @@ export const ClickHouseQueryTemplate = { legend: '', disabled: false, }; - -export const QueryBuilderQueryTemplate = { - metricName: null, - aggregateOperator: EAggregateOperator.NOOP, - tagFilters: { - op: 'AND', - items: [], - }, - legend: '', - disabled: false, - // Specific to TIME_SERIES type graph - groupBy: [], - // Specific to VALUE type graph - reduceTo: EReduceOperator['Latest of values in timeframe'], -}; - -export const QueryBuilderFormulaTemplate = { - expression: '', - disabled: false, - legend: '', -}; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts deleted file mode 100644 index 1ee8680391..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/Options.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { EAggregateOperator } from 'types/common/dashboard'; - -export const AggregateFunctions = Object.keys(EAggregateOperator) - .filter((key) => Number.isNaN(parseInt(key, 10))) - .map((key) => ({ - label: key, - value: EAggregateOperator[key as keyof typeof EAggregateOperator], - })); - -export const TagKeyOperator = [ - { label: 'In', value: 'IN' }, - { label: 'Not In', value: 'NIN' }, - { label: 'Like', value: 'LIKE' }, - { label: 'Not Like', value: 'NLIKE' }, - // { label: 'Equal', value: 'EQ' }, - // { label: 'Not Equal', value: 'NEQ' }, - // { label: 'REGEX', value: 'REGEX' }, -]; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx index 175aae717e..304289cc74 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/index.tsx @@ -3,8 +3,8 @@ import { ClickHouseQueryTemplate } from 'constants/dashboard'; import GetQueryName from 'lib/query/GetQueryName'; import React from 'react'; import { Query } from 'types/api/dashboard/getAll'; +import { EQueryType } from 'types/common/dashboard'; -import { WIDGET_CLICKHOUSE_QUERY_KEY_NAME } from '../../constants'; import { QueryButton } from '../../styles'; import { IHandleUpdatedQuery } from '../../types'; import ClickHouseQueryBuilder from './query'; @@ -35,7 +35,7 @@ function ClickHouseQueryContainer({ // hence, this method is only applies when queryIndex is in number format. if (typeof queryIndex === 'number') { - const allQueries = queryData[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]; + const allQueries = queryData[EQueryType.CLICKHOUSE]; const currentIndexQuery = allQueries[queryIndex]; @@ -57,8 +57,8 @@ function ClickHouseQueryContainer({ } }; const addQueryHandler = (): void => { - queryData[WIDGET_CLICKHOUSE_QUERY_KEY_NAME].push({ - name: GetQueryName(queryData[WIDGET_CLICKHOUSE_QUERY_KEY_NAME]) || '', + queryData[EQueryType.CLICKHOUSE].push({ + name: GetQueryName(queryData[EQueryType.CLICKHOUSE]) || '', ...ClickHouseQueryTemplate, }); updateQueryData({ updatedQuery: { ...queryData } }); diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx index 55adbd740b..6ea88e5be8 100644 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx +++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/index.tsx @@ -3,8 +3,8 @@ import { PromQLQueryTemplate } from 'constants/dashboard'; import GetQueryName from 'lib/query/GetQueryName'; import React from 'react'; import { IPromQLQuery, Query } from 'types/api/dashboard/getAll'; +import { EQueryType } from 'types/common/dashboard'; -import { WIDGET_PROMQL_QUERY_KEY_NAME } from '../../constants'; import { QueryButton } from '../../styles'; import { IHandleUpdatedQuery } from '../../types'; import PromQLQueryBuilder from './query'; @@ -28,7 +28,7 @@ function PromQLQueryContainer({ toggleDisable, toggleDelete, }: IPromQLQueryHandleChange): void => { - const allQueries = queryData[WIDGET_PROMQL_QUERY_KEY_NAME]; + const allQueries = queryData[EQueryType.PROM]; const currentIndexQuery = allQueries[queryIndex as number]; if (query !== undefined) currentIndexQuery.query = query; if (legend !== undefined) currentIndexQuery.legend = legend; @@ -42,8 +42,8 @@ function PromQLQueryContainer({ updateQueryData({ updatedQuery: { ...queryData } }); }; const addQueryHandler = (): void => { - queryData[WIDGET_PROMQL_QUERY_KEY_NAME].push({ - name: GetQueryName(queryData[WIDGET_PROMQL_QUERY_KEY_NAME]) || '', + queryData[EQueryType.PROM].push({ + name: GetQueryName(queryData[EQueryType.PROM]) || '', ...PromQLQueryTemplate, }); updateQueryData({ updatedQuery: { ...queryData } }); diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.ts deleted file mode 100644 index f082f4091f..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { createMachine } from 'xstate'; - -export const ResourceAttributesFilterMachine = - /** @xstate-layout N4IgpgJg5mDOIC5QBECGsAWAjA9qgThAAQDKYBAxhkQIIB2xAYgJYA2ALmPgHQAqqUANJgAngGIAcgFEAGr0SgADjljN2zHHQUgAHogAcAFgAM3AOz6ATAEYAzJdsA2Y4cOWAnABoQIxAFpDR2tuQ319AFYTcKdbFycAX3jvNExcAmIySmp6JjZOHn4hUTFNACFWAFd8bWVVdU1tPQQzY1MXY2tDdzNHM3dHd0NvXwR7biMTa313S0i+63DE5PRsPEJScnwqWgYiFg4uPgFhcQAlKRIpeSQQWrUNLRumx3Czbg8TR0sbS31jfUcw38fW47gBHmm4XCVms3SWIBSq3SGyyO1yBx4AHlFFxUOwcPhJLJrkoVPcGk9ENYFuF3i5YR0wtEHECEAEgiEmV8zH1DLYzHZ4Yi0utMltsrt9vluNjcfjCWVKtUbnd6o9QE1rMYBtxbGFvsZ3NrZj1WdYOfotUZLX0XEFHEKViKMpttjk9nlDrL8HiCWJzpcSbcyWrGoh3NCQj0zK53P1ph1WeFLLqnJZ2s5vmZLA6kginWsXaj3VLDoUAGqoSpgEp0cpVGohh5hhDWDy0sz8zruakzamWVm-Qyg362V5-AZOayO1KFlHitEejFHKCV6v+i5XRt1ZuU1s52zjNOOaZfdOWIY+RDZ0Hc6ZmKEXqyLPPCudit2Sz08ACSEFYNbSHI27kuquiIOEjiONwjJgrM3RWJYZisgEIJgnYPTmuEdi2OaiR5nQOAQHA2hvsiH4Sui0qFCcIGhnuLSmP0YJuJ2xjJsmKELG8XZTK0tjdHG06vgW5GupRS7St6vrKqSO4UhqVL8TBWp8o4eqdl0A5Xmy3G6gK56-B4uERDOSKiuJi6lgUAhrhUYB0buimtrEKZBDYrxaS0OZca8+ltheybOI4hivGZzrzp+VGHH+AGOQp4EIHy+ghNYnawtG4TsbYvk8QKfHGAJfQ9uF76WSW37xWBTSGJ0qXpd0vRZdEKGPqC2YeO2-zfO4+HxEAA */ - createMachine({ - tsTypes: {} as import('./MetricTagKey.machine.typegen').Typegen0, - initial: 'Idle', - states: { - TagKey: { - on: { - NEXT: { - actions: 'onSelectOperator', - target: 'Operator', - }, - onBlur: { - actions: 'onBlurPurge', - target: 'Idle', - }, - RESET: { - target: 'Idle', - }, - }, - }, - Operator: { - on: { - NEXT: { - actions: 'onSelectTagValue', - target: 'TagValue', - }, - // onBlur: { - // actions: 'onBlurPurge', - // target: 'Idle', - // }, - RESET: { - target: 'Idle', - }, - }, - }, - TagValue: { - on: { - onBlur: { - actions: ['onValidateQuery'], - // target: 'Idle', - }, - RESET: { - target: 'Idle', - }, - }, - }, - Idle: { - on: { - NEXT: { - actions: 'onSelectTagKey', - description: 'Select Category', - target: 'TagKey', - }, - }, - }, - }, - id: 'Dashboard Search And Filter', - }); diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.typegen.ts b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.typegen.ts deleted file mode 100644 index f2019aaa26..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/MetricTagKey.machine.typegen.ts +++ /dev/null @@ -1,32 +0,0 @@ -// This file was automatically generated. Edits will be overwritten - -export interface Typegen0 { - '@@xstate/typegen': true; - internalEvents: { - 'xstate.init': { type: 'xstate.init' }; - }; - invokeSrcNameMap: {}; - missingImplementations: { - actions: - | 'onBlurPurge' - | 'onSelectOperator' - | 'onSelectTagKey' - | 'onSelectTagValue' - | 'onValidateQuery'; - delays: never; - guards: never; - services: never; - }; - eventsCausingActions: { - onBlurPurge: 'onBlur'; - onSelectOperator: 'NEXT'; - onSelectTagKey: 'NEXT'; - onSelectTagValue: 'NEXT'; - onValidateQuery: 'onBlur'; - }; - eventsCausingDelays: {}; - eventsCausingGuards: {}; - eventsCausingServices: {}; - matchesStates: 'Idle' | 'Operator' | 'TagKey' | 'TagValue'; - tags: never; -} diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/QueryChip.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/QueryChip.tsx deleted file mode 100644 index e992536b74..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/QueryChip.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import { QueryChipContainer, QueryChipItem } from './styles'; -import { ITagKeyValueQuery } from './types'; - -interface IQueryChipProps { - queryData: ITagKeyValueQuery; - onClose: (id: string) => void; - disabled?: boolean; -} - -export default function QueryChip({ - queryData, - onClose, - disabled, -}: IQueryChipProps): JSX.Element { - return ( - - {queryData.key} - {queryData.op} - { - if (!disabled) onClose(queryData.id); - }} - > - {queryData.value.join(', ')} - - - ); -} -QueryChip.defaultProps = { - disabled: false, -}; diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx deleted file mode 100644 index d25c4e73dc..0000000000 --- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/MetricTagKeyFilter/index.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import { CloseCircleFilled } from '@ant-design/icons'; -import { useMachine } from '@xstate/react'; -import { Button, Select, Spin } from 'antd'; -import { useIsDarkMode } from 'hooks/useDarkMode'; -import { map } from 'lodash-es'; -import React, { useCallback, useEffect, useState } from 'react'; -import { IMetricsBuilderQuery } from 'types/api/dashboard/getAll'; -import { v4 as uuid } from 'uuid'; - -import { ResourceAttributesFilterMachine } from './MetricTagKey.machine'; -import QueryChip from './QueryChip'; -import { QueryChipItem, SearchContainer } from './styles'; -import { IOption, ITagKeyValueQuery } from './types'; -import { - createQuery, - GetTagKeys, - GetTagValues, - OperatorSchema, - SingleValueOperators, -} from './utils'; - -interface IMetricTagKeyFilterProps { - metricName: IMetricsBuilderQuery['metricName']; - onSetQuery: (args: IMetricsBuilderQuery['tagFilters']['items']) => void; - selectedTagFilters: IMetricsBuilderQuery['tagFilters']['items']; -} - -function MetricTagKeyFilter({ - metricName, - onSetQuery, - selectedTagFilters: selectedTagQueries, -}: IMetricTagKeyFilterProps): JSX.Element | null { - const isDarkMode = useIsDarkMode(); - const [loading, setLoading] = useState(true); - const [selectedValues, setSelectedValues] = useState([]); - const [staging, setStaging] = useState([]); - const [queries, setQueries] = useState([]); - const [optionsData, setOptionsData] = useState<{ - mode: undefined | 'tags' | 'multiple'; - options: IOption[]; - }>({ - mode: undefined, - options: [], - }); - - const dispatchQueries = ( - updatedQueries: IMetricsBuilderQuery['tagFilters']['items'], - ): void => { - onSetQuery(updatedQueries); - setQueries(updatedQueries); - }; - const handleLoading = (isLoading: boolean): void => { - setLoading(isLoading); - if (isLoading) { - setOptionsData({ mode: undefined, options: [] }); - } - }; - const [state, send] = useMachine(ResourceAttributesFilterMachine, { - actions: { - onSelectTagKey: () => { - handleLoading(true); - GetTagKeys(metricName || '') - .then((tagKeys) => setOptionsData({ options: tagKeys, mode: undefined })) - .finally(() => { - handleLoading(false); - }); - }, - onSelectOperator: () => { - setOptionsData({ options: OperatorSchema, mode: undefined }); - }, - onSelectTagValue: () => { - handleLoading(true); - - GetTagValues(staging[0], metricName || '') - .then((tagValuesOptions) => - setOptionsData({ options: tagValuesOptions, mode: 'tags' }), - ) - .finally(() => { - handleLoading(false); - }); - }, - onBlurPurge: () => { - setSelectedValues([]); - setStaging([]); - }, - onValidateQuery: (): void => { - if (staging.length < 2 || selectedValues.length === 0) { - return; - } - - const generatedQuery = createQuery([...staging, selectedValues]); - - if (generatedQuery) { - dispatchQueries([...queries, generatedQuery]); - setSelectedValues([]); - setStaging([]); - send('RESET'); - } - }, - }, - }); - - useEffect(() => { - setQueries(selectedTagQueries); - }, [selectedTagQueries]); - - const handleFocus = (): void => { - if (state.value === 'Idle') { - send('NEXT'); - } - }; - - const handleBlur = useCallback((): void => { - send('onBlur'); - }, [send]); - - useEffect(() => { - handleBlur(); - }, [handleBlur, metricName]); - - const handleChange = (value: never | string[]): void => { - if (!optionsData.mode) { - setStaging((prevStaging) => [...prevStaging, String(value)]); - setSelectedValues([]); - send('NEXT'); - return; - } - if ( - state.value === 'TagValue' && - SingleValueOperators.includes(staging[staging.length - 1]) && - Array.isArray(value) - ) { - setSelectedValues([value[value.length - 1]]); - return; - } - - setSelectedValues([...value]); - }; - - const handleClose = (id: string): void => { - dispatchQueries(queries.filter((queryData) => queryData.id !== id)); - }; - - const handleClearAll = (): void => { - send('RESET'); - dispatchQueries([]); - setStaging([]); - setSelectedValues([]); - }; - - return ( - -
- {queries.length > 0 && - map( - queries, - (query): JSX.Element => ( - - ), - )} -
-
- {map(staging, (item) => ( - {item} - ))} -
- -
-