create tasks

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>