2023-05-02 17:08:03 +03:00
|
|
|
import {
|
2023-06-06 22:28:18 +03:00
|
|
|
initialAutocompleteData,
|
2023-06-16 13:38:39 +03:00
|
|
|
initialQueryBuilderFormValuesMap,
|
2023-05-02 17:08:03 +03:00
|
|
|
mapOfFilters,
|
2023-06-23 11:19:53 +03:00
|
|
|
PANEL_TYPES,
|
2023-05-02 17:08:03 +03:00
|
|
|
} from 'constants/queryBuilder';
|
|
|
|
|
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
|
2023-05-10 19:40:27 +03:00
|
|
|
import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperatorsBySourceAndPanelType';
|
2023-05-02 17:08:03 +03:00
|
|
|
import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
|
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
|
|
|
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
|
|
|
|
|
import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
|
|
|
|
|
import {
|
|
|
|
|
HandleChangeQueryData,
|
|
|
|
|
UseQueryOperations,
|
|
|
|
|
} from 'types/common/operations.types';
|
2023-05-10 19:40:27 +03:00
|
|
|
import { DataSource } from 'types/common/queryBuilder';
|
2023-05-18 14:14:34 +03:00
|
|
|
import { SelectOption } from 'types/common/select';
|
2023-05-10 19:40:27 +03:00
|
|
|
|
2023-07-06 14:22:44 +03:00
|
|
|
export const useQueryOperations: UseQueryOperations = ({
|
|
|
|
|
query,
|
|
|
|
|
index,
|
2023-07-07 15:49:35 +03:00
|
|
|
filterConfigs,
|
2023-07-06 14:22:44 +03:00
|
|
|
}) => {
|
2023-05-10 19:40:27 +03:00
|
|
|
const {
|
|
|
|
|
handleSetQueryData,
|
2023-05-23 16:47:52 +03:00
|
|
|
removeQueryBuilderEntityByIndex,
|
2023-05-10 19:40:27 +03:00
|
|
|
panelType,
|
2023-06-16 13:38:39 +03:00
|
|
|
initialDataSource,
|
2023-05-10 19:40:27 +03:00
|
|
|
} = useQueryBuilder();
|
2023-05-18 14:14:34 +03:00
|
|
|
const [operators, setOperators] = useState<SelectOption<string, string>[]>([]);
|
2023-05-02 17:08:03 +03:00
|
|
|
const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
|
|
|
|
|
string[]
|
|
|
|
|
>([]);
|
|
|
|
|
|
|
|
|
|
const { dataSource, aggregateOperator } = query;
|
|
|
|
|
|
|
|
|
|
const handleChangeOperator = useCallback(
|
|
|
|
|
(value: string): void => {
|
|
|
|
|
const aggregateDataType: BaseAutocompleteData['dataType'] =
|
|
|
|
|
query.aggregateAttribute.dataType;
|
|
|
|
|
|
|
|
|
|
const typeOfValue = findDataTypeOfOperator(value);
|
|
|
|
|
const shouldResetAggregateAttribute =
|
|
|
|
|
(aggregateDataType === 'string' || aggregateDataType === 'bool') &&
|
|
|
|
|
typeOfValue === 'number';
|
|
|
|
|
|
|
|
|
|
const newQuery: IBuilderQuery = {
|
|
|
|
|
...query,
|
|
|
|
|
aggregateOperator: value,
|
|
|
|
|
having: [],
|
|
|
|
|
limit: null,
|
|
|
|
|
...(shouldResetAggregateAttribute
|
2023-06-06 22:28:18 +03:00
|
|
|
? { aggregateAttribute: initialAutocompleteData }
|
2023-05-02 17:08:03 +03:00
|
|
|
: {}),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSetQueryData(index, newQuery);
|
|
|
|
|
},
|
|
|
|
|
[index, query, handleSetQueryData],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const getNewListOfAdditionalFilters = useCallback(
|
2023-07-05 13:50:20 +03:00
|
|
|
(dataSource: DataSource): string[] => {
|
2023-07-06 14:22:44 +03:00
|
|
|
const result: string[] = mapOfFilters[dataSource].reduce<string[]>(
|
|
|
|
|
(acc, item) => {
|
2023-07-07 15:49:35 +03:00
|
|
|
if (filterConfigs && filterConfigs[item.field]?.isHidden) {
|
2023-07-06 14:22:44 +03:00
|
|
|
return acc;
|
|
|
|
|
}
|
2023-07-05 13:50:20 +03:00
|
|
|
|
2023-07-06 14:22:44 +03:00
|
|
|
acc.push(item.text);
|
2023-07-05 13:50:20 +03:00
|
|
|
|
2023-07-06 14:22:44 +03:00
|
|
|
return acc;
|
|
|
|
|
},
|
|
|
|
|
[],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return result;
|
2023-07-05 13:50:20 +03:00
|
|
|
},
|
2023-07-06 14:22:44 +03:00
|
|
|
|
2023-07-07 15:49:35 +03:00
|
|
|
[filterConfigs],
|
2023-05-02 17:08:03 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleChangeAggregatorAttribute = useCallback(
|
|
|
|
|
(value: BaseAutocompleteData): void => {
|
|
|
|
|
const newQuery: IBuilderQuery = {
|
|
|
|
|
...query,
|
|
|
|
|
aggregateAttribute: value,
|
|
|
|
|
having: [],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSetQueryData(index, newQuery);
|
|
|
|
|
},
|
|
|
|
|
[index, query, handleSetQueryData],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleChangeDataSource = useCallback(
|
|
|
|
|
(nextSource: DataSource): void => {
|
2023-05-10 19:40:27 +03:00
|
|
|
const newOperators = getOperatorsBySourceAndPanelType({
|
|
|
|
|
dataSource: nextSource,
|
2023-06-23 11:19:53 +03:00
|
|
|
panelType: panelType || PANEL_TYPES.TIME_SERIES,
|
2023-05-10 19:40:27 +03:00
|
|
|
});
|
2023-05-02 17:08:03 +03:00
|
|
|
|
2023-06-16 13:38:39 +03:00
|
|
|
const entries = Object.entries(
|
|
|
|
|
initialQueryBuilderFormValuesMap.metrics,
|
|
|
|
|
).filter(([key]) => key !== 'queryName' && key !== 'expression');
|
2023-05-02 17:08:03 +03:00
|
|
|
|
|
|
|
|
const initCopyResult = Object.fromEntries(entries);
|
|
|
|
|
|
|
|
|
|
const newQuery: IBuilderQuery = {
|
|
|
|
|
...query,
|
|
|
|
|
...initCopyResult,
|
|
|
|
|
dataSource: nextSource,
|
2023-05-18 14:14:34 +03:00
|
|
|
aggregateOperator: newOperators[0].value,
|
2023-05-02 17:08:03 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
setOperators(newOperators);
|
|
|
|
|
handleSetQueryData(index, newQuery);
|
|
|
|
|
},
|
2023-05-10 19:40:27 +03:00
|
|
|
[index, query, panelType, handleSetQueryData],
|
2023-05-02 17:08:03 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleDeleteQuery = useCallback(() => {
|
2023-05-23 16:47:52 +03:00
|
|
|
removeQueryBuilderEntityByIndex('queryData', index);
|
|
|
|
|
}, [removeQueryBuilderEntityByIndex, index]);
|
2023-05-02 17:08:03 +03:00
|
|
|
|
|
|
|
|
const handleChangeQueryData: HandleChangeQueryData = useCallback(
|
|
|
|
|
(key, value) => {
|
|
|
|
|
const newQuery: IBuilderQuery = {
|
|
|
|
|
...query,
|
|
|
|
|
[key]: value,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSetQueryData(index, newQuery);
|
|
|
|
|
},
|
|
|
|
|
[query, index, handleSetQueryData],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const isMetricsDataSource = useMemo(
|
|
|
|
|
() => query.dataSource === DataSource.METRICS,
|
|
|
|
|
[query.dataSource],
|
|
|
|
|
);
|
|
|
|
|
|
2023-07-04 08:24:34 +03:00
|
|
|
const isTracePanelType = useMemo(() => panelType === PANEL_TYPES.TRACE, [
|
|
|
|
|
panelType,
|
|
|
|
|
]);
|
|
|
|
|
|
2023-05-02 17:08:03 +03:00
|
|
|
useEffect(() => {
|
2023-06-16 13:38:39 +03:00
|
|
|
if (initialDataSource && dataSource !== initialDataSource) return;
|
|
|
|
|
|
2023-05-10 19:40:27 +03:00
|
|
|
const initialOperators = getOperatorsBySourceAndPanelType({
|
|
|
|
|
dataSource,
|
2023-06-23 11:19:53 +03:00
|
|
|
panelType: panelType || PANEL_TYPES.TIME_SERIES,
|
2023-05-10 19:40:27 +03:00
|
|
|
});
|
2023-06-16 13:38:39 +03:00
|
|
|
|
|
|
|
|
if (JSON.stringify(operators) === JSON.stringify(initialOperators)) return;
|
|
|
|
|
|
2023-05-10 19:40:27 +03:00
|
|
|
setOperators(initialOperators);
|
2023-06-23 11:19:53 +03:00
|
|
|
}, [dataSource, initialDataSource, panelType, operators]);
|
2023-05-02 17:08:03 +03:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const additionalFilters = getNewListOfAdditionalFilters(dataSource);
|
|
|
|
|
|
|
|
|
|
setListOfAdditionalFilters(additionalFilters);
|
|
|
|
|
}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
|
|
|
|
|
|
|
|
|
|
return {
|
2023-07-04 08:24:34 +03:00
|
|
|
isTracePanelType,
|
2023-05-02 17:08:03 +03:00
|
|
|
isMetricsDataSource,
|
|
|
|
|
operators,
|
|
|
|
|
listOfAdditionalFilters,
|
|
|
|
|
handleChangeOperator,
|
|
|
|
|
handleChangeAggregatorAttribute,
|
|
|
|
|
handleChangeDataSource,
|
|
|
|
|
handleDeleteQuery,
|
|
|
|
|
handleChangeQueryData,
|
|
|
|
|
};
|
|
|
|
|
};
|