Merge pull request #9242 from zexi/automated-cherry-pick-of-#9240-upstream-master

Automated cherry pick of #9240: feat(k8s/compute): add custom registry input and credential handling

Author: zexi

containers/Compute/sections/MirrorRegistry/index.vue

@@ -10,42 +10,58 @@
         :value="registry"
         showSearch
         :filterOption="filterOption"
+        optionLabelProp="label"
         @change="handleRegistryChange">
-        <a-select-option value="">{{ $t('common.tips.select', [$t('compute.eci.repo.image.registry')]) }}</a-select-option>
+        <a-select-option value="" label="">{{ $t('common.tips.select', [$t('compute.eci.repo.image.registry')]) }}</a-select-option>
         <a-select-option
           v-for="cr in registrys"
           :key="cr.value"
-          :value="cr.value">{{ cr.label }}</a-select-option>
-      </a-select>
-    </a-col>
-    <a-col :span="colSpan">
-      <a-select
-        :loading="imageLoading"
-        :value="image"
-        showSearch
-        :filterOption="filterOption"
-        @change="handleImageChange">
-        <a-select-option value="">{{ $t('common.tips.select', [$t('compute.pod-image')]) }}</a-select-option>
-        <a-select-option
-          v-for="cr in images"
-          :key="cr.value"
-          :value="cr.value">{{ cr.label }}</a-select-option>
-      </a-select>
-    </a-col>
-    <a-col :span="colSpan">
-      <a-select
-        :loading="tagLoading"
-        :value="tag"
-        showSearch
-        :filterOption="filterOption"
-        @change="handleTagChange">
-        <a-select-option value="">{{ $t('common.tips.select', [$t('compute.repo.image.tag')]) }}</a-select-option>
-        <a-select-option
-          v-for="cr in tags"
-          :key="cr.value"
-          :value="cr.value">{{ cr.label }}</a-select-option>
+          :value="cr.value"
+          :label="cr.label">
+          <div>{{ cr.label }}</div>
+          <div style="font-size: 12px; color: #999;">{{ cr.url }}</div>
+        </a-select-option>
       </a-select>
     </a-col>
+    <template v-if="isCustomRegistry">
+      <a-col :span="16">
+        <a-input
+          :value="customImageUrl"
+          :placeholder="$t('k8s.repo.image.custom.placeholder')"
+          @change="handleCustomImageUrlChange" />
+        <div v-if="previewImage" style="font-size: 12px; color: #999; margin-top: 4px;">{{ previewImage }}</div>
+      </a-col>
+    </template>
+    <template v-else>
+      <a-col :span="colSpan">
+        <a-select
+          :loading="imageLoading"
+          :value="image"
+          showSearch
+          :filterOption="filterOption"
+          @change="handleImageChange">
+          <a-select-option value="">{{ $t('common.tips.select', [$t('compute.pod-image')]) }}</a-select-option>
+          <a-select-option
+            v-for="cr in images"
+            :key="cr.value"
+            :value="cr.value">{{ cr.label }}</a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="colSpan">
+        <a-select
+          :loading="tagLoading"
+          :value="tag"
+          showSearch
+          :filterOption="filterOption"
+          @change="handleTagChange">
+          <a-select-option value="">{{ $t('common.tips.select', [$t('compute.repo.image.tag')]) }}</a-select-option>
+          <a-select-option
+            v-for="cr in tags"
+            :key="cr.value"
+            :value="cr.value">{{ cr.label }}</a-select-option>
+        </a-select>
+      </a-col>
+    </template>
   </a-row>
 </template>
 
@@ -75,8 +91,23 @@ export default {
       tag: '',
       tags: [],
       colSpan: 8,
+      customImageUrl: '',
     }
   },
