infra: Vmware section in zone details tab (#127)

Fixes vmware section in zone details tab

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
Co-authored-by: Rohit Yadav <rohit@apache.org>
diff --git a/src/components/view/DedicateData.vue b/src/components/view/DedicateData.vue
index 63954b1..2d6e3a7 100644
--- a/src/components/view/DedicateData.vue
+++ b/src/components/view/DedicateData.vue
@@ -16,36 +16,32 @@
 // under the License.
 
 <template>
-  <div>
+  <a-list-item v-if="dedicatedDomainId">
     <div>
-      <a-list-item v-if="dedicatedDomainId">
-        <div>
-          <div style="margin-bottom: 10px;">
-            <strong>{{ $t('dedicated') }}</strong>
-            <div>Yes</div>
-          </div>
-          <p>
-            <strong>{{ $t('domainid') }}</strong><br/>
-            <router-link :to="{ path: '/domain/' + dedicatedDomainId }">{{ dedicatedDomainId }}</router-link>
-          </p>
-          <p v-if="dedicatedAccountId">
-            <strong>{{ $t('account') }}</strong><br/>
-            <router-link :to="{ path: '/account/' + dedicatedAccountId }">{{ dedicatedAccountId }}</router-link>
-          </p>
-          <a-button style="margin-top: 10px;" type="danger" @click="handleRelease">
-            {{ releaseButtonLabel }}
-          </a-button>
-        </div>
-      </a-list-item>
-      <a-list-item v-else>
-        <div>
-          <strong>{{ $t('dedicated') }}</strong>
-          <div>No</div>
-          <a-button type="primary" style="margin-top: 10px;" @click="modalActive = true">
-            {{ dedicatedButtonLabel }}
-          </a-button>
-        </div>
-      </a-list-item>
+      <div style="margin-bottom: 10px;">
+        <strong>{{ $t('dedicated') }}</strong>
+        <div>Yes</div>
+      </div>
+      <p>
+        <strong>{{ $t('domainid') }}</strong><br/>
+        <router-link :to="{ path: '/domain/' + dedicatedDomainId }">{{ dedicatedDomainId }}</router-link>
+      </p>
+      <p v-if="dedicatedAccountId">
+        <strong>{{ $t('account') }}</strong><br/>
+        <router-link :to="{ path: '/account/' + dedicatedAccountId }">{{ dedicatedAccountId }}</router-link>
+      </p>
+      <a-button style="margin-top: 10px; margin-bottom: 10px;" type="danger" @click="handleRelease">
+        {{ releaseButtonLabel }}
+      </a-button>
+    </div>
+  </a-list-item>
+  <a-list-item v-else>
+    <div>
+      <strong>{{ $t('dedicated') }}</strong>
+      <div>No</div>
+      <a-button type="primary" style="margin-top: 10px; margin-bottom: 10px;" @click="modalActive = true">
+        {{ dedicatedButtonLabel }}
+      </a-button>
     </div>
     <DedicateModal
       :resource="resource"
@@ -53,7 +49,7 @@
       :label="dedicatedModalLabel"
       @close="modalActive = false"
       :fetchData="fetchData" />
-  </div>
+  </a-list-item>
 </template>
 
 <script>
diff --git a/src/components/view/DetailsTab.vue b/src/components/view/DetailsTab.vue
index a6569e3..118a563 100644
--- a/src/components/view/DetailsTab.vue
+++ b/src/components/view/DetailsTab.vue
@@ -29,17 +29,19 @@
       </div>
     </a-list-item>
     <DedicateData :resource="resource" v-if="dedicatedSectionActive" />
+    <VmwareData :resource="resource" v-if="$route.meta.name === 'zone'" />
   </a-list>
 </template>
 
 <script>
-
 import DedicateData from './DedicateData'
+import VmwareData from './VmwareData'
 
 export default {
   name: 'DetailsTab',
   components: {
-    DedicateData
+    DedicateData,
+    VmwareData
   },
   props: {
     resource: {
diff --git a/src/components/view/VmwareData.vue b/src/components/view/VmwareData.vue
new file mode 100644
index 0000000..d483e99
--- /dev/null
+++ b/src/components/view/VmwareData.vue
@@ -0,0 +1,82 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-list-item v-if="vmwaredc">
+    <div>
+      <div style="margin-bottom: 10px;">
+        <div><strong>{{ $t('vmwaredcName') }}</strong></div>
+        <div>{{ vmwaredc.name }}</div>
+      </div>
+      <div style="margin-bottom: 10px;">
+        <div><strong>{{ $t('vmwaredcVcenter') }}</strong></div>
+        <div>{{ vmwaredc.vcenter }}</div>
+      </div>
+      <div style="margin-bottom: 10px;">
+        <div><strong>{{ $t('vmwaredcId') }}</strong></div>
+        <div>{{ vmwaredc.id }}</div>
+      </div>
+    </div>
+  </a-list-item>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      vmwaredc: null
+    }
+  },
+  watch: {
+    resource (newItem, oldItem) {
+      if (this.resource && this.resource.id && newItem && newItem.id !== oldItem.id) {
+        this.fetchData()
+      }
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      if (!this.resource.id) return
+      this.$set(this.resource, 'vmwaredc', null)
+      api('listVmwareDcs', {
+        zoneid: this.resource.id
+      }).then(response => {
+        if (response.listvmwaredcsresponse.VMwareDC && response.listvmwaredcsresponse.VMwareDC.length > 0) {
+          this.vmwaredc = response.listvmwaredcsresponse.VMwareDC[0]
+        }
+        this.$set(this.resource, 'vmwaredc', this.vmwaredc)
+      }).catch(error => {
+        this.$notification.error({
+          message: `Error ${error.response.status}`,
+          description: error.response.data.errorresponse.errortext
+        })
+      })
+    }
+  }
+}
+</script>
diff --git a/src/config/section/infra/zones.js b/src/config/section/infra/zones.js
index 5af8f08..347c654 100644
--- a/src/config/section/infra/zones.js
+++ b/src/config/section/infra/zones.js
@@ -171,7 +171,7 @@
       icon: 'block',
       label: 'label.add.vmware.datacenter',
       dataView: true,
-      show: (record) => { return !record.vmwaredcid },
+      show: record => !record.vmwaredc,
       args: ['zoneid', 'name', 'vcenter', 'username', 'password'],
       mapping: {
         zoneid: {
@@ -184,7 +184,7 @@
       icon: 'block',
       label: 'label.update.vmware.datacenter',
       dataView: true,
-      show: (record) => { return record.vmwaredcid },
+      show: record => record.vmwaredc,
       args: ['zoneid', 'name', 'vcenter', 'username', 'password'],
       mapping: {
         zoneid: {
@@ -197,7 +197,7 @@
       icon: 'minus-square',
       label: 'label.remove.vmware.datacenter',
       dataView: true,
-      show: (record) => { return record.vmwaredcid },
+      show: record => record.vmwaredc,
       args: ['zoneid'],
       mapping: {
         zoneid: {
diff --git a/src/locales/en.json b/src/locales/en.json
index 3abbbd9..1f91a37 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -621,7 +621,7 @@
 "label.remove.ssh.key.pair": "Remove SSH Key Pair",
 "label.remove.tier": "Remove tier",
 "label.remove.vm.load.balancer": "Remove VM from load balancer",
-"label.remove.vmware.datacenter": "Remove VMware datacenter",
+"label.remove.vmware.datacenter": "Remove VMware Datacenter",
 "label.remove.vpc": "Remove VPC",
 "label.remove.vpc.offering": "Remove VPC offering",
 "label.routing.host":"Routing Host",
@@ -643,7 +643,7 @@
 "label.storage":"Storage",
 "label.suspend.project": "Suspend Project",
 "label.uk.keyboard": "UK keyboard",
-"label.update.vmware.datacenter": "Update VMware datacenter",
+"label.update.vmware.datacenter": "Update VMware Datacenter",
 "label.upgrade.router.newer.template": "Upgrade Router to Use Newer Template",
 "label.upload": "Upload",
 "label.upload.from.local": "Upload from Local",
@@ -984,7 +984,7 @@
 "vSwitchPublicName": "Public Traffic vSwitch Name",
 "vSwitchPublicType": "Public Traffic vSwitch Type",
 "value": "Value",
-"vcenter": "VMware datacenter vcenter",
+"vcenter": "VMware Datacenter vCenter",
 "vcenterHost": "ESX/ESXi Host",
 "vcsdeviceid": "ID",
 "version": "Version",
@@ -1007,9 +1007,9 @@
 "vmname": "VM Name",
 "vmstate": "VM state",
 "vmtotal": "Total of VMs",
-"vmwaredcId": "VMware datacenter ID",
-"vmwaredcName": "VMware datacenter Name",
-"vmwaredcVcenter": "VMware datacenter vcenter",
+"vmwaredcId": "VMware Datacenter ID",
+"vmwaredcName": "VMware Datacenter Name",
+"vmwaredcVcenter": "VMware Datacenter vCenter",
 "vmwarenetworklabel": "VMware traffic label",
 "volume": "Volume",
 "volumeChecksum": "MD5 checksum",