dockza.app 0.2.0

package/dist/ui/containers/confirm-dialog.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = void 0;
+const neo_blessed_1 = __importDefault(require("neo-blessed"));
+const _theme_1 = require("../../theme");
+class ConfirmDialog {
+    screen;
+    box;
+    visible = false;
+    onConfirm = null;
+    onCancel = null;
+    handleConfirm = () => {
+        if (!this.visible)
+            return;
+        this.hide();
+        this.onConfirm?.();
+    };
+    handleCancel = () => {
+        if (!this.visible)
+            return;
+        this.hide();
+        this.onCancel?.();
+    };
+    constructor(screen) {
+        this.screen = screen;
+        this.box = neo_blessed_1.default.box({
+            parent: screen,
+            width: 52,
+            height: 9,
+            top: 'center',
+            left: 'center',
+            tags: true,
+            border: { type: 'line' },
+            style: {
+                bg: _theme_1.C.selection,
+                border: { fg: _theme_1.C.purple },
+            },
+            hidden: true,
+        });
+        screen.append(this.box);
+    }
+    show(options) {
+        this.onConfirm = options.onConfirm;
+        this.onCancel = options.onCancel;
+        const danger = options.danger ?? false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.box.style.border.fg = danger ? _theme_1.C.red : _theme_1.C.purple;
+        const confirmBtn = danger
+            ? `${_theme_1.t.red('[y]')} ${_theme_1.t.fg('Yes, proceed')}`
+            : `${_theme_1.t.green('[y]')} ${_theme_1.t.fg('Yes')}`;
+        const lines = [
+            '',
+            `  {bold}${danger ? _theme_1.t.red(options.title) : _theme_1.t.fg(options.title)}{/bold}`,
+            '',
+            `  ${_theme_1.t.comment(options.message)}`,
+            '',
+            `  ${confirmBtn}    ${_theme_1.t.comment('[n] Cancel')}`,
+            `  ${_theme_1.t.comment('y:confirm  n / Esc:cancel')}`,
+        ];
+        this.box.setContent(lines.join('\n'));
+        this.visible = true;
+        this.box.show();
+        this.box.focus();
+        this.screen.key(['y', 'S-y'], this.handleConfirm);
+        this.screen.key(['n', 'S-n', 'escape'], this.handleCancel);
+        this.screen.render();
+    }
+    hide() {
+        this.visible = false;
+        this.box.hide();
+        for (const k of ['y', 'S-y'])
+            this.screen.removeKey(k, this.handleConfirm);
+        for (const k of ['n', 'S-n', 'escape'])
+            this.screen.removeKey(k, this.handleCancel);
+        this.screen.render();
+    }
+    isVisible() {
+        return this.visible;
+    }
+}
+exports.ConfirmDialog = ConfirmDialog;

package/dist/ui/containers/container-detail.js

