Better display of per-cpu component with a lot of cpus

glances/outputs/static/js/components/plugin-percpu/controller.js

+import _ from "lodash";
 
 export default function GlancesPluginPercpuController($scope, GlancesStats, GlancesPluginHelper) {
     var vm = this;
-    vm.cpus = [];
+    vm.cpusChunks = [];
 
     vm.$onInit = function () {
         loadData(GlancesStats.getData());
@@ -14,12 +15,12 @@ export default function GlancesPluginPercpuController($scope, GlancesStats, Glan
     var loadData = function (data) {
         var percpuStats = data.stats['percpu'];
 
-        vm.cpus = [];
+        var cpus = [];
 
         for (var i = 0; i < percpuStats.length; i++) {
             var cpuData = percpuStats[i];
 
-            vm.cpus.push({
+            cpus.push({
                 'number': cpuData.cpu_number,
                 'total': cpuData.total,
                 'user': cpuData.user,
@@ -29,7 +30,9 @@ export default function GlancesPluginPercpuController($scope, GlancesStats, Glan
                 'steal': cpuData.steal
             });
         }
-    }
+
+        vm.cpusChunks = _.chunk(cpus, 4);
+    };
 
     vm.getUserAlert = function (cpu) {
         return GlancesPluginHelper.getAlert('percpu', 'percpu_user_', cpu.user)

glances/outputs/static/js/components/plugin-percpu/view.html

 <section id="percpu" class="plugin">
-    <div class="table">
+    <div class="table" ng-repeat="cpus in vm.cpusChunks">
         <div class="table-row">
-            <div class="table-cell text-left title">PER CPU</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number">{{ percpu.total }}%</div>
+            <div class="table-cell text-left title"><span ng-if="$first">PER CPU</span></div>
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number">{{ percpu.total }}%</div>
         </div>
         <div class="table-row">
             <div class="table-cell text-left">user:</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
                  ng-class="vm.getUserAlert(percpu)">
                 {{ percpu.user }}%
             </div>
         </div>
         <div class="table-row">
             <div class="table-cell text-left">system:</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
                  ng-class="vm.getSystemAlert(percpu)">
                 {{ percpu.system }}%
             </div>
         </div>
         <div class="table-row">
             <div class="table-cell text-left">idle:</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number">{{ percpu.idle }}%</div>
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number">{{ percpu.idle }}%</div>
         </div>
         <div class="table-row" ng-if="vm.cpus[0].iowait">
             <div class="table-cell text-left">iowait:</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
                  ng-class="vm.getSystemAlert(percpu)">
                 {{ percpu.iowait }}%
             </div>
         </div>
         <div class="table-row" ng-if="vm.cpus[0].steal">
             <div class="table-cell text-left">steal:</div>
-            <div class="table-cell" ng-repeat="percpu in vm.cpus track by percpu.number"
+            <div class="table-cell" ng-repeat="percpu in cpus track by percpu.number"
                  ng-class="vm.getSystemAlert(percpu)">
                 {{ percpu.steal }}%
             </div>