Init big refactoring of the web ui to move to components

71 files changed, 734 insertions, 2870 deletions

diff --git a/glances/outputs/static/gulpfile.js b/glances/outputs/static/gulpfile.js
index 615a9c8c..8be5788d 100644
--- a/glances/outputs/static/gulpfile.js
+++ b/glances/outputs/static/gulpfile.js
@@ -41,8 +41,8 @@ gulp.task('build-js', function() {
 });
 
 gulp.task('template', function () {
-  return gulp.src('./html/plugins/*.html')
-    .pipe(templateCache('templates.js', {'root': 'plugins/', 'module': 'glancesApp'}))
+  return gulp.src('./js/components/**/*.html')
+    .pipe(templateCache('templates.js', {'root': 'components/', 'module': 'glancesApp'}))
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./public/js'));
 });
diff --git a/glances/outputs/static/html/plugins/alert.html b/glances/outputs/static/html/plugins/alert.html
deleted file mode 100644
index f4fe2f2f..00000000
--- a/glances/outputs/static/html/plugins/alert.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="table">
-    <div class="table-row" ng-repeat="alert in statsAlert.getAlerts()">
-        <div class="table-cell text-left">
-{{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span> ({{alert.max}})
-		</div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/alerts.html b/glances/outputs/static/html/plugins/alerts.html
deleted file mode 100644
index 1c0a1b42..00000000
--- a/glances/outputs/static/html/plugins/alerts.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<span class="title" ng-show="!statsAlert.hasAlerts()">No warning or critical alert detected</span>
-<span class="title" ng-show="statsAlert.hasAlerts()">Warning or critical alerts (lasts {{statsAlert.count()}} entries)</span>
diff --git a/glances/outputs/static/html/plugins/amps.html b/glances/outputs/static/html/plugins/amps.html
deleted file mode 100644
index bd149629..00000000
--- a/glances/outputs/static/html/plugins/amps.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="table">
-    <div class="table-row" ng-repeat="process in statsAmps.processes">
-        <div class="table-cell text-left" ng-class="statsAmps.getDescriptionDecoration(process)">{{ process.name }}</div>
-        <div class="table-cell text-left">{{ process.count }}</div>
-        <div class="table-cell text-left process-result">{{ process.result }}</div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/cloud.html b/glances/outputs/static/html/plugins/cloud.html
deleted file mode 100644
index 781cc814..00000000
--- a/glances/outputs/static/html/plugins/cloud.html
+++ /dev/null
@@ -1 +0,0 @@
-<span class="title">{{ statsCloud.getProvider() }}</span> {{ statsCloud.getInstance() }}
diff --git a/glances/outputs/static/html/plugins/diskio.html b/glances/outputs/static/html/plugins/diskio.html
deleted file mode 100644
index a136c5d6..00000000
--- a/glances/outputs/static/html/plugins/diskio.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="table-row">
-    <div class="table-cell text-left title">DISK I/O</div>
-    <div class="table-cell" ng-show="!arguments.diskio_iops">R/s</div>
-    <div class="table-cell" ng-show="!arguments.diskio_iops">W/s</div>
-
-    <div class="table-cell" ng-show="arguments.diskio_iops">IOR/s</div>
-    <div class="table-cell" ng-show="arguments.diskio_iops">IOW/s</div>
-</div>
-<div class="table-row" ng-repeat="disk in statsDiskio.disks">
-    <div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>
-    <div class="table-cell" ng-show="!arguments.diskio_iops">{{disk.bitrate.txps }}</div>
-    <div class="table-cell" ng-show="!arguments.diskio_iops">{{disk.bitrate.rxps }}</div>
-
-    <div class="table-cell" ng-show="arguments.diskio_iops">{{disk.count.txps }}</div>
-    <div class="table-cell" ng-show="arguments.diskio_iops">{{disk.count.rxps }}</div>
-</div>
diff --git a/glances/outputs/static/html/plugins/docker.html b/glances/outputs/static/html/plugins/docker.html
deleted file mode 100644
index b0ae92ae..00000000
--- a/glances/outputs/static/html/plugins/docker.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<span class="title">CONTAINERS</span> {{ statsDocker.containers.length }} (served by Docker {{ statsDocker.version }})
-
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left">Name</div>
-        <div class="table-cell">Status</div>
-        <div class="table-cell">CPU%</div>
-        <div class="table-cell">MEM</div>
-        <div class="table-cell">IOR/s</div>
-        <div class="table-cell">IOW/s</div>
-        <div class="table-cell">RX/s</div>
-        <div class="table-cell">TX/s</div>
-        <div class="table-cell text-left">Command</div>
-    </div>
-    <div class="table-row" ng-repeat="container in statsDocker.containers">
-        <div class="table-cell text-left">{{ container.name }}</div>
-        <div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}</div>
-        <div class="table-cell">{{ container.cpu | number:1 }}</div>
-        <div class="table-cell">{{ container.memory | bytes }}</div>
-        <div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>
-        <div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>
-        <div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>
-        <div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>
-        <div class="table-cell text-left">{{ container.command }}</div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/folders.html b/glances/outputs/static/html/plugins/folders.html
deleted file mode 100644
index b43db8ad..00000000
--- a/glances/outputs/static/html/plugins/folders.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="table-row">
-    <div class="table-cell text-left title">FOLDERS</div>
-    <div class="table-cell">Size</div>
-</div>
-<div class="table-row" ng-repeat="folder in statsFolders.folders">
-    <div class="table-cell text-left">{{ folder.path }}</div>
-    <div class="table-cell" ng-class="statsFolders.getDecoration(folder)">{{ folder.size | bytes }}</div>
-</div>
diff --git a/glances/outputs/static/html/plugins/fs.html b/glances/outputs/static/html/plugins/fs.html
deleted file mode 100644
index 4c0ed16f..00000000
--- a/glances/outputs/static/html/plugins/fs.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="table-row">
-    <div class="table-cell text-left title">FILE SYS</div>
-    <div class="table-cell">
-        <span ng-show="!arguments.fs_free_space">Used</span>
-        <span ng-show="arguments.fs_free_space">Free</span>
-    </div>
-    <div class="table-cell">Total</div>
-</div>
-<div class="table-row" ng-repeat="fs in statsFs.fileSystems | orderBy:  'mnt_point'">
-    <div class="table-cell text-left">{{ fs.shortMountPoint }} <span class="visible-lg-inline" ng-show="fs.name.length <= 20">({{ fs.name }})<span></div>
-    <div class="table-cell" ng-class="statsFs.getDecoration(fs.mountPoint, 'used')">
-        <span ng-show="!arguments.fs_free_space">{{ fs.used | bytes }}</span>
-        <span ng-show="arguments.fs_free_space">{{ fs.free | bytes }}</span>
-    </div>
-    <div class="table-cell">{{ fs.size | bytes }}</div>
-</div>
diff --git a/glances/outputs/static/html/plugins/gpu.html b/glances/outputs/static/html/plugins/gpu.html
deleted file mode 100644
index 731ad73a..00000000
--- a/glances/outputs/static/html/plugins/gpu.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="gpu-name title">
-    {{ statsGpu.name }}
-</div>
-<div class="table">
-    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">
-        <div class="table-cell text-left">proc:</div>
-        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('proc')" ng-if="statsGpu.mean.proc">{{ statsGpu.mean.proc | number : 0 }}%</div>
-        <div class="table-cell" ng-if="!statsGpu.mean.proc">N/A</div>
-    </div>
-    <div class="table-row" ng-if="arguments.meangpu || statsGpu.gpus.length === 1">
-        <div class="table-cell text-left">mem:</div>
-        <div class="table-cell" ng-class="statsGpu.getMeanDecoration('mem')" ng-if="statsGpu.mean.mem">{{ statsGpu.mean.mem | number : 0 }}%</div>
-        <div class="table-cell" ng-if="!statsGpu.mean.mem">N/A</div>
-    </div>
-    <div class="table-row" ng-if="!arguments.meangpu && statsGpu.gpus.length > 1" ng-repeat="gpu in statsGpu.gpus">
-        <div class="table-cell text-left">
-            {{ gpu.gpu_id }}:
-            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'proc')" ng-if="gpu.proc">{{ gpu.proc | number : 0 }}%</span>
-            <span ng-if="!gpu.proc">N/A</span>
-            mem:
-            <span ng-class="statsGpu.getDecoration(gpu.gpu_id, 'mem')" ng-if="gpu.mem">{{ gpu.mem | number : 0 }}%</span>
-            <span ng-if="!gpu.mem">N/A</span>
-        </div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/ip.html b/glances/outputs/static/html/plugins/ip.html
deleted file mode 100644
index bfcbf643..00000000
--- a/glances/outputs/static/html/plugins/ip.html
+++ /dev/null
@@ -1 +0,0 @@
-&nbsp;-&nbsp;<span class="title">IP</span>&nbsp;<span>{{ statsIp.address }}/{{ statsIp.maskCidr }}</span>&nbsp;<span ng-if="statsIp.publicAddress" class="title">Pub</span>&nbsp;<span>{{ statsIp.publicAddress }}</span>
diff --git a/glances/outputs/static/html/plugins/irq.html b/glances/outputs/static/html/plugins/irq.html
deleted file mode 100644
index 8b2aa606..00000000
--- a/glances/outputs/static/html/plugins/irq.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="table-row">
-    <div class="table-cell text-left title">IRQ</div>
-    <div class="table-cell"></div>
-    <div class="table-cell">Rate/s</div>
-</div>
-<div class="table-row" ng-repeat="irq in statsIrq.irqs">
-    <div class="table-cell text-left">{{irq.irq_line}}</div>
-    <div class="table-cell"></div>
-    <div class="table-cell"><span>{{irq.irq_rate}}</span></div>
-</div>
diff --git a/glances/outputs/static/html/plugins/load.html b/glances/outputs/static/html/plugins/load.html
deleted file mode 100644
index 1d90b6e3..00000000
--- a/glances/outputs/static/html/plugins/load.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left title">LOAD</div>
-        <div class="table-cell">{{ statsLoad.cpucore }}-core</div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">1 min:</div>
-        <div class="table-cell">
-            {{ statsLoad.min1 | number : 2}}
-        </div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">5 min:</div>
-        <div class="table-cell" ng-class="statsLoad.getDecoration('min5')">
-            {{ statsLoad.min5 | number : 2}}
-        </div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">15 min:</div>
-        <div class="table-cell" ng-class="statsLoad.getDecoration('min15')">
-            {{ statsLoad.min15 | number : 2}}
-        </div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/mem.html b/glances/outputs/static/html/plugins/mem.html
deleted file mode 100644
index 9f6f869d..00000000
--- a/glances/outputs/static/html/plugins/mem.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left title">MEM</div>
-        <div class="table-cell">{{ statsMem.percent }}%</div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">total:</div>
-        <div class="table-cell">{{ statsMem.total | bytes }}</div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">used:</div>
-        <div class="table-cell" ng-class="statsMem.getDecoration('used')">
-            {{ statsMem.used | bytes:2 }}
-        </div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">free:</div>
-        <div class="table-cell">{{ statsMem.free | bytes }}</div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/memswap.html b/glances/outputs/static/html/plugins/memswap.html
deleted file mode 100644
index 3d566a51..00000000
--- a/glances/outputs/static/html/plugins/memswap.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="table">
-    <div class="table-row">
-        <div class="table-cell text-left title">SWAP</div>
-        <div class="table-cell">{{ statsMemSwap.percent }}%</div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">total:</div>
-        <div class="table-cell">{{ statsMemSwap.total | bytes }}</div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">used:</div>
-        <div class="table-cell" ng-class="statsMemSwap.getDecoration('used')">
-            {{ statsMemSwap.used | bytes }}
-        </div>
-    </div>
-    <div class="table-row">
-        <div class="table-cell text-left">free:</div>
-        <div class="table-cell">{{ statsMemSwap.free | bytes }}</div>
-    </div>
-</div>
diff --git a/glances/outputs/static/html/plugins/network.html b/glances/outputs/static/html/plugins/network.html
deleted file mode 100644
index 6030f263..00000000
--- a/glances/outputs/static/html/plugins/network.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="table-row">
-    <div class="table-cell text-left title">NETWORK</div>
-    <div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">Rx/s</div>
-    <div class="table-cell" ng-show="!arguments.network_cumul && !arguments.network_sum">Tx/s</div>
-
-    <div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum"></div>
-    <div class="table-cell" ng-show="!arguments.network_cumul && arguments.network_sum">Rx+Tx/s</div>
-
-    <div class="table-cell