@@ -0,0 +1,189 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerDetail = void 0;
+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");
+const BAR_WIDTH = 20;
+class ContainerDetail {
+    screen;
+    wrapper;
+    headerBox;
+    box;
+    container = null;
+    lastStats;
+    envExpanded = false;
+    visible = false;
+    closeHandlers = [];
+    handleClose = () => {
+        if (!this.visible)
+            return;
+        this.hide();
+        this.closeHandlers.forEach((h) => h());
+    };
+    handleE = () => {
+        if (!this.visible || !this.container)
+            return;
+        this.envExpanded = !this.envExpanded;
+        this.render();
+        this.screen.render();
+    };
+    constructor(screen, dims) {
+        this.screen = screen;
+        this.wrapper = neo_blessed_1.default.box({
+            parent: screen,
+            top: dims.top,
+            left: dims.left,
+            width: dims.width,
+            height: dims.height,
+            style: { bg: _theme_1.C.bg },
+            hidden: true,
+        });
+        this.headerBox = (0, widgets_1.createHeaderBar)(this.wrapper);
+        this.box = neo_blessed_1.default.box({
+            parent: this.wrapper,
+            top: 1,
+            left: 0,
+            height: '100%-1',
+            width: '100%',
+            scrollable: true,
+            keys: true,
+            mouse: true,
+            tags: true,
+            alwaysScroll: true,
+            scrollbar: { ch: '│', style: { fg: _theme_1.C.comment } },
+            style: { fg: _theme_1.C.fg, bg: _theme_1.C.bg },
+            padding: { left: 2, right: 2 },
+        });
+    }
+    on(event, handler) {
+        if (event === 'close')
+            this.closeHandlers.push(handler);
+    }
+    show(container, stats) {
+        this.container = container;
+        if (stats !== undefined)
+            this.lastStats = stats;
+        this.envExpanded = false;
+        this.visible = true;
+        this.render();
+        this.updateHeader();
+        this.wrapper.show();
+        this.box.focus();
+        this.screen.key(['e'], this.handleE);
+        this.screen.key(['escape'], this.handleClose);
+        this.screen.render();
+    }
+    hide() {
+        this.visible = false;
+        this.wrapper.hide();
+        this.screen.removeKey('e', this.handleE);
+        this.screen.removeKey('escape', this.handleClose);
+        this.screen.render();
+    }
+    update(container, stats) {
+        this.container = container;
+        if (stats !== undefined)
+            this.lastStats = stats;
+        if (this.visible) {
+            this.render();
+            this.updateHeader();
+        }
+    }
+    isVisible() {
+        return this.visible;
+    }
+    getContainerId() {
+        return this.container?.id ?? null;
+    }
+    updateHeader() {
+        if (!this.container)
+            return;
+        this.headerBox.setContent(` ${_theme_1.t.purple('DETAIL')} — ${_theme_1.t.fg(this.container.name)}`);
+    }
+    render() {
+        if (!this.container)
+            return;
+        this.box.setContent(this.buildContent(this.container, this.lastStats));
+    }
+    buildContent(c, stats) {
+        const lines = [];
+        lines.push(`{bold}${_theme_1.t.purple(c.name)}{/bold}  ${_theme_1.t.comment(`${c.image} · ${c.id.slice(0, 12)}`)}`);
+        lines.push((0, status_1.colorByStatus)(c, `● ${(0, status_1.statusLabel)(c)}`));
+        lines.push('');
+        lines.push(`${_theme_1.t.comment('Uptime:')}   ${(0, status_1.colorByStatus)(c, c.uptime)}`);
+        lines.push(`${_theme_1.t.comment('Restart:')}  ${c.restartPolicy}`);
+        lines.push(`${_theme_1.t.comment('PIDs:')}     ${c.status === 'running' ? String(c.pids) : _theme_1.t.comment('—')}`);
+        if (c.ports.length > 0) {
+            lines.push('');
+            lines.push(_theme_1.t.comment('Ports:'));
+            for (const p of c.ports)
+                lines.push(`  ${_theme_1.t.pink(p)}`);
+        }
+        if (c.networks.length > 0) {
+            lines.push('');
+            const info = c.ip ? `${c.networks[0]} · ${c.ip}` : c.networks[0];
+            lines.push(`${_theme_1.t.comment('Network:')}  ${_theme_1.t.cyan(info)}`);
+            for (const n of c.networks.slice(1))
+                lines.push(`           ${_theme_1.t.cyan(n)}`);
+        }
+        if (stats && c.status === 'running') {
+            lines.push('');
+            lines.push(this.cpuBar(stats.cpuPercent));
+            lines.push(this.memBar(stats.memPercent, stats.memUsageMB, stats.memLimitMB));
+            lines.push(this.diskLine(stats.diskReadMB, stats.diskWriteMB));
+        }
+        if (c.mounts.length > 0) {
+            lines.push('');
+            lines.push(_theme_1.t.comment('MOUNTS'));
+            for (const m of c.mounts) {
+                lines.push(_theme_1.t.comment(`${m.source} → ${m.destination} (${m.rw ? 'rw' : 'ro'})`));
+            }
+        }
+        lines.push('');
+        const arrow = this.envExpanded ? '▼' : '▶';
+        lines.push(_theme_1.t.comment(`ENV (${c.env.length}) ${arrow}  — press e to toggle`));
+        if (this.envExpanded) {
+            for (const entry of c.env) {
+                const eq = entry.indexOf('=');
+                if (eq >= 0) {
+                    lines.push(_theme_1.t.yellow(`${entry.slice(0, eq)}=${(0, format_1.truncate)(entry.slice(eq + 1), 55)}`));
+                }
+                else {
+                    lines.push(_theme_1.t.yellow(entry));
+                }
+            }
+        }
+        lines.push('');
+        lines.push(this.actionsLine(c));
+        return lines.join('\n');
+    }
+    cpuBar(cpu) {
+        const filled = Math.min(BAR_WIDTH, Math.round((cpu / 100) * BAR_WIDTH));
+        const color = (0, status_1.cpuColor)(cpu);
+        const bar = `[${color('█'.repeat(filled))}${_theme_1.t.comment('░'.repeat(BAR_WIDTH - filled))}]`;
+        return `${_theme_1.t.comment('CPU')}    ${bar} ${color(`${cpu.toFixed(1)}%`)}`;
+    }
+    memBar(mem, usageMB, limitMB) {
+        const filled = Math.min(BAR_WIDTH, Math.round((mem / 100) * BAR_WIDTH));
+        const color = (0, status_1.memColor)(mem);
+        const bar = `[${color('█'.repeat(filled))}${_theme_1.t.comment('░'.repeat(BAR_WIDTH - filled))}]`;
+        const label = `(${(0, format_1.humanSizeMB)(usageMB)} / ${(0, format_1.humanSizeMB)(limitMB)})`;
+        return `${_theme_1.t.comment('MEM')}    ${bar} ${color(`${mem.toFixed(1)}%`)} ${_theme_1.t.comment(label)}`;
+    }
+    diskLine(readMB, writeMB) {
+        return `${_theme_1.t.comment('DISK')}   ${_theme_1.t.comment('R:')}${_theme_1.t.cyan((0, format_1.humanSizeMB)(readMB))}  ${_theme_1.t.comment('W:')}${_theme_1.t.orange((0, format_1.humanSizeMB)(writeMB))}`;
+    }
+    actionsLine(c) {
+        if ((0, status_1.isActive)(c.status)) {
+            return `  ${_theme_1.t.red('[s] Stop')}  ${_theme_1.t.green('[r] Restart')}  ${_theme_1.t.orange('[k] Kill')}  ${_theme_1.t.purple('[x] Shell')}  ${_theme_1.t.cyan('[l] Logs')}  ${_theme_1.t.yellow('[e] Env')}  ${_theme_1.t.comment('Esc close')}`;
+        }
+        return `  ${_theme_1.t.green('[S] Start')}  ${_theme_1.t.red('[d] Remove')}  ${_theme_1.t.cyan('[l] Logs')}  ${_theme_1.t.yellow('[e] Env')}  ${_theme_1.t.comment('Esc close')}`;
+    }
+}
+exports.ContainerDetail = ContainerDetail;

