chore: merge master

assets/components/tracking/watchlist/WatchlistsList.tsx

@@ -9,7 +9,7 @@ import punycode from "punycode/punycode";
 import {Connector} from "../../../utils/api/connectors";
 import {UpdateWatchlistButton} from "./UpdateWatchlistButton";
 import {DeleteWatchlistButton} from "./DeleteWatchlistButton";
-import {ViewDiagramWatchlistButton} from "../diagram/ViewDiagramWatchlistButton";
+import {ViewDiagramWatchlistButton} from "./diagram/ViewDiagramWatchlistButton";
 
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[],

assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx

@@ -0,0 +1,79 @@
+import {Button, Flex, Modal, Space, Typography} from "antd"
+import {t} from "ttag"
+import React, {useEffect, useState} from "react"
+import {ApartmentOutlined} from "@ant-design/icons"
+
+import '@xyflow/react/dist/style.css'
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from "@xyflow/react";
+import {getWatchlist} from "../../../../utils/api";
+import {getLayoutedElements} from "./getLayoutedElements";
+import {watchlistToNodes} from "./watchlistToNodes";
+import {watchlistToEdges} from "./watchlistToEdges";
+
+export type DiagramConfig = {
+    tld?: boolean
+    nameserver?: boolean
+    entities?: boolean
+}
+
+export function ViewDiagramWatchlistButton({token}: { token: string }) {
+
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const [nodes, setNodes, onNodesChange] = useNodesState([])
+    const [edges, setEdges, onEdgesChange] = useEdgesState([])
+
+    useEffect(() => {
+        if (!open) return
+        setLoading(true)
+        getWatchlist(token).then(w => {
+            const e = getLayoutedElements(watchlistToNodes(w), watchlistToEdges(w))
+            setNodes(e.nodes)
+            setEdges(e.edges)
+        }).catch(() => setOpen(false)).finally(() => setLoading(false))
+
+    }, [open])
+
+
+    return <>
+        <Typography.Link>
+            <ApartmentOutlined title={t`View the Watchlist Entity Diagram`}
+                               style={{color: 'darkviolet'}}
+                               onClick={() => setOpen(true)}/>
+        </Typography.Link>
+        <Modal
+            title={t`Watchlist Entity Diagram`}
+            centered
+            open={open}
+            loading={loading}
+            footer={
+                <Space>
+                    <Button type="default" onClick={() => setOpen(false)}>
+                        Close
+                    </Button>
+                </Space>
+            }
+            onOk={() => setOpen(false)}
+            onCancel={() => setOpen(false)}
+            width='80vw'
+        >
+            {nodes && edges && <Flex style={{width: '75vw', height: '80vh'}}>
+                <ReactFlow
+                    fitView
+                    colorMode='system'
+                    nodesConnectable={false}
+                    edgesReconnectable={false}
+                    nodes={nodes}
+                    edges={edges}
+                    onNodesChange={onNodesChange}
+                    onEdgesChange={onEdgesChange}
+                    style={{width: '100%', height: '100vh'}}
+                >
+                    <MiniMap/>
+                    <Controls/>
+                    <Background/>
+                </ReactFlow>
+            </Flex>}
+        </Modal>
+    </>
+}

assets/components/tracking/watchlist/diagram/getLayoutedElements.tsx

