Merge pull request #270 from facethesunsea/env-image-registry

Environment can select image registry

src/api/index.js

@@ -252,6 +252,10 @@ export function productEnvInfoAPI (projectName, envName) {
   return http.get(`/api/aslan/environment/environments/${envName}?projectName=${projectName}`)
 }
 
+export function updateEnvImageRegistry (projectName, envName, payload) {
+  return http.put(`/api/aslan/environment/environments/${envName}/registry?projectName=${projectName}`, payload)
+}
+
 // Project
 export function getProjectsAPI () {
   return http.get('/api/v1/picket/projects?verbosity=detailed')// verbosity=detailed<brief,minimal>,IgnoreNoVersions,IgnoreNoEnvs
@@ -1098,10 +1102,6 @@ export function exportYamlAPI (projectName, serviceName, envName = '', envType =
   return http.get(`/api/aslan/environment/export/service?serviceName=${serviceName}&envName=${envName}&projectName=${projectName}&envType=${envType}`)
 }
 
-export function getEnvInfoAPI (projectName, envName = '') {
-  return http.get(`/api/aslan/environment/environments/${envName}?projectName=${projectName}`)
-}
-
 export function getServiceInfo (projectName, serviceName, envName = '', envType = '', workLoadType) {
   return http.get(`/api/aslan/environment/environments/${envName}/services/${serviceName}?projectName=${projectName}&envType=${envType}&workLoadType=${workLoadType}`)
 }

src/components/projects/detail_ope/detail.vue

@@ -265,7 +265,7 @@
   </div>
 </template>
 <script>
-import { getProjectInfoAPI, getEnvInfoAPI, queryUserBindingsAPI, deleteProjectAPI, getWorkflowsInProjectAPI, listProductAPI, getServiceTemplatesAPI, getBuildConfigsAPI, downloadDevelopCLIAPI } from '@api'
+import { getProjectInfoAPI, productEnvInfoAPI, queryUserBindingsAPI, deleteProjectAPI, getWorkflowsInProjectAPI, listProductAPI, getServiceTemplatesAPI, getBuildConfigsAPI, downloadDevelopCLIAPI } from '@api'
 import { getProductStatus } from '@utils/word_translate'
 import { wordTranslate } from '@utils/word_translate.js'
 import { whetherOnboarding } from '@utils/onboarding_route'
@@ -295,7 +295,7 @@ export default {
       const projectName = this.projectName
       listProductAPI('', projectName).then((res) => {
         this.envList = res.map(element => {
-          getEnvInfoAPI(projectName, element.name).then((res) => {
+          productEnvInfoAPI(projectName, element.name).then((res) => {
             element.status = res.status
           })
           return element

src/components/projects/env/env_detail/env_detail_comp.vue

@@ -91,6 +91,29 @@
               </div>
             </el-col>
           </el-row>
+          <el-row :gutter="20" v-if="envSource===''||envSource==='spock' || envSource==='helm'">
+            <el-col :span="3">
+              <div class="grid-content">镜像仓库:</div>
+            </el-col>
+            <el-col :span="16" class="image-registry">
+              <div v-if="editImageRegistry === false">
+                <span>{{imageRegistryDesc}}</span>
+                <i class="icon el-icon-edit icon-primary" @click="editImageRegistry = true"></i>
+              </div>
+              <div v-else>
+                <el-select v-model="productInfo.editRegistryID" size="mini">
+                  <el-option
+                    v-for="registry in imageRegistry"
+                    :key="registry.id"
+                    :label="`${registry.reg_addr}/${registry.namespace}`"
+                    :value="registry.id">
+                  </el-option>
+                </el-select>
+                <i class="icon el-icon-circle-close icon-gray" @click="editEnvImageRegistry('cancel')">取消</i>
+                <i class="icon el-icon-circle-check icon-primary" @click="editEnvImageRegistry('update')">保存</i>
+              </div>
+            </el-col>
+          </el-row>
           <el-row :gutter="20">
             <el-col :span="3">
               <div class="grid-content">基本操作:</div>
@@ -514,7 +537,8 @@
 import { getProductStatus, serviceTypeMap } from '@utils/word_translate'
 import {
   envRevisionsAPI, productEnvInfoAPI, productServicesAPI, serviceTemplateAfterRenderAPI, listProductAPI,
-  updateServiceAPI, updateK8sEnvAPI, restartPmServiceAPI, restartServiceOriginAPI, deleteProductEnvAPI, getSingleProjectAPI, getServicePipelineAPI, initSource, rmSource
+  updateServiceAPI, updateK8sEnvAPI, restartPmServiceAPI, restartServiceOriginAPI, deleteProductEnvAPI, getSingleProjectAPI, getServicePipelineAPI, initSource, rmSource,
+  getRegistryWhenBuildAPI, updateEnvImageRegistry
 } from '@api'
 import _ from 'lodash'
 import runWorkflow from './run_workflow.vue'
@@ -597,7 +621,9 @@ export default {
       perPage: 20,
       envTotal: 0,
       scrollGetFlag: true,
-      scrollFinish: false
+      scrollFinish: false,
+      editImageRegistry: false,
+      imageRegistry: []
     }
   },
   computed: {
@@ -652,9 +678,42 @@ export default {
           this.$router.push({ path: `${this.envBasePath}`, query: { envName: newValue } })
         }
       }
+    },
+    imageRegistryDesc () {
+      let findImage = ''
+      let defaultImage = ''
+      const registryId = this.productInfo.registry_id
+      this.imageRegistry.forEach(image => {
+        if (image.id === registryId) {
+          findImage = `${image.reg_addr}/${image.namespace}`
+        } else if (image.is_default) {
+          defaultImage = `${image.reg_addr}/${image.namespace}`
+        }
+      })
+      return findImage || defaultImage
     }
   },
   methods: {
+    async editEnvImageRegistry (flag) {
+      if (flag === 'cancel') {
+        this.productInfo.editRegistryID = this.productInfo.registry_id
+      } else if (flag === 'update') {
+        this.productInfo.registry_id = this.productInfo.editRegistryID
+        if (!this.productInfo.registry_id) {
+          this.$message.error(`不能更新镜像仓库为空`)
+          return
+        }
+        const payload = {
+          registry_id: this.productInfo.registry_id,
+          namespace: this.productInfo.namespace
+        }
+        const res = await updateEnvImageRegistry(this.projectName, this.envName, payload).catch(err => console.log(err))
+        if (res) {
+          this.$message.success(`环境默认镜像仓库更新成功`)
+        }
+      }
+      this.editImageRegistry = false
+    },
     editExternalConfig (product_info) {
       const params = {
         step: 1,
@@ -826,6 +885,10 @@ export default {
       this.serviceLoading = true
       const envInfo = await productEnvInfoAPI(projectName, envName)
       if (envInfo) {
+        if (!envInfo.registry_id) {
+          envInfo.registry_id = ''
+        }
+        envInfo.editRegistryID = envInfo.registry_id
         this.productInfo = envInfo
         this.envLoading = false
         this.recycleDay = envInfo.recycle_day ? envInfo.recycle_day : undefined
@@ -1184,6 +1247,11 @@ export default {
       return hostStrArray[0]
     }
   },
+  created () {
+    getRegistryWhenBuildAPI(this.projectName).then(res => {
+      this.imageRegistry = res
+    })
+  },
   beforeDestroy () {
     this.removeListener()
   },
@@ -1222,4 +1290,19 @@ export default {
 
 <style lang="less">
 @import "~@assets/css/component/env-detail.less";
+
+.image-registry {
+  .icon {
+    margin-left: 3px;
+    cursor: pointer;
+
+    &.icon-primary {
+      color: #409eff;
+    }
+
+    &.icon-gray {
+      color: #9ea3a9;
+    }
+  }
+}
 </style>

src/components/projects/env/inner_env/create_env_detail.vue

@@ -48,19 +48,25 @@
         </el-form-item>
         <el-form-item v-if="$utils.isEmpty(pmServiceMap)" label="集群：" prop="cluster_id">
           <el-select class="select" filterable @change="changeCluster" v-model="projectConfig.cluster_id" size="small" placeholder="请选择集群">
-            <el-option
-              v-for="cluster in allCluster"
-              :key="cluster.id"
-              :label="$utils.showClusterName(cluster)"
-              :value="cluster.id"
-            ></el-option>
+            <el-option v-for="cluster in allCluster" :key="cluster.id" :label="$utils.showClusterName(cluster)" :value="cluster.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item v-if="projectConfig.source==='external'" label="命名空间" prop="namespace">
           <el-select class="select" v-model.trim="projectConfig.namespace" size="small" placeholder="请选择命名空间" allow-create filterable>
             <el-option v-for="(ns,index) in hostingNamespace" :key="index" :label="ns.name" :value="ns.name"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item v-if="$utils.isEmpty(pmServiceMap)" label="镜像仓库" prop="registry_id">
+          <el-select class="select" v-model.trim="projectConfig.registry_id" placeholder="请选择镜像仓库" size="small" @change="getImages">
+            <el-option
+              v-for="registry in imageRegistry"
+              :key="registry.id"
+              :label="`${registry.reg_addr}/${registry.namespace}`"
+              :value="registry.id"
+            ></el-option>
+          </el-select>
+          <div v-if="deployType==='helm'" class="image-secret">imagePullSecret 名称：default</div>
+        </el-form-item>
       </el-form>
 
       <el-card
@@ -169,7 +175,14 @@
                   </div>
                   <i class="el-icon-info"></i>
                 </el-tooltip>
-                <el-select :disabled="rollbackMode" size="small" class="img-select" v-model="quickSelection" placeholder="请选择">
+                <el-select
+                  :disabled="rollbackMode"
+                  size="small"
+                  class="img-select"
+                  v-model="quickSelection"
+                  placeholder="请选择"
+                  @change="quickInitImage"
+                >
                   <el-option label="全容器-智能选择镜像" value="latest"></el-option>
                   <el-option label="全容器-全部默认镜像" value="default"></el-option>
                 </el-select>
@@ -278,7 +291,8 @@ import {
   createProductAPI,
   getSingleProjectAPI,
   getHostListAPI,
-  createHelmEnvAPI
+  createHelmEnvAPI,
+  getRegistryWhenBuildAPI
 } from '@api'
 import bus from '@utils/event_bus'
 import { uniq, cloneDeep } from 'lodash'
@@ -323,7 +337,8 @@ export default {
         vars: [],
         revision: null,
         isPublic: true,
-        roleIds: []
+        roleIds: [],
+        registry_id: ''
       },
       projectInfo: {},
       hostingNamespace: [],
@@ -348,6 +363,13 @@ export default {
         namespace: [
           { required: true, trigger: 'change', message: '请选择命名空间' }
         ],
+        registry_id: [
+          {
+            required: true,
+            trigger: ['change', 'blur'],
+            message: '请选择镜像仓库'
+          }
+        ],
         defaultNamespace: [
           { required: true, trigger: 'change', message: '命名空间不能为空' }
         ],
@@ -388,7 +410,9 @@ export default {
           }
         ]
       },
-      chartNames: []
+      chartNames: [],
+      imageRegistry: [],
+      containerNames: []
     }
   },
 
@@ -581,17 +605,24 @@ export default {
       this.containerMap = containerMap
       this.pmServiceMap = pmServiceMap
       this.helmServiceMap = helmServiceMap
-      imagesAPI(uniq(containerNames)).then(images => {
-        if (images) {
-          for (const image of images) {
-            image.full = `${image.host}/${image.owner}/${image.name}:${image.tag}`
-          }
-          this.imageMap = this.makeMapOfArray(images, 'name')
-          if (!this.rollbackMode) {
-            this.quickSelection = 'latest'
+      this.containerNames = uniq(containerNames)
+      this.getImages()
+    },
+    getImages () {
+      imagesAPI(this.containerNames, this.projectConfig.registry_id || '').then(
+        images => {
+          if (images) {
+            for (const image of images) {
+              image.full = `${image.host}/${image.owner}/${image.name}:${image.tag}`
+            }
+            this.imageMap = this.makeMapOfArray(images, 'name')
+            if (!this.rollbackMode) {
+              this.quickSelection = 'latest'
+              this.quickInitImage()
+            }
           }
         }
-      })
+      )
     },
     makeMapOfArray (arr, namePropName) {
       const map = {}
@@ -781,7 +812,7 @@ export default {
           const envType = 'test'
           this.startDeployLoading = true
           function sleep (time) {
-            return new Promise((resolve) => setTimeout(resolve, time))
+            return new Promise(resolve => setTimeout(resolve, time))
           }
           createProductAPI(payload, envType).then(
             res => {
@@ -819,14 +850,13 @@ export default {
           const payload = {
             envName: this.projectConfig.env_name,
             clusterID: this.projectConfig.cluster_id,
+            registry_id: this.projectConfig.registry_id,
             chartValues: valueInfo.chartInfo,
             defaultValues: valueInfo.envInfo.DEFAULT || '',
             namespace: this.projectConfig.defaultNamespace
           }
           this.startDeployLoading = true
-          createHelmEnvAPI(this.projectConfig.product_name, [
-            payload
-          ]).then(
+          createHelmEnvAPI(this.projectConfig.product_name, [payload]).then(
             res => {
               const envName = payload.envName
               this.startDeployLoading = false
@@ -850,10 +880,9 @@ export default {
     },
     createHost () {
       this.$router('/v1/system/host')
-    }
-  },
-  watch: {
-    quickSelection (select) {
+    },
+    quickInitImage () {
+      const select = this.quickSelection
       for (const group of this.projectConfig.services) {
         for (const ser of group) {
           ser.picked =
@@ -892,12 +921,18 @@ export default {
     })
     this.getVersionList()
     this.projectConfig.product_name = this.projectName
-    this.getTemplateAndImg()
     this.checkProjectFeature()
     this.getCluster()
     getHostListAPI().then(res => {
       this.allHost = res
     })
+    getRegistryWhenBuildAPI(this.projectName).then(res => {
+      this.imageRegistry = res
+      if (!this.projectConfig.registry_id) {
+        this.projectConfig.registry_id = res.find(reg => reg.is_default).id
+      }
+      this.getTemplateAndImg()
+    })
   },
   components: {
     HelmEnvTemplate
@@ -913,6 +948,13 @@ export default {
   overflow: auto;
   font-size: 13px;
 
+  .image-secret {
+    margin-left: 3px;
+    color: #cdcfd4;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
   .helm-yaml-drawer {
     .el-drawer__header {
       margin-bottom: 10px;