From 18c8e0db1c5a983b47a7eb27b67a0fc9272794a2 Mon Sep 17 00:00:00 2001
From: Chris Kacerguis <chriskacerguis@users.noreply.github.com>
Date: Wed, 12 Jul 2017 13:24:07 -0400
Subject: [PATCH] Merge pull request #842 from chalettu/vm-details-bug

BZ 1467569- in the self service portal after a little time displaying a vm, data changes to garbage data
(cherry picked from commit 2604c93bcc7bcf4972c7e20b53c959e6e97728a3)

https://bugzilla.redhat.com/show_bug.cgi?id=1470774
---
 .../detail-reveal/detail-reveal.component.js  |  4 ++
 .../services/detail-reveal/detail-reveal.html |  4 +-
 .../app/services/vm-details/vm-details.html   | 62 +++++++++----------
 3 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/client/app/services/detail-reveal/detail-reveal.component.js b/client/app/services/detail-reveal/detail-reveal.component.js
index ace9822b9..14f9147dd 100644
--- a/client/app/services/detail-reveal/detail-reveal.component.js
+++ b/client/app/services/detail-reveal/detail-reveal.component.js
@@ -10,6 +10,7 @@ export const DetailRevealComponent = {
     icon: '@',
     translateTitle: '<',
     rowClass: '@',
+    displayField: '<?',
   },
   transclude: true,
   templateUrl,
