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,7 +107,8 @@ export default {
         },
         containers() {
             const { sorter } = this;
-            const containers = (this.stats.containers || []).map((containerData) => {
+            const containers = ((this.stats && this.stats.containers) || []).map(
+                (containerData) => {
                     // prettier-ignore
                     return {
                         'id': containerData.Id,
@@ -128,7 +129,8 @@ export default {
                         '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>