diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index 7cc38c153e..920bba6e7b 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -1,3 +1,4 @@
export const REACT_QUERY_KEY = {
GET_ALL_LICENCES: 'GET_ALL_LICENCES',
+ GET_QUERY_RANGE: 'GET_QUERY_RANGE',
};
diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
index e1d2dcf220..2b10756266 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -6,11 +6,10 @@ import GridGraphComponent from 'container/GridGraphComponent';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
import { Time } from 'container/TopNav/DateTimeSelection/config';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import getChartData from 'lib/getChartData';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
-import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { EQueryType } from 'types/common/dashboard';
@@ -26,9 +25,6 @@ export interface ChartPreviewProps {
threshold?: number | undefined;
userQueryKey?: string;
}
-interface QueryResponseError {
- message?: string;
-}
function ChartPreview({
name,
@@ -76,39 +72,38 @@ function ChartPreview({
}
}, [query]);
- const queryResponse = useQuery({
- queryKey: [
- 'chartPreview',
- userQueryKey || JSON.stringify(query),
- selectedInterval,
- ],
- queryFn: () =>
- GetMetricQueryRange({
- query: query || {
- queryType: EQueryType.QUERY_BUILDER,
- promql: [],
- builder: {
- queryFormulas: [],
- queryData: [],
- },
- clickhouse_sql: [],
+ const queryResponse = useGetQueryRange(
+ {
+ query: query || {
+ queryType: EQueryType.QUERY_BUILDER,
+ promql: [],
+ builder: {
+ queryFormulas: [],
+ queryData: [],
},
- globalSelectedInterval: selectedInterval,
- graphType,
- selectedTime,
- }),
- retry: false,
- enabled: canQuery,
- });
+ clickhouse_sql: [],
+ },
+ globalSelectedInterval: selectedInterval,
+ graphType,
+ selectedTime,
+ },
+ {
+ queryKey: [
+ 'chartPreview',
+ userQueryKey || JSON.stringify(query),
+ selectedInterval,
+ ],
+ retry: false,
+ enabled: canQuery,
+ },
+ );
const chartDataSet = queryResponse.isError
? null
: getChartData({
queryData: [
{
- queryData: queryResponse?.data?.payload?.data?.result
- ? queryResponse?.data?.payload?.data?.result
- : [],
+ queryData: queryResponse?.data?.payload?.data?.result ?? [],
},
],
});
@@ -119,8 +114,7 @@ function ChartPreview({
{(queryResponse?.isError || queryResponse?.error) && (
{' '}
- {(queryResponse?.error as QueryResponseError).message ||
- t('preview_chart_unexpected_error')}
+ {queryResponse.error.message || t('preview_chart_unexpected_error')}
)}
{queryResponse.isLoading && }
diff --git a/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx b/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx
index 04b35ee83b..1f5759f34b 100644
--- a/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx
@@ -7,16 +7,13 @@ import {
timeItems,
timePreferance,
} from 'container/NewWidget/RightContainer/timeItems';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
import getChartData from 'lib/getChartData';
import { useCallback, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
import { useSelector } from 'react-redux';
-import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults';
import { AppState } from 'store/reducers';
-import { ErrorResponse, SuccessResponse } from 'types/api';
import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { GlobalReducer } from 'types/reducer/globalTime';
import { TimeContainer } from './styles';
@@ -44,18 +41,24 @@ function FullView({
name: getSelectedTime()?.name || '',
enum: widget?.timePreferance || 'GLOBAL_TIME',
});
- const response = useQuery<
- SuccessResponse | ErrorResponse
- >(
- `FullViewGetMetricsQueryRange-${selectedTime.enum}-${globalSelectedTime}-${widget.id}`,
+
+ const queryKey = useMemo(
() =>
- GetMetricQueryRange({
- selectedTime: selectedTime.enum,
- graphType: widget.panelTypes,
- query: widget.query,
- globalSelectedInterval: globalSelectedTime,
- variables: getDashboardVariables(),
- }),
+ `FullViewGetMetricsQueryRange-${selectedTime.enum}-${globalSelectedTime}-${widget.id}`,
+ [selectedTime, globalSelectedTime, widget],
+ );
+
+ const response = useGetQueryRange(
+ {
+ selectedTime: selectedTime.enum,
+ graphType: widget.panelTypes,
+ query: widget.query,
+ globalSelectedInterval: globalSelectedTime,
+ variables: getDashboardVariables(),
+ },
+ {
+ queryKey,
+ },
);
const chartDataSet = useMemo(
diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index c581f7f917..29390c7036 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -3,6 +3,7 @@ import { ChartData } from 'chart.js';
import Spinner from 'components/Spinner';
import GridGraphComponent from 'container/GridGraphComponent';
import { UpdateDashboard } from 'container/GridGraphLayout/utils';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import { useNotifications } from 'hooks/useNotifications';
import usePreviousValue from 'hooks/usePreviousValue';
import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
@@ -20,7 +21,6 @@ import {
import { Layout } from 'react-grid-layout';
import { useTranslation } from 'react-i18next';
import { useInView } from 'react-intersection-observer';
-import { useQuery } from 'react-query';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
@@ -28,7 +28,6 @@ import {
DeleteWidget,
DeleteWidgetProps,
} from 'store/actions/dashboard/deleteWidget';
-import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults';
import { AppState } from 'store/reducers';
import AppActions from 'types/actions';
import { Widgets } from 'types/api/dashboard/getAll';
@@ -81,33 +80,28 @@ function GridCardGraph({
const selectedData = selectedDashboard?.data;
const { variables } = selectedData;
- const queryResponse = useQuery(
- [
- `GetMetricsQueryRange-${widget?.timePreferance}-${globalSelectedInterval}-${widget.id}`,
- {
+ const queryResponse = useGetQueryRange(
+ {
+ selectedTime: widget?.timePreferance,
+ graphType: widget.panelTypes,
+ query: widget.query,
+ globalSelectedInterval,
+ variables: getDashboardVariables(),
+ },
+ {
+ queryKey: [
+ `GetMetricsQueryRange-${widget?.timePreferance}-${globalSelectedInterval}-${widget.id}`,
widget,
maxTime,
minTime,
globalSelectedInterval,
variables,
- },
- ],
- () =>
- GetMetricQueryRange({
- selectedTime: widget?.timePreferance,
- graphType: widget.panelTypes,
- query: widget.query,
- globalSelectedInterval,
- variables: getDashboardVariables(),
- }),
- {
+ ],
keepPreviousData: true,
enabled: isGraphVisible,
refetchOnMount: false,
onError: (error) => {
- if (error instanceof Error) {
- setErrorMessage(error.message);
- }
+ setErrorMessage(error.message);
},
},
);
diff --git a/frontend/src/container/GridGraphLayout/utils.ts b/frontend/src/container/GridGraphLayout/utils.ts
index 625557173f..1cef8eed7c 100644
--- a/frontend/src/container/GridGraphLayout/utils.ts
+++ b/frontend/src/container/GridGraphLayout/utils.ts
@@ -50,14 +50,6 @@ export const UpdateDashboard = async (
queryData: [initialQueryBuilderFormValues],
},
},
- queryData: {
- data: {
- queryData: widgetData?.queryData.data.queryData || [],
- },
- error: false,
- errorMessage: '',
- loading: false,
- },
timePreferance: widgetData?.timePreferance || 'GLOBAL_TIME',
title: widgetData ? copyTitle : '',
},
diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
index b737f7d0f9..3a7f406b4e 100644
--- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
+++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
@@ -71,23 +71,8 @@ function ImportJSON({
setDashboardCreating(true);
const dashboardData = JSON.parse(editorValue) as DashboardData;
- // removing the queryData
- const parsedWidgets: DashboardData = {
- ...dashboardData,
- widgets: dashboardData.widgets?.map((e) => ({
- ...e,
- queryData: {
- ...e.queryData,
- data: e.queryData.data,
- error: false,
- errorMessage: '',
- loading: false,
- },
- })),
- };
-
const response = await createDashboard({
- ...parsedWidgets,
+ ...dashboardData,
uploadedGrafana,
});
diff --git a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts b/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
index 82b3856f98..366dc864a6 100644
--- a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
+++ b/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
@@ -10,12 +10,6 @@ export const getWidgetQueryBuilder = (query: Widgets['query']): Widgets => ({
opacity: '0',
panelTypes: PANEL_TYPES.TIME_SERIES,
query,
- queryData: {
- data: { queryData: [] },
- error: false,
- errorMessage: '',
- loading: false,
- },
timePreferance: 'GLOBAL_TIME',
title: '',
});
diff --git a/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx b/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx
index 51d83b23a3..d7ccd451e4 100644
--- a/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx
+++ b/frontend/src/container/NewDashboard/DescriptionOfDashboard/ShareModal.tsx
@@ -6,28 +6,14 @@ import { useTranslation } from 'react-i18next';
import { useCopyToClipboard } from 'react-use';
import { DashboardData } from 'types/api/dashboard/getAll';
-import { cleardQueryData, downloadObjectAsJson } from './util';
+import { downloadObjectAsJson } from './util';
function ShareModal({
isJSONModalVisible,
onToggleHandler,
selectedData,
}: ShareModalProps): JSX.Element {
- const getParsedValue = (): string => {
- const updatedData: DashboardData = {
- ...selectedData,
- widgets: selectedData.widgets?.map((widget) => ({
- ...widget,
- queryData: {
- ...widget.queryData,
- loading: false,
- error: false,
- errorMessage: '',
- },
- })),
- };
- return JSON.stringify(updatedData, null, 2);
- };
+ const getParsedValue = (): string => JSON.stringify(selectedData, null, 2);
const [jsonValue, setJSONValue] = useState(getParsedValue());
const [isViewJSON, setIsViewJSON] = useState(false);
@@ -53,7 +39,6 @@ function ShareModal({
}
}, [state.error, state.value, t, notifications]);
- const selectedDataCleaned = cleardQueryData(selectedData);
const GetFooterComponent = useMemo(() => {
if (!isViewJSON) {
return (
@@ -69,7 +54,7 @@ function ShareModal({
);
- }, [isViewJSON, jsonValue, selectedData, selectedDataCleaned, setCopy, t]);
+ }, [isViewJSON, jsonValue, selectedData, setCopy, t]);
return (
({
- ...widget,
- queryData: {
- ...widget.queryData,
- data: {
- queryData: [],
- },
- },
- })),
- };
-}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 1d8cbd763b..655ecaaee7 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -1,11 +1,13 @@
import { Button, Tabs, Typography } from 'antd';
import TextToolTip from 'components/TextToolTip';
import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import { WidgetGraphProps } from 'container/NewWidget/types';
import { QueryBuilder } from 'container/QueryBuilder';
+import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
import { connect, useSelector } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { ThunkDispatch } from 'redux-thunk';
@@ -23,16 +25,22 @@ import DashboardReducer from 'types/reducer/dashboards';
import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
import PromQLQueryContainer from './QueryBuilder/promQL';
-function QuerySection({ updateQuery, selectedGraph }: QueryProps): JSX.Element {
+function QuerySection({
+ updateQuery,
+ selectedGraph,
+ selectedTime,
+}: QueryProps): JSX.Element {
const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
const urlQuery = useUrlQuery();
- const [isInit, setIsInit] = useState(false);
+ const { dashboards } = useSelector(
+ (state) => state.dashboards,
+ );
- const { dashboards, isLoadingQueryResult } = useSelector<
- AppState,
- DashboardReducer
- >((state) => state.dashboards);
+ const getWidgetQueryRange = useGetWidgetQueryRange({
+ graphType: selectedGraph,
+ selectedTime: selectedTime.enum,
+ });
const [selectedDashboards] = dashboards;
const { widgets } = selectedDashboards.data;
@@ -46,23 +54,11 @@ function QuerySection({ updateQuery, selectedGraph }: QueryProps): JSX.Element {
const { query } = selectedWidget;
- const { compositeQuery } = useShareBuilderUrl({ defaultValue: query });
-
- useEffect(() => {
- if (!isInit && compositeQuery) {
- setIsInit(true);
- updateQuery({
- updatedQuery: compositeQuery,
- widgetId: urlQuery.get('widgetId') || '',
- yAxisUnit: selectedWidget.yAxisUnit,
- });
- }
- }, [isInit, compositeQuery, selectedWidget, urlQuery, updateQuery]);
+ useShareBuilderUrl({ defaultValue: query });
const handleStageQuery = useCallback(
(updatedQuery: Query): void => {
updateQuery({
- updatedQuery,
widgetId: urlQuery.get('widgetId') || '',
yAxisUnit: selectedWidget.yAxisUnit,
});
@@ -115,7 +111,7 @@ function QuerySection({ updateQuery, selectedGraph }: QueryProps): JSX.Element {
);
}
-export interface NewWidgetProps {
- selectedGraph: GRAPH_TYPES;
- yAxisUnit: Widgets['yAxisUnit'];
-}
-
interface DispatchProps {
saveSettingOfPanel: (
props: SaveDashboardProps,
) => (dispatch: Dispatch) => void;
- getQueryResults: (
- props: GetQueryResultsProps,
- ) => (dispatch: Dispatch) => void;
}
const mapDispatchToProps = (
dispatch: ThunkDispatch,
): DispatchProps => ({
saveSettingOfPanel: bindActionCreators(SaveDashboard, dispatch),
- getQueryResults: bindActionCreators(GetQueryResults, dispatch),
});
type Props = DispatchProps & NewWidgetProps;
diff --git a/frontend/src/container/NewWidget/types.ts b/frontend/src/container/NewWidget/types.ts
new file mode 100644
index 0000000000..ca6a121382
--- /dev/null
+++ b/frontend/src/container/NewWidget/types.ts
@@ -0,0 +1,13 @@
+import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import { Widgets } from 'types/api/dashboard/getAll';
+
+import { timePreferance } from './RightContainer/timeItems';
+
+export interface NewWidgetProps {
+ selectedGraph: GRAPH_TYPES;
+ yAxisUnit: Widgets['yAxisUnit'];
+}
+
+export interface WidgetGraphProps extends NewWidgetProps {
+ selectedTime: timePreferance;
+}
diff --git a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
new file mode 100644
index 0000000000..dbd35d5ede
--- /dev/null
+++ b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts
@@ -0,0 +1,18 @@
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import {
+ GetMetricQueryRange,
+ GetQueryResultsProps,
+} from 'store/actions/dashboard/getQueryResults';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+export const useGetQueryRange = (
+ requestData: GetQueryResultsProps,
+ options?: UseQueryOptions, Error>,
+): UseQueryResult, Error> =>
+ useQuery, Error>({
+ queryKey: [REACT_QUERY_KEY.GET_QUERY_RANGE, requestData],
+ queryFn: async () => GetMetricQueryRange(requestData),
+ ...options,
+ });
diff --git a/frontend/src/hooks/queryBuilder/useGetWidgetQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetWidgetQueryRange.ts
new file mode 100644
index 0000000000..f3eaa9914c
--- /dev/null
+++ b/frontend/src/hooks/queryBuilder/useGetWidgetQueryRange.ts
@@ -0,0 +1,51 @@
+import { COMPOSITE_QUERY } from 'constants/queryBuilderQueryNames';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
+import { UseQueryOptions, UseQueryResult } from 'react-query';
+import { useSelector } from 'react-redux';
+import { GetQueryResultsProps } from 'store/actions/dashboard/getQueryResults';
+import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { useGetQueryRange } from './useGetQueryRange';
+
+export const useGetWidgetQueryRange = (
+ {
+ graphType,
+ selectedTime,
+ }: Pick,
+ options?: UseQueryOptions, Error>,
+): UseQueryResult, Error> => {
+ const urlQuery = useUrlQuery();
+
+ const { selectedTime: globalSelectedInterval } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
+
+ const compositeQuery = urlQuery.get(COMPOSITE_QUERY);
+
+ return useGetQueryRange(
+ {
+ graphType,
+ selectedTime,
+ globalSelectedInterval,
+ query: JSON.parse(compositeQuery || ''),
+ variables: getDashboardVariables(),
+ },
+ {
+ enabled: !!compositeQuery,
+ retry: false,
+ queryKey: [
+ REACT_QUERY_KEY.GET_QUERY_RANGE,
+ selectedTime,
+ globalSelectedInterval,
+ compositeQuery,
+ ],
+ ...options,
+ },
+ );
+};
diff --git a/frontend/src/lib/getChartData.ts b/frontend/src/lib/getChartData.ts
index 97e16dd895..8d32d969c2 100644
--- a/frontend/src/lib/getChartData.ts
+++ b/frontend/src/lib/getChartData.ts
@@ -1,6 +1,6 @@
import { ChartData } from 'chart.js';
import getLabelName from 'lib/getLabelName';
-import { Widgets } from 'types/api/dashboard/getAll';
+import { QueryData } from 'types/api/widgets/getQuery';
import convertIntoEpoc from './covertIntoEpoc';
import { colors } from './getRandomColor';
@@ -77,7 +77,11 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
};
interface GetChartDataProps {
- queryData: Widgets['queryData']['data'][];
+ queryData: {
+ query?: string;
+ legend?: string;
+ queryData: QueryData[];
+ }[];
}
export default getChartData;
diff --git a/frontend/src/store/actions/dashboard/getDashboard.ts b/frontend/src/store/actions/dashboard/getDashboard.ts
index 4ca70c38d9..a2484ee555 100644
--- a/frontend/src/store/actions/dashboard/getDashboard.ts
+++ b/frontend/src/store/actions/dashboard/getDashboard.ts
@@ -39,16 +39,6 @@ export const GetDashboard = ({
panelTypes: graphType || PANEL_TYPES.TIME_SERIES,
timePreferance: 'GLOBAL_TIME',
title: '',
- queryType: 0,
- queryData: {
- data: {
- queryData: [],
- },
-
- error: false,
- errorMessage: '',
- loading: false,
- },
query: initialQueryWithType,
},
});
diff --git a/frontend/src/store/actions/dashboard/getQueryResults.ts b/frontend/src/store/actions/dashboard/getQueryResults.ts
index 32cfee21fb..4490d5960c 100644
--- a/frontend/src/store/actions/dashboard/getQueryResults.ts
+++ b/frontend/src/store/actions/dashboard/getQueryResults.ts
@@ -3,9 +3,6 @@
// @ts-nocheck
import { getMetricsQueryRange } from 'api/metrics/getQueryRange';
-import { AxiosError } from 'axios';
-import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
-import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
import { Time } from 'container/TopNav/DateTimeSelection/config';
import GetMaxMinTime from 'lib/getMaxMinTime';
@@ -14,14 +11,11 @@ import GetStartAndEndTime from 'lib/getStartAndEndTime';
import getStep from 'lib/getStep';
import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
import { isEmpty } from 'lodash-es';
-import { Dispatch } from 'redux';
import store from 'store';
-import AppActions from 'types/actions';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { SuccessResponse } from 'types/api';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import { EQueryType } from 'types/common/dashboard';
-import { GlobalReducer } from 'types/reducer/globalTime';
import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
export async function GetMetricQueryRange({
@@ -30,13 +24,7 @@ export async function GetMetricQueryRange({
graphType,
selectedTime,
variables = {},
-}: {
- query: Query;
- graphType: GRAPH_TYPES;
- selectedTime: timePreferenceType;
- globalSelectedInterval: Time;
- variables?: Record;
-}): Promise | ErrorResponse> {
+}: GetQueryResultsProps): Promise> {
const queryData = query[query.queryType];
let legendMap: Record = {};
@@ -153,66 +141,10 @@ export async function GetMetricQueryRange({
return response;
}
-export const GetQueryResults = (
- props: GetQueryResultsProps,
-): ((dispatch: Dispatch) => void) => {
- return async (dispatch: Dispatch): Promise => {
- try {
- dispatch({
- type: 'QUERY_ERROR',
- payload: {
- errorMessage: '',
- widgetId: props.widgetId,
- errorBoolean: false,
- isLoadingQueryResult: true,
- },
- });
- const response = await GetMetricQueryRange(props);
-
- const isError = response.error;
-
- if (isError != null) {
- dispatch({
- type: 'QUERY_ERROR',
- payload: {
- errorMessage: isError || '',
- widgetId: props.widgetId,
- isLoadingQueryResult: false,
- },
- });
- return;
- }
-
- dispatch({
- type: 'QUERY_SUCCESS',
- payload: {
- widgetId: props.widgetId,
- data: {
- queryData: response.payload?.data?.result
- ? response.payload?.data?.result
- : [],
- },
- },
- });
- } catch (error) {
- dispatch({
- type: 'QUERY_ERROR',
- payload: {
- errorMessage: (error as AxiosError).toString(),
- widgetId: props.widgetId,
- errorBoolean: true,
- isLoadingQueryResult: false,
- },
- });
- }
- };
-};
-
export interface GetQueryResultsProps {
- widgetId: string;
- selectedTime: timePreferenceType;
query: Query;
- graphType: ITEMS;
- globalSelectedInterval: GlobalReducer['selectedTime'];
- variables: Record;
+ graphType: GRAPH_TYPES;
+ selectedTime: timePreferenceType;
+ globalSelectedInterval: Time;
+ variables?: Record;
}
diff --git a/frontend/src/store/actions/dashboard/saveDashboard.ts b/frontend/src/store/actions/dashboard/saveDashboard.ts
index 5ec83da579..ac7516ff6e 100644
--- a/frontend/src/store/actions/dashboard/saveDashboard.ts
+++ b/frontend/src/store/actions/dashboard/saveDashboard.ts
@@ -1,5 +1,6 @@
import updateDashboardApi from 'api/dashboard/update';
import { AxiosError } from 'axios';
+import { COMPOSITE_QUERY } from 'constants/queryBuilderQueryNames';
import ROUTES from 'constants/routes';
import { ITEMS } from 'container/NewDashboard/ComponentsSlider/menuItems';
import history from 'lib/history';
@@ -84,6 +85,12 @@ export const SaveDashboard = ({
];
};
const allLayout = getAllLayout();
+ const params = new URLSearchParams(window.location.search);
+ const compositeQuery = params.get(COMPOSITE_QUERY);
+ const query = compositeQuery
+ ? JSON.parse(compositeQuery)
+ : selectedWidget.query;
+
const response = await updateDashboardApi({
data: {
...selectedDashboard.data,
@@ -98,6 +105,7 @@ export const SaveDashboard = ({
...preWidget,
{
...selectedWidget,
+ query,
description: updatedDescription,
id: isEmptyWidget ? newWidgetId : widgetId,
isStacked: updatedisStacked,
@@ -107,9 +115,6 @@ export const SaveDashboard = ({
timePreferance: updatedtimePreferance,
yAxisUnit: updatedYAxisUnit,
panelTypes: graphType,
- queryData: {
- ...selectedWidget.queryData,
- },
},
...afterWidget,
],
diff --git a/frontend/src/store/actions/dashboard/updateQuery.ts b/frontend/src/store/actions/dashboard/updateQuery.ts
index e2551e60e2..5b30c4dfe3 100644
--- a/frontend/src/store/actions/dashboard/updateQuery.ts
+++ b/frontend/src/store/actions/dashboard/updateQuery.ts
@@ -1,6 +1,5 @@
import { Dispatch } from 'redux';
import AppActions from 'types/actions';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
export const UpdateQuery = (
props: UpdateQueryProps,
@@ -10,7 +9,6 @@ export const UpdateQuery = (
dispatch({
type: 'UPDATE_QUERY',
payload: {
- query: props.updatedQuery,
widgetId: props.widgetId,
yAxisUnit: props.yAxisUnit,
},
@@ -18,7 +16,6 @@ export const UpdateQuery = (
};
export interface UpdateQueryProps {
- updatedQuery: Query;
widgetId: string;
yAxisUnit: string | undefined;
}
diff --git a/frontend/src/store/reducers/dashboard.ts b/frontend/src/store/reducers/dashboard.ts
index 227d34c7d3..f9140830b3 100644
--- a/frontend/src/store/reducers/dashboard.ts
+++ b/frontend/src/store/reducers/dashboard.ts
@@ -13,8 +13,6 @@ import {
GET_DASHBOARD_LOADING_START,
GET_DASHBOARD_SUCCESS,
IS_ADD_WIDGET,
- QUERY_ERROR,
- QUERY_SUCCESS,
SAVE_SETTING_TO_PANEL_SUCCESS,
TOGGLE_EDIT_MODE,
UPDATE_DASHBOARD,
@@ -30,9 +28,7 @@ const InitialValue: InitialValueTypes = {
error: false,
errorMessage: '',
isEditMode: false,
- isQueryFired: false,
isAddWidget: false,
- isLoadingQueryResult: false,
};
const dashboard = (
@@ -170,102 +166,6 @@ const dashboard = (
};
}
- case QUERY_ERROR: {
- const {
- widgetId,
- errorMessage,
- errorBoolean = true,
- isLoadingQueryResult = false,
- } = action.payload;
- const [selectedDashboard] = state.dashboards;
- const { data } = selectedDashboard;
-
- const selectedWidgetIndex = data.widgets?.findIndex(
- (e) => e.id === widgetId,
- );
- const { widgets } = data;
-
- const preWidget = data.widgets?.slice(0, selectedWidgetIndex);
- const afterWidget = data.widgets?.slice(
- (selectedWidgetIndex || 0) + 1, // this is never undefined
- widgets?.length,
- );
- const selectedWidget =
- (selectedDashboard.data.widgets || [])[selectedWidgetIndex || 0] || {};
-
- return {
- ...state,
- dashboards: [
- {
- ...selectedDashboard,
- data: {
- ...data,
- widgets: [
- ...(preWidget || []),
- {
- ...selectedWidget,
- queryData: {
- ...selectedWidget.queryData,
- error: errorBoolean,
- errorMessage,
- },
- },
- ...(afterWidget || []),
- ],
- },
- },
- ],
- isQueryFired: true,
- isLoadingQueryResult,
- };
- }
-
- case QUERY_SUCCESS: {
- const { widgetId, data: queryDataResponse } = action.payload;
-
- const { dashboards } = state;
- const [selectedDashboard] = dashboards;
- const { data } = selectedDashboard;
- const { widgets = [] } = data;
-
- const selectedWidgetIndex = widgets.findIndex((e) => e.id === widgetId) || 0;
-
- const preWidget = widgets?.slice(0, selectedWidgetIndex) || [];
- const afterWidget =
- widgets.slice(
- selectedWidgetIndex + 1, // this is never undefined
- widgets.length,
- ) || [];
- const selectedWidget = widgets[selectedWidgetIndex];
-
- return {
- ...state,
- dashboards: [
- {
- ...selectedDashboard,
- data: {
- ...data,
- widgets: [
- ...preWidget,
- {
- ...selectedWidget,
- queryData: {
- data: queryDataResponse,
- error: selectedWidget.queryData.error,
- errorMessage: selectedWidget.queryData.errorMessage,
- loading: false,
- },
- },
- ...afterWidget,
- ],
- },
- },
- ],
- isQueryFired: true,
- isLoadingQueryResult: false,
- };
- }
-
case APPLY_SETTINGS_TO_PANEL: {
const { widgetId } = action.payload;
@@ -367,7 +267,7 @@ const dashboard = (
}
case UPDATE_QUERY: {
- const { query, widgetId, yAxisUnit } = action.payload;
+ const { widgetId, yAxisUnit } = action.payload;
const { dashboards } = state;
const [selectedDashboard] = dashboards;
const { data } = selectedDashboard;
@@ -395,7 +295,6 @@ const dashboard = (
...preWidget,
{
...selectedWidget,
- query,
yAxisUnit,
},
...afterWidget,
diff --git a/frontend/src/types/actions/dashboard.ts b/frontend/src/types/actions/dashboard.ts
index edf3835c7b..a147eb7516 100644
--- a/frontend/src/types/actions/dashboard.ts
+++ b/frontend/src/types/actions/dashboard.ts
@@ -5,7 +5,6 @@ import {
IDashboardVariable,
Widgets,
} from 'types/api/dashboard/getAll';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { QueryData } from 'types/api/widgets/getQuery';
export const GET_DASHBOARD = 'GET_DASHBOARD';
@@ -30,9 +29,6 @@ export const DELETE_DASHBOARD_ERROR = 'DELETE_DASHBOARD_ERROR';
export const CREATE_DEFAULT_WIDGET = 'CREATE_DEFAULT_WIDGET';
-export const QUERY_SUCCESS = 'QUERY_SUCCESS';
-export const QUERY_ERROR = 'QUERY_ERROR';
-
export const UPDATE_QUERY = 'UPDATE_QUERY';
export const APPLY_SETTINGS_TO_PANEL = 'APPLY_SETTINGS_TO_PANEL';
@@ -132,30 +128,15 @@ export interface QuerySuccessPayload {
// query: string
};
}
-interface QuerySuccess {
- type: typeof QUERY_SUCCESS;
- payload: QuerySuccessPayload;
-}
interface UpdateQuery {
type: typeof UPDATE_QUERY;
payload: {
- query: Query;
widgetId: string;
yAxisUnit: string | undefined;
};
}
-interface QueryError {
- type: typeof QUERY_ERROR;
- payload: {
- errorMessage: string;
- widgetId: string;
- errorBoolean?: boolean;
- isLoadingQueryResult?: boolean;
- };
-}
-
interface SaveDashboardSuccess {
type: typeof SAVE_SETTING_TO_PANEL_SUCCESS;
payload: Dashboard;
@@ -198,8 +179,6 @@ export type DashboardActions =
| UpdateDashboardTitle
| ToggleEditMode
| CreateDefaultWidget
- | QuerySuccess
- | QueryError
| ApplySettingsToPanel
| SaveDashboardSuccess
| WidgetDeleteSuccess
diff --git a/frontend/src/types/api/dashboard/getAll.ts b/frontend/src/types/api/dashboard/getAll.ts
index ce824db9a5..20e2a07702 100644
--- a/frontend/src/types/api/dashboard/getAll.ts
+++ b/frontend/src/types/api/dashboard/getAll.ts
@@ -3,8 +3,6 @@ import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems
import { Layout } from 'react-grid-layout';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from '../widgets/getQuery';
-
export type PayloadProps = Dashboard[];
export const VariableQueryTypeArr = ['QUERY', 'TEXTBOX', 'CUSTOM'] as const;
@@ -65,16 +63,6 @@ export interface IBaseWidget {
opacity: string;
nullZeroValues: string;
timePreferance: timePreferenceType;
- queryData: {
- loading: boolean;
- error: boolean;
- errorMessage: string;
- data: {
- query?: string;
- legend?: string;
- queryData: QueryData[];
- };
- };
stepSize?: number;
yAxisUnit?: string;
}
diff --git a/frontend/src/types/reducer/dashboards.ts b/frontend/src/types/reducer/dashboards.ts
index 86628d7ffb..a8d5bb2bae 100644
--- a/frontend/src/types/reducer/dashboards.ts
+++ b/frontend/src/types/reducer/dashboards.ts
@@ -6,7 +6,5 @@ export default interface DashboardReducer {
error: boolean;
errorMessage: string;
isEditMode: boolean;
- isQueryFired: boolean;
isAddWidget: boolean;
- isLoadingQueryResult: boolean;
}