UI: Admin, account and project dashboard improvements by yadvr · Pull Request #7956 · apache/cloudstack

yadvr · 2023-09-11T12:09:40Z

This PR aims at improving the CloudStack dashboard and introduces the following:

Admin dashboard: six cards that are responsive to screen sizes and show zone specific compute, storage and network allocation, as well as instance/hosts stats, alerts and events. Now, by default, the admin dashboard shows aggegate data from all zones, with option for admin to select individual zone to see individual zone stats
Account/project dashboard: six cards that are responsive to screen sizes and show account or project specific resource lists/counts, and limits shown in three cards as (a) compute (with running stopped instances), (b) storage and (c) network allocation, an admin-defined links/docs card (via config.json) and events cards. Admin is allowed to configure project limits on project dashboards.
A global create button on the top global header/user-menu to allow for quick actions such as to deploy a VM, CKS cluster and create a volume (more actions can be added as desired via code changes) etc.

Doc PR - apache/cloudstack-documentation#349

Screenshots:

Quick create button:

Admin dashboard:

Project view:

Responsive (smaller screen) layout:

Domain admin dashboard:

Domain admin project dashboard:

Translation screenshot:

Types of changes

Breaking change (fix or feature that would cause existing functionality to change)
New feature (non-breaking change which adds functionality)
Bug fix (non-breaking change which fixes an issue)
Enhancement (improves an existing feature and functionality)
Cleanup (Code refactoring and cleanup, that may add test cases)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr · 2023-09-11T12:21:25Z

@blueorangutan ui
@blueorangutan package

blueorangutan · 2023-09-11T12:22:04Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-11T12:22:04Z

@rohityadavcloud a [SF] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

blueorangutan · 2023-09-11T12:27:39Z

UI build failed: ✖️
(SL-JID-173)

codecov · 2023-09-11T12:30:41Z

Codecov Report

Merging #7956 (3c6b241) into main (c69e3c5) will increase coverage by 0.02%.
Report is 3 commits behind head on main.
The diff coverage is 3.03%.

@@             Coverage Diff              @@
##               main    #7956      +/-   ##
============================================
+ Coverage     29.23%   29.25%   +0.02%     
- Complexity    30463    30502      +39     
============================================
  Files          5100     5101       +1     
  Lines        358322   358428     +106     
  Branches      52308    52334      +26     
============================================
+ Hits         104749   104864     +115     
+ Misses       239182   239180       -2     
+ Partials      14391    14384       -7

