Merge pull request #2771 from jumpserver/pr@dev@perf_ticket2

perf: 优化账号历史数量

src/components/AccountListTable/AccountList.vue

@@ -108,7 +108,7 @@ export default {
         },
         columnsExclude: ['spec_info'],
         columns: [
-          'name', 'username', 'asset', 'privileged', 'version',
+          'name', 'username', 'asset', 'privileged',
           'secret_type', 'source', 'actions'
         ],
         columnsMeta: {

src/components/AccountListTable/ViewSecret.vue

@@ -40,13 +40,16 @@
           <span>{{ account['date_updated'] | date }}</span>
         </el-form-item>
         <el-form-item v-if="showPasswordRecord" :label="$tc('accounts.PasswordRecord')">
-          <el-button
+          <el-link
             v-perms="'accounts.view_historyaccountsecret'"
-            type="text"
-            @click="onShowPasswordHistory"
+            :underline="false"
+            type="success"
+            @click="showHistoryDialog"
           >
-            {{ account['version'] }}
-          </el-button>
+            <span style="padding-right: 30px">
+              {{ versions }}
+            </span>
+          </el-link>
         </el-form-item>
       </el-form>
     </Dialog>
@@ -99,6 +102,7 @@ export default {
   data() {
     return {
       secretInfo: {},
+      versions: '-',
       showSecret: false,
       sshKeyFingerprint: '',
       historyCount: 0,
@@ -113,6 +117,12 @@ export default {
       return this.account['secret_type'].value
     }
   },
+  mounted() {
+    const url = `/api/v1/accounts/account-secrets/${this.account.id}/histories/?limit=1`
+    this.$axios.get(url).then(resp => {
+      this.versions = resp.count
+    })
+  },
   methods: {
     getAuthInfo() {
       this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
@@ -124,7 +134,7 @@ export default {
     exit() {
       this.$emit('update:visible', false)
     },
-    onShowPasswordHistory() {
+    showHistoryDialog() {
       this.showPasswordHistoryDialog = true
     }
   }

src/components/TableFormatters/TagChoicesFormatter.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-tag
+    :size="tag.size"
+    :type="tag.type"
+    class="tag-formatter"
+    disable-transitions
+  >
+    <i v-if="tag.icon" :class="tag.icon" class="fa" /> {{ tag.label }}
+  </el-tag>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'TagChoicesFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          getTag({ row, cellValue }) {
+            return null
+          },
+          getTagSize({ row, cellValue }) {
+            return 'mini'
+          },
+          getTagLabel({ row, cellValue }) {
+            return cellValue
+          },
+          getTagType({ row, cellValue }) {
+            return 'primary'
+          },
+          getTagIcon({ row, cellValue }) {
+            return ''
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    tag() {
+      return this.iGetTag()
+    }
+  },
+  methods: {
+    iGetTag() {
+      let tag = this.formatterArgs.getTag({ row: this.row, cellValue: this.cellValue })
+      if (tag) return tag
+      console.log('Tag: ', tag)
+      tag = {
+        size: this.formatterArgs.getTagSize({ row: this.row, cellValue: this.cellValue }),
+        type: this.formatterArgs.getTagType({ row: this.row, cellValue: this.cellValue }),
+        label: this.formatterArgs.getTagLabel({ row: this.row, cellValue: this.cellValue }),
+        icon: this.formatterArgs.getTagIcon({ row: this.row, cellValue: this.cellValue })
+      }
+      return tag
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.tag-formatter {
+  margin: 2px 0;
+}
+</style>

src/components/TableFormatters/index.js

@@ -14,6 +14,7 @@ import TagsFormatter from './TagsFormatter'
 import ObjectRelatedFormatter from './ObjectRelatedFormatter'
 import TwoTabFormatter from './TwoTabFormatter'
 import ProtocolsFormatter from './ProtocolsFormatter.vue'
+import TagChoicesFormatter from './TagChoicesFormatter.vue'
 
 export default {
   DetailFormatter,
@@ -31,7 +32,8 @@ export default {
   TagsFormatter,
   ObjectRelatedFormatter,
   TwoTabFormatter,
-  ProtocolsFormatter
+  ProtocolsFormatter,
+  TagChoicesFormatter
 }
 
 export {
@@ -50,5 +52,6 @@ export {
   TagsFormatter,
   ObjectRelatedFormatter,
   TwoTabFormatter,
-  ProtocolsFormatter
+  ProtocolsFormatter,
+  TagChoicesFormatter
 }

src/views/assets/Asset/AssetDetail/Account.vue

@@ -48,7 +48,7 @@ export default {
     return {
       templateDialogVisible: false,
       columns: [
-        'name', 'username', 'privileged', 'version', 'connectivity',
+        'name', 'username', 'privileged', 'connectivity',
         'is_active', 'secret_type', 'source', 'date_created',
         'date_updated', 'actions'
       ],

src/views/tickets/BaseTicketList.vue

@@ -1,14 +1,14 @@
 <template>
   <GenericListPage
     v-loading="loading"
-    :table-config="ticketTableConfig"
     :header-actions="ticketActions"
+    :table-config="ticketTableConfig"
   />
 </template>
 
 <script type="text/jsx">
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter, TagChoicesFormatter } from '@/components/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { APPROVE, REJECT } from './const'
 
@@ -25,13 +25,19 @@ export default {
     hasMoreActions: {
       type: Boolean,
       default: false
+    },
+    extraQuery: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
+    const vm = this
     return {
       loading: true,
       ticketTableConfig: {
         url: this.url,
+        extraQuery: this.extraQuery,
         columnsExclude: ['process_map', 'rel_snapshot'],
         columnsShow: {
           min: ['title', 'serial_num', 'type', 'state', 'date_created'],
@@ -67,7 +73,7 @@ export default {
             label: this.$t('tickets.user'),
             sortable: 'custom',
             formatter: row => {
-              return row.rel_snapshot.applicant
+              return row['rel_snapshot'].applicant
             }
           },
           type: {
@@ -81,11 +87,21 @@ export default {
             align: 'center',
             width: '90px',
             sortable: 'custom',
-            formatter: row => {
-              if (row.status.value === 'open') {
-                return <el-tag type='primary' size='mini'> {this.$t('tickets.OpenStatus')}</el-tag>
-              } else {
-                return <el-tag type='danger' size='mini'>  {this.$t('tickets.CloseStatus')}</el-tag>
+            formatter: TagChoicesFormatter,
+            formatterArgs: {
+              getTagLabel({ row }) {
+                if (row.status.value === 'open') {
+                  return vm.$t('tickets.OpenStatus')
+                } else {
+                  return vm.$t('tickets.CloseStatus')
+                }
+              },
+              getTagType({ row }) {
+                if (row.status.value === 'open') {
+                  return 'primary'
+                } else {
+                  return 'danger'
+                }
               }
             }
           },
@@ -94,28 +110,17 @@ export default {
             align: 'center',
             width: '90px',
             sortable: 'custom',
-            formatter: row => {
-              if (row.status.value === 'open') {
-                return <el-tag
-                  type='success'
-                  size='mini'
-                >
-                  {this.$t('tickets.Pending')}
-                </el-tag>
-              }
-              switch (row.state.value) {
-                case 'approved':
-                  return <el-tag type='primary' size='mini'>
-                    {this.$t('tickets.Approved')}
-                  </el-tag>
-                case 'rejected':
-                  return <el-tag type='danger' size='mini'>
-                    {this.$t('tickets.Rejected')}
-                  </el-tag>
-                default :
-                  return <el-tag type='info' size='mini'>
-                    {this.$t('tickets.Closed')}
-                  </el-tag>
+            formatter: TagChoicesFormatter,
+            formatterArgs: {
+              getTagType({ row }) {
+                const mapper = {
+                  [APPROVE]: 'success',
+                  [REJECT]: 'danger'
+                }
+                return mapper[row.state.value] || 'warning'
+              },
+              getTagLabel({ row }) {
+                return row.state.label || vm.$t('common.Pending')
               }
             }
           },