update task details

src/store/modules/ebpf.ts

@@ -106,7 +106,7 @@ export const ebpfStore = defineStore({
     }) {
       const res: AxiosResponse = await graphql
         .query("newNetworkProfiling")
-        .params({ request: { serviceInstanceId: param.serviceInstanceId } });
+        .params({ request: { instanceId: param.serviceInstanceId } });
 
       if (res.data.errors) {
         return res.data;
@@ -137,9 +137,6 @@ export const ebpfStore = defineStore({
         this.networkTasks = res.data.data.queryEBPFTasks || [];
         this.selectedNetworkTask = this.networkTasks[0] || {};
         this.setSelectedNetworkTask(this.selectedNetworkTask);
-        if (!this.networkTasks.length) {
-          return res.data;
-        }
       } else {
         this.tip = "";
         if (res.data.errors) {
@@ -151,8 +148,8 @@ export const ebpfStore = defineStore({
         if (!this.taskList.length) {
           return res.data;
         }
+        this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
       }
-      this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
       return res.data;
     },
     async getEBPFSchedules(params: { taskId: string }) {

src/views/dashboard/related/components/TaskDetails.vue

@@ -0,0 +1,82 @@
+<!-- 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-detail flex-v">
+    <div>
+      <h5 class="mb-10">{{ t("task") }}.</h5>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.taskId }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("service") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.serviceName }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("labels") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.processLabels.join(";") }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ dateFormat(details.taskStartTime) }}
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
+        <span class="g-sm-8 wba">
+          {{ details.fixedTriggerDuration / 60 }} min
+        </span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
+        <span class="g-sm-8 wba">{{ details.triggerType }}</span>
+      </div>
+      <div class="mb-10 clear item">
+        <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
+        <span class="g-sm-8 wba">{{ details.targetType }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import type { PropType } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { EBPFTaskList } from "@/types/ebpf";
+
+/*global defineProps */
+defineProps({
+  details: {
+    type: Object as PropType<EBPFTaskList>,
+    default: () => ({}),
+  },
+});
+const { t } = useI18n();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+</script>
+<style lang="scss" scoped>
+.item span {
+  height: 21px;
+}
+</style>

src/views/dashboard/related/demand-log/Header.vue

@@ -152,7 +152,6 @@ const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
-// const limit = ref<number>(20);
 const state = reactive<any>({
   instance: { value: "", label: "" },
   container: { value: "", label: "" },

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -79,7 +79,7 @@ limitations under the License. -->
           />
           <el-table-column width="300" label="Attributes">
             <template #default="scope">
-              {{ scope.row.attributes.map((d: {name: string, value: string}) => `${d.name}=${d.value}`).join("; ") }}
+              {{ attributes(scope.row.attributes) }}
             </template>
           </el-table-column>
         </el-table>
@@ -125,6 +125,11 @@ const aggregateType = ref<string>(AggregateTypes[0].value);
 const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
+const attributes = (attr: { name: string; value: string }[]) => {
+  return attr
+    .map((d: { name: string; value: string }) => `${d.name}=${d.value}`)
+    .join("; ");
+};
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);

src/views/dashboard/related/ebpf/components/TaskList.vue

@@ -67,53 +67,7 @@ limitations under the License. -->
     fullscreen
     @closed="viewDetail = false"
   >
-    <div class="profile-detail flex-v">
+    <TaskDetails :details="ebpfStore.selectedTask" />
-      <div>
-        <h5 class="mb-10">{{ t("task") }}.</h5>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ ebpfStore.selectedTask.taskId }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("service") }}:</span>
-          <span class="g-sm-8 wba">{{
-            ebpfStore.selectedTask.serviceName
-          }}</span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("labels") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ ebpfStore.selectedTask.processLabels.join(";") }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ dateFormat(ebpfStore.selectedTask.taskStartTime) }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ ebpfStore.selectedTask.fixedTriggerDuration / 60 }} min
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
-          <span class="g-sm-8 wba">{{
-            ebpfStore.selectedTask.triggerType
-          }}</span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
-          <span class="g-sm-8 wba">{{
-            ebpfStore.selectedTask.targetType
-          }}</span>
-        </div>
-      </div>
-    </div>
   </el-dialog>
 </template>
 <script lang="ts" setup>
@@ -123,6 +77,7 @@ import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFTaskList } from "@/types/ebpf";
 import { ElMessage } from "element-plus";
+import TaskDetails from "../../components/TaskDetails.vue";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();

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

@@ -0,0 +1,35 @@
+<!-- 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="filters">
+    <el-button type="primary" size="small">
+      {{ t("start") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { useEbpfStore } from "@/store/modules/ebpf";
+
+const { t } = useI18n();
+const ebpfStore = useEbpfStore();
+</script>
+<style lang="scss" scoped>
+.filters {
+  margin: 5px 0;
+  width: 100%;
+  min-width: 560px;
+}
+</style>

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

@@ -1,91 +0,0 @@
-<!-- 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>
-  <el-dialog
-    v-model="viewDetail"
-    :destroy-on-close="true"
-    fullscreen
-    @closed="viewDetail = false"
-  >
-    <div class="profile-detail flex-v">
-      <div>
-        <h5 class="mb-10">{{ t("task") }}.</h5>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("taskId") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ details.taskId }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("service") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ details.serviceName }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("labels") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ details.processLabels.join(";") }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorTime") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ dateFormat(details.taskStartTime) }}
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("monitorDuration") }}:</span>
-          <span class="g-sm-8 wba">
-            {{ details.fixedTriggerDuration / 60 }} min
-          </span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("triggerType") }}:</span>
-          <span class="g-sm-8 wba">{{ details.triggerType }}</span>
-        </div>
-        <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("targetType") }}:</span>
-          <span class="g-sm-8 wba">{{ details.targetType }}</span>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref } from "vue";
-import type { PropType } from "vue";
-import dayjs from "dayjs";
-import { useI18n } from "vue-i18n";
-import { EBPFTaskList } from "@/types/ebpf";
-
-/*global defineProps */
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  details: {
-    type: Object as PropType<EBPFTaskList>,
-    default: () => ({}),
-  },
-});
-const { t } = useI18n();
-const viewDetail = ref<boolean>(props.show);
-const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
-</script>
-<style lang="scss" scoped>
-.item span {
-  height: 21px;
-}
-</style>

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

@@ -47,13 +47,7 @@ limitations under the License. -->
             >
               <div class="ell">
                 <span>
-                  {{
+                  {{ i.targetType }}
-                    i.targetType +
-                    ": " +
-                    (i.processLabels.length
-                      ? i.processLabels.join(" ")
-                      : `All Processes`)
-                  }}
                 </span>
                 <a class="profile-btn r" @click="viewDetail = true">
                   <Icon iconName="view" size="middle" />
@@ -73,7 +67,14 @@ limitations under the License. -->
       </div>
     </div>
   </div>
-  <TaskDetails :details="ebpfStore.selectedNetworkTask" :show="viewDetail" />
+  <el-dialog
+    v-model="viewDetail"
+    :destroy-on-close="true"
+    fullscreen
+    @closed="viewDetail = false"
+  >
+    <TaskDetails :details="ebpfStore.selectedNetworkTask" />
+  </el-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -83,7 +84,7 @@ import { useEbpfStore } from "@/store/modules/ebpf";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { EBPFTaskList } from "@/types/ebpf";
 import { ElMessage } from "element-plus";
-import TaskDetails from "./TaskDetails.vue";
+import TaskDetails from "../../components/TaskDetails.vue";
 
 const { t } = useI18n();
 const selectorStore = useSelectorStore();