feat: add metric config

src/components/Selector.vue

@@ -19,6 +19,7 @@ limitations under the License. -->
     :placeholder="placeholder"
     @change="changeSelected"
     filterable
+    :multiple="multiple"
     :style="{ borderRadius }"
   >
     <el-option
@@ -50,13 +51,14 @@ const props = defineProps({
   size: { type: String, default: "small" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
+  multiple: { type: Boolean, default: false },
 });
 const selected = ref<string>(props.value);
 function changeSelected() {
-  const optionSele = props.options.filter(
+  const options = props.options.filter((d: Option) =>
-    (d: Option) => d.value === selected.value
+    selected.value.includes(d.value)
-  )[0];
+  );
-  emit("change", optionSele);
+  emit("change", options);
 }
 </script>
 <style lang="scss" scope>

src/graph/fragments/dashboard.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+export const TypeOfMetrics = {
+  variable: "$name: String!",
+  query: `typeOfMetrics(name: $name)`,
+};

src/graph/index.ts

@@ -18,8 +18,9 @@ import axios, { AxiosPromise, AxiosResponse } from "axios";
 import { cancelToken } from "@/utils/cancelToken";
 import * as app from "./query/app";
 import * as selector from "./query/selector";
+import * as dashboard from "./query/dashboard";
 
-const query: { [key: string]: string } = { ...app, ...selector };
+const query: { [key: string]: string } = { ...app, ...selector, ...dashboard };
 class Graph {
   private queryData = "";
   public query(queryData: string) {

src/graph/query/dashboard.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 { TypeOfMetrics } from "../fragments/dashboard";
+
+export const queryTypeOfMetrics = `query typeOfMetrics(${TypeOfMetrics.variable}) {${TypeOfMetrics.query}}`;

src/views/dashboard/New.vue

@@ -74,11 +74,11 @@ const onCreate = () => {
   router.push(path);
 };
 selectorStore.fetchServices("general");
-function changeLayer(opt: { label: string; value: string }) {
+function changeLayer(opt: { label: string; value: string }[]) {
-  states.layer = opt.value;
+  states.layer = opt[0].value;
 }
-function changeEntity(opt: { label: string; value: string }) {
+function changeEntity(opt: { label: string; value: string }[]) {
-  states.entity = opt.value;
+  states.entity = opt[0].value;
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/WidgetConfig.vue

@@ -15,37 +15,64 @@ limitations under the License. -->
 <template>
   <div class="graph">No Data</div>
   <div class="config">
-    <div class="metric">
+    <div class="metric-config item">
       <label>Graph your metric</label>
+      <div class="name">Metrics</div>
+      <Selector
+        :value="states.metrics"
+        :options="metricOpts"
+        :multiple="true"
+        size="mini"
+        placeholder="Select a metric"
+        @change="changeMetrics"
+        class="selectors"
+      />
+      <Selector
+        :value="states.metrics"
+        :options="metricOpts"
+        :multiple="true"
+        size="mini"
+        placeholder="Select a metric"
+        @change="changeMetrics"
+        class="selectors"
+      />
     </div>
-    <div class="visualization">
+    <div class="visualization item">
       <label>Select you visualization</label>
     </div>
-    <div class="graph-styles">
+    <div class="graph-styles item">
       <label>Graph styles</label>
     </div>
-    <div>
+    <div class="item">
       <label>Widget options</label>
     </div>
-    <div>
+    <div class="item">
       <label>Standard options</label>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { reactive } from "vue";
+
+const states = reactive<any>({
+  metrics: "",
+});
+function changeMetrics(val: string[]) {
+  console.log(val);
+}
+const metricOpts = [
+  { value: "service_apdex", label: "service_apdex" },
+  { value: "service_sla", label: "service_sla" },
+  { value: "service_cpm", label: "service_cpm" },
+  { value: "service_resp_time", label: "service_resp_time" },
+  { value: "service_percentile", label: "service_percentile" },
+  { value: "service_mq_consume_latency", label: "service_mq_consume_latency" },
+  { value: "service_mq_consume_count", label: "service_mq_consume_count" },
+];
 </script>
 <style lang="scss" scoped>
-.ds-config {
+.item {
-  width: 340px;
+  margin: 20px 0;
-  background-color: #fff;
-  box-shadow: 2px 0 2px 0 #ccc;
-  text-align: center;
-  border-left: 1px solid #eee;
-}
-
-.configuration {
-  z-index: 9999;
 }
 
 .graph {
@@ -54,6 +81,19 @@ import { ref } from "vue";
 }
 
 label {
+  display: inline-block;
   font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.selectors {
+  width: 500px;
+  margin-right: 10px;
+}
+
+.name {
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 </style>

src/views/dashboard/data.ts

@@ -14,6 +14,75 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export enum QueryTypes {
+  ReadMetricsValue = "readMetricsValue",
+  ReadMetricsValues = "readMetricsValues",
+  SortMetrics = "sortMetrics",
+  ReadLabeledMetricsValues = "readLabeledMetricsValues",
+  READHEATMAP = "readHeatMap",
+  ReadSampledRecords = "readSampledRecords",
+}
+export enum MetricsType {
+  UNKNOWN = "UNKNOWN",
+  REGULAR_VALUE = "REGULAR_VALUE",
+  LABELED_VALUE = "LABELED_VALUE",
+  HEATMAP = "HEATMAP",
+  SAMPLED_RECORD = "SAMPLED_RECORD",
+}
+export const QueryMetricTypes: {
+  [key: string]: Array<{ label: string; value: string }>;
+} = {
+  REGULAR_VALUE: [
+    {
+      label: "read the single value in the duration",
+      value: "readMetricsValue",
+    },
+    { label: "read all values in the duration", value: "readMetricsValues" },
+    { label: "get sorted top N values", value: "sortMetrics" },
+  ],
+  LABELED_VALUE: [
+    {
+      label: "read all values of labels in the duration",
+      value: "readLabeledMetricsValues",
+    },
+  ],
+  HEATMAP: [
+    { label: "read heatmap values in the duration", value: "readHeatMap" },
+  ],
+  SAMPLED_RECORD: [
+    { label: "get sorted topN values", value: "readSampledRecords" },
+  ],
+};
+export const MetricChartType: { [key: string]: string } = {
+  readMetricsValue: "ChartNum",
+  readMetricsValues: "ChartLine",
+  sortMetrics: "ChartSlow",
+  readLabeledMetricsValues: "ChartLine",
+  readHeatMap: "ChartHeatmap",
+  readSampledRecords: "ChartSlow",
+};
+export const CalculationType = [
+  { label: "Plus", value: "+" },
+  { label: "Minus", value: "-" },
+  { label: "Multiplication", value: "*" },
+  { label: "Division", value: "/" },
+  { label: "Convert Unix Timestamp(milliseconds)", value: "milliseconds" },
+  { label: "Convert Unix Timestamp(seconds)", value: "seconds" },
+];
+export const ReadValueChartType = [
+  { value: "ChartNum", label: "Digital Card" },
+  { value: "ChartSlow", label: "Slow Chart" },
+];
+
+export const MaxItemNum = 10;
+
+export enum MetricsName {
+  SERVICE_RESP_TIME = "service_resp_time",
+  SERVICE_SLA = "service_sla",
+  SERVICE_CPM = "service_cpm",
+  SERVICE_PERCENTILE = "service_percentile",
+  SERVICE_APDEX = "service_apdex",
+}
 export const EntityType = [
   { value: "service", label: "Service", key: 1 },
   { value: "all", label: "All", key: 10 },