feat: add application credential switch management

src/components/Form/FormFields/UploadField.vue

@@ -6,9 +6,6 @@
         {{ $t('SelectFile') }}
       </el-button>
       <span v-if="fileName" class="upload-field__filename">{{ fileName }}</span>
-      <el-button v-if="fileName" size="small" type="danger" @click.stop="resetUpload">
-        {{ $t('Cancel') }}
-      </el-button>
     </div>
     <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
     <input :value="value" hidden type="text" @input="onInput($event.target.value)" />
@@ -21,6 +18,15 @@
         preview-teleported
       />
     </div>
+    <el-button
+      v-if="fileName"
+      class="upload-field__cancel"
+      size="small"
+      type="danger"
+      @click.stop="resetUpload"
+    >
+      {{ $t('Cancel') }}
+    </el-button>
   </div>
 </template>
 
@@ -124,6 +130,7 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .upload-field__actions {
@@ -142,8 +149,8 @@ export default {
 .upload-field__preview {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+  justify-content: flex-start;
+  align-self: stretch;
   min-height: 32px;
   border-radius: 2px;
   background: #fff;
@@ -158,6 +165,10 @@ export default {
   }
 }
 
+.upload-field__cancel {
+  align-self: flex-start;
+}
+
 /* 顶部宽 logo 等可能是白底/透明图，给预览盒铺品牌背景色，避免白底图“看不见” */
 .upload-field__preview.show-bg {
   background-color: var(--banner-bg);

src/router/pam/integrations.js

@@ -13,7 +13,7 @@ export default [
       app: 'accounts',
       name: 'Service',
       icon: 'service',
-      resource: 'integrationapplicaion'
+      resource: 'integrationapplication'
     },
     children: [
       {

src/views/accounts/Integration/ApplicationCreateUpdate.vue

@@ -18,11 +18,23 @@ export default {
       logo_file: null,
       url: '/api/v1/accounts/integration-applications/',
       fields: [
-        [this.$t('Basic'), ['name', 'logo']],
+        [this.$t('Basic'), ['name', 'logo', 'owner']],
         [this.$t('AccountPolicy'), ['accounts', 'ip_group']],
         [this.$t('Other'), ['is_active', 'comment']]
       ],
       fieldsMeta: {
+        owner: {
+          el: {
+            multiple: false,
+            ajax: {
+              url: '/api/v1/users/users/?fields_size=mini',
+              transformOption: (item) => ({
+                label: `${item.name} (${item.username})`,
+                value: item.id
+              })
+            }
+          }
+        },
         accounts: {
           component: JSONManyToManySelect,
           el: {
@@ -69,10 +81,12 @@ export default {
       },
       hasSaveContinue: false,
       createSuccessNextRoute: {
-        name: 'ApplicationDetail'
+        name: 'IntegrationApplicationDetail'
       },
       performSubmit(values) {
         const formData = new FormData()
+        const owner = Array.isArray(values.owner) ? values.owner[0] : values.owner
+        values.owner = owner?.id || owner?.pk || owner?.value || owner
         delete values['logo']
 
         if (!Array.isArray(values.ip_group)) {

src/views/accounts/Integration/ApplicationDetail/ServiceInfo.vue

@@ -2,6 +2,7 @@
   <div>
     <TwoCol>
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+      <DetailCard :items="agentDetailItems" :title="$t('Agent')" class="agent-card" />
       <template #right>
         <QuickActions :actions="quickActions" type="primary" />
       </template>
@@ -13,16 +14,27 @@
 <script>
 import { QuickActions } from '@/components'
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+import DetailCard from '@/components/Cards/DetailCard/index.vue'
 import SecretDialog from '@/components/Dialog/Secret.vue'
+import { toSafeLocalDateStr } from '@/composables/useDateTime'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
+import { h, resolveComponent } from 'vue'
+
+const AGENT_STATUS_TYPE_MAP = {
+  online: 'success',
+  offline: 'warning',
+  error: 'danger',
+  unregistered: 'info'
+}
 
 export default {
   name: 'IntegrationApplicationInfo',
   components: {
     TwoCol,
     SecretDialog,
     AutoDetailCard,
-    QuickActions
+    QuickActions,
+    DetailCard
   },
   props: {
     object: {
@@ -54,12 +66,67 @@ export default {
                 })
             }.bind(this)
           }
+        },
+        {
+          title: this.$t('Agent'),
+          attrs: {
+            type: 'default',
+            label: this.$t('ResetAgent'),
+            disabled: !this.$hasPerm('accounts.change_integrationapplication')
+          },
+          callbacks: {
+            click: () => this.resetAgent()
+          }
         }
       ],
       url: `/api/v1/accounts/integration-applications/${this.object.id}`,
-      detailFields: ['id', 'name', 'date_created', 'date_updated', 'comment', 'is_active']
+      detailFields: ['id', 'name', 'owner', 'date_created', 'date_updated', 'comment', 'is_active']
     }
   },
-  computed: {}
+  computed: {
+    agentDetailItems() {
+      const agent = this.object.agent || {}
+      const statusType = AGENT_STATUS_TYPE_MAP[agent.status?.value] || 'info'
+      return [
+        {
+          key: this.$t('Status'),
+          value: agent.status?.label || '-',
+          formatter: (item, value) =>
+            h(resolveComponent('el-tag'), { type: statusType }, () => value)
+        },
+        { key: this.$t('AgentID'), value: agent.id },
+        { key: this.$t('Hostname'), value: agent.hostname },
+        { key: this.$t('Platform'), value: agent.platform },
+        { key: this.$t('Version'), value: agent.version },
+        { key: this.$t('LastSeen'), value: toSafeLocalDateStr(agent.last_seen) },
+        {
+          key: this.$t('Error'),
+          value: agent.error,
+          has: Boolean(agent.error),
+          formatter: (item, value) => h('span', { class: 'agent-error' }, value)
+        }
+      ]
+    }
+  },
+  methods: {
+    async resetAgent() {
+      await this.$confirm(this.$t('ResetAgentConfirm'))
+      await this.$axios.post(
+        `/api/v1/accounts/integration-applications/${this.object.id}/reset-agent/`
+      )
+      this.$message.success(this.$t('ResetAgentSuccess'))
+      this.$router.go(0)
+    }
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+.agent-card {
+  margin-top: 8px;
+}
+
+:deep(.agent-error) {
+  color: var(--el-color-danger);
+}
+</style>

src/views/accounts/Integration/ApplicationDetail/index.vue

@@ -13,13 +13,11 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import IntegrationApplicationAccount from '../components/AccountList.vue'
-import ServiceCallRecords from '../components/CallRecords.vue'
 import IntegrationApplicationInfo from './ServiceInfo.vue'
 
 export default {
   components: {
     GenericDetailPage,
-    ServiceCallRecords,
     IntegrationApplicationInfo,
     IntegrationApplicationAccount
   },
@@ -40,11 +38,6 @@ export default {
             title: this.$t('Accounts'),
             name: 'IntegrationApplicationAccount',
             hidden: () => !this.$hasPerm('accounts.view_integrationapplication')
-          },
-          {
-            name: 'ServiceCallRecords',
-            title: this.$t('CallRecords'),
-            hidden: () => !this.$hasPerm('audits.view_integrationapplicationlog')
           }
         ]
       }

src/views/accounts/Integration/ApplicationList.vue

@@ -12,6 +12,14 @@
 import CopyableFormatter from '@/components/Table/TableFormatters/CopyableFormatter.vue'
 import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { GenericListTable } from '@/layout/components'
+
+const AGENT_STATUS_TYPE_MAP = {
+  online: 'success',
+  offline: 'warning',
+  error: 'danger',
+  unregistered: 'info'
+}
+
 export default {
   name: 'CloudAccountList',
   components: {
@@ -51,6 +59,17 @@ export default {
               return row.accounts_amount
             }
           },
+          owner: {
+            formatter: (row) => row.owner?.name || '-'
+          },
+          agent: {
+            label: this.$t('AgentStatus'),
+            formatter: (row) => {
+              const status = row.agent?.status
+              const type = AGENT_STATUS_TYPE_MAP[status?.value] || 'info'
+              return <el-tag type={type}>{status?.label || '-'}</el-tag>
+            }
+          },
           name: {
             formatterArgs: {
               getRoute: ({ row }) => ({
@@ -100,7 +119,17 @@ export default {
         },
         columnsExtra: ['secret'],
         columnsShow: {
-          default: ['logo', 'name', 'id', 'secret', 'accounts_amount', 'date_last_used', 'active']
+          default: [
+            'logo',
+            'name',
+            'id',
+            'secret',
+            'owner',
+            'accounts_amount',
+            'agent',
+            'date_last_used',
+            'is_active'
+          ]
         },
         permissions: {
           app: 'accounts',