The active memory and swap charts will now show a danger highlight if above the memory threshold.

Author: xcjs

src/app/pages/memory/memory.controller.js

@@ -6,16 +6,20 @@
         '$interval',
         'refreshInterval',
         'MemoryResource',
+        'memoryPercentageThreshold',
         MemoryController]);
 
-    function MemoryController($scope, $interval, refreshInterval, MemoryResource) {
+    function MemoryController($scope, $interval, refreshInterval, MemoryResource, memoryPercentageThreshold) {
         var vm = this;
 
         vm.memory = {};
+        vm.memoryPercentageThreshold = memoryPercentageThreshold;
 
         vm.activeChartData = [];
         vm.activeChartLabels = [];
 
+        vm.usedMemoryPercent = 0;
+
         vm.detailedChartData = [];
         vm.detailedChartLabels = [];
 
@@ -25,6 +29,8 @@
         vm.swapChartData = [];
         vm.swapChartLabels = [];
 
+        vm.usedSwapPercent = 0;
+
         vm.chartOptions = {
             animation: false,
             showTooltips: false
@@ -47,6 +53,8 @@
                 vm.activeChartData[0] = vm.memory.used;
                 vm.activeChartLabels[0] = buildChartLabel('Used', vm.memory.used);
 
+                vm.usedMemoryPercent = calcTotalMemPercent(vm.memory.used);
+
                 vm.activeChartData[1] = (vm.memory.total - vm.memory.used).toFixed(0);
                 vm.activeChartLabels[1] = buildChartLabel('Available', vm.activeChartData[1]);
 
@@ -69,6 +77,8 @@
                 vm.swapChartData[0] = vm.memory.swap.used;
                 vm.swapChartLabels[0] = buildChartLabel('Used', vm.memory.swap.used, calcSwapPercent);
 
+                vm.usedSwapPercent = calcSwapPercent(vm.swapChartData[0]);
+
                 vm.swapChartData[1] = (vm.memory.swap.total - vm.memory.swap.used).toFixed(2);
                 vm.swapChartLabels[1] = buildChartLabel('Free', vm.swapChartData[1], calcSwapPercent);
             });

src/app/pages/memory/memory.html

@@ -1,7 +1,8 @@
 <div class="row">
 
     <div ng-if="vm.activeChartData.length > 0" class="col-md-4">
-        <div ba-panel ba-panel-title="Active Memory Utilization" ba-panel-class="with-scroll ">
+        <div ba-panel ba-panel-title="Active Memory Utilization" ba-panel-class="with-scroll "
+             ng-class="{'panel-danger': vm.usedMemoryPercent >= vm.memoryPercentageThreshold}">
            <h4>{{vm.memory.total}} MB</h4>
             <canvas id="pie" class="chart chart-pie" chart-data="vm.activeChartData" chart-labels="vm.activeChartLabels"
                     chart-legend="true" chart-options="vm.chartOptions"></canvas>
@@ -17,7 +18,8 @@ <h4>{{vm.memory.total}} MB</h4>
     </div>
 
     <div ng-if="vm.swapChartData.length > 0" class="col-md-4">
-        <div ba-panel ba-panel-title="Swap Utilization" ba-panel-class="with-scroll ">
+        <div ba-panel ba-panel-title="Swap Utilization" ba-panel-class="with-scroll "
+             ng-class="{'panel-danger': vm.usedSwapPrecent >= vm.memoryPercentageThreshold}">
             <h4>{{vm.memory.swap.total}} MB</h4>
             <canvas id="pie" class="chart chart-pie" chart-data="vm.swapChartData" chart-labels="vm.swapChartLabels"
                     chart-legend="true" chart-options="vm.chartOptions"></canvas>