Skip to content

Commit feb9509

Browse files
yadvryadvr
authored
ui: assorted improvements (#7833)
This PR aims to polish the UI with following tweaks and changes: - Increase resource and os-logo icons both in list view, user-menu bar and VM deployment form - Fix css issues in VM deployment form when resource icons are on some of the templates/isos but not all - Replace edit icon in the resource icon editting button on the infocard, in resource view - Fix css marging/padding issue for nav bar and left-branding/logo - Introduce a new Limits option in the user menu, to allow users to see their own limits when they log in - Rename resource tab to limits tab for accounts, project and domains - Introduce a new copy-label component, that can be clicked to copy strings; use in info-card and list view for entites such as IP addresses and UUIDs - Add router-link to /zones/ in case of user-accounts (when /zone isn't routable in the UI) - Show better list of nics and ssh keys pairs in infocard for VM resource view - Standardise most resources to show state/status columns right after resource name (wherever applicable) - Remove displayname column in VM list view, add cpu number and memory by default - Add k8s version column in k8s list view - Add size and phy size columns in case of template and ISOs list view, only for root/domain admins - Add phy network router-link in case of guest VLAN list view; rearrange columns list for consistency - Add snapshot phy size column in the snapshot list view; and router-link for volume in the snapshot list view; and missing/useful details in the volume snapshot details view - Add a create and add data disk feature in Instances tab, just like we've add nic feature in the same Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
1 parent 29c7b31 commit feb9509

22 files changed

Lines changed: 356 additions & 115 deletions

‎ui/public/locales/en.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"label.action.create.snapshot.from.vmsnapshot": "Create snapshot from VM snapshot",
6262
"label.action.create.template.from.volume": "Create template from volume",
6363
"label.action.create.volume": "Create volume",
64+
"label.action.create.volume.add": "Create and Add Volume",
6465
"label.action.delete.account": "Delete account",
6566
"label.action.delete.backup.offering": "Delete backup offering",
6667
"label.action.delete.cluster": "Delete cluster",
@@ -1135,7 +1136,8 @@
11351136
"label.license.agreements": "License agreements",
11361137
"label.limit": "Limit",
11371138
"label.limitcpuuse": "CPU cap",
1138-
"label.limits": "Configure limits",
1139+
"label.limits": "Limits",
1140+
"label.limits.configure": "Configure limits",
11391141
"label.link.domain.to.ldap": "Link domain to LDAP",
11401142
"label.linklocalip": "Link-local/Control IP address",
11411143
"label.linux": "Linux",
@@ -1785,6 +1787,7 @@
17851787
"label.snapshotlimit": "Snapshot limits",
17861788
"label.snapshotmemory": "Snapshot memory",
17871789
"label.snapshots": "Snapshots",
1790+
"label.snapshottype": "Snapshot Type",
17881791
"label.sockettimeout": "Socket timeout",
17891792
"label.softwareversion": "Software version",
17901793
"label.source.based": "SourceBased",
@@ -2140,6 +2143,7 @@
21402143
"label.volumename": "Volume name",
21412144
"label.volumes": "Volumes",
21422145
"label.volumetotal": "Volume",
2146+
"label.volumetype": "Volume Type",
21432147
"label.vpc": "VPC",
21442148
"label.vpc.id": "VPC ID",
21452149
"label.vpc.offerings": "VPC offerings",
@@ -2347,6 +2351,7 @@
23472351
"message.attach.volume": "Please fill in the following data to attach a new volume. If you are attaching a disk volume to a Windows based virtual machine, you will need to reboot the instance to see the attached disk.",
23482352
"message.attach.volume.failed": "Failed to attach volume.",
23492353
"message.attach.volume.progress": "Attaching volume",
2354+
"message.attach.volume.success": "Successfully attached the volume to the instance",
23502355
"message.authorization.failed": "Session expired, authorization verification failed.",
23512356
"message.autoscale.loadbalancer.update": "The load balancer rule can be updated only when autoscale VM group is DISABLED.",
23522357
"message.autoscale.policies.update": "The scale up/down policies can be updated only when autoscale VM group is DISABLED.",

‎ui/src/components/header/UserMenu.vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<a-dropdown>
2828
<span class="user-menu-dropdown action">
2929
<span v-if="image">
30-
<resource-icon :image="image" size="2x" style="margin-right: 5px"/>
30+
<resource-icon :image="image" size="4x" style="margin-right: 5px; margin-top: -3px"/>
3131
</span>
3232
<a-avatar v-else-if="userInitials" class="user-menu-avatar avatar" size="small" :style="{ backgroundColor: '#1890ff', color: 'white' }">
3333
{{ userInitials }}
@@ -45,6 +45,12 @@
4545
<span class="user-menu-item-name">{{ $t('label.profilename') }}</span>
4646
</a-menu-item>
4747
</router-link>
48+
<router-link :to="{ path: '/account/' + $store.getters.userInfo.accountid, query: { tab: 'limits' } }">
49+
<a-menu-item class="user-menu-item" key="0">
50+
<ControlOutlined class="user-menu-item-icon" />
51+
<span class="user-menu-item-name">{{ $t('label.limits') }}</span>
52+
</a-menu-item>
53+
</router-link>
4854
<a @click="toggleUseBrowserTimezone">
4955
<a-menu-item class="user-menu-item" key="1">
5056
<ClockCircleOutlined class="user-menu-item-icon" />

‎ui/src/components/menu/SideMenu.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,14 +119,12 @@ export default {
119119
120120
.ant-menu-light {
121121
border-right-color: transparent;
122-
padding: 14px 0;
123122
}
124123
}
125124
126125
&.dark {
127126
.ant-menu-dark {
128127
border-right-color: transparent;
129-
padding: 14px 0;
130128
}
131129
}
132130
}

‎ui/src/components/view/DetailsTab.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,21 @@
5151
{{ dataResource.rootdisksize }} GB
5252
</div>
5353
</div>
54+
<div v-else-if="['template', 'iso'].includes($route.meta.name) && item === 'size'">
55+
<div>
56+
{{ parseFloat(dataResource.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
57+
</div>
58+
</div>
59+
<div v-else-if="['volume', 'snapshot', 'template', 'iso'].includes($route.meta.name) && item === 'physicalsize'">
60+
<div>
61+
{{ parseFloat(dataResource.physicalsize / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
62+
</div>
63+
</div>
64+
<div v-else-if="['volume', 'snapshot', 'template', 'iso'].includes($route.meta.name) && item === 'virtualsize'">
65+
<div>
66+
{{ parseFloat(dataResource.virtualsize / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB
67+
</div>
68+
</div>
5469
<div v-else-if="['name', 'type'].includes(item)">
5570
<span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(dataResource[item])">{{ $t(dataResource[item].toLowerCase()) }}</span>
5671
<span v-else>{{ dataResource[item] }}</span>

‎ui/src/components/view/InfoCard.vue‎

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
v-clipboard:copy="name" >
2828
<upload-resource-icon v-if="'uploadResourceIcon' in $store.getters.apis" :visible="showUpload" :resource="resource" @handle-close="showUpload(false)"/>
2929
<div class="ant-upload-preview" v-if="$showIcon() && !$route.path.includes('zones')">
30-
<camera-outlined class="upload-icon"/>
30+
<edit-outlined class="upload-icon"/>
3131
</div>
3232
<slot name="avatar">
3333
<span v-if="(resource.icon && resource.icon.base64image || images.template || images.iso || resourceIcon) && !['router', 'systemvm', 'volume'].includes($route.path.split('/')[1])">
@@ -119,14 +119,14 @@
119119
<div class="resource-detail-item__label">{{ $t('label.id') }}</div>
120120
<div class="resource-detail-item__details">
121121
<tooltip-button
122-
tooltipPlacement="right"
122+
tooltipPlacement="top"
123123
:tooltip="$t('label.copyid')"
124124
icon="barcode-outlined"
125125
type="dashed"
126126
size="small"
127127
:copyResource="resource.id"
128128
@onClick="$message.success($t('label.copied.clipboard'))" />
129-
<span style="margin-left: 10px;">{{ resource.id }}</span>
129+
<span style="margin-left: 10px;"><copy-label :label="resource.id" /></span>
130130
</div>
131131
</div>
132132
<div class="resource-detail-item" v-if="resource.ostypename && resource.ostypeid">
@@ -139,6 +139,29 @@
139139
<span style="margin-left: 8px">{{ resource.ostypename }}</span>
140140
</div>
141141
</div>
142+
<div class="resource-detail-item" v-if="resource.ipaddress">
143+
<div class="resource-detail-item__label">{{ $t('label.ip') }}</div>
144+
<div class="resource-detail-item__details">
145+
<environment-outlined
146+
@click="$message.success(`${$t('label.copied.clipboard')} : ${ ipaddress }`)"
147+
v-clipboard:copy="ipaddress" />
148+
<router-link v-if="!isStatic && resource.ipaddressid" :to="{ path: '/publicip/' + resource.ipaddressid }">
149+
<copy-label :label="ipaddress" />
150+
</router-link>
151+
<span v-else>
152+
<span v-if="ipaddress.includes(',')">
153+
<span
154+
v-for="(value, index) in ipaddress.split(',')"
155+
:key="index">
156+
<copy-label :label="value" /><br/>
157+
</span>
158+
</span>
159+
<span v-else>
160+
<copy-label :label="ipaddress" />
161+
</span>
162+
</span>
163+
</div>
164+
</div>
142165
<div class="resource-detail-item" v-if="('cpunumber' in resource && 'cpuspeed' in resource) || resource.cputotal">
143166
<div class="resource-detail-item__label">{{ $t('label.cpu') }}</div>
144167
<div class="resource-detail-item__details">
@@ -292,11 +315,19 @@
292315
v-for="(eth, index) in resource.nic"
293316
:key="eth.id"
294317
style="margin-left: -24px; margin-top: 5px;">
295-
<api-outlined /><strong>eth{{ index }}</strong> {{ eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress }}
296-
<router-link v-if="!isStatic && eth.networkname && eth.networkid" :to="{ path: '/guestnetwork/' + eth.networkid }">({{ eth.networkname }})</router-link>
318+
<api-outlined />
319+
<strong>eth{{ index }}</strong>&nbsp;
320+
<copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />&nbsp;
297321
<a-tag v-if="eth.isdefault">
298322
{{ $t('label.default') }}
299-
</a-tag >
323+
</a-tag ><br/>
324+
<span v-if="!isStatic && eth.networkname && eth.networkid">
325+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
326+
<apartment-outlined/>
327+
<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">
328+
{{ eth.networkname }}
329+
</router-link>
330+
</span>
300331
</div>
301332
</div>
302333
</div>
@@ -324,16 +355,6 @@
324355
<span>{{ resource.loadbalancer.name }} ( {{ resource.loadbalancer.publicip }}:{{ resource.loadbalancer.publicport }})</span>
325356
</div>
326357
</div>
327-
<div class="resource-detail-item" v-if="resource.ipaddress">
328-
<div class="resource-detail-item__label">{{ $t('label.ip') }}</div>
329-
<div class="resource-detail-item__details">
330-
<environment-outlined
331-
@click="$message.success(`${$t('label.copied.clipboard')} : ${ ipaddress }`)"
332-
v-clipboard:copy="ipaddress" />
333-
<router-link v-if="!isStatic && resource.ipaddressid" :to="{ path: '/publicip/' + resource.ipaddressid }">{{ ipaddress }}</router-link>
334-
<span v-else>{{ ipaddress }}</span>
335-
</div>
336-
</div>
337358
<div class="resource-detail-item" v-if="resource.projectid || resource.projectname">
338359
<div class="resource-detail-item__label">{{ $t('label.project') }}</div>
339360
<div class="resource-detail-item__details">
@@ -368,10 +389,15 @@
368389
<div class="resource-detail-item" v-if="resource.keypairs && resource.keypairs.length > 0">
369390
<div class="resource-detail-item__label">{{ $t('label.keypairs') }}</div>
370391
<div class="resource-detail-item__details">
371-
<key-outlined />
372-
<li v-for="keypair in keypairs" :key="keypair">
373-
<router-link :to="{ path: '/ssh/' + keypair }" style="margin-right: 5px">{{ keypair }}</router-link>
374-
</li>
392+
<div>
393+
<div
394+
v-for="keypair in keypairs"
395+
:key="keypair"
396+
style="margin-top: 5px;">
397+
<key-outlined />
398+
<router-link :to="{ path: '/ssh/' + keypair }" style="margin-right: 5px">{{ keypair }}</router-link>
399+
</div>
400+
</div>
375401
</div>
376402
</div>
377403
<div class="resource-detail-item" v-if="resource.resourcetype && resource.resourceid && routeFromResourceType">
@@ -420,7 +446,8 @@
420446
<div class="resource-detail-item__label">{{ $t('label.publicip') }}</div>
421447
<div class="resource-detail-item__details">
422448
<gateway-outlined />
423-
<router-link :to="{ path: '/publicip/' + resource.publicipid }">{{ resource.publicip }} </router-link>
449+
<router-link v-if="resource.publicipid" :to="{ path: '/publicip/' + resource.publicipid }">{{ resource.publicip }} </router-link>
450+
<copy-label :label="resource.publicip"/>
424451
</div>
425452
</div>
426453
<div class="resource-detail-item" v-if="resource.vpcid">
@@ -554,6 +581,7 @@
554581
</span>
555582
<global-outlined v-else />
556583
<router-link v-if="!isStatic && $router.resolve('/zone/' + resource.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + resource.zoneid }">{{ resource.zone || resource.zonename || resource.zoneid }}</router-link>
584+
<router-link v-else-if="$router.resolve('/zones/' + resource.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zones/' + resource.zoneid }">{{ resource.zone || resource.zonename || resource.zoneid }}</router-link>
557585
<span v-else>{{ resource.zone || resource.zonename || resource.zoneid }}</span>
558586
</div>
559587
</div>
@@ -733,6 +761,7 @@ import { createPathBasedOnVmType } from '@/utils/plugins'
733761
import Console from '@/components/widgets/Console'
734762
import OsLogo from '@/components/widgets/OsLogo'
735763
import Status from '@/components/widgets/Status'
764+
import CopyLabel from '@/components/widgets/CopyLabel'
736765
import TooltipButton from '@/components/widgets/TooltipButton'
737766
import UploadResourceIcon from '@/components/view/UploadResourceIcon'
738767
import eventBus from '@/config/eventBus'
@@ -745,6 +774,7 @@ export default {
745774
Console,
746775
OsLogo,
747776
Status,
777+
CopyLabel,
748778
TooltipButton,
749779
UploadResourceIcon,
750780
ResourceIcon,

‎ui/src/components/view/ListView.vue‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@
7373
<template #name="{text, record}">
7474
<span v-if="['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
7575
<span v-if="record.icon && record.icon.base64image">
76-
<resource-icon :image="record.icon.base64image" size="1x"/>
76+
<resource-icon :image="record.icon.base64image" size="2x"/>
7777
</span>
78-
<os-logo v-else :osId="record.ostypeid" :osName="record.osdisplayname" size="lg" />
78+
<os-logo v-else :osId="record.ostypeid" :osName="record.osdisplayname" size="2x" />
7979
</span>
8080
<span style="min-width: 120px" >
8181
<QuickView
@@ -88,8 +88,8 @@
8888
<tooltip-button type="dashed" size="small" icon="LoginOutlined" @onClick="changeProject(record)" />
8989
</span>
9090
<span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
91-
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
92-
<os-logo v-else-if="record.ostypename" :osName="record.ostypename" size="1x" />
91+
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="2x"/>
92+
<os-logo v-else-if="record.ostypename" :osName="record.ostypename" size="2x" />
9393
<render-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 16px;" :icon="$route.meta.icon"/>
9494
<render-icon v-else style="font-size: 16px;" :svgIcon="$route.meta.icon" />
9595
</span>
@@ -143,7 +143,7 @@
143143
</template>
144144
<template #username="{text, record}">
145145
<span v-if="$showIcon() && !['vm'].includes($route.path.split('/')[1])" style="margin-right: 5px">
146-
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="1x"/>
146+
<resource-icon v-if="$showIcon() && record.icon && record.icon.base64image" :image="record.icon.base64image" size="2x"/>
147147
<user-outlined v-else style="font-size: 16px;" />
148148
</span>
149149
<router-link :to="{ path: $route.path + '/' + record.id }" v-if="['/accountuser', '/vpnuser'].includes($route.path)">{{ text }}</router-link>
@@ -162,7 +162,9 @@
162162
</template>
163163
<template #ipaddress="{ text, record }" href="javascript:;">
164164
<router-link v-if="['/publicip', '/privategw'].includes($route.path)" :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
165-
<span v-else>{{ text }}</span>
165+
<span v-else>
166+
<copy-label :label="text" />
167+
</span>
166168
<span v-if="record.issourcenat">
167169
&nbsp;
168170
<a-tag>source-nat</a-tag>
@@ -188,6 +190,25 @@
188190
<template #virtualmachinename="{ text, record }">
189191
<router-link :to="{ path: '/vm/' + record.virtualmachineid }">{{ text }}</router-link>
190192
</template>
193+
<template #volumename="{ text, record }">
194+
<router-link :to="{ path: '/volume/' + record.volumeid }">{{ text }}</router-link>
195+
</template>
196+
<template #size="{ text }">
197+
<span v-if="text">
198+
{{ parseFloat(parseFloat(text) / 1024.0 / 1024.0 / 1024.0).toFixed(2) }} GiB
199+
</span>
200+
</template>
201+
<template #physicalsize="{ text }">
202+
<span v-if="text">
203+
{{ parseFloat(parseFloat(text) / 1024.0 / 1024.0 / 1024.0).toFixed(2) }} GiB
204+
</span>
205+
</template>
206+
<template #physicalnetworkname="{ text, record }">
207+
<router-link :to="{ path: '/physicalnetwork/' + record.physicalnetworkid }">{{ text }}</router-link>
208+
</template>
209+
<template #serviceofferingname="{ text, record }">
210+
<router-link :to="{ path: '/computeoffering/' + record.serviceofferingid }">{{ text }}</router-link>
211+
</template>
191212
<template #hypervisor="{ text, record }">
192213
<span v-if="$route.name === 'hypervisorcapability'">
193214
<router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
@@ -198,6 +219,9 @@
198219
<status v-if="$route.path.startsWith('/host')" :text="getHostState(record)" displayText />
199220
<status v-else :text="text ? text : ''" displayText :styles="{ 'min-width': '80px' }" />
200221
</template>
222+
<template #status="{ text }">
223+
<status :text="text ? text : ''" displayText />
224+
</template>
201225
<template #allocationstate="{ text }">
202226
<status :text="text ? text : ''" displayText />
203227
</template>
@@ -303,6 +327,7 @@
303327
</template>
304328
<template #zonename="{ text, record }">
305329
<router-link v-if="$router.resolve('/zone/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + record.zoneid }">{{ text }}</router-link>
330+
<router-link v-else-if="$router.resolve('/zones/' + record.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zones/' + record.zoneid }">{{ text }}</router-link>
306331
<span v-else>{{ text }}</span>
307332
</template>
308333
<template #rolename="{ text, record }">
@@ -431,6 +456,7 @@ import { api } from '@/api'
431456
import OsLogo from '@/components/widgets/OsLogo'
432457
import Status from '@/components/widgets/Status'
433458
import QuickView from '@/components/view/QuickView'
459+
import CopyLabel from '@/components/widgets/CopyLabel'
434460
import TooltipButton from '@/components/widgets/TooltipButton'
435461
import ResourceIcon from '@/components/view/ResourceIcon'
436462
import ResourceLabel from '@/components/widgets/ResourceLabel'
@@ -442,6 +468,7 @@ export default {
442468
OsLogo,
443469
Status,
444470
QuickView,
471+
CopyLabel,
445472
TooltipButton,
446473
ResourceIcon,
447474
ResourceLabel

0 commit comments

Comments
 (0)