added smart plugin

glances/outputs/static/css/style.scss

@@ -50,6 +50,12 @@ body {
 .text-left {
     text-align: left;
 }
+.text-truncate {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .sidebar .table-cell:not(.text-left) {
     padding-left: 10px;
 }

glances/outputs/static/js/App.vue

@@ -102,9 +102,15 @@
                         <glances-plugin-irq
                             id="plugin-irq"
                             class="plugin table-row-group"
-                            v-if="args.enable_irq"
+                            v-if="!args.disable_irq"
                             :data="data"
                         ></glances-plugin-irq>
+                        <glances-plugin-smart
+                            id="plugin-smart"
+                            class="plugin table-row-group"
+                            v-if="!args.disable_smart"
+                            :data="data"
+                        ></glances-plugin-smart>
                         <glances-plugin-folders
                             id="plugin-folders"
                             class="plugin table-row-group"
@@ -123,7 +129,11 @@
                             v-if="!args.disable_sensors"
                             :data="data"
                         ></glances-plugin-sensors>
-                        <glances-plugin-now :data="data"></glances-plugin-now>
+                        <glances-plugin-now
+                            id="plugin-now"
+                            class="plugin table-row-group"
+                            :data="data"
+                        ></glances-plugin-now>
                     </div>
                 </div>
                 <div class="col-sm-18">
@@ -170,6 +180,7 @@ import GlancesPluginPorts from './components/plugin-ports.vue';
 import GlancesPluginProcess from './components/plugin-process.vue';
 import GlancesPluginQuicklook from './components/plugin-quicklook.vue';
 import GlancesPluginRaid from './components/plugin-raid.vue';
+import GlancesPluginSmart from './components/plugin-smart.vue';
 import GlancesPluginSensors from './components/plugin-sensors.vue';
 import GlancesPluginSystem from './components/plugin-system.vue';
 import GlancesPluginUptime from './components/plugin-uptime.vue';
@@ -201,6 +212,7 @@ export default {
         GlancesPluginQuicklook,
         GlancesPluginRaid,
         GlancesPluginSensors,
+        GlancesPluginSmart,
         GlancesPluginSystem,
         GlancesPluginUptime,
         GlancesPluginWifi

glances/outputs/static/js/components/plugin-containers.vue

@@ -107,28 +107,30 @@ export default {
         },
         containers() {
             const { sorter } = this;
-            const containers = (this.stats.containers || []).map((containerData) => {
+            const containers = ((this.stats && this.stats.containers) || []).map(
-                // prettier-ignore
+                (containerData) => {
-                return {
+                    // prettier-ignore
-                    'id': containerData.Id,
+                    return {
-                    'name': containerData.name,
+                        'id': containerData.Id,
-                    'status': containerData.Status,
+                        'name': containerData.name,
-                    'uptime': containerData.Uptime,
+                        'status': containerData.Status,
-                    'cpu_percent': containerData.cpu.total,
+                        'uptime': containerData.Uptime,
-                    'memory_usage': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
+                        'cpu_percent': containerData.cpu.total,
-                    'limit': containerData.memory.limit != undefined ? containerData.memory.limit : '?',
+                        'memory_usage': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
-                    'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
+                        'limit': containerData.memory.limit != undefined ? containerData.memory.limit : '?',
-                    'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
+                        'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
-                    'io_time_since_update': containerData.io.time_since_update,
+                        'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
-                    'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
+                        'io_time_since_update': containerData.io.time_since_update,
-                    'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
+                        'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
-                    'net_time_since_update': containerData.network.time_since_update,
+                        'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
-                    'command': containerData.Command.join(' '),
+                        'net_time_since_update': containerData.network.time_since_update,
-                    'image': containerData.Image,
+                        'command': containerData.Command.join(' '),
-                    'engine': containerData.engine,
+                        'image': containerData.Image,
-                    'pod_id': containerData.pod_id
+                        'engine': containerData.engine,
-                };
+                        'pod_id': containerData.pod_id
-            });
+                    };
+                }
+            );
             return orderBy(
                 containers,
                 [sorter.column].reduce((retval, col) => {

glances/outputs/static/js/components/plugin-now.vue

@@ -1,6 +1,8 @@
 <template>
     <section id="now" class="plugin">
-        <span>{{ value }}</span>
+        <div class="table-row">
+            <div class="table-cell text-left">{{ value }}</div>
+        </div>
     </section>
 </template>
 

glances/outputs/static/js/components/plugin-smart.vue

@@ -0,0 +1,50 @@
+<template>
+    <section id="smart" class="plugin">
+        <div class="table-row">
+            <div class="table-cell text-left title">SMART disks</div>
+            <div class="table-cell"></div>
+            <div class="table-cell"></div>
+        </div>
+        <template v-for="(drive, driveId) in drives" :key="driveId">
+            <div class="table-row">
+                <div class="table-cell text-left text-truncate">{{ drive.name }}</div>
+                <div class="table-cell"></div>
+                <div class="table-cell"></div>
+            </div>
+            <template v-for="(metric, metricId) in drive.details" :key="metricId">
+                <div class="table-row">
+                    <div class="table-cell text-left">&nbsp;&nbsp;{{ metric.name }}</div>
+                    <div class="table-cell"></div>
+                    <div class="table-cell text-truncate">
+                        <span>{{ metric.raw }}</span>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </section>
+</template>
+
+<script>
+export default {
+    props: {
+        data: {
+            type: Object
+        }
+    },
+    computed: {
+        stats() {
+            return this.data.stats['smart'];
+        },
+        drives() {
+            return (Array.isArray(this.stats) ? this.stats : []).map((data) => {
+                const name = data.DeviceName;
+                const details = Object.entries(data)
+                    .filter(([key]) => key !== 'DeviceName')
+                    .sort(([, a], [, b]) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+                    .map(([prop, value]) => value);
+                return { name, details };
+            });
+        }
+    }
+};
+</script>