Flag	Coverage Δ
simulator-marvin-tests	`25.23% <ø> (+0.04%)`	⬆️
uitests	`4.86% <3.03%> (-0.02%)`	⬇️
unit-tests	`14.50% <ø> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
ui/src/components/header/ProjectMenu.vue	`12.19% <0.00%> (ø)`
ui/src/components/menu/SMenu.vue	`3.12% <ø> (ø)`
ui/src/components/page/GlobalHeader.vue	`43.75% <ø> (ø)`
ui/src/components/page/GlobalLayout.vue	`17.46% <ø> (ø)`
ui/src/components/view/InfoCard.vue	`18.30% <ø> (ø)`
ui/src/components/view/ResourceView.vue	`30.95% <ø> (ø)`
ui/src/components/widgets/ChartCard.vue	`0.00% <ø> (ø)`
ui/src/components/widgets/Drawer.vue	`20.00% <ø> (ø)`
ui/src/components/widgets/OsLogo.vue	`4.54% <ø> (-2.13%)`	⬇️
ui/src/config/router.js	`1.78% <ø> (+0.14%)`	⬆️
... and 16 more

... and 24 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

blueorangutan · 2023-09-11T12:36:26Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-174)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

blueorangutan · 2023-09-11T13:15:27Z

Packaging result [SF]: ✔️ el7 ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 7012

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr · 2023-09-12T17:37:23Z

@blueorangutan ui
@blueorangutan package

blueorangutan · 2023-09-12T17:38:03Z

@rohityadavcloud a [SF] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

blueorangutan · 2023-09-12T17:38:04Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-12T17:52:01Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-175)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

blueorangutan · 2023-09-12T18:29:32Z

Packaging result [SF]: ✔️ el7 ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 7023

yadvr · 2023-09-13T05:51:13Z

@blueorangutan ui

blueorangutan · 2023-09-13T05:52:04Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-13T06:05:51Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-176)

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr · 2023-09-15T20:38:31Z

@blueorangutan ui
@blueorangutan package

blueorangutan · 2023-09-15T20:39:03Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-15T20:53:00Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-177)

blueorangutan · 2023-09-23T15:55:04Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-23T16:08:53Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-190)

shwstppr

Code LGTM
One minor thing, the global create button is not shown in the mobile view. Is that intentional @rohityadavcloud?

yadvr · 2023-09-25T06:11:47Z

@shwstppr that's correct, the create button is show only on desktop as the screen isn't that wide on phone and tablets to show all of project and create button.

yadvr · 2023-09-25T07:15:04Z

@blueorangutan package
@blueorangutan ui

blueorangutan · 2023-09-25T07:16:03Z

@rohityadavcloud a [SF] Jenkins job has been kicked to build packages. It will be bundled with@blueorangutan ui SystemVM template(s). I'll keep you posted as I make progress.

blueorangutan · 2023-09-25T07:16:04Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-25T07:29:17Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-191)

blueorangutan · 2023-09-25T07:51:49Z

Packaging result [SF]: ✔️ el7 ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 7092

yadvr · 2023-09-25T09:24:56Z

    "@vue-js-cron/ant": "^1.1.3",
    "@vue-js-cron/core": "^3.7.1",
-    "ant-design-vue": "^3.2.9",
+    "ant-design-vue": "^3.2.20",


cc @borisstoyanov @vladimirpetrov @kiranchavala tbd if full UI smoketest is required?

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr · 2023-09-25T10:01:13Z

@blueorangutan package
@blueorangutan ui

blueorangutan · 2023-09-25T10:02:03Z

@rohityadavcloud a Jenkins job has been kicked to build UI QA env. I'll keep you posted as I make progress.

blueorangutan · 2023-09-25T10:02:04Z

@rohityadavcloud a [SF] Jenkins job has been kicked to build packages. It will be bundled with@blueorangutan ui SystemVM template(s). I'll keep you posted as I make progress.

blueorangutan · 2023-09-25T10:15:42Z

UI build: ✔️
Live QA URL: https://qa.cloudstack.cloud/simulator/pr/7956 (QA-JID-192)

blueorangutan · 2023-09-25T10:38:15Z

Packaging result [SF]: ✔️ el7 ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 7094

rajujith · 2023-10-05T11:30:16Z

@blueorangutan package

blueorangutan · 2023-10-05T11:32:03Z

@rajujith a [SF] Jenkins job has been kicked to build packages. It will be bundled with KVM, XenServer and VMware SystemVM templates. I'll keep you posted as I make progress.

blueorangutan · 2023-10-05T12:24:41Z

Packaging result [SF]: ✔️ el7 ✔️ el8 ✔️ el9 ✔️ debian ✔️ suse15. SL-JID 7240

DaanHoogland

code lgtm
layout seems to work and looks ok (i liked the old dashboard though)

rajujith

Verified Admin, Domain Admin, User and project dashboards. On the below combinations and no issues observed.
MacOS Ventura + Safari 16.6
MacOS Ventura+ Chrome 117.0.59
MacOS Ventura+ Firefox 117.0.1

Windows 11 + Edge 117.0.2045
Windows 11 + Chrome 117.0.5938.150
Windows 11 + firefox 118.0.1

Ubuntu 22.04 + Chromium 117.0.5938.92
Ubuntu 22.04 + Firefox 115.0.2

This backports only the dashboard changes from apache#7956 and 5d9ae31 Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

This backports only the dashboard changes from apache/cloudstack#7956 and 5d9ae31 Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com> (cherry picked from commit 3376f94) Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr added this to the 4.19.0.0 milestone Sep 11, 2023

boring-cyborg Bot added the component:UI label Sep 11, 2023

yadvr force-pushed the dashboard-improvements branch from 070bd4c to 29a9c64 Compare September 11, 2023 12:12

package: bump ant-design-vue library to latest/stable

660931d

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr force-pushed the dashboard-improvements branch from 29a9c64 to 660931d Compare September 11, 2023 12:20

apache deleted a comment from blueorangutan Sep 11, 2023

css fixes

c7271bd

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

first iteration for admin dashboard

41882e9

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

fix v-ifs

9457512

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr added 3 commits September 15, 2023 23:52

fix responsiveness and some dark-mode issues

e32faec

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

css fixes

e937853

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

usage dashboard wip

6fafde0

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

shwstppr approved these changes Sep 25, 2023

View reviewed changes

Merge remote-tracking branch 'origin/main' into dashboard-improvements

52cb953

yadvr commented Sep 25, 2023

View reviewed changes

use primary-color as colour for statistics

3c6b241

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr requested a review from vladimirpetrov September 25, 2023 10:00

yadvr assigned vladimirpetrov Sep 25, 2023

yadvr mentioned this pull request Oct 3, 2023

ui: add userCard configuration details apache/cloudstack-documentation#349

Merged

DaanHoogland approved these changes Oct 5, 2023

View reviewed changes

rajujith approved these changes Oct 6, 2023

View reviewed changes

shwstppr merged commit 5d9ae31 into apache:main Oct 6, 2023

DaanHoogland deleted the dashboard-improvements branch October 6, 2023 09:32

yadvr added a commit to shapeblue/cloudstack that referenced this pull request Nov 7, 2023

ui: Admin, account and project dashboard improvements

3376f94

This backports only the dashboard changes from apache#7956 and 5d9ae31 Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

yadvr mentioned this pull request Nov 7, 2023

ui: Admin, account and project dashboard improvements #8193

Merged

Uh oh!

Conversation

yadvr commented Sep 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Types of changes

Uh oh!

yadvr commented Sep 11, 2023

Uh oh!

blueorangutan commented Sep 11, 2023

Uh oh!

blueorangutan commented Sep 11, 2023

Uh oh!

blueorangutan commented Sep 11, 2023

Uh oh!

codecov Bot commented Sep 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

blueorangutan commented Sep 11, 2023

Uh oh!

blueorangutan commented Sep 11, 2023

Uh oh!

yadvr commented Sep 12, 2023

Uh oh!

blueorangutan commented Sep 12, 2023

Uh oh!

blueorangutan commented Sep 12, 2023

Uh oh!

blueorangutan commented Sep 12, 2023

Uh oh!

blueorangutan commented Sep 12, 2023

Uh oh!

yadvr commented Sep 13, 2023

Uh oh!

blueorangutan commented Sep 13, 2023

Uh oh!

blueorangutan commented Sep 13, 2023

Uh oh!

yadvr commented Sep 15, 2023

Uh oh!

blueorangutan commented Sep 15, 2023

Uh oh!

blueorangutan commented Sep 15, 2023

Uh oh!

blueorangutan commented Sep 23, 2023

Uh oh!

blueorangutan commented Sep 23, 2023

Uh oh!

shwstppr left a comment

Choose a reason for hiding this comment

Uh oh!

yadvr commented Sep 25, 2023

Uh oh!

yadvr commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

yadvr Sep 25, 2023

Choose a reason for hiding this comment

Uh oh!

yadvr commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

blueorangutan commented Sep 25, 2023

Uh oh!

rajujith commented Oct 5, 2023

Uh oh!

blueorangutan commented Oct 5, 2023

Uh oh!

yadvr commented Sep 11, 2023 •

edited

Loading

codecov Bot commented Sep 11, 2023 •

edited

Loading