Merge pull request #833 from nclsHart/webui-cpu-additional-stats

[Web UI] Add additional cpu stats

glances/outputs/static/html/plugins/cpu.html

@@ -1,22 +1,82 @@
-<div class="table">
+<div class="row">
-    <div class="table-row">
+    <div class="col-sm-24 col-md-12 col-lg-8">
-        <div class="table-cell text-left title">CPU</div>
+        <div class="table">
-        <div class="table-cell">{{ statsCpu.total }}%</div>
+            <div class="table-row">
-    </div>
+                <div class="table-cell text-left title">CPU</div>
-    <div class="table-row">
+                <div class="table-cell">{{ statsCpu.total }}%</div>
-        <div class="table-cell text-left">user:</div>
+            </div>
-        <div class="table-cell" ng-class="statsCpu.getDecoration('user')">
+            <div class="table-row">
-            {{ statsCpu.user }}%
+                <div class="table-cell text-left">user:</div>
+                <div class="table-cell" ng-class="statsCpu.getDecoration('user')">
+                    {{ statsCpu.user }}%
+                </div>
+            </div>
+            <div class="table-row">
+                <div class="table-cell text-left">system:</div>
+                <div class="table-cell" ng-class="statsCpu.getDecoration('system')">
+                    {{ statsCpu.system }}%
+                </div>
+            </div>
+            <div class="table-row">
+                <div class="table-cell text-left">idle:</div>
+                <div class="table-cell">{{ statsCpu.idle }}%</div>
+            </div>
         </div>
     </div>
-    <div class="table-row">
+    <div class="hidden-xs hidden-sm col-md-12 col-lg-8">
-        <div class="table-cell text-left">system:</div>
+        <div class="table">
-        <div class="table-cell" ng-class="statsCpu.getDecoration('system')">
+            <div class="table-row">
-            {{ statsCpu.system }}%
+                <div class="table-cell text-left">nice:</div>
+                <div class="table-cell">
+                    {{ statsCpu.nice }}%
+                </div>
+            </div>
+            <div class="table-row" ng-show="statsCpu.irq != undefined">
+                <div class="table-cell text-left">irq:</div>
+                <div class="table-cell">
+                    {{ statsCpu.irq }}%
+                </div>
+            </div>
+            <div class="table-row" ng-show="statsCpu.iowait != undefined">
+                <div class="table-cell text-left">iowait:</div>
+                <div class="table-cell" ng-class="statsCpu.getDecoration('iowait')">
+                    {{ statsCpu.iowait }}%
+                </div>
+            </div>
+            <div class="table-row" ng-show="statsCpu.steal != undefined">
+                <div class="table-cell text-left">steal:</div>
+                <div class="table-cell" ng-class="statsCpu.getDecoration('steal')">
+                    {{ statsCpu.steal }}%
+                </div>
+            </div>
         </div>
     </div>
-    <div class="table-row">
+    <div class="hidden-xs hidden-sm hidden-md col-lg-8">
-        <div class="table-cell text-left">idle:</div>
+        <div class="table">
-        <div class="table-cell">{{ statsCpu.idle }}%</div>
+            <div class="table-row">
+                <div class="table-cell text-left">ctx_sw:</div>
+                <div class="table-cell" ng-class="statsCpu.getDecoration('ctx_switches')">
+                    {{ statsCpu.ctx_switches }}
+                </div>
+            </div>
+            <div class="table-row">
+                <div class="table-cell text-left">inter:</div>
+                <div class="table-cell">
+                    {{ statsCpu.interrupts }}
+                </div>
+            </div>
+            <div class="table-row">
+                <div class="table-cell text-left">sw_int:</div>
+                <div class="table-cell">
+                    {{ statsCpu.soft_interrupts }}
+                </div>
+            </div>
+            <div class="table-row" ng-show="!statsSystem.isLinux()">
+                <div class="table-cell text-left">syscal:</div>
+                <div class="table-cell">
+                    {{ statsCpu.syscalls }}
+                </div>
+            </div>
+        </div>
     </div>
 </div>

glances/outputs/static/html/plugins/cpu_more.html

@@ -1,26 +0,0 @@
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left">nice:</div>
-        <div class="table-cell">
-            {{ statsCpu.nice }}%
-        </div>
-    </div>
-    <div class="table-row" ng-show="statsCpu.irq != undefined">
-        <div class="table-cell text-left">irq:</div>
-        <div class="table-cell">
-            {{ statsCpu.irq }}%
-        </div>
-    </div>
-    <div class="table-row" ng-show="statsCpu.iowait != undefined">
-        <div class="table-cell text-left">iowait:</div>
-        <div class="table-cell" ng-class="statsCpu.getDecoration('iowait')">
-            {{ statsCpu.iowait }}%
-        </div>
-    </div>
-    <div class="table-row" ng-show="statsCpu.steal != undefined">
-        <div class="table-cell text-left">steal:</div>
-        <div class="table-cell" ng-class="statsCpu.getDecoration('steal')">
-            {{ statsCpu.steal }}%
-        </div>
-    </div>
-</div>

glances/outputs/static/html/stats.html

@@ -23,12 +23,9 @@
         <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!arguments.disable_quicklook">
             <section id="quicklook" class="plugin" ng-include src="'plugins/quicklook.html'"></section>
         </div>
-        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!arguments.disable_cpu && !arguments.percpu">
+        <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && !arguments.percpu">
             <section id="cpu" class="plugin" ng-include src="'plugins/cpu.html'"></section>
         </div>
-        <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!arguments.disable_cpu && !arguments.percpu">
-            <section id="cpu_more" class="plugin" ng-if="statsCpu.nice != undefined" ng-include src="'plugins/cpu_more.html'"></section>
-        </div>
         <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!arguments.disable_cpu && arguments.percpu">
             <section id="per_cpu" class="plugin" ng-include src="'plugins/per_cpu.html'"></section>
         </div>

glances/outputs/static/js/services/plugins/glances_cpu.js

@@ -1,7 +1,7 @@
 glancesApp.service('GlancesPluginCpu', function() {
     var _pluginName = "cpu";
     var _view = {};
-    
+
     this.total = null;
     this.user = null;
     this.system = null;
@@ -10,6 +10,10 @@ glancesApp.service('GlancesPluginCpu', function() {
     this.irq = null;
     this.iowait = null;
     this.steal = null;
+    this.ctx_switches = null;
+    this.interrupts = null;
+    this.soft_interrupts = null;
+    this.syscalls = null;
 
     this.setData = function(data, views) {
         data = data[_pluginName];
@@ -23,6 +27,10 @@ glancesApp.service('GlancesPluginCpu', function() {
         this.irq = data.irq;
         this.iowait = data.iowait;
         this.steal = data.steal;
+        this.ctx_switches = Math.floor(data.ctx_switches / data.time_since_update);
+        this.interrupts = Math.floor(data.interrupts / data.time_since_update);
+        this.soft_interrupts = Math.floor(data.soft_interrupts / data.time_since_update);
+        this.syscalls = Math.floor(data.syscalls / data.time_since_update);
     }
 
     this.getDecoration = function(value) {