Rohit Yadav 5d9ae31f1b
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>
2023-10-06 13:40:22 +05:30
..
2023-04-11 14:05:21 +05:30
2022-11-13 10:56:15 +01:00

index.less

  • src/styles/index.less imports all necessary rules for cloudstack

ant .less structure node_modules/ant-design-vue/

main .less entry points:

  1. dist/antd.less
    • imports everthing with index.less + components.less
  2. lib/style/index.less
    • themes/default.less
      • color/colors'
      • default theme @variables
    • core/index.less
      • includes base styles, motion rules and iconfont

src/style/ explaination

  • index.less includes ant styles, as well as all custom variables and rules

folders:

  1. variables
    • include all custom variables here
  2. common
    • include all rules that reset styles, define global stuffs without classes at all
    • e.g. body {} p, ul, li {} h1, h2, h3 {}
  3. ant-overwrite
    • any styles that overwrites the existin ant rules by any reason
    • e.g. classes like .ant-layout-header .anticon {}
  4. frame
    • everything that belongs to the frame
    • e.g. header, footer, nav, sider, content (just the actual content frame, not every component in it)
  5. layout
    • rules that modify the page at all if new layout class is set.
    • e.g. #html class="layout-ant-black"#
  6. objects
    • repeatly used elements like buttons, inputs
  7. components
    • complex elements like dropdown, forms, table, search (usually include this to components/FooterToolbar/ folder)

The "/deep/" combinator