feat: update list

src/hooks/useExpressionsProcessor.ts

@@ -199,58 +199,64 @@ export async function useExpressionsQueryPodsMetrics(
     const metricConfigArr: MetricConfigOpt[] = [];
     const metricTypesArr: string[] = [];
     const data = pods.map((d: any, idx: number) => {
-      config.expressions.map((exp: string, index: number) => {
+      for (let index = 0; index < config.expressions.length; index++) {
         const c: any = (config.metricConfig && config.metricConfig[index]) || {};
         const k = "expression" + idx + index;
         const results = (resp.data[k] && resp.data[k].results) || [];
-        if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
-          const name = results[0].metric.name || "";
-          d[name] = results[0].values[0].value;
-          if (idx === 0) {
-            names.push(name);
-            metricConfigArr.push(c);
-            metricTypesArr.push(config.typesOfMQE[index]);
-          }
-        }
-        if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) {
         if (results.length > 1) {
           const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           for (let i = 0; i < results.length; i++) {
-              let name = results[i].metric.name || "";
+            let name = results[i].metric.labels[0].value || "";
             const values = results[i].values.map((d: { value: unknown }) => d.value);
-              const indexNum = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
+            const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
-              if (labels[indexNum] && indexNum > -1) {
+
-                name = labels[indexNum];
+            if (labels[num]) {
+              name = labels[num];
             }
             if (!d[name]) {
               d[name] = {};
             }
-              if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
+            if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
-                d[name]["avg"] = calculateExp(results[i].values, c);
+              d[name]["avg"] = results[i].values[0].value;
-              }
+            } else {
               d[name]["values"] = values;
-              if (idx === 0) {
+            }
+
+            const j = names.findIndex((d: string) => d === name);
+
+            if (j < 0) {
               names.push(name);
               metricConfigArr.push({ ...c, index: i });
               metricTypesArr.push(config.typesOfMQE[index]);
+            } else {
+              metricConfigArr[j] = { ...metricConfigArr[j], ...c };
             }
           }
-            return;
+        } else {
+          if (!results[0]) {
+            return d;
           }
           const name = results[0].metric.name || "";
+          if (!d[name]) {
             d[name] = {};
-          if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
-            d[name]["avg"] = calculateExp(results[0].values, c);
           }
+          if (config.typesOfMQE[index] === ExpressionResultType.SINGLE_VALUE) {
+            d[name]["avg"] = [results[0].values[0].value];
+          }
+          if (config.typesOfMQE[index] === ExpressionResultType.TIME_SERIES_VALUES) {
             d[name]["values"] = results[0].values.map((d: { value: number }) => d.value);
-          if (idx === 0) {
+          }
+          const j = names.findIndex((d: string) => d === name);
+          if (j < 0) {
             names.push(name);
             metricConfigArr.push(c);
             metricTypesArr.push(config.typesOfMQE[index]);
+          } else {
+            metricConfigArr[j] = { ...metricConfigArr[j], ...c };
+          }
         }
       }
-      });
       return d;
     });
 

src/hooks/useListConfig.ts

@@ -15,24 +15,25 @@
  * limitations under the License.
  */
 import { MetricQueryTypes, Calculations } from "./data";
-import { ExpressionResultType } from "@/views/dashboard/data";
+import { MetricModes } from "@/views/dashboard/data";
 
 export function useListConfig(config: Indexable, index: string) {
+  if (config.metricModes === MetricModes.Expression) {
+    return {
+      isLinear: false,
+      isAvg: true,
+    };
+  }
   const i = Number(index);
   const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
   const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
   const isLinear =
-    [
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
-      MetricQueryTypes.ReadMetricsValues,
+    !types.includes(calculation);
-      MetricQueryTypes.ReadLabeledMetricsValues,
-      ExpressionResultType.TIME_SERIES_VALUES,
-    ].includes(config.metricTypes[i]) && !types.includes(calculation);
   const isAvg =
-    [
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
-      MetricQueryTypes.ReadMetricsValues,
+    types.includes(calculation);
-      MetricQueryTypes.ReadLabeledMetricsValues,
+
-      ExpressionResultType.TIME_SERIES_VALUES,
-    ].includes(config.metricTypes[i]) && types.includes(calculation);
   return {
     isLinear,
     isAvg,

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

@@ -35,13 +35,6 @@ limitations under the License. -->
     @change="changeMetricMode"
   />
   <div v-for="(metric, index) in states.metrics" :key="index" class="metric-item">
-    <!-- <el-input
-      v-if="isExpression"
-      class="selectors"
-      size="small"
-      placeholder="Please input a expression"
-      @change="changeExpression"
-    /> -->
     <div v-if="isExpression" id="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
       {{ metric }}
     </div>
@@ -505,7 +498,8 @@ limitations under the License. -->
     queryMetrics();
   }
   async function changeExpression(event: any, index: number) {
-    const params = event.target.textContent;
+    const params = (event.target.textContent || "").replace(/\s+/g, "");
+
     if (params) {
       const resp = await dashboardStore.getTypeOfMQE(params);
       states.metrics[index] = params;

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

@@ -44,7 +44,10 @@ limitations under the License. -->
     </div>
     <div
       class="item mb-10"
-      v-if="[ProtocolTypes.ReadLabeledMetricsValues, ExpressionResultType.TIME_SERIES_VALUES].includes(metricType)"
+      v-if="
+        [ProtocolTypes.ReadLabeledMetricsValues].includes(metricType) ||
+        dashboardStore.selectedGrid.metricMode === MetricModes.Expression
+      "
     >
       <span class="label">{{ t("labelsIndex") }}</span>
       <el-input
@@ -113,7 +116,7 @@ limitations under the License. -->
   const { t } = useI18n();
   const emit = defineEmits(["update"]);
   const dashboardStore = useDashboardStore();
-  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
+  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
   const currentMetric = ref<MetricConfigOpt>({
     ...props.currentMetricConfig,
     topN: props.currentMetricConfig.topN || 10,
@@ -138,10 +141,7 @@ limitations under the License. -->
       metricTypes.value[props.index],
     ),
   );
-  const isExec = computed(() => {
+  const isExec = computed(() => dashboardStore.selectedGrid.metricMode === MetricModes.General);
-    const graph = dashboardStore.selectedGrid.graph || {};
-    return dashboardStore.selectedGrid.metricMode === MetricModes.General || ListChartTypes.includes(graph.type);
-  });
   function updateConfig(index: number, param: { [key: string]: string }) {
     const key = Object.keys(param)[0];
     if (!key) {

src/views/dashboard/graphs/EndpointList.vue

@@ -41,6 +41,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -102,6 +103,7 @@ limitations under the License. -->
   const colMetrics = ref<string[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
+  const metricMode = ref<string>(props.config.metricMode);
 
   if (props.needQuery) {
     queryEndpoints();
@@ -213,6 +215,7 @@ limitations under the License. -->
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryEndpointMetrics(endpoints.value);
     },
   );

src/views/dashboard/graphs/InstanceList.vue

@@ -40,6 +40,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -130,6 +131,7 @@ limitations under the License. -->
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
   const pods = ref<Instance[]>([]); // all instances
+  const metricMode = ref<string>(props.config.metricMode);
   if (props.needQuery) {
     queryInstance();
   }
@@ -264,6 +266,7 @@ limitations under the License. -->
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryInstanceMetrics(instances.value);
     },
   );

src/views/dashboard/graphs/ServiceList.vue

@@ -52,6 +52,7 @@ limitations under the License. -->
             metrics: colMetrics,
             metricConfig,
             metricTypes,
+            metricMode,
           }"
           v-if="colMetrics.length"
         />
@@ -123,6 +124,7 @@ limitations under the License. -->
   const sortServices = ref<(Service & { merge: boolean })[]>([]);
   const metricConfig = ref<MetricConfigOpt[]>(props.config.metricConfig || []);
   const metricTypes = ref<string[]>(props.config.metricTypes || []);
+  const metricMode = ref<string>(props.config.metricMode);
 
   queryServices();
 
@@ -309,6 +311,7 @@ limitations under the License. -->
         return;
       }
       metricConfig.value = props.config.metricConfig;
+      metricMode.value = props.config.metricMode;
       queryServiceMetrics(services.value);
     },
   );

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

