feat: 收集用户任务添加详情页面和执行历史页面

src/i18n/langs/cn.json

@@ -1139,7 +1139,9 @@
       "GatherUserList": "收集用户",
       "GatherUserTaskCreate": "创建任务",
       "GatherUserTaskList": "任务列表",
-      "GatherUserTaskUpdate": "更新任务"
+      "GatherUserTaskUpdate": "更新任务",
+      "GatherUserTaskDetail": "任务详情",
+      "GatherUserTaskExecutionList": "任务执行列表"
     },
     "Import": "导入",
     "ImportLicense": "导入许可证",

src/i18n/langs/en.json

@@ -1133,7 +1133,9 @@
       "GatherUserList": "Gather user",
       "GatherUserTaskCreate": "Create gather user task",
       "GatherUserTaskList": "Gather user task list",
-      "GatherUserTaskUpdate": "Update gather user task"
+      "GatherUserTaskUpdate": "Update gather user task",
+      "GatherUserTaskDetail": "Gather user detail",
+      "GatherUserTaskExecutionList": "Gather user task execution list"
     },
     "Import": "Import",
     "ImportLicense": "Import license",

src/views/xpack/GatheredUser/TaskDetail/Detail.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="14">
+      <DetailCard :items="detailCardItems" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import DetailCard from '@/components/DetailCard'
+import { toSafeLocalDateStr } from '@/utils/common'
+
+export default {
+  name: 'Detail',
+  components: {
+    DetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    detailCardItems() {
+      return [
+        {
+          key: this.$t('common.Name'),
+          value: this.object.name
+        },
+        {
+          key: this.$t('xpack.Cloud.PeriodicPerform'),
+          value: this.object.is_periodic ? (this.$t('xpack.GatherUser.True')) : (this.$t('xpack.GatherUser.False'))
+        },
+        {
+          key: this.$t('xpack.Cloud.Periodic'),
+          value: this.object.periodic_display
+        },
+        {
+          key: this.$t('xpack.Cloud.DateLastSync'),
+          value: this.object.date_last_sync ? toSafeLocalDateStr(this.object.date_created) : ''
+        },
+        {
+          key: this.$t('xpack.Cloud.DateCreated'),
+          value: this.object.date_created ? toSafeLocalDateStr(this.object.date_created) : ''
+        },
+        {
+          key: this.$t('common.Comment'),
+          value: this.object.comment
+        }
+      ]
+    }
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/views/xpack/GatheredUser/TaskDetail/TaskExecutionList.vue

@@ -0,0 +1,64 @@
+<template>
+  <GenericListTable ref="GenericListTable" :table-config="tableConfig" :header-actions="headerActions" />
+</template>
+
+<script>
+import GenericListTable from '@/layout/components/GenericListTable/index'
+import { BooleanFormatter, DateFormatter } from '@/components/TableFormatters'
+
+export default {
+  name: 'TaskExecutionList',
+  components: { GenericListTable },
+  props: {
+    object: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      headerActions: {
+        hasLeftActions: false,
+        hasBulkDelete: false,
+        hasImport: false,
+        hasExport: false,
+        hasSearch: true
+      },
+      tableConfig: {
+        url: `/api/v1/xpack/gathered-user/task-executions/?task=${this.object.id}`,
+        columns: [
+          {
+            prop: 'timedelta',
+            label: this.$t('ops.timeDelta'),
+            formatter: function(row) {
+              return row.timedelta.toFixed(2) + 's'
+            }
+          },
+          {
+            prop: 'date_start',
+            label: this.$t('common.DateStart'),
+            formatter: DateFormatter
+          },
+          {
+            prop: 'success',
+            label: this.$t('common.Success'),
+            width: '90px',
+            align: 'center',
+            formatter: BooleanFormatter,
+            formatterArgs: {
+              iconChoices: {
+                false: 'fa-times text-danger',
+                true: 'fa-check text-primary'
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/views/xpack/GatheredUser/TaskDetail/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="TaskDetail" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage, TabPage } from '@/layout/components'
+import Detail from './Detail'
+import TaskExecutionList from './TaskExecutionList'
+export default {
+  name: 'SyncInstanceTaskDetail',
+  components: {
+    GenericDetailPage,
+    TabPage,
+    Detail,
+    TaskExecutionList
+  },
+  data() {
+    return {
+      TaskDetail: {},
+      config: {
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('xpack.GatherUser.GatherUserTaskDetail'),
+            name: 'Detail'
+          },
+          {
+            title: this.$t('xpack.GatherUser.GatherUserTaskExecutionList'),
+            name: 'TaskExecutionList'
+          }
+        ],
+        hasRightSide: true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xpack/GatheredUser/TaskList.vue

@@ -4,6 +4,7 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
@@ -24,7 +25,13 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: null
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'GatherUserTaskDetail',
+              routeQuery: {
+                activeTab: 'Detail'
+              }
+            }
           },
           nodes: {
             formatter: function(row, column, cellValue, index) {
@@ -35,6 +42,15 @@ export default {
             showOverflowTooltip: true,
             width: 150
           },
+          executed_times: {
+            formatter: DetailFormatter,
+            formatterArgs: {
+              route: 'GatherUserTaskDetail',
+              routeQuery: {
+                activeTab: 'TaskExecutionList'
+              }
+            }
+          },
           actions: {
             formatterArgs: {
               updateRoute: 'GatherUserTaskUpdate',

src/views/xpack/router.js

@@ -128,7 +128,7 @@ export default {
       meta: { title: i18n.t('xpack.InterfaceSettings'), permissions: [rolec.PERM_SUPER] }
     },
     {
-      path: 'gathered-users',
+      path: 'gathered-user',
       component: empty,
       redirect: '',
       meta: { title: i18n.t('xpack.GatherUser.GatherUserList') },
@@ -137,34 +137,41 @@ export default {
           path: '',
           component: () => import('@/views/xpack/GatheredUser/index'),
           name: 'GatherUserListIndex',
-          meta: { title: i18n.t('xpack.GatherUser.GatherUser'), activeMenu: '/xpack/gathered-users' }
+          meta: { title: i18n.t('xpack.GatherUser.GatherUser'), activeMenu: '/xpack/gathered-user' }
         },
         {
           path: '',
           component: () => import('@/views/xpack/GatheredUser/GatheredUserList'),
           name: 'GatherUserList',
           hidden: true,
-          meta: { title: i18n.t('xpack.GatherUser.GatherUserList'), activeMenu: '/xpack/gathered-users' }
+          meta: { title: i18n.t('xpack.GatherUser.GatherUserList'), activeMenu: '/xpack/gathered-user' }
         },
         {
           path: 'tasks',
           component: () => import('@/views/xpack/GatheredUser/TaskList'),
           name: 'GatherUserTaskList',
-          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskList'), activeMenu: '/xpack/gathered-users' },
+          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskList'), activeMenu: '/xpack/gathered-user' },
+          hidden: true
+        },
+        {
+          path: 'tasks/:id',
+          component: () => import('@/views/xpack/GatheredUser/TaskDetail/index'),
+          name: 'GatherUserTaskDetail',
+          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskDetail'), activeMenu: '/xpack/gathered-user' },
           hidden: true
         },
         {
           path: 'tasks/create',
           component: () => import('@/views/xpack/GatheredUser/TaskCreateUpdate'),
           name: 'GatherUserTaskCreate',
-          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskCreate'), activeMenu: '/xpack/gathered-users' },
+          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskCreate'), activeMenu: '/xpack/gathered-user' },
           hidden: true
         },
         {
           path: 'tasks/:id/update',
           component: () => import('@/views/xpack/GatheredUser/TaskCreateUpdate'),
           name: 'GatherUserTaskUpdate',
-          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskUpdate'), action: 'update', activeMenu: '/xpack/gathered-users' },
+          meta: { title: i18n.t('xpack.GatherUser.GatherUserTaskUpdate'), action: 'update', activeMenu: '/xpack/gathered-user' },
           hidden: true
         }
       ]