From be5dc29bb72e685b892402b11521a20d56b59d75 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 4 Aug 2022 15:19:44 +0800
Subject: [PATCH] update task details

---
 src/views/dashboard/related/log/Header.vue    |  2 +-
 .../components/TaskDetails.vue                | 91 +++++++++++++++++++
 .../network-profiling/components/Tasks.vue    | 56 +-----------
 3 files changed, 94 insertions(+), 55 deletions(-)
 create mode 100644 src/views/dashboard/related/network-profiling/components/TaskDetails.vue

diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index d91cbe84..c93770eb 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -145,7 +145,7 @@ import { ErrorCategory } from "./data";
 import { LayoutConfig } from "@/types/dashboard";
 import { DurationTime } from "@/types/app";
 
-/*global  defineProps, Recordable */
+/*global defineProps, Recordable */
 const props = defineProps({
   needQuery: { type: Boolean, default: true },
   data: {
diff --git a/src/views/dashboard/related/network-profiling/components/TaskDetails.vue b/src/views/dashboard/related/network-profiling/components/TaskDetails.vue
new file mode 100644
index 00000000..1884593f
--- /dev/null
+++ b/src/views/dashboard/related/network-profiling/components/TaskDetails.vue
@@ -0,0 +1,91 @@
+<!-- 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>
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index b0c61128..691ca72f 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -73,60 +73,7 @@ limitations under the License. -->
       </div>
     </div>
   </div>
-  <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">
-            {{ ebpfStore.selectedNetworkTask.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.selectedNetworkTask.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.selectedNetworkTask.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.selectedNetworkTask.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.selectedNetworkTask.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.selectedNetworkTask.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.selectedNetworkTask.targetType
-          }}</span>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
+  <TaskDetails :details="ebpfStore.selectedNetworkTask" :show="viewDetail" />
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
@@ -136,6 +83,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";
 
 const { t } = useI18n();
 const selectorStore = useSelectorStore();