apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-02 20:02:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Apply tweaks to layout/design

Browse Source 
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Ritchie Vincent 2020-01-15 10:39:48 +00:00 committed by Rohit Yadav
parent cc4536908a
commit eb6b3b230c
1 changed files with 54 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
ui/src/components/view/InfoCard.vue
View File

@ -63,7 +63,7 @@
<div class="resource-detail-item" v-if="resource.state || resource.status"> <div class="resource-detail-item" v-if="resource.state || resource.status">
<div class="resource-detail-item__label">{{ $t('status') }}</div> <div class="resource-detail-item__label">{{ $t('status') }}</div>
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<status :text="resource.state || resource.status"/> <status class="status" :text="resource.state || resource.status"/>
<span>{{ resource.state || resource.status }}</span> <span>{{ resource.state || resource.status }}</span>
</div> </div>
</div> </div>
@ -78,7 +78,7 @@
<a-icon type="barcode" style="padding-left: 4px; margin-top: 4px"/> <a-icon type="barcode" style="padding-left: 4px; margin-top: 4px"/>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<span style="margin-left: 5px;">{{ resource.id }}</span> <span style="margin-left: 10px;">{{ resource.id }}</span>
</div> </div>
</div> </div>
<div class="resource-detail-item" v-if="resource.ostypename && resource.ostypeid"> <div class="resource-detail-item" v-if="resource.ostypename && resource.ostypeid">
@ -159,40 +159,46 @@
</div> </div>
</div> </div>
<div class="resource-detail-item" v-else-if="resource.memorytotal"> <div class="resource-detail-item" v-else-if="resource.memorytotal">
<div class="resource-detail-item__label">{{ $t('memory') }}</div> <div class="resource-detail-item__label">{{ $t('Memory') }}</div>
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="bulb" />{{ resource.memorytotal }} Memory
<span <div style="display: flex; flex-direction: column; width: 100%;">
v-if="resource.memoryused" <div>
style="display: flex; padding-left: 25px"> <a-icon type="bulb" />{{ resource.memorytotal }} Memory
{{ $t('memoryused') }} </div>
<a-progress <div>
style="padding-left: 10px" <span
size="small" v-if="resource.memoryused">
status="active" <a-progress
:percent="parseFloat(resource.memoryused)" /> class="progress-bar"
</span> size="small"
<span status="active"
v-if="resource.memoryallocated" :percent="parseFloat(resource.memoryused)"
style="display: flex; padding-left: 25px"> :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryused')" />
{{ $t('memoryallocatedgb') }} </span>
<a-progress <span
style="padding-left: 10px" v-if="resource.memoryallocated">
size="small" <a-progress
:percent="parseFloat(resource.memoryallocated)" /> class="progress-bar"
</span> size="small"
:percent="parseFloat(resource.memoryallocated)"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('memoryallocatedgb')" />
</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="resource-detail-item" v-if="resource.volumes || resource.sizegb"> <div class="resource-detail-item" v-if="resource.volumes || resource.sizegb">
<div class="resource-detail-item__label">{{ $t('disksize') }}</div> <div class="resource-detail-item__label">{{ $t('disksize') }}</div>
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="hdd" /> <a-icon type="hdd" />
<span v-if="resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span> <span style="width: 100%;" v-if="resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span>
<span v-else-if="resource.sizegb">{{ resource.sizegb }}</span> <span style="width: 100%;" v-else-if="resource.sizegb">{{ resource.sizegb }}</span>
<div style="margin-left: 25px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite"> <div style="margin-left: 25px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
<a-tag>Read {{ toSize(resource.diskkbsread) }}</a-tag> <a-tag style="margin-bottom: 5px;">Read {{ toSize(resource.diskkbsread) }}</a-tag>
<a-tag>Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/> <a-tag style="margin-bottom: 5px;">Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
<a-tag>Read (IO) {{ resource.diskioread }}</a-tag> <a-tag style="margin-bottom: 5px;">Read (IO) {{ resource.diskioread }}</a-tag>
<a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag> <a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag>
</div> </div>
</div> </div>
@ -206,7 +212,7 @@
style="display: flex; padding-left: 25px"> style="display: flex; padding-left: 25px">
{{ $t('disksizeusedgb') }} {{ $t('disksizeusedgb') }}
<a-progress <a-progress
style="padding-left: 10px" class="progress-bar"
size="small" size="small"
status="active" status="active"
:percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" /> :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" />
@ -216,7 +222,7 @@
style="display: flex; padding-left: 25px"> style="display: flex; padding-left: 25px">
{{ $t('disksizeallocatedgb') }} {{ $t('disksizeallocatedgb') }}
<a-progress <a-progress
style="padding-left: 10px" class="progress-bar"
size="small" size="small"
:percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" /> :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))" />
</span> </span>
@ -276,7 +282,7 @@
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="desktop" /> <a-icon type="desktop" />
<router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} </router-link> <router-link :to="{ path: '/vm/' + resource.virtualmachineid }">{{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} </router-link>
<status style="margin-top: -5px" :text="resource.vmstate" v-if="resource.vmstate"/> <status class="status status--end" :text="resource.vmstate" v-if="resource.vmstate"/>
</div> </div>
</div> </div>
<div class="resource-detail-item" v-if="resource.volumeid"> <div class="resource-detail-item" v-if="resource.volumeid">
@ -347,7 +353,7 @@
<div class="resource-detail-item__details"> <div class="resource-detail-item__details">
<a-icon type="database" /> <a-icon type="database" />
<router-link :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link> <router-link :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link>
<a-tag v-if="resource.storagetype"> <a-tag style="margin-left: 5px;" v-if="resource.storagetype">
{{ resource.storagetype }} {{ resource.storagetype }}
</a-tag> </a-tag>
</div> </div>
@ -444,7 +450,9 @@
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</strong> </strong>
{{ resource.apikey }} <div>
{{ resource.apikey }}
</div>
</div> <br/> </div> <br/>
<div class="user-keys"> <div class="user-keys">
<a-icon type="lock" /> <a-icon type="lock" />
@ -459,7 +467,9 @@
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</strong> </strong>
{{ resource.secretkey }} <div>
{{ resource.secretkey }}
</div>
</div> </div>
</div> </div>
@ -873,6 +883,15 @@ export default {
} }
.progress-bar { .progress-bar {
width: 85%; width: 75%;
}
.status {
margin-top: -5px;
&--end {
margin-left: 5px;
}
} }
</style> </style>