mirror of https://github.com/apache/cloudstack.git
dashboard improvements (#27)
* Add new grid values new classes to replace inline stlyes with it * Fix navigation scroll behavior Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
M. Weber
Rohit Yadav
parent
84d48f79ff
commit
f71ed85964
|
|
@ -67,7 +67,7 @@ export default {
|
|||
z-index: 10;
|
||||
height: auto;
|
||||
|
||||
.ant-layout-sider-children {
|
||||
/deep/ .ant-layout-sider-children {
|
||||
overflow-y: hidden;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -37,3 +37,11 @@
|
|||
- repeatly used elements like buttons, inputs
|
||||
7. components
|
||||
- complex elements like dropdown, forms, table, search (usualy include this to components/FooterToolbar/ folder)
|
||||
|
||||
|
||||
# The "/deep/" combinator
|
||||
- use the /deep/ combinator (or in other versions ">>>") helps us to exclude "scoped" rules into global
|
||||
- e.g. <style scoped> .a .b .c {}</style> will scope a generated data ID like .a .b .c[data-abcde] {}
|
||||
- but <style scoped> .a /deep/ .b .c {} </style> will scope .a[data-abcde] .b .c {}
|
||||
- so everything after deep will be outside the defined scope
|
||||
- watch this article for technical information. https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<template>
|
||||
<a-row :gutter="12" :style="{ marginTop: '24px' }">
|
||||
<a-row class="capacity-dashboard" :gutter="24">
|
||||
<a-col :xl="18">
|
||||
<div class="ant-pro-capacity-dashboard__wrapper">
|
||||
<div class="ant-pro-capacity-dashboard__select">
|
||||
<div class="capacity-dashboard-wrapper">
|
||||
<div class="capacity-dashboard-select">
|
||||
<a-select
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
:defaultValue="zoneSelected.name"
|
||||
:value="zoneSelected.name"
|
||||
@change="changeZone"
|
||||
style="width: 100%" >
|
||||
@change="changeZone">
|
||||
<a-select-option v-for="(zone, index) in zones" :key="index">
|
||||
{{ zone.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="ant-pro-capacity-dashboard__button">
|
||||
<div class="capacity-dashboard-button">
|
||||
<a-tooltip placement="bottom">
|
||||
<template slot="title">
|
||||
Fetch Latest
|
||||
|
|
@ -24,23 +23,23 @@
|
|||
type="primary"
|
||||
shape="circle"
|
||||
@click="listCapacity(zoneSelected, true)">
|
||||
<a-icon style="font-size: 16px; padding: 2px" type="reload" />
|
||||
<a-icon class="capacity-dashboard-button-icon" type="reload" />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="ant-pro-capacity-dashboard__button">
|
||||
<div class="capacity-dashboard-button">
|
||||
<a-tooltip placement="bottom">
|
||||
<template slot="title">
|
||||
View Alerts
|
||||
</template>
|
||||
<a-button shape="circle">
|
||||
<router-link :to="{ name: 'alert' }">
|
||||
<a-icon style="font-size: 16px; padding: 2px" type="flag" />
|
||||
<a-icon class="capacity-dashboard-button-icon" type="flag" />
|
||||
</router-link>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="ant-pro-capacity-dashboard__button">
|
||||
<div class="capacity-dashboard-button">
|
||||
<a-tooltip placement="bottom">
|
||||
<template slot="title">
|
||||
View Hosts in Alert State
|
||||
|
|
@ -48,7 +47,7 @@
|
|||
<a-button type="danger" shape="circle">
|
||||
<router-link :to="{ name: 'host', query: {'state': 'Alert'} }">
|
||||
<a-badge dot>
|
||||
<a-icon style="font-size: 16px" type="desktop" />
|
||||
<a-icon class="capacity-dashboard-button-icon" type="desktop" />
|
||||
</a-badge>
|
||||
</router-link>
|
||||
</a-button>
|
||||
|
|
@ -57,12 +56,14 @@
|
|||
</div>
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="6"
|
||||
:xs="12"
|
||||
:sm="8"
|
||||
:md="6"
|
||||
:style="{ marginBottom: '12px' }"
|
||||
v-for="stat in stats"
|
||||
:key="stat.type">
|
||||
<chart-card :loading="loading">
|
||||
<div style="text-align: center; white-space: nowrap; overflow: hidden;">
|
||||
<div class="capacity-dashboard-chart-card-inner">
|
||||
<h4>{{ stat.name }}</h4>
|
||||
<a-progress type="dashboard" :percent="Number(parseFloat(stat.percentused, 10).toFixed(2))" :width="100" />
|
||||
</div>
|
||||
|
|
@ -78,7 +79,7 @@
|
|||
<a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<div :style="{ paddingTop: '12px', paddingLeft: '3px', whiteSpace: 'normal' }">
|
||||
<div class="capacity-dashboard-footer">
|
||||
<a-timeline pending="...">
|
||||
<a-timeline-item
|
||||
v-for="event in events"
|
||||
|
|
@ -198,19 +199,42 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-pro-capacity-dashboard {
|
||||
&__wrapper {
|
||||
.capacity-dashboard {
|
||||
margin-top: 24px;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__select {
|
||||
width: 100%;
|
||||
&-chart-card-inner {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__button {
|
||||
&-select {
|
||||
width: 100%; // for flexbox causes
|
||||
|
||||
.ant-select {
|
||||
width: 100%; // to fill flex item width
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
width: auto;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
&-button-icon {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding-top: 12px;
|
||||
padding-left: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,48 @@
|
|||
<template>
|
||||
<div class="page-header-index-wide">
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
class="user-dashboard-chart-card"
|
||||
:xl="16">
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
:xl="8"
|
||||
v-for="stat in stats"
|
||||
:key="stat.type"
|
||||
:style="{ marginBottom: '12px' }">
|
||||
<chart-card class="user-dashboard-chart-card" :loading="loading">
|
||||
<router-link :to="{ name: stat.path }">
|
||||
<div style="text-align: center">
|
||||
<h4>{{ stat.name }}</h4>
|
||||
<h1>{{ stat.count == undefined ? 0 : stat.count }}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="8"
|
||||
:style="{ marginTop: '24px' }">
|
||||
<chart-card>
|
||||
<div style="text-align: center">
|
||||
<a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
|
||||
<a-row class="usage-dashboard" :gutter="24">
|
||||
<a-col
|
||||
:xl="16">
|
||||
<a-row :gutter="12">
|
||||
<a-col
|
||||
class="usage-dashboard-chart-tile"
|
||||
:xs="12"
|
||||
:md="8"
|
||||
v-for="stat in stats"
|
||||
:key="stat.type">
|
||||
<chart-card class="usage-dashboard-chart-card" :loading="loading">
|
||||
<router-link :to="{ name: stat.path }">
|
||||
<div class="usage-dashboard-chart-card-inner">
|
||||
<h4>{{ stat.name }}</h4>
|
||||
<h1>{{ stat.count == undefined ? 0 : stat.count }}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col
|
||||
:xl="8">
|
||||
<chart-card>
|
||||
<div class="usage-dashboard-chart-card-inner">
|
||||
<a-button><router-link :to="{ name: 'event' }">View Events</router-link></a-button>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<div class="usage-dashboard-chart-footer">
|
||||
<a-timeline pending="...">
|
||||
<a-timeline-item
|
||||
v-for="event in events"
|
||||
:key="event.id"
|
||||
:color="getEventColour(event)">
|
||||
<span :style="{ color: '#999' }"><small>{{ event.created }}</small></span><br/>
|
||||
<span :style="{ color: '#666' }"><small>{{ event.type }}</small></span><br/>
|
||||
<span :style="{ color: '#aaa' }">({{ event.username }}) {{ event.description }}</span>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<div :style="{ paddingTop: '12px', paddingLeft: '3px', whiteSpace: 'normal' }">
|
||||
<a-timeline pending="...">
|
||||
<a-timeline-item
|
||||
v-for="event in events"
|
||||
:key="event.id"
|
||||
:color="getEventColour(event)">
|
||||
<span :style="{ color: '#999' }"><small>{{ event.created }}</small></span><br/>
|
||||
<span :style="{ color: '#666' }"><small>{{ event.type }}</small></span><br/>
|
||||
<span :style="{ color: '#aaa' }">({{ event.username }}) {{ event.description }}</span>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -153,9 +150,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-dashboard {
|
||||
.usage-dashboard {
|
||||
margin-top: 24px;
|
||||
|
||||
&-chart-tile {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&-chart-card {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
|
@ -163,5 +164,11 @@ export default {
|
|||
&-chart-card-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
padding-top: 12px;
|
||||
padding-left: 3px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue