Monitoring Tool: possibility of nested objects inspection

monitoring/ModelInspectionPane.qml

@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 import Monitoring 1.0
 import StatusQ.Core.Utils 0.1
 
-Pane {
+Item {
     property string name
     property var model
     readonly property var rootModel: model
@@ -52,36 +52,6 @@ Pane {
     ColumnLayout {
         anchors.fill: parent
 
-        RowLayout {
-            Layout.fillWidth: true
-
-            visible: showControls
-
-            RoundButton {
-                text: "⬅️"
-
-                onClicked: {
-                    inspectionStackView.pop(StackView.Immediate)
-                }
-            }
-
-            TextInput {
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignVCenter
-
-                text: name
-                font.pixelSize: 20
-                font.bold: true
-
-                selectByMouse: true
-                readOnly: true
-            }
-        }
-
-        MenuSeparator {
-            Layout.fillWidth: true
-        }
-
         Label {
             visible: listView.count
 

monitoring/MonitorEntryPoint.qml

@@ -8,9 +8,7 @@ import Qt.labs.settings 1.0
 import AppLayouts.Wallet.stores 1.0 as WalletStores
 
 Component {
-
     ColumnLayout {
-
         spacing: 0
 
         Settings {
@@ -73,7 +71,7 @@ Component {
                             implicitHeight: delegateRow.implicitHeight
 
                             readonly property var contextPropertyValue:
-                                MonitorUtils.contextPropertyBindingHelper(name, root).value
+                                MonitorUtils.contextPropertyBindingHelper(name, this).value
 
                             Row {
                                 id: delegateRow
@@ -98,6 +96,7 @@ Component {
 
                                 onClicked: {
                                     inspectionStackView.clear()
+                                    headerModel.clear()
 
                                     const props = {
                                         name: name,
@@ -105,6 +104,7 @@ Component {
                                     }
 
                                     inspectionStackView.push(inspectionList, props)
+                                    headerModel.append({ name })
                                 }
                             }
                         }
@@ -120,12 +120,12 @@ Component {
                 Component {
                     id: inspectionList
 
-                    Pane {
+                    ListView {
-                        id: inspectionPanel
-
                         property var objectForInspection
                         property string name
 
+                        ScrollBar.vertical: ScrollBar {}
+
                         onObjectForInspectionChanged: {
                             inspectionModel.clear()
 
@@ -181,107 +181,146 @@ Component {
                             inspectionModel.append(items)
                         }
 
-                        ColumnLayout {
+                        anchors.fill: parent
-                            anchors.fill: parent
-                            anchors.margins: 5
 
-                            Label {
+                        spacing: 5
-                                text: name
+                        clip: true
-                                font.pixelSize: 20
-                                font.bold: true
-                            }
 
-                            MenuSeparator {
+                        model: ListModel {
-                                Layout.fillWidth: true
+                            id: inspectionModel
-                            }
+                        }
 
-                            ListView {
+                        delegate: Item {
-                                Layout.fillWidth: true
+                            implicitWidth: delegateRow.implicitWidth
-                                Layout.fillHeight: true
+                            implicitHeight: delegateRow.implicitHeight
 
-                                spacing: 5
+                            Row {
-                                clip: true
+                                id: delegateRow
 
-                                model: ListModel {
+                                readonly property var object: objectForInspection[name]
-                                    id: inspectionModel
+
+                                Label {
+                                    text: name
                                 }
 
-                                delegate: Item {
+                                Loader {
-                                    implicitWidth: delegateRow.implicitWidth
+                                    active: type !== "function"
-                                    implicitHeight: delegateRow.implicitHeight
+                                    sourceComponent: Label {
-
+                                        text: ` [${type}]`
-                                    Row {
+                                        color: "darkgreen"
-                                        id: delegateRow
-
-                                        readonly property var object: objectForInspection[name]
-
-                                        Label {
-                                            text: name
-                                        }
-
-                                        Loader {
-                                            active: type !== "function"
-                                            sourceComponent: Label {
-                                                text: ` [${type}]`
-                                                color: "darkgreen"
-                                            }
-                                        }
-
-                                        Loader {
-                                            active: type !== "function"
-                                            sourceComponent: Label {
-                                                text: ` (${MonitorUtils.valueToString(delegateRow.object)})`
-                                                color: "darkred"
-                                            }
-                                        }
-
-                                        Loader {
-                                            active: isModel
-                                            sourceComponent: Label {
-                                                text: `, ${delegateRow.object.rowCount()} items`
-                                                color: "darkred"
-                                                font.bold: true
-                                            }
-                                        }
-                                    }
-
-                                    MouseArea {
-                                        anchors.fill: parent
-
-                                        onClicked: {
-                                            if (!isModel)
-                                                return
-
-                                            const props = {
-                                                name: name,
-                                                model: objectForInspection[name]
-                                            }
-
-                                            inspectionStackView.push(modelInspectionComponent,
-                                                                     props, StackView.Immediate)
-                                        }
                                     }
                                 }
 
-                                section.property: "category"
+                                Loader {
-                                section.delegate: Pane {
+                                    active: type !== "function"
-                                    leftPadding: 0
+                                    sourceComponent: Label {
+                                        text: ` (${MonitorUtils.valueToString(delegateRow.object)})`
+                                        color: "darkred"
+                                    }
+                                }
 
-                                    Label {
+                                Loader {
-                                        text: section
+                                    active: isModel
+                                    sourceComponent: Label {
+                                        text: `, ${delegateRow.object.rowCount()} items`
+                                        color: "darkred"
                                         font.bold: true
                                     }
                                 }
                             }
+
+                            MouseArea {
+                                anchors.fill: parent
+
+                                onClicked: {
+                                    if (isModel) {
+                                        const props = {
+                                            name: name,
+                                            model: objectForInspection[name]
+                                        }
+
+                                        inspectionStackView.push(modelInspectionComponent,
+                                                                 props, StackView.Immediate)
+                                        headerModel.append({ name })
+                                    } else if (type !== "function") {
+                                        const props = {
+                                            name: name,
+                                            objectForInspection: objectForInspection[name]
+                                        }
+
+                                        inspectionStackView.push(inspectionList, props, StackView.Immediate)
+                                        headerModel.append({ name })
+                                    }
+                                }
+                            }
+                        }
+
+                        section.property: "category"
+                        section.delegate: Pane {
+                            leftPadding: 0
+
+                            Label {
+                                text: section
+                                font.bold: true
+                            }
                         }
                     }
                 }
 
-                StackView {
+                Pane {
-                    id: inspectionStackView
-
                     SplitView.fillHeight: true
                     SplitView.minimumWidth: 100
+
+                    ColumnLayout {
+                        anchors.fill: parent
+
+                        RowLayout {
+                            Layout.fillWidth: true
+                            Layout.fillHeight: false
+
+                            RoundButton {
+                                text: "⬅️"
+
+                                visible: headerRepeater.count > 1
+
+                                onClicked: {
+                                    inspectionStackView.pop(StackView.Immediate)
+                                    headerModel.remove(headerModel.count - 1)
+                                }
+                            }
+
+                            Repeater {
+                                id: headerRepeater
+
+                                model: ListModel {
+                                    id: headerModel
+                                }
+
+                                delegate: TextInput {
+                                    readonly property bool last: headerRepeater.count - 1 === index
+
+                                    text: model.name + (last ? "" : "  ->  ")
+                                    font.pixelSize: 20
+                                    font.bold: true
+
+                                    selectByMouse: true
+                                    readOnly: true
+                                }
+                            }
+                        }
+
+                        MenuSeparator {
+                            visible: headerRepeater.count
+                            Layout.fillWidth: true
+                        }
+
+                        StackView {
+                            id: inspectionStackView
+
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+                        }
+                    }
                 }
             }
 

monitoring/MonitorUtils.qml

@@ -1,6 +1,6 @@
 pragma Singleton
 
-import QtQml 2.14
+import QtQml 2.15
 
 import Monitoring 1.0
 
@@ -39,7 +39,7 @@ QtObject {
 
     function contextPropertyBindingHelper(name, parent) {
         return Qt.createQmlObject(
-                              `import QtQml 2.14; QtObject { readonly property var value: ${name} }`,
+                              `import QtQml 2.15; QtObject { readonly property var value: ${name} }`,
                               parent, `ctxPropHelperSnippet_${name}`)
     }
 }