[skywalking-rocketbot-ui] branch master updated: refactor: dashboard query constant (#396)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git


The following commit(s) were added to refs/heads/master by this push:
     new 2ee3a71  refactor: dashboard query constant (#396)
2ee3a71 is described below

commit 2ee3a718cec6d9b20ff26b395beb8377918594fd
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Mon Dec 7 15:46:55 2020 +0800

    refactor: dashboard query constant (#396)
---
 src/graph/fragments/dashboard.ts                   | 67 ++++++++++++++++
 src/graph/query/dashboard.ts                       | 26 +++++-
 .../modules/dashboard/constant-metrics-query.ts    | 92 ----------------------
 .../modules/dashboard/dashboard-data-query.ts      | 16 ++--
 4 files changed, 98 insertions(+), 103 deletions(-)

diff --git a/src/graph/fragments/dashboard.ts b/src/graph/fragments/dashboard.ts
index d119df4..2b762d7 100644
--- a/src/graph/fragments/dashboard.ts
+++ b/src/graph/fragments/dashboard.ts
@@ -61,3 +61,70 @@ export const disableTemplate = {
     }
   `,
 };
+
+export const queryMetricsValues = {
+  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
+  query: `
+  readMetricsValues: readMetricsValues(condition: $condition, duration: $duration) {
+    label
+    values {
+      values {value}
+    }
+  }`,
+};
+
+export const queryMetricsValue = {
+  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
+  query: `
+  readMetricsValue: readMetricsValue(condition: $condition, duration: $duration)`,
+};
+
+export const querySortMetrics = {
+  variable: ['$condition: TopNCondition!, $duration: Duration!'],
+  query: `
+  sortMetrics: sortMetrics(condition: $condition, duration: $duration) {
+    name
+    id
+    value
+    refId
+  }`,
+};
+
+export const queryLabeledMetricsValues = {
+  variable: ['$condition: MetricsCondition!, $labels: [String!]!, $duration: Duration!'],
+  query: `
+  readLabeledMetricsValues: readLabeledMetricsValues(
+    condition: $condition,
+    labels: $labels,
+    duration: $duration) {
+    label
+    values {
+      values {value}
+    }
+  }`,
+};
+
+export const queryHeatMap = {
+  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
+  query: `
+  readHeatMap: readHeatMap(condition: $condition, duration: $duration) {
+    values {
+      id
+      values
+    }
+    buckets {
+      min
+      max
+    }
+  }`,
+};
+
+export const querySampledRecords = {
+  variable: ['$condition: TopNCondition!, $duration: Duration!'],
+  query: `
+  readSampledRecords: readSampledRecords(condition: $condition, duration: $duration) {
+    name
+    value
+    refId
+  }`,
+};
diff --git a/src/graph/query/dashboard.ts b/src/graph/query/dashboard.ts
index 9f8a520..bef85a7 100644
--- a/src/graph/query/dashboard.ts
+++ b/src/graph/query/dashboard.ts
@@ -15,7 +15,19 @@
  * limitations under the License.
  */
 
-import { TypeOfMetrics, getAllTemplates, addTemplate, changeTemplate, disableTemplate } from '../fragments/dashboard';
+import {
+  TypeOfMetrics,
+  getAllTemplates,
+  addTemplate,
+  changeTemplate,
+  disableTemplate,
+  querySampledRecords,
+  queryHeatMap,
+  queryLabeledMetricsValues,
+  querySortMetrics,
+  queryMetricsValue,
+  queryMetricsValues,
+} from '../fragments/dashboard';
 
 export const queryTypeOfMetrics = `query queryTypeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
 
@@ -26,3 +38,15 @@ export const mutationChangeTemplate = `mutation mutationChangeTemplate(${changeT
 export const mutationDisableTemplate = `mutation mutationDisableTemplate(${disableTemplate.variable}) {${disableTemplate.query}}`;
 
 export const queryGetAllTemplates = `query queryGetAllTemplates {${getAllTemplates.query}}`;
+
+export const readHeatMap = `query queryData(${queryHeatMap.variable}) {${queryHeatMap.query}}`;
+
+export const readSampledRecords = `query queryData(${querySampledRecords.variable}) {${querySampledRecords.query}}`;
+
+export const readLabeledMetricsValues = `query queryData(${queryLabeledMetricsValues.variable}) {${queryLabeledMetricsValues.query}}`;
+
+export const sortMetrics = `query queryData(${querySortMetrics.variable}) {${querySortMetrics.query}}`;
+
+export const readMetricsValue = `query queryData(${queryMetricsValue.variable}) {${queryMetricsValue.query}}`;
+
+export const readMetricsValues = `query queryData(${queryMetricsValues.variable}) {${queryMetricsValues.query}}`;
diff --git a/src/store/modules/dashboard/constant-metrics-query.ts b/src/store/modules/dashboard/constant-metrics-query.ts
deleted file mode 100644
index 8dac8f2..0000000
--- a/src/store/modules/dashboard/constant-metrics-query.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const readMetricsValues = {
-  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
-  fragment: `
-  readMetricsValues: readMetricsValues(condition: $condition, duration: $duration) {
-    label
-    values {
-      values {value}
-    }
-  }`,
-};
-
-const readMetricsValue = {
-  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
-  fragment: `
-  readMetricsValue: readMetricsValue(condition: $condition, duration: $duration)`,
-};
-
-const sortMetrics = {
-  variable: ['$condition: TopNCondition!, $duration: Duration!'],
-  fragment: `
-  sortMetrics: sortMetrics(condition: $condition, duration: $duration) {
-    name
-    id
-    value
-    refId
-  }`,
-};
-
-const readLabeledMetricsValues = {
-  variable: ['$condition: MetricsCondition!, $labels: [String!]!, $duration: Duration!'],
-  fragment: `
-  readLabeledMetricsValues: readLabeledMetricsValues(
-    condition: $condition,
-    labels: $labels,
-    duration: $duration) {
-    label
-    values {
-      values {value}
-    }
-  }`,
-};
-
-const readHeatMap = {
-  variable: ['$condition: MetricsCondition!, $duration: Duration!'],
-  fragment: `
-  readHeatMap: readHeatMap(condition: $condition, duration: $duration) {
-    values {
-      id
-      values
-    }
-    buckets {
-      min
-      max
-    }
-  }`,
-};
-
-const readSampledRecords = {
-  variable: ['$condition: TopNCondition!, $duration: Duration!'],
-  fragment: `
-  readSampledRecords: readSampledRecords(condition: $condition, duration: $duration) {
-    name
-    value
-    refId
-  }`,
-};
-
-export default {
-  readSampledRecords,
-  readHeatMap,
-  readLabeledMetricsValues,
-  sortMetrics,
-  readMetricsValue,
-  readMetricsValues,
-};
diff --git a/src/store/modules/dashboard/dashboard-data-query.ts b/src/store/modules/dashboard/dashboard-data-query.ts
index fb69fbd..1600d9c 100644
--- a/src/store/modules/dashboard/dashboard-data-query.ts
+++ b/src/store/modules/dashboard/dashboard-data-query.ts
@@ -16,10 +16,9 @@
  */
 
 import { Commit, ActionTree, Dispatch } from 'vuex';
-import axios, { AxiosPromise, AxiosResponse } from 'axios';
-import { cancelToken } from '@/utils/cancelToken';
+import { AxiosResponse } from 'axios';
 import { State } from './dashboard-data';
-import fragmentAll from './constant-metrics-query';
+import graph from '@/graph';
 
 export enum TopologyType {
   TOPOLOGY_ENDPOINT = 'TOPOLOGY_ENDPOINT',
@@ -148,19 +147,16 @@ const actions: ActionTree<State, any> = {
       return variables;
     });
 
-    const globalArr: any = fragmentAll;
     if (!config.queryMetricType || !variablesList.length) {
       return;
     }
-    const fragments = globalArr[config.queryMetricType].fragment;
-    const queryVariables = globalArr[config.queryMetricType].variable;
-    const query = `query queryData(${queryVariables}) {${fragments}}`;
     return Promise.all(
       variablesList.map((variable: any) => {
         if (variable) {
-          return axios
-            .post('/graphql', { query, variables: variable }, { cancelToken: cancelToken() })
-            .then((res: AxiosResponse<any>) => {
+          return graph
+            .query(config.queryMetricType)
+            .params(variable)
+            .then((res: AxiosResponse) => {
               const resData = res.data.data;
 
               return { ...resData, config, metricName: variable.condition.name };