perf: cloud privider

jumpserver · Jul 3, 2024 · a976948 · a976948
1 parent 38aadbd
commit a976948
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 100 deletions.
diff --git a/src/views/assets/Asset/AssetList/components/PlatformDialog.vue b/src/views/assets/Asset/AssetList/components/PlatformDialog.vue
@@ -3,7 +3,7 @@
     v-if="iVisible"
     :show-cancel="false"
     :show-confirm="false"
-    :title="$tc('SelectPlatforms')"
+    :title="$tc('SelectProvider')"
     :visible.sync="iVisible"
     top="1vh"
     width="60%"

diff --git a/src/views/assets/Cloud/Account/AccountCreateUpdate.vue b/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
@@ -18,11 +18,11 @@
       <el-col :md="4" :sm="24">
         <IBox style="height: 490px;">
           <el-steps
-            direction="vertical"
             :active="activeStep"
+            direction="vertical"
             space="400px"
           >
-            <el-step :title="$tc('Config')" :description="description" />
+            <el-step :description="description" :title="$tc('Config')" />
             <el-step :title="$tc('Strategy')" />
           </el-steps>
         </IBox>
@@ -53,7 +53,10 @@ export default {
 
     function setFieldAttrs() {
       const fieldsObject = {}
-      const updateNotRequiredFields = ['access_key_secret', 'client_secret', 'password', 'sc_password', 'oc_password', 'cert_file', 'key_file', 'public_key', 'private_key']
+      const updateNotRequiredFields = [
+        'access_key_secret', 'client_secret', 'password', 'sc_password',
+        'oc_password', 'cert_file', 'key_file', 'public_key', 'private_key'
+      ]
       for (const item of accountProviderAttrs?.attrs) {
         fieldsObject[item] = {
           rules: updateNotRequiredFields.includes(item) && vm.$route.params.id ? [] : [RequiredChange]
@@ -160,7 +163,9 @@ export default {
           }
           return `${url}?provider=${accountProvider}`
         },
-        submitMethod: () => { return vm.$route.params?.id || vm.accountId ? 'put' : 'post' },
+        submitMethod: () => {
+          return vm.$route.params?.id || vm.accountId ? 'put' : 'post'
+        },
         cleanFormValue(values) {
           const encryptedFields = [
             'access_key_secret', 'password', 'client_secret',
@@ -257,12 +262,18 @@ export default {
         },
         hasSaveContinue: false,
         hasReset: false,
-        getUrl: () => { return this.strategySettings.url },
-        submitMethod: () => { return this.$refs.baseForm.form.task?.id ? 'put' : 'post' },
+        getUrl: () => {
+          return this.strategySettings.url
+        },
+        submitMethod: () => {
+          return this.$refs.baseForm.form.task?.id ? 'put' : 'post'
+        },
         moreButtons: [
           {
             title: this.$t('Previous'),
-            callback: () => { this.activeStep = this.activeStep === 1 ? 0 : 1 }
+            callback: () => {
+              this.activeStep = this.activeStep === 1 ? 0 : 1
+            }
           }
         ],
         updateSuccessNextRoute: { name: 'CloudAccountList' },
@@ -273,7 +284,9 @@ export default {
           if (!Array.isArray(ipNetworkSegments)) {
             value.ip_network_segment_group = ipNetworkSegments ? ipNetworkSegments.split(',') : []
           }
-          value.strategy = strategy.map(item => { return item.id })
+          value.strategy = strategy.map(item => {
+            return item.id
+          })
           const accountId = this.$route.params?.id || this.accountId
           if (accountId) {
             value.account = { pk: accountId }
@@ -283,8 +296,7 @@ export default {
       }
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 
 </script>

diff --git a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -60,7 +60,7 @@ export default {
       excludes: ['attrs', 'task'],
       quickEditActions: [
         {
-          title: this.$t('IpType'),
+          title: this.$t('IPType'),
           type: 'updateSelect',
           attrs: {
             model: this.object.task.sync_ip_type,
@@ -177,7 +177,7 @@ export default {
           formatter(row, value) {
             return (<div>{
               value?.map((content) => {
-                return <div>{ content }</div>
+                return <div>{content}</div>
               })}
             </div>)
           }

diff --git a/src/views/assets/Cloud/Account/components/AccountPanel.vue b/src/views/assets/Cloud/Account/components/AccountPanel.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="account-panel">
     <el-row :gutter="20">
-      <el-col :span="22">
-        <div class="line">
+      <el-col :span="21">
+        <div class="title">
           <span>{{ object.name }}</span>
         </div>
       </el-col>
-      <el-col :span="2" @click.native="handleClick($event)">
+      <el-col :span="3" @click.native="handleClick($event)">
         <el-dropdown>
           <el-link :underline="false" type="primary">
             <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
@@ -25,15 +25,13 @@
       </el-col>
     </el-row>
     <el-divider />
-    <el-row :gutter="20">
-      <el-col :span="6" class="image">
+    <el-row :gutter="20" class="panel-content">
+      <el-col :span="6" class="panel-image">
         <el-image :src="cloudImage" fit="contain" />
       </el-col>
-      <el-col :span="18">
+      <el-col :span="18" class="panel-info">
         <InfoPanel :content="iTask.regions.length" :title="$tc('TotalSyncRegion')" />
         <InfoPanel :content="iTask.instance_count || 0" :title="$tc('TotalSyncAsset')" />
-        <!-- <InfoPanel :content="iTask.strategy.length" :title="$tc('TotalSyncStrategy')" /> -->
-        <!-- <InfoPanel :content="toSafeLocalDateStr(object.date_created)" :title="$tc('DateJoined')" /> -->
         <InfoPanel :content="toSafeLocalDateStr(iTask.date_last_sync)" :title="$tc('DateLastSync')" />
       </el-col>
     </el-row>
@@ -71,8 +69,8 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import AuthPanel from './AuthPanel'
-import AssetPanel from './AssetPanel'
 import InfoPanel from './InfoPanel'
+import AssetPanel from './AssetPanel'
 import { toSafeLocalDateStr } from '@/utils/time'
 import { ACCOUNT_PROVIDER_ATTRS_MAP } from '@/views/assets/Cloud/const'
 
@@ -174,43 +172,30 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+
 .account-panel {
   display: flex;
   flex-direction: column;
   //height: 100%;
   cursor: pointer;
 
-  & .el-row:first-of-type {
-    height: 30px !important;
-    padding: 0;
-
-    .el-col-22 {
-      padding-left: 0 !important;
-
-      .line {
-        line-height: 30px;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: bold;
-      }
-    }
-
-    .el-col-2 {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      line-height: 30px;
-    }
+  .title {
+    text-align: left;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .el-row {
+  .panel-content {
     display: flex;
-    align-items: center;
-    margin: 0 !important;
-    padding: 25px 0;
+    height: 100px;
+    padding: 10px 0;
+
+    .panel-image {
+      margin: auto 5px;
+    }
   }
 
   .el-divider--horizontal {

diff --git a/src/views/assets/Cloud/Account/components/AssetPanel.vue b/src/views/assets/Cloud/Account/components/AssetPanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <el-alert
-      :closable="false"
       :center="false"
+      :closable="true"
       style="margin-bottom: 6px"
     >
-      <el-link :type="linkType" :icon="linkIcon" :underline="false"> {{ tip }} </el-link>
+      <el-link :icon="linkIcon" :type="linkType" :underline="false"> {{ tip }}</el-link>
     </el-alert>
     <ImportTable
       ref="importTable"
@@ -60,15 +60,17 @@ export default {
             title: this.$t('Next'),
             type: 'primary',
             hidden: !this.active,
-            callback: () => { this.$emit('update:active', 3) }
+            callback: () => {
+              this.$emit('update:active', 3)
+            }
           }
         ],
         config: {
           hasSelection: true,
           persistSelection: false,
           hasPagination: false,
           tableAttrs: {
-            maxHeight: '200px'
+            height: '300px'
           }
         },
         jsonData: {
@@ -102,7 +104,9 @@ export default {
   },
   methods: {
     enableWS() {
-      if (this.ws) { return }
+      if (this.ws) {
+        return
+      }
       const scheme = document.location.protocol === 'https:' ? 'wss' : 'ws'
       const port = document.location.port ? ':' + document.location.port : ''
       const url = '/ws/xpack/cloud/'

diff --git a/src/views/assets/Cloud/Account/components/AuthPanel.vue b/src/views/assets/Cloud/Account/components/AuthPanel.vue
@@ -3,8 +3,8 @@
     ref="form"
     class="form"
     v-bind="settings"
-    @submitSuccess="handleSubmitSuccess"
     @performFinished="handlePerformFinished"
+    @submitSuccess="handleSubmitSuccess"
   />
 </template>
 
@@ -28,7 +28,8 @@ export default {
     },
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     origin: {
       type: String,
@@ -37,9 +38,13 @@ export default {
   },
   data() {
     const vm = this
+
     function setFieldAttrs(provider) {
       const fieldsObject = {}
-      const updateNotRequiredFields = ['access_key_secret', 'client_secret', 'password', 'sc_password', 'oc_password', 'cert_file', 'key_file', 'public_key', 'private_key']
+      const updateNotRequiredFields = [
+        'access_key_secret', 'client_secret', 'password', 'sc_password',
+        'oc_password', 'cert_file', 'key_file', 'public_key', 'private_key'
+      ]
       for (const item of ACCOUNT_PROVIDER_ATTRS_MAP[provider].attrs) {
         fieldsObject[item] = {
           rules: updateNotRequiredFields.includes(item) && vm.object?.id ? [] : [RequiredChange]
@@ -202,7 +207,15 @@ export default {
 ::v-deep .el-form-item.form-buttons {
   text-align: right;
 }
+
 .form {
   margin-right: 0;
+
+  ::v-deep {
+    form {
+      margin-right: 0;
+      padding-right: 0;
+    }
+  }
 }
 </style>
diff --git a/src/views/assets/Cloud/Account/components/CreateDialog.vue b/src/views/assets/Cloud/Account/components/CreateDialog.vue
@@ -11,8 +11,8 @@
     width="1051px"
     v-on="$listeners"
   >
-    <el-row style="padding: 10px">
-      <el-col :span="4" style="height: 300px;">
+    <el-row :gutter="5" style="padding: 10px">
+      <el-col :span="4" class="left-step-zone">
         <el-steps :active="active" direction="vertical">
           <el-step :description="firstStepDesc" />
           <el-step :description="$tc('Authentication')" />
@@ -67,7 +67,7 @@ export default {
       activeMenuMap: { 0: 'ProviderPanel', 1: 'AuthPanel', 2: 'AssetPanel', 3: 'ResultPanel' },
       activeMenu: 'ProviderPanel',
       selected: '',
-      firstStepDesc: this.$tc('SelectPlatforms'),
+      firstStepDesc: this.$tc('SelectProvider'),
       active: 0,
       account: {}
     }
@@ -102,11 +102,17 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 ::v-deep .el-dialog {
   min-width: 1051px !important;
-  max-width: 1051px !important;
+  max-width: 1056px !important;
 }
+
+.left-step-zone {
+  border-right: solid 1px var(--color-border);
+  height: 350px;
+}
+
 ::v-deep .el-step {
   .el-step__head {
     &.is-process {
@@ -131,7 +137,7 @@ export default {
 
   .el-step__main {
     .el-step__description.is-process,
-    .el-step__description.is-finish{
+    .el-step__description.is-finish {
       color: var(--color-primary);
     }
   }