zibri-cli 2.2.0 → 2.2.1

package/templates/components/request-duration-chart.tsx.tpl

@@ -0,0 +1,83 @@
+import { Chart as ChartJsChart } from 'chart.js?client';
+import { Metric, MetricsSnapshot, onClient, PreactComponent } from 'zibri';
+
+import { Chart } from './chart';
+import { MetricsEvent } from '../pages/metrics';
+
+type Props = {
+    className?: string,
+    secondary: string
+};
+
+export const RequestDurationChart: PreactComponent<Props> = ({ className = '', secondary }) => {
+    let requestDurationChart: ChartJsChart | undefined;
+
+    onClient(() => {
+        document.addEventListener('metrics:update', (ev) => {
+            if (!(ev instanceof CustomEvent) || !('snaps' in ev.detail)) {
+                throw new Error('received invalid metrics event');
+            }
+            const { snaps } = (ev as MetricsEvent).detail;
+            renderRequestDurationChart(snaps);
+        });
+    });
+
+    function renderRequestDurationChart(snaps: MetricsSnapshot[]): void {
+        if (!snaps.length) {
+            return;
+        }
+        // Build histogram from the *latest* snapshot only
+        const latest: Metric[] = snaps[snaps.length - 1]?.metrics ?? [];
+        const sumsByLe: Record<string, number> = latest
+            .reduce<Record<string, number>>((map, m) => {
+                if (m.name !== 'http_request_duration_ms' || m.labels.le == undefined) {
+                    return map;
+                }
+                const le: string | number = m.labels.le;
+                map[le] = (map[le] ?? 0) + m.value;
+                return map;
+            }, {});
+        const sorted: { le: string, v: number }[] = Object.entries(sumsByLe)
+            .map(([le, v]) => ({ le, v }))
+            .sort((a, b) => {
+                const na: number = a.le === '+Inf' ? Infinity : +a.le;
+                const nb: number = b.le === '+Inf' ? Infinity : +b.le;
+                return na - nb;
+            });
+        const perBucket: { le: string, v: number }[] = sorted.map((cur, i) => {
+            const prev: number = i > 0 ? sorted[i - 1].v : 0;
+            return { le: cur.le, v: cur.v - prev };
+        });
+        const hist: { labels: string[], values: number[] } = perBucket.reduce<{ labels: string[], values: number[] }>(
+            (acc, m) => {
+                acc.labels.push(`${m.le} ms`);
+                acc.values.push(m.v);
+                return acc;
+            },
+            { labels: [], values: [] }
+        );
+
+        if (requestDurationChart) {
+            requestDurationChart.data.labels = hist.labels;
+            requestDurationChart.data.datasets[0].data = hist.values;
+            requestDurationChart.update();
+            return;
+        }
+
+        const el: HTMLCanvasElement | null = document.querySelector('#requestDurationChart');
+        if (!el) {
+            return;
+        }
+        // render latency histogram
+        requestDurationChart = new ChartJsChart(el, {
+            type: 'bar',
+            data: { labels: hist.labels, datasets: [{ label: 'Count', data: hist.values, backgroundColor: secondary }] }
+        });
+    }
+
+    return (
+        <>
+            <Chart canvasId="requestDurationChart" title="Request duration" className={className}></Chart>
+        </>
+    );
+};

package/templates/components/requests-per-second-chart.tsx.tpl

