perf: 优化 redis platform，并且增加 Platform protocols

2026-01-13 11:24:17 +00:00 · 2023-02-14 14:32:26 +08:00
parent bf55efeb56
commit 834739a878
19 changed files with 168 additions and 85 deletions
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/AutoDataForm/index.vue
@@ -9,8 +9,8 @@
  >
    <span
      v-for="(group, i) in groups"
-      :slot="'id:'+group.name"
      :key="'group-'+group.name"
+      :slot="'id:'+group.name"
    >
      <FormGroupHeader
        v-if="!groupHidden(group, i)"
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -14,10 +14,36 @@
    <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />

    <el-form-item v-if="hasButtons" class="form-buttons">
-      <el-button v-for="button in moreButtons" :key="button.title" size="small" v-bind="button" :loading="button.loading" @click="handleClick(button)">{{ button.title }}</el-button>
-      <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">{{ $t('common.Reset') }}</el-button>
-      <el-button v-if="defaultButton && hasSaveContinue" size="small" @click="submitForm('form', true)">{{ $t('common.SaveAndAddAnother') }}</el-button>
-      <el-button v-if="defaultButton" size="small" :loading="isSubmitting" type="primary" @click="submitForm('form')">{{ $t('common.Submit') }}</el-button>
+      <el-button
+        v-for="button in moreButtons"
+        :key="button.title"
+        :loading="button.loading"
+        size="small"
+        v-bind="button"
+        @click="handleClick(button)"
+      >
+        {{ button.title }}
+      </el-button>
+      <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">
+        {{ $t('common.Reset') }}
+      </el-button>
+      <el-button
+        v-if="defaultButton && hasSaveContinue"
+        size="small"
+        @click="submitForm('form', true)"
+      >
+        {{ $t('common.SaveAndAddAnother') }}
+      </el-button>
+      <el-button
+        v-if="defaultButton"
+        :disabled="!canSubmit"
+        :loading="isSubmitting"
+        size="small"
+        type="primary"
+        @click="submitForm('form')"
+      >
+        {{ $t('common.Submit') }}
+      </el-button>
    </el-form-item>
  </ElFormRender>
 </template>
@@ -25,6 +51,7 @@
 <script>
 import ElFormRender from './components/el-form-renderer'
 import { scrollToError } from '@/utils'