+  computed: {
+    isCustomRegistry () {
+      const cur = this.registrys.find(o => o.value === this.registry)
+      return cur?.type === 'custom'
+    },
+    previewImage () {
+      const cur = this.registrys.find(o => o.value === this.registry)
+      const url = cur?.url
+      if (url && this.customImageUrl) {
+        return `${this.stripProtocol(url)}/${this.customImageUrl}`
+      }
+      return ''
+    },
+  },
   watch: {
     registry (val) {
       if (!val) {
@@ -96,14 +127,27 @@ export default {
     handleRegistryChange (val) {
       if (val) {
         this.registry = val
-        this.getImagesByRegistryId(val)
+        this.customImageUrl = ''
+        const cur = this.registrys.find(o => o.value === val)
+        this.$emit('credential-change', cur?.credential_id || '')
+        if (cur?.type === 'custom') {
+          this.image = ''
+          this.images = []
+          this.tag = ''
+          this.tags = []
+          this.$emit('change', '')
+        } else {
+          this.getImagesByRegistryId(val)
+        }
       } else {
         this.registry = ''
         this.image = ''
         this.images = []
         this.tag = ''
         this.tags = []
+        this.customImageUrl = ''
         this.$emit('change', '')
+        this.$emit('credential-change', '')
       }
     },
     async getRegistrys () {
@@ -112,14 +156,16 @@ export default {
         this.registryLoading = true
         this.registry = ''
         this.registrys = []
-        const params = { details: true, limit: 20, offset: 0, $t: uuid() }
+        const params = { details: true, limit: 20, offset: 0, scope: this.$store.getters.scope, $t: uuid() }
         const result = await manager.list({ params })
         const dataArr = result.data.data || []
         this.registrys = dataArr.map(item => {
           return {
             label: item.name,
             value: item.id,
             url: item.url,
+            type: item.type,
+            credential_id: item.credential_id,
           }
         })
         if (this.isDefaultSelect && this.registrys?.length > 0) {
@@ -203,11 +249,25 @@ export default {
         this.tagLoading = false
       }
     },
+    stripProtocol (url) {
+      return url.replace(/^https?:\/\//, '')
+    },
+    handleCustomImageUrlChange (e) {
+      const val = e.target.value
+      this.customImageUrl = val
+      const curRegistry = this.registrys.find(o => o.value === this.registry)
+      const url = curRegistry?.url
+      if (url && val) {
+        this.$emit('change', `${this.stripProtocol(url)}/${val}`)
+      } else {
+        this.$emit('change', '')
+      }
+    },
     triggerChange (registry, image, tag) {
       const curRegistry = this.registrys.find(o => o.value === registry)
       const url = curRegistry?.url
       if (url && image && tag) {
-        this.$emit('change', `${url}/${image}:${tag}`)
+        this.$emit('change', `${this.stripProtocol(url)}/${image}:${tag}`)
       } else {
         this.$emit('change', '')
       }

containers/Compute/sections/SpecContainer/Form.vue

@@ -17,7 +17,8 @@
         :placeholder="$t('common.tips.input', [$t('compute.repo.container_image')])" />
     </a-form-item>
     <a-form-item v-else :label="$t('compute.repo.container_image')">
-      <mirror-registry v-decorator="decorators.registryImage" />
+      <mirror-registry v-decorator="decorators.registryImage" @credential-change="handleCredentialChange" />
+      <a-input v-show="false" v-decorator="decorators.imageCredentialId" />
     </a-form-item>
     <a-form-item label="CPU" v-show="false">
       <a-input
@@ -140,6 +141,13 @@ export default {
     handleSourceChange (e) {
       this.source = e.target.value
     },
+    handleCredentialChange (credentialId) {
+      if (this.form && this.form.fc && this.decorators.imageCredentialId) {
+        this.form.fc.setFieldsValue({
+          [this.decorators.imageCredentialId[0]]: credentialId,
+        })
+      }
+    },
     labelChangeHandle (val) {
       this.labelList = val
     },

containers/Compute/views/vminstance-container/utils/createServer.js

@@ -690,6 +690,9 @@ export const createVmDecorators = () => {
           ],
         },
       ],
+      imageCredentialId: i => [
+        `imageCredentialIds[${i}]`,
+      ],
       image: i => [
         `containerimages[${i}]`,
         {
@@ -1221,8 +1224,9 @@ export class GenCreateData {
     const containers = tabKeys.map(k => {
       const pciDevices = (this.fd.pciEnable && this.genPciDevices()) || []
       const image = this.fd.registryImages?.[k] || ''
+      const credentialId = this.fd.imageCredentialIds?.[k] || ''
 
-      return {
+      const spec = {
         name: this.fd.containerNames?.[k],
         image: removeHttp(image) || this.fd.containerimages?.[k],
         command: this.fd.containerCommands?.[k]?.split(' '),
@@ -1239,6 +1243,10 @@ export class GenCreateData {
         envs: getEnvs(this.fd.containerEnvNames?.[k], this.fd.containerEnvValues?.[k]),
         volume_mounts: getVolumeMounts(this.fd.containerVolumeMountNames?.[k], this.fd.containerVolumeMountPaths?.[k]),
       }
+      if (credentialId) {
+        spec.image_credential_id = credentialId
+      }
+      return spec
     })
 
     return {

containers/K8S/locales/en.json

@@ -431,6 +431,13 @@
   "k8s.repo": "warehouse",
   "k8s.repo.url": "Warehouse address",
   "k8s.repo.url.extra": "The address must have a suffix, indicating the namespace in the corresponding image warehouse, for example: http|https://ip:port/repo",
+  "k8s.repo.type.common": "Docker Open Source Image Registry",
+  "k8s.repo.type.custom": "Other Image Registry",
+  "k8s.repo.url.extra.custom": "Third-party image registry address, e.g. Alibaba Cloud: https://registry.cn-beijing.aliyuncs.com/yunion",
+  "k8s.repo.credential": "Credential",
+  "k8s.repo.credential.bindled": "Bindled",
+  "k8s.repo.credential.none": "None",
+  "k8s.repo.image.custom.placeholder": "Enter image address, e.g. nginx:latest",
   "k8s.repo.image.name": "Image name",
   "k8s.repo.image.tag": "Image version",
   "k8s.repo.image.tag_empty": "No image version yet",

containers/K8S/locales/ja-JP.json

@@ -431,6 +431,13 @@
   "k8s.repo": "倉庫",
   "k8s.repo.url": "倉庫住所",
   "k8s.repo.url.extra": "アドレスには、対応するイメージ リポジトリ内の名前空間を示すサフィックスが必要です (例: http|https://ip:port/repo",
+  "k8s.repo.type.common": "Dockerオープンソースイメージレジストリ",
+  "k8s.repo.type.custom": "その他のイメージレジストリ",
+  "k8s.repo.url.extra.custom": "サードパーティのイメージレジストリアドレス、例えばAlibaba Cloud: https://registry.cn-beijing.aliyuncs.com/yunion",
+  "k8s.repo.credential": "認証情報",
+  "k8s.repo.credential.bindled": "バインド済み",
+  "k8s.repo.credential.none": "なし",
+  "k8s.repo.image.custom.placeholder": "イメージアドレスを入力してください、例: nginx:latest",
   "k8s.repo.image.name": "イメージ名",
   "k8s.repo.image.tag": "イメージ バージョン",
   "k8s.repo.image.tag_empty": "イメージ バージョンはありません",

containers/K8S/locales/zh-CN.json

@@ -431,6 +431,13 @@
   "k8s.repo": "仓库",
   "k8s.repo.url": "仓库地址",
   "k8s.repo.url.extra": "地址必须要有后缀，表示对应镜像仓库里面的namespace，例如: http|https://ip:port/repo",
+  "k8s.repo.type.common": "Docker开源镜像仓库",
+  "k8s.repo.type.custom": "其它镜像仓库",
+  "k8s.repo.url.extra.custom": "第三方镜像仓库地址，例如阿里云镜像仓库: https://registry.cn-beijing.aliyuncs.com/yunion",
+  "k8s.repo.credential": "凭证",
+  "k8s.repo.credential.bindled": "已绑定",
+  "k8s.repo.credential.none": "无",
+  "k8s.repo.image.custom.placeholder": "请输入镜像地址，例如: nginx:latest",
   "k8s.repo.image.name": "镜像名称",
   "k8s.repo.image.tag": "镜像版本",
   "k8s.repo.image.tag_empty": "暂无镜像版本",