add network proifing config

src/store/modules/dashboard.ts

@@ -113,7 +113,16 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
+      if (
+        [
+          "Trace",
+          "Profile",
+          "Log",
+          "DemandLog",
+          "Ebpf",
+          "NetworkProfiling",
+        ].includes(type)
+      ) {
         newItem.h = 36;
       }
       if (type === "Text") {
@@ -170,7 +179,16 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
+      if (
+        [
+          "Trace",
+          "Profile",
+          "Log",
+          "DemandLog",
+          "Ebpf",
+          "NetworkProfiling",
+        ].includes(type)
+      ) {
         newItem.h = 32;
       }
       if (type === "Text") {

src/views/dashboard/controls/NetworkProfiling.vue

@@ -0,0 +1,94 @@
+<!-- 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="profile-wrapper flex-v">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
+      <template #reference>
+        <span class="delete cp">
+          <Icon iconName="ellipsis_v" size="middle" class="operation" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import Content from "../related/network-profiling/Content.vue";
+
+/*global defineProps */
+const props = defineProps({
+  data: {
+    type: Object as PropType<any>,
+    default: () => ({ graph: {} }),
+  },
+  activeIndex: { type: String, default: "" },
+  needQuery: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const dashboardStore = useDashboardStore();
+console.log("enter");
+function removeWidget() {
+  dashboardStore.removeControls(props.data);
+}
+</script>
+<style lang="scss" scoped>
+.profile-wrapper {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  position: relative;
+}
+
+.delete {
+  position: absolute;
+  top: 5px;
+  right: 3px;
+}
+
+.header {
+  padding: 10px;
+  font-size: 12px;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.tools {
+  padding: 5px 0;
+  color: #999;
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
+}
+
+.trace {
+  width: 100%;
+  overflow: auto;
+}
+</style>

src/views/dashboard/controls/Tab.vue

@@ -118,6 +118,7 @@ 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 { dragIgnoreFrom } from "../data";
 import DemandLog from "./DemandLog.vue";
 import copy from "@/utils/copy";
@@ -141,6 +142,7 @@ export default defineComponent({
     Ebpf,
     DemandLog,
     Event,
+    NetworkProfiling,
   },
   props,
   setup(props) {

src/views/dashboard/controls/index.ts

@@ -24,6 +24,7 @@ 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 {
   Tab,
@@ -36,4 +37,5 @@ export default {
   Ebpf,
   DemandLog,
   Event,
+  NetworkProfiling,
 };

src/views/dashboard/data.ts

@@ -197,6 +197,11 @@ export const InstanceTools = [
   { name: "assignment", content: "Add Log", id: "addLog" },
   { name: "demand", content: "Add On Demand Log", id: "addDemandLog" },
   { name: "event", content: "Add Event", id: "addEvent" },
+  {
+    name: "timeline",
+    content: "Add Network Profiling",
+    id: "addNetworkProfiling",
+  },
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },

src/views/dashboard/panel/Tool.vue

@@ -144,9 +144,8 @@ const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
-const toolIcons = ref<{ name: string; content: string; id: string }[]>(
+const toolIcons =
-  EndpointRelationTools
+  ref<{ name: string; content: string; id: string }[]>(AllTools);
-);
 const loading = ref<boolean>(false);
 const states = reactive<{
   destService: string;
@@ -461,6 +460,9 @@ function setTabControls(id: string) {
     case "addEvent":
       dashboardStore.addTabControls("Event");
       break;
+    case "addNetworkProfiling":
+      dashboardStore.addTabControls("NetworkProfiling");
+      break;
     default:
       ElMessage.info("Don't support this control");
       break;
@@ -499,6 +501,9 @@ function setControls(id: string) {
     case "addEvent":
       dashboardStore.addControl("Event");
       break;
+    case "addNetworkProfiling":
+      dashboardStore.addControl("NetworkProfiling");
+      break;
     default:
       dashboardStore.addControl("Widget");
   }
@@ -618,7 +623,7 @@ function getTools() {
       toolIcons.value = EndpointRelationTools;
       break;
     default:
-      toolIcons.value = EndpointRelationTools;
+      toolIcons.value = AllTools;
   }
 }
 function searchPods(query: string) {

src/views/dashboard/related/network-profiling/Content.vue

@@ -0,0 +1,17 @@
+<!-- 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>network profiling</div>
+</template>