Added System Monitor app

Added application which shows system
and per app usage of the system using the AM
APIs.

Change-Id: Ib6ce1ba5695d5644612bc1f3f9382b6e9b703ba9
Reviewed-by: Dominik Holland <dominik.holland@pelagicore.com>

8 files changed, 949 insertions, 1 deletions

diff --git a/imports/shared/service/settings/SettingsService.qml b/imports/shared/service/settings/SettingsService.qml
index 8c531c7..e0dbdc9 100644
--- a/imports/shared/service/settings/SettingsService.qml
+++ b/imports/shared/service/settings/SettingsService.qml
@@ -46,7 +46,7 @@ QtObject {
         ListElement { title: "TOLL & CONGESTION FEES"; icon: "toll"; checked: false; hasChildren: true }
         ListElement { title: "METRIC SYSTEM"; icon: "fees"; checked: true; hasChildren: false }
         ListElement { title: "APP UPDATES"; icon: "updates"; checked: true; hasChildren: true }
-        ListElement { title: "INSURANCE FEATURES"; icon: "insurance"; checked: true; hasChildren: true }
+        ListElement { title: "SYSTEM MONITOR"; icon: "insurance"; checked: false; hasChildren: true }
     }
 
     property var carSettings: [
diff --git a/sysui/Cloud/Settings/SettingsScreen.qml b/sysui/Cloud/Settings/SettingsScreen.qml
index 703bf01..cf1af84 100644
--- a/sysui/Cloud/Settings/SettingsScreen.qml
+++ b/sysui/Cloud/Settings/SettingsScreen.qml
@@ -35,6 +35,9 @@ import utils 1.0
 import controls 1.0
 import utils 1.0
 import service.settings 1.0
+import models 1.0
+import "SystemMonitor/"
+import utils 1.0
 
 UIElement {
     id: root
@@ -56,6 +59,7 @@ UIElement {
             titleText: model.title
             checked: model.checked
             hasChildren: model.hasChildren
+            checkedEnabled: (titleText === "SYSTEM MONITOR") ? false : true
             onClicked: {
                 if ( titleText === "METRIC SYSTEM") {
                     if (checked)
@@ -63,6 +67,9 @@ UIElement {
                     else
                         SettingsService.unitSystem = "metric"
                 }
+                else if (titleText === "SYSTEM MONITOR") {
+                    ApplicationManagerInterface.applicationSurfaceReady(systemMonitor)
+                }
             }
         }
     }
@@ -74,4 +81,9 @@ UIElement {
         asynchronous: true
         visible: false
     }
+
+    MainScreen {
+        id: systemMonitor
+        visible: false
+    }
 }
diff --git a/sysui/Cloud/Settings/SystemMonitor/AppPanel.qml b/sysui/Cloud/Settings/SystemMonitor/AppPanel.qml
new file mode 100644
index 0000000..1c219e0
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/AppPanel.qml
@@ -0,0 +1,206 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+
+UIPage {
+    id: root
+
+    onVisibleChanged: {
+        if (!visible)
+            applicationModel.model = undefined
+        else
+            applicationModel.model = ApplicationManager
+        if (!SystemMonitor.memoryReportingEnabled && visible)
+            SystemMonitor.memoryReportingEnabled = true
+    }
+
+    Item {
+        id: processContainer
+        width: root.width/2
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 50
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: root.height/4
+
+        ListView {
+            id: applicationModel
+            anchors.fill: parent
+            clip: true
+            spacing: 5
+
+            delegate: ListView {
+                id: processGraph
+                height: processContainer.height/4 - 10
+                width: processContainer.width
+
+                model: processMonitor.memoryMonitor
+                orientation: ListView.Horizontal
+                interactive: false
+                //spacing: 1
+
+                property QtObject processMonitor: SystemMonitor.getProcessMonitor(applicationId)
+
+                property bool reportingActive: ApplicationManager.get(index).isRunning
+
+                onReportingActiveChanged: {
+                    processMonitor.memoryReportingEnabled = reportingActive
+                }
+
+                property real pssMemoryUsed: 0
+                property real memoryUsed: 0
+                property real memoryUsagePercentage: 0
+
+                Component.onCompleted: processMonitor.memoryReportingEnabled = reportingActive
+
+                delegate: Item {
+                    width: processGraph.width / processGraph.model.count
+                    height: processGraph.height - 10
+
+                    Rectangle {
+                        width: parent.width
+                        height: parent.height // vmSize referent point
+                        anchors.bottom: parent.bottom
+                        color: Style.colorGrey
+                        opacity: 0.8
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.rss/model.vmSize)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: "green"
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.pss/model.vmSize)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: Style.colorOrange
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.heapV/model.vmSize)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: "yellow"
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.stackV/model.vmSize)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: "white"
+                    }
+                }
+
+                Rectangle {
+                    width: parent.width
+                    height: 2
+                    anchors.bottom: parent.bottom
+                    color: Style.colorWhite
+                }
+
+                Label {
+                    width: processGraph.width - processGraph.width/3
+                    anchors.top: processGraph.top
+
+                    anchors.right: processGraph.right
+                    text: applicationId + " VSize: " + processGraph.memoryUsed + "KB, " + processGraph.memoryUsagePercentage + "%\nPSS: " + processGraph.pssMemoryUsed + "KB"
+                    font.pixelSize: Style.fontSizeXXS
+                }
+
+                Connections {
+                    target: processMonitor.memoryMonitor
+                    onMemoryReportingChanged: {
+                        var vmSizeBytes = processMonitor.memoryMonitor.get(modelIndex).vmSize
+                        var pssSizeBytes = processMonitor.memoryMonitor.get(modelIndex).pss
+                        processGraph.memoryUsagePercentage = (vmSizeBytes/SystemMonitor.totalMemory * 100).toFixed(1)
+                        processGraph.memoryUsed = (vmSizeBytes/1024).toFixed(1)
+                        processGraph.pssMemoryUsed = (pssSizeBytes/1024).toFixed(1)
+                    }
+                }
+            }
+        }
+    }
+
+    Column {
+        anchors.top: parent.top
+        anchors.topMargin: root.height/4
+        anchors.left: parent.left
+        anchors.leftMargin: 80
+
+        Label {
+            id: vmText
+
+            text: "VMemory-ref point"
+            font.pixelSize: Style.fontSizeXXS
+            color: Style.colorGrey
+        }
+
+        Label {
+            id: rssText
+
+            text: "RSS"
+            color: "green"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            id: pssText
+
+            text: "PSS"
+            color: Style.colorOrange
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            id: heapText
+
+            text: "Heap"
+            color: "yellow"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            id: stackText
+
+            text: "Stack"
+            color: "white"
+            font.pixelSize: Style.fontSizeXXS
+        }
+    }
+
+}
diff --git a/sysui/Cloud/Settings/SystemMonitor/CPUGraph.qml b/sysui/Cloud/Settings/SystemMonitor/CPUGraph.qml
new file mode 100644
index 0000000..5924e8a
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/CPUGraph.qml
@@ -0,0 +1,122 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+
+Item {
+    id: cpuContainer
+    width: 400
+    height: 200
+
+
+    Item {
+        id: cpuScaleContainer
+        anchors.bottom: parent.bottom
+        width: 5
+        height: parent.height
+
+        Rectangle {
+            id: cpuScale
+            width: 2
+            height: parent.height
+            color: Style.colorOrange
+        }
+
+        Label {
+            width: 70
+            anchors.bottom: cpuScale.bottom
+            anchors.right: cpuScale.right
+            text: "0"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            width: 70
+            anchors.top: cpuScale.top
+            anchors.topMargin: 0.5*cpuScale.height - height/2
+            anchors.right: cpuScale.right
+            text: "50"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            width: 70
+            anchors.top: cpuScale.top
+            anchors.topMargin: - height/2
+            anchors.right: cpuScale.right
+            text: "100"
+            font.pixelSize: Style.fontSizeXXS
+        }
+    }
+
+
+    ListView {
+        id: cpuGraph
+        anchors.top: cpuScaleContainer.top
+        anchors.right: cpuContainer.right
+        anchors.bottom: cpuScaleContainer.bottom
+        anchors.left: cpuScaleContainer.right
+
+        model: SystemMonitor
+        orientation: ListView.Horizontal
+        interactive: false
+        delegate: Item {
+            width: cpuGraph.width / cpuGraph.model.count
+            height: cpuGraph.height
+
+            Item {
+                id: cpuDelegate
+                anchors.fill: parent
+
+                Rectangle {
+                    width: parent.width
+                    height: model.cpuLoad * parent.height
+                    anchors.bottom: parent.bottom
+                    color: "white"
+
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        width: cpuGraph.width + 5
+        height: 2
+
+        anchors.top: cpuGraph.bottom
+        anchors.left: cpuGraph.left
+        anchors.leftMargin: -5
+        color: Style.colorOrange
+    }
+}
diff --git a/sysui/Cloud/Settings/SystemMonitor/InfoPanel.qml b/sysui/Cloud/Settings/SystemMonitor/InfoPanel.qml
new file mode 100644
index 0000000..bc3d999
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/InfoPanel.qml
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+
+UIPage {
+    id: root
+
+    Column {
+
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: -80
+
+        SettingsListItem {
+            hspan: 10
+            vspan: 2
+            checkedEnabled: false
+            iconName: "information"
+            titleText: "Number of cores: " + SystemMonitor.cpuCores
+        }
+
+        SettingsListItem {
+            hspan: 10
+            vspan: 2
+            checkedEnabled: false
+            iconName: "information"
+            titleText: "Total RAM: " + (SystemMonitor.totalMemory/1024/1024).toFixed(2) + "MB"
+        }
+
+        SettingsListItem {
+            hspan: 10
+            vspan: 2
+            checkedEnabled: false
+            iconName: "information"
+            titleText: "Idle: " + SystemMonitor.idle
+        }
+
+        SettingsListItem {
+            hspan: 10
+            vspan: 2
+            checkedEnabled: false
+            iconName: "information"
+            titleText: "Idle load average: " + SystemMonitor.idleLoadAverage
+        }
+
+    }
+
+}
diff --git a/sysui/Cloud/Settings/SystemMonitor/MainScreen.qml b/sysui/Cloud/Settings/SystemMonitor/MainScreen.qml
new file mode 100644
index 0000000..f874e84
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/MainScreen.qml
@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+import models 1.0
+
+UIScreen {
+    id: root
+
+    property int timeInterval: 200
+
+    Component.onCompleted: checkReporting()
+
+    onBackScreen: ApplicationManagerInterface.releaseApplicationSurface()
+
+    function checkReporting() {
+        SystemMonitor.reportingInterval = root.timeInterval
+        SystemMonitor.reportingRange = 10 * 1000
+    }
+
+    TabView {
+        id: tabView
+        vspan: root.vspan - 3
+        hspan: root.hspan
+        anchors.centerIn: parent
+        horizontalAlignment: true
+        tabWidth: 5
+        tabs: [
+            { title : "Info", url : infoPanel, properties : {} },
+            { title : "CPU/FPS", url : systemPanel, properties : {} },
+            { title : "RAM", url : appPanel, properties : {} },
+        ]
+
+    }
+
+    InfoPanel {
+        id: infoPanel
+        visible: false
+
+    }
+
+    SystemPanel {
+        id: systemPanel
+        visible: false
+    }
+
+    AppPanel {
+        id: appPanel
+        visible: false
+    }
+}
diff --git a/sysui/Cloud/Settings/SystemMonitor/MemoryGraph.qml b/sysui/Cloud/Settings/SystemMonitor/MemoryGraph.qml
new file mode 100644
index 0000000..b23e6b1
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/MemoryGraph.qml
@@ -0,0 +1,116 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+
+Item {
+    id: graphContainer
+
+    width: 300
+    height: 150
+
+    Item {
+        id: ramScaleContainer
+        anchors.bottom: parent.bottom
+        width: 5
+        height: parent.height
+
+        Rectangle {
+            id: ramScale
+            width: 2
+            height: parent.height
+            color: Style.colorOrange
+        }
+
+        Label {
+            width: 70
+            anchors.bottom: ramScale.bottom
+            anchors.right: ramScale.right
+            text: "0"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            width: 70
+            anchors.top: ramScale.top
+            anchors.topMargin: 0.5*ramScale.height - height/2
+            anchors.right: ramScale.right
+            text: "50"
+            font.pixelSize: Style.fontSizeXXS
+        }
+
+        Label {
+            width: 70
+            anchors.top: ramScale.top
+            anchors.topMargin: - height/2
+            anchors.right: ramScale.right
+            text: "100"
+            font.pixelSize: Style.fontSizeXXS
+        }
+    }
+
+
+    ListView {
+        id: graph
+        anchors.top: ramScaleContainer.top
+        anchors.right: graphContainer.right
+        anchors.bottom: ramScaleContainer.bottom
+        anchors.left: ramScaleContainer.right
+
+        model: SystemMonitor
+        orientation: ListView.Horizontal
+        interactive: false
+        delegate: Item {
+            width: graph.width / graph.model.count
+            height: graph.height
+
+            Rectangle {
+                width: parent.width
+                height: (model.memoryUsed/model.memoryTotal)*parent.height
+                anchors.bottom: parent.bottom
+                color: Style.colorGrey
+            }
+        }
+    }
+
+    Rectangle {
+        width: graph.width + 5
+        height: 2
+
+        anchors.top: graph.bottom
+        anchors.left: graph.left
+        anchors.leftMargin: -5
+        color: Style.colorOrange
+    }
+}
diff --git a/sysui/Cloud/Settings/SystemMonitor/SystemPanel.qml b/sysui/Cloud/Settings/SystemMonitor/SystemPanel.qml
new file mode 100644
index 0000000..8165ca3
--- /dev/null
+++ b/sysui/Cloud/Settings/SystemMonitor/SystemPanel.qml
@@ -0,0 +1,331 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+import QtApplicationManager 1.0
+
+UIPage {
+    id: root
+
+    property bool mergeReport: false
+
+    onVisibleChanged: {
+        SystemMonitor.cpuLoadReportingEnabled = visible
+        SystemMonitor.fpsReportingEnabled = visible
+        if (!SystemMonitor.memoryReportingEnabled)
+            SystemMonitor.memoryReportingEnabled = true
+    }
+
+    Connections {
+        target: SystemMonitor
+        onFpsReportingChanged: {
+            redLegend.text = "Minimum FPS: " + Math.floor(minimum)
+            greenLegend.text = "Maximum FPS: " + Math.floor(maximum)
+            yellowLegend.text = "Average FPS: " + Math.floor(average)
+        }
+
+        onCpuLoadReportingChanged: {
+            whiteLegend.text = "CPU load: " + (load * 100).toFixed(2) + "%"
+        }
+
+        onMemoryReportingChanged: {
+            greyLegend.text = "RAM load:" + (used/total * 100).toFixed(2) + "%"
+        }
+    }
+
+    CPUGraph {
+        id: cpuContainer
+        width: root.width/2
+        height: root.mergeReport ? 0 : root.height/7
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: root.top
+        anchors.topMargin: root.height/12
+        opacity: root.mergeReport ? 0: 1
+
+        Behavior on height {
+            NumberAnimation { duration: 200 }
+        }
+
+        Behavior on opacity {
+            NumberAnimation { duration: 200 }
+        }
+    }
+
+    MemoryGraph {
+        id: memoryContainer
+        width: root.width/2
+        height: root.mergeReport ? 0 : root.height/7
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: cpuContainer.bottom
+        anchors.topMargin: root.height/12
+        opacity: root.mergeReport ? 0: 1
+
+        Behavior on height {
+            NumberAnimation { duration: 200 }
+        }
+
+        Behavior on opacity {
+            NumberAnimation { duration: 200 }
+        }
+    }
+
+
+    Item {
+        id: graphContainer
+        width: root.width/2
+        height: root.height/7
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: memoryContainer.bottom
+        anchors.topMargin: root.height/12
+
+        Item {
+            id: fpsScaleContainer
+            anchors.bottom: parent.bottom
+            width: 5
+            height: parent.height
+
+            Rectangle {
+                id: fpsScale
+                width: 2
+                height: parent.height
+                color: Style.colorOrange
+            }
+
+            Label {
+                width: 60
+                anchors.bottom: fpsScale.bottom
+                anchors.right: fpsScale.right
+                text: "0"
+                font.pixelSize: Style.fontSizeXS
+            }
+
+            Label {
+                width: 60
+                anchors.top: fpsScale.top
+                anchors.topMargin: 0.25*fpsScale.height - height/2
+                anchors.right: fpsScale.right
+                text: "60"
+                font.pixelSize: Style.fontSizeXS
+            }
+
+            Label {
+                width: 60
+                anchors.top: fpsScale.top
+                anchors.topMargin: - height/2
+                anchors.right: fpsScale.right
+                text: "80"
+                font.pixelSize: Style.fontSizeXS
+            }
+        }
+
+
+        ListView {
+            id: graph
+            anchors.top: fpsScaleContainer.top
+            anchors.right: graphContainer.right
+            anchors.bottom: fpsScaleContainer.bottom
+            anchors.left: fpsScaleContainer.right
+
+            model: SystemMonitor
+            orientation: ListView.Horizontal
+            interactive: false
+            delegate: Item {
+                width: graph.width / graph.model.count
+                height: graph.height
+
+                Item {
+                    id: fpsDelegate
+                    anchors.fill: parent
+                    visible: SystemMonitor.fpsReportingEnabled
+                    opacity: 0.8
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.averageFps/80)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: Style.colorOrange
+                    }
+
+                    Rectangle {
+                        width: parent.width
+                        y: parent.height - (model.minimumFps/80)*parent.height
+                        height: 3
+                        color: "red"
+                        opacity: 0.5
+                    }
+
+                    Rectangle {
+                        id: valueContainer
+                        width: parent.width
+                        y: parent.height - (model.maximumFps/80)*parent.height
+                        height: 3
+                        color: "green"
+                        opacity: 0.5
+                        visible: model.maximumFps < 80
+                    }
+                }
+
+                Item {
+                    id: cpuDelegateInside
+                    anchors.fill: parent
+                    visible: root.mergeReport
+                    opacity: 0.8
+
+                    Rectangle {
+                        width: parent.width
+                        height: model.cpuLoad * parent.height
+                        anchors.bottom: parent.bottom
+                        color: "white"
+                    }
+                }
+
+                Item {
+                    id: memoryDelegateInside
+                    anchors.fill: parent
+                    visible: root.mergeReport
+                    opacity: 0.6
+
+                    Rectangle {
+                        width: parent.width
+                        height: (model.memoryUsed/model.memoryTotal)*parent.height
+                        anchors.bottom: parent.bottom
+                        color: Style.colorGrey
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            width: graph.width + 5
+            height: 2
+
+            anchors.top: graph.bottom
+            anchors.left: graph.left
+            anchors.leftMargin: -5
+            color: Style.colorOrange
+        }
+
+        Label {
+            id: redLegend
+            width: graph.width/5
+            anchors.top: graph.bottom
+            anchors.left: graph.left
+            anchors.leftMargin: -10
+            text: "Min FPS"
+            font.pixelSize: Style.fontSizeXS
+            color: "red"
+        }
+
+        Label {
+            id: greenLegend
+            width: graph.width/5
+            anchors.top: graph.bottom
+            anchors.left: redLegend.right
+            anchors.leftMargin: -10
+            text: "Max FPS"
+            font.pixelSize: Style.fontSizeXS
+            color: "green"
+        }
+
+        Label {
+            id: yellowLegend
+            width: graph.width/5
+            anchors.top: graph.bottom
+            anchors.left: greenLegend.right
+            anchors.leftMargin: -10
+            text: "Average FPS"
+            font.pixelSize: Style.fontSizeXS
+            color: Style.colorOrange
+        }
+
+        Label {
+            id: whiteLegend
+            width: graph.width/5
+            anchors.top: graph.bottom
+            anchors.left: yellowLegend.right
+            anchors.leftMargin: -10
+            text: "CPU load: "
+            font.pixelSize: Style.fontSizeXS
+            color: "white"
+        }
+
+        Label {
+            id: greyLegend
+            width: graph.width/5
+            anchors.top: graph.bottom
+            anchors.left: whiteLegend.right
+            anchors.leftMargin: -10
+            text: "RAM load: "
+            font.pixelSize: Style.fontSizeXS
+            color: Style.colorGrey
+        }
+
+    }
+
+    Rectangle {
+        id: rotatingBox
+        width: 60
+        height: 60
+        anchors.top: root.top
+        anchors.topMargin: 50
+        anchors.left: root.left
+        anchors.leftMargin: 150
+        color: "white"
+
+        RotationAnimation {
+            id: animator
+            target: rotatingBox;
+            from: 0;
+            to: 360;
+            loops: Animation.Infinite
+            duration: 1000
+            running: true
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: animator.running = !animator.running
+        }
+    }
+
+    Button {
+        hspan: 3
+        anchors.left: parent.left
+        anchors.leftMargin: 100
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenterOffset: -50
+        text: "Merge Report"
+        onClicked: root.mergeReport = !root.mergeReport
+    }
+
+}