path: root/desktop/island/perf/PerfPanel.qml

// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.

import Quickshell
import QtQuick
import QtQuick.Layouts
import "../.."
import "Perf.js" as P

// CPU, GPU, network and disks as cards in three columns: CPU down the left,
// GPU and network beside it, disks under those two. Numbers come from Perf;
// colours follow conky's bands, so they read as they did there.
GridLayout {
    id: panel

    columns: 3
    columnSpacing: 8
    rowSpacing: 8

    readonly property real col: (width - 2 * columnSpacing) / 3
    readonly property var gpuTemp: sensor("GPU")
    readonly property var vramTemp: sensor("VRAM")

    function tone(v, warn, crit) {
        const b = P.band(v, warn, crit);
        return b === "crit" ? Theme.red : b === "warn" ? Theme.yellow : b === "ok" ? Theme.green : Theme.subtext;
    }
    function deg(v) { return v === null ? "--" : Math.round(v) + "°"; }
    function sensor(label) {
        return Perf.temps.find(t => t.label === label) || { value: null, warn: 0, crit: 0 };
    }
    function pct(part, whole) { return part === null || !whole ? null : 100 * part / whole; }
    function last(list) { return list.length ? list[list.length - 1] : null; }
    // Conky's glyphs, re-checked in Inconsolata Nerd Font.
    function glyph(d) {
        if (d.host) return String.fromCodePoint(0xF06F3);                 // network share
        return String.fromCodePoint({ "/": 0xF318, "/home": 0xF015 }[d.mount] ?? 0xF02CA);
    }

    component Label: Text {
        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
        color: Theme.text
    }

    // A label left, a value right, an optional glyph before the label.
    component Pair: Item {
        property string glyph: ""
        property string label: ""
        property string value: ""
        property color labelColor: Theme.subtext
        property color valueColor: Theme.text
        width: parent ? parent.width : 0
        implicitHeight: valueText.implicitHeight

        Row {
            spacing: 6
            Text {
                visible: text !== ""
                text: parent.parent.glyph
                font { family: Theme.iconFamily; pixelSize: Theme.fontSize - 2 }
                color: parent.parent.labelColor
            }
            Label { text: parent.parent.label; color: parent.parent.labelColor }
        }
        Label {
            id: valueText
            anchors.right: parent.right
            text: parent.value
            color: parent.valueColor
        }
    }

    component Bar: Rectangle {
        property real frac: 0
        property color fill: Theme.green
        width: parent ? parent.width : 0
        height: 5
        radius: 3
        color: Theme.surfaceAlt
        Rectangle {
            width: parent.width * Math.max(0, Math.min(1, parent.frac))
            height: parent.height
            radius: 3
            color: parent.fill
        }
    }

    component Card: Rectangle {
        default property alias content: body.data
        property string title: ""
        property string headline: ""
        property color headlineColor: Theme.text
        radius: 10
        color: Qt.alpha(Theme.surface, 0.6)
        implicitHeight: body.implicitHeight + 20
        Layout.fillHeight: true
        Layout.alignment: Qt.AlignTop

        Column {
            id: body
            x: 10
            y: 10
            width: parent.width - 20
            spacing: 5

            Item {
                width: parent.width
                height: Math.max(titleText.implicitHeight, headText.implicitHeight)
                Text {
                    id: titleText
                    anchors.verticalCenter: parent.verticalCenter
                    text: parent.parent.parent.title
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4; bold: true }
                    color: Theme.subtext
                }
                Text {
                    id: headText
                    anchors.right: parent.right
                    text: parent.parent.parent.headline
                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize + 4; bold: true }
                    color: parent.parent.parent.headlineColor
                }
            }
        }
    }

    // --- CPU ----------------------------------------------------------------

    Card {
        Layout.row: 0
        Layout.column: 0
        Layout.rowSpan: 2
        Layout.preferredWidth: panel.col
        title: "CPU"
        headline: Perf.load === null ? "--" : Math.round(Perf.load) + "%"
        headlineColor: panel.tone(Perf.load, 25, 75)

        Label {
            width: parent.width
            text: Perf.cpuModel
            color: Theme.subtext
            elide: Text.ElideRight
        }

        // One bar per core, rising from a common baseline.
        Row {
            id: eq
            width: parent.width
            height: 40
            spacing: 2
            Repeater {
                model: Perf.cores
                delegate: Item {
                    required property var modelData
                    width: (eq.width - eq.spacing * (Perf.cores.length - 1)) / Perf.cores.length
                    height: eq.height
                    Rectangle {
                        anchors.bottom: parent.bottom
                        width: parent.width
                        height: Math.max(1, parent.height * modelData / 100)
                        radius: 1
                        color: panel.tone(modelData, 25, 75)
                    }
                }
            }
        }

        Pair {
            label: "RAM"
            value: Perf.mem ? P.bytes(Perf.mem.used) + " / " + P.bytes(Perf.mem.total) : "--"
        }
        Bar {
            frac: Perf.mem ? Perf.mem.used / Perf.mem.total : 0
            fill: panel.tone(panel.pct(Perf.mem ? Perf.mem.used : null, Perf.mem ? Perf.mem.total : 0), 25, 75)
        }

        Repeater {
            model: Perf.temps.filter(t => t.label !== "GPU" && t.label !== "VRAM")
            delegate: Pair {
                required property var modelData
                label: modelData.label
                value: panel.deg(modelData.value)
                valueColor: panel.tone(modelData.value, modelData.warn, modelData.crit)
            }
        }
    }

    // --- GPU ----------------------------------------------------------------

    // No utilisation: xe exposes no busy percentage.
    Card {
        Layout.row: 0
        Layout.column: 1
        Layout.preferredWidth: panel.col
        title: "GPU · ARC B580"
        headline: panel.deg(panel.gpuTemp.value)
        headlineColor: panel.tone(panel.gpuTemp.value, panel.gpuTemp.warn, panel.gpuTemp.crit)

        Pair {
            label: "VRAM"
            value: Perf.vram === null ? "--" : P.bytes(Perf.vram) + " / " + P.bytes(Perf.vramTotal)
        }
        Bar {
            frac: (Perf.vram ?? 0) / Perf.vramTotal
            fill: panel.tone(panel.pct(Perf.vram, Perf.vramTotal), 25, 75)
        }
        Pair {
            label: "VRAM temp"
            value: panel.deg(panel.vramTemp.value)
            valueColor: panel.tone(panel.vramTemp.value, panel.vramTemp.warn, panel.vramTemp.crit)
        }
        Pair {
            label: "Fan"
            value: Perf.fan === null ? "--" : Perf.fan + " rpm"
        }
    }

    // --- network ------------------------------------------------------------

    Card {
        Layout.row: 0
        Layout.column: 2
        Layout.preferredWidth: panel.col
        title: "NET · " + Perf.iface

        Canvas {
            id: graph
            width: parent.width
            height: 44
            onPaint: {
                const ctx = getContext("2d");
                ctx.reset();
                const max = Math.max(1, ...Perf.rx, ...Perf.tx);
                const line = (data, color) => {
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 1.5;
                    ctx.beginPath();
                    data.forEach((v, i) => {
                        const x = width * i / 59;
                        const y = height - 1 - (height - 2) * v / max;
                        if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y);
                    });
                    ctx.stroke();
                };
                line(Perf.rx, Theme.teal);
                line(Perf.tx, Theme.peach);
            }
            Connections {
                target: Perf
                function onRxChanged() { graph.requestPaint(); }
                function onTxChanged() { graph.requestPaint(); }
            }
        }

        Pair {
            label: "↓ " + P.speed(panel.last(Perf.rx))
            labelColor: Theme.teal
            value: "↑ " + P.speed(panel.last(Perf.tx))
            valueColor: Theme.peach
        }
        Pair { label: "LAN"; value: Perf.lan || "--" }

        // The public IP, red when it differs from the pinned one. The pin
        // stores the address shown; it is lit while they are the same.
        Item {
            width: parent.width
            height: pubText.implicitHeight

            Label { text: "Public"; color: Theme.subtext }
            Label {
                id: pubText
                anchors { right: pin.left; rightMargin: 6 }
                text: Perf.ip.ip || "--"
                color: Perf.ip.mismatch ? Theme.red : Theme.text
            }
            Text {
                id: pin
                anchors { right: parent.right; verticalCenter: pubText.verticalCenter }
                text: String.fromCodePoint(0xF0403)
                font { family: Theme.iconFamily; pixelSize: Theme.fontSize - 2 }
                color: Perf.ip.ip !== "" && Perf.ip.ip === Prefs.pinnedIp ? Theme.text : Theme.overlay

                MouseArea {
                    anchors.fill: parent
                    anchors.margins: -4
                    enabled: Perf.ip.ip !== ""
                    cursorShape: Qt.PointingHandCursor
                    onClicked: Prefs.setPinnedIp(Perf.ip.ip)
                }
            }
        }
    }

    // --- disks --------------------------------------------------------------

    Card {
        Layout.row: 1
        Layout.column: 1
        Layout.columnSpan: 2
        Layout.preferredWidth: 2 * panel.col + panel.columnSpacing
        title: "DISKS"

        Repeater {
            model: Perf.disks
            delegate: Column {
                required property var modelData
                width: parent.width
                spacing: 2
                Pair {
                    glyph: panel.glyph(modelData)
                    label: modelData.host || modelData.mount
                    value: modelData.pct + "%  ·  " + P.bytes(modelData.used) + " / " + P.bytes(modelData.size)
                    valueColor: panel.tone(modelData.pct, 25, 75)
                }
                Bar {
                    frac: modelData.pct / 100
                    fill: panel.tone(modelData.pct, 25, 75)
                }
            }
        }
    }
}