ui: Admin, account and project dashboard improvements (#8193)

Signed-off-by: Rohit Yadav <[email protected]>

Author: rohityadavcloud

ui/public/locales/en.json

@@ -2148,6 +2148,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",

ui/src/components/widgets/ChartCard.vue

@@ -93,7 +93,6 @@ export default {
   }
 
   &-footer {
-    border-top: 1px solid #e8e8e8;
     padding-top: 9px;
     margin-top: 8px;
   }

ui/src/components/widgets/Drawer.vue

@@ -134,7 +134,7 @@ export default {
   text-align: center;
   transition: all 0.5s;
   cursor: pointer;
-  top: calc(50% - 45px);
+  top: calc(100% - 45px);
   z-index: 100;
 
   &.left{

ui/src/config/router.js

@@ -20,7 +20,7 @@ import { UserLayout, BasicLayout, RouteView } from '@/layouts'
 import AutogenView from '@/views/AutogenView.vue'
 import IFramePlugin from '@/views/plugins/IFramePlugin.vue'
 
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef } from 'vue'
 import { vueProps } from '@/vue-app'
 
 import compute from '@/config/section/compute'
@@ -201,26 +201,7 @@ export function asyncRouterMap () {
         name: 'dashboard',
         meta: {
           title: 'label.dashboard',
-          icon: 'DashboardOutlined',
-          tabs: [
-            {
-              name: 'dashboard',
-              component: shallowRef(defineAsyncComponent(() => import('@/views/dashboard/UsageDashboardChart')))
-            },
-            {
-              name: 'accounts',
-              show: (record, route, user) => { return record.account === user.account || ['Admin', 'DomainAdmin'].includes(user.roletype) },
-              component: shallowRef(defineAsyncComponent(() => import('@/views/project/AccountsTab')))
-            },
-            {
-              name: 'limits',
-              params: {
-                projectid: 'id'
-              },
-              show: (record, route, user) => { return ['Admin'].includes(user.roletype) },
-              component: shallowRef(defineAsyncComponent(() => import('@/components/view/ResourceLimitTab.vue')))
-            }
-          ]
+          icon: 'DashboardOutlined'
         },
         component: () => import('@/views/dashboard/Dashboard')
       },

ui/src/core/lazy_lib/components_use.js

@@ -63,7 +63,8 @@ import {
   Slider,
   AutoComplete,
   Collapse,
-  Space
+  Space,
+  Statistic
 } from 'ant-design-vue'
 import VueClipboard from 'vue3-clipboard'
 import VueCropper from 'vue-cropper'
@@ -127,5 +128,6 @@ export default {
     app.use(Collapse)
     app.use(Descriptions)
     app.use(Space)
+    app.use(Statistic)
   }
 }

ui/src/style/dark-mode.less

@@ -36,7 +36,7 @@
 .dark-mode {
   background: @dark-bgColor;
 
-  h1, h2, h3, h4, h5, h6 {
+  h1, h2, h3, h4, h5, h6, .ant-statistic-title, .ant-statistic-content {
     color: @dark-text-color-3;
   }
 
@@ -959,4 +959,4 @@
   .button-clear-notification {
     background-color: @dark-secondary-bgColor;
   }
-}
+}

ui/src/utils/device.js

@@ -43,7 +43,7 @@ export const deviceEnquire = function (callback) {
   }
 
   enquireJs
-    .register('screen and (max-width: 800px)', matchMobile)
-    .register('screen and (min-width: 800px) and (max-width: 1366px)', matchTablet)
-    .register('screen and (min-width: 1367px)', matchDesktop)
+    .register('screen and (max-width: 765px)', matchMobile)
+    .register('screen and (min-width: 766px) and (max-width: 1279px)', matchTablet)
+    .register('screen and (min-width: 1280px)', matchDesktop)
 }