perf: report to iframe

2025-08-31 14:38:02 +00:00 · 2025-02-25 19:11:15 +08:00
parent e361bcbf42
commit cc4b5183ea
12 changed files with 153 additions and 52 deletions
--- a/src/components/Dialog/ReportDialog.vue
+++ b/src/components/Dialog/ReportDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Dialog
+      v-if="iVisible"
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="$tc('Report')"
+      :visible.sync="iVisible"
+      top="35vh"
+      width="80%"
+      @close="loading=true"
+    >
+      <span v-if="loading" v-loading="loading" class="loading" />
+      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+
+export default {
+  name: 'ReportDialog',
+  components: {
+    Dialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: true
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted() {
+  },
+  beforeMount() {
+  },
+  methods: {
+    onIframeLoad() {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+iframe {
+  width: 100%;
+  height: 500px;
+}
+
+.loading {
+  margin-top: 20px;
+  display: block;
+}
+</style>
--- a/src/router/pam/automations.js
+++ b/src/router/pam/automations.js
@@ -10,7 +10,7 @@ export default [
    },
    name: 'AccountDiscover',
    meta: {
-      title: i18n.t('AccountDiscoverList'),
+      title: i18n.t('AccountDiscover'),
      app: 'accounts',
      icon: 'discovery'
      // activeMenu: '/console/accounts/automations',
@@ -43,7 +43,7 @@ export default [
        name: 'AccountDiscoverTaskDetail',
        hidden: true,
        meta: {
-          title: i18n.t('AccountDiscoverTask'),
+          title: i18n.t('AccountDiscover'),
          // activeMenu: '/console/accounts/automations',
          permissions: ['accounts.view_gatheraccountsautomation']
        }
--- a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue
@@ -1,16 +1,21 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>

 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'

 export default {
  name: 'AccountBackupExecutionList',
  components: {
-    GenericListTable
+    GenericListTable,
+    ReportDialog
  },
  props: {
    object: {
@@ -20,7 +25,10 @@ export default {
    }
  },
  data() {
+    const vm = this
    return {
+      visible: false,
+      reportUrl: '',
      tableConfig: {
        url: '/api/v1/accounts/account-backup-plan-executions/',
        columns: [
@@ -87,7 +95,8 @@ export default {
                  type: 'success',
                  can: this.$hasPerm('accounts.view_backupaccountexecution'),
                  callback: function({ row }) {
-                    window.open(`/api/v1/accounts/account-backup-plan-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/account-backup-plan-executions/${row.id}/report/`
                  }
                }
              ]
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue
@@ -1,19 +1,27 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>

 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'

 export default {
  name: 'AccountChangeSecretExecutionList',
  components: {
+    ReportDialog,
    GenericListTable
  },
  data() {
+    const vm = this
    return {
+      visible: false,
+      reportUrl: '',
      tableConfig: {
        url: '/api/v1/accounts/change-secret-executions',
        columns: [
@@ -72,12 +80,6 @@ export default {
          status: {
            label: this.$t('Result')
          },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            }
-          },
          actions: {
            formatterArgs: {
              hasDelete: false,
@@ -99,7 +101,8 @@ export default {
                  type: 'success',
                  can: this.$hasPerm('accounts.view_changesecretexecution'),
                  callback: function({ row }) {
-                    window.open(`/api/v1/accounts/change-secret-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/change-secret-executions/${row.id}/report/`
                  }
                },
                {
--- a/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue
+++ b/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue
@@ -67,8 +67,8 @@ export default {
          }
        }
      },
-      createSuccessNextRoute: { name: 'AccountDiscoverList' },
-      updateSuccessNextRoute: { name: 'AccountDiscoverList' },
+      createSuccessNextRoute: { name: 'AccountDiscover' },
+      updateSuccessNextRoute: { name: 'AccountDiscover' },
      cleanFormValue(values) {
        values.interval = values.interval || null
        return values
--- a/src/views/accounts/AccountDiscover/TaskExecutionList.vue
+++ b/src/views/accounts/AccountDiscover/TaskExecutionList.vue
@@ -1,6 +1,7 @@
 <template>
  <div>
    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
  </div>
 </template>

@@ -11,10 +12,12 @@ import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { taskStatusFormatterMeta } from '@/components/const'
 import TaskStatusChoicesFormatter from '@/components/Table/TableFormatters/TaskStatusFormatter.vue'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'

 export default {
  name: 'AccountDiscoverTaskExecutionList',
  components: {
+    ReportDialog,
    GenericListTable
  },
  props: {
@@ -25,7 +28,10 @@ export default {
    }
  },
  data() {
+    const vm = this
    return {
+      visible: false,
+      reportUrl: '',
      showTableUpdateDrawer: false,
      currentTemplate: null,
      drawerTitle: '',
@@ -72,13 +78,6 @@ export default {
            id: ({ row }) => row.automation,
            can: this.$hasPerm('accounts.view_gatheraccountsexecution')
          },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            },
-            width: null
-          },
          date_start: {
            width: null
          },
@@ -102,7 +101,8 @@ export default {
                  type: 'success',
                  can: this.$hasPerm('accounts.view_gatheraccountsexecution'),
                  callback: function({ row }) {
-                    window.open(`/api/v1/accounts/gather-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/gather-account-executions/${row.id}/report/`
                  }
                }
              ]
--- a/src/views/accounts/AccountDiscover/index.vue
+++ b/src/views/accounts/AccountDiscover/index.vue
@@ -27,7 +27,7 @@ export default {
            component: () => import('@/views/accounts/AccountDiscover/AccountDiscoverList.vue')
          },
          {
-            title: this.$t('AccountDiscoverTask'),
+            title: this.$t('AccountDiscover'),
            name: 'AccountDiscoverTaskList',
            hidden: !this.$hasPerm('accounts.view_gatheraccountsautomation'),
            component: () => import('@/views/accounts/AccountDiscover/AccountDiscoverTaskList.vue')
--- a/src/views/accounts/AccountPush/AccountPushExecutionList.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionList.vue
@@ -1,24 +1,32 @@
 <template>
-  <GenericListTable
-    ref="listTable"
-    :detail-drawer="detailDrawer"
-    :header-actions="headerActions"
-    :table-config="tableConfig"
-  />
+  <div>
+    <GenericListTable
+      ref="listTable"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+    />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>

 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog'

 export default {
  name: 'AccountPushExecutionList',
  components: {
-    GenericListTable
+    GenericListTable,
+    ReportDialog
  },
  data() {
+    const vm = this
    return {
+      visible: false,
+      reportUrl: '',
      detailDrawer: () => import('@/views/accounts/AccountPush/AccountPushExecutionDetail/index.vue'),
      tableConfig: {
        url: '/api/v1/accounts/push-account-executions',
@@ -78,12 +86,6 @@ export default {
          status: {
            label: this.$t('Result')
          },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            }
-          },
          actions: {
            formatterArgs: {
              hasDelete: false,
@@ -104,7 +106,8 @@ export default {
                  title: this.$t('Report'),
                  can: this.$hasPerm('accounts.view_pushaccountexecution'),
                  callback: function({ row }) {
-                    window.open(`/api/v1/accounts/push-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/push-account-executions/${row.id}/report/`
                  }
                },
                {
--- a/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue
@@ -11,17 +11,10 @@
      width="80%"
      @close="loading=true"
    >
-      <!--      <ListTable v-bind="config" />-->
      <span v-if="loading" v-loading="loading" class="loading" />
-      <iframe :src="url" frameborder="0" @load="onIframeLoad" />
+      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
    </Dialog>
-    <!--    <RemoveAccount-->
-    <!--      v-if="showDeleteAccountDialog"-->
-    <!--      :accounts="gatherAccounts"-->
-    <!--      :visible.sync="showDeleteAccountDialog"-->
-    <!--    />-->
  </div>
-
 </template>

 <script>
@@ -83,8 +76,6 @@ export default {
  beforeMount() {
  },
  methods: {
-    onVisibleChange() {
-    },
    onIframeLoad() {
      this.loading = false
    }
--- a/src/views/assets/Asset/AssetList/components/const.js
+++ b/src/views/assets/Asset/AssetList/components/const.js
@@ -239,7 +239,7 @@ export function getDefaultConfig(vm) {
            },
            {
              name: 'DiscoverAccounts',
-              title: 'Discover accounts',
+              title: vm.$t('AccountDiscover'),
              callback: ({ row }) => {
                vm.discoveryDialog.asset = row.id
                setTimeout(() => {
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -1,5 +1,9 @@
 <template>
-  <BaseList :table-config="tableConfig" v-bind="config" />
+  <BaseList
+    :table-config="tableConfig"
+    :header-actions="headerActions"
+    v-bind="config"
+  />
 </template>

 <script>
@@ -17,6 +21,13 @@ export default {
      },
      tableConfig: {
        columnsExclude: ['date_verified']
+      },
+      headerActions: {
+        handleImportClick: ({ selectedRows }) => {
+          this.$message.warning({
+            message: this.$t('ImportMessage')
+          })
+        }
      }
    }
  }
--- a/src/views/pam/RiskDetect/AccountCheckExecutionList.vue
+++ b/src/views/pam/RiskDetect/AccountCheckExecutionList.vue
@@ -1,15 +1,20 @@
 <template>
-  <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>

 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'

 export default {
  name: 'CheckAccountExecutionList',
  components: {
+    ReportDialog,
    GenericListTable
  },
  props: {
@@ -20,7 +25,10 @@ export default {
    }
  },
  data() {
+    const vm = this
    return {
+      visible: false,
+      reportUrl: '',
      tableConfig: {
        url: '/api/v1/accounts/check-account-executions/',
        columns: [
@@ -97,7 +105,8 @@ export default {
                  type: 'success',
                  can: this.$hasPerm('accounts.view_checkaccountexecution'),
                  callback: function({ row }) {
-                    window.open(`/api/v1/accounts/check-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/check-account-executions/${row.id}/report/`
                  }
                }
              ]