openstack/horizon
Code Issues Proposed changes

Quota pages now inherit from Bootstrap Theme

Browse Source 
It was noted, while fixing the barcharts, that there were several
elements of the Pie Chart Quota pages that needed to use proper
Bootstrap markup.

Styles for Quota were hardcoded.  The styles were moved from
horizon.scss into their own component file and made to properly use
theme variables.

Partially-Implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards

Change-Id: I7bdf4f9366b7c5b9c8f61340bdc96a779c503366
This commit is contained in:
Diana Whitten 2015-11-13 13:52:02 -07:00
parent 00ccb87b93
commit 3a2564e398
8 changed files with 81 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
horizon/templates/horizon/common/_limit_summary.html
View File

@ -1,20 +1,30 @@
{% load i18n horizon humanize sizeformat %}
<div class="quota-dynamic">
<h3 class="quota-heading">{% trans "Limit Summary" %}</h3>
{% for quota in charts %}
<div class="d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% quotapercent quota.used quota.max %}"></div>
<strong> {{ quota.name }} <br />
{% if quota.max|quotainf != '-1' %}
{% blocktrans with used=quota.used|intcomma available=quota.max|quotainf|intcomma %}
Used <span> {{ used }} </span>of<span> {{ available }} </span>{% endblocktrans %}
{% else %}
{% blocktrans with used=quota.used|intcomma %}
Used <span> {{ used }} </span>(No Limit){% endblocktrans %}
{% endif %}
</strong>
</div>
{% endfor %}
</div>
{% spaceless %}
<div class="quota-dynamic">
<h3 class="quota-heading">{% trans "Limit Summary" %}</h3>
{% for quota in charts %}
{% if forloop.last or forloop.counter0|divisibleby:6 %}
</div>
{% endif %}
{% if forloop.first or forloop.counter0|divisibleby:6 %}
<div class="row">
{% endif %}
<div class="d3_quota_bar col-lg-2 col-md-3 col-sm-4 col-xs-6 fix-it">
<div class="d3_pie_chart_usage" data-used="{% quotapercent quota.used quota.max %}"></div>
<div class="quota_title" title="{{ quota.name }}" data-toggle="tooltip"> {{ quota.name }}</div>
<div class="quota_subtitle">
{% if quota.max|quotainf != '-1' %}
{% blocktrans with used=quota.used|intcomma available=quota.max|quotainf|intcomma %}
Used <span> {{ used }} </span>of<span> {{ available }} </span>
{% endblocktrans %}
{% else %}
{% blocktrans with used=quota.used|intcomma %}
Used <span> {{ used }} </span>(No Limit)
{% endblocktrans %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endspaceless %}

29
openstack_dashboard/dashboards/admin/hypervisors/templates/hypervisors/index.html
View File

@ -6,25 +6,28 @@
{% block main %}
<div class="quota-dynamic">
<h3>{% trans "Hypervisor Summary" %}</h3>
<div class="d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.vcpus_used stats.vcpus 100 %}"></div>
<strong>{% trans "VCPU Usage" %} <br />
{% blocktrans with used=stats.vcpus_used|intcomma available=stats.vcpus|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
</strong>
<div class="col-sm-4 d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.vcpus_used stats.vcpus 100 %}"></div>
<div class="h5">{% trans "VCPU Usage" %}</div>
<div class="h6">
{% blocktrans with used=stats.vcpus_used|intcomma available=stats.vcpus|intcomma %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
</div>
</div>
<div class="d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.memory_mb_used stats.memory_mb 100 %}"></div>
<strong>{% trans "Memory Usage" %} <br />
<div class="col-sm-4 d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.memory_mb_used stats.memory_mb 100 %}"></div>
<div class="h5">{% trans "Memory Usage" %}</div>
<div class="h6">
{% blocktrans with used=stats.memory_mb_used|mb_float_format available=stats.memory_mb|mb_float_format %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
</strong>
</div>
</div>
<div class="d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.local_gb_used stats.local_gb 100 %}"></div>
<strong>{% trans "Local Disk Usage" %} <br />
<div class="col-sm-4 d3_quota_bar">
<div class="d3_pie_chart_usage" data-used="{% widthratio stats.local_gb_used stats.local_gb 100 %}"></div>
<div class="h5">{% trans "Local Disk Usage" %}</div>
<div class="h6">
{% blocktrans with used=stats.local_gb_used|diskgbformat available=stats.local_gb|diskgbformat %}Used <span> {{ used }} </span> of <span> {{ available }} </span>{% endblocktrans %}
</strong>
</div>
</div>
</div>
<div class="row-fluid">

2
openstack_dashboard/static/dashboard/scss/components/_pie_charts.scss
View File

@ -31,8 +31,6 @@
// This is who sets the size of the pie chart
.legacy-pie-chart {
width: $font-size-h1*3;
height: $font-size-h1*3;
// The container arc's color and stroke
.arc {

26
openstack_dashboard/static/dashboard/scss/components/_quota.scss Normal file
View File

@ -0,0 +1,26 @@
.d3_quota_bar {
text-align: center;
}
.d3_pie_chart_usage {
width: $font-size-h2 * 3;
display: inline-block;
}
.quota-dynamic {
overflow: hidden;
padding-bottom: $padding-large-horizontal;
}
.quota_title {
margin-bottom: $padding-large-vertical;
@extend .h5;
& > span {
color: $gray-light;
}
}
.quota_subtitle {
@extend .h6;
}

43
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -29,6 +29,7 @@
@import "components/network_topology";
@import "components/context_selection";
@import "components/pie_charts";
@import "components/quota";
@import "components/table_actions";
@import "/framework/framework";
@import "components/tables";
@ -450,48 +451,6 @@ iframe {
background-color: $brand-danger;
}
.d3_quota_bar {
width: 20%;
margin-bottom: 8px;
margin-top: 10px;
float: left;
text-align: center;
}
.quota-dynamic {
overflow: hidden;
margin-bottom: 8px;
}
.quota-heading {
font-weight: normal;
font-size: 24px;
margin-bottom: 10px;
}
.quota_title {
color: $gray-light;
padding-bottom: 0;
margin-bottom: 8px;
}
.quota_title strong {
color: $text-color;
}
.quota_title strong span {
font-weight: normal;
}
.quota_title p {
float: right;
margin-bottom: 0;
}
.quota_bar {
margin: -8px 0 8px;
}
div .flavor_table {
border: 1px solid $table-border-color;
width: 100%;

7
openstack_dashboard/themes/default/horizon/_styles.scss
View File

@ -1,11 +1,12 @@
@import '/bootstrap/scss/bootstrap/mixins/_vendor-prefixes.scss';
@import 'components/_context_selection';
@import 'components/breadcrumb_header';
@import 'components/context_selection';
@import 'components/pie_charts';
@import 'components/quota';
@import 'components/sidebar';
@import 'components/tables';
@import 'components/table_actions';
@import 'components/pie_charts';
@import 'components/breadcrumb_header';
.navbar-brand {
// The 114 is a legacy value to push the context-menu over

3
openstack_dashboard/themes/default/horizon/components/_quota.scss Normal file
View File

@ -0,0 +1,3 @@
.quota_title {
font-weight: bold;
}

4
openstack_dashboard/themes/material/static/horizon/_styles.scss
View File

@ -20,8 +20,10 @@
}
}
#main-content {
#main_content {
display: block;
min-width: unset;
width: 100%;
}