irdb/ui/resources/views/pages/policies/edit.twig

{% extends 'layout.twig' %}

{% block title %}{{ policy.name }} — Policy — IRDB{% endblock %}

{% block content %}
{# Twig's |merge calls PHP array_merge, which renumbers integer keys; key by
   slug (a string) so {scanners:40, indexer:30,…} round-trips faithfully. #}
{% set thresholds_by_slug = {} %}
{% for t in policy.thresholds|default([]) %}
    {% if t.category_slug %}
        {% set thresholds_by_slug = thresholds_by_slug|merge({(t.category_slug): t.threshold}) %}
    {% endif %}
{% endfor %}

<div class="mx-auto max-w-5xl">
    <a href="/app/policies" class="text-sm text-slate-500 hover:underline dark:text-slate-400">← Back to policies</a>

    <div class="mt-3 flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">
            <span class="font-mono">{{ policy.name }}</span>
        </h1>
        {% if can_write %}
            {% include 'partials/confirm_form.twig' with {
                action: '/app/policies/' ~ policy.id ~ '/delete',
                label: 'Delete policy',
                description: 'Refused if any consumer references this policy.',
            } only %}
        {% endif %}
    </div>

    <form method="post" action="/app/policies/{{ policy.id }}" class="mt-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Metadata</h2>
            <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3 text-sm">
                <div>
                    <label for="p-name" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Name</label>
                    <input type="text" id="p-name" name="name" value="{{ policy.name }}" {% if not can_write %}readonly{% endif %}
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div class="md:col-span-2">
                    <label for="p-desc" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Description</label>
                    <input type="text" id="p-desc" name="description" value="{{ policy.description|default('') }}" {% if not can_write %}readonly{% endif %}
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div class="md:col-span-3">
                    <label class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-400">
                        <input type="checkbox" name="include_manual_blocks" value="1"
                               {% if policy.include_manual_blocks %}checked{% endif %}
                               {% if not can_write %}disabled{% endif %}>
                        include manual blocks
                    </label>
                </div>
            </div>
        </section>

        <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between">
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Threshold matrix</h2>
                <span class="text-xs text-slate-400">Empty value ⇒ category not in policy</span>
            </div>
            <table class="mt-3 w-full text-sm">
                <thead class="text-left text-xs uppercase tracking-wider text-slate-400">
                    <tr>
                        <th class="pb-2 font-medium">Category</th>
                        <th class="pb-2 font-medium">Decay</th>
                        <th class="pb-2 text-right font-medium">Threshold</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    {% for c in categories %}
                        <tr>
                            <td class="py-2"><span class="font-mono">{{ c.slug }}</span> <span class="text-slate-400">— {{ c.name }}</span></td>
                            <td class="py-2 text-xs text-slate-500 dark:text-slate-400">{{ c.decay_function }} ({{ c.decay_param }})</td>
                            <td class="py-2 text-right">
                                <input type="number" step="0.01" min="0"
                                       name="thresholds[{{ c.slug }}]"
                                       value="{{ thresholds_by_slug[c.slug]|default('') }}"
                                       {% if not can_write %}readonly{% endif %}
                                       class="w-32 rounded-md border border-slate-300 bg-white px-2 py-1 text-right font-mono dark:border-slate-700 dark:bg-slate-950">
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        {% if can_write %}
            <div class="mt-6 flex justify-end">
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Save policy</button>
            </div>
        {% endif %}
    </form>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
             x-data="policyScoreDistribution({{ policy.id }})" x-init="load()">
        <div class="flex items-center justify-between">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Score distribution</h2>
            <button type="button" x-on:click="load()" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Refresh</button>
        </div>
        <p class="mt-2 text-xs text-slate-400">
            One line per thresholded category, IPs grouped by score in steps of 5; the shaded area to the right of each threshold marks scores high enough to land on this policy's blocklist.
        </p>
        <div class="mt-3 h-64">
            <canvas x-ref="canvas"></canvas>
        </div>
        <p class="mt-2 text-xs text-slate-400" x-show="empty">No scored IPs in the database yet.</p>
    </section>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
             x-data="policyPreview({{ policy.id }})" x-init="load()">
        <div class="flex items-center justify-between">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Preview</h2>
            <button type="button" x-on:click="load()" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Refresh</button>
        </div>
        <p class="mt-2 text-sm">
            <span x-show="loading">Loading…</span>
            <template x-if="!loading">
                <span><span class="font-mono" x-text="count"></span> entries</span>
            </template>
        </p>
        <ul class="mt-3 max-h-60 divide-y divide-slate-100 overflow-y-auto text-xs dark:divide-slate-800">
            <template x-for="entry in sample" :key="entry.key">
                <li class="flex items-baseline justify-between gap-3 py-1">
                    <span class="font-mono text-slate-700 dark:text-slate-300" x-text="entry.label"></span>
                    <span class="shrink-0 text-slate-500 dark:text-slate-400" :title="entry.tooltip" x-text="entry.expiry"></span>
                </li>
            </template>
        </ul>
        <p class="mt-2 text-xs text-slate-400">
            Sample = first 50 entries from the rendered blocklist. Expiry for scored
            entries is an estimate assuming no further reports; manual entries show
            the configured expiry.
        </p>
    </section>
</div>

<script>
window.policyPreview = function (id) {
    function localeFallback() {
        const fallback = document.documentElement.getAttribute('data-irdb-locale-fallback');
        const locales = [];
        if (typeof navigator !== 'undefined' && navigator.language) {
            locales.push(navigator.language);
        }
        if (fallback && fallback.trim()) {
            locales.push(fallback.trim());
        }
        return locales.length > 0 ? locales : undefined;
    }
    let formatter;
    try {
        formatter = new Intl.DateTimeFormat(localeFallback(), {
            year: 'numeric', month: '2-digit', day: '2-digit',
            hour: '2-digit', minute: '2-digit',
        });
    } catch (e) {
        formatter = null;
    }
    function formatExpiry(iso) {
        if (!iso) return '';
        const d = new Date(iso);
        if (isNaN(d.getTime())) return iso;
        if (!formatter) return iso;
        try { return formatter.format(d); } catch (_) { return iso; }
    }
    function shapeEntry(raw, idx) {
        if (typeof raw === 'string') {
            return { key: 'r' + idx, label: raw, expiry: '', tooltip: '' };
        }
        const ip = raw.ip_or_cidr || '';
        let expiry = '';
        let tooltip = '';
        if (raw.expires_at) {
            const formatted = formatExpiry(raw.expires_at);
            expiry = (raw.expires_estimated ? '~ ' : '') + formatted;
            tooltip = (raw.expires_estimated
                ? 'Estimated falls-off date (assumes no further reports). ISO: '
                : 'Configured manual block expiry. ISO: ') + raw.expires_at;
        } else if (raw.reason === 'manual') {
            expiry = 'never';
            tooltip = 'Manual block has no configured expiry';
        } else {
            expiry = '—';
            tooltip = 'Score does not decay below threshold (threshold ≤ 0)';
        }
        return { key: 'r' + idx + ':' + ip, label: ip, expiry: expiry, tooltip: tooltip };
    }
    return {
        loading: true,
        count: 0,
        sample: [],
        async load() {
            this.loading = true;
            try {
                const res = await fetch('/app/policies/' + id + '/preview-proxy', { credentials: 'same-origin' });
                if (!res.ok) throw new Error('preview ' + res.status);
                const data = await res.json();
                this.count = data.count || 0;
                const items = Array.isArray(data.sample) ? data.sample : [];
                this.sample = items.map(shapeEntry);
            } catch (e) {
                this.count = 0;
                this.sample = [{ key: 'err', label: '(preview unavailable)', expiry: '', tooltip: '' }];
            } finally {
                this.loading = false;
            }
        },
    };
};

window.policyScoreDistribution = function (id) {
    const CATEGORY_COLORS = [
        '#ef4444', '#f97316', '#eab308', '#22c55e',
        '#0ea5e9', '#a855f7', '#ec4899', '#14b8a6',
    ];
    function chartTheme() {
        const isDark = document.documentElement.classList.contains('dark');
        return {
            tickColor: isDark ? '#94a3b8' : '#475569',
            gridColor: isDark ? 'rgba(148,163,184,0.15)' : 'rgba(148,163,184,0.3)',
            legendColor: isDark ? '#cbd5e1' : '#334155',
        };
    }
    function hexToRgba(hex, alpha) {
        const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
        if (!m) return hex;
        return 'rgba(' + parseInt(m[1], 16) + ',' + parseInt(m[2], 16) + ',' + parseInt(m[3], 16) + ',' + alpha + ')';
    }
    return {
        empty: false,
        chart: null,
        async load() {
            try {
                const res = await fetch('/app/policies/' + id + '/score-distribution-proxy', { credentials: 'same-origin' });
                if (!res.ok) throw new Error('distribution ' + res.status);
                const data = await res.json();
                this.render(data);
            } catch (e) {
                this.empty = true;
                if (this.chart) { this.chart.destroy(); this.chart = null; }
            }
        },
        render(data) {
            const bucketSize = Number(data.bucket_size) || 5;
            const thresholds = Array.isArray(data.thresholds) ? data.thresholds : [];
            const categories = Array.isArray(data.categories) ? data.categories : [];
            const overallMaxScore = Number(data.overall_max_score) || Number(data.max_score) || 0;

            // Index thresholds by category so we can look them up while
            // iterating the per-category histograms. Only categories with
            // a numeric threshold appear on the chart.
            const thresholdByCat = {};
            const thresholdBySlug = {};
            for (const t of thresholds) {
                if (typeof t.threshold !== 'number') continue;
                if (t.category_id != null) thresholdByCat[t.category_id] = t.threshold;
                if (t.category_slug) thresholdBySlug[t.category_slug] = t.threshold;
            }

            const categoriesById = {};
            for (const c of categories) {
                if (c.category_id != null) categoriesById[c.category_id] = c;
            }

            // Build the on-chart category list — only those with a threshold.
            // Iterate over thresholds first so the legend ordering matches the
            // policy's threshold list rather than database insertion order.
            const onChart = [];
            for (const t of thresholds) {
                if (typeof t.threshold !== 'number') continue;
                const cat = categoriesById[t.category_id];
                onChart.push({
                    category_id: t.category_id,
                    category_slug: t.category_slug || ('#' + t.category_id),
                    threshold: t.threshold,
                    buckets: cat && Array.isArray(cat.buckets) ? cat.buckets : [],
                });
            }
            this.empty = onChart.length === 0;

            // Compute axis bounds: extend X to the largest threshold or score
            // observed across the included categories. Y to the largest count.
            let upperX = overallMaxScore;
            let yMax = 0;
            for (const oc of onChart) {
                if (oc.threshold > upperX) upperX = oc.threshold;
                for (const b of oc.buckets) {
                    const start = Number(b.start) || 0;
                    const cnt = Number(b.count) || 0;
                    if (start + bucketSize > upperX) upperX = start + bucketSize;
                    if (cnt > yMax) yMax = cnt;
                }
            }
            if (yMax <= 0) yMax = 1;
            if (upperX <= 0) upperX = bucketSize;
            // Pad by one bucket so the rightmost shaded area has somewhere to
            // extend into when a threshold sits exactly at the data maximum.
            upperX = upperX + bucketSize;

            const datasets = [];
            onChart.forEach((oc, i) => {
                const color = CATEGORY_COLORS[i % CATEGORY_COLORS.length];

                // Shaded "blocked by this category" region. Drawn first
                // (higher `order`) so the histogram lines render on top.
                datasets.push({
                    label: oc.category_slug + ' ≥ ' + oc.threshold,
                    data: [
                        { x: oc.threshold, y: yMax },
                        { x: upperX, y: yMax },
                    ],
                    borderColor: hexToRgba(color, 0.45),
                    backgroundColor: hexToRgba(color, 0.10),
                    borderWidth: 1,
                    pointRadius: 0,
                    pointHoverRadius: 0,
                    fill: 'origin',
                    tension: 0,
                    stepped: false,
                    spanGaps: false,
                    order: 5 + i,
                    _isThresholdRegion: true,
                });

                // Per-category histogram line.
                const points = oc.buckets.map((b) => ({
                    x: Number(b.start) || 0,
                    y: Number(b.count) || 0,
                }));
                datasets.push({
                    label: oc.category_slug,
                    data: points,
                    borderColor: color,
                    backgroundColor: color,
                    borderWidth: 2,
                    tension: 0.25,
                    fill: false,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    pointBackgroundColor: color,
                    order: i,
                });
            });

            const t = chartTheme();
            const canvas = this.$refs.canvas;
            if (!canvas) return;
            if (this.chart) {
                this.chart.destroy();
            }
            // Chart is registered globally by app.js; if it isn't yet
            // (script ordering), bail silently.
            if (typeof window.Chart === 'undefined' && typeof Chart === 'undefined') {
                return;
            }
            const C = (typeof window.Chart !== 'undefined') ? window.Chart : Chart;
            this.chart = new C(canvas, {
                type: 'line',
                data: { datasets },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    parsing: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: t.legendColor,
                                boxWidth: 12,
                                font: { size: 11 },
                                // Hide the synthetic threshold-region datasets;
                                // their meaning is conveyed by the shading next
                                // to the matching category line.
                                filter: (item, chartData) => {
                                    const ds = chartData.datasets[item.datasetIndex];
                                    return !ds || !ds._isThresholdRegion;
                                },
                            },
                        },
                        tooltip: {
                            filter: (item) => !item.dataset || !item.dataset._isThresholdRegion,
                            callbacks: {
                                title: (items) => {
                                    if (!items.length) return '';
                                    const it = items[0];
                                    const start = it.parsed.x;
                                    return it.dataset.label + ' — score ' + start + '–' + (start + bucketSize);
                                },
                                label: (it) => it.parsed.y + ' IP' + (it.parsed.y === 1 ? '' : 's'),
                            },
                        },
                    },
                    scales: {
                        x: {
                            type: 'linear',
                            min: 0,
                            max: upperX,
                            title: { display: true, text: 'score', color: t.tickColor },
                            ticks: { color: t.tickColor, stepSize: bucketSize },
                            grid: { color: t.gridColor },
                        },
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: 'IPs', color: t.tickColor },
                            ticks: { color: t.tickColor, precision: 0 },
                            grid: { color: t.gridColor },
                        },
                    },
                },
            });
        },
    };
};
</script>
{% endblock %}