Implement network load visualizationhalibut_7.99.1halibut/7.99.17.99.1

Implement network load visualization in TaskManager as a complement
to the System tab. It shows in/out network activity graph basing on
the info provided by the backend.

Bug-AGL: SPEC-2403
Signed-off-by: Vitaly Wool <vitaly.wool@konsulko.com>
Change-Id: I7d6b4f25424bd3ee1bfc12e9b084a021df289992

1 files changed, 111 insertions, 30 deletions

diff --git a/app/main.qml b/app/main.qml
index 7e76265..45864ba 100644
--- a/app/main.qml
+++ b/app/main.qml
@@ -48,7 +48,11 @@ Window {
         }
 
         onUpdateLoadAverage: {
-            mainTabview.getTab(1).item.tempAdd(value_);
+            mainTabview.getTab(1).item.updateLoadChart(value_);
+        }
+
+        onUpdateNetworkStats: {
+            mainTabview.getTab(1).item.updateNetChart(in_, out_);
         }
     }
 
@@ -178,53 +182,130 @@ Window {
             anchors.fill: parent
             title: "System"
 
-            ChartView {
-                id: chartView
-                title: "System load average"
+            Rectangle {
+                id: graphsView
                 width: parent.width
-                height: parent.height / 2
-                legend.visible: false
-                antialiasing: true
+                height: parent.height
+
+                function updateLoadChart(value_)
+                {
+                    loadChart.tempAdd(value_)
+                }
+                function updateNetChart(in_, out_)
+                {
+                    networkChart.updateStats(in_, out_)
+                }
+
+                ChartView {
+                     id: loadChart
+                     title: "System load average"
+                     width: parent.width
+                     height: parent.height / 3
+                     legend.visible: false
+                     antialiasing: true
+
+                    LineSeries {
+                        id: loadSeries
+
+                        axisX: DateTimeAxis {
+                            id: timeLoadAxis
+                            labelsVisible: false
+                            format: "hh:mm"
+                        }
+
+                        axisY: ValueAxis {
+                            id: valueAxis
+                            max: 2
+                            min: 0
+                            tickCount: 3
+                        }
+
+                        XYPoint { x: new Date().getTime(); y: 0 }
+                        XYPoint { x: (new Date().getTime()+ 10); y: 0 }
+                    }
+                    function tempAdd(value_)
+                    {
+                        var time_ = new Date();
 
-                LineSeries {
-                    id: loadSeries
+                        if (value_ > valueAxis.max)
+                            valueAxis.max = value_;
 
-                    axisX: DateTimeAxis {
-                        id: timeAxis
+                        loadSeries.append(time_.getTime(), value_);
+                        timeLoadAxis.max = time_;
+
+                        if (loadSeries.count > 1800)
+                        {
+                            loadSeries.remove(0);
+                            time_.setMinutes(time_.getMinutes() - 30);
+                            timeLoadAxis.min = time_;
+                        }
+
+                        loadChart.update();
+                    }
+                }
+                ChartView {
+                    id: networkChart
+                    title: "Network Stats and Charts"
+                    width: parent.width
+                    height: parent.height / 3
+                    legend.visible: true
+                    antialiasing: true
+                    anchors.top: loadChart.bottom
+
+                    DateTimeAxis {
+                        id: timeNetAxis
                         labelsVisible: false
                         format: "hh:mm"
                     }
 
-                    axisY: ValueAxis {
-                        id: valueAxis
+                    ValueAxis {
+                        id: octetsAxis
                         max: 2
                         min: 0
                         tickCount: 3
                     }
+                    LineSeries {
+                        id: netSeriesIn
+                        name: "InOctets"
 
-                    XYPoint { x: new Date().getTime(); y: 0 }
-                    XYPoint { x: (new Date().getTime()+ 10); y: 0 }
+                        axisX: timeNetAxis
+                        axisY: octetsAxis
 
-                }
+                        XYPoint { x: new Date().getTime(); y: 0 }
 
-                function tempAdd(value_)
-                {
-                    var time_ = new Date();
-
-                    if (value_ > valueAxis.max)
-                        valueAxis.max = value_;
+                    }
+                    LineSeries {
+                        id: netSeriesOut
+                        name: "OutOctets"
 
-                    loadSeries.append(time_.getTime(), value_);
-                    timeAxis.max = time_;
+                        axisX: timeNetAxis
+                        axisY: octetsAxis
 
-                    if (loadSeries.count > 1800)
-                    {
-                        loadSeries.remove(0);
-                        time_.setMinutes(time_.getMinutes() - 30);
-                        timeAxis.min = time_;
+                        XYPoint { x: new Date().getTime(); y: 0 }
                     }
+                    function updateStats(in_, out_)
+                    {
+                        var time_ = new Date();
+
+                        if (in_ > octetsAxis.max)
+                            octetsAxis.max = (in_ / 1000 + 1) * 1000;
+                        if (out_ > octetsAxis.max)
+                            octetsAxis.max = (out_ / 1000 + 1) * 1000;
+
+                        netSeriesIn.append(time_.getTime(), in_);
+                        netSeriesOut.append(time_.getTime(), out_);
+                        timeNetAxis.max = time_;
+
+                        if (netSeriesIn.count > 1800)
+                        {
+                            netSeriesIn.remove(0);
+                            netSeriesOut.remove(0);
+                            time_.setMinutes(time_.getMinutes() - 30);
+                            timeNetAxis.min = time_;
+                        }
 
-                    chartView.update();
+                        networkChart.update();
+                    }
                 }
             }
         }