@@ -0,0 +1,167 @@
+import { ChartDataset, Chart as ChartJsChart } from 'chart.js?client';
+import { Metric, MetricsSnapshot, onClient, PreactComponent } from 'zibri';
+
+import { Chart } from './chart';
+import { MetricsEvent } from '../pages/metrics';
+
+type Props = {
+    secondary: string,
+    className?: string
+};
+
+type StatusClass = 'success' | 'client' | 'server';
+
+type DataPoint = { x: Date, y: number };
+
+export const RequestsPerSecondChart: PreactComponent<Props> = ({ secondary, className = '' }) => {
+    let rpsChart: ChartJsChart<'line', DataPoint[]> | undefined;
+
+    onClient(() => {
+        document.addEventListener('metrics:update', (ev) => {
+            if (!(ev instanceof CustomEvent) || !('snaps' in ev.detail)) {
+                throw new Error('received invalid metrics event');
+            }
+            const { snaps } = (ev as MetricsEvent).detail;
+            renderRequestsPerSecondChart(snaps);
+        });
+    });
+
+    function renderRequestsPerSecondChart(snaps: MetricsSnapshot[]): void {
+        const seriesSuccess: DataPoint[] = [];
+        const seriesClientError: DataPoint[] = [];
+        const seriesServerError: DataPoint[] = [];
+
+        snaps.forEach((snap, i, all) => {
+            const t: Date = new Date(snap.timestamp);
+            if (i === 0) {
+                seriesSuccess.push({ x: t, y: 0 });
+                seriesClientError.push({ x: t, y: 0 });
+                seriesServerError.push({ x: t, y: 0 });
+                return;
+            }
+
+            const intervalSec: number = (new Date(snap.timestamp).getTime() - new Date(all[i - 1].timestamp).getTime()) / 1000;
+
+            const prev: Metric[] = all[i - 1].metrics;
+            const curr: Metric[] = snap.metrics;
+            // sum counts by class
+            const sumFor = (statusClass: StatusClass) => {
+                const sum = (metrics: Metric[]) => metrics
+                    .filter(m => {
+                        if (m.name !== 'http_requests_total') {
+                            return false;
+                        }
+                        switch (statusClass) {
+                            case 'success': {
+                                return !m.labels.status_code?.toString().startsWith('5') && !m.labels.status_code?.toString().startsWith('4');
+                            }
+                            case 'client': {
+                                return m.labels.status_code?.toString().startsWith('4');
+                            }
+                            case 'server': {
+                                return m.labels.status_code?.toString().startsWith('5');
+                            }
+                        }
+                    })
+                    .reduce((acc, m) => acc + m.value, 0);
+                return (sum(curr) - sum(prev)) / intervalSec;
+            };
+            seriesSuccess.push({ x: t, y: sumFor('success') });
+            seriesClientError.push({ x: t, y: sumFor('client') });
+            seriesServerError.push({ x: t, y: sumFor('server') });
+        });
+
+        // build event‑loop lag series (in ms)
+        const lagSeries: DataPoint[] = snaps.map(snap => {
+            const m: Metric | undefined = snap.metrics.find(m => m.name === 'nodejs_eventloop_lag_seconds');
+            return {
+                x: new Date(snap.timestamp),
+                y: m ? m.value * 1000 : 0
+            };
+        });
+
+        const datasets: ChartDataset<'line', DataPoint[]>[] = [
+            {
+                label: 'Event Loop Lag',
+                data: lagSeries,
+                fill: false,
+                yAxisID: 'y1',
+                backgroundColor: 'purple',
+                borderColor: 'purple'
+            },
+            {
+                label: 'Server Error',
+                data: seriesServerError,
+                fill: true,
+                backgroundColor: 'red',
+                borderColor: 'red'
+            },
+            {
+                label: 'Client Error',
+                data: seriesClientError,
+                fill: true,
+                backgroundColor: secondary,
+                borderColor: secondary
+            },
+            {
+                label: 'Success',
+                data: seriesSuccess,
+                fill: true,
+                backgroundColor: 'green',
+                borderColor: 'green'
+            }
+        ];
+
+        if (rpsChart) {
+            rpsChart.data.datasets[0].data = datasets[0].data;
+            rpsChart.data.datasets[1].data = datasets[1].data;
+            rpsChart.data.datasets[2].data = datasets[2].data;
+            rpsChart.data.datasets[3].data = datasets[3].data;
+            rpsChart.update();
+            return;
+        }
+
+        const el: HTMLCanvasElement | null = document.querySelector('#rpsChart');
+        if (!el) {
+            return;
+        }
+
+        // render RPS chart
+        rpsChart = new ChartJsChart<'line', DataPoint[]>(el, {
+            type: 'line',
+            data: { datasets },
+            options: {
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'second',
+                            displayFormats: {
+                                second: 'HH:mm:ss'
+                            }
+                        },
+                        ticks: { stepSize: 5, source: 'auto' },
+                        grid: { display: false }
+                    },
+                    y: {
+                        stacked: true,
+                        beginAtZero: true,
+                        title: { display: true, text: 'Requests/sec' },
+                        grid: { display: true }
+                    },
+                    y1: {
+                        position: 'right',
+                        title: { display: true, text: 'Lag (ms)' },
+                        ticks: { callback: (v): string => typeof v === 'number' ? `${v.toFixed(1)} ms` : v }
+                    }
+                }
+            }
+        });
+    }
+
+    return (
+        <>
+            <Chart canvasId="rpsChart" title="Requests per second" className={className}></Chart>
+        </>
+    );
+};

