status-desktop/monitoring/MonitorEntryPoint.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import Monitoring 1.0


Component {
    SplitView {
        id: root

        ColumnLayout {
            SplitView.fillHeight: true
            SplitView.preferredWidth: 450

            spacing: 5

            Label {
                Layout.fillWidth: true
                Layout.margins: 5

                text: "Context properties:"
                font.bold: true
            }

            ListView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.margins: 5

                model: Monitor.contexPropertiesModel

                clip: true
                spacing: 5

                delegate: Item {
                    implicitWidth: delegateRow.implicitWidth
                    implicitHeight: delegateRow.implicitHeight

                    readonly property var contextPropertyValue:
                        MonitorUtils.contextPropertyBindingHelper(name, root).value

                    Row {
                        id: delegateRow

                        Label {
                            text: name
                        }

                        Label {
                            text: ` [${MonitorUtils.typeName(contextPropertyValue)}]`
                            color: "darkgreen"
                        }

                        Label {
                            text: ` (${MonitorUtils.valueToString(contextPropertyValue)})`
                            color: "darkred"
                        }
                    }

                    MouseArea {
                        anchors.fill: parent

                        onClicked: {
                            inspectionStackView.clear()

                            const props = {
                                name: name,
                                objectForInspection: contextPropertyValue
                            }

                            inspectionStackView.push(inspectionList, props)
                        }
                    }
                }
            }
        }

        Component {
            id: modelInspectionComponent

            Pane {
                property string name
                property var model
                readonly property var rootModel: model

                readonly property var roles: Monitor.modelRoles(model)

                readonly property var rolesModelContent: roles.map(role => ({
                    visible: true,
                    name: role.name,
                    width: Math.ceil(fontMetrics.advanceWidth(`  ${role.name}  `))
                }))

                property int columnsTotalWidth:
                    rolesModelContent.reduce((a, x) => a + x.width, 0)

                ListModel {
                    id: rolesModel

                    Component.onCompleted: append(rolesModelContent)
                }

                Control {
                    id: helperControl

                    font.bold: true
                }

                FontMetrics {
                    id: fontMetrics

                    font.bold: true
                }

                ColumnLayout {
                    anchors.fill: parent

                    RowLayout {
                        Layout.fillWidth: true

                        RoundButton {
                            text: "⬅️"

                            onClicked: {
                                inspectionStackView.pop(StackView.Immediate)
                            }
                        }

                        Label {
                            Layout.fillWidth: true
                            Layout.alignment: Qt.AlignVCenter

                            text: name
                            font.pixelSize: 20
                            font.bold: true
                        }
                    }

                    MenuSeparator {
                        Layout.fillWidth: true
                    }

                    Label {
                        text: "Hint: use right/left button click on a column " +
                              "header to ajust width, press cell content to " +
                              "see full value"
                    }

                    Label {
                        text: `rows count: ${model.rowCount()}`
                        font.bold: true
                    }

                    ListView {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        clip: true
                        contentWidth: columnsTotalWidth
                        flickableDirection: Flickable.AutoFlickDirection

                        model: rootModel

                        delegate: Rectangle {
                            implicitWidth: flow.implicitWidth
                            implicitHeight: flow.implicitHeight

                            readonly property var topModel: model

                            Row {
                                id: flow

                                Repeater {
                                    model: rolesModel

                                    Label {
                                        id: label

                                        width: model.width
                                        height: implicitHeight * 1.2

                                        text: topModel[model.name].toString()
                                        elide: Text.ElideRight
                                        maximumLineCount: 1
                                        verticalAlignment: Text.AlignVCenter

                                        leftPadding: 2
                                        rightPadding: 1

                                        Rectangle {
                                            anchors.bottom: parent.bottom
                                            anchors.left: parent.left
                                            anchors.right: parent.right
                                            height: 1
                                            color: "gray"
                                        }

                                        Rectangle {
                                            anchors.top: parent.top
                                            anchors.bottom: parent.bottom
                                            anchors.left: parent.left
                                            width: 1
                                            color: "gray"
                                        }

                                        MouseArea {
                                            id: labelMouseArea

                                            anchors.fill: parent
                                        }

                                        ToolTip.visible: labelMouseArea.pressed
                                        ToolTip.text: label.text
                                    }
                                }
                            }
                        }

                        headerPositioning: ListView.OverlayHeader

                        header: Item {
                            implicitWidth: headerFlow.implicitWidth
                            implicitHeight: headerFlow.implicitHeight * 1.5
                            z: 2

                            Rectangle {
                                color: "whitesmoke"
                                anchors.fill: parent
                                border.color: "gray"
                            }

                            Row {
                                id: headerFlow

                                anchors.verticalCenter: parent.verticalCenter

                                Repeater {
                                    model: rolesModel

                                    Label {
                                        text: `  ${model.name}  `
                                        font.bold: true

                                        width: model.width
                                        elide: Text.ElideRight
                                        maximumLineCount: 1

                                        MouseArea {
                                            anchors.fill: parent

                                            acceptedButtons: Qt.LeftButton | Qt.RightButton

                                            onClicked: {
                                                const factor = 1.5
                                                const oldWidth = model.width
                                                const leftBtn = mouse.button === Qt.LeftButton

                                                const newWidth
                                                    = Math.ceil(leftBtn ? oldWidth * factor : oldWidth / factor)

                                                model.width = newWidth
                                                columnsTotalWidth += newWidth - oldWidth
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        Component {
            id: inspectionList

            Pane {
                id: inspectionPanel

                property var objectForInspection
                property string name

                onObjectForInspectionChanged: {
                    inspectionModel.clear()

                    if (!objectForInspection)
                        return

                    const items = []

                    for (const property in objectForInspection) {
                        const type = typeof objectForInspection[property]

                        if (type === "function") {
                            items.push({
                                name: property,
                                category: "functions",
                                isModel: false,
                                type: type
                            })
                        } else {
                            const value = objectForInspection[property]
                            const detailedType = MonitorUtils.typeName(value)
                            const isModel = Monitor.isModel(value)

                            items.push({
                                name: property,
                                type: detailedType,
                                category: isModel? "models" : "properties",
                                isModel: isModel
                            })
                        }
                    }

                    items.sort((a, b) => {
                        const nameA = a.category
                        const nameB = b.category

                        if (nameA === nameB)
                            return 0

                        if (nameA === "models")
                            return -1

                        if (nameB === "models")
                            return 1

                        if (nameA < nameB)
                            return -1

                        if (nameA > nameB)
                            return 1
                    })

                    inspectionModel.append(items)
                }

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 5

                    Label {
                        text: name
                        font.pixelSize: 20
                        font.bold: true
                    }

                    MenuSeparator {
                        Layout.fillWidth: true
                    }

                    ListView {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        spacing: 5
                        clip: true

                        model: ListModel {
                            id: inspectionModel
                        }

                        delegate: Item {
                            implicitWidth: delegateRow.implicitWidth
                            implicitHeight: delegateRow.implicitHeight

                            Row {
                                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"
                        section.delegate: Pane {
                            leftPadding: 0

                            Label {
                                text: section
                                font.bold: true
                            }
                        }
                    }
                }
            }
        }

        StackView {
            id: inspectionStackView

            SplitView.fillHeight: true
            SplitView.minimumWidth: 100
        }
    }
}