From ab4394c0229444ed806ff618b18a32965ca03063 Mon Sep 17 00:00:00 2001 From: Ritchie Vincent Date: Thu, 9 Jan 2020 12:02:49 +0000 Subject: [PATCH] Improve styling of infoCard section Signed-off-by: Rohit Yadav --- ui/src/components/view/InfoCard.vue | 601 +++++++++++++++++----------- 1 file changed, 377 insertions(+), 224 deletions(-) diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue index 82af5cf19a3..bc82fd14c9a 100644 --- a/ui/src/components/view/InfoCard.vue +++ b/ui/src/components/view/InfoCard.vue @@ -20,18 +20,21 @@
-
- - - +
+
+ + + + +
+ +

+ {{ resource.displayname || resource.name }} +

-
- -

- {{ resource.displayname || resource.name }} - -

+ +
{{ resource.instancename }} @@ -50,162 +53,202 @@ {{ $t('isdynamicallyscalable') }} - - - + +
+ +
+ + + +
+
Status
+
+ + {{ resource.state || resource.status }}
-
- - {{ resource.state || resource.status }} -
- - - - - - - {{ resource.id }} +
ID
+
+ + + + + + + {{ resource.id }} +
- - {{ resource.ostypename }} +
OS
+
+ + {{ resource.ostypename }} +
- - {{ resource.cpunumber }} CPU x {{ parseFloat(resource.cpuspeed / 1000.0).toFixed(2) }} Ghz - {{ resource.cputotal }} - - {{ $t('cpuusedghz') }} - CPU
+
+ + {{ resource.cpunumber }} CPU x {{ parseFloat(resource.cpuspeed / 1000.0).toFixed(2) }} Ghz + {{ resource.cputotal }} + - - - {{ $t('cpuallocatedghz') }} - - + style="display: flex; padding-left: 25px"> + {{ $t('cpuusedghz') }} + + + + {{ $t('cpuallocatedghz') }} + + +
- {{ resource.memory }} MB Memory - - {{ $t('memoryusedgb') }} - - +
Memory
+
+ {{ resource.memory }} MB Memory + + {{ $t('memoryusedgb') }} + + +
- {{ resource.memorytotalgb }} Memory - - {{ $t('memoryusedgb') }} - - - - {{ $t('memoryallocatedgb') }} - - +
Memory
+
+ {{ resource.memorytotalgb }} Memory + + {{ $t('memoryusedgb') }} + + + + {{ $t('memoryallocatedgb') }} + + +
- {{ resource.memorytotal }} Memory - - {{ $t('memoryused') }} - - - - {{ $t('memoryallocatedgb') }} - - +
Memory
+
+ {{ resource.memorytotal }} Memory + + {{ $t('memoryused') }} + + + + {{ $t('memoryallocatedgb') }} + + +
- - {{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage - {{ resource.sizegb }} -
- Read {{ toSize(resource.diskkbsread) }} - Write {{ toSize(resource.diskkbswrite) }}
- Read (IO) {{ resource.diskioread }} - Write (IO) {{ resource.diskiowrite }} +
Disk Size
+
+ + {{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage + {{ resource.sizegb }} +
+ Read {{ toSize(resource.diskkbsread) }} + Write {{ toSize(resource.diskkbswrite) }}
+ Read (IO) {{ resource.diskioread }} + Write (IO) {{ resource.diskiowrite }} +
- {{ resource.disksizetotalgb }} - - {{ $t('disksizeusedgb') }} - - - - {{ $t('disksizeallocatedgb') }} - - +
Disk Size
+
+ {{ resource.disksizetotalgb }} + + {{ $t('disksizeusedgb') }} + + + + {{ $t('disksizeallocatedgb') }} + + +
- - - RX {{ toSize(resource.networkkbsread) }} - TX {{ toSize(resource.networkkbswrite) }} - - {{ resource.nic.length }} NIC(s) - -
- eth{{ index }} {{ eth.ipaddress }} - ({{ eth.networkname }}) +
Network
+
+ +
+
+ RX {{ toSize(resource.networkkbsread) }} + TX {{ toSize(resource.networkkbswrite) }} +
+
{{ resource.nic.length }} NIC(s)
+
+ eth{{ index }} {{ eth.ipaddress }} + ({{ eth.networkname }}) +
+
- - {{ resource.nic.filter(e => { return e.ipaddress }).map(e => { return e.ipaddress }).join(', ') }} - {{ resource.ipaddress }} +
IP
+
+ + {{ resource.nic.filter(e => { return e.ipaddress }).map(e => { return e.ipaddress }).join(', ') }} + {{ resource.ipaddress }} +
@@ -214,102 +257,167 @@
- - {{ resource.group || resource.groupid }} +
Group
+
+ + {{ resource.group || resource.groupid }} +
- - {{ resource.keypair }} +
Key Pair
+
+ + {{ resource.keypair }} +
-
- - {{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} - +
VM
+
+ + {{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} + +
- - {{ resource.volumename || resource.volume || resource.volumeid }} +
Volume
+
+ + {{ resource.volumename || resource.volume || resource.volumeid }} +
- - {{ resource.associatednetworkname || resource.associatednetworkid }} +
Associated Network
+
+ + {{ resource.associatednetworkname || resource.associatednetworkid }} +
- - {{ resource.guestnetworkname || resource.guestnetworkid }} +
Guest Network
+
+ + {{ resource.guestnetworkname || resource.guestnetworkid }} +
- - {{ resource.vpcname || resource.vpcid }} +
VPC
+
+ + {{ resource.vpcname || resource.vpcid }} +
- - {{ resource.serviceofferingname || resource.serviceofferingid }} +
Service Offering
+
+ + {{ resource.serviceofferingname || resource.serviceofferingid }} +
- - {{ resource.templatename || resource.templateid }} +
Template
+
+ + {{ resource.templatename || resource.templateid }} +
- - {{ resource.diskofferingname || resource.diskofferingid }} +
Disk Offering
+
+ + {{ resource.diskofferingname || resource.diskofferingid }} +
- - {{ resource.networkofferingname || resource.networkofferingid }} +
Network Offering
+
+ + {{ resource.networkofferingname || resource.networkofferingid }} +
- - {{ resource.vpcofferingname || resource.vpcofferingid }} +
VPC Offering
+
+ + {{ resource.vpcofferingname || resource.vpcofferingid }} +
- - {{ resource.storage || resource.storageid }} - - {{ resource.storagetype }} - +
Storage
+
+ + {{ resource.storage || resource.storageid }} + + {{ resource.storagetype }} + +
- - {{ resource.hostname || resource.hostid }} +
Host
+
+ + {{ resource.hostname || resource.hostid }} +
- - {{ resource.clustername || resource.cluster || resource.clusterid }} +
Cluster
+
+ + {{ resource.clustername || resource.cluster || resource.clusterid }} +
- - {{ resource.podname || resource.pod || resource.podid }} +
Pod
+
+ + {{ resource.podname || resource.pod || resource.podid }} +
- - {{ resource.zonename || resource.zoneid }} +
Zone
+
+ + {{ resource.zonename || resource.zoneid }} +
- - {{ resource.account }} +
Account
+
+ + {{ resource.account }} +
- - {{ resource.rolename || resource.role || resource.roleid }} +
Role
+
+ + {{ resource.rolename || resource.role || resource.roleid }} +
- - {{ resource.domain || resource.domainid }} +
Domain
+
+ + {{ resource.domain || resource.domainid }} +
- - {{ resource.managementserver || resource.managementserverid }} +
Management Server
+
+ + {{ resource.managementserver || resource.managementserverid }} +
-
- {{ resource.created }} +
Created
+
+ {{ resource.created }} +