feat: enhance source processor

src/views/dashboard/Edit.vue

@@ -23,7 +23,7 @@ limitations under the License. -->
       :destroy-on-close="true"
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <widget-config />
+      <config-edit />
     </el-dialog>
   </div>
 </template>
@@ -32,7 +32,7 @@ import { useI18n } from "vue-i18n";
 import GridLayout from "./panel/Layout.vue";
 // import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
-import WidgetConfig from "./configuration/ConfigEdit.vue";
+import ConfigEdit from "./configuration/ConfigEdit.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();

src/views/dashboard/configuration/MetricOptions.vue

@@ -69,6 +69,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { MetricTypes, TableChartTypes, MetricCatalog } from "../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
+import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
 
 /*global defineProps, defineEmits */
 const props = defineProps({
@@ -122,8 +123,9 @@ async function setMetricType() {
   for (const metric of metrics) {
     states.metricTypeList.push(MetricTypes[metric.type]);
   }
-
-  queryMetrics();
+  if (states.metrics && states.metrics[0]) {
+    queryMetrics();
+  }
 }
 
 function changeMetrics(index: number, arr: (Option & { type: string })[]) {
@@ -135,6 +137,7 @@ function changeMetrics(index: number, arr: (Option & { type: string })[]) {
   }
   states.metrics[index] = arr[0].value;
   const typeOfMetrics = arr[0].type;
+
   states.metricTypeList[index] = MetricTypes[typeOfMetrics];
   states.metricTypes[index] = MetricTypes[typeOfMetrics][0].value;
   emit("apply", { metricTypes: states.metricTypes, metrics: states.metrics });
@@ -164,26 +167,21 @@ function changeMetricType(index: number, opt: Option[]) {
   queryMetrics();
 }
 async function queryMetrics() {
-  const json = await dashboardStore.fetchMetricValue(
-    dashboardStore.selectedGrid
-  );
-  if (!json) {
+  const params = useQueryProcessor(states);
+  if (!params) {
+    emit("update", {});
     return;
   }
 
+  const json = await dashboardStore.fetchMetricValue(params);
   if (json.errors) {
     ElMessage.error(json.errors);
     return;
   }
-  const metricVal = json.data.readMetricsValues.values.values.map(
-    (d: { value: number }) => d.value
-  );
-  const m = states.metrics[0];
-  if (!m) {
-    return;
-  }
-  emit("update", { [m]: metricVal });
+  const source = useSourceProcessor(json, states);
+  emit("update", source);
 }
+
 function changeDashboard(item: Option[]) {
   states.graph.dashboardName = item[0].value;
 }
@@ -204,7 +202,6 @@ watch(
   () => props.graph,
   (data: any) => {
     states.isTable = TableChartTypes.includes(data.type);
-    console.log(data);
   }
 );
 </script>

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

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

src/views/dashboard/controls/Widget.vue

@@ -87,14 +87,11 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    queryMetrics();
+    if (props.data.metrics && props.data.metrics[0]) {
+      queryMetrics();
+    }
     async function queryMetrics() {
-      const params = useQueryProcessor(
-        props.data,
-        selectorStore,
-        dashboardStore,
-        appStore.durationTime
-      );
+      const params = await useQueryProcessor(props.data);
       if (!params) {
         state.source = {};
         return;
@@ -102,6 +99,9 @@ export default defineComponent({
       loading.value = true;
       const json = await dashboardStore.fetchMetricValue(params);
       loading.value = false;
+      if (!json) {
+        return;
+      }
       state.source = useSourceProcessor(json, props.data);
     }
 

src/views/dashboard/data.ts

@@ -78,14 +78,6 @@ export const DefaultGraphConfig: { [key: string]: any } = {
   },
 };
 
-export enum MetricQueryTypes {
-  ReadMetricsValue = "readMetricsValue",
-  ReadMetricsValues = "readMetricsValues",
-  SortMetrics = "sortMetrics",
-  ReadLabeledMetricsValues = "readLabeledMetricsValues",
-  READHEATMAP = "readHeatMap",
-  ReadSampledRecords = "readSampledRecords",
-}
 export enum MetricsType {
   UNKNOWN = "UNKNOWN",
   REGULAR_VALUE = "REGULAR_VALUE",

src/views/dashboard/graphs/Card.vue

@@ -16,11 +16,11 @@ limitations under the License. -->
 <template>
   <div class="chart-card" :style="{ fontSize: `${config.fontSize}px` }">
     {{
-      typeof data[key] === "string"
-        ? data[key]
-        : isNaN(data[key])
+      typeof singleVal === "string"
+        ? singleVal
+        : isNaN(singleVal)
         ? null
-        : data[key].toFixed(2)
+        : singleVal.toFixed(2)
     }}
     <span v-show="config.showUint">{{ standard.unit }}</span>
   </div>
@@ -45,6 +45,7 @@ const props = defineProps({
   },
 });
 const key = computed(() => Object.keys(props.data)[0]);
+const singleVal = computed(() => props.data[key.value]);
 </script>
 <style lang="scss" scoped>
 .chart-card {

src/views/dashboard/graphs/TopList.vue

@@ -14,23 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
-    <Icon
-      iconName="review-list"
-      size="sm"
-      @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
-    />
-    <div class="mb-5 ell">
-      <span class="calls sm mr-10">{{ i.value }}</span>
-      <span class="cp link-hover">
-        {{ i.name + getTraceId(i) }}
-      </span>
+  <div class="top-list">
+    <div class="chart-slow-i" v-for="(i, index) in datas" :key="index">
+      <Icon
+        iconName="review-list"
+        size="sm"
+        @click="handleClick((i.traceIds && i.traceIds[0]) || i.name)"
+      />
+      <div class="mb-5 ell">
+        <span class="calls sm mr-10">{{ i.value }}</span>
+        <span class="cp link-hover">
+          {{ i.name + getTraceId(i) }}
+        </span>
+      </div>
+      <el-progress
+        :stroke-width="10"
+        :percentage="(i.value / maxValue) * 100"
+        color="#bf99f8"
+      />
     </div>
-    <el-progress
-      :stroke-width="10"
-      :percentage="(i.value / maxValue) * 100"
-      color="#bf99f8"
-    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -40,32 +42,34 @@ import copy from "@/utils/copy";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Array as PropType<
-      { name: string; value: number; traceIds: string[] }[]
-    >,
-    default: () => [],
+    type: Object as PropType<{
+      [key: string]: { name: string; value: number; traceIds: string[] }[];
+    }>,
+    default: () => ({}),
   },
   config: {
     type: Object as PropType<{ sortOrder: string }>,
     default: () => ({}),
   },
+  intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
+const key = computed(() => Object.keys(props.data)[0]);
 const maxValue = computed(() => {
-  if (!props.data.length) {
+  if (!props.data[key.value].length) {
     return 0;
   }
-  const temp: number[] = props.data.map((i: any) => i.value);
+  const temp: number[] = props.data[key.value].map((i: any) => i.value);
   return Math.max.apply(null, temp);
 });
 const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
   return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
 };
-const datas: any = () => {
-  if (!props.data.length) {
+const datas = computed(() => {
+  if (!props.data[key.value].length) {
     return [];
   }
   const { sortOrder } = props.config;
-  const val: any = props.data;
+  const val: any = props.data[key.value];
 
   switch (sortOrder) {
     case "DES":
@@ -75,17 +79,25 @@ const datas: any = () => {
       val.sort((a: any, b: any) => a.value - b.value);
       break;
     default:
+      val.sort((a: any, b: any) => b.value - a.value);
       break;
   }
+
   return val;
-};
+});
 function handleClick(i: string) {
   copy(i);
 }
 </script>
 <style lang="scss" scoped>
+.top-list {
+  height: 100%;
+  overflow: auto;
+  padding: 10px;
+}
+
 .progress-bar {
-  font-size: 14px;
+  font-size: 12px;
   color: #333;
 }
 

src/views/dashboard/panel/Tool.vue

@@ -108,7 +108,10 @@ const states = reactive<{
 });
 dashboardStore.setLayer(states.layerId);
 dashboardStore.setEntity(states.entity);
-onBeforeMount(async () => {
+
+getServices();
+
+async function getServices() {
   if (!states.layerId) {
     return;
   }
@@ -118,7 +121,7 @@ onBeforeMount(async () => {
     return;
   }
   fetchPods(states.entity);
-});
+}
 
 async function changeService(service: Option[]) {
   if (service[0]) {