From feb9509547aa27f00b8be40da0857197bf798857 Mon Sep 17 00:00:00 2001 From: Rohit Yadav Date: Fri, 11 Aug 2023 14:00:04 +0530 Subject: [PATCH] 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 --- ui/public/locales/en.json | 7 +- ui/src/components/header/UserMenu.vue | 8 ++- ui/src/components/menu/SideMenu.vue | 2 - ui/src/components/view/DetailsTab.vue | 15 ++++ ui/src/components/view/InfoCard.vue | 72 +++++++++++++------ ui/src/components/view/ListView.vue | 39 ++++++++-- ui/src/components/widgets/CopyLabel.vue | 51 +++++++++++++ ui/src/config/section/account.js | 4 +- ui/src/config/section/compute.js | 22 +++--- ui/src/config/section/domain.js | 4 +- ui/src/config/section/image.js | 26 +++++-- ui/src/config/section/network.js | 16 ++--- ui/src/config/section/project.js | 4 +- ui/src/config/section/storage.js | 13 ++-- ui/src/utils/request.js | 2 + .../views/compute/CreateAutoScaleVmGroup.vue | 42 ++++++----- ui/src/views/compute/DeployVM.vue | 44 +++++++----- ui/src/views/compute/InstanceTab.vue | 43 +++++++++-- .../compute/wizard/TemplateIsoRadioGroup.vue | 14 ++-- ui/src/views/dashboard/CapacityDashboard.vue | 2 +- ui/src/views/image/TemplateZones.vue | 2 +- ui/src/views/storage/CreateVolume.vue | 39 +++++++++- 22 files changed, 356 insertions(+), 115 deletions(-) create mode 100644 ui/src/components/widgets/CopyLabel.vue diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json index 0691c2da4ad..f93cbd233f7 100644 --- a/ui/public/locales/en.json +++ b/ui/public/locales/en.json @@ -61,6 +61,7 @@ "label.action.create.snapshot.from.vmsnapshot": "Create snapshot from VM snapshot", "label.action.create.template.from.volume": "Create template from volume", "label.action.create.volume": "Create volume", +"label.action.create.volume.add": "Create and Add Volume", "label.action.delete.account": "Delete account", "label.action.delete.backup.offering": "Delete backup offering", "label.action.delete.cluster": "Delete cluster", @@ -1135,7 +1136,8 @@ "label.license.agreements": "License agreements", "label.limit": "Limit", "label.limitcpuuse": "CPU cap", -"label.limits": "Configure limits", +"label.limits": "Limits", +"label.limits.configure": "Configure limits", "label.link.domain.to.ldap": "Link domain to LDAP", "label.linklocalip": "Link-local/Control IP address", "label.linux": "Linux", @@ -1785,6 +1787,7 @@ "label.snapshotlimit": "Snapshot limits", "label.snapshotmemory": "Snapshot memory", "label.snapshots": "Snapshots", +"label.snapshottype": "Snapshot Type", "label.sockettimeout": "Socket timeout", "label.softwareversion": "Software version", "label.source.based": "SourceBased", @@ -2140,6 +2143,7 @@ "label.volumename": "Volume name", "label.volumes": "Volumes", "label.volumetotal": "Volume", +"label.volumetype": "Volume Type", "label.vpc": "VPC", "label.vpc.id": "VPC ID", "label.vpc.offerings": "VPC offerings", @@ -2347,6 +2351,7 @@ "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.", "message.attach.volume.failed": "Failed to attach volume.", "message.attach.volume.progress": "Attaching volume", +"message.attach.volume.success": "Successfully attached the volume to the instance", "message.authorization.failed": "Session expired, authorization verification failed.", "message.autoscale.loadbalancer.update": "The load balancer rule can be updated only when autoscale VM group is DISABLED.", "message.autoscale.policies.update": "The scale up/down policies can be updated only when autoscale VM group is DISABLED.", diff --git a/ui/src/components/header/UserMenu.vue b/ui/src/components/header/UserMenu.vue index d2b7787f39e..0c7434594be 100644 --- a/ui/src/components/header/UserMenu.vue +++ b/ui/src/components/header/UserMenu.vue @@ -27,7 +27,7 @@ - + {{ userInitials }} @@ -45,6 +45,12 @@ {{ $t('label.profilename') }} + + + + {{ $t('label.limits') }} + + diff --git a/ui/src/components/menu/SideMenu.vue b/ui/src/components/menu/SideMenu.vue index d370f6e1c89..c26755021d2 100644 --- a/ui/src/components/menu/SideMenu.vue +++ b/ui/src/components/menu/SideMenu.vue @@ -119,14 +119,12 @@ export default { .ant-menu-light { border-right-color: transparent; - padding: 14px 0; } } &.dark { .ant-menu-dark { border-right-color: transparent; - padding: 14px 0; } } } diff --git a/ui/src/components/view/DetailsTab.vue b/ui/src/components/view/DetailsTab.vue index 17a4e958dd0..e359f14d86b 100644 --- a/ui/src/components/view/DetailsTab.vue +++ b/ui/src/components/view/DetailsTab.vue @@ -51,6 +51,21 @@ {{ dataResource.rootdisksize }} GB +
+
+ {{ parseFloat(dataResource.size / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB +
+
+
+
+ {{ parseFloat(dataResource.physicalsize / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB +
+
+
+
+ {{ parseFloat(dataResource.virtualsize / (1024.0 * 1024.0 * 1024.0)).toFixed(2) }} GB +
+
{{ $t(dataResource[item].toLowerCase()) }} {{ dataResource[item] }} diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue index 0b9ebf42657..72df182d80e 100644 --- a/ui/src/components/view/InfoCard.vue +++ b/ui/src/components/view/InfoCard.vue @@ -27,7 +27,7 @@ v-clipboard:copy="name" >
- +
@@ -119,14 +119,14 @@
{{ $t('label.id') }}
- {{ resource.id }} +
@@ -139,6 +139,29 @@ {{ resource.ostypename }}
+
+
{{ $t('label.ip') }}
+
+ + + + + + + +
+ + + + + + +
+
{{ $t('label.cpu') }}
@@ -292,11 +315,19 @@ v-for="(eth, index) in resource.nic" :key="eth.id" style="margin-left: -24px; margin-top: 5px;"> - eth{{ index }} {{ eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress }} - ({{ eth.networkname }}) + + eth{{ index }}  +   {{ $t('label.default') }} - +
+ +       + + + {{ eth.networkname }} + +
@@ -324,16 +355,6 @@ {{ resource.loadbalancer.name }} ( {{ resource.loadbalancer.publicip }}:{{ resource.loadbalancer.publicport }}) -
-
{{ $t('label.ip') }}
-
- - {{ ipaddress }} - {{ ipaddress }} -
-
{{ $t('label.project') }}
@@ -368,10 +389,15 @@
{{ $t('label.keypairs') }}
- -
  • - {{ keypair }} -
    • +
    +
    + + {{ keypair }} +
    +
    @@ -420,7 +446,8 @@
    {{ $t('label.publicip') }}
    - {{ resource.publicip }} + {{ resource.publicip }} +
    @@ -554,6 +581,7 @@ {{ resource.zone || resource.zonename || resource.zoneid }} + {{ resource.zone || resource.zonename || resource.zoneid }} {{ resource.zone || resource.zonename || resource.zoneid }}
    @@ -733,6 +761,7 @@ import { createPathBasedOnVmType } from '@/utils/plugins' import Console from '@/components/widgets/Console' import OsLogo from '@/components/widgets/OsLogo' import Status from '@/components/widgets/Status' +import CopyLabel from '@/components/widgets/CopyLabel' import TooltipButton from '@/components/widgets/TooltipButton' import UploadResourceIcon from '@/components/view/UploadResourceIcon' import eventBus from '@/config/eventBus' @@ -745,6 +774,7 @@ export default { Console, OsLogo, Status, + CopyLabel, TooltipButton, UploadResourceIcon, ResourceIcon, diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue index 7ccb028f986..38b8b519138 100644 --- a/ui/src/components/view/ListView.vue +++ b/ui/src/components/view/ListView.vue @@ -73,9 +73,9 @@