✨ Adds a network traffic widget

src/components/Widgets/GlNetworkTraffic.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="glances-cpu-history-wrapper">
+  <div class="gl-history-chart" :id="chartId"></div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { convertBytes, getTimeAgo, timestampToTime } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    limit() {
+      return this.options.limit || 100;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/network/history/${this.limit}`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(trafficData) {
+      const preliminary = {
+        upload: [],
+        download: [],
+      };
+      /* eslint-disable prefer-destructuring */
+      Object.keys(trafficData).forEach((keyName) => {
+        let upOrDown = null;
+        if (keyName.includes('_tx')) upOrDown = 'up';
+        else if (keyName.includes('_rx')) upOrDown = 'down';
+        trafficData[keyName].forEach((dataPoint) => {
+          const dataTime = this.getRoundedTime(dataPoint[0]);
+          if (upOrDown === 'up') {
+            if (preliminary.upload[dataTime]) preliminary.upload[dataTime] += dataPoint[1];
+            else preliminary.upload[dataTime] = dataPoint[1];
+          } else if (upOrDown === 'down') {
+            if (preliminary.download[dataTime]) preliminary.download[dataTime] += dataPoint[1];
+            else preliminary.download[dataTime] = dataPoint[1];
+          }
+        });
+      });
+      const timeLabels = [];
+      const uploadData = [];
+      const downloadData = [];
+      const startDate = Object.keys(preliminary.upload)[0];
+      Object.keys(preliminary.upload).forEach((date) => {
+        timeLabels.push(timestampToTime(date));
+        uploadData.push(preliminary.upload[date]);
+      });
+      Object.keys(preliminary.download).forEach((date) => {
+        downloadData.push(preliminary.download[date]);
+      });
+      const datasets = [
+        { name: 'Upload', type: 'bar', values: uploadData },
+        { name: 'Download', type: 'bar', values: downloadData },
+      ];
+      const chartTitle = this.makeTitle(startDate);
+      this.generateChart({ labels: timeLabels, datasets }, chartTitle);
+    },
+    getRoundedTime(date) {
+      const roundTo = 1000 * 60;
+      return new Date(Math.round(new Date(date).getTime() / roundTo) * roundTo);
+    },
+    makeTitle(startDate) {
+      return `Network Activity over past ${getTimeAgo(startDate).replace('ago', '')}`;
+    },
+    generateChart(timeChartData, chartTitle) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: chartTitle,
+        data: timeChartData,
+        type: 'axis-mixed',
+        height: this.chartHeight,
+        colors: ['#f6f000', '#04e4f4'],
+        truncateLegends: true,
+        lineOptions: {
+          regionFill: 1,
+          hideDots: 1,
+        },
+        axisOptions: {
+          xIsSeries: true,
+          xAxisMode: 'tick',
+        },
+        tooltipOptions: {
+          formatTooltipY: d => convertBytes(d),
+        },
+      });
+    },
+
+  },
+  created() {
+    this.overrideUpdateInterval = 10;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-cpu-history-wrapper {
+  .gl-history-chart {}
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -179,6 +179,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlNetworkTraffic
+        v-else-if="widgetType === 'gl-network-activity'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <GlSystemLoad
         v-else-if="widgetType === 'gl-system-load'"
         :options="widgetOptions"
@@ -386,6 +393,7 @@ export default {
     GlMemGauge: () => import('@/components/Widgets/GlMemGauge.vue'),
     GlMemHistory: () => import('@/components/Widgets/GlMemHistory.vue'),
     GlNetworkInterfaces: () => import('@/components/Widgets/GlNetworkInterfaces.vue'),
+    GlNetworkTraffic: () => import('@/components/Widgets/GlNetworkTraffic.vue'),
     GlSystemLoad: () => import('@/components/Widgets/GlSystemLoad.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),