@@ -21,6 +22,9 @@ function ComponentController($transclude) {
   vm.$onInit = activate();
 
   function activate() {
+    if (angular.isUndefined(vm.displayField)) {
+      vm.displayField = true;
+    }
     vm.translateTitle = (angular.isUndefined(vm.translateTitle) ? true : vm.translateTitle);
     vm.detailTitle = (vm.translateTitle === true ? __(vm.detailTitle) : vm.detailTitle);
     vm.rowClass = (angular.isDefined(vm.rowClass) ? vm.rowClass : 'row detail-row');
diff --git a/client/app/services/detail-reveal/detail-reveal.html b/client/app/services/detail-reveal/detail-reveal.html
index 32e81adc5..77da2db61 100644
--- a/client/app/services/detail-reveal/detail-reveal.html
+++ b/client/app/services/detail-reveal/detail-reveal.html
@@ -1,4 +1,4 @@
-<div class="row detail-row" ng-click="vm.hasMoreDetails ? vm.toggleDetails = !vm.toggleDetails:''" ng-class="(vm.hasMoreDetails ? 'details-exist' : '') + ' ' + (vm.toggleDetails ? 'row-active':'') ">
+<div class="row detail-row" ng-click="vm.hasMoreDetails ? vm.toggleDetails = !vm.toggleDetails:''" ng-class="(vm.hasMoreDetails ? 'details-exist' : '') + ' ' + (vm.toggleDetails ? 'row-active':'') " ng-if="vm.displayField">
 	<div class="col-xs-6 col-md-3">
 		<div class="detail-reveal-arrow-container" ng-class="vm.hasMoreDetails ? '' : 'no-details' ">
 			<i class="fa fa-lg detail-reveal-arrow" ng-class="(vm.toggleDetails===true ? 'fa-angle-down' : 'fa-angle-right')"></i>
@@ -18,4 +18,4 @@
 		<div ng-transclude class="detail-content">
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/app/services/vm-details/vm-details.html b/client/app/services/vm-details/vm-details.html
index e862bfcba..025ac2e93 100644
--- a/client/app/services/vm-details/vm-details.html
+++ b/client/app/services/vm-details/vm-details.html
@@ -38,25 +38,25 @@
     <div class="row title">
       <div>{{ 'Properties'|translate }}</div>
     </div>
-    <detail-reveal ng-if="vm.vmDetails.retired" detail-title="Status" icon="pf pficon-warning-triangle-o"
+    <detail-reveal display-field="vm.vmDetails.retired" detail-title="Status" icon="pf pficon-warning-triangle-o"
                    detail="{{ 'Retired' | translate }}"></detail-reveal>
     <detail-reveal detail-title="Name" detail="{{ vm.vmDetails.name }}"></detail-reveal>
     <detail-reveal detail-title="Hostnames" detail="{{ vm.vmDetails.hostnames.join(',') }}"></detail-reveal>
     <detail-reveal detail-title="IP Addresses" detail="{{ vm.vmDetails.ipaddresses.join(',') }}"></detail-reveal>
     <detail-reveal detail-title="MAC Address" detail="{{ vm.vmDetails.mac_addresses.join(',') }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Container" detail="{{ vm.vmDetails.containerSpecsText }}"></detail-reveal>
     <detail-reveal detail-title="Parent Host/Node Platform" detail="{{ vm.vmDetails.host.vmm_product }}"
-                   ng-if="vm.vmDetails.host"></detail-reveal>
+                   display-field="vm.vmDetails.host"></detail-reveal>
     <detail-reveal detail-title="Platform Tools" detail="{{ vm.vmDetails.tools_status }}"></detail-reveal>
     <detail-reveal detail-title="Operating System"
                    detail="{{ vm.vmDetails.hardware.guest_os_full_name }}"></detail-reveal>
     <detail-reveal detail-title="Architecture" detail="{{ vm.vmDetails.hardware.bitness }} bit"
-                   ng-if="vm.vmDetails.hardware.bitness"></detail-reveal>
+                   display-field="vm.vmDetails.hardware.bitness"></detail-reveal>
     <detail-reveal detail-title="Devices" icon="fa fa-hdd-o fa-lg" detail="{{ 3 + vm.vmDetails.num_disks }}"
-                   ng-if="vm.vmDetails.cloud===false"></detail-reveal>
+                   display-field="vm.vmDetails.cloud===false"></detail-reveal>
     <detail-reveal detail-title="CPU Affinity" detail="{{ vm.vmDetails.cpu_affinity }}"
-                   ng-if="vm.vmDetails.cloud===false"></detail-reveal>
+                   display-field="vm.vmDetails.cloud===false"></detail-reveal>
     <detail-reveal detail-title="Snapshots" icon="fa fa-camera fa-lg"
                    detail="{{ vm.vmDetails.v_total_snapshots }}"></detail-reveal>
     <detail-reveal detail-title="Advanced Settings" icon="fa fa-wrench fa-lg"
@@ -64,11 +64,11 @@
     <detail-reveal detail-title="Resources" detail="{{ vm.vmDetails.resourceAvailability }}"></detail-reveal>
     <detail-reveal detail-title="Management Engine GUID" detail="{{ vm.vmDetails.guid }}"></detail-reveal>
     <detail-reveal detail-title="Virtualization" detail="{{ vm.vmDetails.hardware.virtualization_type }}"
-                   ng-if="vm.vmDetails.hardware.virtualization_type"></detail-reveal>
+                   display-field="vm.vmDetails.hardware.virtualization_type"></detail-reveal>
     <detail-reveal detail-title="Root Device Type" detail="{{ vm.vmDetails.hardware.root_device_type }}"
-                   ng-if="vm.vmDetails.hardware.root_device_type"></detail-reveal>
+                   display-field="vm.vmDetails.hardware.root_device_type"></detail-reveal>
     <detail-reveal detail-title="ID within Provider" detail="{{ vm.vmDetails.uid_ems }}"
-                   ng-if="vm.vmDetails.uid_ems"></detail-reveal>
+                   display-field="vm.vmDetails.uid_ems"></detail-reveal>
   </div>
 
   <div class="container-fluid vm-details-container">
@@ -91,51 +91,51 @@
       <div>{{ 'Relationships'|translate }}</div>
     </div>
     <detail-reveal detail-title="Availability Zone" detail="{{ vm.vmDetails.instance.availabilityZone }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Cloud Tenants" detail="{{ vm.vmDetails.instance.cloudTenant }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Flavor" detail="{{ vm.vmDetails.instance.flavor.name }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="VM Template" detail="{{ vm.vmDetails.instance.miq_provision_template.name }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Infrastructure provider" detail="{{ vm.vmDetails.ext_management_system.name }}"
-                   ng-if="vm.vmDetails.ext_management_system.name"></detail-reveal>
+                   display-field="vm.vmDetails.ext_management_system.name"></detail-reveal>
     <detail-reveal detail-title="{{ 'Cluster'|translate }} / {{ 'Deployment Role'|translate }}"
                    icon="fa fa-lg pficon pficon-cluster" detail="{{ vm.vmDetails.ems_cluster.name }}"
-                   ng-if="vm.vmDetails.ems_cluster.name"></detail-reveal>
+                   display-field="vm.vmDetails.ems_cluster.name"></detail-reveal>
     <detail-reveal detail-title="Host / Node" icon="fa fa-lg pficon pficon-screen" detail="{{ vm.vmDetails.host.name }}"
-                   ng-if="vm.vmDetails.host.name"></detail-reveal>
+                   display-field="vm.vmDetails.host.name"></detail-reveal>
     <detail-reveal detail-title="Resource Pool" icon="fa fa-lg pficon pficon-resource-pool"
                    detail="{{ vm.vmDetails.parent_resource_pool.name }}"
-                   ng-if="vm.vmDetails.parent_resource_pool"></detail-reveal>
+                   display-field="vm.vmDetails.parent_resource_pool"></detail-reveal>
     <detail-reveal detail-title="Datastores" icon="fa fa-lg fa-database" detail="{{ vm.vmDetails.storages.length }}"
-                   ng-if="vm.vmDetails.storages.length > 0"></detail-reveal>
+                   display-field="vm.vmDetails.storages.length > 0"></detail-reveal>
     <detail-reveal detail-title="Service" icon="fa fa-lg pficon pficon-service"
                    detail="{{ vm.vmDetails.service.name }}"></detail-reveal>
     <detail-reveal detail-title="Virtual Private Cloud" detail="{{ vm.vmDetails.instance.cloud_networks[0].name }}"
-                   ng-if="vm.vmDetails.instance.cloud_networks.length > 0"></detail-reveal>
+                   display-field="vm.vmDetails.instance.cloud_networks.length > 0"></detail-reveal>
     <detail-reveal detail-title="Cloud Subnet" detail="{{ vm.vmDetails.instance.cloud_subnets[0].name }}"
-                   ng-if="vm.vmDetails.instance.cloud_subnets.length > 0"></detail-reveal>
+                   display-field="vm.vmDetails.instance.cloud_subnets.length > 0"></detail-reveal>
     <detail-reveal detail-title="Stack" detail="{{ vm.vmDetails.instance.orchestrationStack.name }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Cloud Networks" detail="{{ vm.vmDetails.instance.cloud_networks.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Cloud Subnets" detail="{{ vm.vmDetails.instance.cloud_subnets.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Network Routers" detail="{{ vm.vmDetails.instance.network_routers.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Security Groups" detail="{{ vm.vmDetails.security_groups.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Floating IPs" detail="{{ vm.vmDetails.instance.floating_ip_addresses.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Network Ports" detail="{{ vm.vmDetails.instance.network_ports.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Load Balancers" detail="{{ vm.vmDetails.instance.load_balancers.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Cloud Volumes" detail="{{ vm.vmDetails.instance.cloud_volumes.length }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
     <detail-reveal detail-title="Genealogy" detail="{{ 'Show parent and child VMs'|translate }}"
-                   ng-if="vm.vmDetails.cloud===false"></detail-reveal>
+                   display-field="vm.vmDetails.cloud===false"></detail-reveal>
     <detail-reveal detail-title="Drift History" detail="{{ vm.vmDetails.driftHistory }}"></detail-reveal>
     <detail-reveal detail-title="Analysis History" detail="{{ vm.vmDetails.scanHistoryCount }}"></detail-reveal>
   </div>
@@ -167,7 +167,7 @@
     <detail-reveal detail-title="Groups" icon="fa fa-lg pficon pficon-users"
                    detail="{{  vm.vmDetails.groups.length  }}"></detail-reveal>
     <detail-reveal detail-title="Key Pairs" detail="{{  vm.vmDetails.instance.keyPairLabels.join(',')  }}"
-                   ng-if="vm.vmDetails.instance"></detail-reveal>
+                   display-field="vm.vmDetails.instance"></detail-reveal>
   </div>
   <div class="container-fluid vm-details-container">
     <div class="row title">