zibri-cli 2.2.0 → 2.2.1

package/templates/pages/mailing-list-unsubscribe-confirmation.tsx.tpl

@@ -0,0 +1,40 @@
+import { MailingList, MailingListSubscriber, MaskUtilities, PreactComponent } from 'zibri';
+
+import { Card } from '../components/card';
+import { EmptyPage } from '../components/empty-page';
+import { Heading } from '../components/heading';
+
+type Props = {
+    subscriber: MailingListSubscriber,
+    mailingList: MailingList
+};
+
+export const MailingListUnsubscribeConfirmationPage: PreactComponent<Props> = ({ subscriber, mailingList }) => {
+    const email: string = MaskUtilities.mask(subscriber.email);
+
+    return (
+        <EmptyPage title='Unsubscribed successfully'>
+            <Card className='text-center flex flex-col gap-6'>
+                <img className="block mx-auto" src="/assets/logo.jpg" width="200px" height="200px"/>
+                <p>{email}</p>
+                <Heading className="my-2">
+                    You've unsubscribed from
+                    <br/>
+                    {mailingList.name}
+                </Heading>
+                <p className="mb-4">
+                    We are sad to see you go 😕
+                </p>
+                <div>
+                    <hr/>
+                </div>
+                <p>
+                    Unsubscribed by accident?
+                    <br/>
+                    {/* TODO */}
+                    <a href="">Subscribe again</a> or <a href="/mailing-lists/preferences">manage other email preferences</a>
+                </p>
+            </Card>
+        </EmptyPage>
+    );
+};

package/templates/pages/metrics.tsx.tpl

@@ -0,0 +1,82 @@
+import { Chart } from 'chart.js?client';
+import { MetricsSnapshot, onClient, PreactComponent } from 'zibri';
+
+import { BasePage } from '../components/base-page';
+import { Heading } from '../components/heading';
+import { MetricsStatus } from '../components/metrics-status';
+import { NetworkChart } from '../components/network-chart';
+import { RequestDurationChart } from '../components/request-duration-chart';
+import { RequestsPerSecondChart } from '../components/requests-per-second-chart';
+import { ResourceUsageChart } from '../components/resource-usage-chart';
+
+export type MetricsEvent = CustomEvent<{
+    snaps: MetricsSnapshot[]
+}>;
+
+type Props = {
+    version: string,
+    primary: string,
+    secondary: string
+};
+
+export const MetricsPage: PreactComponent<Props> = ({ version, primary, secondary }) => {
+    Chart.defaults.color = 'whitesmoke';
+    Chart.defaults.borderColor = 'whitesmoke';
+    Chart.defaults.scale.grid.color = 'rgba(200, 200, 200, 0.3)';
+
+    let snaps: MetricsSnapshot[] = [];
+    let automaticReload: boolean = true;
+
+    onClient(() => {
+        window.addEventListener('load', () => {
+            void loadSnapshots();
+            setInterval(() => void loadSnapshots(), 1000);
+        });
+    });
+
+    async function loadSnapshots(): Promise<void> {
+        if (!automaticReload) {
+            return;
+        }
+        try {
+            const resp: Response = await fetch('/metrics');
+            // eslint-disable-next-line typescript/no-unsafe-assignment
+            snaps = await resp.json();
+            document.dispatchEvent(new CustomEvent('metrics:update', { detail: { snaps } }));
+        }
+        catch (error) {
+            console.error('failed to load metrics', error);
+        }
+    }
+
+    return (
+        <>
+            <BasePage title='Metrics'
+                activeRoute='/metrics/dashboard'
+                scripts={['/assets/lib/chartjs-adapter-date-fns.js']}
+                className="flex flex-col gap-4 py-8"
+            >
+                <Heading className="text-center">Metrics</Heading>
+                <div className="w-full px-10 flex flex-col gap-5">
+                    <div className="grid grid-cols-5 gap-5">
+                        <div className="col-span-2 flex flex-col gap-5">
+                            <MetricsStatus
+                                automaticReloadChecked={automaticReload}
+                                onReloadChange={() => automaticReload = !automaticReload}
+                                version={version}
+                                className="flex-1"
+                            >
+                            </MetricsStatus>
+                            <RequestDurationChart className="flex-1" secondary={secondary}></RequestDurationChart>
+                        </div>
+                        <RequestsPerSecondChart secondary={secondary} className="col-span-3"></RequestsPerSecondChart>
+                    </div>
+                    <div className="grid grid-cols-2 gap-5">
+                        <ResourceUsageChart primary={primary} secondary={secondary}></ResourceUsageChart>
+                        <NetworkChart primary={primary} secondary={secondary}></NetworkChart>
+                    </div>
+                </div>
+            </BasePage>
+        </>
+    );
+};