feat: add config and create querys to get metric data

src/views/dashboard/Edit.vue

@@ -53,7 +53,7 @@ const layout: LayoutConfig[] = [
   { x: 4, y: 27, w: 4, h: 12, i: "15" },
   { x: 8, y: 27, w: 4, h: 15, i: "16" },
 ];
-dashboardStore.setLayout(layout);
+// dashboardStore.setLayout(layout);
 </script>
 <style lang="scss" scoped>
 .ds-main {

src/views/dashboard/configuration/ConfigEdit.vue

@@ -20,10 +20,10 @@ limitations under the License. -->
         <component
           :is="states.chartType"
           :intervalTime="appStoreWithOut.intervalTime"
-          :data="source"
+          :data="states.source"
         />
       </div>
-      <span v-show="!source">{{ t("noData") }}</span>
+      <span v-show="!states.source">{{ t("noData") }}</span>
     </div>
     <div class="collapse" :style="{ height: configHeight + 'px' }">
       <el-collapse
@@ -86,7 +86,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts">
-import { reactive, defineComponent } from "vue";
+import { reactive, defineComponent, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -113,25 +113,27 @@ export default defineComponent({
     ElCollapseItem,
   },
   setup() {
+    const { t } = useI18n();
+    const dashboardStore = useDashboardStore();
+    const appStoreWithOut = useAppStoreWithOut();
+    const { loading } = Loading();
     const states = reactive<{
-      metrics: string;
+      metrics?: string[] | string;
       valueTypes: Option[];
       valueType: string;
       metricQueryType: string;
       chartType: string;
       activeNames: string;
+      source: any;
     }>({
       metrics: "",
       valueTypes: [],
       valueType: "",
       metricQueryType: "",
-      chartType: "Bar",
+      chartType: "Line",
       activeNames: "1",
+      source: {},
     });
-    const { t } = useI18n();
-    const dashboardStore = useDashboardStore();
-    const appStoreWithOut = useAppStoreWithOut();
-    const { loading } = Loading();
     async function changeMetrics(val: Option[]) {
       if (!val.length) {
         states.valueTypes = [];
@@ -168,11 +170,29 @@ export default defineComponent({
       },
       { value: "service_mq_consume_count", label: "service_mq_consume_count" },
     ];
-    const source = {
-      count: [1, 2, 5, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
-      avg: [3, 2, 4, 4, 5, 6, 5, 3, 4, 1, 2, 1, 6, 10],
-    };
     const configHeight = document.documentElement.clientHeight - 520;
+    async function queryMetrics() {
+      const json = await dashboardStore.fetchMetricValue(
+        dashboardStore.selectedWidget
+      );
+
+      if (json.error) {
+        return;
+      }
+      const metricVal = json.data.readMetricsValues.values.values.map(
+        (d: any) => d.value
+      );
+      const m =
+        dashboardStore.selectedWidget.metrics &&
+        dashboardStore.selectedWidget.metrics[0];
+      if (!m) {
+        return;
+      }
+      states.source = {
+        [m]: metricVal,
+      };
+    }
+    queryMetrics();
     return {
       states,
       changeChartType,
@@ -181,7 +201,6 @@ export default defineComponent({
       t,
       appStoreWithOut,
       ChartTypes,
-      source,
       metricOpts,
       configHeight,
     };

src/views/dashboard/configuration/StandardOptions.vue

@@ -22,6 +22,16 @@ limitations under the License. -->
       placeholder="Please input Unit"
     />
   </div>
+  <div class="item">
+    <span class="label">{{ t("sortOrder") }}</span>
+    <Selector
+      :value="state.sortOrder"
+      :options="SortOrder"
+      size="mini"
+      placeholder="Select a sort order"
+      class="selector"
+    />
+  </div>
   <div class="item">
     <span class="label">{{ t("max") }}</span>
     <el-input
@@ -99,6 +109,7 @@ limitations under the License. -->
 import { ElInput } from "element-plus";
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
+import { SortOrder } from "../data";
 
 const { t } = useI18n();
 const state = reactive({
@@ -111,6 +122,7 @@ const state = reactive({
   divide: "",
   milliseconds: "",
   seconds: "",
+  sortOrder: "DES",
 });
 </script>
 <style lang="scss" scoped>
@@ -128,4 +140,8 @@ const state = reactive({
 .item {
   margin-bottom: 10px;
 }
+
+.selector {
+  width: 500px;
+}
 </style>

src/views/dashboard/configuration/WidgetOptions.vue

@@ -28,7 +28,7 @@ limitations under the License. -->
       class="input"
       v-model="tooltip"
       size="mini"
-      placeholder="Please input tooltip content"
+      placeholder="Please input tips"
     />
   </div>
 </template>

src/views/dashboard/data.ts

@@ -116,6 +116,10 @@ export const EntityType = [
   },
   { value: "endpointRelation", label: "Endpoint Relation", key: 4 },
 ];
+export const SortOrder = [
+  { label: "DES", value: "DES" },
+  { label: "ASC", value: "ASC" },
+];
 export const Options = [
   {
     value: "Option1",

src/views/dashboard/graphs/Bar.vue

@@ -88,7 +88,7 @@ function getOption() {
       },
       showBackground: props.config.showBackground,
       backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
+        color: "rgba(180, 180, 180, 0.1)",
       },
       markArea:
         index === 0

src/views/dashboard/graphs/Line.vue

@@ -33,9 +33,6 @@ const props = defineProps({
 /*global Nullable */
 const chart = ref<Nullable<HTMLElement>>(null);
 const option = computed(() => getOption());
-// function resize() {
-//   chart.value.myChart.resize();
-// }
 function getOption() {
   const keys = Object.keys(props.data || {}).filter(
     (i: any) => Array.isArray(props.data[i]) && props.data[i].length

src/views/dashboard/panel/Tool.vue

@@ -104,14 +104,27 @@ import { Options, SelectOpts, EntityType } from "../data";
 
 const dashboardStore = useDashboardStore();
 const params = useRoute().params;
-const states = reactive({
+const states = reactive<{
+  entity: string | string[];
+  layerId: string | string[];
+  service: string;
+  pod: string;
+  destService: string;
+  destPod: string;
+  key: number;
+}>({
   service: Options[0].value,
   pod: Options[0].value, // instances and endpoints
   destService: "",
   destPod: "",
   key: EntityType.filter((d: any) => d.value === params.entity)[0].key || 0,
-  ...params,
+  entity: params.entity,
+  layerId: params.layerId,
 });
+
+dashboardStore.setLayer(states.layerId);
+dashboardStore.setEntity(states.entity);
+
 function changeService(val: { value: string; label: string }) {
   states.service = val.value;
 }

src/views/dashboard/panel/Widget.vue

@@ -26,30 +26,63 @@ limitations under the License. -->
         <Icon size="sm" iconName="clearclose" @click="removeWidget" />
       </div>
     </div>
-    <div class="body">No Data</div>
+    <div class="body" :style="{ height: '200px', width: '400px' }">
+      <component
+        :is="item.visualization"
+        :intervalTime="appStoreWithOut.intervalTime"
+        :data="state.source"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps } from "vue";
+import { defineProps, reactive, onMounted } from "vue";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
-const props = defineProps({
-  item: { type: Object as PropType<LayoutConfig> },
+const state = reactive({
+  source: {},
 });
+const props = defineProps({
+  item: { type: Object as PropType<LayoutConfig>, default: () => ({}) },
+});
+const appStoreWithOut = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
+onMounted(() => {
+  queryMetrics();
+});
+async function queryMetrics() {
+  const json = await dashboardStore.fetchMetricValue(props.item);
+
+  if (json.error) {
+    return;
+  }
+  const metricVal = json.data.readMetricsValues.values.values.map(
+    (d: any) => d.value
+  );
+  const m = props.item.metrics && props.item.metrics[0];
+  if (!m) {
+    return;
+  }
+  state.source = {
+    [m]: metricVal,
+  };
+  console.log(state.source);
+}
+
 function removeWidget() {
   dashboardStore.removeWidget(props.item);
 }
 function setConfig() {
   dashboardStore.setConfigPanel(true);
+  dashboardStore.selectWidget(props.item);
 }
 </script>
 <style lang="scss" scoped>
 .widget {
   font-size: 12px;
-  // position: relative;
 }
 
 .header {
@@ -67,5 +100,7 @@ function setConfig() {
 
 .body {
   padding: 5px;
+  height: 200px;
+  width: 100%;
 }
 </style>