Selected type on update traffic type is based on chosen type in traffic types tab (apache#10902)

Co-authored-by: Nicole Schmidt <[email protected]>

Author: 2 people

ui/src/config/section/infra/phynetworks.js

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent, reactive } from 'vue'
 export default {
   name: 'physicalnetwork',
   title: 'label.physical.network',
@@ -131,3 +131,6 @@ export default {
     }
   ]
 }
+export const trafficTypeTab = reactive({
+  index: 0
+})

ui/src/views/infra/network/EditTrafficLabel.vue

@@ -99,6 +99,7 @@
 import { ref, reactive, toRaw } from 'vue'
 import { getAPI, postAPI } from '@/api'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import { trafficTypeTab } from '@/config/section/infra/phynetworks.js'
 
 export default {
   name: 'EditTrafficLabel',
@@ -150,9 +151,9 @@ export default {
       getAPI('listTrafficTypes', { physicalnetworkid: this.resource.id })
         .then(json => {
           this.trafficTypes = json.listtraffictypesresponse.traffictype || []
-          this.form.id = this.trafficTypes[0].id || undefined
-          this.trafficResource = this.trafficTypes[0] || {}
-          this.traffictype = this.trafficTypes[0].traffictype || undefined
+          this.form.id = this.trafficTypes[trafficTypeTab.index].id || undefined
+          this.trafficResource = this.trafficTypes[trafficTypeTab.index] || {}
+          this.traffictype = this.trafficTypes[trafficTypeTab.index].traffictype || undefined
           this.fillEditFromFieldValues()
         }).catch(error => {
           this.$notification.error({

ui/src/views/infra/network/TrafficTypesTab.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-spin :spinning="fetchLoading">
-    <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false">
+    <a-tabs :tabPosition="device === 'mobile' ? 'top' : 'left'" :animated="false" @tabClick="onClick">
       <a-tab-pane v-for="(item, index) in traffictypes" :tab="item.traffictype" :key="index">
         <a-popconfirm
           :title="$t('message.confirm.delete.traffic.type')"
@@ -84,6 +84,7 @@ import IpRangesTabPublic from './IpRangesTabPublic'
 import IpRangesTabManagement from './IpRangesTabManagement'
 import IpRangesTabStorage from './IpRangesTabStorage'
 import IpRangesTabGuest from './IpRangesTabGuest'
+import { trafficTypeTab } from '@/config/section/infra/phynetworks.js'
 
 export default {
   name: 'TrafficTypesTab',
@@ -221,6 +222,9 @@ export default {
         this.fetchLoading = false
         this.fetchTrafficTypes()
       })
+    },
+    onClick (trafficType) {
+      trafficTypeTab.index = trafficType
     }
   }
 }