package/dist/ui/containers/container-list.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerList = void 0;
+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");
+class ContainerList {
+    wrapper;
+    header;
+    list;
+    messageBox;
+    containers = [];
+    selectHandlers = [];
+    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, index) => {
+            const container = this.containers[index];
+            if (container)
+                this.selectHandlers.forEach((h) => h(container));
+        });
+        this.list.on('select item', (_item, index) => {
+            const container = this.containers[index] ?? null;
+            this.navigateHandlers.forEach((h) => h(container));
+        });
+        this.list.on('click', () => {
+            const container = this.containers[(0, widgets_1.listSelected)(this.list)];
+            if (container)
+                this.selectHandlers.forEach((h) => h(container));
+        });
+    }
+    on(event, handler) {
+        if (event === 'select')
+            this.selectHandlers.push(handler);
+        if (event === 'navigate')
+            this.navigateHandlers.push(handler);
+    }
+    showLoading() {
+        this.messageBox.setContent(_theme_1.t.comment('  Loading...'));
+        this.messageBox.show();
+    }
+    setData(containers, stats) {
+        this.containers = containers;
+        this.messageBox.hide();
+        const innerWidth = Math.max(10, this.list.width - 2);
+        const cols = this.calcColWidths(innerWidth);
+        this.renderHeader(cols);
+        const items = containers.map((c) => this.buildRow(c, cols, stats?.get(c.id)));
+        this.list.setItems(items);
+        if (containers.length === 0) {
+            this.messageBox.setContent(_theme_1.t.comment('  No containers'));
+            this.messageBox.show();
+        }
+    }
+    getSelected() {
+        return this.containers[(0, widgets_1.listSelected)(this.list)] ?? null;
+    }
+    getSelectedIndex() {
+        return (0, widgets_1.listSelected)(this.list);
+    }
+    focus() {
+        this.list.focus();
+    }
+    show() {
+        this.wrapper.show();
+    }
+    hide() {
+        this.wrapper.hide();
+    }
+    calcColWidths(inner) {
+        const c1 = Math.floor(inner * 0.21);
+        const c2 = Math.floor(inner * 0.17);
+        const c3 = Math.floor(inner * 0.22);
+        const c4 = Math.floor(inner * 0.1);
+        const c5 = Math.floor(inner * 0.08);
+        const c6 = Math.floor(inner * 0.08);
+        const c7 = Math.max(1, inner - c1 - c2 - c3 - c4 - c5 - c6);
+        return [c1, c2, c3, c4, c5, c6, c7];
+    }
+    renderHeader([c1, c2, c3, c4, c5, c6]) {
+        const h1 = (0, format_1.padEnd)(_theme_1.t.comment(' NAME'), c1 + 1);
+        const h2 = (0, format_1.padEnd)(_theme_1.t.comment('IMAGE'), c2);
+        const h3 = (0, format_1.padEnd)(_theme_1.t.comment('STATUS & UPTIME'), c3);
+        const h4 = (0, format_1.padEnd)(_theme_1.t.comment('NET'), c4);
+        const h5 = (0, format_1.padEnd)(_theme_1.t.comment('CPU'), c5);
+        const h6 = (0, format_1.padEnd)(_theme_1.t.comment('MEM'), c6);
+        const h7 = _theme_1.t.comment('PORTS');
+        this.header.setContent(`${h1}${h2}${h3}${h4}${h5}${h6}${h7}`);
+    }
+    buildRow(c, [c1, c2, c3, c4, c5, c6, c7], stats) {
+        const nameRaw = (0, format_1.truncate)(c.name, Math.max(1, c1 - 2));
+        const col1 = (0, format_1.padEnd)(`${(0, status_1.statusDot)(c)} ${nameRaw}`, c1);
+        const imageRaw = (0, format_1.truncate)(c.image, Math.max(1, c2 - 1));
+        const col2 = (0, format_1.padEnd)(_theme_1.t.comment(imageRaw), c2);
+        const stateRaw = `${(0, status_1.statusLabel)(c)} · ${c.uptime}`;
+        const col3 = (0, format_1.padEnd)((0, status_1.colorByStatus)(c, (0, format_1.truncate)(stateRaw, c3 - 1)), c3);
+        const netRaw = c.networks.length > 0 ? (0, format_1.truncate)(c.networks[0], c4 - 1) : '—';
+        const col4 = (0, format_1.padEnd)(c.networks.length > 0 ? _theme_1.t.cyan(netRaw) : _theme_1.t.comment(netRaw), c4);
+        const col5 = (0, format_1.padEnd)((0, status_1.formatCpuCell)(c, stats?.cpuPercent), c5);
+        const col6 = (0, format_1.padEnd)((0, status_1.formatMemCell)(c, stats?.memPercent), c6);
+        const rawPort = c.ports.length > 0 ? (0, format_1.truncate)(c.ports[0], c7 - 1) : '';
+        const col7 = rawPort ? _theme_1.t.pink(rawPort) : _theme_1.t.comment('—');
+        return `${col1}${col2}${col3}${col4}${col5}${col6}${col7}`;
+    }
+}
+exports.ContainerList = ContainerList;