jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Cleanup the graphs ui

Browse Source
This commit is contained in:
Johannes Zellner
2017-01-29 11:39:28 -08:00
parent 4be1f4dd73
commit 44775e1791
3 changed files with 59 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webadmin/src/views/certs.html
View File

@@ -31,7 +31,7 @@
<!-- DigitalOcean -->
<div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'digitalocean'">
<label class="control-label" for="dnsCredentialsDigitalOceanToken">API token</label>
<label class="control-label" for="dnsCredentialsDigitalOceanToken">DigitalOcean token</label>
<input type="text" class="form-control" ng-model="dnsCredentials.digitalOceanToken" id="dnsCredentialsDigitalOceanToken" name="digitalOceanToken" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'digitalocean'">
</div>
@@ -116,7 +116,7 @@
</tr>
<tr ng-show="config.isCustomDomain && dnsConfig.provider === 'digitalocean'">
<td class="text-muted" style="vertical-align: top;">API token</td>
<td class="text-muted" style="vertical-align: top;">DigitalOcean token</td>
<td class="text-right" style="vertical-align: top; white-space: nowrap;" ng-click-reveal="dnsConfig.token"><i>hidden</i></td>
</tr>
@@ -152,10 +152,10 @@
<div class="col-md-12">
<form name="defaultCertForm" ng-submit="setDefaultCert()">
<fieldset>
<p>Certificates are obtained via <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>.</p>
<p>Certificates are automatically obtained and renewed from <a href="https://letsencrypt.org/" target="_blank">Let’s Encrypt</a>. See the current rate limit <a href="https://letsencrypt.org/docs/rate-limits/" target="_blank">here</a>.</p>
<br/>
<label class="control-label" for="defaultCertInput">Fallback Certificate</label>
<p>This wildcard certificate that will be used for apps, if getting a Let’s Encrypt certificate failed. This might be due to rate limits on Let’s Encrypt side.</p>
<p>This wildcard certificate will be used for apps, should getting a Let’s Encrypt certificate fail.</p>
<div class="has-error text-center" ng-show="defaultCert.error">{{ defaultCert.error }}</div>
<div class="text-success text-center" ng-show="defaultCert.success"><b>Upload successful</b></div>
<div class="form-group" ng-class="{ 'has-error': (!defaultCert.cert.$dirty && defaultCert.error) }">

130
webadmin/src/views/graphs.html
View File

@@ -1,104 +1,68 @@
<br/>
<div class="row">
<div class="col-md-12">
<h1>Graphs</h1>
</div>
</div>
<br/>
<div class="graphs">
<div class="row shadow memory-app-container">
<h2>Disk Usage</h2>
<br/>
<div class="col-md-offset-2 col-md-4">
<h4>App Data <span class="badge">{{ diskUsage['data'].sum }} GB</span></h4>
<canvas id="dataDiskUsageChart" width="200" height="200"></canvas>
<p>
<span class="text-success">Free {{ diskUsage['data'].free }} GB</span>
&nbsp;
<span class="text-primary">Used {{ diskUsage['data'].used }} GB</span>
</p>
</div>
<div class="col-md-4">
<h4>System <span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
<canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
<p>
<span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
&nbsp;
<span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
</p>
</div>
<div class="col-md-2" style="text-align: justify;">
<h4>Description</h4>
App Data shows the virtual disk usage for application user data.
The full App Data disk size may not be entirely accounted for in the overall System usage numbers, depending on the utilization.
<br/>
<br/>
The System disk size includes application images, which may consume the majority of disk space. Running low on system disk space may indicate that too many apps are installed.
</div>
</div>
<br/>
<br/>
<div class="row shadow memory-app-container">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-12">
<div class="col-md-12 text-left">
<h2>Memory</h2>
</div>
</div>
<br/>
<div class="row shadow memory-app-container">
<div class="row">
<div class="col-md-6"">
<h3>Apps</h3>
<canvas id="memoryUsageAppsChart" width="200" height="200"></canvas>
</div>
<div class="col-md-6">
<h3>System</h3>
<canvas id="memoryUsageSystemChart" width="200" height="200"></canvas>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Apps</h3>
</div>
<div class="col-md-6">
<h3>System</h3>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-3">
<canvas id="memoryUsageAppsChart" width="200" height="200"></canvas>
</div>
<div class="col-md-3 text-left">
<p ng-repeat="data in memoryUsageApps">
<span style="color: {{data.color}};" class="memory-chart-label">{{ data.label }} {{ data.value }} MB</span>
&nbsp;
</p>
</div>
<div class="col-md-3">
<canvas id="memoryUsageSystemChart" width="200" height="200"></canvas>
</div>
<div class="col-md-3 text-left">
<p ng-repeat="data in memoryUsageSystem">
<span style="color: {{data.color}};" class="memory-chart-label">{{ data.label }} {{ data.value }} MB</span>
&nbsp;
</p>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<h4 ng-show="activeApp === 'system'">System</h4>
<h4 ng-show="activeApp !== 'system'">{{ activeApp.location }}</h4>
</ul>
<br/>
<canvas id="memoryAppChart" width="900" height="300"></canvas>
<p>Memory consumption in MB.</p>
</div>
</div>
<br/>
<canvas id="memoryAppChart" width="800" height="300"></canvas>
<p>Memory consumption over time in MB.</p>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-12 text-left">
<h2>Disk Usage</h2>
</div>
</div>
<div class="row shadow memory-app-container">
<div class="col-md-12">
<h4><span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
<canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
<p>
<span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
&nbsp;
<span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
</p>
</div>
</div>
</div>
</div>
</div>
<br/>

17
webadmin/src/views/graphs.js
View File

@@ -58,8 +58,8 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
$scope.setMemoryApp = function (app, color) {
$scope.activeApp = app;
var timePeriod = 2 * 60; // in minutes
var timeBucketSize = 30; // in minutes
var timePeriod = 12 * 60; // in minutes
var timeBucketSize = 60; // in minutes
var target;
if (app === 'system') target = 'summarize(collectd.localhost.memory.memory-used, "' + timeBucketSize + 'min", "avg")';
@@ -70,7 +70,10 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
// translate the data from bytes to MB
var data = result[0].datapoints.map(function (d) { return parseInt((d[0] / 1024 / 1024).toFixed(2)); });
var labels = data.map(function (d, index) { return '-' + (timePeriod - (index * timeBucketSize)) / 60 + 'h'; });
var labels = data.map(function (d, index) {
var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
return ('0' + dateTime.getHours()).slice(-2) + ':00';
});
var tmp = {
labels: labels,
@@ -103,17 +106,13 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
$scope.updateDiskGraphs = function () {
Client.graphs([
'averageSeries(collectd.localhost.df-loop*.df_complex-free)',
'averageSeries(collectd.localhost.df-loop*.df_complex-reserved)',
'averageSeries(collectd.localhost.df-loop*.df_complex-used)',
'averageSeries(collectd.localhost.df-*d*.df_complex-free)',
'averageSeries(collectd.localhost.df-*d*.df_complex-reserved)',
'averageSeries(collectd.localhost.df-*d*.df_complex-used)'
], '-1min', function (error, data) {
if (error) return console.log(error);
renderDisk('data', data[0], data[1], data[2]);
renderDisk('system', data[3], data[4], data[5]);
renderDisk('system', data[0], data[1], data[2]);
});
};
@@ -174,7 +173,7 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
$scope.installedApps.forEach(function (app) {
targets.push('summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "1min", "avg")');
targetsInfo.push({
label: app.location || 'naked domain',
label: app.location || 'bare domain',
color: getRandomColor(),
app: app
});