@@ -0,0 +1,39 @@
+import dagre from "dagre";
+
+
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const nodeWidth = 172;
+const nodeHeight = 200;
+
+export const getLayoutedElements = (nodes: any, edges: any, direction = 'TB') => {
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({rankdir: direction});
+
+    nodes.forEach((node: any) => {
+        dagreGraph.setNode(node.id, {width: nodeWidth, height: nodeHeight});
+    });
+
+    edges.forEach((edge: any) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(dagreGraph);
+
+    const newNodes = nodes.map((node: any) => {
+        const nodeWithPosition = dagreGraph.node(node.id)
+
+        return {
+            ...node,
+            targetPosition: isHorizontal ? 'left' : 'top',
+            sourcePosition: isHorizontal ? 'right' : 'bottom',
+            position: {
+                x: nodeWithPosition.x - nodeWidth / 2,
+                y: nodeWithPosition.y - nodeHeight / 2
+            },
+        };
+    });
+
+    return {nodes: newNodes, edges};
+}

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -0,0 +1,47 @@
+import {Domain, Watchlist} from "../../../../utils/api";
+import {translateRoles} from "../../../search/EntitiesList";
+import {t} from "ttag";
+
+const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
+    roles.includes('administrative') ? 'blue' :
+        roles.includes('technical') ? 'orange' : 'violet'
+
+export function domainEntitiesToEdges(d: Domain) {
+    const domainRole = translateRoles()
+    return d.entities
+        .filter(e => !e.roles.includes('registrar')) //
+        .map(e => ({
+            id: `e-${d.ldhName}-${e.entity.handle}`,
+            source: e.roles.includes('registrant') ? e.entity.handle : d.ldhName,
+            target: e.roles.includes('registrant') ? d.ldhName : e.entity.handle,
+            style: {stroke: rolesToColor(e.roles), strokeWidth: 3},
+            label: e.roles
+                .map(r => Object.keys(domainRole).includes(r) ? domainRole[r as keyof typeof domainRole] : r)
+                .join(', '),
+            animated: e.roles.includes('registrant'),
+        }))
+}
+
+export const domainNSToEdges = (d: Domain) => d.nameservers
+    .map(ns => ({
+        id: `ns-${d.ldhName}-${ns.ldhName}`,
+        source: d.ldhName,
+        target: ns.ldhName,
+        style: {stroke: 'grey', strokeWidth: 3},
+        label: 'DNS'
+    }))
+
+export const tldToEdge = (d: Domain) => ({
+    id: `tld-${d.ldhName}-${d.tld.tld}`,
+    source: d.tld.tld,
+    target: d.ldhName,
+    style: {stroke: 'yellow', strokeWidth: 3},
+    label: t`Registry`
+})
+
+export function watchlistToEdges(watchlist: Watchlist) {
+    const entitiesEdges = watchlist.domains.map(domainEntitiesToEdges).flat()
+    const nameserversEdges = watchlist.domains.map(domainNSToEdges).flat()
+
+    return [...entitiesEdges, ...nameserversEdges]
+}

assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx

@@ -0,0 +1,54 @@
+import {Domain, Nameserver, Tld, Watchlist} from "../../../../utils/api";
+import vCard from "vcf";
+import React from "react";
+import {t} from 'ttag'
+
+export const domainToNode = (d: Domain) => ({
+    id: d.ldhName,
+    data: {label: <b>{d.ldhName}</b>},
+    style: {
+        width: 200
+    }
+})
+
+export const domainEntitiesToNode = (d: Domain) => d.entities
+    .filter(e => !e.roles.includes('registrar')) //
+    .map(e => {
+        const jCard = vCard.fromJSON(e.entity.jCard)
+        let label = e.entity.handle
+        if (jCard.data.fn !== undefined && !Array.isArray(jCard.data.fn)) label = jCard.data.fn.valueOf()
+
+        return {
+            id: e.entity.handle,
+            data: {label},
+            style: {
+                width: 200
+            }
+        }
+    })
+
+export const tldToNode = (tld: Tld) => ({
+    id: tld.tld,
+    data: {label: t`.${tld.tld} Registry`},
+    style: {
+        width: 200
+    }
+})
+
+export const nsToNode = (ns: Nameserver) => ({
+    id: ns.ldhName,
+    data: {label: ns.ldhName},
+    style: {
+        width: 200
+    }
+})
+
+export function watchlistToNodes(watchlist: Watchlist) {
+
+    const domains = watchlist.domains.map(domainToNode)
+    const entities = [...new Set(watchlist.domains.map(domainEntitiesToNode).flat())]
+    const tlds = [...new Set(watchlist.domains.map(d => d.tld))].map(tldToNode)
+    const nameservers = [...new Set(watchlist.domains.map(d => d.nameservers))].flat().map(nsToNode)
+
+    return [...domains, ...entities, ...nameservers]
+}