+
 export default {
  components: {
    ElFormRender
@@ -42,6 +69,10 @@ export default {
      type: Boolean,
      default: true
    },
+    canSubmit: {
+      type: Boolean,
+      default: true
+    },
    hasSaveContinue: {
      type: Boolean,
      default: true
@@ -125,7 +156,7 @@ export default {
  }

  .el-form ::v-deep .el-form-item__error {
-     position: inherit;
+    position: inherit;
  }

  .el-form ::v-deep .form-group-header {
@@ -144,9 +175,11 @@ export default {
    font-size: 12px;
    line-height: 18px;
  }
+
  .el-form ::v-deep .help-block a {
    color: var(--color-primary);
  }
+
  .form-buttons {
    margin-top: 20px;
  }
--- a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
+++ b/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
@@ -1,13 +1,13 @@
 <template>
  <Dialog
-    :title="$tc('assets.PlatformProtocolConfig') + '：' + item.name"
+    :close-on-click-modal="false"
    :destroy-on-close="true"
    :show-cancel="false"
    :show-confirm="false"
-    :close-on-click-modal="false"
+    :title="$tc('assets.PlatformProtocolConfig') + '：' + item.name"
    class="setting-dialog"
-    width="70%"
    v-bind="$attrs"
+    width="70%"
    v-on="$listeners"
  >
    <el-alert v-if="disabled" type="success">
@@ -18,9 +18,9 @@
      <i class="fa fa-external-link" />
    </el-alert>
    <AutoDataForm
-      class="data-form"
-      :form="form"
      :disabled="disabled"
+      :form="form"
+      class="data-form"
      v-bind="config"
      @submit="onSubmit"
    />
@@ -127,6 +127,12 @@ export default {
              label: this.$t('assets.SubmitSelector'),
              type: 'input',
              hidden: (form) => this.item.name !== 'http'
+            },
+            {
+              id: 'auth_username',
+              label: this.$t('assets.AuthUsername'),
+              type: 'switch',
+              hidden: (form) => this.item.name !== 'redis'
            }
          ]]
        ]
@@ -157,12 +163,12 @@ export default {
 </script>

 <style lang="scss" scoped>
-.data-form >>> .el-form-item.form-buttons {
+.data-form > > > .el-form-item.form-buttons {
  padding-top: 10px;
  margin-bottom: 0;
 }

-.setting-dialog >>> .el-dialog__body {
+.setting-dialog > > > .el-dialog__body {
  padding-top: 10px;
 }

--- a/src/components/FormFields/ProtocolSelector/index.vue
+++ b/src/components/FormFields/ProtocolSelector/index.vue
@@ -1,7 +1,13 @@
 <template>
  <div :class="showSetting ? 'show-setting' : 'hide-setting'">
-    <div v-for="(item, index) in items" :key="item.name" style="display: flex;margin-top: 8px;">
-      <el-input v-model="item.port" :placeholder="portPlaceholder" class="input-with-select" v-bind="$attrs">
+    <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
+      <el-input
+        v-model="item.port"
+        :class="readonly ? '' : 'input-with-select'"
+        :placeholder="portPlaceholder"
+        :readonly="readonly"
+        v-bind="$attrs"
+      >
        <el-select
          slot="prepend"
          v-model="item.name"
@@ -18,7 +24,7 @@
          @click="onSettingClick(item)"
        />
      </el-input>
-      <div class="input-button" style="display: flex; margin-left: 20px">
+      <div v-if="!readonly" class="input-button" style="display: flex; margin-left: 20px">
        <el-button
          :disabled="cannotDelete(item)"
          icon="el-icon-minus"
@@ -40,7 +46,7 @@
    </div>
    <ProtocolSettingDialog
      v-if="showDialog"
-      :disabled="settingReadonly"
+      :disabled="settingReadonly || readonly"
      :item="settingItem"
      :visible.sync="showDialog"
    />
@@ -67,6 +73,10 @@ export default {
      type: Array,
      default: () => ([])
    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
    settingReadonly: {
      type: Boolean,
      default: false
@@ -201,6 +211,11 @@ export default {
  width: 110px;
 }

+.protocol-item {
+  display: flex;
+  margin: 5px 0;
+}
+
 .input-button {
  margin-top: 4px;
 }
--- a/src/components/IBox/index.vue
+++ b/src/components/IBox/index.vue
@@ -3,7 +3,7 @@
    <template #header>
      <slot name="header">
        <div v-if="title" slot="header" class="clearfix ibox-title">
-          <i v-if="fa" :class="'fa ' + fa" /> {{ title }}
+          <i v-if="fa" :class="'fa ' + fa" /> <h5>{{ title }}</h5>
        </div>
      </slot>
    </template>
@@ -55,11 +55,11 @@ export default {

  .ibox-title h5 {
    display: inline-block;
-    font-size: 14px;
+    font-size: 13px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
-    float: left;
+    font-weight: 500;
  }

  .ibox-tools a {
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -197,6 +197,7 @@
    "NoSQLProtocol": "NoSQL Protocol"
  },
  "assets": {
+    "AuthUsername": "Auth using username",
    "Secure": "Secure",
    "AssetBulkUpdateTips": "device、cloud、web，Batch update of domain is not supported",
    "LabelInputFormatValidation": "Format error, correct format is：name:value",
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -197,6 +197,7 @@
    "NoSQLProtocol": "非リレーショナルデータベース"
  },
  "assets": {
+    "AuthUsername": "ユーザー名を使用した認証",
    "Secure": "安全である",
    "AssetBulkUpdateTips": "ネットワークデバイス、クラウドサービス、Web、一括更新ネットワークドメインはサポートされていません",
    "LabelInputFormatValidation": "フォーマットが正しくありません：name:value",
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -197,6 +197,7 @@
    "NoSQLProtocol": "非关系数据库"
  },
  "assets": {
+    "AuthUsername": "使用用户名认证",
    "Secure": "安全",
    "AssetBulkUpdateTips": "网络设备、云服务、web，不支持批量更新网域",
    "LabelInputFormatValidation": "标签格式错误，正确格式为：name:value",
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -2,16 +2,16 @@
  <AutoDataForm
    v-if="!loading"
    ref="form"
-    :method="method"
    :form="form"
-    :url="iUrl"
-    :has-save-continue="iHasSaveContinue"
    :has-reset="iHasReset"
+    :has-save-continue="iHasSaveContinue"
    :is-submitting="isSubmitting"
+    :method="method"
+    :url="iUrl"
    v-bind="$attrs"
-    v-on="$listeners"
-    @submit="handleSubmit"
    @afterRemoteMeta="handleAfterRemoteMeta"
+    @submit="handleSubmit"
+    v-on="$listeners"
  />
 </template>
 <script>
@@ -179,12 +179,15 @@ export default {
                },
                style: { 'vertical-align': 'top' }
              }, msgLinkName),
-              h('span', { style: {
-                'padding-left': '5px',
-                'height': '18px',
-                'line-height': '18px',
-                'font-size': '13.5px',
-                'font-weight': ' 400' }}, msg)
+              h('span', {
+                style: {
+                  'padding-left': '5px',
+                  'height': '18px',
+                  'line-height': '18px',
+                  'font-size': '13.5px',
+                  'font-weight': ' 400'
+                }
+              }, msg)
            ]),
            type: 'success'
          })
@@ -329,7 +332,9 @@ export default {
      this.performSubmit(validValues)
        .then((res) => this.onPerformSuccess.bind(this)(res, this.method, this, addContinue))
        .catch((error) => this.onPerformError(error, this.method, this))
-        .finally(() => { this.isSubmitting = false })
+        .finally(() => {
+          this.isSubmitting = false
+        })
    },
    async getFormValue() {
      const cloneFrom = this.$route.query['clone_from']
--- a/src/router/console/users.js
+++ b/src/router/console/users.js
@@ -134,7 +134,8 @@ export default [
    redirect: '',
    meta: {
      permissions: ['rbac.view_orgrole | rbac.view_systemrole'],
-      app: 'rbac'
+      app: 'rbac',
+      licenseRequired: true
    },
    children: [
      {
--- a/src/views/accounts/AccountGather/AccountGatherList.vue
+++ b/src/views/accounts/AccountGather/AccountGatherList.vue
@@ -1,5 +1,5 @@
 <template>
-  <TreeTable :table-config="tableConfig" :tree-setting="treeSetting" :header-actions="headerActions" />
+  <TreeTable :header-actions="headerActions" :table-config="tableConfig" :tree-setting="treeSetting" />
 </template>

 <script>
@@ -72,7 +72,6 @@ export default {
                  can: this.$hasPerm('accounts.add_gatheredaccount'),
                  type: 'primary',
                  callback: ({ row }) => {
-                    console.log('row', row.id)
                    this.$axios.post(
                      `/api/v1/accounts/gathered-accounts/${row.id}/sync/`,
                    ).then(res => {
@@ -93,8 +92,7 @@ export default {
        hasExport: false,
        searchConfig: {
          exclude: ['asset'],
-          options: [
-          ]
+          options: []
        }
      }
    }
--- a/src/views/accounts/AccountPush/AccountPushCreateUpdate.vue
+++ b/src/views/accounts/AccountPush/AccountPushCreateUpdate.vue
@@ -74,7 +74,6 @@ export default {
          data.secret = data[secretType]
          delete data[secretType]
        }
-        console.log('Data: ', data)
        return data
      }
    }
--- a/src/views/accounts/AccountPush/AccountPushExecutionList.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionList.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>

 <script>
@@ -18,7 +18,6 @@ export default {
    }
  },
  data() {
-    console.log('this', this)
    return {
      tableConfig: {
        url: '/api/v1/accounts/push-account-executions/?' + `${this.object.id ? 'automation_id=' + this.object.id : ''}`,
@@ -31,14 +30,14 @@ export default {
            label: this.$t('accounts.AccountChangeSecret.AssetAmount'),
            width: '80px',
            formatter: function(row) {
-              return <span>{ row.snapshot.asset_amount }</span>
+              return <span>{row.snapshot.asset_amount}</span>
            }
          },
          node_amount: {
            label: this.$t('accounts.AccountChangeSecret.NodeAmount'),
            width: '80px',
            formatter: function(row) {
-              return <span>{ row.snapshot.node_amount }</span>
+              return <span>{row.snapshot.node_amount}</span>
            }
          },
          status: {
--- a/src/views/accounts/AccountPush/AccountPushList.vue
+++ b/src/views/accounts/AccountPush/AccountPushList.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>

 <script>
@@ -37,13 +37,12 @@ export default {
          },
          accounts: {
            formatter: function(row) {
-              console.log('row', row)
-              return <span> { row.accounts.join(', ') } </span>
+              return <span> {row.accounts.join(', ')} </span>
            }
          },
          secret_strategy: {
            formatter: function(row) {
-              return <span> { row.secret_strategy.label } </span>
+              return <span> {row.secret_strategy.label} </span>
            }
          },
          username: {
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/src/views/assets/Platform/PlatformCreateUpdate.vue
@@ -1,14 +1,14 @@
 <template>
  <div v-if="!loading" class="platform-form">
    <GenericCreateUpdatePage
-      :url="url"
-      :fields="fields"
-      :initial="initial"
-      :fields-meta="fieldsMeta"
-      :has-detail-in-msg="false"
-      :clean-form-value="cleanFormValue"
      :after-get-form-value="afterGetFormValue"
      :after-get-remote-meta="handleAfterGetRemoteMeta"
+      :clean-form-value="cleanFormValue"
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :has-detail-in-msg="false"
+      :initial="initial"
+      :url="url"
    />
  </div>
 </template>
@@ -44,8 +44,7 @@ export default {
          'name', 'category_type', 'charset', 'domain_enabled'
        ]],
        [this.$t('setting.Config'), [
-          'protocols',
-          'su_enabled', 'su_method'
+          'protocols', 'su_enabled', 'su_method'
        ]],
        [this.$t('common.Automations'), ['automation']],
        [this.$t('common.Other'), ['comment']]
@@ -133,12 +132,13 @@ export default {
 </script>

 <style lang='scss' scoped>
-.platform-form >>> {
+.platform-form > > > {
  .el-form-item {
    .el-select:not(.prepend) {
      width: 100%;
    }
  }
+
  .el-cascader {
    width: 100%;
  }
--- a/src/views/assets/Platform/PlatformDetail/Automation.vue
+++ b/src/views/assets/Platform/PlatformDetail/Automation.vue
@@ -18,7 +18,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -29,14 +30,15 @@ export default {
          ansible_enabled: true
        }
      },
-      disabled: true,
      url: `/api/v1/assets/platforms/`,
+      disabled: true,
      hasReset: false,
      hasDetailInMsg: false,
      submitMethod: () => 'patch',
      fields: [['', ['automation']]],
      fieldsMeta: platformFieldsMeta(this),
      onSubmit: this.submit,
+      canSubmit: !this.object.internal,
      defaultOptions: {}
    }
  },
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -1,36 +1,58 @@
 <template>
  <el-row :gutter="20">
    <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
    </el-col>
    <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
+      <IBox :title="$tc('assets.Protocols')">
+        <ProtocolSelector
+          v-if="protocolChoices"
+          v-model="object.protocols"
+          :choices="protocolChoices"
+          :readonly="object['internal']"
+        />
+        <el-button
+          v-if="!object.internal"
+          size="small"
+          style="margin-top: 10px"
+          type="primary"
+          @click="updateProtocols"
+        >
+          {{ $t('common.Update') }}
+        </el-button>
+      </IBox>
    </el-col>
    <PlatformDetailUpdateDialog
      v-if="visible"
-      :visible.sync="visible"
-      :show-fields="fields"
      :object="object"
+      :show-fields="fields"
+      :visible.sync="visible"
    />
  </el-row>
 </template>

 <script>
+import { IBox } from '@/components'
 import AutoDetailCard from '@/components/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 import PlatformDetailUpdateDialog from './PlatformDetailUpdateDialog'
+import ProtocolSelector from '@/components/FormFields/ProtocolSelector'

 export default {
  name: 'Detail',
  components: {
-    AutoDetailCard,
+    IBox,
    QuickActions,
+    AutoDetailCard,
+    ProtocolSelector,
    PlatformDetailUpdateDialog
  },
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -46,12 +68,28 @@ export default {
          value: `${this.object.category?.label}/${this.object.type?.label}`
        },
        'comment'
-      ]
+      ],
+      protocolChoices: null
    }
  },
-  computed: {
+  computed: {},
+  async mounted() {
+    await this.getTypeConstraints()
  },
  methods: {
+    updateProtocols() {
+      const url = `/api/v1/assets/platforms/${this.object.id}/`
+      this.$axios.patch(url, { protocols: this.object.protocols }).then(() => {
+        this.$message.success(this.$tc('common.UpdateSuccess'))
+      })
+    },
+    async getTypeConstraints() {
+      const category = this.object.category.value
+      const type = this.object.type.value
+      const url = `/api/v1/assets/categories/constraints/?category=${category}&type=${type}`
+      const constraints = await this.$axios.get(url)
+      this.protocolChoices = constraints['protocols']
+    },
    setQuickActions() {
      const vm = this
      const { object } = this
@@ -82,7 +120,7 @@ export default {
            label: this.$t('common.Update'),
            disabled: (
              suEnabledDisabled.includes(object.category?.value) ||
-                object.internal || !vm.$hasPerm('assets.change_platform')
+              object.internal || !vm.$hasPerm('assets.change_platform')
            )
          },
          callbacks: Object.freeze({
@@ -91,20 +129,6 @@ export default {
              this.visible = !this.visible
            }
          })
-        },
-        {
-          title: this.$t(`assets.ProtocolsEnabled`),
-          attrs: {
-            type: 'primary',
-            label: this.$t('common.Update'),
-            disabled: (object.internal || !vm.$hasPerm('assets.change_platform'))
-          },
-          callbacks: Object.freeze({
-            click: () => {
-              this.fields = ['protocols']
-              this.visible = !this.visible
-            }
-          })
        }
      ]

--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -25,8 +25,7 @@ export const platformFieldsMeta = (vm) => {
          component: JsonEditor,
          hidden: (formValue) => !formValue['ansible_enabled']
        },
-        gather_facts_enabled: {
-        },
+        gather_facts_enabled: {},
        ping_method: {},
        gather_facts_method: {},
        push_account_method: {},
--- a/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue
+++ b/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue
@@ -26,10 +26,10 @@
              :name="key"
            >
              <CodeEditor
-                style="margin-bottom: 20px"
                :options="cmOptions"
                :toolbar="toolbar"
                :value.sync="editor.value"
+                style="margin-bottom: 20px"
              />
            </el-tab-pane>
          </el-tabs>
@@ -57,7 +57,8 @@ export default {
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
+      }
    }
  },
  data() {
@@ -108,7 +109,6 @@ export default {
        showSearch: false,
        callback: {
          onSelected: function(event, treeNode) {
-            console.log(treeNode)
            if (!treeNode.isParent) {
              this.onOpenEditor(treeNode)
            }