镜像上架构建资源不展示腾讯内部逻辑

src/frontend/devops-atomstore/src/components/detailInfo.vue

@@ -40,7 +40,7 @@
             <bk-col :span="12" class="g-progress-item">
                 <span class="g-progress-label">{{ $t('store.适用机器') }} :</span>
                 <section class="g-progress-content label-list">
-                    <span class="label-card" v-for="(agent, index) in detail.agentTypeScope" :key="index">{{ agent | agentFilter }}</span>
+                    <span class="label-card" v-for="(agent, index) in filterAgents" :key="index">{{ agent }}</span>
                 </section>
             </bk-col>
         </bk-row>
@@ -123,24 +123,9 @@
 </template>
 
 <script>
+    import { mapActions } from 'vuex'
     export default {
         filters: {
-            agentFilter (value) {
-                const local = window.devops || {}
-                let res = ''
-                switch (value) {
-                    case 'DOCKER':
-                        res = local.$t('store.Devnet 物理机')
-                        break
-                    case 'IDC':
-                        res = 'IDC CVM'
-                        break
-                    case 'PUBLIC_DEVCLOUD':
-                        res = 'DevCloud'
-                        break
-                }
-                return res
-            },
             releaseFilter (value) {
                 const local = window.devops || {}
                 let res = ''
@@ -172,14 +157,35 @@
         data () {
             return {
                 isOverflow: false,
-                isDropdownShow: false
+                isDropdownShow: false,
+                agentTypes: []
+            }
+        },
+        computed: {
+            filterAgents () {
+                const AgentNames = []
+                this.detail.agentTypeScope.forEach(item => {
+                    this.agentTypes.forEach(agent => {
+                        if (item === agent.code) {
+                            AgentNames.push(agent.name)
+                        }
+                    })
+                })
+                return AgentNames
             }
         },
-
         mounted () {
             setTimeout(() => {
                 this.isOverflow = this.$refs.edit.scrollHeight > 180
             }, 1000)
+            this.fetchAgentTypes().then(res => {
+                this.agentTypes = res
+            })
+        },
+        methods: {
+            ...mapActions('store', [
+                'fetchAgentTypes'
+            ])
         }
     }
 </script>

src/frontend/devops-atomstore/src/components/labelList.vue

@@ -1,18 +1,14 @@
 <template>
     <ul class="label-content">
-        <li v-for="(label, index) in labelList" :key="index" class="label-item">{{ label | formatter }}</li>
+        <li v-for="(label, index) in labelList" :key="index" class="label-item">{{ label }}</li>
         <li class="empty-item" v-if="labelList.length <= 0">--</li>
     </ul>
 </template>
 
 <script>
     export default {
         props: {
-            labelList: Array,
-            formatter: {
-                type: Function,
-                default: (val) => val
-            }
+            labelList: Array
         }
     }
 </script>

src/frontend/devops-atomstore/src/components/manage/detail/image-detail/show.vue

@@ -24,7 +24,7 @@
                 </li>
                 <li class="detail-item">
                     <span class="detail-label">{{ $t('store.适用机器') }}：</span>
-                    <label-list :label-list="detail.agentTypeScope" :formatter="agentFilter"></label-list>
+                    <label-list :label-list="filterAgents"></label-list>
                 </li>
                 <li class="detail-item">
                     <span class="detail-label">{{ $t('store.简介') }}：</span>
@@ -83,6 +83,7 @@
 </template>
 
 <script>
+    import { mapActions } from 'vuex'
     import labelList from '../../../labelList'
     import defaultPic from '../../../../images/defaultPic.svg'
 
@@ -119,27 +120,32 @@
 
         data () {
             return {
-                defaultPic
+                defaultPic,
+                agentTypes: []
             }
         },
-
-        methods: {
-            agentFilter (value) {
-                const local = window.devops || {}
-                let res = ''
-                switch (value) {
-                    case 'DOCKER':
-                        res = local.$t('store.Devnet 物理机')
-                        break
-                    case 'IDC':
-                        res = 'IDC CVM'
-                        break
-                    case 'PUBLIC_DEVCLOUD':
-                        res = 'DevCloud'
-                        break
-                }
-                return res
+        computed: {
+            filterAgents () {
+                const agentNames = []
+                this.detail.agentTypeScope.forEach(item => {
+                    this.agentTypes.forEach(agent => {
+                        if (item === agent.code) {
+                            agentNames.push(agent.name)
+                        }
+                    })
+                })
+                return agentNames
             }
+        },
+        mounted () {
+            this.fetchAgentTypes().then(res => {
+                this.agentTypes = res
+            })
+        },
+        methods: {
+            ...mapActions('store', [
+                'fetchAgentTypes'
+            ])
         }
     }
 </script>

src/frontend/devops-atomstore/src/components/transition-tab.vue

@@ -98,13 +98,16 @@
         }
         /deep/ .bk-tab-header {
             background-color: #fff;
-            height: 6.4vh;
-            line-height: 6.4vh;
-            background-image: linear-gradient(transparent 6.3vh,#dcdee5 0);
+            height: 6.4vh !important;
+            line-height: 6.4vh !important;
+            background-image: linear-gradient(transparent 6.3vh !important,#dcdee5 0);
+            .bk-tab-label-wrapper {
+                background-color: #fff;
+            }
             .bk-tab-label-wrapper .bk-tab-label-list {
-                height: 6.4vh;
+                height: 6.4vh !important;
                 .bk-tab-label-item {
-                    line-height: 6.4vh;
+                    line-height: 6.4vh !important;
                     color: #666;
                     &::after {
                         height: 3px;
@@ -118,8 +121,9 @@
                 }
             }
             .bk-tab-header-setting {
-                height: 6.4vh;
-                line-height: 6.4vh;
+                background-color: #fff;
+                height: 6.4vh !important;
+                line-height: 6.4vh !important;
             }
         }
         /deep/ .bk-tab-section {

src/frontend/devops-atomstore/src/store/image.js

@@ -265,6 +265,11 @@ export const actions = {
 
     updateImageMemInfo ({ commit }, res) {
         commit('updateImageMemInfo', res)
+    },
+
+    // 获取适用机器
+    fetchAgentTypes ({ commit }) {
+        return vue.$ajax.get(`${prefix}/user/market/image/agentType/list`)
     }
 }
 

src/frontend/devops-atomstore/src/views/edit_image.vue

@@ -63,10 +63,14 @@
                     v-if="needAgentType"
                     error-display-type="normal"
                 >
-                    <bk-select v-model="form.agentTypeScope" searchable multiple show-select-all>
+                    <bk-select
+                        v-model="form.agentTypeScope"
+                        searchable
+                        multiple
+                        show-select-all>
                         <bk-option v-for="(option, index) in agentTypes"
                             :key="index"
-                            :id="option.id"
+                            :id="option.code"
                             :name="option.name"
                             :placeholder="$t('store.请选择适用机器')"
                         >
@@ -266,11 +270,7 @@
                 classifys: [],
                 labelList: [],
                 categoryList: [],
-                agentTypes: [
-                    { name: this.$t('store.Devnet 物理机'), id: 'DOCKER' },
-                    { name: 'IDC CVM', id: 'IDC' },
-                    { name: 'DevCloud', id: 'PUBLIC_DEVCLOUD' }
-                ],
+                agentTypes: [],
                 imageList: [],
                 imageVersionList: [],
                 isLoading: false,
@@ -333,7 +333,8 @@
                 'requestImageList',
                 'requestImageTagList',
                 'requestTicketList',
-                'requestReleaseImage'
+                'requestReleaseImage',
+                'fetchAgentTypes'
             ]),
 
             changeShowAgentType (option) {
@@ -411,10 +412,12 @@
                         this.requestImageClassifys(),
                         this.requestImageLabel(),
                         this.requestTicketList({ projectCode: res.projectCode }),
-                        this.requestImageCategorys()]).then(([classifys, labels, ticket, categorys]) => {
+                        this.fetchAgentTypes(),
+                        this.requestImageCategorys()]).then(([classifys, labels, ticket, agents, categorys]) => {
                             this.classifys = classifys
                             this.labelList = labels
                             this.categoryList = categorys
+                            this.agentTypes = agents
                             this.ticketList = ticket.records || []
                             const currentCategory = categorys.find((category) => (res.category === category.categoryCode)) || {}
                             const settings = currentCategory.settings || {}

src/frontend/devops-pipeline/src/mixins/pipeline-operate-mixin.js

@@ -530,7 +530,6 @@ export default {
                     data: responses
                 }
             } catch (e) {
-
                 this.handleError(e, [{
                     actionId: this.$permissionActionMap.edit,
                     resourceId: this.$permissionResourceMap.pipeline,