querysub 0.525.0 → 0.527.0

package/src/diagnostics/misc-pages/DNSPage.tsx

@@ -1,354 +0,0 @@
-module.allowclient = true;
-
-import { qreact } from "../../4-dom/qreact";
-import { css } from "typesafecss";
-import { SocketFunction } from "socket-function/SocketFunction";
-import { getBrowserUrlNode } from "../../-f-node-discovery/NodeDiscovery";
-import { getSyncedController } from "../../library-components/SyncedController";
-import { assertIsManagementUser } from "../managementPages";
-import { t } from "../../2-proxy/schema2";
-import { Querysub } from "../../4-querysub/Querysub";
-import { sort, timeInDay } from "socket-function/src/misc";
-import { isNode } from "typesafecss";
-import { formatDateJSX } from "../../misc/formatJSX";
-
-const RECORDS_PER_PAGE = 1000;
-const HEX_SUBDOMAIN_LENGTH = 17;
-const STALE_HEX_SUBDOMAIN_AGE = timeInDay * 7;
-const HEX_SUBDOMAIN_REGEX = new RegExp(`^(\\*\\.)?[0-9a-f]{${HEX_SUBDOMAIN_LENGTH}}\\..+$`);
-
-export type DNSRecord = {
-    id: string;
-    zoneId: string;
-    zoneName: string;
-    type: string;
-    name: string;
-    content: string;
-    proxied: boolean;
-    ttl: number;
-    createdOn: number;
-    modifiedOn: number;
-    // Time we last asserted this record, parsed from our freshness comment tag, falling back to
-    //  Cloudflare's modified_on when the tag is absent. This is the time used for staleness.
-    setOn: number;
-};
-
-class DNSPageControllerBase {
-    public async getAllRecords(): Promise<DNSRecord[]> {
-        if (!isNode()) throw new Error(`getAllRecords must be called serverside`);
-        const { cloudflareGETCall } = await import("../../-b-authorities/cloudflareHelpers");
-        const { freshnessTime } = await import("../../-b-authorities/dnsAuthority");
-        const { getDomain } = await import("../../config");
-
-        let zones = await cloudflareGETCall<{ id: string; name: string }[]>("/zones", {
-            per_page: String(RECORDS_PER_PAGE),
-        });
-        let domain = getDomain();
-        zones = zones.filter(z => z.name === domain);
-
-        let allRecords: DNSRecord[] = [];
-        for (let zone of zones) {
-            let page = 1;
-            while (true) {
-                let records = await cloudflareGETCall<{
-                    id: string;
-                    type: string;
-                    name: string;
-                    content: string;
-                    proxied: boolean;
-                    ttl: number;
-                    created_on: string;
-                    modified_on: string;
-                    comment?: string;
-                }[]>(`/zones/${zone.id}/dns_records`, {
-                    per_page: String(RECORDS_PER_PAGE),
-                    page: String(page),
-                });
-                for (let record of records) {
-                    let modifiedOn = new Date(record.modified_on).getTime();
-                    allRecords.push({
-                        id: record.id,
-                        zoneId: zone.id,
-                        zoneName: zone.name,
-                        type: record.type,
-                        name: record.name,
-                        content: record.content,
-                        proxied: record.proxied,
-                        ttl: record.ttl,
-                        createdOn: new Date(record.created_on).getTime(),
-                        modifiedOn,
-                        setOn: freshnessTime(record.comment) || modifiedOn,
-                    });
-                }
-                if (records.length < RECORDS_PER_PAGE) break;
-                page++;
-            }
-        }
-        return allRecords;
-    }
-
-    public async deleteRecord(config: { zoneId: string; recordId: string }): Promise<void> {
-        if (!isNode()) throw new Error(`deleteRecord must be called serverside`);
-        const { cloudflareCall } = await import("../../-b-authorities/cloudflareHelpers");
-        await cloudflareCall(`/zones/${config.zoneId}/dns_records/${config.recordId}`, Buffer.from([]), "DELETE");
-    }
-
-    public async deleteRecordsByContent(config: { content: string }): Promise<number> {
-        if (!isNode()) throw new Error(`deleteRecordsByContent must be called serverside`);
-        const { cloudflareCall } = await import("../../-b-authorities/cloudflareHelpers");
-        let all = await this.getAllRecords();
-        let matching = all.filter(x => x.content === config.content);
-        for (let record of matching) {
-            await cloudflareCall(`/zones/${record.zoneId}/dns_records/${record.id}`, Buffer.from([]), "DELETE");
-        }
-        return matching.length;
-    }
-}
-
-export const DNSPageController = SocketFunction.register(
-    "DNSPageController-3e7b1d92-44a8-4f7e-9bba-d12c4f87a6e0",
-    new DNSPageControllerBase(),
-    () => ({
-        getAllRecords: {},
-        deleteRecord: {},
-        deleteRecordsByContent: {},
-    }),
-    () => ({
-        hooks: [assertIsManagementUser],
-    }),
-    {
-        noAutoExpose: true,
-    }
-);
-
-const DNSPageSynced = getSyncedController(DNSPageController, {
-    reads: {
-        getAllRecords: ["dnsRecords"],
-    },
-    writes: {
-        deleteRecord: ["dnsRecords"],
-        deleteRecordsByContent: ["dnsRecords"],
-    },
-});
-
-export class DNSPage extends qreact.Component {
-    state = t.state({
-        expandedGroups: t.lookup(t.boolean),
-        busyKeys: t.lookup(t.boolean),
-        errorMessage: t.string,
-    });
-
-    private async deleteOne(record: DNSRecord) {
-        let typed = prompt(`Type the content "${record.content}" to confirm deleting this record:\n\n${record.type} ${record.name} → ${record.content}`);
-        if (typed === null) return;
-        if (typed !== record.content) {
-            alert(`Confirmation does not match. Aborted.`);
-            return;
-        }
-        let busyKey = `record:${record.id}`;
-        Querysub.commit(() => {
-            this.state.busyKeys[busyKey] = true;
-            this.state.errorMessage = "";
-        });
-        try {
-            await DNSPageSynced(getBrowserUrlNode()).deleteRecord.promise({
-                zoneId: record.zoneId,
-                recordId: record.id,
-            });
-        } catch (err) {
-            console.error(`DNS deleteRecord failed:`, (err as Error).stack ?? err);
-            Querysub.commit(() => {
-                this.state.errorMessage = (err as Error).stack ?? String(err);
-            });
-        } finally {
-            Querysub.commit(() => {
-                delete this.state.busyKeys[busyKey];
-            });
-        }
-    }
-
-    private async deleteStaleHexRecords(content: string, matching: DNSRecord[]) {
-        let listText = matching.map(r => `  ${r.type} ${r.name}  (set ${new Date(r.setOn).toISOString()})`).join("\n");
-        let typed = prompt(`Type "${content}" to confirm deleting ${matching.length} stale hex-subdomain record(s):\n\n${listText}`);
-        if (typed === null) return;
-        if (typed !== content) {
-            alert(`Confirmation does not match. Aborted.`);
-            return;
-        }
-        let busyKey = `staleHex:${content}`;
-        Querysub.commit(() => {
-            this.state.busyKeys[busyKey] = true;
-            this.state.errorMessage = "";
-        });
-        try {
-            for (let record of matching) {
-                await DNSPageSynced(getBrowserUrlNode()).deleteRecord.promise({
-                    zoneId: record.zoneId,
-                    recordId: record.id,
-                });
-            }
-        } catch (err) {
-            console.error(`DNS deleteStaleHexRecords failed:`, (err as Error).stack ?? err);
-            Querysub.commit(() => {
-                this.state.errorMessage = (err as Error).stack ?? String(err);
-            });
-        } finally {
-            Querysub.commit(() => {
-                delete this.state.busyKeys[busyKey];
-            });
-        }
-    }
-
-    private async deleteGroup(content: string, count: number) {
-        let typed = prompt(`Type "${content}" to confirm deleting ALL ${count} record(s) pointing to it:`);
-        if (typed === null) return;
-        if (typed !== content) {
-            alert(`Confirmation does not match. Aborted.`);
-            return;
-        }
-        let busyKey = `group:${content}`;
-        Querysub.commit(() => {
-            this.state.busyKeys[busyKey] = true;
-            this.state.errorMessage = "";
-        });
-        try {
-            await DNSPageSynced(getBrowserUrlNode()).deleteRecordsByContent.promise({ content });
-        } catch (err) {
-            console.error(`DNS deleteRecordsByContent failed:`, (err as Error).stack ?? err);
-            Querysub.commit(() => {
-                this.state.errorMessage = (err as Error).stack ?? String(err);
-            });
-        } finally {
-            Querysub.commit(() => {
-                delete this.state.busyKeys[busyKey];
-            });
-        }
-    }
-
-    render() {
-        let records = DNSPageSynced(getBrowserUrlNode()).getAllRecords();
-        if (!records) {
-            return <div className={css.pad2(16)}>Loading DNS records...</div>;
-        }
-
-        let groups = new Map<string, DNSRecord[]>();
-        for (let record of records) {
-            let list = groups.get(record.content);
-            if (!list) {
-                list = [];
-                groups.set(record.content, list);
-            }
-            list.push(record);
-        }
-
-        let groupEntries = Array.from(groups.entries()).map(([content, list]) => ({ content, records: list }));
-        sort(groupEntries, x => -x.records.length);
-        for (let group of groupEntries) {
-            sort(group.records, r => -r.setOn);
-        }
-
-        return <div className={css.vbox(12).pad2(16).fillWidth}>
-            <div className={css.hbox(12).alignItems("center")}>
-                <h2 className={css.flexGrow(1)}>DNS Records ({records.length} total, {groupEntries.length} unique contents)</h2>
-            </div>
-            {this.state.errorMessage && <pre className={css.colorhsl(0, 60, 40).whiteSpace("pre-wrap").pad2(8).bord2(0, 60, 60).hsl(0, 50, 95)}>{this.state.errorMessage}</pre>}
-            <div className={css.vbox(8).fillWidth}>
-                {groupEntries.map(({ content, records: list }) => {
-                    let expanded = !!this.state.expandedGroups[content];
-                    let groupBusy = !!this.state.busyKeys[`group:${content}`];
-                    return <div key={content} className={css.vbox(0).fillWidth.bord2(0, 0, 80).hsl(0, 0, 99)}>
-                        <div className={css.hbox(10).alignItems("center").pad2(10).button}
-                            onClick={() => {
-                                if (this.state.expandedGroups[content]) {
-                                    delete this.state.expandedGroups[content];
-                                } else {
-                                    this.state.expandedGroups[content] = true;
-                                }
-                            }}
-                        >
-                            <span>{expanded ? "▼" : "▶"}</span>
-                            <span
-                                className={css.boldStyle.fontFamily("monospace").button.pad2(4, 2).bord2(0, 0, 80).hsl(0, 0, 100).hbox(6).alignItems("center")}
-                                title="Click to copy"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    void navigator.clipboard.writeText(content);
-                                }}
-                            >
-                                <span>{content}</span>
-                                <span className={css.colorhsl(0, 0, 50)}>📋</span>
-                            </span>
-                            <span className={css.colorhsl(0, 0, 40)}>{list.length} record(s)</span>
-                            <div className={css.flexGrow(1)} />
-                            <button
-                                className={css.pad2(10, 6).button.bord2(0, 80, 50)
-                                    + (groupBusy ? css.hsl(0, 0, 90).colorhsl(0, 0, 50) : css.hsl(0, 80, 92).colorhsl(0, 80, 30))}
-                                disabled={groupBusy}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    void this.deleteGroup(content, list.length);
-                                }}
-                            >
-                                {groupBusy ? "Deleting..." : `🗑️ Delete all ${list.length}`}
-                            </button>
-                        </div>
-                        {expanded && <div className={css.vbox(4).pad2(10).hsl(0, 0, 100)}>
-                            {(() => {
-                                let staleHex = list.filter(r =>
-                                    HEX_SUBDOMAIN_REGEX.test(r.name)
-                                    && Date.now() - r.setOn > STALE_HEX_SUBDOMAIN_AGE
-                                );
-                                if (staleHex.length === 0) return undefined;
-                                let staleHexBusy = !!this.state.busyKeys[`staleHex:${content}`];
-                                return <div className={css.vbox(4).pad2(8).bord2(30, 60, 60).hsl(30, 70, 96)}>
-                                    <div className={css.hbox(10).alignItems("center")}>
-                                        <span className={css.boldStyle}>Stale hex-subdomain records (set &gt;7d ago): {staleHex.length}</span>
-                                        <div className={css.flexGrow(1)} />
-                                        <button
-                                            className={css.pad2(10, 6).button.bord2(0, 80, 50)
-                                                + (staleHexBusy ? css.hsl(0, 0, 90).colorhsl(0, 0, 50) : css.hsl(0, 80, 92).colorhsl(0, 80, 30))}
-                                            disabled={staleHexBusy}
-                                            onClick={() => void this.deleteStaleHexRecords(content, staleHex)}
-                                        >
-                                            {staleHexBusy ? "Deleting..." : `🗑️ Delete ${staleHex.length} stale hex record(s)`}
-                                        </button>
-                                    </div>
-                                    <div className={css.vbox(2).fontFamily("monospace").colorhsl(0, 0, 30)}>
-                                        {staleHex.map(r => <div key={r.id}>{r.type} {r.name} — set {formatDateJSX(r.setOn)}</div>)}
-                                    </div>
-                                </div>;
-                            })()}
-                            {list.map(record => {
-                                let recordBusy = !!this.state.busyKeys[`record:${record.id}`];
-                                return <div key={record.id} className={css.hbox(10).alignItems("center").pad2(6).bord2(0, 0, 92)}>
-                                    <span className={css.boldStyle.minWidth(50)}>{record.type}</span>
-                                    <span className={css.fontFamily("monospace").flexGrow(1)}>{record.name}</span>
-                                    {record.proxied && <span className={css.colorhsl(30, 80, 40).pad2(4, 2).bord2(30, 80, 70).hsl(30, 80, 95)}>proxied</span>}
-                                    <span className={css.colorhsl(0, 0, 50)}>ttl {record.ttl}</span>
-                                    <span className={css.colorhsl(0, 0, 50)}>
-                                        created {formatDateJSX(record.createdOn)}
-                                    </span>
-                                    <span className={css.colorhsl(0, 0, 50)}>
-                                        modified {formatDateJSX(record.modifiedOn)}
-                                    </span>
-                                    <span className={css.colorhsl(0, 0, 50)}>
-                                        set {formatDateJSX(record.setOn)}
-                                    </span>
-                                    <span className={css.colorhsl(0, 0, 50)}>{record.zoneName}</span>
-                                    <button
-                                        className={css.pad2(8, 4).button.bord2(0, 0, 60)
-                                            + (recordBusy ? css.hsl(0, 0, 90).colorhsl(0, 0, 50) : css.hsl(0, 0, 100))}
-                                        disabled={recordBusy}
-                                        onClick={() => void this.deleteOne(record)}
-                                    >
-                                        {recordBusy ? "Deleting..." : "🗑️ Delete"}
-                                    </button>
-                                </div>;
-                            })}
-                        </div>}
-                    </div>;
-                })}
-            </div>
-        </div>;
-    }
-}