feat: add config and create querys to get metric data

src/components/Graph.vue

@@ -43,6 +43,7 @@ const props = defineProps({
 
 onMounted(() => {
   setTimeout(() => {
+    console.log(chart.value);
     drawEcharts();
     window.addEventListener("resize", state.instanceChart.resize);
   }, 50);

src/graph/fragments/dashboard.ts

@@ -18,3 +18,69 @@ export const TypeOfMetrics = {
   variable: "$name: String!",
   query: `typeOfMetrics(name: $name)`,
 };
+export const queryMetricsValues = {
+  variable: ["$condition: MetricsCondition!, $duration: Duration!"],
+  query: `
+  readMetricsValues: readMetricsValues(condition: $condition, duration: $duration) {
+    label
+    values {
+      values {value}
+    }
+  }`,
+};
+
+export const queryMetricsValue = {
+  variable: ["$condition: MetricsCondition!, $duration: Duration!"],
+  query: `
+  readMetricsValue: readMetricsValue(condition: $condition, duration: $duration)`,
+};
+
+export const querySortMetrics = {
+  variable: ["$condition: TopNCondition!, $duration: Duration!"],
+  query: `
+  sortMetrics: sortMetrics(condition: $condition, duration: $duration) {
+    name
+    id
+    value
+    refId
+  }`,
+};
+export const queryLabeledMetricsValues = {
+  variable: [
+    "$condition: MetricsCondition!, $labels: [String!]!, $duration: Duration!",
+  ],
+  query: `
+  readLabeledMetricsValues: readLabeledMetricsValues(
+    condition: $condition,
+    labels: $labels,
+    duration: $duration) {
+    label
+    values {
+      values {value}
+    }
+  }`,
+};
+
+export const queryHeatMap = {
+  variable: ["$condition: MetricsCondition!, $duration: Duration!"],
+  query: `
+  readHeatMap: readHeatMap(condition: $condition, duration: $duration) {
+    values {
+      id
+      values
+    }
+    buckets {
+      min
+      max
+    }
+  }`,
+};
+export const querySampledRecords = {
+  variable: ["$condition: TopNCondition!, $duration: Duration!"],
+  query: `
+  readSampledRecords: readSampledRecords(condition: $condition, duration: $duration) {
+    name
+    value
+    refId
+  }`,
+};

src/graph/query/dashboard.ts

@@ -14,6 +14,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TypeOfMetrics } from "../fragments/dashboard";
+import {
+  TypeOfMetrics,
+  querySampledRecords,
+  queryHeatMap,
+  queryLabeledMetricsValues,
+  querySortMetrics,
+  queryMetricsValue,
+  queryMetricsValues,
+} from "../fragments/dashboard";
 
 export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;
+
+export const readHeatMap = `query queryData(${queryHeatMap.variable}) {${queryHeatMap.query}}`;
+
+export const readSampledRecords = `query queryData(${querySampledRecords.variable}) {${querySampledRecords.query}}`;
+
+export const readLabeledMetricsValues = `query queryData(${queryLabeledMetricsValues.variable}) {
+  ${queryLabeledMetricsValues.query}}`;
+
+export const sortMetrics = `query queryData(${querySortMetrics.variable}) {${querySortMetrics.query}}`;
+
+export const readMetricsValue = `query queryData(${queryMetricsValue.variable}) {${queryMetricsValue.query}}`;
+
+export const readMetricsValues = `query queryData(${queryMetricsValues.variable}) {${queryMetricsValues.query}}`;

src/store/modules/dashboard.ts

@@ -19,17 +19,24 @@ import { store } from "@/store";
 import { LayoutConfig } from "@/types/dashboard";
 import graph from "@/graph";
 import { AxiosResponse } from "axios";
-
+import { ConfigData } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
+  selectedWidget: Nullable<LayoutConfig>;
+  entity: string;
+  layerId: string;
 }
 
 export const dashboardStore = defineStore({
   id: "dashboard",
   state: (): DashboardState => ({
-    layout: [],
+    layout: [ConfigData],
     showConfig: false,
+    selectedWidget: ConfigData,
+    entity: "",
+    layerId: "",
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
@@ -55,6 +62,15 @@ export const dashboardStore = defineStore({
     setConfigPanel(show: boolean) {
       this.showConfig = show;
     },
+    selectWidget(widget: Nullable<LayoutConfig>) {
+      this.selectedWidget = ConfigData || widget;
+    },
+    setLayer(id: string) {
+      this.layerId = id;
+    },
+    setEntity(type: string) {
+      this.entity = type;
+    },
     async fetchMetricType(item: string) {
       const res: AxiosResponse = await graph
         .query("queryTypeOfMetrics")
@@ -62,6 +78,28 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
+    async fetchMetricValue(config: LayoutConfig) {
+      if (!config.queryMetricType) {
+        return;
+      }
+      const appStoreWithOut = useAppStoreWithOut();
+      const variable = {
+        condition: {
+          name: "service_resp_time",
+          entity: {
+            normal: true,
+            scope: "Service",
+            serviceName: "agentless::app",
+          },
+        },
+        duration: appStoreWithOut.durationTime,
+      };
+      const res: AxiosResponse = await graph
+        .query(config.queryMetricType)
+        .params(variable);
+
+      return res.data;
+    },
   },
 });
 

src/store/modules/data.ts

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { LayoutConfig } from "@/types/dashboard";
+export const ConfigData: LayoutConfig = {
+  x: 0,
+  y: 0,
+  w: 8,
+  h: 12,
+  i: "0",
+  metrics: ["service_resp_time"],
+  queryMetricType: "readMetricsValues",
+  visualization: "Line",
+  widget: {
+    title: "Title",
+    tips: "Tooltip",
+  },
+  graph: {
+    showBackground: true,
+    barWidth: 30,
+  },
+  standard: {
+    sortOrder: "DEC",
+    unit: "s",
+  },
+};

src/types/dashboard.ts

@@ -22,16 +22,25 @@ export interface LayoutConfig {
   i: string;
   widget?: WidgetConfig;
   graph?: GraphConfig;
+  standard?: StandardConfig;
+  metrics?: string[];
+  visualization?: string;
+  queryMetricType?: string;
 }
 
 export interface WidgetConfig {
-  title: string;
+  title?: string;
-  Metrics: string[];
+  tips?: string;
-  unit: string;
-  tips: string;
-  sortOrder: string;
 }
 
 export interface GraphConfig {
-  type: string;
+  showBackground?: boolean;
+  barWidth?: number;
+}
+
+export interface StandardConfig {
+  sortOrder?: string;
+  unit?: string;
+  max?: string;
+  min?: string;
 }

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({
+const state = reactive({
-  item: { type: Object as PropType<LayoutConfig> },
+  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>