@@ -23,7 +23,7 @@ limitations under the License. -->
     <template #default="scope">
       <div class="chart">
         <Line
-          v-if="useListConfig(config, index).isLinear"
+          v-if="useListConfig(config, index).isLinear && config.metricMode !== MetricModes.Expression"
           :data="{
             [metric]: scope.row[metric] && scope.row[metric].values,
           }"
@@ -35,7 +35,10 @@ limitations under the License. -->
             showlabels: false,
           }"
         />
-        <span class="item flex-h" v-else-if="useListConfig(config, index).isAvg">
+        <span
+          class="item flex-h"
+          v-else-if="useListConfig(config, index).isAvg || config.metricMode === MetricModes.Expression"
+        >
           <el-popover placement="left" :width="400" trigger="click">
             <template #reference>
               <span class="trend">
@@ -79,6 +82,7 @@ limitations under the License. -->
   import Line from "../Line.vue";
   import Card from "../Card.vue";
   import { MetricQueryTypes } from "@/hooks/data";
+  import { ExpressionResultType, MetricModes } from "@/views/dashboard/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -89,6 +93,7 @@ limitations under the License. -->
         metrics: string[];
         metricTypes: string[];
         metricConfig: MetricConfigOpt[];
+        metricMode: string;
       }>,
       default: () => ({}),
     },
@@ -107,7 +112,15 @@ limitations under the License. -->
     const i = Number(index);
     const label = props.config.metricConfig && props.config.metricConfig[i] && props.config.metricConfig[i].label;
     if (label) {
-      if (props.config.metricTypes[i] === MetricQueryTypes.ReadLabeledMetricsValues) {
+      if (
+        (
+          [
+            MetricQueryTypes.ReadLabeledMetricsValues,
+            ExpressionResultType.TIME_SERIES_VALUES,
+            ExpressionResultType.SINGLE_VALUE,
+          ] as string[]
+        ).includes(props.config.metricTypes[i])
+      ) {
         const name = (label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""))[
           props.config.metricConfig[i].index || 0
         ];