Implement system load visualization

Implement system load visualization in TaskManager as a separate
tab showing average system load graph basing on the info provided
by the backend.

Change-Id: I81359185516ebb1b6218bfd9ca53f1d76dfddeb4
Signed-off-by: Vitaly Wool <vitaly.wool@konsulko.com>

1 files changed, 166 insertions, 86 deletions

diff --git a/app/main.qml b/app/main.qml
index a76aaa8..7e76265 100644
--- a/app/main.qml
+++ b/app/main.qml
@@ -4,6 +4,7 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls 2.0 as NewControls
 import QtQuick.Layouts 1.1
 import TaskManager 1.0
+import QtCharts 2.2
 
 Window {
     id: root
@@ -43,7 +44,11 @@ Window {
         }
 
         onShowProcessInfo: {
-            infoPopup.infoText = info_;
+            mainTabview.getTab(0).item.updateInfo(info_);
+        }
+
+        onUpdateLoadAverage: {
+            mainTabview.getTab(1).item.tempAdd(value_);
         }
     }
 
@@ -51,102 +56,177 @@ Window {
         id: libraryModel
     }
 
-    Rectangle {
-        id: mainview
-        width: parent.width
-        height: parent.height
-
-        Row {
-            id: buttonRow
-            width: parent.width
-            anchors.top: mainview.top
-
-            RowLayout {
-                id: buttonRowLayout
-                spacing: 6
-
-                NewControls.Popup {
-                    id: infoPopup
-                    x: 200
-                    y: 200
-                    width: 300
-                    height: 200
-                    modal: true
-                    focus: true
-                    closePolicy: NewControls.Popup.CloseOnPressOutsideParent
-                    property var infoText: "Getting extra information for process"
-                    function doOpen(tid) {
-                        taskmgr.getExtraInfo(tid)
-                        infoPopup.open()
-                    }
-                    contentItem: Text {
-                        text: infoPopup.infoText
-                    }
+    TabView {
+        id: mainTabview
+        currentIndex: 0
+        anchors.fill: parent
+
+        Tab {
+            id: processesTab
+            active: true
+            anchors.fill: parent
+            title: "Processes"
+
+            Rectangle {
+                id: procsView
+                width: parent.width
+                height: parent.height
+
+                function updateInfo(info_)
+                {
+                    infoPopup.infoText = info_;
                 }
 
-                Button {
-                    id: infoButton
-                    text: "Info"
-                    enabled: tableView.currentRow != -1
-                    onClicked: infoPopup.doOpen(libraryModel.get(tableView.currentRow).tid)
+                Row {
+                    id: buttonRow
+                    width: parent.width
+                    anchors.top: mainTabview.top
+
+                    RowLayout {
+                        id: buttonRowLayout
+                        spacing: 6
+
+                        NewControls.Popup {
+                            id: infoPopup
+                            x: 200
+                            y: 200
+                            width: 300
+                            height: 200
+                            modal: true
+                            focus: true
+                            closePolicy: NewControls.Popup.CloseOnPressOutsideParent
+                            property var infoText: "Getting extra information for process"
+                            function doOpen(tid) {
+                                taskmgr.getExtraInfo(tid)
+                                infoPopup.open()
+                            }
+                            contentItem: Text {
+                                text: infoPopup.infoText
+                            }
+                        }
+
+                        Button {
+                            id: infoButton
+                            text: "Info"
+                            enabled: tableView.currentRow != -1
+                            onClicked: infoPopup.doOpen(libraryModel.get(tableView.currentRow).tid)
+                        }
+
+                        Button {
+                            id: killButton
+                            text: "Kill"
+                            enabled: tableView.currentRow != -1
+                            onClicked: {
+                                tableView.selection.forEach( function(rowIndex) {
+                                    taskmgr.kill(libraryModel.get(rowIndex).tid)}
+                                )
+                                tableView.selection.clear()
+                            }
+                        }
+                    }
                 }
 
-                Button {
-                    id: killButton
-                    text: "Kill"
-                    enabled: tableView.currentRow != -1
-                    onClicked: {
-                        tableView.selection.forEach( function(rowIndex) {
-                            taskmgr.kill(libraryModel.get(rowIndex).tid)}
-                        )
-                        tableView.selection.clear()
+                TableView {
+                    id: tableView
+                    height: parent.height - buttonRow.height
+                    width: parent.width
+                    anchors.top: buttonRow.bottom
+
+                    TableViewColumn {
+                        role: "cmd"
+                        title: "Process"
+                        width: 150
+                    }
+                    TableViewColumn {
+                        role: "tid"
+                        title: "ID"
+                        width: 80
+                    }
+                    TableViewColumn {
+                        role: "user"
+                        title: "User"
+                        width: 80
                     }
+                    TableViewColumn {
+                        role: "system_cpu"
+                        title: "System %"
+                        width: 100
+                    }
+                    TableViewColumn {
+                        role: "user_cpu"
+                        title: "User %"
+                        width: 100
+                    }
+                    TableViewColumn {
+                        role: "resident_memory"
+                        title: "Memory"
+                        width: 100
+                    }
+                    TableViewColumn {
+                        role: "state"
+                        title: "State"
+                        width: 90
+                    }
+                    model: libraryModel
                 }
             }
         }
 
-        TableView {
-            id: tableView
-            height: parent.height - buttonRow.height
-            width: parent.width
-            anchors.top: buttonRow.bottom
+        Tab {
+            id: systemTab
+            active: true
+            anchors.fill: parent
+            title: "System"
+
+            ChartView {
+                id: chartView
+                title: "System load average"
+                width: parent.width
+                height: parent.height / 2
+                legend.visible: false
+                antialiasing: true
+
+                LineSeries {
+                    id: loadSeries
+
+                    axisX: DateTimeAxis {
+                        id: timeAxis
+                        labelsVisible: false
+                        format: "hh:mm"
+                    }
 
-            TableViewColumn {
-                role: "cmd"
-                title: "Process"
-                width: 150
-            }
-            TableViewColumn {
-                role: "tid"
-                title: "ID"
-                width: 80
-            }
-            TableViewColumn {
-                role: "user"
-                title: "User"
-                width: 80
-            }
-            TableViewColumn {
-                role: "system_cpu"
-                title: "System %"
-                width: 100
-            }
-            TableViewColumn {
-                role: "user_cpu"
-                title: "User %"
-                width: 100
-            }
-            TableViewColumn {
-                role: "resident_memory"
-                title: "Memory"
-                width: 100
-            }
-            TableViewColumn {
-                role: "state"
-                title: "State"
-                width: 90
+                    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();
+
+                    if (value_ > valueAxis.max)
+                        valueAxis.max = value_;
+
+                    loadSeries.append(time_.getTime(), value_);
+                    timeAxis.max = time_;
+
+                    if (loadSeries.count > 1800)
+                    {
+                        loadSeries.remove(0);
+                        time_.setMinutes(time_.getMinutes() - 30);
+                        timeAxis.min = time_;
+                    }
+
+                    chartView.update();
+                }
             }
-            model: libraryModel
         }
     }
 }