create tasks

src/assets/icons/library_add.svg

@@ -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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"></path>
+</svg>

src/graphql/query/ebpf.ts

@@ -35,6 +35,6 @@ export const getEBPFSchedules = `query queryEBPFSchedules(${queryEBPFSchedules.v
 
 export const getEBPFResult = `query analysisEBPFResult(${analysisEBPFResult.variable}) {${analysisEBPFResult.query}}`;
 
-export const saveNetworkProfiling = `mutation createNetworkProfiling(${createNetworkProfiling.variable}) {${createNetworkProfiling.query}}`;
+export const newNetworkProfiling = `mutation createNetworkProfiling(${createNetworkProfiling.variable}) {${createNetworkProfiling.query}}`;
 
 export const aliveNetworkProfiling = `mutation keepNetworkProfiling(${keepNetworkProfiling.variable}) {${keepNetworkProfiling.query}}`;

src/store/modules/ebpf.ts

@@ -100,6 +100,23 @@ export const ebpfStore = defineStore({
       });
       return res.data;
     },
+    async createNetworkTask(param: {
+      serviceId: string;
+      serviceInstanceId: string;
+    }) {
+      const res: AxiosResponse = await graphql
+        .query("newNetworkProfiling")
+        .params({ request: { serviceInstanceId: param.serviceInstanceId } });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.getTaskList({
+        ...param,
+        targets: ["NETWORK"],
+      });
+      return res.data;
+    },
     async getTaskList(params: {
       serviceId: string;
       serviceInstanceId: string;

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

@@ -13,5 +13,40 @@ 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>
+  <div class="flex-h content">
+    <Tasks />
+    <div class="vis-graph ml-5">
+      <div class="schedules">EBPFS chedules</div>
+      <div class="item">EBPF Stack</div>
+    </div>
+  </div>
 </template>
+<script lang="ts" setup>
+import Tasks from "./components/Tasks.vue";
+</script>
+<style lang="scss" scoped>
+.content {
+  height: calc(100% - 30px);
+  width: 100%;
+}
+
+.vis-graph {
+  height: 100%;
+  flex-grow: 2;
+  min-width: 700px;
+  overflow: auto;
+}
+
+.item {
+  width: 100%;
+  overflow: auto;
+  height: calc(100% - 100px);
+  padding-bottom: 10px;
+}
+
+.schedules {
+  height: 90px;
+  border-bottom: 1px solid #ccc;
+  padding-right: 10px;
+}
+</style>

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -15,11 +15,13 @@ limitations under the License. -->
 <template>
   <div class="profile-task-list flex-v">
     <div class="profile-task-wrapper flex-v">
-      <div class="profile-t-tool flex-h">
-        {{ t("taskList") }}
-        <el-button type="primary" size="small" @click="createTask">
-          {{ t("newTask") }}
-        </el-button>
+      <div class="profile-t-tool">
+        <span>{{ t("taskList") }}</span>
+        <el-tooltip content="New Task" placement="right">
+          <span class="new-task cp">
+            <Icon iconName="library_add" @click="createTask" size="middle" />
+          </span>
+        </el-tooltip>
       </div>
       <div class="profile-t-wrapper">
         <div class="no-data" v-show="!ebpfStore.networkTasks.length">
@@ -152,10 +154,13 @@ async function createTask() {
   if (!selectorStore.currentService) {
     return;
   }
-  if (!selectorStore.currentInstance) {
+  if (!selectorStore.currentPod) {
     return;
   }
-  ebpfStore.getCreateTaskData(selectorStore.currentService.id);
+  ebpfStore.createNetworkTask({
+    serviceId: selectorStore.currentService.id,
+    serviceInstanceId: selectorStore.currentpod.id,
+  });
 }
 async function fetchTasks() {
   const serviceId =
@@ -221,10 +226,9 @@ async function fetchTasks() {
 
 .profile-t-tool {
   padding: 5px 10px;
-  font-weight: bold;
-  border-right: 1px solid rgba(0, 0, 0, 0.07);
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background: #f3f4f9;
+  width: 100%;
 }
 
 .profile-btn {
@@ -234,4 +238,8 @@ async function fetchTasks() {
   font-size: 12px;
   float: right;
 }
+
+.new-task {
+  float: right;
+}
 </style>