update standard config

src/constants/templates.ts

@@ -111,7 +111,7 @@ export const ServiceLayout = {
                 y: 0,
                 w: 8,
                 h: 12,
-                i: "6",
+                i: "0",
                 metrics: ["service_percentile"],
                 metricTypes: ["readLabeledMetricsValues"],
                 type: "Widget",
@@ -127,6 +127,26 @@ export const ServiceLayout = {
                   labelsIndex: "0, 1, 2, 3, 4",
                 },
               },
+              {
+                x: 8,
+                y: 0,
+                w: 8,
+                h: 12,
+                i: "1",
+                metrics: ["service_apdex"],
+                metricTypes: ["readMetricsValue"],
+                type: "Widget",
+                widget: {
+                  title: "Service Apdex",
+                  tips: "Tooltip",
+                },
+                graph: {
+                  type: "Card",
+                },
+                standard: {
+                  divide: "10000",
+                },
+              },
             ],
           },
           {

src/hooks/data.ts

@@ -85,11 +85,3 @@ export const RespFields: any = {
     refId
   }`,
 };
-export enum CalculationType {
-  Plus = "+",
-  Minus = "-",
-  Multiplication = "*",
-  Division = "/",
-  "Convert Unix Timestamp(milliseconds)" = "milliseconds",
-  "Convert Unix Timestamp(seconds)" = "seconds",
-}

src/hooks/useProcessor.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import dayjs from "dayjs";
 import { RespFields, MetricQueryTypes } from "./data";
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -62,7 +63,7 @@ export function useQueryProcessor(config: any) {
         normal: selectorStore.currentService.normal,
         scope: dashboardStore.entity,
         topN: 10,
-        order: "DES",
+        order: config.standard.sortOrder || "DES",
       };
     } else {
       if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
@@ -142,7 +143,7 @@ export function useSourceProcessor(
 
     if (type === MetricQueryTypes.ReadMetricsValues) {
       source[m] = resp.data[keys[index]].values.values.map(
-        (d: { value: number }) => d.value
+        (d: { value: number }) => aggregation(d.value, config.standard)
       );
     }
     if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
@@ -154,8 +155,8 @@ export function useSourceProcessor(
         .split(",")
         .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
       for (const item of resVal) {
-        const values = item.values.values.map(
-          (d: { value: number }) => d.value
+        const values = item.values.values.map((d: { value: number }) =>
+          aggregation(Number(d.value), config.standard)
         );
 
         const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
@@ -167,13 +168,22 @@ export function useSourceProcessor(
       }
     }
     if (type === MetricQueryTypes.ReadMetricsValue) {
-      source[m] = Object.values(resp.data)[0];
+      source[m] = aggregation(
+        Number(Object.values(resp.data)[0]),
+        config.standard
+      );
     }
     if (
       type === MetricQueryTypes.SortMetrics ||
       type === MetricQueryTypes.ReadSampledRecords
     ) {
-      source[m] = Object.values(resp.data)[0] || [];
+      source[m] = (Object.values(resp.data)[0] || []).map(
+        (d: { value: unknown; name: string }) => {
+          d.value = aggregation(Number(d.value), config.standard);
+
+          return d;
+        }
+      );
     }
     if (type === MetricQueryTypes.READHEATMAP) {
       const resVal = Object.values(resp.data)[0] || {};
@@ -297,3 +307,34 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
 
   return { queryStr, conditions };
 }
+
+function aggregation(val: number, standard: any): number | string {
+  let data: number | string = val;
+
+  if (!isNaN(standard.plus)) {
+    data = val + Number(standard.plus);
+    return data;
+  }
+  if (!isNaN(standard.minus)) {
+    data = val - Number(standard.plus);
+    return data;
+  }
+  if (!isNaN(standard.multiply)) {
+    data = val * Number(standard.multiply);
+    return data;
+  }
+  if (!isNaN(standard.divide)) {
+    data = val / Number(standard.divide);
+    return data;
+  }
+  if (standard.milliseconds) {
+    data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
+    return data;
+  }
+  if (standard.milliseconds) {
+    data = dayjs.unix(val).format("YYYY-MM-DD HH:mm:ss");
+    return data;
+  }
+
+  return data;
+}

src/store/data.ts

@@ -48,7 +48,7 @@ export const ConfigData: any = {
     showYAxis: true,
   },
   standard: {
-    sortOrder: "DEC",
+    sortOrder: "DES",
     unit: "min",
   },
   children: [],
@@ -72,7 +72,7 @@ export const ConfigData1: any = {
     showYAxis: true,
   },
   standard: {
-    sortOrder: "DEC",
+    sortOrder: "DES",
     unit: "min",
   },
   children: [],
@@ -96,7 +96,7 @@ export const ConfigData2: any = {
     showYAxis: true,
   },
   standard: {
-    sortOrder: "DEC",
+    sortOrder: "DES",
     unit: "min",
   },
   children: [],

src/store/modules/dashboard.ts

@@ -129,7 +129,7 @@ export const dashboardStore = defineStore({
       if (idx < 0) {
         return;
       }
-      const tabIndex = this.layout[idx].activedTabIndex;
+      const tabIndex = this.layout[idx].activedTabIndex || 0;
       const { children } = this.layout[idx].children[tabIndex];
       const newItem: LayoutConfig = {
         ...NewControl,

src/views/dashboard/configuration/Widget.vue

@@ -17,6 +17,9 @@ limitations under the License. -->
     <div class="graph" v-loading="loading">
       <div class="header">
         <span>{{ dashboardStore.selectedGrid.widget.title }}</span>
+        <span v-show="dashboardStore.selectedGrid.standard.unit" class="unit">
+          ({{ dashboardStore.selectedGrid.standard.unit }})
+        </span>
         <div class="tips" v-show="dashboardStore.selectedGrid.widget.tips">
           <el-tooltip :content="dashboardStore.selectedGrid.widget.tips">
             <Icon iconName="info_outline" size="sm" />
@@ -209,4 +212,9 @@ export default defineComponent({
 .ds-name {
   margin-bottom: 10px;
 }
+
+.unit {
+  display: inline-block;
+  margin-left: 5px;
+}
 </style>

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -256,7 +256,8 @@ function changeMetricType(index: number, opt: Option[] | any) {
   queryMetrics();
 }
 async function queryMetrics() {
-  const params = useQueryProcessor(states);
+  const { standard } = dashboardStore.selectedGrid;
+  const params = useQueryProcessor({ ...states, standard });
   if (!params) {
     emit("update", {});
     return;
@@ -269,7 +270,6 @@ async function queryMetrics() {
     ElMessage.error(json.errors);
     return;
   }
-  const { standard } = dashboardStore.selectedGrid;
   const source = useSourceProcessor(json, { ...states, standard });
   emit("update", source);
 }

src/views/dashboard/configuration/widget/StandardOptions.vue

@@ -17,106 +17,97 @@ limitations under the License. -->
     <span class="label">{{ t("unit") }}</span>
     <el-input
       class="input"
-      v-model="state.unit"
+      v-model="selectedGrid.standard.unit"
       size="small"
       placeholder="Please input Unit"
-      @change="changeStandardOpt({ unit: state.unit })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("sortOrder") }}</span>
     <Selector
-      :value="state.sortOrder"
+      :value="sortOrder"
       :options="SortOrder"
       size="small"
       placeholder="Select a sort order"
       class="selector"
-      @change="changeStandardOpt({ sortOrder: state.sortOrder })"
+      @change="changeStandardOpt({ sortOrder })"
     />
   </div>
-  <div class="item">
+  <div class="item" v-show="percentile">
     <span class="label">{{ t("labels") }}</span>
     <el-input
       class="input"
-      v-model="state.metricLabels"
+      v-model="selectedGrid.standard.metricLabels"
       size="small"
       placeholder="auto"
-      @change="changeStandardOpt({ metricLabels: state.metricLabels })"
     />
   </div>
-  <div class="item">
+  <div class="item" v-show="percentile">
     <span class="label">{{ t("labelsIndex") }}</span>
     <el-input
       class="input"
-      v-model="state.labelsIndex"
+      v-model="selectedGrid.standard.labelsIndex"
       size="small"
       placeholder="auto"
-      @change="changeStandardOpt({ labelsIndex: state.labelsIndex })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("plus") }}</span>
     <el-input
       class="input"
-      v-model="state.plus"
+      v-model="selectedGrid.standard.plus"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ plus: state.plus })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("minus") }}</span>
     <el-input
       class="input"
-      v-model="state.minus"
+      v-model="selectedGrid.standard.minus"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ minus: state.minus })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("multiply") }}</span>
     <el-input
       class="input"
-      v-model="state.multiply"
+      v-model="selectedGrid.standard.multiply"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ multiply: state.multiply })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("divide") }}</span>
     <el-input
       class="input"
-      v-model="state.divide"
+      v-model="selectedGrid.standard.divide"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ divide: state.divide })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("convertToMilliseconds") }}</span>
     <el-input
       class="input"
-      v-model="state.milliseconds"
+      v-model="selectedGrid.standard.milliseconds"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ milliseconds: state.milliseconds })"
     />
   </div>
   <div class="item">
     <span class="label">{{ t("convertToSeconds") }}</span>
     <el-input
       class="input"
-      v-model="state.seconds"
+      v-model="selectedGrid.standard.seconds"
       size="small"
       placeholder="none"
-      @change="changeStandardOpt({ seconds: state.seconds })"
     />
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive } from "vue";
+import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { SortOrder } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -124,18 +115,10 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
 const { t } = useI18n();
-const state = reactive({
-  unit: selectedGrid.standard.unit,
-  labelsIndex: selectedGrid.standard.labelsIndex,
-  metricLabels: selectedGrid.standard.metricLabels,
-  plus: "",
-  minus: "",
-  multiply: "",
-  divide: "",
-  milliseconds: "",
-  seconds: "",
-  sortOrder: selectedGrid.standard.sortOrder,
-});
+const percentile = ref<boolean>(
+  selectedGrid.metricTypes.includes("readLabeledMetricsValues")
+);
+const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");
 
 function changeStandardOpt(param: { [key: string]: unknown }) {
   const standard = {

src/views/dashboard/configuration/widget/graph-styles/Card.vue

@@ -20,8 +20,8 @@ limitations under the License. -->
       v-model="fontSize"
       show-input
       input-size="small"
-      :min="10"
-      :max="20"
+      :min="12"
+      :max="50"
       :step="1"
       @change="updateConfig({ fontSize })"
     />

src/views/dashboard/controls/Widget.vue

@@ -15,7 +15,14 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>{{ data.widget?.title || "" }}</div>
+      <div>
+        <span>
+          {{ data.widget?.title || "" }}
+        </span>
+        <span class="unit" v-show="data.standard?.unit">
+          ({{ data.standard?.unit }})
+        </span>
+      </div>
       <div>
         <el-tooltip :content="data.widget?.tips">
           <span>
@@ -223,4 +230,9 @@ export default defineComponent({
   text-align: center;
   padding-top: 20px;
 }
+
+.unit {
+  display: inline-block;
+  margin-left: 5px;
+}
 </style>