Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2020-01-16 15:40:38 +05:30
parent 76bf026ec1
commit 759921ee11
4 changed files with 41 additions and 35 deletions

View File

@ -25,13 +25,13 @@
<slot name="avatar">
<os-logo v-if="resource.ostypeid || resource.ostypename" :osId="resource.ostypeid" :osName="resource.ostypename" size="4x" />
<a-icon v-else style="font-size: 36px" :type="$route.meta.icon" />
<console style="margin-left: -15px" :resource="resource" size="default" v-if="resource.id" />
</slot>
</div>
<slot name="name">
<h4 class="name">
{{ resource.displayname || resource.name }}
</h4>
<console style="margin-left: 10px" :resource="resource" size="default" v-if="resource.id" />
</slot>
</div>
<slot name="actions">
@ -54,6 +54,12 @@
<a-tag v-if="'isdynamicallyscalable' in resource" :color="resource.isdynamicallyscalable ? 'green': 'red'">
{{ $t('isdynamicallyscalable') }}
</a-tag>
<a-tag v-if="resource.scope">
{{ resource.scope }}
</a-tag>
<a-tag v-if="resource.version">
{{ resource.version }}
</a-tag>
</div>
</slot>
</div>
@ -65,6 +71,7 @@
<div class="resource-detail-item__details">
<status class="status" :text="resource.state || resource.status"/>
<span>{{ resource.state || resource.status }}</span>
<console style="margin-left: 5px" :resource="resource" size="default" v-if="resource.id" />
</div>
</div>
<div class="resource-detail-item" v-if="resource.id">
@ -195,36 +202,34 @@
<a-icon type="hdd" />
<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 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">
<a-tag style="margin-bottom: 5px;">Read {{ toSize(resource.diskkbsread) }}</a-tag>
<a-tag style="margin-bottom: 5px;">Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
<a-tag style="margin-bottom: 5px;">Read (IO) {{ resource.diskioread }}</a-tag>
<a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag>
</div>
</div>
<div style="margin-left: 25px; margin-top: 5px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
<a-tag style="margin-bottom: 5px;">Read {{ toSize(resource.diskkbsread) }}</a-tag>
<a-tag style="margin-bottom: 5px;">Write {{ toSize(resource.diskkbswrite) }}</a-tag><br/>
<a-tag style="margin-bottom: 5px;">Read (IO) {{ resource.diskioread }}</a-tag>
<a-tag>Write (IO) {{ resource.diskiowrite }}</a-tag>
</div>
</div>
<div class="resource-detail-item" v-else-if="resource.disksizetotalgb">
<div class="resource-detail-item__label">{{ $t('disksize') }}</div>
<div class="resource-detail-item__details">
<a-icon type="database" />{{ resource.disksizetotalgb }}
<span
v-if="resource.disksizeusedgb"
style="display: flex; padding-left: 25px">
{{ $t('disksizeusedgb') }}
</div>
<div>
<span v-if="resource.disksizeusedgb">
<a-progress
class="progress-bar"
size="small"
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))"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeusedgb')" />
</span>
<span
v-if="resource.disksizeallocatedgb"
style="display: flex; padding-left: 25px">
{{ $t('disksizeallocatedgb') }}
<span v-if="resource.disksizeallocatedgb">
<a-progress
class="progress-bar"
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))"
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('disksizeallocatedgb')" />
</span>
</div>
</div>
@ -314,7 +319,7 @@
</div>
</div>
<div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
<div class="resource-detail-item__label">{{ $t('serviceCapabilities') }}</div>
<div class="resource-detail-item__label">{{ $t('serviceofferingname') }}</div>
<div class="resource-detail-item__details">
<a-icon type="cloud" />
<router-link :to="{ path: '/computeoffering/' + resource.serviceofferingid }">{{ resource.serviceofferingname || resource.serviceofferingid }} </router-link>
@ -328,14 +333,14 @@
</div>
</div>
<div class="resource-detail-item" v-if="resource.diskofferingname && resource.diskofferingid">
<div class="resource-detail-item__label">{{ $t('diskOffering') }}</div>
<div class="resource-detail-item__label">{{ $t('diskoffering') }}</div>
<div class="resource-detail-item__details">
<a-icon type="hdd" />
<router-link :to="{ path: '/diskoffering/' + resource.diskofferingid }">{{ resource.diskofferingname || resource.diskofferingid }} </router-link>
</div>
</div>
<div class="resource-detail-item" v-if="resource.networkofferingid">
<div class="resource-detail-item__label">{{ $t('networkofferingdisplaytext') }}</div>
<div class="resource-detail-item__label">{{ $t('networkofferingid') }}</div>
<div class="resource-detail-item__details">
<a-icon type="wifi" />
<router-link :to="{ path: '/networkoffering/' + resource.networkofferingid }">{{ resource.networkofferingname || resource.networkofferingid }} </router-link>
@ -349,7 +354,7 @@
</div>
</div>
<div class="resource-detail-item" v-if="resource.storageid">
<div class="resource-detail-item__label">{{ $t('Storage') }}</div>
<div class="resource-detail-item__label">{{ $t('storagePool') }}</div>
<div class="resource-detail-item__details">
<a-icon type="database" />
<router-link :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link>
@ -873,6 +878,7 @@ export default {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: -10px;
.ant-tag {
margin-right: 10px;
@ -883,7 +889,8 @@ export default {
}
.progress-bar {
width: 75%;
padding-right: 60px;
width: 100%;
}
.status {

View File

@ -16,7 +16,7 @@
// under the License.
<template>
<a-tooltip placement="right">
<a-tooltip placement="bottom">
<template slot="title">
{{ name }}
</template>

View File

@ -161,7 +161,7 @@
"diskBytesWriteRate": "Disk Write Rate (BPS)",
"diskIopsReadRate": "Disk Read Rate (IOPS)",
"diskIopsWriteRate": "Disk Write Rate (IOPS)",
"diskOffering": "Disk Offering",
"diskoffering": "Disk Offering",
"diskOfferingId": "Disk Offerings",
"diskSize": "Disk Size (in GB)",
"diskiopstotal": "IOPS",
@ -855,10 +855,10 @@
"service.StaticNat.associatePublicIP": "Associate Public IP",
"service.StaticNat.elasticIpCheckbox": "Elastic IP",
"serviceCapabilities": "Service Capabilities",
"serviceOfferingId": "Compute offering",
"serviceOfferingId": "Compute Offering",
"servicelist": "Services",
"serviceofferingid": "Compute offering",
"serviceofferingname": "Compute offering",
"serviceofferingid": "Compute Offering",
"serviceofferingname": "Compute Offering",
"settings": "Settings",
"shareWith": "Share With",
"shrinkok": "Shrink OK",

View File

@ -17,8 +17,7 @@
<template>
<div>
<a-collapse v-model="activeKey">
<a-collapse v-model="activeKey" :bordered="false">
<a-collapse-panel :header="'ISO: ' + vm.isoname" v-if="vm.isoid" key="1">
<a-list
itemLayout="horizontal">
@ -72,7 +71,7 @@
<div class="label">{{ $t('size') }}</div>
<div>{{ (item.size / (1024 * 1024 * 1024.0)).toFixed(2) }} GB</div>
</div>
<div class="attribute">
<div class="attribute" v-if="item.physicalsize">
<div class="label">{{ $t('physicalsize') }}</div>
<div>{{ (item.physicalsize / (1024 * 1024 * 1024.0)).toFixed(4) }} GB</div>
</div>
@ -117,13 +116,14 @@
@confirm="setAsDefault(item)"
okText="Yes"
cancelText="No"
v-if="!item.isdefault"
>
<a-button
icon="arrow-right"
icon="check-square"
size="small"
shape="round" />
</a-popconfirm>
<a-tooltip placement="right" v-if="item.type !== 'L2'">
<a-tooltip placement="bottom" v-if="item.type !== 'L2'">
<template slot="title">
{{ "Change IP Address" }}
</template>
@ -133,7 +133,7 @@
shape="round"
@click="editIpAddressNic = item.id; showUpdateIpModal = true" />
</a-tooltip>
<a-tooltip placement="right" v-if="item.type !== 'L2'">
<a-tooltip placement="bottom" v-if="item.type !== 'L2'">
<template slot="title">
{{ "Manage Secondary IP Addresses" }}
</template>
@ -184,7 +184,7 @@
<div class="label">{{ $t('IP Address') }}</div>
<div>{{ item.ipaddress }}</div>
</div>
<div class="attribute" v-if="item.secondaryip && item.type !== 'L2'">
<div class="attribute" v-if="item.secondaryip && item.secondaryip.length > 0 && item.type !== 'L2'">
<div class="label">{{ $t('Secondary IPs') }}</div>
<div>{{ item.secondaryip.map(x => x.ipaddress).join(', ') }}</div>
</div>
@ -701,7 +701,6 @@ export default {
a {
margin-right: 30px;
margin-bottom: 10px;
font-weight: bold;
}
.ant-tag {