ui: Moves fetchdata() to the created() (#4811)

This PR to move fetchData() to created() insteadof mount()
2025-11-03 04:12:31 +01:00 · 2021-04-05 15:58:00 +07:00 · 2021-04-05 15:58:00 +07:00 · 4dcd9a2329
commit 4dcd9a2329
parent 43257f8300
113 changed files with 161 additions and 214 deletions
--- a/ui/src/components/header/ProjectMenu.vue
+++ b/ui/src/components/header/ProjectMenu.vue
@ -58,7 +58,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/components/header/SamlDomainSwitcher.vue
+++ b/ui/src/components/header/SamlDomainSwitcher.vue
@ -57,7 +57,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/components/view/DedicateDomain.vue
+++ b/ui/src/components/view/DedicateDomain.vue
@ -64,7 +64,7 @@ export default {
      this.domainError = this.error
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@ -150,7 +150,7 @@ export default {
      this.updateResource(newItem)
    }
  },
-  mounted () {
+  created () {
    this.updateResource(this.resource)
  },
  methods: {
--- a/ui/src/components/view/ListResourceTable.vue
+++ b/ui/src/components/view/ListResourceTable.vue
@ -143,7 +143,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/components/view/ResourceLimitTab.vue
+++ b/ui/src/components/view/ResourceLimitTab.vue
@ -73,7 +73,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@ -120,7 +120,7 @@ export default {
        this.scopeKey = ''
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@ -424,8 +424,7 @@ export default {
    eventBus.$on('exec-action', (action, isGroupAction) => {
      this.execAction(action, isGroupAction)
    })
-  },
-  mounted () {
+
    if (this.device === 'desktop') {
      this.pageSize = 20
    }
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@ -134,8 +134,6 @@ export default {
    }
  },
  created () {
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@ -119,7 +119,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@ -64,7 +64,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/BackupScheduleWizard.vue
+++ b/ui/src/views/compute/BackupScheduleWizard.vue
@ -63,7 +63,7 @@ export default {
      closeSchedule: this.closeAction
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/ChangeAffinity.vue
+++ b/ui/src/views/compute/ChangeAffinity.vue
@ -99,7 +99,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    for (const group of this.resource.affinitygroup) {
      this.selectedRowKeys.push(group.id)
    }
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@ -361,8 +361,6 @@ export default {
        name: ''
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/CreateSSHKeyPair.vue
+++ b/ui/src/views/compute/CreateSSHKeyPair.vue
@ -113,8 +113,6 @@ export default {
        name: ''
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@ -109,7 +109,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@ -1109,8 +1109,7 @@ export default {
    this.form.getFieldDecorator('cpunumber', { initialValue: undefined, preserve: true })
    this.form.getFieldDecorator('cpuSpeed', { initialValue: undefined, preserve: true })
    this.form.getFieldDecorator('memory', { initialValue: undefined, preserve: true })
-  },
-  mounted () {
+
    this.dataPreFill = this.preFillContent && Object.keys(this.preFillContent).length > 0 ? this.preFillContent : {}
    this.fetchData()
  },
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@ -88,7 +88,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/KubernetesServiceTab.vue
+++ b/ui/src/views/compute/KubernetesServiceTab.vue
@ -203,6 +203,7 @@ export default {
    if (!this.isAdmin()) {
      this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'instancename')
    }
+    this.handleFetchData()
  },
  watch: {
    resource (newData, oldData) {
@ -220,7 +221,6 @@ export default {
    }
  },
  mounted () {
-    this.handleFetchData()
    this.setCurrentTab()
  },
  methods: {
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@ -132,7 +132,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@ -110,8 +110,6 @@ export default {
  },
  created () {
    this.originalSize = !this.isObjectEmpty(this.resource) ? this.resource.size : 1
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/compute/ScaleVM.vue
+++ b/ui/src/views/compute/ScaleVM.vue
@ -84,7 +84,7 @@ export default {
      memoryKey: 'details[0].memory'
    }
  },
-  mounted () {
+  created () {
    this.fetchData({
      keyword: '',
      pageSize: 10,
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@ -149,7 +149,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    if (this.$store.getters.userInfo.roletype === 'Admin') {
      this.fetchPods()
      this.fetchClusters()
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@ -90,8 +90,6 @@ export default {
    })
  },
  created () {
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/dashboard/CapacityDashboard.vue
+++ b/ui/src/views/dashboard/CapacityDashboard.vue
@ -153,7 +153,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
@ -163,11 +163,6 @@ export default {
      }
    }
  },
-  created () {
-    setTimeout(() => {
-      // to do after initial timeout
-    }, 1000)
-  },
  methods: {
    getStatus (value) {
      if (value > 85) {
--- a/ui/src/views/dashboard/Dashboard.vue
+++ b/ui/src/views/dashboard/Dashboard.vue
@ -55,8 +55,10 @@ export default {
      showOnboarding: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
+  },
+  mounted () {
    this.showCapacityDashboard = Object.prototype.hasOwnProperty.call(store.getters.apis, 'listCapacity')
    this.project = false
    if (store.getters.project && store.getters.project.id) {
--- a/ui/src/views/dashboard/UsageDashboard.vue
+++ b/ui/src/views/dashboard/UsageDashboard.vue
@ -131,7 +131,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.project = store.getters.project
    this.fetchData()
    this.$store.watch(
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@ -257,7 +257,7 @@ export default {
      })
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@ -234,8 +234,6 @@ export default {
      }
    ]
    this.selectedFilter = this.filters[0].id
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@ -229,8 +229,6 @@ export default {
    this.apiConfig.params.forEach(param => {
      this.apiParams[param.name] = param
    })
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/ConfigureSamlSsoAuth.vue
+++ b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
@ -66,7 +66,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@ -132,7 +132,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchRoles()
  },
  beforeCreate () {
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@ -165,8 +165,6 @@ export default {
        break
      }
    }
-  },
-  mounted () {
    if (this.action.dataView && this.action.icon === 'edit') {
      this.fillEditFormFieldValues()
    }
--- a/ui/src/views/iam/DomainView.vue
+++ b/ui/src/views/iam/DomainView.vue
@ -125,15 +125,15 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
-    this.fetchData()
-  },
  beforeRouteUpdate (to, from, next) {
    next()
  },
  beforeRouteLeave (to, from, next) {
    next()
  },
+  created () {
+    this.fetchData()
+  },
  watch: {
    '$route' (to, from) {
      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@ -137,7 +137,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/iam/RolePermissionTab.vue
+++ b/ui/src/views/iam/RolePermissionTab.vue
@ -144,7 +144,7 @@ export default {
      apis: []
    }
  },
-  mounted () {
+  created () {
    this.apis = Object.keys(this.$store.getters.apis).sort((a, b) => a.localeCompare(b))
    this.fetchData()
  },
--- a/ui/src/views/iam/SSLCertificateTab.vue
+++ b/ui/src/views/iam/SSLCertificateTab.vue
@ -140,8 +140,6 @@ export default {
      }
    ]
    this.detailColumn = ['name', 'certificate', 'certchain']
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@ -190,8 +190,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@ -191,8 +191,6 @@ export default {
      (userInfo.account !== this.resource.account || userInfo.domain !== this.resource.domain)) {
      this.columns = this.columns.filter(col => { return col.dataIndex !== 'status' })
    }
-  },
-  mounted () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@ -411,8 +411,6 @@ export default {
    this.$set(this.format, 'opts', [])
    this.$set(this.osTypes, 'loading', false)
    this.$set(this.osTypes, 'opts', [])
-  },
-  mounted () {
    this.fetchData()
  },
  computed: {
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@ -204,8 +204,6 @@ export default {
      (userInfo.account !== this.resource.account || userInfo.domain !== this.resource.domain)) {
      this.columns = this.columns.filter(col => { return col.dataIndex !== 'status' })
    }
-  },
-  mounted () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/UpdateKubernetesSupportedVersion.vue
@ -88,8 +88,6 @@ export default {
        name: this.$t('state.disabled')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/image/UpdateTemplateIsoPermissions.vue
+++ b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
@ -145,7 +145,7 @@ export default {
        ) : this.projects
    }
  },
-  mounted () {
+  created () {
    this.isImageTypeIso = this.$route.meta.name === 'iso'
    this.fetchData()
  },
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@ -343,7 +343,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@ -181,7 +181,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@ -150,7 +150,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/CpuSockets.vue
+++ b/ui/src/views/infra/CpuSockets.vue
@ -73,7 +73,7 @@ export default {
      columns: []
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@ -171,7 +171,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/HostInfo.vue
+++ b/ui/src/views/infra/HostInfo.vue
@ -125,7 +125,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@ -221,7 +221,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@ -99,7 +99,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchImageStores()
  },
  methods: {
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@ -147,7 +147,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/Resources.vue
+++ b/ui/src/views/infra/Resources.vue
@ -61,7 +61,7 @@ export default {
      resourcesList: []
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@ -184,7 +184,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@ -145,7 +145,7 @@ export default {
    }
  },
  inject: ['parentFetchData'],
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/infra/network/IpRangesTab.vue
+++ b/ui/src/views/infra/network/IpRangesTab.vue
@ -40,7 +40,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/IpRangesTabGuest.vue
+++ b/ui/src/views/infra/network/IpRangesTabGuest.vue
@ -129,7 +129,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@ -192,7 +192,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@ -271,7 +271,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@ -180,7 +180,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@ -35,7 +35,8 @@
            :itemNsp="item"
            :nsp="nsps[item.title]"
            :resourceId="resource.id"
-            :zoneId="resource.zoneid"/>
+            :zoneId="resource.zoneid"
+            :tabKey="tabKey"/>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
@ -1107,7 +1108,7 @@ export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
@ -1128,6 +1129,9 @@ export default {
  },
  methods: {
    fetchData () {
+      if (!this.resource || !('id' in this.resource)) {
+        return
+      }
      this.fetchServiceProvider()
    },
    fetchServiceProvider (name) {
--- a/ui/src/views/infra/network/TrafficTypesTab.vue
+++ b/ui/src/views/infra/network/TrafficTypesTab.vue
@ -89,7 +89,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    if (this.resource.id) {
      this.fetchData()
    }
--- a/ui/src/views/infra/network/providers/ProviderItem.vue
+++ b/ui/src/views/infra/network/providers/ProviderItem.vue
@ -103,45 +103,38 @@ export default {
  },
  inject: ['provideSetNsp', 'provideExecuteAction'],
  watch: {
-    loading (newValue, oldValue) {
-      if (newValue !== oldValue && !newValue) {
-        this.fetchData()
-      }
-    },
-    nsp (newData, oldData) {
-      if (newData && Object.keys(newData).length > 0) {
-        this.nsp = newData
-        this.resource = this.nsp
-        this.$set(this.resource, 'zoneid', this.zoneId)
-        this.provideSetNsp(this.resource)
-        this.fetchData()
-      }
-    }
-  },
-  mounted () {
-    if (!this.nsp || Object.keys(this.nsp).length === 0) {
-      this.resource = {
-        name: this.itemNsp.title,
-        state: 'Disabled',
-        physicalnetworkid: this.resourceId,
-        zoneid: this.zoneId
-      }
-    } else {
-      this.resource = this.nsp
-      this.$set(this.resource, 'zoneid', this.zoneId)
-    }
-    if (this.itemNsp && Object.keys(this.itemNsp).length > 0) {
-      this.provider = this.itemNsp
-      this.provideSetNsp(this.resource)
+    nsp () {
      this.fetchData()
    }
  },
+  created () {
+    if (!this.resourceId || !this.zoneId) {
+      return
+    }
+    this.fetchData()
+  },
  methods: {
    async fetchData () {
-      if (!this.provider.lists || this.provider.lists.length === 0) {
-        return
+      if (!this.nsp || Object.keys(this.nsp).length === 0) {
+        this.resource = {
+          name: this.itemNsp.title,
+          state: 'Disabled',
+          physicalnetworkid: this.resourceId,
+          zoneid: this.zoneId
+        }
+      } else {
+        this.resource = this.nsp
+        this.$set(this.resource, 'zoneid', this.zoneId)
+      }
+      if (this.itemNsp && Object.keys(this.itemNsp).length > 0) {
+        this.provider = this.itemNsp
+        this.provideSetNsp(this.resource)
+
+        if (!this.provider.lists || this.provider.lists.length === 0) {
+          return
+        }
+        this.provider.lists.map(this.fetchOptions)
      }
-      this.provider.lists.map(this.fetchOptions)
    },
    async fetchOptions (args) {
      if (!args || Object.keys(args).length === 0) {
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@ -131,7 +131,7 @@ export default {
      this.updateResource(newItem)
    }
  },
-  mounted () {
+  created () {
    this.updateResource(this.resource)
  },
  methods: {
--- a/ui/src/views/infra/zone/PhysicalNetworksTab.vue
+++ b/ui/src/views/infra/zone/PhysicalNetworksTab.vue
@ -85,7 +85,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/zone/SystemVmsTab.vue
+++ b/ui/src/views/infra/zone/SystemVmsTab.vue
@ -93,7 +93,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/infra/zone/ZoneWizardAddResources.vue
+++ b/ui/src/views/infra/zone/ZoneWizardAddResources.vue
@ -699,7 +699,7 @@ export default {
      options: ['primaryStorageScope', 'primaryStorageProtocol', 'provider']
    }
  },
-  mounted () {
+  created () {
    this.currentStep = this.prefillContent.resourceStep ? this.prefillContent.resourceStep : 0
    if (this.stepChild && this.stepChild !== '') {
      this.currentStep = this.steps.findIndex(item => item.fromKey === this.stepChild)
--- a/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardNetworkSetupStep.vue
@ -369,7 +369,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.physicalNetworks = this.prefillContent.physicalNetworks
    this.steps = this.filteredSteps()
    this.currentStep = this.prefillContent.networkStep ? this.prefillContent.networkStep : 0
--- a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
@ -394,6 +394,8 @@ export default {
        this.$emit('fieldsChanged', changedFields)
      }
    })
+
+    this.fetchData()
  },
  mounted () {
    this.form.setFieldsValue({
@ -414,41 +416,6 @@ export default {
      localstorageenabled: this.localstorageenabled,
      localstorageenabledforsystemvm: this.localstorageenabledforsystemvm
    })
-
-    const cForm = this.form
-    api('listHypervisors', { listAll: true }).then(json => {
-      this.hypervisors = json.listhypervisorsresponse.hypervisor
-      if ('listSimulatorHAStateTransitions' in this.$store.getters.apis) {
-        this.hypervisors.push({ name: 'Simulator' })
-      }
-      cForm.setFieldsValue({
-        hypervisor: this.currentHypervisor
-      })
-    })
-
-    if (!this.isAdvancedZone || this.securityGroupsEnabled) {
-      api('listNetworkOfferings', { state: 'Enabled', guestiptype: 'Shared' }).then(json => {
-        this.networkOfferings = {}
-        json.listnetworkofferingsresponse.networkoffering.forEach(offering => {
-          this.setupNetworkOfferingAdditionalFlags(offering)
-          this.networkOfferings[offering.id] = offering
-        })
-        this.availableNetworkOfferings = this.getAvailableNetworkOfferings(this.currentHypervisor)
-        cForm.setFieldsValue({
-          networkOfferingId: this.currentNetworkOfferingId
-        })
-      })
-    }
-
-    api('listDomains', { listAll: true }).then(json => {
-      this.domains = {}
-      json.listdomainsresponse.domain.forEach(dom => {
-        this.domains[dom.id] = dom
-      })
-      cForm.setFieldsValue({
-        domain: this.domain
-      })
-    })
  },
  computed: {
    isAdvancedZone () {
@ -532,6 +499,42 @@ export default {
    }
  },
  methods: {
+    fetchData () {
+      const cForm = this.form
+      api('listHypervisors', { listAll: true }).then(json => {
+        this.hypervisors = json.listhypervisorsresponse.hypervisor
+        if ('listSimulatorHAStateTransitions' in this.$store.getters.apis) {
+          this.hypervisors.push({ name: 'Simulator' })
+        }
+        cForm.setFieldsValue({
+          hypervisor: this.currentHypervisor
+        })
+      })
+
+      if (!this.isAdvancedZone || this.securityGroupsEnabled) {
+        api('listNetworkOfferings', { state: 'Enabled', guestiptype: 'Shared' }).then(json => {
+          this.networkOfferings = {}
+          json.listnetworkofferingsresponse.networkoffering.forEach(offering => {
+            this.setupNetworkOfferingAdditionalFlags(offering)
+            this.networkOfferings[offering.id] = offering
+          })
+          this.availableNetworkOfferings = this.getAvailableNetworkOfferings(this.currentHypervisor)
+          cForm.setFieldsValue({
+            networkOfferingId: this.currentNetworkOfferingId
+          })
+        })
+      }
+
+      api('listDomains', { listAll: true }).then(json => {
+        this.domains = {}
+        json.listdomainsresponse.domain.forEach(dom => {
+          this.domains[dom.id] = dom
+        })
+        cForm.setFieldsValue({
+          domain: this.domain
+        })
+      })
+    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@ -229,7 +229,7 @@ export default {
      ruleFormMode: 'edit'
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@ -303,8 +303,6 @@ export default {
        name: ' '
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@ -275,8 +275,6 @@ export default {
        name: ' '
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@ -475,8 +475,6 @@ export default {
    })
  },
  created () {
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@ -147,7 +147,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@ -156,7 +156,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  filters: {
--- a/ui/src/views/network/EnableStaticNat.vue
+++ b/ui/src/views/network/EnableStaticNat.vue
@ -155,7 +155,7 @@ export default {
      pageSize: 10
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@ -198,7 +198,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  filters: {
--- a/ui/src/views/network/GuestIpRanges.vue
+++ b/ui/src/views/network/GuestIpRanges.vue
@ -147,7 +147,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@ -256,7 +256,7 @@ export default {
      return val.toUpperCase()
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@ -119,7 +119,7 @@ export default {
      fetchLoading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/network/InternalLBAssignedVmTab.vue
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@ -97,7 +97,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@ -189,7 +189,7 @@ export default {
      listPublicIpAddress: []
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@ -521,7 +521,7 @@ export default {
      searchQuery: null
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@ -367,7 +367,7 @@ export default {
      searchQuery: null
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/PublicIpResource.vue
+++ b/ui/src/views/network/PublicIpResource.vue
@ -85,7 +85,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    if ('id' in this.resource) {
      this.fetchData()
    }
--- a/ui/src/views/network/RoutersTab.vue
+++ b/ui/src/views/network/RoutersTab.vue
@ -103,7 +103,7 @@ export default {
      ]
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@ -101,7 +101,7 @@ export default {
      newRoute: null
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@ -408,7 +408,7 @@ export default {
      this.setCurrentTab()
    }
  },
-  mounted () {
+  created () {
    this.handleFetchData()
    this.setCurrentTab()
  },
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@ -373,7 +373,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@ -86,7 +86,7 @@ export default {
    }
  },
  inject: ['parentFetchData', 'parentToggleLoading'],
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@ -819,8 +819,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    if (this.$route.meta.name === 'systemoffering') {
      this.isSystem = true
    }
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@ -484,8 +484,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
    this.isPublic = this.isAdmin()
  },
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@ -525,8 +525,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@ -205,8 +205,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@ -129,7 +129,7 @@ export default {
      this.apiParams[param.name] = param
    })
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  inject: ['parentFetchData'],
--- a/ui/src/views/offering/UpdateOfferingAccess.vue
+++ b/ui/src/views/offering/UpdateOfferingAccess.vue
@ -148,8 +148,6 @@ export default {
        name: this.$t('label.all.zone')
      }
    ]
-  },
-  mounted () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/plugins/CloudianPlugin.vue
+++ b/ui/src/views/plugins/CloudianPlugin.vue
@ -34,7 +34,7 @@ import { api } from '@/api'

 export default {
  name: 'CloudianPlugin',
-  mounted () {
+  created () {
    this.doSso()
  },
  data () {
--- a/ui/src/views/plugins/quota/EmailTemplateDetails.vue
+++ b/ui/src/views/plugins/quota/EmailTemplateDetails.vue
@ -75,7 +75,7 @@ export default {
      loading: false
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/plugins/quota/QuotaBalance.vue
+++ b/ui/src/views/plugins/quota/QuotaBalance.vue
@ -93,7 +93,7 @@ export default {
      }
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  methods: {
--- a/ui/src/views/plugins/quota/QuotaSummaryResource.vue
+++ b/ui/src/views/plugins/quota/QuotaSummaryResource.vue
@ -51,7 +51,7 @@ export default {
      pattern: 'YYYY-MM-DD'
    }
  },
-  mounted () {
+  created () {
    this.fetchData()
  },
  watch: {
--- a/Show More
+++ b/Show More