From b9b41f8627d5671803b34923effac4b31f834f26 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 10 Aug 2022 16:30:22 +0800
Subject: [PATCH] add metrics panel

---
 src/store/modules/ebpf.ts                     |  16 ++
 src/views/dashboard/controls/Tab.vue          |  22 +-
 src/views/dashboard/controls/tab.ts           |  39 ++++
 src/views/dashboard/graphs/topology.ts        |  32 +++
 .../components/metrics-panel/Index.vue        |  65 ++++++
 .../components/metrics-panel/MetricWidget.vue | 216 ++++++++++++++++++
 6 files changed, 370 insertions(+), 20 deletions(-)
 create mode 100644 src/views/dashboard/controls/tab.ts
 create mode 100644 src/views/dashboard/graphs/topology.ts
 create mode 100644 src/views/dashboard/related/network-profiling/components/metrics-panel/Index.vue
 create mode 100644 src/views/dashboard/related/network-profiling/components/metrics-panel/MetricWidget.vue

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 94778da8..e5f0646a 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -27,6 +27,7 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { Call } from "@/types/topology";
+import { LayoutConfig } from "@/types/dashboard";
 interface EbpfStore {
   taskList: EBPFTaskList[];
   networkTasks: EBPFTaskList[];
@@ -44,6 +45,9 @@ interface EbpfStore {
   calls: Call[];
   node: Nullable<ProcessNode>;
   call: Nullable<Call>;
+  metricsLayout: LayoutConfig[];
+  selectedMetric: Nullable<LayoutConfig>;
+  activeMetricIndex: string;
 }
 
 export const ebpfStore = defineStore({
@@ -65,6 +69,9 @@ export const ebpfStore = defineStore({
     calls: [],
     node: null,
     call: null,
+    metricsLayout: [],
+    selectedMetric: null,
+    activeMetricIndex: "",
   }),
   actions: {
     setSelectedTask(task: EBPFTaskList) {
@@ -85,6 +92,15 @@ export const ebpfStore = defineStore({
     setLink(link: Call) {
       this.call = link;
     },
+    setMetricsLayout(layout: LayoutConfig[]) {
+      this.metricsLayout = layout;
+    },
+    setSelectedMetric(item: LayoutConfig) {
+      this.selectedMetric = item;
+    },
+    setActiveItem(index: string) {
+      this.activeMetricIndex = index;
+    },
     setTopology(data: { nodes: ProcessNode[]; calls: Call[] }) {
       const obj = {} as any;
       const calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 74a71907..2188862e 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -110,17 +110,8 @@ import { useRoute } from "vue-router";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import Topology from "./Topology.vue";
-import Widget from "./Widget.vue";
-import Trace from "./Trace.vue";
-import Profile from "./Profile.vue";
-import Log from "./Log.vue";
-import Text from "./Text.vue";
-import Ebpf from "./Ebpf.vue";
-import Event from "./Event.vue";
-import NetworkProfiling from "./NetworkProfiling.vue";
+import controls from "./tab";
 import { dragIgnoreFrom } from "../data";
-import DemandLog from "./DemandLog.vue";
 import copy from "@/utils/copy";
 
 const props = {
@@ -133,16 +124,7 @@ const props = {
 export default defineComponent({
   name: "Tab",
   components: {
-    Topology,
-    Widget,
-    Trace,
-    Profile,
-    Log,
-    Text,
-    Ebpf,
-    DemandLog,
-    Event,
-    NetworkProfiling,
+    ...controls,
   },
   props,
   setup(props) {
diff --git a/src/views/dashboard/controls/tab.ts b/src/views/dashboard/controls/tab.ts
new file mode 100644
index 00000000..90c33ed7
--- /dev/null
+++ b/src/views/dashboard/controls/tab.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 Topology from "./Topology.vue";
+import Widget from "./Widget.vue";
+import Trace from "./Trace.vue";
+import Profile from "./Profile.vue";
+import Log from "./Log.vue";
+import Text from "./Text.vue";
+import Ebpf from "./Ebpf.vue";
+import DemandLog from "./DemandLog.vue";
+import Event from "./Event.vue";
+import NetworkProfiling from "./NetworkProfiling.vue";
+
+export default {
+  Widget,
+  Trace,
+  Topology,
+  Profile,
+  Log,
+  Text,
+  Ebpf,
+  DemandLog,
+  Event,
+  NetworkProfiling,
+};
diff --git a/src/views/dashboard/graphs/topology.ts b/src/views/dashboard/graphs/topology.ts
new file mode 100644
index 00000000..0b576ce2
--- /dev/null
+++ b/src/views/dashboard/graphs/topology.ts
@@ -0,0 +1,32 @@
+/**
+ * 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 Area from "./Area.vue";
+import Line from "./Line.vue";
+import Bar from "./Bar.vue";
+import TopList from "./TopList.vue";
+import Table from "./Table.vue";
+import Card from "./Card.vue";
+
+export default {
+  Line,
+  Bar,
+  TopList,
+  Area,
+  Table,
+  Card,
+};
diff --git a/src/views/dashboard/related/network-profiling/components/metrics-panel/Index.vue b/src/views/dashboard/related/network-profiling/components/metrics-panel/Index.vue
new file mode 100644
index 00000000..40755247
--- /dev/null
+++ b/src/views/dashboard/related/network-profiling/components/metrics-panel/Index.vue
@@ -0,0 +1,65 @@
+<!-- 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. -->
+<template>
+  <grid-layout
+    v-model:layout="layout"
+    :col-num="24"
+    :row-height="10"
+    :is-draggable="false"
+    :is-resizable="false"
+    v-if="layout.length"
+  >
+    <grid-item
+      v-for="item in layout"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :i="item.i"
+      :key="item.i"
+      @click="clickGrid(item)"
+      :class="{ active: ebpfStore.activeMetricIndex === item.i }"
+    >
+      <metric-widget :data="item" :activeIndex="ebpfStore.activeMetricIndex" />
+    </grid-item>
+  </grid-layout>
+  <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { onBeforeUnmount, defineProps, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { LayoutConfig } from "@/types/dashboard";
+import MetricWidget from "./MetricWidget.vue";
+import { useEbpfStore } from "@/store/modules/ebpf";
+
+const props = defineProps({
+  widgets: {
+    type: Array as PropType<LayoutConfig[]>,
+    default: () => [],
+  },
+});
+const { t } = useI18n();
+const ebpfStore = useEbpfStore();
+const layout = ref<LayoutConfig[]>(props.widgets);
+
+function clickGrid(item: LayoutConfig) {
+  ebpfStore.setActiveItem(item.i);
+  ebpfStore.setSelectedMetric(item);
+}
+onBeforeUnmount(() => {
+  ebpfStore.setMetricsLayout([]);
+});
+</script>
diff --git a/src/views/dashboard/related/network-profiling/components/metrics-panel/MetricWidget.vue b/src/views/dashboard/related/network-profiling/components/metrics-panel/MetricWidget.vue
new file mode 100644
index 00000000..feaea61d
--- /dev/null
+++ b/src/views/dashboard/related/network-profiling/components/metrics-panel/MetricWidget.vue
@@ -0,0 +1,216 @@
+<!-- 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. -->
+<template>
+  <div class="widget">
+    <div class="header flex-h">
+      <div>
+        <span>
+          {{ widget.title || "" }}
+        </span>
+      </div>
+      <div>
+        <el-tooltip :content="widget.tips || ''">
+          <span>
+            <Icon
+              iconName="info_outline"
+              size="sm"
+              class="operation"
+              v-show="widget.tips"
+            />
+          </span>
+        </el-tooltip>
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          :width="100"
+          v-if="dashboardStore.editMode"
+        >
+          <template #reference>
+            <span>
+              <Icon iconName="ellipsis_v" size="middle" class="operation" />
+            </span>
+          </template>
+          <div class="tools" @click="editConfig">
+            <span>{{ t("edit") }}</span>
+          </div>
+          <div class="tools" @click="removeWidget">
+            <span>{{ t("delete") }}</span>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+    <div class="body" v-if="graph.type" v-loading="loading">
+      <component
+        :is="graph.type"
+        :intervalTime="appStore.intervalTime"
+        :data="state.source"
+        :config="{
+          ...data.graph,
+          metrics: data.metrics || [''],
+          metricTypes: data.metricTypes || [''],
+          i: data.i,
+          id: data.id,
+          metricConfig: data.metricConfig,
+          filters: data.filters || {},
+        }"
+        :needQuery="needQuery"
+      />
+    </div>
+    <div v-else class="no-data">{{ t("noGraph") }}</div>
+  </div>
+</template>
+<script lang="ts">
+import { toRefs, reactive, defineComponent, ref, watch, computed } from "vue";
+import type { PropType } from "vue";
+import { LayoutConfig } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import graphs from "../../../../graphs/topology";
+import { useI18n } from "vue-i18n";
+import {
+  useQueryProcessor,
+  useSourceProcessor,
+  useGetMetricEntity,
+} from "@/hooks/useProcessor";
+
+const props = {
+  data: {
+    type: Object as PropType<LayoutConfig>,
+    default: () => ({ widget: {}, graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: false },
+};
+
+export default defineComponent({
+  name: "Widget",
+  components: { ...graphs },
+  props,
+  setup(props) {
+    const { t } = useI18n();
+    const loading = ref<boolean>(false);
+    const state = reactive<{ source: { [key: string]: unknown } }>({
+      source: {},
+    });
+    const { data } = toRefs(props);
+    const appStore = useAppStoreWithOut();
+    const dashboardStore = useDashboardStore();
+    const graph = computed(() => props.data.graph || {});
+    const widget = computed(() => props.data.widget || {});
+
+    queryMetrics();
+
+    async function queryMetrics() {
+      const metricTypes = props.data.metricTypes || [];
+      const metrics = props.data.metrics || [];
+      const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
+      const params = await useQueryProcessor({ ...props.data, catalog });
+
+      if (!params) {
+        state.source = {};
+        return;
+      }
+      loading.value = true;
+      const json = await dashboardStore.fetchMetricValue(params);
+      loading.value = false;
+      if (!json) {
+        return;
+      }
+      const d = {
+        metrics: props.data.metrics || [],
+        metricTypes: props.data.metricTypes || [],
+        metricConfig: props.data.metricConfig || [],
+      };
+      state.source = useSourceProcessor(json, d);
+    }
+
+    function removeWidget() {
+      dashboardStore.removeControls(props.data);
+    }
+    function editConfig() {
+      dashboardStore.setConfigPanel(true);
+      dashboardStore.selectWidget(props.data);
+      if (props.activeIndex) {
+        dashboardStore.activeGridItem(props.activeIndex);
+      } else {
+        dashboardStore.activeGridItem(props.data.i);
+      }
+    }
+
+    return {
+      state,
+      appStore,
+      removeWidget,
+      editConfig,
+      data,
+      loading,
+      dashboardStore,
+      t,
+      graph,
+      widget,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.widget {
+  font-size: 12px;
+  height: 100%;
+}
+
+.header {
+  height: 30px;
+  padding: 5px;
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.operation {
+  cursor: pointer;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.body {
+  padding: 5px 10px;
+  width: 100%;
+  height: calc(100% - 30px);
+}
+
+.no-data {
+  font-size: 14px;
+  color: #888;
+  width: 100%;
+  text-align: center;
+  padding-top: 20px;
+}
+
+.unit {
+  display: inline-block;
+  margin-left: 5px;
+}
+</style>