dockza.app 0.2.0

package/dist/ui/stacks/stack-tree.js

@@ -0,0 +1,346 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackTree = void 0;
+exports.computeColumns = computeColumns;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../../theme");
+const format_1 = require("../../utils/format");
+const status_1 = require("../../utils/status");
+const widgets_1 = require("../widgets");
+function computeColumns(width) {
+    const indentW = 3;
+    const statusW = 16;
+    const cpuW = 8;
+    const memW = 8;
+    const portsW = 22;
+    const showPorts = width >= 90;
+    const showMem = width >= 70;
+    const showCpu = width >= 55;
+    const fixedAfterIndent = statusW + (showCpu ? cpuW : 0) + (showMem ? memW : 0) + (showPorts ? portsW : 0);
+    const flex = Math.max(18, width - indentW - fixedAfterIndent);
+    const nameW = Math.max(10, Math.floor(flex * 0.55));
+    const imageW = Math.max(8, flex - nameW);
+    return {
+        totalWidth: width,
+        indentW,
+        nameW,
+        imageW,
+        statusW,
+        cpuW,
+        memW,
+        portsW: showPorts ? portsW : 0,
+        showCpu,
+        showMem,
+        showPorts,
+    };
+}
+class StackTree {
+    wrapper;
+    header;
+    list;
+    messageBox;
+    stacks = [];
+    statsCache = new Map();
+    rows = [];
+    expanded = new Set();
+    seenStacks = new Set();
+    filter = '';
+    updating = false;
+    navigateHandlers = [];
+    constructor(parent, dims) {
+        this.wrapper = neo_blessed_1.default.box({
+            parent,
+            top: dims.top,
+            left: dims.left,
+            width: dims.width,
+            height: dims.height,
+        });
+        this.header = (0, widgets_1.createHeaderBar)(this.wrapper);
+        this.list = (0, widgets_1.createListWidget)(this.wrapper);
+        this.messageBox = (0, widgets_1.createCenteredMessage)(this.wrapper);
+        this.list.on('select item', (_item, index) => {
+            if (this.updating)
+                return;
+            this.emitNavigate(index);
+        });
+    }
+    on(event, handler) {
+        if (event === 'navigate')
+            this.navigateHandlers.push(handler);
+    }
+    show() {
+        this.wrapper.show();
+    }
+    hide() {
+        this.wrapper.hide();
+    }
+    focus() {
+        this.list.focus();
+    }
+    showLoading() {
+        this.messageBox.setContent(_theme_1.t.dim('  Loading…'));
+        this.messageBox.show();
+    }
+    setData(stacks, statsCache) {
+        // Auto-expand live stacks the first time we see them (e.g. on startup).
+        for (const s of stacks) {
+            if (!this.seenStacks.has(s.id)) {
+                this.seenStacks.add(s.id);
+                if (s.isLive)
+                    this.expanded.add(s.id);
+            }
+        }
+        this.stacks = stacks;
+        this.statsCache = statsCache;
+        this.rebuild({ preserveSelection: true });
+    }
+    setFilter(q) {
+        this.filter = q;
+        this.rebuild({ preserveSelection: false });
+    }
+    getFilter() {
+        return this.filter;
+    }
+    toggleExpansion() {
+        const sel = this.rows[(0, widgets_1.listSelected)(this.list)];
+        if (!sel || sel.kind !== 'stack-header')
+            return false;
+        if (this.expanded.has(sel.stackId))
+            this.expanded.delete(sel.stackId);
+        else
+            this.expanded.add(sel.stackId);
+        this.rebuild({ preserveSelection: true });
+        return true;
+    }
+    expandSelected() {
+        const sel = this.rows[(0, widgets_1.listSelected)(this.list)];
+        if (!sel)
+            return;
+        if (sel.kind === 'stack-header' && !this.expanded.has(sel.stackId)) {
+            this.expanded.add(sel.stackId);
+            this.rebuild({ preserveSelection: true });
+        }
+    }
+    collapseSelected() {
+        const idx = (0, widgets_1.listSelected)(this.list);
+        const sel = this.rows[idx];
+        if (!sel)
+            return;
+        if (sel.kind === 'stack-header' && this.expanded.has(sel.stackId)) {
+            this.expanded.delete(sel.stackId);
+            this.rebuild({ preserveSelection: true });
+            return;
+        }
+        if (sel.kind === 'service') {
+            const headerIdx = this.rows.findIndex((r) => r.kind === 'stack-header' && r.stackId === sel.stackId);
+            if (headerIdx >= 0) {
+                this.updating = true;
+                this.list.select(headerIdx);
+                this.updating = false;
+                this.emitNavigate(headerIdx);
+            }
+        }
+    }
+    jumpToStack(stackId) {
+        this.expanded.add(stackId);
+        this.rebuild({ preserveSelection: false });
+        const idx = this.rows.findIndex((r) => r.kind === 'stack-header' && r.stackId === stackId);
+        if (idx >= 0) {
+            this.updating = true;
+            this.list.select(idx);
+            this.updating = false;
+            this.emitNavigate(idx);
+        }
+    }
+    getSelected() {
+        const idx = (0, widgets_1.listSelected)(this.list);
+        return this.rowToSelection(this.rows[idx]);
+    }
+    /** Re-render the current dataset (call after terminal resize). */
+    redraw() {
+        this.rebuild({ preserveSelection: true });
+    }
+    rebuild({ preserveSelection }) {
+        const prevKey = preserveSelection ? this.currentSelectionKey() : null;
+        this.messageBox.hide();
+        this.rows = this.flatten();
+        const width = Math.max(20, Number(this.list.width) - 2);
+        const cols = computeColumns(width);
+        this.renderHeader(cols);
+        const items = this.rows.map((r) => this.renderRow(r, cols));
+        this.updating = true;
+        this.list.setItems(items);
+        let target = 0;
+        if (prevKey) {
+            const found = this.rows.findIndex((r) => this.rowKey(r) === prevKey);
+            if (found >= 0)
+                target = found;
+        }
+        target = Math.min(target, Math.max(0, this.rows.length - 1));
+        this.list.select(target);
+        this.updating = false;
+        if (this.rows.length === 0) {
+            const msg = this.filter ? `  No matches for ${_theme_1.t.fg(this.filter)}` : '  No stacks';
+            this.messageBox.setContent(_theme_1.t.dim(msg));
+            this.messageBox.show();
+        }
+        this.emitNavigate(target);
+    }
+    flatten() {
+        const out = [];
+        const needle = this.filter.toLowerCase();
+        for (const s of this.stacks) {
+            let services = s.services;
+            const stackMatches = !needle || s.id.toLowerCase().includes(needle);
+            if (needle && !stackMatches) {
+                services = s.services.filter((c) => c.name.toLowerCase().includes(needle) || c.image.toLowerCase().includes(needle));
+                if (services.length === 0)
+                    continue;
+            }
+            const expanded = this.expanded.has(s.id) || (Boolean(needle) && !stackMatches);
+            out.push({
+                kind: 'stack-header',
+                stackId: s.id,
+                stack: s,
+                expanded,
+            });
+            if (expanded) {
+                for (const c of services) {
+                    out.push({ kind: 'service', stackId: s.id, container: c });
+                }
+            }
+        }
+        return out;
+    }
+    renderHeader(cols) {
+        const indent = (0, format_1.padEnd)('', cols.indentW);
+        const name = (0, format_1.padEnd)(_theme_1.t.dim('STACK · SERVICE'), cols.nameW + cols.imageW + 1);
+        const status = (0, format_1.padEnd)(_theme_1.t.dim('STATE'), cols.statusW);
+        const cpu = cols.showCpu ? (0, format_1.padEnd)(_theme_1.t.dim('CPU'), cols.cpuW) : '';
+        const mem = cols.showMem ? (0, format_1.padEnd)(_theme_1.t.dim('MEM'), cols.memW) : '';
+        const ports = cols.showPorts ? _theme_1.t.dim('PORTS') : '';
+        this.header.setContent(`${indent}${name}${status}${cpu}${mem}${ports}`);
+    }
+    renderRow(row, cols) {
+        return row.kind === 'stack-header' ? this.renderStackHeader(row, cols) : this.renderService(row, cols);
+    }
+    renderStackHeader(row, cols) {
+        const caret = row.expanded ? _theme_1.t.accent('▾') : _theme_1.t.accent('▸');
+        const indent = (0, format_1.padEnd)(` ${caret}`, cols.indentW);
+        const glyph = _theme_1.t.accent('▣');
+        const labelMax = cols.nameW + cols.imageW - 4;
+        const name = (0, format_1.truncate)(row.stack.id, labelMax);
+        const nameRender = row.stack.isLive ? `{bold}${_theme_1.t.fg(name)}{/bold}` : `{bold}${_theme_1.t.dim(name)}{/bold}`;
+        const counts = row.stack.counts;
+        const pills = [];
+        if (counts.running > 0)
+            pills.push(this.pill(`${counts.running} up`, _theme_1.t.green));
+        if (counts.errored > 0)
+            pills.push(this.pill(`${counts.errored} err`, _theme_1.t.red));
+        if (counts.stopped > 0)
+            pills.push(this.pill(`${counts.stopped} stop`, _theme_1.t.faint));
+        const nameCol = (0, format_1.padEnd)(`${glyph} ${nameRender}  ${pills.join(' ')}`, cols.nameW + cols.imageW + 1);
+        const stateLabel = row.stack.isLive ? _theme_1.t.aqua('live') : _theme_1.t.faint('—');
+        const status = (0, format_1.padEnd)(stateLabel, cols.statusW);
+        const cpu = cols.showCpu ? (0, format_1.padEnd)('', cols.cpuW) : '';
+        const mem = cols.showMem ? (0, format_1.padEnd)('', cols.memW) : '';
+        const ports = cols.showPorts ? '' : '';
+        return `${indent}${nameCol}${status}${cpu}${mem}${ports}`;
+    }
+    renderService(row, cols) {
+        const c = row.container;
+        const indent = (0, format_1.padEnd)(` ${_theme_1.t.faint('└─')}`, cols.indentW);
+        const dot = (0, status_1.statusDot)(c);
+        const nameMax = Math.max(4, cols.nameW - 3);
+        const name = (0, format_1.truncate)(c.name, nameMax);
+        const nameStyled = (0, status_1.isActive)(c.status) ? _theme_1.t.fg(name) : _theme_1.t.dim(name);
+        const nameCol = (0, format_1.padEnd)(`${dot} ${nameStyled}`, cols.nameW);
+        const imageMax = Math.max(4, cols.imageW - 1);
+        const image = (0, format_1.truncate)(c.image, imageMax);
+        const imageCol = (0, format_1.padEnd)(_theme_1.t.dim(image), cols.imageW + 1);
+        const status = (0, format_1.padEnd)(this.colorStatus(c, shortStatus(c)), cols.statusW);
+        const cpuVal = this.statsCache.get(c.id)?.cpuPercent;
+        const memVal = this.statsCache.get(c.id)?.memPercent;
+        const cpuCol = cols.showCpu ? (0, format_1.padEnd)((0, status_1.formatCpuCell)(c, cpuVal), cols.cpuW) : '';
+        const memCol = cols.showMem ? (0, format_1.padEnd)((0, status_1.formatMemCell)(c, memVal), cols.memW) : '';
+        let portsCol = '';
+        if (cols.showPorts) {
+            const portStr = c.ports[0] ? (0, format_1.truncate)(c.ports[0], cols.portsW - 1) : '';
+            portsCol = portStr ? _theme_1.t.pink(portStr) : _theme_1.t.faint('—');
+        }
+        return `${indent}${nameCol}${imageCol}${status}${cpuCol}${memCol}${portsCol}`;
+    }
+    pill(text, color) {
+        return `${_theme_1.t.faint('[')}${color(text)}${_theme_1.t.faint(']')}`;
+    }
+    colorStatus(c, text) {
+        if ((0, status_1.isActive)(c.status))
+            return _theme_1.t.green(text);
+        if ((c.status === 'exited' || c.status === 'dead') && c.exitCode !== 0)
+            return _theme_1.t.red(text);
+        return _theme_1.t.dim(text);
+    }
+    currentSelectionKey() {
+        return this.rowKey(this.rows[(0, widgets_1.listSelected)(this.list)]);
+    }
+    rowKey(row) {
+        if (!row)
+            return null;
+        return row.kind === 'stack-header' ? `s:${row.stackId}` : `c:${row.container.id}`;
+    }
+    rowToSelection(row) {
+        if (!row)
+            return null;
+        if (row.kind === 'stack-header') {
+            return { kind: 'stack', stack: row.stack, expanded: row.expanded };
+        }
+        return { kind: 'service', container: row.container, stackId: row.stackId };
+    }
+    emitNavigate(idx) {
+        const sel = this.rowToSelection(this.rows[idx]);
+        this.navigateHandlers.forEach((h) => h(sel));
+    }
+}
+exports.StackTree = StackTree;
+function shortRelative(s) {
+    if (/^a few seconds ago$/.test(s))
+        return 'now';
+    const m = s.match(/^(an?|\d+)\s+(second|minute|hour|day|month|year)s?\s+ago$/);
+    if (!m)
+        return s;
+    const num = m[1] === 'a' || m[1] === 'an' ? '1' : m[1];
+    const unit = m[2];
+    const suffix = unit === 'second'
+        ? 's'
+        : unit === 'minute'
+            ? 'm'
+            : unit === 'hour'
+                ? 'h'
+                : unit === 'day'
+                    ? 'd'
+                    : unit === 'month'
+                        ? 'mo'
+                        : 'y';
+    return `${num}${suffix}`;
+}
+function shortStatus(c) {
+    switch (c.status) {
+        case 'running':
+            return `RUN ${c.uptime}`;
+        case 'paused':
+            return 'PAUSED';
+        case 'restarting':
+            return 'RESTARTING';
+        case 'exited':
+            return c.exitCode === 0 ? `EXIT 0 · ${shortRelative(c.uptime)}` : `EXIT ${c.exitCode}`;
+        case 'dead':
+            return c.exitCode !== 0 ? `DEAD ${c.exitCode}` : 'DEAD';
+        case 'created':
+            return 'NEW';
+        case 'removing':
+            return 'RMV';
+    }
+}