package/templates/components/resource-usage-chart.tsx.tpl

@@ -0,0 +1,121 @@
+import { Chart as ChartJsChart } from 'chart.js?client';
+import { Metric, MetricsSnapshot, onClient, PreactComponent } from 'zibri';
+
+import { Chart } from './chart';
+import { MetricsEvent } from '../pages/metrics';
+
+type Props = {
+    primary: string,
+    secondary: string,
+    className?: string
+};
+
+type DataPoint = { x: Date, y: number };
+
+export const ResourceUsageChart: PreactComponent<Props> = ({ primary, secondary, className = '' }) => {
+    let resourceUsageChart: ChartJsChart<'line', DataPoint[]> | undefined;
+
+    onClient(() => {
+        document.addEventListener('metrics:update', (ev) => {
+            if (!(ev instanceof CustomEvent) || !('snaps' in ev.detail)) {
+                throw new Error('received invalid metrics event');
+            }
+            const { snaps } = (ev as MetricsEvent).detail;
+            renderResourceUsageChart(snaps);
+        });
+    });
+
+    function renderResourceUsageChart(snaps: MetricsSnapshot[]): void {
+        const data: DataPoint[] = snaps.map(snap => {
+            const mem: Metric | undefined = snap.metrics.find(m => m.name === 'process_resident_memory_bytes');
+            return {
+                x: new Date(snap.timestamp),
+                y: mem ? mem.value / 1024 / 1024 : 0 // MB
+            };
+        });
+
+        const userSeries: number[] = snaps.map(s => s.metrics.find(m => m.name === 'process_cpu_user_seconds_total')?.value ?? 0);
+        const systemSeries: number[] = snaps.map(s => s.metrics.find(m => m.name === 'process_cpu_system_seconds_total')?.value ?? 0);
+        const times: number[] = snaps.map(s => new Date(s.timestamp).getTime() / 1000); // seconds
+        const coresSeries: number[] = snaps.map(s => s.metrics.find(m => m.name === 'process_cpu_count')?.value ?? 1);
+        const cpuSeries: DataPoint[] = times.map((t, i) => {
+            if (i === 0) {
+                return { x: new Date(t * 1000), y: 0 };
+            }
+            const dt: number = t - times[i - 1]; // interval in seconds (should be ~5)
+            const du: number = userSeries[i] - userSeries[i - 1];
+            const ds: number = systemSeries[i] - systemSeries[i - 1];
+            const cores: number = coresSeries[i];
+            const usedSec: number = du + ds; // total CPU seconds used in that interval
+            const pct: number = (usedSec / dt / cores) * 100; // CPU% across all cores
+            return { x: new Date(t * 1000), y: pct };
+        });
+
+        if (resourceUsageChart) {
+            resourceUsageChart.data.datasets[0].data = data;
+            resourceUsageChart.data.datasets[1].data = cpuSeries;
+            resourceUsageChart.update();
+            return;
+        }
+
+        const el: HTMLCanvasElement | null = document.querySelector('#resourceUsageChart');
+        if (!el) {
+            return;
+        }
+
+        resourceUsageChart = new ChartJsChart(el, {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        label: 'RAM (MB)',
+                        data,
+                        yAxisID: 'y',
+                        borderColor: secondary,
+                        backgroundColor: secondary
+                    },
+                    {
+                        label: 'CPU (%)',
+                        data: cpuSeries,
+                        yAxisID: 'yCPU',
+                        borderColor: primary,
+                        backgroundColor: primary
+                    }
+                ]
+            },
+            options: {
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'second',
+                            displayFormats: {
+                                second: 'HH:mm:ss'
+                            }
+                        },
+                        grid: { display: false }
+                    },
+                    y: {
+                        ticks: {
+                            callback: v => `${v} MB`
+                        },
+                        beginAtZero: true
+                    },
+                    yCPU: {
+                        position: 'right',
+                        grid: { drawOnChartArea: false }, // don't duplicate grid lines
+                        ticks: {
+                            callback: v => `${v}%`
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    return (
+        <>
+            <Chart canvasId="resourceUsageChart" title="Resource Usage" className={className}></Chart>
+        </>
+    );
+};

package/templates/components/textarea.tsx.tpl

@@ -0,0 +1,23 @@
+import { PreactComponent } from 'zibri';
+
+type Props = {
+    id: string,
+    label: string | undefined,
+    onChange?: (value: string) => void,
+    className?: string
+};
+
+export const TextArea: PreactComponent<Props> = ({ label, id, className, onChange }) => {
+    return (
+        <div className={`flex flex-col gap-1 ${className}`}>
+            {label && <label className="cursor-pointer" for={id}>
+                {label}
+            </label>}
+            <textarea onChange={(ev) => onChange?.(ev.currentTarget.value)}
+                className={'p-1 border-none rounded resize-none'}
+                autocomplete="off"
+                id={id}
+            />
+        </div>
+    );
+};

package/templates/pages/assets.tsx.tpl

@@ -0,0 +1,23 @@
+import { PreactComponent, TreeNode } from 'zibri';
+
+import { BasePage } from '../components/base-page';
+import { Card } from '../components/card';
+import { FileEntryComponent } from '../components/file-entry';
+import { Heading } from '../components/heading';
+
+type Props = {
+    nodes: TreeNode[]
+};
+
+export const AssetsPage: PreactComponent<Props> = ({ nodes }) => {
+    return (
+        <BasePage title='Assets' activeRoute='/assets' className="flex flex-col gap-4 py-8">
+            <Heading className="text-center">Assets</Heading>
+            <Card className="overflow-scroll h-[520px] min-w-[500px] mx-auto">
+                <div className="flex flex-col gap-2">
+                    {nodes.map(n => <FileEntryComponent node={n}></FileEntryComponent>)}
+                </div>
+            </Card>
+        </BasePage>
+    );
+};

package/templates/pages/error.tsx.tpl

@@ -0,0 +1,42 @@
+import { ErrorPageTemplate, GlobalRegistry, onServer } from 'zibri';
+
+import { Card } from '../components/card';
+import { EmptyPage } from '../components/empty-page';
+import { Heading } from '../components/heading';
+import { Link } from '../components/link';
+
+export const ErrorPage: ErrorPageTemplate = ({ error }) => {
+    let name: string = '';
+
+    onServer(() => {
+        name = GlobalRegistry.getAppData('name') ?? '';
+    });
+
+    return <EmptyPage title={error.title} className='flex items-center justify-center'>
+        <div className="flex gap-8">
+            <Card className='!py-0 max-w-64'>
+                <Link href="/">
+                    <img src="/assets/logo.jpg" width="256px" height="256px" />
+                </Link>
+                <Link href="/">
+                    <Heading tag="h2" className='text-center !text-2xl'>{name}</Heading>
+                </Link>
+            </Card>
+            <div className='flex flex-col gap-4 w-[500px]'>
+                <Card>
+                    <Heading>{error.status}: {error.title}</Heading>
+                </Card>
+                <Card className='flex-1'>
+                    <div className='flex flex-col gap-2'>
+                        {error.paragraphs.map(p => <p>{p}</p>)}
+                    </div>
+                </Card>
+                <Card>
+                    <Link icon='/assets/open-api/swagger.png' href="/explorer">
+                        OpenAPI Explorer
+                    </Link>
+                </Card>
+            </div>
+        </div>
+    </EmptyPage>;
+};

package/templates/pages/home.tsx.tpl

@@ -0,0 +1,44 @@
+import { PreactComponent } from 'zibri';
+
+import { BasePage } from '../components/base-page';
+import { Card } from '../components/card';
+import { Heading } from '../components/heading';
+import { Link } from '../components/link';
+
+type Props = {
+    appName: string
+};
+
+export const HomePage: PreactComponent<Props> = ({ appName }) => {
+    return (
+        <BasePage title='' activeRoute='/' className="flex flex-col gap-4 py-8">
+            <Heading className="text-center">{appName}</Heading>
+            <div className="max-w-fit mx-auto grid grid-cols-2 gap-4">
+                <Card className="flex flex-col gap-2 max-w-80">
+                    <Link href="/assets" icon="/assets/assets.svg">
+                        Assets
+                    </Link>
+                    <p>
+                        Lists all publicly registered assets.
+                    </p>
+                </Card>
+                <Card className="flex flex-col gap-2 max-w-80">
+                    <Link href="/explorer" icon="/assets/open-api/swagger.png">
+                        OpenAPI Explorer
+                    </Link>
+                    <p>
+                        The official OpenAPI/Swagger documentation.
+                    </p>
+                </Card>
+                {/* <Card className="flex flex-col gap-2 max-w-80">
+                    <Link href="/metrics/dashboard" icon="/assets/metrics.svg">
+                        Metrics
+                    </Link>
+                    <p>
+                        A basic metrics dashboard.
+                    </p>
+                </Card> */}
+            </div>
+        </BasePage>
+    );
+};

package/templates/pages/mailing-list-preferences.tsx.tpl

@@ -0,0 +1,149 @@
+import { MailingList, MailingListSubscriber, MaskUtilities, onClient, PreactComponent } from 'zibri';
+
+import { Button } from '../components/button';
+import { Card } from '../components/card';
+import { Checkbox } from '../components/checkbox';
+import { EmptyPage } from '../components/empty-page';
+import { Heading } from '../components/heading';
+
+type Props = {
+    subscriber: MailingListSubscriber,
+    mailingLists: MailingList[]
+};
+
+type MailingListDisplayData = MailingList & {
+    isSubscribedTo: boolean
+};
+
+export const MailingListPreferencesPage: PreactComponent<Props> = ({ subscriber, mailingLists }) => {
+    let updateButton: HTMLButtonElement;
+    let statusBar: HTMLDivElement;
+    let subscriberId: string;
+
+    const email: string = MaskUtilities.mask(subscriber.email);
+    const lists: MailingListDisplayData[] = mailingLists.map(l => ({
+        ...l,
+        isSubscribedTo: subscriber.mailingLists.some(sl => sl.id === l.id)
+    }));
+
+    let checkedMailingListIdsPriorChanges: string[] = lists.filter(l => l.isSubscribedTo).map(l => l.id);
+    let currentCheckedMailingListIds: string[] = [...checkedMailingListIdsPriorChanges];
+
+    onClient(() => {
+        updateButton = document.querySelector('#update-button')!;
+        statusBar = document.querySelector('#status-bar')!;
+        const subscriberIdParam: string | null = new URL(window.location.href).searchParams.get('subscriberId');
+        if (!subscriberIdParam) {
+            location.href = '/';
+            return;
+        }
+        subscriberId = subscriberIdParam;
+    });
+
+    function updateCheckedMailingListIds(l: MailingListDisplayData): void {
+        if (l.isSubscribedTo) {
+            currentCheckedMailingListIds.push(l.id);
+        }
+        else {
+            currentCheckedMailingListIds = currentCheckedMailingListIds.filter(id => id !== l.id);
+        }
+
+        checkIsDirty();
+    }
+
+    function checkIsDirty(): void {
+        if (checkedMailingListIdsPriorChanges.find(id => !currentCheckedMailingListIds.includes(id))) {
+            updateButton.disabled = false;
+            return;
+        }
+        if (currentCheckedMailingListIds.find(id => !checkedMailingListIdsPriorChanges.includes(id))) {
+            updateButton.disabled = false;
+            return;
+        }
+
+        updateButton.disabled = true;
+    }
+
+    async function update(): Promise<void> {
+        setIsLoading();
+
+        const success: boolean = (await fetch(
+            `/mailing-lists/preferences?subscriberId=${subscriberId}`,
+            {
+                method: 'PATCH',
+                body: JSON.stringify({ mailingListIds: currentCheckedMailingListIds }),
+                headers: { 'content-type': 'application/json' }
+            }
+        )).ok;
+
+        if (success) {
+            setIsSuccess();
+            return;
+        }
+
+        for (const id of lists.map(l => l.id)) {
+            if (!checkedMailingListIdsPriorChanges.includes(id)) {
+                const checkbox: HTMLInputElement = document.querySelector(`#${id}`)!;
+                checkbox.checked = false;
+            }
+        }
+        for (const id of checkedMailingListIdsPriorChanges) {
+            if (!lists.map(l => l.id).includes(id)) {
+                const checkbox: HTMLInputElement = document.querySelector(`#${id}`)!;
+                checkbox.checked = true;
+            }
+        }
+        setIsFailed();
+    }
+
+    function reset(): void {
+        checkedMailingListIdsPriorChanges = [...currentCheckedMailingListIds];
+        checkIsDirty();
+    }
+    function removeStatus(): void {
+        statusBar.style.backgroundColor = '';
+        statusBar.textContent = null;
+    }
+    function setIsLoading(): void {
+        updateButton.disabled = true;
+        statusBar.style.backgroundColor = 'gray';
+        statusBar.textContent = 'loading...';
+    }
+    function setIsSuccess(): void {
+        removeStatus();
+        statusBar.style.backgroundColor = 'green';
+        statusBar.textContent = 'preferences updated';
+        reset();
+        setTimeout(removeStatus, 3000);
+    }
+    function setIsFailed(): void {
+        removeStatus();
+        statusBar.style.backgroundColor = 'red';
+        statusBar.textContent = 'failed updating preferences';
+        reset();
+        setTimeout(removeStatus, 3000);
+    }
+
+    return (
+        <>
+            <EmptyPage title='Mailing List Preferences'>
+                <Card className='text-center flex flex-col gap-6'>
+                    <img className="block mx-auto" src="/assets/logo.jpg" width="200px" height="200px"/>
+                    <p className="text-center">{email}</p>
+                    <Heading className='my-2'>
+                        Mailing list preferences
+                    </Heading>
+                    <ul>
+                        {lists.map(l => <li className="mb-2">
+                            <Checkbox onChange={() => updateCheckedMailingListIds(l)} label={l.name} id={l.id} checked={l.isSubscribedTo}>
+                            </Checkbox>
+                        </li>)}
+                    </ul>
+                    <Button onClick={() => update()} className='mx-auto' disabled id='update-button'>Update</Button>
+                    <div class="flex items-center justify-center h-6 -mt-[9px] -m-[15px] transition duration-300 ease-in" id="status-bar">
+                    </div>
+                </Card>
+            </EmptyPage>
+        </>
+    );
+};