UI: Admin, account and project dashboard improvements (#7956)

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

---------

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

Author: yadvr

ui/package-lock.json

@@ -34,13 +34,13 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/vue-fontawesome": "^3.0.0-4",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
     "@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",
     "antd": "^4.21.4",
     "antd-theme-webpack-plugin": "^1.3.9",
     "axios": "^0.21.1",

ui/package.json

@@ -59,6 +59,36 @@
     "jp": "label.japanese.keyboard",
     "sc": "label.simplified.chinese.keyboard"
   },
+  "userCard": {
+    "title": "label.help",
+    "icon": "question-circle-outlined",
+    "links": [
+      {
+        "title": "Documentation",
+        "text": "CloudStack documentation website",
+        "link": "https://docs.cloudstack.apache.org/en/latest/",
+        "icon": "read-outlined"
+      },
+      {
+        "title": "API Documentation",
+        "text": "Refer to API documentation",
+        "link": "https://cloudstack.apache.org/api.html",
+        "icon": "api-outlined"
+      },
+      {
+        "title": "Email Support",
+        "text": "Join CloudStack users mailing list to seek and provide support",
+        "link": "mailto:users-subscribe@cloudstack.apache.org",
+        "icon": "mail-outlined"
+      },
+      {
+        "title": "Report Issue",
+        "text": "Submit a bug or improvement request",
+        "link": "https://github.com/apache/cloudstack/issues/new",
+        "icon": "bug-outlined"
+      }
+    ]
+  },
   "plugins": [],
   "basicZoneEnabled": true,
   "multipleServer": false,

ui/public/config.json

@@ -538,6 +538,7 @@
 "label.cpuused": "CPU utilized",
 "label.cpuusedghz": "CPU used",
 "label.create": "Create",
+"label.create.instance": "Create cloud server",
 "label.create.account": "Create account",
 "label.create.backup": "Start backup",
 "label.create.network": "Create new network",
@@ -2193,6 +2194,7 @@
 "label.volumetotal": "Volume",
 "label.volumetype": "Volume Type",
 "label.vpc": "VPC",
+"label.vpcs": "VPCs",
 "label.vpc.id": "VPC ID",
 "label.vpc.offerings": "VPC offerings",
 "label.vpc.virtual.router": "VPC virtual router",