Use Monitor's WebColour in Host 'Disk Usage' graph

web/api/app/Controller/HostController.php

@@ -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(

web/skins/bootstrap/js/controllers.js

@@ -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',
+				'color' : value.color
-  	    'highlight'  : '#FFC870',
 			};
 			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>'
-	};
 });

web/skins/bootstrap/views/host.php

@@ -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>