Commit 97aad88f authored by Christos Stavrakakis's avatar Christos Stavrakakis
Browse files

Merge branch 'release-0.16-admin-charts' of https://github.com/apyrgio/synnefo into release-0.16

parents 1367c67d 0c615ed7
......@@ -1765,17 +1765,6 @@ Disabling Admin
The easiest way to disable the Admin Dashboard is to set the `ADMIN_ENABLED`
setting to `False`.
Enabling Charts
---------------
In order to enable the "Charts" view in the "Reports" tab, you must set the
`ADMIN_ENABLE_CHARTS` setting to `True`. The charting software that is used is
Highcharts by HighSoft AS.
Due to the licensing nature of Highcharts, charts are disabled by default. You
can view the Highcharts license [#f1]_ and the accompanying FAQ [#f2]_, to
decide whether to enable them or not.
List of all Synnefo components
==============================
......@@ -2845,9 +2834,3 @@ Changelog, NEWS
* v0.14.2 :ref:`Changelog <Changelog-0.14.2>`, :ref:`NEWS <NEWS-0.14.2>`
* v0.14 :ref:`Changelog <Changelog-0.14>`, :ref:`NEWS <NEWS-0.14>`
* v0.13 :ref:`Changelog <Changelog-0.13>`, :ref:`NEWS <NEWS-0.13>`
.. rubric:: Footnotes
.. [#f1] www.highcharts.com/license, http://shop.highsoft.com/highcharts.html
.. [#f2] http://shop.highsoft.com/highcharts.html, http://shop.highsoft.com/faq/non-commercial
/*-- Chart --*/
.c3 svg {
font: 10px sans-serif;
}
.c3 path, .c3 line {
fill: none;
stroke: #000;
}
.c3 text {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges;
}
.c3-chart-arc path {
stroke: #fff;
}
.c3-chart-arc text {
fill: #fff;
font-size: 13px;
}
/*-- Axis --*/
.c3-axis-x .tick {
}
.c3-axis-x-label {
}
.c3-axis-y .tick {
}
.c3-axis-y-label {
}
.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}
/*-- Grid --*/
.c3-grid line {
stroke: #aaa;
}
.c3-grid text {
fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}
/*-- Text on Chart --*/
.c3-text {
}
.c3-text.c3-empty {
fill: #808080;
font-size: 2em;
}
/*-- Line --*/
.c3-line {
stroke-width: 1px;
}
/*-- Point --*/
.c3-circle._expanded_ {
stroke-width: 1px;
stroke: white;
}
.c3-selected-circle {
fill: white;
stroke-width: 2px;
}
/*-- Bar --*/
.c3-bar {
stroke-width: 0;
}
.c3-bar._expanded_ {
fill-opacity: 0.75;
}
/*-- Arc --*/
.c3-chart-arcs-title {
font-size: 1.3em;
}
/*-- Focus --*/
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
stroke-width: 2px;
}
/*-- Region --*/
.c3-region {
fill: steelblue;
fill-opacity: .1;
}
/*-- Brush --*/
.c3-brush .extent {
fill-opacity: .1;
}
/*-- Select - Drag --*/
.c3-dragarea {
}
/*-- Legend --*/
.c3-legend-item {
font-size: 12px;
}
.c3-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1
}
/*-- Tooltip --*/
.c3-tooltip {
border-collapse:collapse;
border-spacing:0;
background-color:#fff;
empty-cells:show;
-webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
box-shadow: 7px 7px 12px -9px rgb(119,119,119);
opacity: 0.9;
}
.c3-tooltip tr {
border:1px solid #CCC;
}
.c3-tooltip th {
background-color: #aaa;
font-size:14px;
padding:2px 5px;
text-align:left;
color:#FFF;
}
.c3-tooltip td {
font-size:13px;
padding: 3px 6px;
background-color:#fff;
border-left:1px dotted #999;
}
.c3-tooltip td > span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
}
.c3-tooltip td.value{
text-align: right;
}
.c3-area {
stroke-width: 0;
opacity: 0.2;
}
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
fill: #777;
}
.c3-chart-arc .c3-gauge-value {
fill: #000;
font-size: 28px;
}
......@@ -2,7 +2,7 @@
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 17, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 5, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......@@ -23,37 +23,37 @@ time, mark, audio, video {
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 22, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 24, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 26, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 28, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 30, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 103, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 32, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
/* line 116, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
This diff is collapsed.
......@@ -11,15 +11,15 @@ $(document).ready(function() {
success: function(response, statusText, jqXHR) {
astakos_stats = response;
infraUsage(astakos_stats);
for (var key in astakos_stats.resources.all) {
resourceUsage(astakos_stats, key);
}
statusPerProvider(astakos_stats);
statusPerProviderReversed(astakos_stats);
exclusiveProviders(astakos_stats);
for (var key in astakos_stats.resources.all) {
resourceUsage(astakos_stats, key);
};
},
error: function(jqXHR, statusText) {
console.log('error', statusText)
console.log('error', statusText);
}
});
......@@ -28,25 +28,24 @@ $(document).ready(function() {
type: 'GET',
contentType: 'application/json',
success: function(response, statusText, jqXHR) {
cyclades_stats = response
cyclades_stats = response;
serverStatus(cyclades_stats);
ipPoolStatus(cyclades_stats);
diskTemplates(cyclades_stats);
imagesStats(cyclades_stats);
},
error: function(jqXHR, statusText) {
console.log('error', statusText)
console.log('error', statusText);
}
});
// when page is loaded show charts whose sidebar a is active
function display_charts_init(){
$('.charts .sidebar a.active').each(function(){
var el = $(this).attr('data-chart');
$('.well').find('div[data-chart='+el+']').show();
});
};
}
display_charts_init();
......@@ -54,6 +53,6 @@ $(document).ready(function() {
e.preventDefault();
$(this).toggleClass('active');
var el = $(this).attr('data-chart');
$('.well').find('div[data-chart='+el+']').stop(true, false).slideToggle('slow')
$('.well').find('div[data-chart='+el+']').stop(true, false).slideToggle('slow');
});
});
This diff is collapsed.
......@@ -357,3 +357,25 @@ svg>text:last-child {
left: 10px;
bottom: 10px;
}
.charts {
.info {
overflow: hidden;
}
h3 {
text-align: center;
margin-bottom: 1em;
}
.c3-axis {
fill: $text-color;
}
.c3 path, .c3 line {
stroke: $text-color;
}
.c3-legend-item text {
fill: $text-color;
}
.c3-tooltip {
color: #222;
}
}
......@@ -17,6 +17,10 @@
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,700,300,600' rel='stylesheet' type='text/css'>
</head>
{% block custom-css %}
{% endblock %}
<body>
<div class="wrapper">
{% block nav-bar %}
......@@ -33,7 +37,6 @@
<a href="{% url admin-home %}" title="Homepage" class="navbar-brand home-icon"><img src="{{ BRANDING_IMAGE_MEDIA_URL }}cloudbar_home.png" alt="S" /></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
{% for view, view_dict in views.items %}
......@@ -46,9 +49,7 @@
<span class="snf-angle-down arrow"></span></a>
<ul class="dropdown-menu align-left">
<li {% block nav-stats %}{% endblock %}><a href="{% url admin-stats %}">Stats</a></li>
{% if ADMIN_ENABLE_CHARTS %}
<li {% block nav-charts %}{% endblock %}><a href="{% url admin-charts %}">Charts</a></li>
{% endif %}
</ul>
</li>
</ul>
......
{% extends "admin/base.html" %}
{% block custom-css %}
<link href="{{ ADMIN_MEDIA_URL }}css/c3.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block nav-reports %}
class="has-dropdown active"
{% endblock %}
......@@ -24,27 +28,57 @@ class="active"
&nbsp;
</div>
<div class="info well">
<div id="infra-usage" class="chart" data-chart="resource-usage"></div>
<div id="infra-usage-wrap" class="chart" data-chart="resource-usage">
<h3>Infra usage</h3>
<div id="infra-usage"></div>
</div>
<div id="resource-usage" class="chart" data-chart="resource-usage"></div>
<div id="provider-status" class="chart" data-chart="temp"></div>
<div id="provider-status-reversed" class="chart" data-chart="temp"></div>
<div id="provider-exclusiveness" class="chart" data-chart="temp"></div>
<div id="server-status" class="chart" data-chart="vm-status"></div>
<div id="ip-pool-status" class="chart" data-chart="ip-status"></div>
<div id="disk-templates" class="chart" data-chart="disk-templates"></div>
<div id="images" class="chart" data-chart="images"></div>
<div id="provider-status-wrap" class="chart" data-chart="temp">
<h3>Providers per user status<h3>
<div id="provider-status"></div>
</div>
<div id="provider-status-reversed-wrap" class="chart" data-chart="temp">
<h3>Status per user provider</h3>
<div id="provider-status-reversed"></div>
</div>
<div id="provider-exclusiveness-wrap" class="chart" data-chart="temp">
<h3>Provider exclusiveness</h3>
<div id="provider-exclusiveness"></div>
</div>
<div id="server-status-wrap" class="chart" data-chart="vm-status">
<h3>Server status</h3>
<div id="server-status"></div>
</div>
<div id="ip-pool-status-wrap" class="chart" data-chart="ip-status">
<h3>IP pool status</h3>
<div id="ip-pool-status"></div>
</div>
<div id="disk-templates-wrap" class="chart" data-chart="disk-templates">
<h3>Disk templates</h3>
<div id="disk-templates"></div>
</div>
<div id="images-wrap" class="chart" data-chart="images">
<h3>Images</h3>
<div id="images"></div>
</div>
</div>
</div>
{% endblock %}
{% block custom-javascript %}
<script src="{{ MEDIA_URL }}admin/js/highstock.src.js"></script>
<script src="{{ MEDIA_URL }}admin/js/Highcharts_drilldown.src.js"></script>
<!-- Load d3.js and c3.js -->
<script src="{{ ADMIN_MEDIA_URL }}js/d3.v3.min.js"></script>
<!--Switch to c3.min at some point-->
<script src="{{ ADMIN_MEDIA_URL }}js/c3.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/highstock.src.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/Highcharts_drilldown.src.js"></script>
{% if request.COOKIES.theme == 'dark' %}
<script src="{{ MEDIA_URL }}admin/js/charts_theme.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts_theme.js"></script>
{% endif %}
<script src="{{ MEDIA_URL }}admin/js/charts.js"></script>
<script src="{{ MEDIA_URL }}admin/js/charts_common.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts_common.js"></script>
{% endblock %}
......
......@@ -143,7 +143,6 @@ def admin_user_required(func, permitted_groups=admin_settings.\
default_dict = {
'ADMIN_MEDIA_URL': admin_settings.ADMIN_MEDIA_URL,
'UI_MEDIA_URL': UI_MEDIA_URL,
'ADMIN_ENABLE_CHARTS': admin_settings.ADMIN_ENABLE_CHARTS,
'mail': {
'sender': astakos_settings.SERVER_EMAIL,
'subject': sample_subject,
......@@ -193,10 +192,6 @@ def stats(request):
@admin_user_required
def charts(request):
"""Charts view."""
if not admin_settings.ADMIN_ENABLE_CHARTS:
raise AdminHttp404("The charting functionality has been disabled.\n"
"For more information, please consult the Synnefo "
"settings.")
admin_log(request)
return direct_to_template(request, "admin/charts.html",
extra_context=default_dict)
......
......@@ -33,18 +33,6 @@ AUTH_COOKIE_NAME = getattr(settings, 'ADMIN_AUTH_COOKIE_NAME',
getattr(settings, 'UI_AUTH_COOKIE_NAME',
'_pithos2_a'))
# This setting enables the charts presentation of Astakos/Cyclades resources.
# The charting software that is used is Highcharts by HighSoft AS.
#
# Due to the licensing nature of Highcharts, it is disabled by default. You can
# view the Highcharts license [1] and the accompanying FAQ [2], to decide
# whether to enable it or not.
#
# [1]: www.highcharts.com/license, http://shop.highsoft.com/highcharts.html
# [2]: http://shop.highsoft.com/highcharts.html,
# http://shop.highsoft.com/faq/non-commercial
ADMIN_ENABLE_CHARTS = getattr(settings, 'ADMIN_ENABLE_CHARTS', False)
# A dictionary with the enabled admin model views.
DEFAULT_ADMIN_VIEWS = {
'user': {'label': 'Users'},
......
......@@ -6,18 +6,6 @@
#ADMIN_MEDIA_URL = ""
#ADMIN_AUTH_COOKIE_NAME = '_pithos2_a'
# This setting enables the charts presentation of Astakos/Cyclades resources.
# The charting software that is used is Highcharts by HighSoft AS.
#
# Due to the licensing nature of Highcharts, it is disabled by default. You can
# view the Highcharts license [1] and the accompanying FAQ [2], to decide
# whether to enable it or not.
#
# [1]: www.highcharts.com/license, http://shop.highsoft.com/highcharts.html
# [2]: http://shop.highsoft.com/highcharts.html,
# http://shop.highsoft.com/faq/non-commercial
#ADMIN_ENABLE_CHARTS = False
## A dictionary with the enabled admin model views.
#ADMIN_VIEWS = {
# 'user': {'label': 'Users'},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment