feat: remove metric name from queries (#275)

src/hooks/useExpressionsProcessor.ts

@@ -107,11 +107,11 @@ export function useExpressionsSourceProcessor(
   }
   const source: { [key: string]: unknown } = {};
   const keys = Object.keys(resp.data);
-  for (let i = 0; i < config.metricTypes.length; i++) {
+  for (let i = 0; i < config.metrics.length; i++) {
     const type = config.metricTypes[i];
-    const c = (config.metricConfig && config.metricConfig[i]) || {};
+    const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
     const results = (resp.data[keys[i]] && resp.data[keys[i]].results) || [];
-    const name = ((results[0] || {}).metric || {}).name;
+    const name = config.metrics[i];
 
     if (type === ExpressionResultType.TIME_SERIES_VALUES) {
       if (results.length === 1) {
@@ -214,11 +214,12 @@ export async function useExpressionsQueryPodsMetrics(
       return {};
     }
     const names: string[] = [];
+    const subNames: string[] = [];
     const metricConfigArr: MetricConfigOpt[] = [];
     const metricTypesArr: string[] = [];
     const data = pods.map((d: any, idx: number) => {
       for (let index = 0; index < config.expressions.length; index++) {
-        const c: any = (config.metricConfig && config.metricConfig[index]) || {};
+        const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
         const k = "expression" + idx + index;
         const sub = "subexpression" + idx + index;
         const results = (resp.data[k] && resp.data[k].results) || [];
@@ -255,17 +256,22 @@ export async function useExpressionsQueryPodsMetrics(
           if (!results[0]) {
             return d;
           }
-          const name = results[0].metric.name || "";
+          const name = config.expressions[index] || "";
+          const subName = config.subExpressions[index] || "";
           if (!d[name]) {
             d[name] = {};
           }
           d[name]["avg"] = [results[0].values[0].value];
           if (subResults[0]) {
-            d[name]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
+            if (!d[subName]) {
+              d[subName] = {};
+            }
+            d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
           }
           const j = names.find((d: string) => d === name);
           if (!j) {
             names.push(name);
+            subNames.push(subName);
             metricConfigArr.push(c);
             metricTypesArr.push(config.typesOfMQE[index]);
           }
@@ -274,7 +280,7 @@ export async function useExpressionsQueryPodsMetrics(
       return d;
     });
 
-    return { data, names, metricConfigArr, metricTypesArr };
+    return { data, names, subNames, metricConfigArr, metricTypesArr };
   }
   const dashboardStore = useDashboardStore();
   const params = await expressionsGraphqlPods();
@@ -284,7 +290,7 @@ export async function useExpressionsQueryPodsMetrics(
     ElMessage.error(json.errors);
     return {};
   }
-  const { data, names, metricTypesArr, metricConfigArr } = expressionsPodsSource(json);
+  const expressionParams = expressionsPodsSource(json);
 
-  return { data, names, metricTypesArr, metricConfigArr };
+  return expressionParams;
 }

src/hooks/useListConfig.ts

@@ -17,7 +17,7 @@
 import { MetricQueryTypes, Calculations } from "./data";
 import { MetricModes } from "@/views/dashboard/data";
 
-export function useListConfig(config: Indexable, index: string) {
+export function useListConfig(config: Indexable, index: number) {
   if (config.metricModes === MetricModes.Expression) {
     return {
       isLinear: false,

src/types/app.d.ts

@@ -42,8 +42,7 @@ export type EventParams = {
   dataIndex: number;
   data: unknown;
   dataType: string;
-  value: number | Array;
+  value: number | any[];
   color: string;
   event: any;
-  dataIndex: number;
 };

src/types/dashboard.d.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { DurationTime } from "./app";
 export type DashboardItem = {
   id?: string;
   entity: string;
@@ -75,8 +75,8 @@ export type MetricConfigOpt = {
   unit?: string;
   label?: string;
   calculation?: string;
-  labelsIndex: string;
+  labelsIndex?: string;
-  sortOrder: string;
+  sortOrder?: string;
   topN?: number;
   index?: number;
 };

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -490,13 +490,14 @@ limitations under the License. -->
     const metricConfig = config[index] ? config.splice(index, 1) : config;
     let p = {};
     if (isExpression.value) {
-      p = { typesOfMQE: states.metricTypes, expressions: states.metrics };
       if (states.isList) {
-        states.subMetrics = [""];
+        states.subMetrics.splice(index, 1);
-        states.subMetricTypes = [""];
+        states.subMetricTypes.splice(index, 1);
-        states.subTips = [""];
+        states.subTips.splice(index, 1);
         p = {
           ...p,
+          typesOfMQE: states.metricTypes,
+          expressions: states.metrics,
           subTypesOfMQE: states.subMetricTypes,
           subExpressions: states.subMetrics,
         };

src/views/dashboard/configuration/widget/metric/Standard.vue

@@ -57,7 +57,7 @@ limitations under the License. -->
         placeholder="auto"
         @change="
           updateConfig(index, {
-            labelsIndex: encodeURIComponent(currentMetric.labelsIndex),
+            labelsIndex: encodeURIComponent(currentMetric.labelsIndex || ''),
           })
         "
       />

src/views/dashboard/graphs/EndpointList.vue

@@ -36,9 +36,9 @@ limitations under the License. -->
         <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
+          :colSubMetrics="colSubMetrics"
           :config="{
             ...config,
-            metrics: colMetrics,
             metricConfig,
             metricTypes,
             metricMode,
@@ -103,6 +103,7 @@ limitations under the License. -->
   const endpoints = ref<Endpoint[]>([]);
   const searchText = ref<string>("");
   const colMetrics = ref<string[]>([]);
+  const colSubMetrics = ref<string[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
   const metricMode = ref<string>(props.config.metricMode);
@@ -180,11 +181,13 @@ limitations under the License. -->
       colMetrics.value = params.names;
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
+      colSubMetrics.value = params.colSubMetrics;
 
       return;
     }
     endpoints.value = currentPods;
     colMetrics.value = [];
+    colSubMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
   }
@@ -230,9 +233,9 @@ limitations under the License. -->
   );
 </script>
 <style lang="scss" scoped>
-  @import "./style.scss";
+  @import url("./style.scss");
 
   .tips {
-    color: rgba(255, 0, 0, 0.5);
+    color: rgb(255 0 0 / 50%);
   }
 </style>

src/views/dashboard/graphs/InstanceList.vue

@@ -35,9 +35,9 @@ limitations under the License. -->
         <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
+          :colSubMetrics="colSubMetrics"
           :config="{
             ...config,
-            metrics: colMetrics,
             metricConfig,
             metricTypes,
             metricMode,
@@ -130,6 +130,7 @@ limitations under the License. -->
   const pageSize = 10;
   const searchText = ref<string>("");
   const colMetrics = ref<string[]>([]);
+  const colSubMetrics = ref<string[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
   const pods = ref<Instance[]>([]); // all instances
@@ -213,12 +214,14 @@ limitations under the License. -->
       );
       instances.value = params.data;
       colMetrics.value = params.names;
+      colSubMetrics.value = params.colSubMetrics;
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
 
       return;
     }
     instances.value = currentInstances;
+    colSubMetrics.value = [];
     colMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
@@ -281,7 +284,7 @@ limitations under the License. -->
   );
 </script>
 <style lang="scss" scoped>
-  @import "./style.scss";
+  @import url("./style.scss");
 
   .attributes {
     max-height: 400px;

src/views/dashboard/graphs/ServiceList.vue

@@ -47,9 +47,9 @@ limitations under the License. -->
         <ColumnGraph
           :intervalTime="intervalTime"
           :colMetrics="colMetrics"
+          :colSubMetrics="colSubMetrics"
           :config="{
             ...config,
-            metrics: colMetrics,
             metricConfig,
             metricTypes,
             metricMode,
@@ -121,6 +121,7 @@ limitations under the License. -->
   const pageSize = 10;
   const services = ref<Service[]>([]);
   const colMetrics = ref<string[]>([]);
+  const colSubMetrics = ref<string[]>([]);
   const searchText = ref<string>("");
   const groups = ref<any>({});
   const sortServices = ref<(Service & { merge: boolean })[]>([]);
@@ -261,12 +262,14 @@ limitations under the License. -->
       );
       services.value = params.data;
       colMetrics.value = params.names;
+      colSubMetrics.value = params.subNames;
       metricTypes.value = params.metricTypesArr;
       metricConfig.value = params.metricConfigArr;
       return;
     }
     services.value = currentServices;
     colMetrics.value = [];
+    colSubMetrics.value = [];
     metricTypes.value = [];
     metricConfig.value = [];
   }
@@ -329,5 +332,5 @@ limitations under the License. -->
   );
 </script>
 <style lang="scss" scoped>
-  @import "./style.scss";
+  @import url("./style.scss");
 </style>

src/views/dashboard/graphs/components/ColumnGraph.vue

@@ -48,7 +48,8 @@ limitations under the License. -->
             <div class="view-line">
               <Line
                 :data="{
-                  [metric]: scope.row[metric] && scope.row[metric].values,
+                  [colSubMetrics[index] || metric]:
+                    scope.row[colSubMetrics[index] || metric] && scope.row[colSubMetrics[index] || metric].values,
                 }"
                 :intervalTime="intervalTime"
                 :config="{
@@ -86,11 +87,11 @@ limitations under the License. -->
 
   /*global defineProps */
   const props = defineProps({
-    colMetrics: { type: Object },
+    colMetrics: { type: Array as PropType<string[]>, default: () => [] },
+    colSubMetrics: { type: Array as PropType<string[]>, default: () => [] },
     config: {
       type: Object as PropType<{
         i: string;
-        metrics: string[];
         metricTypes: string[];
         metricConfig: MetricConfigOpt[];
         metricMode: string;
@@ -100,7 +101,7 @@ limitations under the License. -->
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   });
 
-  function getUnit(index: string) {
+  function getUnit(index: number) {
     const i = Number(index);
     const u = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].unit;
     if (u) {
@@ -108,7 +109,7 @@ limitations under the License. -->
     }
     return encodeURIComponent("");
   }
-  function getLabel(metric: string, index: string) {
+  function getLabel(metric: string, index: number) {
     const i = Number(index);
     const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
     if (label) {