Use Monitor's WebColour in Host 'Disk Usage' graph
This commit is contained in:
parent
e4b1f8a64e
commit
7a5ee71080
|
@ -61,23 +61,36 @@ class HostController extends AppController {
|
|||
// Get disk usage for $mid
|
||||
$usage = shell_exec ("du -sh0 $zm_dir_events/$mid | awk '{print $1}'");
|
||||
} else {
|
||||
$monitors = $this->Monitor->find('list');
|
||||
$monitors = $this->Monitor->find('all', array(
|
||||
'fields' => array('Id', 'Name', 'WebColour')
|
||||
));
|
||||
$usage = array();
|
||||
|
||||
// Add each monitor's usage to array
|
||||
foreach ($monitors as $id => $name) {
|
||||
foreach ($monitors as $key => $value) {
|
||||
$id = $value['Monitor']['Id'];
|
||||
$name = $value['Monitor']['Name'];
|
||||
$color = $value['Monitor']['WebColour'];
|
||||
|
||||
$space = shell_exec ("du -s0 $zm_dir_events/$id | awk '{print $1}'");
|
||||
if ($space == null) {
|
||||
$space = 0;
|
||||
}
|
||||
$space = $space/1024/1024;
|
||||
$usage[$name] = rtrim($space);
|
||||
|
||||
$usage[$name] = array(
|
||||
'space' => rtrim($space),
|
||||
'color' => $color
|
||||
);
|
||||
}
|
||||
|
||||
// Add total usage to array
|
||||
$space = shell_exec( "df $zm_dir_events |tail -n1 | awk '{print $3 }'");
|
||||
$space = $space/1024/1024;
|
||||
$usage['Total'] = rtrim($space);
|
||||
$usage['Total'] = array(
|
||||
'space' => rtrim($space),
|
||||
'color' => '#F7464A'
|
||||
);
|
||||
}
|
||||
|
||||
$this->set(array(
|
||||
|
|
|
@ -337,14 +337,26 @@ ZoneMinder.controller('HostController', function($scope, Host) {
|
|||
var array = [];
|
||||
angular.forEach(diskPercent.usage, function(value, key) {
|
||||
var a = {
|
||||
'value' : Math.floor(value),
|
||||
'value' : Math.floor(value.space),
|
||||
'label' : key,
|
||||
'color' : '#F7464A',
|
||||
'highlight' : '#FFC870',
|
||||
'color' : value.color
|
||||
};
|
||||
array.push(a);
|
||||
});
|
||||
$scope.ddata = array;
|
||||
|
||||
$scope.doptions = {
|
||||
responsive: false,
|
||||
segmentShowStroke : true,
|
||||
segmentStrokeColor : '#fff',
|
||||
segmentStrokeWidth : 2,
|
||||
percentageInnerCutout : 50, // This is 0 for Pie charts
|
||||
animationSteps : 1,
|
||||
animationEasing : 'easeOutBounce',
|
||||
animateRotate : false,
|
||||
animateScale : false,
|
||||
legendTemplate : '<ul class="list-inline tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="color:<%=segments[i].fillColor%>"><%if(segments[i].label){%><%=segments[i].label%>: <%=segments[i].value%>Gb <%}%></span></li><%}%></ul>'
|
||||
};
|
||||
});
|
||||
|
||||
Host.getLoad(function(load) {
|
||||
|
@ -363,16 +375,4 @@ ZoneMinder.controller('HostController', function($scope, Host) {
|
|||
};
|
||||
});
|
||||
|
||||
$scope.doptions = {
|
||||
responsive: false,
|
||||
segmentShowStroke : true,
|
||||
segmentStrokeColor : '#fff',
|
||||
segmentStrokeWidth : 2,
|
||||
percentageInnerCutout : 50, // This is 0 for Pie charts
|
||||
animationSteps : 1,
|
||||
animationEasing : 'easeOutBounce',
|
||||
animateRotate : false,
|
||||
animateScale : false,
|
||||
legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
|
||||
};
|
||||
});
|
||||
|
|
|
@ -9,20 +9,18 @@ xhtmlHeaders( __FILE__, 'Host' );
|
|||
<div class="container-fluid" ng-controller="HostController">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-3">
|
||||
<h3>Disk Usage in Gigabytes</h3>
|
||||
|
||||
<div class="col-md-6">
|
||||
<canvas tc-chartjs-polararea chart-data="ddata" chart-options="doptions" width="250px" height="250px" chart-legend="doughnutChart1"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6" tc-chartjs-legend="" chart-legend="doughnutChart1"></div>
|
||||
<div tc-chartjs-legend="" chart-legend="doughnutChart1"></div>
|
||||
</div> <!-- End disk usage -->
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-3">
|
||||
<h3>CPU Load</h3>
|
||||
|
||||
<canvas tc-chartjs-line chart-data="loadData" chart-options="doptions" width="250px" height="250px"></canvas>
|
||||
<canvas tc-chartjs-line chart-data="loadData" width="250px" height="250px"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue