feat: add metric config

src/views/dashboard/New.vue

@@ -74,11 +74,11 @@ const onCreate = () => {
   router.push(path);
 };
 selectorStore.fetchServices("general");
-function changeLayer(opt: { label: string; value: string }) {
-  states.layer = opt.value;
+function changeLayer(opt: { label: string; value: string }[]) {
+  states.layer = opt[0].value;
 }
-function changeEntity(opt: { label: string; value: string }) {
-  states.entity = opt.value;
+function changeEntity(opt: { label: string; value: string }[]) {
+  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 {
-  width: 340px;
-  background-color: #fff;
-  box-shadow: 2px 0 2px 0 #ccc;
-  text-align: center;
-  border-left: 1px solid #eee;
-}
-
-.configuration {
-  z-index: 9999;
+.item {
+  margin: 20px 0;
 }
 
 .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 },