64cf78860d
* feat(unified-stack): Browse + My Stack + Recipes + RBAC matrix (v49–v55)
Squash of 94 commits spanning the v49 → v55 unified-stack rewrite.
Full per-feature breakdown lives in CHANGELOG.md under [Unreleased].
Major buckets:
* v49 schema — first-class user_groups + user_group_members +
resource_grants; admin can CRUD groups and grants; Google
Workspace nightly sync writes into the new tables.
* v49 data_packages — admin-curated bundles of tables, RBAC-gated,
first-class section on /catalog Browse + My Stack.
* v49 memory_domains — row-backed (replaces hardcoded VALID_DOMAINS
enum); admin can CRUD; grants follow the same shape as tables and
packages.
* v50 cover_image_url + admin sidebar collapsibles + per-row Mode
tooltip + admin queue domain badges + admin "+ New Item" seed flow.
* v51 lifecycle status (prod/poc/coming-soon/draft) + category +
palette swatches on admin modals.
* v52 per-table detail page /catalog/t/<id>.
* v53 Recipes — admin-curated SQL templates as a second tab on
/catalog with full Edit/Delete admin affordances.
* v54 soft-delete (deleted_at) + Undo toast for packages, memory
domains, and recipes; hard_delete() retained as escape hatch.
* v55 Recipes RBAC — ResourceType.RECIPE registered, inline Group
Access matrix on Create + Edit Recipe modals (mirrors the Memory
Domain pattern).
* Activity Center per-resource filter (resource_prefix LIKE-anchored
on audit_log.resource); admin nav g+letter keyboard shortcuts;
loadAdminTablesLayout N+1 → single endpoint; /api/memory 30s
page-level cache.
* CI hardening — Keboola legacy tests pytest.importorskip; perf-
smoke threshold widened to stop cold-cache flake.
5002 tests passing, 35 skipped.
* feat(p2 backlog): Cmd-K palette + suggest-a-domain + nightly E2E + v55 schema
10-item P2 sweep on top of the unified-stack squash. New behaviour:
* Cmd-K admin command palette (base.html) — fuzzy-search overlay over
admin + user-facing routes. Arrows/Enter to navigate, Esc to close.
* Stack-tabs digit shortcuts — 1/2/3 switch Browse / My Stack /
Recipes on /catalog + /corporate-memory.
* Friendlier non-admin empty state on /corporate-memory, plus a
"Suggest a domain" CTA → POST /api/memory-domain-suggestions, admin
queue with approve/reject. Backed by a new memory_domain_suggestions
table (schema v55).
* /admin/corporate-memory 7-tab strip grouped under Moderation /
Catalog parent labels.
* Bulk-assign table → package dropdown annotates each option with
"(N of M tables already in)" so the existing distribution is visible
before picking a target.
* GET /api/memory + /tree accept is_required filter; admin status
dropdowns route the "Required" sentinel onto it (status no longer
holds 'mandatory' post-v49, so the old dropdown returned nothing).
* chip-input.js is now opt-in per template via {% block extra_scripts %}
instead of loaded globally on every page from base.html.
* Edit-modal close helpers consolidated onto _closeEditModalById();
docs the per-source-type modal architecture decision.
* New .github/workflows/e2e-nightly.yml runs agent-browser smoke
scripts (scripts/e2e/smoke_*.sh) against a docker-compose stack
nightly at 04:30 UTC; failures open an agent-browser-nightly issue.
5012 tests passing, 35 skipped.
* fix(visual audit): 6 page regressions on memory + data-package surfaces
agent-browser walkthrough of every memory + data-package page in the PR
turned up 6 real bugs. Fixes:
1. Admin memory modals were dead. Duplicate `let _cmdNewDomainId`
declarations from the deprecated step-2 RBAC stubs in
admin_corporate_memory.html collided with the live state vars
declared earlier in the same <script> → SyntaxError on parse →
the entire second script block silently failed → every inline
onclick= handler defined there (`+ New Memory Domain`, Edit, etc.)
was a no-op. Removed the duplicate stubs.
2. /catalog/t/<table_id> + /catalog/r/<slug> rendered unstyled.
Both templates injected their CSS via {% block head %} but
base.html exposes {% block head_extra %} — wrong block name
meant <style> rules never reached the rendered HTML. Renamed
to head_extra. Hero card, section cards, dark SQL block, proper
full-width inputs all now render as designed.
3. L49 leak — "MANDATORY" KPI label + "Make Mandatory" row buttons
on /admin/corporate-memory still used the old word. Renamed to
"Required" / "Mark as Required" so UI matches the data model
(v49 split moved the Required tier onto the orthogonal
is_required boolean; status no longer holds 'mandatory').
4. Activity Center Resource dropdown didn't know the v55
`memory_domain_suggestion:` namespace — added it.
5. Tab strip on /admin/corporate-memory wrapped text 2× per button
on narrow viewports after the L50 MODERATION/CATALOG group
labels pushed total width past most viewports. Switched the
strip to flex-wrap:nowrap + overflow-x:auto with
white-space:nowrap + flex-shrink:0 on every direct child so the
tabs stay one row and slide horizontally when they overflow.
5012 tests passing, 35 skipped.
* rebase-cleanup: align with main's 0.54.25-27 API design + comment fix
Three follow-on fixes after rebasing onto origin/main (0.54.27):
* admin_tables.html: dropped a stray nested ``{% if data_source_type
== 'keboola' %}`` around ``prefillFromKeboolaTable`` (main never had
it; the outer Phase F2 guard already covers it) and reworded a JS
comment that contained literal ``{% %}`` tokens which Jinja was
parsing as a real tag → unbalanced if/endif → 30 template render
failures across the suite.
* /api/stack/subscription/{type}/{id}: DELETE now returns 204 instead
of 200 per the 0.54.26 design rules. CLI client + parity tests
updated to accept 2xx / assert 204.
* Memory-domain suggestion approve/reject paths added to
``_VERB_PATH_ALLOWLIST`` — they are pending → approved/rejected
state-machine transitions (approve also creates the real
memory_domains row as a side effect), so the RPC shape is
intentional rather than a missed PATCH refactor.
5035 tests passing, 35 skipped.
* fix(catalog_table_detail): real polish pass — hero glyph, dedup pills, rows/size meta, scoped sync CTA
The previous fix only got the block-name typo so the existing CSS rendered.
The actual layout was still wireframe-tier on close inspection:
* No cover glyph in the hero (a flat white card with title + meta line);
data-package + memory-domain detail pages both have a colored icon
square. Restored parity — table.icon emoji if set, otherwise initials
on a colored square using table.color.
* "INTERNAL" pill rendered twice for agnes_audit etc. — the mode pill
and the source-type pill happened to be identical strings. Now skip
the source pill when it matches the mode (`internal == internal`).
* Bucket / source_table code chip showed `Agnes Internal.audit_log` for
internal rows — meaningless to a user. Hidden when source_type is
internal.
* `pairs_well_with` admin input was a comma-separated `<input>` always
visible. Wrapped all 4 sections in an Edit-on-demand toggle: read-
only display by default, "+ Add" / "Edit" button on the right edge
of each section header reveals the inline form, Cancel hides it.
* "Trigger sync now" was a cramped link squashed into the empty-state
flex row (visible as `Tr…` overflow before). Promoted to a proper
btn-primary button under the empty-state copy. Hidden entirely for
internal tables (which are server-managed — no upstream to pull).
* Hero meta now surfaces row count + payload size (when sync_state has
them) + last sync timestamp on a single line — was missing from the
original.
* Mode pills colored by tier (local=green, remote=amber, materialized=
blue, internal=gray) so the basic fact about a table reads at a
glance, not from upper-cased ALL-CAPS text alone.
* tests(v56): TDD baseline for extended data-packages content + per-table docs
68 failing tests across 8 files spec the v56 surface before any
implementation lands:
* test_schema_v55_to_v56_migration.py — schema bump, additive ALTERs
on data_packages + table_registry, idempotency, sequential-upgrade
preservation
* test_data_packages_repo_v56.py — repo create/update/get/list for
owner_name, owner_team, tags, long_description, when_to_use,
when_not_to_use, example_questions (JSON list round-trip, empty
defaults, partial-update preservation)
* test_table_registry_v56_docs.py — update_docs for grain, platforms,
partition_col, history, gotchas; preserves v52 docs columns
* test_api_data_packages_v56.py — PUT/POST/GET for all new fields,
field-level validation (tag count, bullet length, description size),
virtual badge derivation (curated/new)
* test_api_registry_docs_v56.py — PATCH /api/admin/registry/{id}/docs
for v56 fields, validation, RBAC unchanged
* test_web_catalog_package_detail_v56.py — /catalog/p/<slug> rewrite
asserts on rendered owner line, tag pills, badges, What it is,
Use it when, Skip it when, Example questions, per-table extended
detail in collapsible row, key-gotcha distinctness, admin-only Edit
* test_web_stack_card_v56_metadata.py — Browse-grid card additions
(owner chip, tag chips, badges) without breaking back-compat for
rows missing the new fields
* test_data_packages_no_vendor_content.py — CI guard: scans app/ +
src/ + cli/ + config/ + scripts/ for Groupon-specific tokens from
the colleague's spec MD; fails if any leak into OSS surfaces
* test_db_schema_version.py — bumped 55 → 56 with rationale
Plus updates schema-version assertion to 56. Implementation lands in
subsequent commits (schema migration → repo → API → templates).
* feat(v56): schema + repo for extended data-packages content
Schema additions (ALTER ADD COLUMN IF NOT EXISTS — additive + idempotent):
* data_packages: owner_name, owner_team, tags, long_description,
when_to_use, when_not_to_use, example_questions (JSON-as-VARCHAR for
the lists)
* table_registry: grain, platforms, partition_col, history, gotchas
(extends the v52 sample_questions / things_to_know / pairs_well_with
docs surface with structured per-table content)
Repo extensions:
* DataPackagesRepository.create + update accept the new fields with
the same Optional-is-no-op contract as v51 (pass an empty list to
clear a JSON column)
* _decode_row decodes the new JSON-list columns to Python lists; NULL
rounds back to [] so callers don't branch
* TableRegistryRepository.update_docs grew the v56 fields alongside
the existing v52 ones — single PATCH can write either tier
atomically
* TableRegistryRepository._decode_row picks up platforms + gotchas in
the same NULL-tolerant decoder
22 repo + migration tests passing. API + UI land in subsequent commits.
* feat(v56): API surface for extended data-packages + per-table docs
CreateDataPackageRequest + UpdateDataPackageRequest grew the v56 fields
(owner_name, owner_team, tags, long_description, when_to_use,
when_not_to_use, example_questions) with per-field validators that
match the Foundry spec checklist:
* tags: ≤8 entries × ≤30 chars
* long_description: ≤4000 chars
* use/skip: ≤8 bullets × ≤200 chars
* example_questions: ≤12 × ≤200 chars
_serialize emits all v56 fields plus a virtual ``badges`` list derived
server-side at render time (no DB column needed): "curated" when the
creator is in the Admin group, "new" within 30 days of created_at.
Backdating created_at or admin-status changes pick up automatically.
PATCH /api/admin/registry/{id}/docs extended with v56 structured
per-table fields (grain, platforms, partition_col, history, gotchas).
gotchas: list of {key: bool, body: str} Pydantic models with the same
≤8 cap; first key=true entry becomes the Key gotcha on the rendered
package detail page. PATCH echoes the fresh state so callers can
re-render without a second GET.
26 API tests passing (16 data-packages + 10 registry-docs).
* feat(v56): /catalog/p/<slug> rewrite + Browse-grid card augmentation
The third (and final) v56 commit lights up the UI surfaces backed by
the schema + API commits earlier in this PR:
* /catalog/p/<slug> template rebuilt around the Foundry spec's
section ladder — hero (icon + name + badges + owner + tags +
description + meta + Add-to-stack), "What it is" markdown body,
paired "Use it when / Skip it when" panels, "Tables in this
package" with collapsible per-table extended detail (grain /
platforms / partition_col / history / gotchas + sample questions),
and an "Example questions you can ask Claude" prompt panel. Each
section guarded by ``{% if pkg.<field> %}`` — empty content fields
hide the section entirely (no "No X yet" placeholder noise on the
public-facing drilldown).
* router catalog_package_detail hydrates per-table v56 fields onto
the tables list + derives the virtual badges (curated / new)
server-side from creator-in-Admin + 30-day created_at.
* StackResolver.ResourceEntry grew owner_name / owner_team / tags /
badges; _fetch_entries pulls the v56 columns + computes badges
once per fetch using a single Admin-group SELECT.
* _data_package_entry_dict adapter passes the new fields through to
the macro; tags are merged source-type pills + admin-authored
category tags per the spec convention.
* _stack_card.html renders the v56 badges (top-left, data-badge=
hooks) + the owner chip (data-card-owner hook) without breaking
back-compat — pre-v56 rows render unchanged.
* Admin PUT handler strips the v56 docs fields from the
read-modify-write merged dict so register() doesn't blow up
with the now-larger row shape (same pattern as the v52 docs
fields stripping).
5115 tests passing (+98 v56 + 18 fixed regressions from the merged-
register PUT path), 35 skipped.
* fix(rbac): Edit-on-package + Group-access 'required' persistence + CI vendor guard
Three related bugs reported on the merged-with-main branch:
1. Clicking Edit on a Data Package card landed on /admin/tables with
a `#<pkg.id>` hash that nothing listened to — admin saw the global
table listing, not the editor for that specific package. Added a
`?edit_package=<pkg_id>` query-param handler in admin_tables.html
(analog to the existing `?edit=<table_id>` and `?assign_to=<pkg_id>`
patterns) that calls openEditDataPackageModal on DOMContentLoaded
after a 250ms layout settle. Updated the package-detail Edit link
to use the new query param.
2. Setting Group Access to 'required' didn't persist — re-opening
the modal showed 'available'. Root cause was the v49
``resource_grants.requirement`` enum existing in the DB but the
POST /api/admin/grants endpoint not surfacing it: ``CreateGrantRequest``
declared only group_id + resource_type + resource_id, so Pydantic
silently dropped the matrix's ``requirement: 'required'`` payload
and the new row landed at the DB column default ('available').
Plumbed ``requirement`` through ``CreateGrantRequest`` →
``ResourceGrantsRepository.create`` so the value persists in one
round-trip. Plus a UNIQUE-constraint race in the matrix
diff-apply: DELETE-old + POST-new ran in parallel via
``Promise.allSettled``, so POST could fire first and trip the
unique check before DELETE freed the slot. Switched to sequential
(await all deletes; then await all writes) across all three
matrices (Edit Data Package, Edit Memory Domain, Edit Recipe).
3. CI vendor-content guard ``test_no_groupon_specific_strings_in_oss``
tripped on two of my own docstrings: a "Foundry Data team" mention
in two src/db.py comments + an ``s1_session_landings`` example in
cli/skills/agnes-table-registration.md. Rephrased the comments to
"extended-descriptions admin spec" and replaced the example with
a generic ``events_daily`` table name.
5164 tests passing, 35 skipped (+4 regression tests pinning the POST
/api/admin/grants requirement contract). Vendor guard back to green.
* fix(catalog): admin Browse path drops v58 card fields
The /catalog and /memory admin god-mode branch built ResourceEntry
instances inline from pkg_repo.list() / domains_repo.list() and skipped
owner_name, owner_team, tags, and derived badges (curated/new). Visible
symptom: a package with an owner + tags rendered with the v56 chrome
for non-admin viewers but as a bare card for admins.
Adds StackResolver.browse_admin(user_id, resource_type) — admin god-mode
Browse that walks the full table but routes through the same
_fetch_entries enrichment pass as browse(), so admin + non-admin Browse
stay visually consistent. Both /catalog and /corporate-memory routes
switch to it.
Regression test in tests/test_stack_resolver_browse_admin.py covers:
owner/tags propagation, new/curated badge derivation, in_stack from
admin subscriptions, all-packages-regardless-of-grants, and the
ValueError for unsupported resource types.
* fix(catalog): three /catalog tab-strip UX bugs
1. Required Remove → red toast
browse_admin passed empty required_ids to _fetch_entries, so the
admin's own required grants surfaced as 'available' and the macro
rendered an actionable Remove button that POST /unsubscribe 400'd
on. Now derives required_ids from the admin's own groups so
Required packages render with the disabled "In stack (required)"
button. Regression test in test_stack_resolver_browse_admin.py.
2. Remove green-toasts but card stays until refresh
The My-Stack empty-state placeholder was only emitted server-side
when stack_entries was empty at render time. Removing the last
card left the tab completely blank — users read that as "Remove
didn't work, let me refresh". Both grid + empty-state are now
always rendered with one of them initially hidden; the JS swaps
visibility on add/remove instead of injecting DOM. Same fix in
/corporate-memory.
3. "What are Recipes?" + ambiguous (admin) suffix
Recipes tab now carries its own curator-block explainer (the
shared one was moved inside Browse view so it doesn't bleed
across tabs). The grey "(admin)" suffix becomes a yellow
.admin-only-hint chip with a title tooltip — visibility hint is
now unambiguous: yellow chip = "only you see this", non-admins
don't see the affordance at all.
* schema: renumber v51..v58 → v52..v59 to make room for main's v51
Main 0.54.29 introduced a NEW v51 (table_registry.bq_fqn — issue #343)
that releases ahead of this branch. The unified-stack chain v51..v58
shifts up by one so main's v51 stays as the released schema and ours
become v52..v59. Function names, internal version bumps, dispatch
ladder thresholds, and the migration-test references all move
together. Subsequent merge with main lands the bq_fqn column at the
freed v51 slot.
* fix(seed): seed admin lands in BOTH Admin AND Everyone groups
The LOCAL_DEV_MODE / SEED_ADMIN_EMAIL bootstrap only added the seed
user to Admin. Everyone-scoped grants — the canonical "every-user-
sees-this" pattern for Required onboarding — didn't surface for the
seed admin's own /catalog because they weren't in Everyone. Symptom:
admin grants a Required-tier package to Everyone, then sees it on
/catalog still rendered with an "Add to stack" button (because the
admin's resolved required_ids was empty for that package).
The dual-membership keeps Admin (authorization) and Everyone
(default-grant target) intentionally separate per the design comment
on UserRepository.create — every membership remains traceable to a
concrete row, just now with a system_seed row in Everyone too. Both
INSERTs go through UserGroupMembersRepository.add_member which is
idempotent on (user_id, group_id), so re-fires on every lifespan
startup don't duplicate rows.
Regression test in test_main_seed_admin_everyone.py.
* style: unify admin-only hints across marketplace + memory detail pages
Replaces three stale ``(admin)`` parentheticals with the same yellow
``admin-only`` chip introduced for /catalog tab actions. Same tooltip
copy ("Visible only to admins — analysts won't see this …") so the
visibility hint is unmistakable wherever it appears:
- Hard delete on marketplace_plugin_detail (admin-only destructive
action — same gating as the original suffix conveyed).
- Hard delete on marketplace_item_detail (same).
- Edit link on memory_domain_detail (title-attr only before; now a
visible chip too).
Non-admin viewers never saw these affordances — the gates are
unchanged. Pure styling pass for consistency.
* fix(catalog): exclude soft-deleted data packages + memory domains from Browse
``StackResolver._fetch_entries`` and ``browse_admin`` were querying
data_packages / memory_domains without a ``deleted_at IS NULL`` guard.
A package soft-deleted via /admin/* (v54 soft-delete contract) stayed
visible on /catalog and /memory until either an Undo or a hard delete
— directly contradicting the soft-delete UX which is supposed to
remove the affordance immediately and only retain the row for the
Undo window.
The repository accessors (DataPackagesRepository.list,
MemoryDomainsRepository.list, list_packages_of_table, etc.) already
filter deleted rows; this commit brings the resolver's direct SQL in
line with that contract.
Regression test in test_stack_resolver_browse_admin.py.
* fix(catalog): Add/Remove updates full card chrome, not just button
The previous _applyStackChange flipped only the footer button label —
the card border (.is-in-stack class), top-right "In stack" badge, and
button color class (--add / --remove) stayed at their server-rendered
state. After Add the user saw the button checkmark but the rest of
the card still looked like "available, not in stack". They read this
as "the change didn't take — let me refresh".
This commit makes the optimistic update mirror what the server-side
macro renders for the new state:
* ``c.classList.toggle('is-in-stack', becameInStack)`` — flips the
border + visual state class.
* Top-right ``.stack-card__req-badge--instack`` badge is injected on
Add, removed on Remove (skipped when ``data-requirement='required'``
— that slot is owned by the Required badge).
* Button text is "Remove" / "+ Add to stack" matching the macro
(was "✓ In stack" which was visually nice but inconsistent).
* Button color class --add / --remove swaps so the destructive Remove
tint kicks in immediately.
The clone-into-My-Stack path applies the same updates so the new card
in My Stack reads identically to a server-rendered in_stack card.
Mirrored in /corporate-memory.
* fix(memory): four Devin-review bugs on /memory drill-down + manifest
PR #333 Devin review surfaced four real bugs that ship a broken
/memory experience even though the unit tests passed.
1. Manifest md5 omits is_required + content (app/api/sync.py:836-840)
_build_memory_domains_section hashed only (id|title|status) per
item. _build_per_domain_markdown routes items between "## Required"
and "## Approved" by is_required and embeds full content — so an
admin edit of either dimension left the manifest md5 unchanged,
`agnes pull` skipped the re-fetch, and the analyst kept a stale
bundle.md. Now both fields participate in the hash.
2. required_count always 0 (src/repositories/memory_domains.py)
list_items_of_domain only SELECTed (id, title, status) so the
`it.get("is_required")` in the manifest builder always evaluated
to None → required_count = 0 regardless of actual state. The
manifest builder advertised a count it could never compute. Now
projects is_required + content too (required by fix 1 anyway).
3. Vote URL 404 (memory_domain_detail.html:289-290)
Constructed `/api/memory/items/{id}/vote` but the route is
`/api/memory/{id}/vote`. Every upvote/downvote button was a
silent no-op.
4. Dismiss/undismiss URL + method both wrong (memory_domain_detail.html:296-305)
Constructed `/api/memory/items/{id}/dismiss` (extra /items/) and
/undismiss (no such route — undismiss is DELETE on /dismiss).
Both buttons silently 404'd. Now POST + DELETE on
`/api/memory/{id}/dismiss` per app/api/memory.py:635/675.
* fix: multi-agent reviewer findings — vendor-token scrubs + manifest md5 predicate + soft-delete filter
Three reviewer findings from the multi-agent review on PR #333,
fixed in-place per CLAUDE.md issue-economy rule.
Reviewer-rules (Important — vendor-agnostic OSS):
- app/main.py:218 comment: replaced 'foundryai-prod' with generic
'a customer prod instance' phrasing. Public OSS repo must not
carry customer-specific tokens (CLAUDE.md § Project conventions).
- tests/test_table_registry_v56_docs.py:70 fixture string:
replaced "user_brand_affiliation = 'groupon'" with 'acme' on
the same rule.
Reviewer-architecture (closes still-unresolved Devin 🚩 ANALYSIS):
- app/api/sync.py _build_memory_domains_section: md5 hash loop now
filters items to the SAME predicate the bundle renderer uses
(is_required OR status='approved'). Pre-fix the hash iterated ALL
items but _build_per_domain_markdown only rendered the union of
required items + approved-non-required items — so an admin edit
to a pending/rejected non-required item flipped the md5 against
an identical-bytes bundle, triggering a wasteful re-fetch on
every analyst's next 'agnes pull'. The earlier commit fixed the
hash-input fields (is_required + content); this closes the
set-of-items asymmetry Devin separately flagged.
Reviewer-RBAC (minor cleanup):
- app/resource_types.py _data_package_blocks and _memory_domain_blocks
now filter 'WHERE deleted_at IS NULL' (v54 soft-delete column) so
the /admin/access UI doesn't surface soft-deleted entities as
grantable. Mirrors the existing filter on _recipe_blocks. No
security leak pre-fix (resolver double-filters and re-checks at
serve time), just UI cleanliness.
- app/services/stack_resolver.py add_to_stack: docstring note
added explaining that authorization is enforced at the API layer
(app/api/stack.py can_access gate), not at the resolver. The
initial review suggested adding a defensive 403 here, but that
broke 5 existing tests that legitimately call add_to_stack
directly without setting up grants first; the docstring captures
the contract instead. stack() already intersects subscriptions
with current available_ids on every read, so a 'zombie' row from
a misuse never leaks into the user-facing manifest.
* release: 0.55.0 — unified Browse + My Stack (Data Packages + Memory), schema v48→v59, 3 BREAKING
5805 lines
283 KiB
HTML
5805 lines
283 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Table Management - {{ config.INSTANCE_NAME }}{% endblock %}
|
||
|
||
{% block body_attrs %}data-source-type="{{ data_source_type }}"{% endblock %}
|
||
|
||
{% block head_extra %}
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
/* Colors - Design System */
|
||
--primary: #0073D1;
|
||
--primary-light: rgba(0, 115, 209, 0.1);
|
||
--text-primary: #1A253C;
|
||
--text-secondary: #6B7280;
|
||
--background: #F5F7FA;
|
||
--surface: #FFFFFF;
|
||
--border: #E5E7EB;
|
||
--border-light: #F3F4F6;
|
||
--success: #10B77F;
|
||
--success-light: rgba(16, 183, 127, 0.1);
|
||
--warning: #F59F0A;
|
||
--error: #EA580C;
|
||
--error-light: rgba(234, 88, 12, 0.1);
|
||
|
||
/* Typography */
|
||
--font-primary: 'Inter', system-ui, sans-serif;
|
||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
|
||
/* Shadows */
|
||
--shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
|
||
--shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
color: var(--text-primary);
|
||
background: var(--background);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ── Header (dashboard-style) ── */
|
||
.header {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 0 32px;
|
||
height: 72px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.header-back {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 6px;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.header-back:hover {
|
||
background: var(--border-light);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.header-logo-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.header-logo svg {
|
||
display: block;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
letter-spacing: 0.4px;
|
||
text-transform: uppercase;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.header-right {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ── Page Title ── */
|
||
.page-title {
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
padding: 32px 24px 24px;
|
||
}
|
||
|
||
.page-title h1 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.page-title p {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ── Content Layout ── */
|
||
.content {
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
padding: 0 24px 32px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
}
|
||
|
||
/* ── Panel (shared card style) ── */
|
||
.panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid var(--border-light);
|
||
}
|
||
|
||
.panel-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.panel-header-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
.panel-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.panel-subtitle {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.panel-body-empty {
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ── Buttons ── */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-family: var(--font-primary);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #005FA8;
|
||
}
|
||
|
||
.btn-primary:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--border-light);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--border);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: var(--error-light);
|
||
color: var(--error);
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: rgba(234, 88, 12, 0.2);
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 5px 10px;
|
||
font-size: 12px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.btn-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
color: var(--text-secondary);
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.btn-icon:hover {
|
||
background: var(--border-light);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.btn-icon.danger:hover {
|
||
background: var(--error-light);
|
||
color: var(--error);
|
||
}
|
||
|
||
/* ── Badges ── */
|
||
.badge {
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
border-radius: 6px;
|
||
padding: 3px 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge-registered {
|
||
color: #065F46;
|
||
background: #D1FAE5;
|
||
}
|
||
|
||
.badge-available {
|
||
color: var(--primary);
|
||
background: var(--primary-light);
|
||
}
|
||
|
||
/* ── Spinner ── */
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 2px solid var(--border);
|
||
border-top-color: var(--primary);
|
||
border-radius: 50%;
|
||
animation: spin 0.6s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
.spinner-lg {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-width: 3px;
|
||
}
|
||
|
||
/* ── Loading state ── */
|
||
.loading-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 40px 24px;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ── Notification toast ── */
|
||
.toast {
|
||
position: fixed;
|
||
top: 84px;
|
||
right: 24px;
|
||
z-index: 200;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
box-shadow: var(--shadow-md);
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
transform: translateX(120%);
|
||
transition: transform 0.3s ease;
|
||
max-width: 360px;
|
||
}
|
||
|
||
.toast.visible {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.toast-success {
|
||
border-left: 3px solid var(--success);
|
||
}
|
||
|
||
.toast-error {
|
||
border-left: 3px solid var(--error);
|
||
}
|
||
|
||
.toast-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Bucket accordion ── */
|
||
.bucket-group {
|
||
border-top: 1px solid var(--border-light);
|
||
}
|
||
|
||
.bucket-group:first-child {
|
||
border-top: none;
|
||
}
|
||
|
||
.bucket-trigger {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 24px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-family: var(--font-primary);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
text-align: left;
|
||
transition: background 0.1s ease;
|
||
}
|
||
|
||
.bucket-trigger:hover {
|
||
background: var(--border-light);
|
||
}
|
||
|
||
.bucket-chevron {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: var(--text-secondary);
|
||
transition: transform 0.2s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bucket-trigger.expanded .bucket-chevron {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.bucket-count {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
background: var(--border-light);
|
||
padding: 1px 7px;
|
||
border-radius: 9999px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.bucket-content {
|
||
display: none;
|
||
}
|
||
|
||
.bucket-content.expanded {
|
||
display: block;
|
||
}
|
||
|
||
/* ── Table row (discovery results) ── */
|
||
.table-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 24px 10px 50px;
|
||
border-top: 1px solid var(--border-light);
|
||
gap: 12px;
|
||
transition: background 0.1s ease;
|
||
}
|
||
|
||
.table-item:hover {
|
||
background: rgba(243, 244, 246, 0.5);
|
||
}
|
||
|
||
.table-item-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.table-item-name {
|
||
font-weight: 500;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.table-item-meta {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
margin-top: 1px;
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.table-item-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── Registry table ── */
|
||
.registry-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.registry-table .col-description {
|
||
overflow: hidden;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow-wrap: anywhere;
|
||
line-height: 1.4;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.registry-table th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.4px;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--background);
|
||
}
|
||
|
||
.registry-table td {
|
||
padding: 12px 16px;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid var(--border-light);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.registry-table tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.registry-table tr:hover td {
|
||
background: rgba(243, 244, 246, 0.5);
|
||
}
|
||
|
||
.registry-table .col-id {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
max-width: 220px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.registry-table .col-actions {
|
||
width: 120px;
|
||
min-width: 120px;
|
||
white-space: nowrap;
|
||
vertical-align: top;
|
||
}
|
||
|
||
/* ── Registry table — wide layout ── */
|
||
.registry-table .col-mode {
|
||
width: 100px;
|
||
}
|
||
|
||
.registry-table .col-source {
|
||
width: 200px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.registry-table .col-pk {
|
||
width: 100px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.registry-table .col-schedule {
|
||
width: 100px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.registry-table .col-folder {
|
||
width: 120px;
|
||
}
|
||
|
||
.registry-table .col-registered {
|
||
width: 160px;
|
||
font-size: 11px;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.registry-table .col-registered .registered-by {
|
||
color: var(--text-primary);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.registry-table .col-registered .registered-at {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.registry-table .col-status {
|
||
width: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.mode-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mode-badge.mode-local {
|
||
background: var(--success-light);
|
||
color: var(--success);
|
||
}
|
||
|
||
.mode-badge.mode-remote {
|
||
background: var(--primary-light);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.mode-badge.mode-materialized {
|
||
background: rgba(139, 92, 246, 0.1);
|
||
color: #8B5CF6;
|
||
}
|
||
|
||
.mode-badge.mode-internal {
|
||
background: rgba(15, 118, 110, 0.1);
|
||
color: #0F766E;
|
||
}
|
||
|
||
.folder-badge {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
background: var(--background);
|
||
border: 1px solid var(--border);
|
||
font-size: 11px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ── Modal overlay ── */
|
||
.modal-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
padding: 40px 24px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-overlay.active {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal {
|
||
max-width: 560px;
|
||
width: 100%;
|
||
background: var(--surface);
|
||
border-radius: 12px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
/* BLOCKER fix (UX review #1): cap height at 90vh + scroll
|
||
* the body so Create + Edit Data Package modals don't push
|
||
* the Submit footer off-screen on 720px viewports. Flex
|
||
* layout keeps header + footer pinned and grows the body. */
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.modal .modal-body {
|
||
overflow-y: auto;
|
||
flex: 1 1 auto;
|
||
}
|
||
.modal .modal-header,
|
||
.modal .modal-footer {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--background);
|
||
}
|
||
|
||
.modal-header h2 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--text-secondary);
|
||
transition: all 0.15s;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
background: var(--border-light);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 24px;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--background);
|
||
}
|
||
|
||
/* ── Form ── */
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.form-label .optional {
|
||
font-weight: 400;
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.form-input,
|
||
.form-select,
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
font-family: var(--font-primary);
|
||
font-size: 13px;
|
||
color: var(--text-primary);
|
||
background: var(--surface);
|
||
transition: border-color 0.15s;
|
||
}
|
||
|
||
.form-input:focus,
|
||
.form-select:focus,
|
||
.form-textarea:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(0, 115, 209, 0.1);
|
||
}
|
||
|
||
.form-input[readonly] {
|
||
background: var(--border-light);
|
||
color: var(--text-secondary);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.form-textarea {
|
||
min-height: 80px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-select {
|
||
cursor: pointer;
|
||
appearance: none;
|
||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
padding-right: 32px;
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ── Footer ── */
|
||
.footer {
|
||
text-align: center;
|
||
padding: 24px;
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer a {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 640px) {
|
||
.header {
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.page-title {
|
||
padding: 24px 16px 16px;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 16px 24px;
|
||
}
|
||
|
||
.panel-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.table-item {
|
||
padding-left: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.table-item-meta {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.registry-table .col-id {
|
||
max-width: 160px;
|
||
}
|
||
|
||
.modal {
|
||
margin: 16px;
|
||
}
|
||
}
|
||
|
||
/* ── Tab nav (Phase D) ── */
|
||
.tab-nav {
|
||
display: flex;
|
||
gap: 4px;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 16px;
|
||
}
|
||
.tab {
|
||
padding: 8px 16px;
|
||
background: transparent;
|
||
border: 0;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
color: var(--text-secondary);
|
||
}
|
||
.tab[aria-selected="true"] {
|
||
border-bottom: 2px solid var(--primary);
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
.tab-content {
|
||
padding: 16px 0;
|
||
}
|
||
.tab-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
.tab-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 16px;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block layout %}
|
||
<!-- ═══════════════ PAGE TITLE ═══════════════ -->
|
||
<div class="page-title">
|
||
<h1>Tables & Data Packages</h1>
|
||
<p>Group registered tables into Data Packages so analysts can opt-in to bundles.</p>
|
||
</div>
|
||
|
||
<!-- ═══════════════ CONTENT ═══════════════ -->
|
||
<div class="content">
|
||
|
||
{# ─── Top action bar (package-centric, replaces connector-tab nav) ───
|
||
Single row of high-level actions. The "+ Register new table"
|
||
dropdown picks a connector → opens the matching modal (BQ /
|
||
Keboola / Jira) instead of letting the connector drive the
|
||
page layout. #}
|
||
<section id="adminTablesActionBar" class="card" style="margin-bottom: 16px;">
|
||
<div class="card-body" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px;">
|
||
<div style="position:relative;">
|
||
<button id="registerNewTableBtn" class="btn btn-primary" type="button"
|
||
onclick="toggleRegisterNewTableMenu(event)">
|
||
+ Register new table ▾
|
||
</button>
|
||
<div id="registerNewTableMenu"
|
||
style="display:none; position:absolute; top:100%; left:0; margin-top:4px;
|
||
background:var(--surface); border:1px solid var(--border); border-radius:8px;
|
||
box-shadow:var(--shadow-md); min-width:220px; z-index:20; padding:6px;">
|
||
<button class="btn btn-secondary" type="button" data-register-source="bigquery"
|
||
style="display:block; width:100%; text-align:left; margin-bottom:4px;"
|
||
onclick="closeRegisterNewTableMenu(); openRegisterModal('bigquery')">
|
||
BigQuery
|
||
</button>
|
||
<button class="btn btn-secondary" type="button" data-register-source="keboola"
|
||
style="display:block; width:100%; text-align:left; margin-bottom:4px;"
|
||
onclick="closeRegisterNewTableMenu(); openRegisterModal('keboola')">
|
||
Keboola
|
||
</button>
|
||
<a class="btn btn-secondary" type="button"
|
||
href="docs/connectors/jira.md"
|
||
style="display:block; width:100%; text-align:left; text-decoration:none;"
|
||
onclick="closeRegisterNewTableMenu()">
|
||
Jira (webhook-driven — see docs)
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-secondary" type="button" onclick="groupTablesByBucket()"
|
||
title="One-click: create one Data Package per distinct bucket and assign its tables">
|
||
Group tables by bucket
|
||
</button>
|
||
<button class="btn btn-secondary" type="button" onclick="openBulkAssignModal('')">
|
||
Bulk assign tables
|
||
</button>
|
||
<button class="btn btn-secondary" type="button" onclick="openCreateDataPackageModal('', null)">
|
||
+ New Data Package
|
||
</button>
|
||
<span style="flex:1;"></span>
|
||
<details id="cacheWarmupCard" style="margin:0;">
|
||
<summary style="cursor:pointer; user-select:none; font-size:13px; color:var(--text-secondary);">
|
||
<span id="cacheWarmupSummary">Cache freshness — loading…</span>
|
||
</summary>
|
||
<div style="margin-top:8px; padding:12px; background:var(--background); border-radius:8px;">
|
||
<div id="cacheWarmupProgress" style="margin-bottom:8px;"></div>
|
||
<progress id="cacheWarmupBar" max="100" value="0" style="width:100%; display:none;"></progress>
|
||
<button class="btn btn-secondary btn-sm" id="cacheWarmupRunBtn" onclick="cacheWarmupRun()"
|
||
style="margin-top:8px;">
|
||
Re-warm all
|
||
</button>
|
||
<details id="cacheWarmupDetails" style="margin-top:8px;">
|
||
<summary style="cursor:pointer; user-select:none; font-size:12px;">Show log</summary>
|
||
<p id="cacheWarmupHint" style="font-size:11px; color:var(--text-secondary); margin:6px 0 0;">
|
||
Live log from <em>Re-warm all</em>. Historical runs aren't persisted; check
|
||
<a href="/admin/activity">/admin/activity</a> for the audit trail.
|
||
</p>
|
||
<pre id="cacheWarmupLog" style="background:#0a0a0a; color:#dcdcdc; font-family:ui-monospace, Menlo, monospace; font-size:11px; padding:6px; max-height:200px; overflow-y:auto; margin-top:6px; border-radius:4px;"></pre>
|
||
</details>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
{# ─── Package-centric layout (replaces the connector-tab nav) ───
|
||
Hydrated client-side by loadAdminTablesLayout(): pulls both
|
||
/api/admin/data-packages and /api/admin/registry, renders one
|
||
collapsible <details> per package containing its member tables,
|
||
then an "Unpackaged tables" section for everything else.
|
||
|
||
"On the side" data-packages was the wrong framing — packages ARE
|
||
the org structure now, so every table appears under either a
|
||
package or the explicit Unpackaged bucket. Bucket / source_type
|
||
survive as inline tags but no longer drive the layout. #}
|
||
<section id="adminTablesLayout" class="card" style="margin-bottom: 16px;">
|
||
<div class="card-body" id="adminTablesLayoutBody" style="padding:16px;">
|
||
{# Search bar — UX parity with /catalog + /memory. Filters the
|
||
package details + the table rows inside them; an unpackaged
|
||
row matches by table name / source_type / bucket. Hides any
|
||
package whose name doesn't match AND has zero matching rows. #}
|
||
<div style="margin-bottom: 12px; display:flex; align-items:center; gap:8px;">
|
||
<input id="adminTablesSearch" type="search"
|
||
class="form-input"
|
||
placeholder="Filter packages and tables by name, source, or bucket…"
|
||
oninput="filterAdminTablesLayout()"
|
||
style="flex:1; max-width:520px;">
|
||
<span id="adminTablesSearchHint"
|
||
style="font-size:12px; color:var(--text-secondary);"></span>
|
||
</div>
|
||
<div id="adminTablesLayoutPackages">
|
||
<div style="padding:16px; color:var(--text-secondary); font-size:13px; text-align:center;">
|
||
Loading packages…
|
||
</div>
|
||
</div>
|
||
<div id="adminTablesLayoutUnpackaged" style="margin-top:20px;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
{# Register modals (BigQuery / Keboola) live as top-level overlays,
|
||
reachable via the "+ Register new table" dropdown in the action
|
||
bar above. The connector tabs that used to drive the page layout
|
||
were dropped — every table now appears in the package-centric
|
||
layout regardless of source_type. #}
|
||
|
||
<!-- ── BigQuery Register Modal ── -->
|
||
<div class="modal-overlay" id="registerBqModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Register BigQuery Table</h2>
|
||
<button class="modal-close" onclick="closeRegisterBqModal()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
{# Two orthogonal questions: (1) live vs synced, (2) when synced,
|
||
whole table vs custom SQL. Visibility classes:
|
||
bq-access-live — only when accessMode='live'
|
||
bq-access-synced — only when accessMode='synced'
|
||
bq-source-table — only when accessMode='live' OR
|
||
(accessMode='synced' AND syncMode='whole')
|
||
bq-source-custom — only when accessMode='synced' AND syncMode='custom'
|
||
Backend payload: live → query_mode='remote'; synced/whole →
|
||
query_mode='materialized' with auto-built SELECT *; synced/custom
|
||
→ query_mode='materialized' with admin SQL. Server auto-detects
|
||
BASE TABLE vs VIEW at register time, so the UI doesn't ask. #}
|
||
<div class="form-group">
|
||
<label class="form-label">How should analysts access this data?</label>
|
||
<div class="bq-access-radio-group" style="display:flex; gap:12px; margin-top:6px;">
|
||
<label style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="bqAccessMode" value="live" checked onchange="onBqAccessModeChange()">
|
||
<strong>Live from BigQuery</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Each analyst query goes straight to BQ. Always current.
|
||
Latency ≈ seconds; 0 disk on the analyst machine; cost =
|
||
bytes scanned per query. Best for huge tables or when
|
||
freshness matters.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="bqAccessMode" value="synced" onchange="onBqAccessModeChange()">
|
||
<strong>Synced locally</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Agnes runs a SELECT on a schedule and ships a parquet
|
||
to analysts. Analyst-side latency <100 ms; disk =
|
||
snapshot size. Best when analysts hit the same data
|
||
often and speed beats freshness.
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group bq-access-synced" style="display:none;">
|
||
<label class="form-label">What to sync?</label>
|
||
<div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px;">
|
||
<label style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="bqSyncMode" value="whole" checked onchange="onBqSyncModeChange()">
|
||
<strong>Whole table</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Agnes runs <code>SELECT *</code> automatically. No SQL
|
||
required. Disk + sync cost = full table size.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="bqSyncMode" value="custom" onchange="onBqSyncModeChange()">
|
||
<strong>Custom query</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
You write the SELECT — filter, project, or aggregate
|
||
before the sync. Cuts disk + cost; cap via
|
||
<code>max_bytes_per_materialize</code> guardrail.
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group bq-source-table">
|
||
<label class="form-label" for="bqDataset">
|
||
Dataset
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverBqDatasets()" style="float:right; margin-top:-3px;">
|
||
Discover
|
||
</button>
|
||
</label>
|
||
<input type="text" class="form-input" id="bqDataset" list="bqDatasetList" placeholder="e.g. analytics">
|
||
<datalist id="bqDatasetList"></datalist>
|
||
<div class="form-hint">BigQuery dataset name (no project prefix — read from instance.yaml).
|
||
Click <strong>Discover</strong> to populate the autocomplete from the BQ project's dataset list.</div>
|
||
</div>
|
||
<div class="form-group bq-source-table">
|
||
<label class="form-label" for="bqSourceTable">
|
||
Source Table / View
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverBqTables()" style="float:right; margin-top:-3px;">
|
||
List tables
|
||
</button>
|
||
</label>
|
||
<input type="text" class="form-input" id="bqSourceTable" list="bqTableList" placeholder="e.g. orders">
|
||
<datalist id="bqTableList"></datalist>
|
||
<div class="form-hint">Table or view name within the dataset. Click
|
||
<strong>List tables</strong> after filling Dataset to populate autocomplete.
|
||
<br><strong>Live access:</strong> BASE TABLEs query via
|
||
<code>bq."dataset"."table"</code> (Storage Read API; predicate pushdown).
|
||
VIEWs and MATERIALIZED_VIEWs query via the BQ jobs API (full-scan estimate;
|
||
cost-guarded by <code>bq_max_scan_bytes</code>).
|
||
<code>agnes query --remote</code> works for both.
|
||
<br><strong>Synced access:</strong> handles both table and view transparently
|
||
— the scheduler runs <code>SELECT *</code> through the jobs API and writes a
|
||
parquet.</div>
|
||
</div>
|
||
<div class="form-group bq-source-custom" style="display:none;">
|
||
<label class="form-label" for="bqSourceQuery">
|
||
SQL
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="prefillFromTable()" style="float:right; margin-top:-3px;"
|
||
title="Prefill SELECT * FROM `project.dataset.table` so you only edit the WHERE / projection">
|
||
Use table as base
|
||
</button>
|
||
</label>
|
||
<textarea class="form-textarea" id="bqSourceQuery" rows="8"
|
||
placeholder="SELECT date, SUM(revenue) AS revenue FROM `project.dataset.orders` WHERE date >= DATE_SUB(CURRENT_DATE(), INTERVAL 90 DAY) GROUP BY 1"></textarea>
|
||
<div class="form-hint">
|
||
SELECT statement, no trailing semicolon. Native BQ identifiers
|
||
(<code>`project.dataset.table`</code>) recommended — DuckDB three-part
|
||
names like <code>bq."ds"."t"</code> work for the COPY but disable the
|
||
cost guardrail's BQ dry-run.
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="bqViewName">View Name</label>
|
||
<input type="text" class="form-input" id="bqViewName" placeholder="orders_90d">
|
||
<div class="form-hint">Name analysts use to query the data (e.g.
|
||
<code>SELECT * FROM orders_90d</code>). Required for Custom query; defaults
|
||
to the source table for the other modes.</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="bqDescription">Description <span class="optional">(optional)</span></label>
|
||
<textarea class="form-textarea" id="bqDescription" placeholder="Brief description of the table contents..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="bqFolder">Folder <span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="bqFolder" placeholder="e.g. crm, finance, marketing">
|
||
<div class="form-hint">Logical grouping for catalog organization</div>
|
||
</div>
|
||
<div class="form-group bq-access-synced" style="display:none;">
|
||
<label class="form-label" for="bqSyncSchedule">Sync Schedule <span class="optional">(optional, default <code>every 1h</code>)</span></label>
|
||
<input type="text" class="form-input" id="bqSyncSchedule" placeholder="every 6h">
|
||
<div class="form-hint">
|
||
How often Agnes refreshes the local copy. Examples:
|
||
<code>every 15m</code>, <code>every 6h</code>,
|
||
<code>daily 03:00</code>, <code>daily 07:00,13:00,18:00</code> (UTC).
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="bqPrecheckSummary" style="display:none;">
|
||
<div class="form-label">Source check</div>
|
||
<div class="form-hint" id="bqPrecheckSummaryText"></div>
|
||
</div>
|
||
{# v49 (Task 8.8): Data Packages chip-input field.
|
||
The submit handler (registerBqTable) is intentionally
|
||
NOT wired to forward `package_ids` to /api/admin/tables
|
||
in this pass — backend extension lives in a focused
|
||
follow-up. For now the chip-input persists chosen
|
||
packages locally and the admin can attach via
|
||
`POST /api/admin/data-packages/<id>/tables` from the
|
||
CLI / package admin UI. #}
|
||
<div class="form-group">
|
||
<label class="form-label">Data Packages <span class="optional">(optional)</span></label>
|
||
<div class="chip-input"
|
||
data-source-url="/api/admin/data-packages"
|
||
data-allow-create="true"
|
||
data-name="bq_package_ids"
|
||
data-placeholder="Type to search or create…"
|
||
data-chip-input="data_package"></div>
|
||
<div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeRegisterBqModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="registerBqSubmitBtn" onclick="registerBqTable()">
|
||
Register Table
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── BigQuery Edit Modal (C2 — physically inside the BQ tab,
|
||
mirror of #registerBqModal placement) ── -->
|
||
<div class="modal-overlay" id="editBqModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Edit BigQuery Table</h2>
|
||
<button class="modal-close" onclick="closeEditBqModal()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label" for="editBqTableId">Table ID</label>
|
||
<input type="text" class="form-input" id="editBqTableId" readonly>
|
||
<div class="form-hint">Slugified id, immutable. Source type:
|
||
<strong id="editBqSourceTypeBadge">bigquery</strong></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">How should analysts access this data?
|
||
<a href="docs/admin/query-modes.md" target="_blank" title="When to use which mode" style="margin-left: 6px; text-decoration: none; cursor: help;">?</a>
|
||
</label>
|
||
<div style="display:flex; gap:12px; margin-top:6px;">
|
||
<label style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editBqAccessMode" value="live" onchange="onEditBqAccessModeChange()">
|
||
<strong>Live from BigQuery</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Each query goes to BQ. No local copy.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editBqAccessMode" value="synced" onchange="onEditBqAccessModeChange()">
|
||
<strong>Synced locally</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Scheduled SELECT → parquet, queried locally.
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="form-hint" id="editBqModeWarning" style="display:none;
|
||
color:#EA580C;background:rgba(234,88,12,.08);padding:8px;border-radius:6px;margin-top:8px;">
|
||
<!-- Filled by onEditBqAccessModeChange() when switching
|
||
modes on an existing row — warns about parquet
|
||
drop / scheduling impact. -->
|
||
</div>
|
||
</div>
|
||
<div class="form-group bq-edit-access-synced" style="display:none;">
|
||
<label class="form-label">What to sync?</label>
|
||
<div style="display:flex; gap:12px; margin-top:6px;">
|
||
<label style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editBqSyncMode" value="whole" onchange="onEditBqSyncModeChange()">
|
||
<strong>Whole table</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
<code>SELECT *</code> on a schedule.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editBqSyncMode" value="custom" onchange="onEditBqSyncModeChange()">
|
||
<strong>Custom query</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Filter / aggregate before sync.
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group bq-edit-source-table" style="display:none;">
|
||
<label class="form-label" for="editBqDataset">
|
||
Dataset
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverBqDatasets('editBqDatasetList')"
|
||
style="float:right; margin-top:-3px;">
|
||
Discover
|
||
</button>
|
||
</label>
|
||
<input type="text" class="form-input" id="editBqDataset"
|
||
list="editBqDatasetList" placeholder="e.g. analytics">
|
||
<datalist id="editBqDatasetList"></datalist>
|
||
</div>
|
||
<div class="form-group bq-edit-source-table" style="display:none;">
|
||
<label class="form-label" for="editBqSourceTable">
|
||
Source Table / View
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverBqTables('editBqDataset', 'editBqTableList')"
|
||
style="float:right; margin-top:-3px;">
|
||
List tables
|
||
</button>
|
||
</label>
|
||
<input type="text" class="form-input" id="editBqSourceTable"
|
||
list="editBqTableList" placeholder="e.g. orders">
|
||
<datalist id="editBqTableList"></datalist>
|
||
<div class="form-hint">Table or view name within the dataset.
|
||
<br><strong>Live access:</strong> BASE TABLEs query via
|
||
<code>bq."dataset"."table"</code> (Storage Read API; predicate pushdown).
|
||
VIEWs and MATERIALIZED_VIEWs query via the BQ jobs API (full-scan estimate;
|
||
cost-guarded by <code>bq_max_scan_bytes</code>).
|
||
<code>agnes query --remote</code> works for both.
|
||
<br><strong>Synced access:</strong> handles both transparently — the
|
||
scheduler runs <code>SELECT *</code> through the jobs API and writes a
|
||
parquet.</div>
|
||
</div>
|
||
<div class="form-group bq-edit-source-custom" style="display:none;">
|
||
<label class="form-label" for="editBqSourceQuery">
|
||
SQL
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="prefillFromTable('editBqSourceQuery')"
|
||
style="float:right; margin-top:-3px;"
|
||
title="Prefill SELECT * FROM `project.dataset.table` so you only edit the WHERE / projection">
|
||
Use table as base
|
||
</button>
|
||
</label>
|
||
<textarea class="form-textarea" id="editBqSourceQuery" rows="8"></textarea>
|
||
<div class="form-hint">SELECT statement, no trailing semicolon. Native BQ
|
||
identifiers recommended for the cost guardrail to engage.</div>
|
||
</div>
|
||
<div class="form-group bq-edit-access-synced" style="display:none;">
|
||
<label class="form-label" for="editBqSyncSchedule">Sync Schedule
|
||
<span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="editBqSyncSchedule" placeholder="every 6h">
|
||
<div class="form-hint">How often Agnes refreshes the local copy.
|
||
<code>every 15m</code>, <code>every 6h</code>,
|
||
<code>daily 03:00</code> (UTC).</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="editBqDescription">Description <span class="optional">(optional)</span></label>
|
||
<textarea class="form-textarea" id="editBqDescription" placeholder="Brief description of the table contents..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="editBqFolder">Folder <span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="editBqFolder" placeholder="e.g. crm, finance, marketing">
|
||
<div class="form-hint">Logical grouping for catalog organization (does not affect storage).</div>
|
||
</div>
|
||
|
||
{# Data Packages chip-input — parity with the legacy
|
||
and Keboola edit modals. Hydrated on open with
|
||
the table's current memberships; saveBqTabEdit
|
||
diffs against `_editBqOriginalPackageIds` and
|
||
emits the minimal POST/DELETE delta. #}
|
||
<div class="form-group">
|
||
<label class="form-label">Data Packages <span class="optional">(optional)</span></label>
|
||
<div class="chip-input"
|
||
id="editBqPackagesChips"
|
||
data-source-url="/api/admin/data-packages"
|
||
data-allow-create="true"
|
||
data-name="bq_edit_package_ids"
|
||
data-placeholder="Type to search or create…"
|
||
data-chip-input="data_package"></div>
|
||
<div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeEditBqModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="editBqSubmitBtn" onclick="saveBqTabEdit()">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Keboola Register Modal ── -->
|
||
<div class="modal-overlay" id="registerKeboolaModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Register Keboola Table</h2>
|
||
<button class="modal-close" onclick="closeRegisterKeboolaModal()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
{# Three sync-mode radios:
|
||
- whole / custom → query_mode='materialized' (DuckDB Keboola
|
||
extension; whole synthesizes SELECT *, custom uses admin SQL)
|
||
- direct → query_mode='local' (Storage API SDK, supports
|
||
v26 sync strategies: incremental/partitioned + where_filters) #}
|
||
<div class="form-group">
|
||
<label class="form-label">What to sync?</label>
|
||
<div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;">
|
||
<label style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="kbSyncMode" value="whole" checked onchange="onKbSyncModeChange()">
|
||
<strong>Whole table (extension)</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
DuckDB Keboola extension pulls the full table on
|
||
each tick. Fastest path; full overwrite each run.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="kbSyncMode" value="direct" onchange="onKbSyncModeChange()">
|
||
<strong>Direct extract (Storage API)</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Storage API SDK. Supports incremental sync
|
||
(changedSince + PK merge), partitioned files,
|
||
and server-side <code>where_filters</code>.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="kbSyncMode" value="custom" onchange="onKbSyncModeChange()">
|
||
<strong>Custom SQL</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Pre-aggregate or filter with your own SELECT
|
||
(e.g. last 30 days only, per-day rollup).
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="kbViewName">View name (analyst-visible)</label>
|
||
<input type="text" class="form-input" id="kbViewName"
|
||
placeholder="e.g. orders_recent">
|
||
</div>
|
||
|
||
{# Discover/List tables backend currently routes by instance's data_source.type
|
||
ignoring the `source` query param. Hiding the buttons on non-Keboola instances
|
||
prevents wrong-shape responses; inputs stay for manual entry. Future fix: make
|
||
/api/admin/discover-tables accept ?source=keboola and remove this guard. #}
|
||
<div class="form-group kb-source-table">
|
||
<label class="form-label" for="kbBucket">
|
||
Bucket
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverKeboolaBuckets('kbBucketList')"
|
||
style="float:right; margin-top:-3px;">Discover</button>
|
||
{% endif %}
|
||
</label>
|
||
<input type="text" class="form-input" id="kbBucket"
|
||
list="kbBucketList" placeholder="e.g. in.c-sales">
|
||
<datalist id="kbBucketList"></datalist>
|
||
</div>
|
||
<div class="form-group kb-source-table">
|
||
<label class="form-label" for="kbSourceTable">
|
||
Source Table
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverKeboolaTables('kbBucket', 'kbTableList')"
|
||
style="float:right; margin-top:-3px;">List tables</button>
|
||
{% endif %}
|
||
</label>
|
||
<input type="text" class="form-input" id="kbSourceTable"
|
||
list="kbTableList" placeholder="e.g. orders">
|
||
<datalist id="kbTableList"></datalist>
|
||
</div>
|
||
<div class="form-group kb-source-custom" style="display:none;">
|
||
<label class="form-label" for="kbSourceQuery">
|
||
SQL
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="prefillFromKeboolaTable('kbSourceQuery')"
|
||
style="float:right; margin-top:-3px;"
|
||
title="Prefill SELECT * FROM kbc.bucket.table so you only edit the WHERE / projection">
|
||
Use table as base
|
||
</button>
|
||
{% endif %}
|
||
</label>
|
||
<textarea class="form-textarea" id="kbSourceQuery" rows="8"></textarea>
|
||
<div class="form-hint">SELECT against <code>kbc."bucket"."table"</code>.
|
||
Result is materialized to parquet and distributed via
|
||
<code>agnes pull</code>.</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="kbSyncSchedule">Sync Schedule
|
||
<span class="optional">(optional, default <code>every 1h</code>)</span></label>
|
||
<input type="text" class="form-input" id="kbSyncSchedule" placeholder="every 6h">
|
||
<div class="form-hint">
|
||
How often Agnes refreshes the local copy. Examples:
|
||
<code>every 15m</code>, <code>every 6h</code>,
|
||
<code>daily 03:00</code>, <code>daily 07:00,13:00,18:00</code> (UTC).
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="kbDescription">Description
|
||
<span class="optional">(optional)</span></label>
|
||
<textarea class="form-textarea" id="kbDescription"
|
||
placeholder="Brief description of the table contents..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="kbFolder">Folder
|
||
<span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="kbFolder"
|
||
placeholder="e.g. crm, finance, marketing">
|
||
</div>
|
||
|
||
<details class="form-group">
|
||
<summary>Advanced (optional)</summary>
|
||
<div class="form-group" style="margin-top:8px;">
|
||
<label class="form-label" for="kbPrimaryKey">Primary Key</label>
|
||
<input type="text" class="form-input" id="kbPrimaryKey"
|
||
placeholder="e.g. id">
|
||
<div class="form-hint">Comma-separated list. Required for
|
||
Direct extract → Incremental (used as the dedup key on
|
||
delta merge). Auto-filled from the Keboola source when
|
||
available.</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- v26 Direct-extract sync-strategy panel — visible only when
|
||
"Direct extract (Storage API)" is selected. Field visibility
|
||
within the panel further branches on the sync_strategy
|
||
dropdown (incremental / partitioned). -->
|
||
<div class="form-group kb-direct-only" style="display:none; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--background);">
|
||
<h3 style="margin:0 0 12px 0; font-size:14px;">Direct extract — sync strategy</h3>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="kbStrategy">Sync strategy</label>
|
||
<select class="form-select" id="kbStrategy" onchange="onKbStrategyChange()">
|
||
<option value="full_refresh">Full refresh — pull entire table each tick</option>
|
||
<option value="incremental">Incremental — pull rows changed since last sync</option>
|
||
<option value="partitioned">Partitioned — per-partition files, per-month/day/year</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group kb-strategy-incremental kb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="kbIncrementalWindowDays">Incremental window (days)
|
||
<span class="optional">(default 7)</span></label>
|
||
<input type="number" class="form-input" id="kbIncrementalWindowDays" min="0" placeholder="7">
|
||
<div class="form-hint">Backtrack window applied to last_sync timestamp on each tick.
|
||
Higher = more reliable on late-arriving rows; lower = less data per tick.</div>
|
||
</div>
|
||
<div class="form-group kb-strategy-incremental kb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="kbMaxHistoryDays">Max history (days)
|
||
<span class="optional">(first sync only, default unbounded)</span></label>
|
||
<input type="number" class="form-input" id="kbMaxHistoryDays" min="1" placeholder="365">
|
||
<div class="form-hint">Cap on how far back the first-ever sync goes. Multi-year tables
|
||
without this can OOM at write — set 90/180/365 for safety.</div>
|
||
</div>
|
||
|
||
<div class="form-group kb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="kbPartitionBy">Partition by column <strong>(required)</strong></label>
|
||
<input type="text" class="form-input" id="kbPartitionBy" placeholder="e.g. event_date">
|
||
<div class="form-hint">Date / timestamp column whose value drives the partition key.
|
||
Rows with NULL or unparseable values are dropped (logged warning).</div>
|
||
</div>
|
||
<div class="form-group kb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="kbPartitionGranularity">Granularity</label>
|
||
<select class="form-select" id="kbPartitionGranularity">
|
||
<option value="month">Month — YYYY_MM.parquet (default)</option>
|
||
<option value="day">Day — YYYY_MM_DD.parquet</option>
|
||
<option value="year">Year — YYYY.parquet</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group kb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="kbInitialLoadChunkDays">Initial-load chunk size (days)
|
||
<span class="optional">(default 30)</span></label>
|
||
<input type="number" class="form-input" id="kbInitialLoadChunkDays" min="1" placeholder="30">
|
||
<div class="form-hint">First-sync chunked load step. Smaller = more API calls, less
|
||
memory per chunk. Larger = fewer calls, more memory.</div>
|
||
</div>
|
||
|
||
<div class="form-group kb-strategy-not-incremental" style="display:none;">
|
||
<label class="form-label" for="kbWhereFilters">Where filters
|
||
<span class="optional">(JSON array, optional)</span></label>
|
||
<textarea class="form-textarea" id="kbWhereFilters" rows="6"
|
||
placeholder='[{"column": "date", "operator": "ge", "values": ["{{last_3_months}}"]}]'></textarea>
|
||
<div class="form-hint">
|
||
Server-side row filter. Operators: <code>eq, ne, gt, ge, lt, le</code>.
|
||
Date placeholders resolved at sync time:
|
||
<code>{{ '{{today}}' }}</code>,
|
||
<code>{{ '{{last_week}}' }}</code>,
|
||
<code>{{ '{{last_month}}' }}</code>,
|
||
<code>{{ '{{last_2_months}}' }}</code>,
|
||
<code>{{ '{{last_3_months}}' }}</code>,
|
||
<code>{{ '{{last_6_months}}' }}</code>,
|
||
<code>{{ '{{last_year}}' }}</code>,
|
||
<code>{{ '{{last_2_years}}' }}</code>,
|
||
<code>{{ '{{start_of_3_months_ago}}' }}</code>.
|
||
Not compatible with Incremental strategy.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeRegisterKeboolaModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="registerKeboolaSubmitBtn"
|
||
onclick="registerKeboolaTable()">Register</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Keboola Edit Modal (Phase F2) ── -->
|
||
<div class="modal-overlay" id="editKeboolaModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Edit Keboola Table</h2>
|
||
<button class="modal-close" onclick="closeEditKeboolaModal()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label" for="editKbTableId">Table ID</label>
|
||
<input type="text" class="form-input" id="editKbTableId" readonly>
|
||
<div class="form-hint">Slugified id, immutable.</div>
|
||
</div>
|
||
|
||
{# Three sync-mode radios (mirror of Register). #}
|
||
<div class="form-group">
|
||
<label class="form-label">What to sync?</label>
|
||
<div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;">
|
||
<label style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editKbSyncMode" value="whole"
|
||
onchange="onEditKbSyncModeChange()">
|
||
<strong>Whole table (extension)</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
DuckDB Keboola extension; full overwrite each tick.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editKbSyncMode" value="direct"
|
||
onchange="onEditKbSyncModeChange()">
|
||
<strong>Direct extract (Storage API)</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Storage API SDK. Supports incremental, partitioned,
|
||
<code>where_filters</code>.
|
||
</div>
|
||
</label>
|
||
<label style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
|
||
<input type="radio" name="editKbSyncMode" value="custom"
|
||
onchange="onEditKbSyncModeChange()">
|
||
<strong>Custom SQL</strong>
|
||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
|
||
Pre-aggregate or filter with your own SELECT.
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{# Discover/List tables backend currently routes by instance's data_source.type
|
||
ignoring the `source` query param. Hiding the buttons on non-Keboola instances
|
||
prevents wrong-shape responses; inputs stay for manual entry. Future fix: make
|
||
/api/admin/discover-tables accept ?source=keboola and remove this guard. #}
|
||
<div class="form-group editkb-source-table">
|
||
<label class="form-label" for="editKbBucket">
|
||
Bucket
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverKeboolaBuckets('editKbBucketList')"
|
||
style="float:right; margin-top:-3px;">Discover</button>
|
||
{% endif %}
|
||
</label>
|
||
<input type="text" class="form-input" id="editKbBucket"
|
||
list="editKbBucketList" placeholder="e.g. in.c-sales">
|
||
<datalist id="editKbBucketList"></datalist>
|
||
</div>
|
||
<div class="form-group editkb-source-table">
|
||
<label class="form-label" for="editKbSourceTable">
|
||
Source Table
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="discoverKeboolaTables('editKbBucket', 'editKbTableList')"
|
||
style="float:right; margin-top:-3px;">List tables</button>
|
||
{% endif %}
|
||
</label>
|
||
<input type="text" class="form-input" id="editKbSourceTable"
|
||
list="editKbTableList" placeholder="e.g. orders">
|
||
<datalist id="editKbTableList"></datalist>
|
||
</div>
|
||
<div class="form-group editkb-source-custom" style="display:none;">
|
||
<label class="form-label" for="editKbSourceQuery">
|
||
SQL
|
||
{% if data_source_type == 'keboola' %}
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="prefillFromKeboolaTable('editKbSourceQuery')"
|
||
style="float:right; margin-top:-3px;"
|
||
title="Prefill SELECT * FROM kbc.bucket.table so you only edit the WHERE / projection">
|
||
Use table as base
|
||
</button>
|
||
{% endif %}
|
||
</label>
|
||
<textarea class="form-textarea" id="editKbSourceQuery" rows="8"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="editKbSyncSchedule">Sync Schedule
|
||
<span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="editKbSyncSchedule" placeholder="every 6h">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="editKbDescription">Description
|
||
<span class="optional">(optional)</span></label>
|
||
<textarea class="form-textarea" id="editKbDescription"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="editKbFolder">Folder
|
||
<span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="editKbFolder">
|
||
</div>
|
||
|
||
<details class="form-group">
|
||
<summary>Advanced (optional)</summary>
|
||
<div class="form-group" style="margin-top:8px;">
|
||
<label class="form-label" for="editKbPrimaryKey">Primary Key</label>
|
||
<input type="text" class="form-input" id="editKbPrimaryKey"
|
||
placeholder="e.g. id">
|
||
<div class="form-hint">Comma-separated list. Required for
|
||
Direct extract → Incremental.</div>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- v26 Direct-extract sync-strategy panel — mirror of Register. -->
|
||
<div class="form-group editkb-direct-only" style="display:none; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--background);">
|
||
<h3 style="margin:0 0 12px 0; font-size:14px;">Direct extract — sync strategy</h3>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="editKbStrategy">Sync strategy</label>
|
||
<select class="form-select" id="editKbStrategy" onchange="onEditKbStrategyChange()">
|
||
<option value="full_refresh">Full refresh — pull entire table each tick</option>
|
||
<option value="incremental">Incremental — pull rows changed since last sync</option>
|
||
<option value="partitioned">Partitioned — per-partition files, per-month/day/year</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group editkb-strategy-incremental editkb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="editKbIncrementalWindowDays">Incremental window (days)
|
||
<span class="optional">(default 7)</span></label>
|
||
<input type="number" class="form-input" id="editKbIncrementalWindowDays" min="0" placeholder="7">
|
||
</div>
|
||
<div class="form-group editkb-strategy-incremental editkb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="editKbMaxHistoryDays">Max history (days)
|
||
<span class="optional">(first sync only)</span></label>
|
||
<input type="number" class="form-input" id="editKbMaxHistoryDays" min="1" placeholder="365">
|
||
</div>
|
||
|
||
<div class="form-group editkb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="editKbPartitionBy">Partition by column <strong>(required)</strong></label>
|
||
<input type="text" class="form-input" id="editKbPartitionBy" placeholder="e.g. event_date">
|
||
</div>
|
||
<div class="form-group editkb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="editKbPartitionGranularity">Granularity</label>
|
||
<select class="form-select" id="editKbPartitionGranularity">
|
||
<option value="month">Month (default)</option>
|
||
<option value="day">Day</option>
|
||
<option value="year">Year</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group editkb-strategy-partitioned" style="display:none;">
|
||
<label class="form-label" for="editKbInitialLoadChunkDays">Initial-load chunk size (days)
|
||
<span class="optional">(default 30)</span></label>
|
||
<input type="number" class="form-input" id="editKbInitialLoadChunkDays" min="1" placeholder="30">
|
||
</div>
|
||
|
||
<div class="form-group editkb-strategy-not-incremental" style="display:none;">
|
||
<label class="form-label" for="editKbWhereFilters">Where filters
|
||
<span class="optional">(JSON array, optional)</span></label>
|
||
<textarea class="form-textarea" id="editKbWhereFilters" rows="6"
|
||
placeholder='[{"column": "date", "operator": "ge", "values": ["{{last_3_months}}"]}]'></textarea>
|
||
<div class="form-hint">
|
||
Operators: <code>eq, ne, gt, ge, lt, le</code>. Date placeholders
|
||
(<code>{{ '{{today}}' }}</code>, <code>{{ '{{last_3_months}}' }}</code>, etc.) resolved at
|
||
sync time. Not compatible with Incremental.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# Data Packages chip-input — parity with the BQ
|
||
and legacy edit modals. Hydrated on open;
|
||
saveKeboolaTabEdit diffs vs
|
||
`_editKbOriginalPackageIds` on save. #}
|
||
<div class="form-group">
|
||
<label class="form-label">Data Packages <span class="optional">(optional)</span></label>
|
||
<div class="chip-input"
|
||
id="editKbPackagesChips"
|
||
data-source-url="/api/admin/data-packages"
|
||
data-allow-create="true"
|
||
data-name="kb_edit_package_ids"
|
||
data-placeholder="Type to search or create…"
|
||
data-chip-input="data_package"></div>
|
||
<div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeEditKeboolaModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="editKeboolaSubmitBtn"
|
||
onclick="saveKeboolaTabEdit()">Save Changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{# Connector-based listings (Jira read-only hint, internal tables
|
||
section, per-tab Register buttons) lived inside the now-deleted
|
||
tab-content sections. Their content is folded into the
|
||
package-centric layout above: every table — including jira/* and
|
||
internal — appears under a Data Package or in Unpackaged tables.
|
||
|
||
Register modals (registerBqModal / registerKeboolaModal) remain in
|
||
DOM as top-level overlays and are opened from the
|
||
"+ Register new table" dropdown in the action bar. The
|
||
data-source-type marker lives on <body> so DATA_SOURCE_TYPE still
|
||
has somewhere to read from. #}
|
||
|
||
<!-- ═══════════════ EDIT MODAL (legacy fallback — Keboola-only fields
|
||
remaining; the BQ Edit modal moved into #tab-content-bigquery as
|
||
#editBqModal in C2; the Keboola Edit modal is #editKeboolaModal
|
||
in #tab-content-keboola) ═══════════════ -->
|
||
<div class="modal-overlay" id="editModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2>Edit Table</h2>
|
||
<button class="modal-close" onclick="closeEditModal()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label" for="editTableId">Table ID</label>
|
||
<input type="text" class="form-input" id="editTableId" readonly>
|
||
<div class="form-hint">Slugified id, immutable. Source type:
|
||
<strong id="editSourceTypeBadge">—</strong></div>
|
||
</div>
|
||
|
||
<!-- Keboola/Jira fallback fields. The richer Keboola modal
|
||
lives at #editKeboolaModal; this remains the catch-all
|
||
for any source_type that's neither bigquery nor keboola
|
||
(e.g. jira). -->
|
||
<div class="form-group keboola-edit-only">
|
||
<label class="form-label" for="editStrategy">Sync Strategy</label>
|
||
<select class="form-select" id="editStrategy">
|
||
<option value="full_refresh">Full Refresh</option>
|
||
<option value="incremental">Incremental</option>
|
||
<option value="partitioned">Partitioned</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group keboola-edit-only">
|
||
<label class="form-label" for="editPrimaryKey">Primary Key</label>
|
||
<input type="text" class="form-input" id="editPrimaryKey" placeholder="e.g. id">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label" for="editDescription">Description <span class="optional">(optional)</span></label>
|
||
<textarea class="form-textarea" id="editDescription" placeholder="Brief description of the table contents..."></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="editFolder">Folder <span class="optional">(optional)</span></label>
|
||
<input type="text" class="form-input" id="editFolder" placeholder="e.g. crm, finance, marketing">
|
||
<div class="form-hint">Logical grouping for catalog organization (does not affect storage).</div>
|
||
</div>
|
||
|
||
{# Data Packages chip-input — parity with the BigQuery
|
||
edit modal. saveTableEdit() diffs the chip selection
|
||
against the current membership and emits add/remove
|
||
junction calls so admins can manage package membership
|
||
without leaving the edit modal. #}
|
||
<div class="form-group">
|
||
<label class="form-label">Data Packages <span class="optional">(optional)</span></label>
|
||
<div class="chip-input"
|
||
id="editGenericPackagesChips"
|
||
data-source-url="/api/admin/data-packages"
|
||
data-allow-create="true"
|
||
data-name="legacy_package_ids"
|
||
data-placeholder="Type to search or create…"
|
||
data-chip-input="data_package"></div>
|
||
<div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="editSubmitBtn" onclick="saveTableEdit()">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════ TOAST ═══════════════ -->
|
||
<div class="toast" id="toast">
|
||
<div class="toast-icon" id="toastIcon"></div>
|
||
<span id="toastMessage"></span>
|
||
</div>
|
||
|
||
<!-- ═══════════════ FOOTER ═══════════════ -->
|
||
<footer class="footer">
|
||
<a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
|
||
</footer>
|
||
|
||
<!-- ═══════════════ Create Data Package modal (Task 8.10) ═══════════════
|
||
Fired from a chip-input `chip-create` event — the chip-input emits
|
||
a CustomEvent with the typed name; the handler below opens this
|
||
modal pre-filled, POSTs to /api/admin/data-packages, and adds the
|
||
freshly-created chip back into the chip-input host via .addChip(). -->
|
||
<div class="modal-overlay" id="createDataPackageModal" style="display:none;">
|
||
<div class="modal" style="max-width:520px;">
|
||
<div class="modal-header">
|
||
<h2>Create Data Package</h2>
|
||
<button class="modal-close" onclick="closeCreateDataPackageModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label">Name</label>
|
||
<input id="cdp-name" type="text" class="form-input" placeholder="Sales bundle">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Slug</label>
|
||
<input id="cdp-slug" type="text" class="form-input" placeholder="sales-bundle">
|
||
<div class="form-hint">URL-safe identifier; auto-derived from Name.</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Description <span class="optional">(optional)</span></label>
|
||
<textarea id="cdp-desc" class="form-input" rows="2"></textarea>
|
||
</div>
|
||
{# v51 lifecycle + classification — drive the hero filter
|
||
checkboxes on /catalog and the eyebrow line above the
|
||
card title. Both fields are admin-facing only and have
|
||
safe defaults (status=prod, category=null). #}
|
||
<div class="form-group" style="display:flex; gap:12px;">
|
||
<div style="flex:1;">
|
||
<label class="form-label">Status</label>
|
||
<select id="cdp-status" class="form-input" style="height:38px;">
|
||
<option value="prod" selected>Prod — ready for analyst use</option>
|
||
<option value="poc">POC — try-before-you-buy</option>
|
||
<option value="coming-soon">Coming soon — visible but not usable yet</option>
|
||
<option value="draft">Draft — admin-only, hidden from analysts</option>
|
||
</select>
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label class="form-label">Category <span class="optional">(optional)</span></label>
|
||
<input id="cdp-category" type="text" class="form-input"
|
||
placeholder="e.g. Sessions & Traffic">
|
||
<div class="form-hint">Eyebrow line above the card title. Keep it short and consistent.</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="display:flex; gap:12px;">
|
||
<div style="flex:1;">
|
||
<label class="form-label">Icon</label>
|
||
<input id="cdp-icon" type="text" class="form-input" value="📦" maxlength="4">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label class="form-label">Color</label>
|
||
{# v51 palette row — admin clicks a swatch to set #cdp-color.
|
||
Free-form picker stays below as the escape hatch. Palette
|
||
is a vendor-neutral design-system set (teal/blue/violet/
|
||
pink/red/amber/emerald/slate) — no brand colors. #}
|
||
<div class="cf-palette-row" data-target="cdp-color"></div>
|
||
{# type=color forces the native swatch picker so admins can't
|
||
type/append a malformed hex into the field. #}
|
||
<input id="cdp-color" type="color" class="form-input" value="#e0f2fe"
|
||
style="height:32px; padding:2px; cursor:pointer;">
|
||
</div>
|
||
</div>
|
||
{# Cover image upload (v50). When set, the /catalog card renders
|
||
<img src=cover_image_url> instead of letter initials — closes
|
||
the visual gap with /marketplace cards. PNG/JPEG/GIF/WebP, 5
|
||
MiB cap server-side. #}
|
||
<div class="form-group">
|
||
<label class="form-label">Cover image <span class="optional">(optional)</span></label>
|
||
<div style="display:flex; gap:12px; align-items:center;">
|
||
<div id="cdp-cover-preview"
|
||
style="width:120px; height:72px; border-radius:8px;
|
||
border:1px solid var(--border); background:#f1f5f9;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:12px; color:var(--text-secondary); overflow:hidden;">
|
||
No image
|
||
</div>
|
||
<div style="flex:1;">
|
||
<input id="cdp-cover-file" type="file"
|
||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||
onchange="onCoverFilePicked(this, 'cdp')">
|
||
<input id="cdp-cover-url" type="hidden" value="">
|
||
<div class="form-hint">PNG / JPEG / GIF / WebP, max 5 MiB. Uploads on Save.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# Inline RBAC matrix — replaces the modal-on-modal step-2 that
|
||
popped up after Create succeeded. <details> is collapsed by
|
||
default so the modal stays compact for admins who'll set
|
||
access later via the Resource Access page; opening it loads
|
||
the group list lazily. submitCreateDataPackage() reads any
|
||
chosen requirements and POSTs grants in parallel. #}
|
||
<details class="form-group" id="cdp-rbac-details"
|
||
style="border:1px solid var(--border); border-radius:8px; padding:8px 12px;">
|
||
<summary style="cursor:pointer; font-weight:600; font-size:13px; user-select:none;">
|
||
Group access
|
||
<span style="color:var(--text-secondary); font-weight:normal; font-size:12px;">(optional)</span>
|
||
</summary>
|
||
<p class="form-hint" style="margin:8px 0;">
|
||
Grant per-group access tiers — <em>available</em> shows the
|
||
package in the group's Browse; <em>required</em>
|
||
auto-installs it into the group's stack on next pull. Leave
|
||
everything blank to manage access later from
|
||
<a href="/admin/access">Resource access</a>.
|
||
</p>
|
||
<div id="cdp-rbac-rows"
|
||
style="display:flex; flex-direction:column; gap:6px; max-height:30vh; overflow-y:auto;">
|
||
<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">
|
||
Click to load groups…
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeCreateDataPackageModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="cdp-submit-btn" onclick="submitCreateDataPackage()">
|
||
Create & assign
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// ── Cover image upload helpers (v50) ─────────────────────────────
|
||
// Shared between Create / Edit Data Package modals. The `prefix`
|
||
// arg is the modal's id prefix (`cdp` or `edp`); same DOM-id
|
||
// convention `<prefix>-cover-file`, `<prefix>-cover-url`,
|
||
// `<prefix>-cover-preview`. Uploads on file pick (not on Save) so
|
||
// the admin gets an immediate preview + failure-feedback loop;
|
||
// the URL stashed in the hidden input rides along on the eventual
|
||
// Save POST/PUT body.
|
||
async function onCoverFilePicked(input, prefix) {
|
||
const file = input.files && input.files[0];
|
||
if (!file) return;
|
||
const previewEl = document.getElementById(prefix + '-cover-preview');
|
||
const urlEl = document.getElementById(prefix + '-cover-url');
|
||
if (file.size > 5 * 1024 * 1024) {
|
||
alert('Image is too large (max 5 MiB).');
|
||
input.value = '';
|
||
return;
|
||
}
|
||
previewEl.innerHTML = '<span style="font-size:11px;">Uploading…</span>';
|
||
try {
|
||
const fd = new FormData();
|
||
fd.append('file', file);
|
||
const r = await fetch('/api/admin/uploads/cover-image', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
body: fd,
|
||
});
|
||
if (!r.ok) {
|
||
const detail = await r.json().catch(function() { return {}; });
|
||
alert('Upload failed: ' + (detail.detail || r.statusText));
|
||
previewEl.textContent = 'No image';
|
||
input.value = '';
|
||
return;
|
||
}
|
||
const body = await r.json();
|
||
urlEl.value = body.url;
|
||
previewEl.innerHTML = '';
|
||
var img = document.createElement('img');
|
||
img.src = body.url;
|
||
img.alt = '';
|
||
img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
|
||
previewEl.appendChild(img);
|
||
} catch (e) {
|
||
alert('Network error: ' + e.message);
|
||
previewEl.textContent = 'No image';
|
||
input.value = '';
|
||
}
|
||
}
|
||
function clearCoverImage(prefix) {
|
||
// Empty string is the API contract for "remove the existing cover".
|
||
// The Save handler reads the hidden input and ships it as-is.
|
||
document.getElementById(prefix + '-cover-url').value = '';
|
||
document.getElementById(prefix + '-cover-file').value = '';
|
||
var p = document.getElementById(prefix + '-cover-preview');
|
||
p.innerHTML = 'No image';
|
||
p.dataset.cleared = '1';
|
||
}
|
||
function _renderCoverPreview(prefix, url) {
|
||
var p = document.getElementById(prefix + '-cover-preview');
|
||
if (!p) return;
|
||
if (url) {
|
||
p.innerHTML = '';
|
||
var img = document.createElement('img');
|
||
img.src = url;
|
||
img.alt = '';
|
||
img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
|
||
p.appendChild(img);
|
||
} else {
|
||
p.innerHTML = 'No image';
|
||
}
|
||
}
|
||
|
||
// Track which chip-input host triggered the create flow so we can
|
||
// append the new chip back into it on success.
|
||
let _cdpHost = null;
|
||
|
||
function openCreateDataPackageModal(typed, host) {
|
||
_cdpHost = host;
|
||
document.getElementById('cdp-name').value = typed || '';
|
||
document.getElementById('cdp-slug').value =
|
||
(typed || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
|
||
document.getElementById('cdp-desc').value = '';
|
||
document.getElementById('cdp-icon').value = '📦';
|
||
document.getElementById('cdp-color').value = '#e0f2fe';
|
||
// Reset cover image inputs on every open so a previous typed-and-
|
||
// cancelled value doesn't leak into the new package.
|
||
var coverUrl = document.getElementById('cdp-cover-url');
|
||
var coverFile = document.getElementById('cdp-cover-file');
|
||
if (coverUrl) coverUrl.value = '';
|
||
if (coverFile) coverFile.value = '';
|
||
_renderCoverPreview('cdp', '');
|
||
document.getElementById('createDataPackageModal').style.display = 'flex';
|
||
}
|
||
function closeCreateDataPackageModal() {
|
||
_cdpHost = null;
|
||
// Re-collapse + invalidate the lazy-loaded RBAC matrix so the
|
||
// next "+ New Data Package" starts with a clean, unloaded state.
|
||
const det = document.getElementById('cdp-rbac-details');
|
||
if (det) det.open = false;
|
||
_cdpRbacLoaded = false;
|
||
document.getElementById('createDataPackageModal').style.display = 'none';
|
||
}
|
||
|
||
// ── Edit Data Package modal ──────────────────────────────────────
|
||
// Opened from the Edit button on each /admin/tables package card.
|
||
// Loads pkg metadata + member tables; lets admin rename / change
|
||
// description / icon / color / delete; remove member tables inline.
|
||
async function openEditDataPackageModal(pkgId) {
|
||
document.getElementById('editDataPackageModal').style.display = 'flex';
|
||
document.getElementById('edp-id').value = pkgId;
|
||
document.getElementById('edp-tables-list').innerHTML =
|
||
'<div style="padding:12px; color:#5f6368;">Loading…</div>';
|
||
try {
|
||
const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
|
||
{ credentials: 'same-origin' });
|
||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||
const pkg = await r.json();
|
||
document.getElementById('edp-name').value = pkg.name || '';
|
||
document.getElementById('edp-slug').value = pkg.slug || '';
|
||
document.getElementById('edp-desc').value = pkg.description || '';
|
||
document.getElementById('edp-icon').value = pkg.icon || '';
|
||
document.getElementById('edp-color').value = pkg.color || '#e0f2fe';
|
||
// v51: pre-fill status + category from the loaded package.
|
||
document.getElementById('edp-status').value = pkg.status || 'prod';
|
||
document.getElementById('edp-category').value = pkg.category || '';
|
||
// v50: hydrate cover image (URL + preview); clear the file
|
||
// input so a previous typed-and-cancelled file doesn't leak.
|
||
var coverUrl = document.getElementById('edp-cover-url');
|
||
var coverFile = document.getElementById('edp-cover-file');
|
||
var coverPreview = document.getElementById('edp-cover-preview');
|
||
if (coverPreview) delete coverPreview.dataset.cleared;
|
||
if (coverFile) coverFile.value = '';
|
||
if (coverUrl) coverUrl.value = pkg.cover_image_url || '';
|
||
_renderCoverPreview('edp', pkg.cover_image_url || '');
|
||
renderEdpTablesList(pkg.tables || []);
|
||
// Reset inline-add panel state (hidden + empty list) so it
|
||
// starts clean each open.
|
||
var addPanel = document.getElementById('edp-inline-add');
|
||
if (addPanel) addPanel.style.display = 'none';
|
||
} catch (e) {
|
||
alert('Failed to load package: ' + e.message);
|
||
closeEditDataPackageModal();
|
||
}
|
||
}
|
||
function closeEditDataPackageModal() {
|
||
// Reset the RBAC matrix the same way Create does — collapse the
|
||
// <details>, invalidate the loaded flag so the next open
|
||
// re-fetches against the (possibly different) package's grants.
|
||
const det = document.getElementById('edp-rbac-details');
|
||
if (det) det.open = false;
|
||
_edpRbacLoaded = false;
|
||
_edpRbacOriginal = {};
|
||
document.getElementById('editDataPackageModal').style.display = 'none';
|
||
}
|
||
|
||
// ── Edit DP RBAC matrix — lazy hydrate + diff-on-save ──────────
|
||
// Mirrors the Create flow's _cdpHydrate / _submit helpers but
|
||
// pre-fills the per-group dropdowns from existing grants so the
|
||
// matrix shows reality, not a blank slate. _edpRbacOriginal keeps
|
||
// a {groupId: requirement|""} snapshot taken at load time so the
|
||
// save handler can diff and only emit the minimum POST/DELETE.
|
||
let _edpRbacLoaded = false;
|
||
let _edpRbacOriginal = {};
|
||
async function _edpHydrateRbacMatrix() {
|
||
if (_edpRbacLoaded) return;
|
||
const pkgId = document.getElementById('edp-id').value;
|
||
const rowsEl = document.getElementById('edp-rbac-rows');
|
||
rowsEl.innerHTML = '<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">Loading groups + grants…</div>';
|
||
try {
|
||
const [gResp, grResp] = await Promise.all([
|
||
fetch('/api/admin/groups', { credentials: 'same-origin' }),
|
||
fetch('/api/admin/grants?resource_type=data_package',
|
||
{ credentials: 'same-origin' }),
|
||
]);
|
||
if (!gResp.ok) throw new Error('groups HTTP ' + gResp.status);
|
||
if (!grResp.ok) throw new Error('grants HTTP ' + grResp.status);
|
||
const gBody = await gResp.json();
|
||
const groups = Array.isArray(gBody) ? gBody : (gBody.groups || []);
|
||
const grants = await grResp.json();
|
||
// Build group_id → requirement map for THIS package only.
|
||
// Multiple grants per (group, resource) shouldn't happen (UNIQUE
|
||
// constraint on the table) but be defensive — last write wins.
|
||
const current = {};
|
||
(grants || []).forEach(g => {
|
||
if (g.resource_id !== pkgId) return;
|
||
current[g.group_id] = g.requirement;
|
||
});
|
||
_edpRbacOriginal = Object.assign({}, current);
|
||
|
||
if (!groups.length) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">No groups defined yet. Create groups in <a href="/admin/access">Resource access</a> first.</div>';
|
||
return;
|
||
}
|
||
rowsEl.innerHTML = groups.map(g => {
|
||
const gid = String(g.id || g.name || '');
|
||
const gname = String(g.name || gid);
|
||
const cur = current[gid] || '';
|
||
const opt = (v, label) =>
|
||
'<option value="' + v + '"' + (cur === v ? ' selected' : '') + '>' + label + '</option>';
|
||
return (
|
||
'<div data-group-id="' + gid + '" '
|
||
+ 'style="display:flex; gap:8px; align-items:center; '
|
||
+ 'padding:6px; border:1px solid var(--border); border-radius:6px;">'
|
||
+ '<span style="flex:1;">' + gname + '</span>'
|
||
+ '<select class="edp-rbac-req" style="padding:4px; border:1px solid var(--border); border-radius:4px;">'
|
||
+ opt('', '(no grant)')
|
||
+ opt('available', 'available')
|
||
+ opt('required', 'required')
|
||
+ '</select>'
|
||
+ '</div>'
|
||
);
|
||
}).join('');
|
||
_edpRbacLoaded = true;
|
||
} catch (e) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:12px;">Failed to load: ' + e.message + '</div>';
|
||
}
|
||
}
|
||
document.addEventListener('toggle', (e) => {
|
||
if (e.target && e.target.id === 'edp-rbac-details' && e.target.open) {
|
||
_edpHydrateRbacMatrix();
|
||
}
|
||
}, true);
|
||
|
||
// Diff current dropdown state vs _edpRbacOriginal; emit grant
|
||
// POST / DELETE calls in parallel. Returns failure count so the
|
||
// save handler can surface it in the toast.
|
||
async function _edpDiffApplyGrants(pkgId) {
|
||
// No-op when the admin never opened the <details>; original
|
||
// snapshot is empty and dropdowns aren't in the DOM.
|
||
if (!_edpRbacLoaded) return 0;
|
||
const rows = document.querySelectorAll('#edp-rbac-rows [data-group-id]');
|
||
const calls = [];
|
||
// Track which group_ids the admin touched so deletes target the
|
||
// right grant_id. For DELETE we need to look up the grant by
|
||
// (group_id, resource_id, resource_type) — fetch fresh list to
|
||
// get ids. Cheaper to re-fetch once than store ids client-side.
|
||
const wantDelete = []; // [group_id]
|
||
const wantWrite = []; // [{group_id, requirement}]
|
||
rows.forEach(row => {
|
||
const gid = row.getAttribute('data-group-id');
|
||
const sel = row.querySelector('.edp-rbac-req');
|
||
const cur = (sel && sel.value) || '';
|
||
const orig = _edpRbacOriginal[gid] || '';
|
||
if (cur === orig) return;
|
||
if (!cur) {
|
||
// Cleared — DELETE the existing grant.
|
||
wantDelete.push(gid);
|
||
} else {
|
||
// New or changed requirement — DELETE-then-POST (resource_
|
||
// grants UNIQUE constraint forbids two rows on the same
|
||
// (group, resource, type) so we can't just upsert).
|
||
if (orig) wantDelete.push(gid);
|
||
wantWrite.push({ group_id: gid, requirement: cur });
|
||
}
|
||
});
|
||
|
||
if (!wantDelete.length && !wantWrite.length) return 0;
|
||
|
||
// Resolve grant_ids for deletes via a fresh list. /admin/grants
|
||
// doesn't take resource_id as a query filter so we fetch all
|
||
// data_package grants and filter client-side; the set is small
|
||
// enough for any realistic instance.
|
||
let grantIdByGroup = {};
|
||
if (wantDelete.length) {
|
||
const lr = await fetch('/api/admin/grants?resource_type=data_package',
|
||
{ credentials: 'same-origin' });
|
||
if (lr.ok) {
|
||
const arr = await lr.json();
|
||
arr.forEach(g => {
|
||
if (g.resource_id !== pkgId) return;
|
||
grantIdByGroup[g.group_id] = g.id;
|
||
});
|
||
}
|
||
}
|
||
// Sequential DELETE → POST. ``resource_grants`` has a UNIQUE
|
||
// constraint on (group_id, resource_type, resource_id); running
|
||
// both in parallel via ``Promise.allSettled`` raced — if the
|
||
// POST landed first, the unique check rejected it and the old
|
||
// ``available`` row stayed. Awaiting all DELETEs before any
|
||
// POST fires keeps the (group, resource) slot empty for the
|
||
// re-insert.
|
||
const deleteResults = await Promise.allSettled(
|
||
wantDelete
|
||
.map(gid => grantIdByGroup[gid])
|
||
.filter(Boolean)
|
||
.map(gid => fetch('/api/admin/grants/' + encodeURIComponent(gid),
|
||
{ method: 'DELETE', credentials: 'same-origin' }))
|
||
);
|
||
const writeResults = await Promise.allSettled(
|
||
wantWrite.map(w => fetch('/api/admin/grants', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify({
|
||
group_id: w.group_id,
|
||
resource_type: 'data_package',
|
||
resource_id: pkgId,
|
||
requirement: w.requirement,
|
||
}),
|
||
}))
|
||
);
|
||
const results = deleteResults.concat(writeResults);
|
||
return results.filter(
|
||
r => r.status === 'rejected' || (r.value && !r.value.ok)
|
||
).length;
|
||
}
|
||
function renderEdpTablesList(tables) {
|
||
const el = document.getElementById('edp-tables-list');
|
||
if (!tables.length) {
|
||
el.innerHTML = '<div style="padding:12px; color:#5f6368; font-size:13px;">'
|
||
+ 'No tables in this package yet. Click <strong>+ Add tables</strong> above.</div>';
|
||
return;
|
||
}
|
||
el.innerHTML = tables.map(function(t) {
|
||
const id = String(t.id || '');
|
||
const name = String(t.name || id);
|
||
return ''
|
||
+ '<div style="display:flex; align-items:center; justify-content:space-between; '
|
||
+ 'padding:8px 12px; border-bottom:1px solid var(--border-light, #f0f0f0);">'
|
||
+ ' <span style="font-size:13px; color:#202124;">' + escapeHtml(name) + '</span>'
|
||
+ ' <button class="btn" type="button" style="padding:3px 10px; font-size:11px; color:#b91c1c;" '
|
||
+ 'onclick="removeTableFromPackage(\'' + escapeHtmlAttr(id) + '\')">Remove</button>'
|
||
+ '</div>';
|
||
}).join('');
|
||
}
|
||
async function removeTableFromPackage(tableId) {
|
||
const pkgId = document.getElementById('edp-id').value;
|
||
if (!confirm('Remove this table from the package?')) return;
|
||
const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId)
|
||
+ '/tables/' + encodeURIComponent(tableId),
|
||
{ method: 'DELETE', credentials: 'same-origin' });
|
||
if (!r.ok) { alert('Remove failed: HTTP ' + r.status); return; }
|
||
// Refresh the table list inline.
|
||
const r2 = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
|
||
{ credentials: 'same-origin' });
|
||
if (r2.ok) renderEdpTablesList((await r2.json()).tables || []);
|
||
}
|
||
async function submitEditDataPackage() {
|
||
const btn = document.getElementById('edp-save-btn');
|
||
btn.disabled = true;
|
||
try {
|
||
const pkgId = document.getElementById('edp-id').value;
|
||
// v50 cover image semantics:
|
||
// - cleared via Remove button → preview has dataset.cleared, send ""
|
||
// - new image uploaded → hidden input has the new URL
|
||
// - left unchanged → hidden input still holds the
|
||
// previous URL, send it unchanged
|
||
// (no-op on the server because the
|
||
// value matches)
|
||
var coverPreview = document.getElementById('edp-cover-preview');
|
||
var coverUrl = document.getElementById('edp-cover-url').value;
|
||
var coverField = (coverPreview && coverPreview.dataset.cleared === '1')
|
||
? '' : (coverUrl || null);
|
||
const payload = {
|
||
name: document.getElementById('edp-name').value.trim(),
|
||
description: document.getElementById('edp-desc').value.trim() || null,
|
||
icon: document.getElementById('edp-icon').value.trim() || null,
|
||
color: document.getElementById('edp-color').value.trim() || null,
|
||
cover_image_url: coverField,
|
||
// v51: pass status + category through. Empty-string category
|
||
// hits the clear_category branch server-side; status uses the
|
||
// dropdown's current value (never blank).
|
||
status: document.getElementById('edp-status').value || 'prod',
|
||
category: document.getElementById('edp-category').value.trim(),
|
||
};
|
||
const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId), {
|
||
method: 'PUT',
|
||
credentials: 'same-origin',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
});
|
||
if (!r.ok) {
|
||
const detail = await r.json().catch(function() { return {}; });
|
||
alert('Save failed: ' + (detail.detail || r.statusText));
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
// Apply any RBAC matrix changes — diff vs snapshot taken at
|
||
// load time, emits only the minimum POST/DELETE pair per
|
||
// changed row. No-op when admin never opened the <details>.
|
||
const rbacFails = await _edpDiffApplyGrants(pkgId);
|
||
if (rbacFails > 0) {
|
||
if (typeof showToast === 'function') {
|
||
showToast(rbacFails + ' group access change(s) failed', 'error');
|
||
} else {
|
||
alert(rbacFails + ' group access change(s) failed.');
|
||
}
|
||
}
|
||
closeEditDataPackageModal();
|
||
if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
|
||
} catch (e) {
|
||
alert('Network error: ' + e.message);
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
// ── Inline +Add-tables picker (v50) ─────────────────────────────
|
||
// User feedback: the legacy "+ Add tables" button closed Edit and
|
||
// opened Bulk Assign, losing the admin's mental context. The
|
||
// picker below stays inline: pulls /api/admin/registry, filters
|
||
// out tables already in this package + internal rows, lets the
|
||
// admin tick what they want, then POSTs each to the package
|
||
// without closing the modal.
|
||
let _edpInlineAddTables = [];
|
||
function toggleEdpInlineAdd() {
|
||
var panel = document.getElementById('edp-inline-add');
|
||
if (!panel) return;
|
||
if (panel.style.display === 'block') {
|
||
panel.style.display = 'none';
|
||
return;
|
||
}
|
||
panel.style.display = 'block';
|
||
loadEdpInlineAddTables();
|
||
}
|
||
async function loadEdpInlineAddTables() {
|
||
var listEl = document.getElementById('edp-inline-add-list');
|
||
var pkgId = document.getElementById('edp-id').value;
|
||
listEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">'
|
||
+ 'Loading unassigned tables…</div>';
|
||
try {
|
||
// Pull all tables and the current package member set in parallel.
|
||
var [allResp, pkgResp] = await Promise.all([
|
||
fetch('/api/admin/registry', { credentials: 'same-origin' }),
|
||
fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
|
||
{ credentials: 'same-origin' }),
|
||
]);
|
||
if (!allResp.ok || !pkgResp.ok) {
|
||
listEl.innerHTML = '<div style="padding:8px; color:#b91c1c;">'
|
||
+ 'Failed to load tables (' + allResp.status + ' / ' + pkgResp.status + ').</div>';
|
||
return;
|
||
}
|
||
var allBody = await allResp.json();
|
||
var allTables = Array.isArray(allBody)
|
||
? allBody
|
||
: (Array.isArray(allBody.tables) ? allBody.tables : []);
|
||
var pkg = await pkgResp.json();
|
||
var memberIds = new Set((pkg.tables || []).map(function(t) { return t.id; }));
|
||
// Show only non-internal tables that aren't already in the package.
|
||
_edpInlineAddTables = allTables.filter(function(t) {
|
||
return (t.source_type || '') !== 'internal' && !memberIds.has(t.id);
|
||
});
|
||
renderEdpInlineAddList();
|
||
} catch (e) {
|
||
listEl.innerHTML = '<div style="padding:8px; color:#b91c1c;">'
|
||
+ 'Network error: ' + escapeHtml(e.message) + '</div>';
|
||
}
|
||
}
|
||
function renderEdpInlineAddList() {
|
||
var listEl = document.getElementById('edp-inline-add-list');
|
||
if (!_edpInlineAddTables.length) {
|
||
listEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">'
|
||
+ 'All non-internal tables are already in this package.</div>';
|
||
return;
|
||
}
|
||
listEl.innerHTML = _edpInlineAddTables.map(function(t) {
|
||
var id = String(t.id || '');
|
||
var name = String(t.name || id);
|
||
var st = String(t.source_type || '');
|
||
var bucket = String(t.bucket || '');
|
||
var meta = [st, bucket].filter(Boolean).join(' · ');
|
||
return ''
|
||
+ '<label data-edp-add-id="' + escapeHtmlAttr(id) + '" '
|
||
+ ' data-edp-add-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
|
||
+ ' style="display:flex; gap:8px; align-items:center; padding:4px 6px; '
|
||
+ 'border-radius:4px; cursor:pointer; font-size:13px;">'
|
||
+ ' <input type="checkbox" class="edp-add-cb" value="' + escapeHtmlAttr(id) + '">'
|
||
+ ' <span style="flex:1; font-family:var(--font-mono);">' + escapeHtml(name) + '</span>'
|
||
+ (meta ? ' <span style="font-size:11px; color:var(--text-secondary);">'
|
||
+ escapeHtml(meta) + '</span>' : '')
|
||
+ '</label>';
|
||
}).join('');
|
||
}
|
||
function filterEdpInlineAdd() {
|
||
var q = (document.getElementById('edp-inline-add-search').value || '').toLowerCase();
|
||
document.querySelectorAll('#edp-inline-add-list label[data-edp-add-id]').forEach(function(row) {
|
||
var name = row.getAttribute('data-edp-add-name') || '';
|
||
row.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';
|
||
});
|
||
}
|
||
async function submitEdpInlineAdd() {
|
||
var pkgId = document.getElementById('edp-id').value;
|
||
var btn = document.getElementById('edp-inline-add-submit-btn');
|
||
var selected = Array.from(document.querySelectorAll('.edp-add-cb:checked'))
|
||
.map(function(cb) { return cb.value; });
|
||
if (!selected.length) {
|
||
alert('Pick at least one table to add.');
|
||
return;
|
||
}
|
||
btn.disabled = true;
|
||
try {
|
||
// POST each table_id; idempotent on the server so retrying after
|
||
// partial failure is safe. Parallel — the user-visible latency
|
||
// is the slowest individual call, not the sum.
|
||
var calls = selected.map(function(tid) {
|
||
return fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/tables', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ table_id: tid }),
|
||
}).then(function(r) { return { tid: tid, ok: r.ok, status: r.status }; });
|
||
});
|
||
var results = await Promise.all(calls);
|
||
var fails = results.filter(function(r) { return !r.ok; });
|
||
if (fails.length) {
|
||
alert(fails.length + ' of ' + results.length + ' add(s) failed.');
|
||
}
|
||
// Refresh the package's table list inline (no modal close).
|
||
var r2 = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
|
||
{ credentials: 'same-origin' });
|
||
if (r2.ok) renderEdpTablesList((await r2.json()).tables || []);
|
||
// Reload the inline-add candidate list so the just-added rows
|
||
// disappear (member set has changed).
|
||
await loadEdpInlineAddTables();
|
||
// Background-refresh the top-level Data Packages section so
|
||
// the new table counts show up after the user closes the modal.
|
||
if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
|
||
} catch (e) {
|
||
alert('Network error: ' + e.message);
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
async function deleteEditDataPackage() {
|
||
const pkgId = document.getElementById('edp-id').value;
|
||
const name = document.getElementById('edp-name').value.trim();
|
||
// v54: soft delete with Undo toast. confirm() removed — the
|
||
// 10s Undo on the toast is the recovery affordance; double
|
||
// safety (confirm + undo) is friction without payoff. Junction
|
||
// rows (data_package_tables) + resource_grants survive intact
|
||
// so restore brings the package back whole.
|
||
const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
|
||
{ method: 'DELETE', credentials: 'same-origin' });
|
||
if (!r.ok) { alert('Delete failed: HTTP ' + r.status); return; }
|
||
closeEditDataPackageModal();
|
||
if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
|
||
if (typeof window.showUndoToast === 'function') {
|
||
window.showUndoToast(
|
||
'Data Package "' + name + '" deleted.',
|
||
'/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/restore',
|
||
() => {
|
||
if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
|
||
},
|
||
);
|
||
}
|
||
}
|
||
// Auto-derive a url-safe slug from a Name string. Mirrors the
|
||
// server-side normalisation used by the seed step in _v48_to_v49.
|
||
function _deriveSlug(name) {
|
||
return (name || '').toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, '-')
|
||
.replace(/^-|-$/g, '');
|
||
}
|
||
async function submitCreateDataPackage() {
|
||
const btn = document.getElementById('cdp-submit-btn');
|
||
btn.disabled = true;
|
||
try {
|
||
const nameVal = document.getElementById('cdp-name').value.trim();
|
||
// Auto-derive slug from name when the slug field is blank —
|
||
// fixes the silent-fail-on-empty-slug bug where the form just
|
||
// stayed open with no error if the user typed Name and clicked
|
||
// Create without focusing-out of the Name input.
|
||
let slugVal = document.getElementById('cdp-slug').value.trim();
|
||
if (!slugVal && nameVal) {
|
||
slugVal = _deriveSlug(nameVal);
|
||
document.getElementById('cdp-slug').value = slugVal;
|
||
}
|
||
// v50: cover_image_url is set by onCoverFilePicked() when the
|
||
// admin selects + uploads a file. If they didn't, it stays
|
||
// empty — send null so the server doesn't see "".
|
||
var cdpCoverUrl = document.getElementById('cdp-cover-url').value;
|
||
const payload = {
|
||
name: nameVal,
|
||
slug: slugVal,
|
||
description: document.getElementById('cdp-desc').value.trim() || null,
|
||
icon: document.getElementById('cdp-icon').value.trim() || null,
|
||
color: document.getElementById('cdp-color').value.trim() || null,
|
||
cover_image_url: cdpCoverUrl || null,
|
||
// v51: lifecycle status + classification category.
|
||
status: document.getElementById('cdp-status').value || 'prod',
|
||
category: document.getElementById('cdp-category').value.trim() || null,
|
||
};
|
||
if (!payload.name || !payload.slug) {
|
||
alert('Name is required (slug auto-derives from it).');
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
const r = await fetch('/api/admin/data-packages', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(payload),
|
||
});
|
||
if (!r.ok) {
|
||
const detail = await r.json().catch(() => ({}));
|
||
alert('Failed: ' + (detail.detail || r.statusText));
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
const body = await r.json();
|
||
const newPkgId = body.id;
|
||
if (_cdpHost && _cdpHost.addChip) {
|
||
_cdpHost.addChip({ id: newPkgId, name: payload.name });
|
||
}
|
||
|
||
// Inline grants — read any per-group requirement the admin set
|
||
// in the collapsible "Group access" section and POST in parallel.
|
||
// Per-grant failures surface in the success toast; they don't
|
||
// roll back the package creation (admin can retry from
|
||
// /admin/access).
|
||
const grantFailures = await _submitCdpGrantsInline(newPkgId);
|
||
|
||
closeCreateDataPackageModal();
|
||
|
||
if (typeof loadDataPackagesSection === 'function') {
|
||
try { loadDataPackagesSection(); } catch (_) {}
|
||
}
|
||
if (typeof showToast === 'function') {
|
||
const baseMsg = 'Data Package "' + payload.name + '" created';
|
||
if (grantFailures > 0) {
|
||
showToast(baseMsg + ' — ' + grantFailures + ' grant(s) failed', 'error');
|
||
} else {
|
||
showToast(baseMsg, 'success');
|
||
}
|
||
}
|
||
} catch (e) {
|
||
alert('Network error: ' + e.message);
|
||
btn.disabled = false;
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// Lazy-load groups into the inline RBAC matrix the first time the
|
||
// <details> is opened. Subsequent opens are no-ops. Groups are
|
||
// small + admin-only data — cache for the lifetime of the modal.
|
||
let _cdpRbacLoaded = false;
|
||
async function _cdpHydrateRbacMatrix() {
|
||
if (_cdpRbacLoaded) return;
|
||
const rowsEl = document.getElementById('cdp-rbac-rows');
|
||
rowsEl.innerHTML = '<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">Loading groups…</div>';
|
||
try {
|
||
const r = await fetch('/api/admin/groups', { credentials: 'same-origin' });
|
||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||
const body = await r.json();
|
||
const groups = Array.isArray(body) ? body : (body.groups || []);
|
||
if (!groups.length) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">No groups defined yet. Create groups in <a href="/admin/access">Resource access</a> first.</div>';
|
||
return;
|
||
}
|
||
rowsEl.innerHTML = groups.map(g => {
|
||
const gid = String(g.id || g.name || '');
|
||
const gname = String(g.name || gid);
|
||
return (
|
||
'<div data-group-id="' + gid + '" '
|
||
+ 'style="display:flex; gap:8px; align-items:center; '
|
||
+ 'padding:6px; border:1px solid var(--border); border-radius:6px;">'
|
||
+ '<span style="flex:1;">' + gname + '</span>'
|
||
+ '<select class="cdp-rbac-req" style="padding:4px; border:1px solid var(--border); border-radius:4px;">'
|
||
+ '<option value="">(no grant)</option>'
|
||
+ '<option value="available">available</option>'
|
||
+ '<option value="required">required</option>'
|
||
+ '</select>'
|
||
+ '</div>'
|
||
);
|
||
}).join('');
|
||
_cdpRbacLoaded = true;
|
||
} catch (e) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:12px;">Failed to load groups: ' + e.message + '</div>';
|
||
}
|
||
}
|
||
// Wire the lazy load on first <details> open. Re-fetched if the
|
||
// admin re-opens a fresh modal (closeCreateDataPackageModal resets
|
||
// the flag).
|
||
document.addEventListener('toggle', (e) => {
|
||
if (e.target && e.target.id === 'cdp-rbac-details' && e.target.open) {
|
||
_cdpHydrateRbacMatrix();
|
||
}
|
||
}, true);
|
||
|
||
async function _submitCdpGrantsInline(pkgId) {
|
||
const rows = document.querySelectorAll('#cdp-rbac-rows [data-group-id]');
|
||
const calls = [];
|
||
rows.forEach(row => {
|
||
const gid = row.getAttribute('data-group-id');
|
||
const sel = row.querySelector('.cdp-rbac-req');
|
||
const req = sel && sel.value;
|
||
if (!req) return;
|
||
calls.push(fetch('/api/admin/grants', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify({
|
||
group_id: gid,
|
||
resource_type: 'data_package',
|
||
resource_id: pkgId,
|
||
requirement: req,
|
||
}),
|
||
}));
|
||
});
|
||
if (!calls.length) return 0;
|
||
const results = await Promise.allSettled(calls);
|
||
return results.filter(
|
||
r => r.status === 'rejected' || (r.value && !r.value.ok)
|
||
).length;
|
||
}
|
||
|
||
// ── (removed) Step-2 RBAC modal-on-modal — folded into the
|
||
// create modal's collapsible "Group access" section. Stubs kept
|
||
// for callers that may still reference these names; they're no-ops
|
||
// now. Safe to delete in a follow-up once the audit confirms no
|
||
// other call sites. ──
|
||
let _cdpNewId = null;
|
||
let _cdpNewName = null;
|
||
|
||
function openCreateDataPackageRbacModal() { /* deprecated — inlined */ }
|
||
function skipCreateDataPackageRbac() {
|
||
if (typeof loadDataPackagesSection === 'function') {
|
||
loadDataPackagesSection();
|
||
}
|
||
}
|
||
function submitCreateDataPackageRbac() { /* deprecated — inlined */ }
|
||
|
||
// Hook: chip-input on this page fires `chip-create` when the user
|
||
// selects the "+ Create new" tail row in the dropdown.
|
||
document.addEventListener('chip-create', (e) => {
|
||
const host = e.detail && e.detail.host;
|
||
if (host && host.dataset.chipInput === 'data_package') {
|
||
openCreateDataPackageModal(e.detail.typed, host);
|
||
}
|
||
});
|
||
|
||
// ── Bulk-assign tables → package ─────────────────────────
|
||
// Single round-trip per table on submit (the existing
|
||
// POST /api/admin/data-packages/{id}/tables endpoint takes one
|
||
// table_id per call) but parallel via Promise.allSettled so the
|
||
// user-visible latency is the slowest individual call rather
|
||
// than the sum. Idempotent on the server, so re-submitting after
|
||
// a partial failure only retries the ones that didn't land.
|
||
let _bulkAssignPackages = []; // [{id, name, member_table_ids:Set}]
|
||
let _bulkAssignTables = []; // [{id, name, source_type, bucket}]
|
||
|
||
/* One-click factory: read table_registry → group by `bucket` →
|
||
create one Data Package per distinct bucket (skipping any whose
|
||
slug already exists) → bulk-assign its tables. Answers the
|
||
"why do I have to package by hand what's already grouped?"
|
||
friction for admins with many registered tables.
|
||
|
||
Sequential rather than parallel because the assign-table POSTs
|
||
depend on the package_id from the create POST. ~100ms per
|
||
bucket which is fine for the handful most instances have. */
|
||
// Bucket plan (loaded once when the preview modal opens; consumed
|
||
// by submitGroupByBucket). { bucket, slug, tables[], slugExists }
|
||
var _gbbPlan = [];
|
||
|
||
function closeGroupByBucketModal() {
|
||
document.getElementById('groupByBucketPreviewModal').style.display = 'none';
|
||
}
|
||
|
||
function _gbbSlugify(s) {
|
||
return (s || '').toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, '-')
|
||
.replace(/^-|-$/g, '');
|
||
}
|
||
|
||
async function groupTablesByBucket() {
|
||
// Build the plan + render the preview modal. Replaces the old
|
||
// confirm() that just said "yes/no to ALL buckets" — admins now
|
||
// see which buckets would become packages, the row count per
|
||
// bucket, the resulting slug, and which ones would be skipped
|
||
// because a package with that slug already exists.
|
||
const rowsEl = document.getElementById('gbb-rows');
|
||
rowsEl.innerHTML = '<div class="loading" style="padding:8px; color:var(--text-secondary); font-size:13px;">Loading buckets…</div>';
|
||
document.getElementById('groupByBucketPreviewModal').style.display = 'flex';
|
||
|
||
try {
|
||
const [tableResp, pkgResp] = await Promise.all([
|
||
fetch('/api/admin/registry', { credentials: 'same-origin' }),
|
||
fetch('/api/admin/data-packages', { credentials: 'same-origin' }),
|
||
]);
|
||
if (!tableResp.ok || !pkgResp.ok) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:13px;">Failed to load tables or packages.</div>';
|
||
return;
|
||
}
|
||
const tables = await tableResp.json();
|
||
const existingPackages = await pkgResp.json();
|
||
const tableList = Array.isArray(tables) ? tables : (tables.items || tables.tables || []);
|
||
const existingSlugs = new Set((existingPackages || []).map(p => p.slug));
|
||
|
||
const buckets = {};
|
||
for (const t of tableList) {
|
||
const b = (t.bucket || '').trim();
|
||
if (!b || b.startsWith('agnes_')) continue;
|
||
buckets[b] = buckets[b] || [];
|
||
buckets[b].push(t);
|
||
}
|
||
const bucketNames = Object.keys(buckets).sort();
|
||
if (!bucketNames.length) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:13px;">No buckets to group. Register some tables first.</div>';
|
||
return;
|
||
}
|
||
|
||
_gbbPlan = bucketNames.map(function (bucket) {
|
||
const slug = _gbbSlugify(bucket);
|
||
return {
|
||
bucket: bucket,
|
||
slug: slug,
|
||
tables: buckets[bucket],
|
||
slugExists: existingSlugs.has(slug),
|
||
};
|
||
});
|
||
|
||
rowsEl.innerHTML = _gbbPlan.map(function (p, i) {
|
||
const disabled = p.slugExists;
|
||
const note = disabled
|
||
? '<span style="color:var(--warning); font-size:11px; margin-left:6px;">(slug exists — will skip)</span>'
|
||
: '';
|
||
return ''
|
||
+ '<label style="display:flex; align-items:center; gap:10px; padding:6px 8px; '
|
||
+ 'border:1px solid var(--border); border-radius:6px; '
|
||
+ 'background:' + (disabled ? 'var(--background)' : 'var(--surface)') + ';">'
|
||
+ ' <input type="checkbox" class="gbb-row" data-idx="' + i + '" '
|
||
+ (disabled ? 'disabled' : 'checked') + '>'
|
||
+ ' <span style="flex:1; font-weight:600; font-size:13px;">'
|
||
+ escapeHtml(p.bucket)
|
||
+ ' <code style="font-weight:normal; font-size:11px; color:var(--text-secondary); margin-left:6px;">' + escapeHtml(p.slug) + '</code>'
|
||
+ note
|
||
+ ' </span>'
|
||
+ ' <span style="color:var(--text-secondary); font-size:12px;">'
|
||
+ p.tables.length + ' table' + (p.tables.length === 1 ? '' : 's')
|
||
+ ' </span>'
|
||
+ '</label>';
|
||
}).join('');
|
||
} catch (e) {
|
||
rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:13px;">Failed: ' + escapeHtml(e.message) + '</div>';
|
||
}
|
||
}
|
||
|
||
async function submitGroupByBucket() {
|
||
const btn = document.getElementById('gbb-submit-btn');
|
||
const checks = document.querySelectorAll('#gbb-rows input.gbb-row:checked');
|
||
if (!checks.length) {
|
||
showToast('No buckets selected.', 'error');
|
||
return;
|
||
}
|
||
btn.disabled = true;
|
||
const picks = Array.from(checks).map(function (el) {
|
||
return _gbbPlan[parseInt(el.dataset.idx, 10)];
|
||
}).filter(Boolean);
|
||
|
||
const created = [], failed = [];
|
||
for (const p of picks) {
|
||
const cResp = await fetch('/api/admin/data-packages', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: p.bucket,
|
||
slug: p.slug,
|
||
description: 'Auto-grouped from bucket `' + p.bucket + '` — ' + p.tables.length + ' tables.',
|
||
icon: null,
|
||
color: '#e0f2fe',
|
||
}),
|
||
});
|
||
if (!cResp.ok) { failed.push(p.bucket); continue; }
|
||
const pkg = await cResp.json();
|
||
await Promise.all(p.tables.map(function (t) {
|
||
return fetch('/api/admin/data-packages/' + encodeURIComponent(pkg.id) + '/tables', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ table_id: t.id }),
|
||
}).catch(function () { /* swallowed; count via created total */ });
|
||
}));
|
||
created.push(p.bucket);
|
||
}
|
||
|
||
btn.disabled = false;
|
||
closeGroupByBucketModal();
|
||
if (failed.length) {
|
||
showToast('Created ' + created.length + ', failed ' + failed.length + ': ' + failed.join(', '), 'error');
|
||
} else {
|
||
showToast('Created ' + created.length + ' package' + (created.length === 1 ? '' : 's'), 'success');
|
||
}
|
||
if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
|
||
}
|
||
|
||
async function openBulkAssignModal(preselectPkgId) {
|
||
document.getElementById('bulkAssignTablesModal').style.display = 'flex';
|
||
document.getElementById('bulk-assign-search').value = '';
|
||
// Load packages + tables in parallel.
|
||
const [pkgResp, tableResp] = await Promise.all([
|
||
fetch('/api/admin/data-packages', { credentials: 'same-origin' }),
|
||
fetch('/api/admin/registry', { credentials: 'same-origin' }),
|
||
]);
|
||
const sel = document.getElementById('bulk-assign-package');
|
||
const list = document.getElementById('bulk-assign-list');
|
||
if (!pkgResp.ok) {
|
||
sel.innerHTML = '<option value="">Failed to load packages</option>';
|
||
list.innerHTML = '<div style="padding:12px; color:#b91c1c;">HTTP '
|
||
+ pkgResp.status + ' on /api/admin/data-packages</div>';
|
||
return;
|
||
}
|
||
if (!tableResp.ok) {
|
||
sel.innerHTML = '<option value="">Failed to load tables</option>';
|
||
list.innerHTML = '<div style="padding:12px; color:#b91c1c;">HTTP '
|
||
+ tableResp.status + ' on /api/admin/registry</div>';
|
||
return;
|
||
}
|
||
const pkgs = await pkgResp.json();
|
||
const tableBody = await tableResp.json();
|
||
// /api/admin/registry returns {tables, count}; defend against shape drift.
|
||
_bulkAssignTables = Array.isArray(tableBody)
|
||
? tableBody
|
||
: (Array.isArray(tableBody.tables) ? tableBody.tables : []);
|
||
// Drop internal rows — same filter the /catalog empty-state uses.
|
||
_bulkAssignTables = _bulkAssignTables.filter(function(t) {
|
||
return (t.source_type || '') !== 'internal';
|
||
});
|
||
// Fetch each package's member tables in parallel so we can pre-check
|
||
// already-assigned rows (and gray them out — server is idempotent
|
||
// but skipping the no-op call keeps the audit log clean).
|
||
const memberFetches = pkgs.map(function(p) {
|
||
return fetch('/api/admin/data-packages/' + encodeURIComponent(p.id),
|
||
{ credentials: 'same-origin' })
|
||
.then(function(r) { return r.ok ? r.json() : null; })
|
||
.catch(function() { return null; });
|
||
});
|
||
const memberBodies = await Promise.all(memberFetches);
|
||
_bulkAssignPackages = pkgs.map(function(p, i) {
|
||
const det = memberBodies[i] || {};
|
||
const ids = new Set((det.tables || []).map(function(t) { return t.id; }));
|
||
return { id: p.id, name: p.name, member_table_ids: ids };
|
||
});
|
||
// Inline "+ Create new package…" as a sentinel value. The change
|
||
// handler below intercepts __create__ and runs a tiny prompt-based
|
||
// flow (name → POST → re-list → re-select) so the user can spawn
|
||
// a target without leaving the bulk-assign workflow.
|
||
//
|
||
// v55 — also annotate each option with "(N of M tables already in)"
|
||
// so the admin sees the existing distribution before picking a
|
||
// target. M = number of visible/grantable tables in this modal;
|
||
// N = how many of those are already in that package. Surfaces the
|
||
// implicit "this package is half-full of what I'm about to assign"
|
||
// signal the admin previously had to derive by clicking through.
|
||
const totalVisible = _bulkAssignTables.length;
|
||
sel.innerHTML = '<option value="">— Choose a package —</option>'
|
||
+ '<option value="__create__" style="font-weight:600;">+ Create new package…</option>'
|
||
+ _bulkAssignPackages.map(function(p) {
|
||
let overlap = 0;
|
||
_bulkAssignTables.forEach(function(t) {
|
||
if (p.member_table_ids.has(String(t.id))) overlap++;
|
||
});
|
||
const distHint = overlap > 0
|
||
? ' (' + overlap + ' of ' + totalVisible + ' already in)'
|
||
: '';
|
||
return '<option value="' + escapeHtmlAttr(p.id) + '">'
|
||
+ escapeHtml(p.name) + escapeHtml(distHint) + '</option>';
|
||
}).join('');
|
||
sel.onchange = async function() {
|
||
if (sel.value !== '__create__') { refreshBulkAssignAvailability(); return; }
|
||
const name = prompt('Name for the new Data Package:');
|
||
if (!name || !name.trim()) { sel.value = ''; return; }
|
||
const slug = _deriveSlug(name.trim());
|
||
const r = await fetch('/api/admin/data-packages', {
|
||
method: 'POST',
|
||
credentials: 'same-origin',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: name.trim(),
|
||
slug,
|
||
description: null,
|
||
icon: null,
|
||
color: '#e0f2fe',
|
||
}),
|
||
});
|
||
if (!r.ok) {
|
||
const detail = await r.json().catch(function() { return {}; });
|
||
alert('Create failed: ' + (detail.detail || r.statusText));
|
||
sel.value = '';
|
||
return;
|
||
}
|
||
const created = await r.json();
|
||
// Append to the in-memory list + the <select>; preserve any
|
||
// already-checked table rows by NOT re-rendering the list.
|
||
_bulkAssignPackages.push({
|
||
id: created.id, name: name.trim(),
|
||
member_table_ids: new Set(),
|
||
});
|
||
const opt = document.createElement('option');
|
||
opt.value = created.id;
|
||
opt.textContent = name.trim();
|
||
sel.appendChild(opt);
|
||
sel.value = created.id;
|
||
refreshBulkAssignAvailability();
|
||
};
|
||
if (preselectPkgId && _bulkAssignPackages.some(function(p) { return p.id === preselectPkgId; })) {
|
||
sel.value = preselectPkgId;
|
||
}
|
||
renderBulkAssignList();
|
||
refreshBulkAssignAvailability();
|
||
}
|
||
|
||
function closeBulkAssignModal() {
|
||
document.getElementById('bulkAssignTablesModal').style.display = 'none';
|
||
// Drop the ?assign_to= query param so a manual refresh doesn't
|
||
// re-open the modal — but only when it was the param that opened
|
||
// us; otherwise leave the URL untouched.
|
||
if (window.location.search.indexOf('assign_to=') !== -1) {
|
||
history.replaceState(null, '', window.location.pathname + window.location.hash);
|
||
}
|
||
}
|
||
|
||
function renderBulkAssignList() {
|
||
const list = document.getElementById('bulk-assign-list');
|
||
if (!_bulkAssignTables.length) {
|
||
list.innerHTML = '<div style="padding:12px; color:#5f6368;">'
|
||
+ 'No tables registered yet — register some via the connector tabs first.</div>';
|
||
return;
|
||
}
|
||
list.innerHTML = _bulkAssignTables.map(function(t) {
|
||
const id = String(t.id || '');
|
||
const name = String(t.name || id);
|
||
const st = String(t.source_type || '');
|
||
const bucket = String(t.bucket || '');
|
||
const meta = [st, bucket].filter(Boolean).join(' · ');
|
||
return ''
|
||
+ '<label data-table-id="' + escapeHtmlAttr(id) + '" '
|
||
+ ' data-table-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
|
||
+ ' data-table-source="' + escapeHtmlAttr(st.toLowerCase()) + '" '
|
||
+ ' style="display:flex; gap:8px; align-items:center; padding:6px; border-radius:4px; cursor:pointer;">'
|
||
+ ' <input type="checkbox" class="bulk-assign-cb" value="' + escapeHtmlAttr(id) + '">'
|
||
+ ' <span style="flex:1; font-family:var(--font-mono);">' + escapeHtml(name) + '</span>'
|
||
+ (meta ? ' <span style="font-size:12px; color:#5f6368;">' + escapeHtml(meta) + '</span>' : '')
|
||
+ '</label>';
|
||
}).join('');
|
||
}
|
||
|
||
// Re-render the per-row "already assigned" hints whenever the
|
||
// target package changes — keeps the UI in sync with reality
|
||
// without a re-fetch (member sets were cached at open time).
|
||
function refreshBulkAssignAvailability() {
|
||
const pkgId = document.getElementById('bulk-assign-package').value;
|
||
const pkg = _bulkAssignPackages.find(function(p) { return p.id === pkgId; });
|
||
const members = pkg ? pkg.member_table_ids : new Set();
|
||
document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
|
||
const tid = row.getAttribute('data-table-id');
|
||
const cb = row.querySelector('.bulk-assign-cb');
|
||
const already = members.has(tid);
|
||
// Wipe any existing badge before re-applying.
|
||
const oldBadge = row.querySelector('.bulk-assign-badge');
|
||
if (oldBadge) oldBadge.remove();
|
||
if (already) {
|
||
cb.checked = true;
|
||
cb.disabled = true;
|
||
row.style.opacity = '0.5';
|
||
const badge = document.createElement('span');
|
||
badge.className = 'bulk-assign-badge';
|
||
badge.textContent = 'already in package';
|
||
badge.style.cssText = 'font-size:11px; color:#10b77f; padding:2px 6px; '
|
||
+ 'border:1px solid #10b77f33; border-radius:10px;';
|
||
row.appendChild(badge);
|
||
} else {
|
||
cb.disabled = false;
|
||
row.style.opacity = '';
|
||
// Only auto-uncheck rows that we previously force-checked —
|
||
// don't clobber the user's manual selection on package switch.
|
||
}
|
||
});
|
||
}
|
||
|
||
function filterBulkAssignList() {
|
||
const q = (document.getElementById('bulk-assign-search').value || '').toLowerCase();
|
||
document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
|
||
if (!q) { row.style.display = ''; return; }
|
||
const name = row.getAttribute('data-table-name') || '';
|
||
const src = row.getAttribute('data-table-source') || '';
|
||
row.style.display = (name.includes(q) || src.includes(q)) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function toggleAllBulkAssign(checked) {
|
||
document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
|
||
if (row.style.display === 'none') return;
|
||
const cb = row.querySelector('.bulk-assign-cb');
|
||
if (cb && !cb.disabled) cb.checked = checked;
|
||
});
|
||
}
|
||
|
||
async function submitBulkAssign() {
|
||
const pkgId = document.getElementById('bulk-assign-package').value;
|
||
if (!pkgId) {
|
||
alert('Pick a target Data Package first.');
|
||
return;
|
||
}
|
||
const pkg = _bulkAssignPackages.find(function(p) { return p.id === pkgId; });
|
||
const alreadyMembers = pkg ? pkg.member_table_ids : new Set();
|
||
const tableIds = Array.from(
|
||
document.querySelectorAll('#bulk-assign-list .bulk-assign-cb:checked')
|
||
)
|
||
.map(function(cb) { return cb.value; })
|
||
// Skip the disabled-already-member rows — the server would no-op,
|
||
// but avoiding the call keeps audit_log noise down.
|
||
.filter(function(id) { return !alreadyMembers.has(id); });
|
||
if (!tableIds.length) {
|
||
alert('Nothing to assign — pick at least one table not already in the package.');
|
||
return;
|
||
}
|
||
const btn = document.getElementById('bulk-assign-submit-btn');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Assigning ' + tableIds.length + '…';
|
||
try {
|
||
const calls = tableIds.map(function(tid) {
|
||
return fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/tables', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify({ table_id: tid }),
|
||
}).then(function(r) { return { tid: tid, ok: r.ok, status: r.status }; })
|
||
.catch(function(e) { return { tid: tid, ok: false, status: 0, err: String(e) }; });
|
||
});
|
||
const results = await Promise.all(calls);
|
||
const fails = results.filter(function(r) { return !r.ok; });
|
||
if (fails.length) {
|
||
alert(fails.length + ' of ' + results.length + ' failed. '
|
||
+ 'First failure: ' + fails[0].tid + ' (HTTP ' + fails[0].status + ').');
|
||
}
|
||
closeBulkAssignModal();
|
||
// Refresh the top-level grid so newly-bundled package counts update.
|
||
if (typeof loadDataPackagesSection === 'function') {
|
||
loadDataPackagesSection();
|
||
}
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Assign selected';
|
||
}
|
||
}
|
||
|
||
// ── Auto-open Bulk Assign on ?assign_to=<pkg_id> ────────
|
||
// Lands here from the /catalog "0 tables — assign some →" CTA.
|
||
// Wait one tick so the loadDataPackagesSection hydrator has a
|
||
// chance to populate the package grid first (cosmetic — keeps
|
||
// the page background populated when the modal opens).
|
||
function initBulkAssignFromQuery() {
|
||
try {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const pid = params.get('assign_to');
|
||
if (pid) {
|
||
setTimeout(function() { openBulkAssignModal(pid); }, 50);
|
||
}
|
||
} catch (e) { /* no-op */ }
|
||
}
|
||
document.addEventListener('DOMContentLoaded', initBulkAssignFromQuery);
|
||
</script>
|
||
|
||
{# (removed) Create Data Package RBAC step-2 modal — the per-group
|
||
Available|Required matrix is now an inline collapsible section
|
||
inside #createDataPackageModal (#cdp-rbac-details). The modal-on-
|
||
modal pattern was confusing per user feedback. #}
|
||
|
||
<!-- ═══════════════ Bulk-assign tables → package ═══════════════
|
||
Replaces the 50-clicks workflow ("edit each table individually
|
||
and add it via the chip-input inside its modal") with one
|
||
dropdown + multi-select submit. Driven by the "Bulk assign
|
||
tables" button on the Data Packages section header AND by the
|
||
/catalog "0 tables — assign some →" CTA which lands here with
|
||
?assign_to=<pkg_id> (see initBulkAssignFromQuery). -->
|
||
<!-- ═══════════════ Edit Data Package modal ═══════════════
|
||
Opened from the Edit button on each card in the Data Packages
|
||
section. Lets admin rename + change description / icon / color,
|
||
see + remove member tables, and delete the package. -->
|
||
<div class="modal-overlay" id="editDataPackageModal" style="display:none;">
|
||
<div class="modal" style="max-width:680px;">
|
||
<div class="modal-header">
|
||
<h2>Edit Data Package</h2>
|
||
<button class="modal-close" onclick="closeEditDataPackageModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="edp-id">
|
||
<div class="form-group">
|
||
<label class="form-label">Name</label>
|
||
<input id="edp-name" type="text" class="form-input">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Slug</label>
|
||
<input id="edp-slug" type="text" class="form-input" disabled
|
||
style="opacity:0.6;" title="Slug is permanent — used in URLs and grants">
|
||
<div class="form-hint">Slug is permanent.</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Description</label>
|
||
<textarea id="edp-desc" class="form-input" rows="2"></textarea>
|
||
</div>
|
||
<div class="form-group" style="display:flex; gap:12px;">
|
||
<div style="flex:1;">
|
||
<label class="form-label">Status</label>
|
||
<select id="edp-status" class="form-input" style="height:38px;">
|
||
<option value="prod">Prod — ready for analyst use</option>
|
||
<option value="poc">POC — try-before-you-buy</option>
|
||
<option value="coming-soon">Coming soon — visible but not usable yet</option>
|
||
<option value="draft">Draft — admin-only, hidden from analysts</option>
|
||
</select>
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label class="form-label">Category <span class="optional">(optional)</span></label>
|
||
<input id="edp-category" type="text" class="form-input"
|
||
placeholder="e.g. Sessions & Traffic">
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="display:flex; gap:12px;">
|
||
<div style="flex:1;">
|
||
<label class="form-label">Icon</label>
|
||
<input id="edp-icon" type="text" class="form-input" maxlength="4">
|
||
</div>
|
||
<div style="flex:1;">
|
||
<label class="form-label">Color</label>
|
||
<div class="cf-palette-row" data-target="edp-color"></div>
|
||
<input id="edp-color" type="color" class="form-input"
|
||
style="height:32px; padding:2px; cursor:pointer;">
|
||
</div>
|
||
</div>
|
||
{# Cover image upload (v50). Preview shows the current cover when
|
||
one is set, with an inline Remove button that sends ""
|
||
(empty-string-means-clear contract in the PUT endpoint). #}
|
||
<div class="form-group">
|
||
<label class="form-label">Cover image <span class="optional">(optional)</span></label>
|
||
<div style="display:flex; gap:12px; align-items:center;">
|
||
<div id="edp-cover-preview"
|
||
style="width:120px; height:72px; border-radius:8px;
|
||
border:1px solid var(--border); background:#f1f5f9;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:12px; color:var(--text-secondary); overflow:hidden;">
|
||
No image
|
||
</div>
|
||
<div style="flex:1;">
|
||
<input id="edp-cover-file" type="file"
|
||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||
onchange="onCoverFilePicked(this, 'edp')">
|
||
<input id="edp-cover-url" type="hidden" value="">
|
||
<div class="form-hint">
|
||
PNG / JPEG / GIF / WebP, max 5 MiB.
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
style="margin-left:6px; padding:2px 8px; font-size:11px;"
|
||
onclick="clearCoverImage('edp')">Remove image</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# v50: inline +Add-tables picker. The old "Add tables" button
|
||
closed this Edit modal and opened Bulk Assign, losing the
|
||
admin's mental context. The picker below stays inline: a
|
||
multi-select of unassigned tables + an Add-selected button
|
||
that POSTs without closing the modal. The legacy Bulk Assign
|
||
modal stays available from the section header outside the
|
||
Edit modal. #}
|
||
<div class="form-group" style="border-top:1px solid var(--border); padding-top:14px; margin-top:14px;">
|
||
<label class="form-label" style="display:flex; align-items:center; justify-content:space-between;">
|
||
<span>Tables in this package</span>
|
||
<button class="btn btn-secondary" type="button" style="padding:4px 10px; font-size:12px;"
|
||
onclick="toggleEdpInlineAdd()">
|
||
+ Add tables
|
||
</button>
|
||
</label>
|
||
<div id="edp-inline-add" style="display:none; margin-bottom:8px; padding:8px;
|
||
border:1px dashed var(--border); border-radius:6px; background:var(--background);">
|
||
<div style="display:flex; gap:6px; margin-bottom:6px;">
|
||
<input id="edp-inline-add-search" type="search" class="form-input"
|
||
placeholder="Filter unassigned tables…"
|
||
style="flex:1;" oninput="filterEdpInlineAdd()">
|
||
</div>
|
||
<div id="edp-inline-add-list"
|
||
style="max-height:180px; overflow-y:auto; padding:4px;
|
||
background:var(--surface); border:1px solid var(--border-light);
|
||
border-radius:4px;">
|
||
<div style="padding:8px; color:var(--text-secondary); font-size:12px;">
|
||
Loading unassigned tables…
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; justify-content:flex-end; gap:6px; margin-top:6px;">
|
||
<button class="btn btn-secondary btn-sm" type="button"
|
||
onclick="toggleEdpInlineAdd()">Cancel</button>
|
||
<button class="btn btn-primary btn-sm" type="button"
|
||
id="edp-inline-add-submit-btn"
|
||
onclick="submitEdpInlineAdd()">Add selected</button>
|
||
</div>
|
||
</div>
|
||
<div id="edp-tables-list" class="card-body" style="padding:0; max-height:240px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;"></div>
|
||
</div>
|
||
|
||
{# Inline Group Access matrix — admin can mark this package as
|
||
available / required for each group right from the edit
|
||
modal (mirroring the Create flow). Lazy-loaded on first
|
||
open of the <details>; pre-filled from the package's
|
||
existing resource_grants rows so the dropdowns reflect
|
||
reality. On save, diffs vs the original snapshot and
|
||
emits POST / DELETE /api/admin/grants to bring the server
|
||
in sync. Closes the "Data Package nikde nejde nastavit
|
||
required" user-reported gap. #}
|
||
<details class="form-group" id="edp-rbac-details"
|
||
style="border:1px solid var(--border); border-radius:8px; padding:8px 12px;">
|
||
<summary style="cursor:pointer; font-weight:600; font-size:13px; user-select:none;">
|
||
Group access
|
||
<span style="color:var(--text-secondary); font-weight:normal; font-size:12px;">— mark required / available per group</span>
|
||
</summary>
|
||
<p class="form-hint" style="margin:8px 0;">
|
||
<em>required</em> auto-installs the package into the group's
|
||
stack on next pull; <em>available</em> lets the group see + opt
|
||
in from /catalog; <em>(no grant)</em> hides it. Changes apply
|
||
when you click <strong>Save changes</strong>.
|
||
</p>
|
||
<div id="edp-rbac-rows"
|
||
style="display:flex; flex-direction:column; gap:6px; max-height:30vh; overflow-y:auto;">
|
||
<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">
|
||
Click to load groups…
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="modal-footer" style="justify-content:space-between;">
|
||
<button class="btn" type="button" style="color:#b91c1c; border-color:#fca5a5;"
|
||
onclick="deleteEditDataPackage()">Delete package</button>
|
||
<div style="display:flex; gap:8px;">
|
||
<button class="btn btn-secondary" onclick="closeEditDataPackageModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="edp-save-btn" onclick="submitEditDataPackage()">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# Group-by-bucket preview modal — replaces the old confirm(). Lets
|
||
the admin see each distinct bucket, its table count, the resulting
|
||
slug, and whether it would be skipped because a package with that
|
||
slug already exists. Uncheck rows to opt out individually. #}
|
||
<div class="modal-overlay" id="groupByBucketPreviewModal" style="display:none;">
|
||
<div class="modal" style="max-width:640px;">
|
||
<div class="modal-header">
|
||
<h2>Create a Data Package per bucket</h2>
|
||
<button class="modal-close" onclick="closeGroupByBucketModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p class="form-hint" style="margin-bottom:12px;">
|
||
One package will be created per checked bucket below.
|
||
Existing tables in any package are left in place (the junction
|
||
INSERT is idempotent).
|
||
</p>
|
||
<div id="gbb-rows"
|
||
style="display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow-y:auto;
|
||
border:1px solid var(--border); border-radius:8px; padding:8px;">
|
||
<div class="loading" style="padding:8px; color:var(--text-secondary); font-size:13px;">
|
||
Loading buckets…
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeGroupByBucketModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="gbb-submit-btn"
|
||
onclick="submitGroupByBucket()">Create checked</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-overlay" id="bulkAssignTablesModal" style="display:none;">
|
||
<div class="modal" style="max-width:680px;">
|
||
<div class="modal-header">
|
||
<h2>Bulk assign tables to package</h2>
|
||
<button class="modal-close" onclick="closeBulkAssignModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label class="form-label" for="bulk-assign-package">Target Data Package</label>
|
||
<select id="bulk-assign-package" class="form-input"
|
||
style="width:100%;"
|
||
onchange="refreshBulkAssignAvailability()">
|
||
<option value="">— Loading packages —</option>
|
||
</select>
|
||
<div class="form-hint">Pick the package the selected tables should be bundled into.</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Tables</label>
|
||
<div style="display:flex; gap:8px; align-items:center; margin:6px 0;">
|
||
<input id="bulk-assign-search" type="search" class="form-input"
|
||
placeholder="Filter tables by name / source…"
|
||
style="flex:1;" oninput="filterBulkAssignList()">
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="toggleAllBulkAssign(true)">Select visible</button>
|
||
<button type="button" class="btn btn-secondary btn-sm"
|
||
onclick="toggleAllBulkAssign(false)">Clear</button>
|
||
</div>
|
||
<div id="bulk-assign-list"
|
||
style="border:1px solid var(--border); border-radius:6px;
|
||
max-height:50vh; overflow-y:auto; padding:6px;">
|
||
<div style="padding:12px; color:#5f6368;">Loading tables…</div>
|
||
</div>
|
||
<div class="form-hint" id="bulk-assign-hint">
|
||
Already-assigned tables are checked + disabled so re-submitting
|
||
this modal is a no-op against them.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeBulkAssignModal()">Cancel</button>
|
||
<button class="btn btn-primary" id="bulk-assign-submit-btn"
|
||
onclick="submitBulkAssign()">
|
||
Assign selected
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
/* ═══════════════════════════════════════════════════════════════
|
||
Admin Tables - JavaScript
|
||
═══════════════════════════════════════════════════════════════ */
|
||
|
||
// ── Register-new-table dropdown ─────────────────────────────
|
||
// Replaces the per-connector tab nav. The user picks the connector
|
||
// here only to choose which register modal to open; otherwise the
|
||
// page is package-centric and source_type is just an inline tag.
|
||
function toggleRegisterNewTableMenu(evt) {
|
||
if (evt) evt.stopPropagation();
|
||
var menu = document.getElementById('registerNewTableMenu');
|
||
if (!menu) return;
|
||
menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
|
||
}
|
||
function closeRegisterNewTableMenu() {
|
||
var menu = document.getElementById('registerNewTableMenu');
|
||
if (menu) menu.style.display = 'none';
|
||
}
|
||
document.addEventListener('click', function(e) {
|
||
var btn = document.getElementById('registerNewTableBtn');
|
||
var menu = document.getElementById('registerNewTableMenu');
|
||
if (!btn || !menu) return;
|
||
if (btn.contains(e.target) || menu.contains(e.target)) return;
|
||
menu.style.display = 'none';
|
||
});
|
||
|
||
// State
|
||
let registryData = null;
|
||
let registryVersion = null;
|
||
let currentEditTableId = null;
|
||
|
||
// ── Toast notification ──────────────────────────────────────
|
||
|
||
function showToast(message, type) {
|
||
var toast = document.getElementById('toast');
|
||
var icon = document.getElementById('toastIcon');
|
||
var msg = document.getElementById('toastMessage');
|
||
|
||
toast.className = 'toast toast-' + type;
|
||
msg.textContent = message;
|
||
|
||
if (type === 'success') {
|
||
icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10B77F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>';
|
||
} else {
|
||
icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#EA580C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
|
||
}
|
||
|
||
// Show
|
||
requestAnimationFrame(function() {
|
||
toast.classList.add('visible');
|
||
});
|
||
|
||
// Hide after 4 seconds
|
||
setTimeout(function() {
|
||
toast.classList.remove('visible');
|
||
}, 4000);
|
||
}
|
||
|
||
// ── Format helpers ──────────────────────────────────────────
|
||
|
||
function formatNumber(n) {
|
||
if (n == null) return '-';
|
||
if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
|
||
if (n >= 1000) return n.toLocaleString();
|
||
return String(n);
|
||
}
|
||
|
||
function formatSize(bytes) {
|
||
if (bytes == null || bytes === 0) return '-';
|
||
if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + ' GB';
|
||
if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
|
||
if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||
return bytes + ' B';
|
||
}
|
||
|
||
function escapeHtml(str) {
|
||
if (!str) return '';
|
||
var div = document.createElement('div');
|
||
div.textContent = str;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
/**
|
||
* Escape a string for safe inclusion inside a single- OR double-quoted
|
||
* HTML attribute. Unlike `escapeHtml` (which goes through textContent →
|
||
* innerHTML and only escapes `<`/`>`/`&`), this also escapes both quote
|
||
* characters so the value can't break out of the attribute. Issue #265.
|
||
*/
|
||
function escapeHtmlAttr(str) {
|
||
if (str === null || str === undefined) return '';
|
||
return String(str)
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''');
|
||
}
|
||
|
||
// Defensive normalization for descriptions registered via shell-quoting
|
||
// tooling that injected literal backslash escapes (e.g. `Don\'t`, `\n`).
|
||
// Mirrors _unescape_shell_quoting in app/api/admin.py — applied at render
|
||
// time so already-stored corrupt rows still display readably.
|
||
function unescapeShellQuoting(s) {
|
||
if (!s) return s;
|
||
// Order matters: protect real backslashes via NUL sentinel first,
|
||
// unescape the well-known sequences, then restore real backslashes.
|
||
return s
|
||
.replace(/\\\\/g, ' ')
|
||
.replace(/\\n/g, '\n')
|
||
.replace(/\\r/g, '\r')
|
||
.replace(/\\t/g, '\t')
|
||
.replace(/\\'/g, "'")
|
||
.replace(/\\"/g, '"')
|
||
.replace(/ /g, '\\');
|
||
}
|
||
|
||
// C3: removed dead Discovery panel JS. The global Discovery card +
|
||
// its #discoverBtn / #discoveryResults DOM hooks were removed when
|
||
// the per-tab UI landed; per-tab Discover/List datalist helpers live
|
||
// in the per-source shims further down. The legacy "Register" button
|
||
// rendered per discovery row also went away — operators register
|
||
// through the per-tab Register modals.
|
||
|
||
// ── Registration Modal ──────────────────────────────────────
|
||
|
||
// Server-rendered marker so the JS knows the instance's data source
|
||
// type. Lives on <body> after C3 (previously on the now-removed
|
||
// #registerModal).
|
||
var DATA_SOURCE_TYPE = document.body.dataset.sourceType || 'keboola';
|
||
|
||
function openRegisterModal(arg) {
|
||
// Phase E + F: dispatch by string argument.
|
||
// 'bigquery' → BQ tab Register button → #registerBqModal.
|
||
// 'keboola' → Keboola tab Register button → #registerKeboolaModal.
|
||
if (arg === 'bigquery') {
|
||
return _openBqRegisterModal({});
|
||
}
|
||
if (arg === 'keboola') {
|
||
return _openKeboolaTabRegisterModal();
|
||
}
|
||
// Fallback when called with no argument — pick by instance type.
|
||
if (DATA_SOURCE_TYPE === 'bigquery') {
|
||
return _openBqRegisterModal({});
|
||
}
|
||
return _openKeboolaTabRegisterModal();
|
||
}
|
||
|
||
function _openBqRegisterModal(table) {
|
||
// BQ uses a manual-entry form (no discovery panel for BQ in M1).
|
||
// `table` may be partially populated by a future M2 prefill —
|
||
// tolerate either an empty call or a {bucket, source_table, ...}
|
||
// shape from a hypothetical future prefill.
|
||
table = table || {};
|
||
document.getElementById('bqDataset').value = table.bucket || '';
|
||
document.getElementById('bqSourceTable').value = table.source_table || table.name || '';
|
||
document.getElementById('bqViewName').value = table.name || '';
|
||
document.getElementById('bqDescription').value = '';
|
||
document.getElementById('bqFolder').value = '';
|
||
document.getElementById('bqSyncSchedule').value = '';
|
||
var summary = document.getElementById('bqPrecheckSummary');
|
||
if (summary) summary.style.display = 'none';
|
||
var btn = document.getElementById('registerBqSubmitBtn');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register Table';
|
||
btn.onclick = registerBqTable;
|
||
document.getElementById('registerBqModal').classList.add('active');
|
||
}
|
||
|
||
// C3: removed dead helpers _openKeboolaRegisterModal /
|
||
// closeRegisterModal that drove the now-deleted #registerModal.
|
||
// The Phase F #registerKeboolaModal owns the Keboola flow now.
|
||
|
||
function closeRegisterBqModal() {
|
||
document.getElementById('registerBqModal').classList.remove('active');
|
||
}
|
||
|
||
// ── Keboola tab register modal (Phase F1) ──────────────────────
|
||
|
||
function _openKeboolaTabRegisterModal() {
|
||
// Reset form to defaults each open. Whole mode is the default
|
||
// (Q2='whole'); the kb-source-table fields are visible.
|
||
var modal = document.getElementById('registerKeboolaModal');
|
||
if (!modal) return;
|
||
var radio = modal.querySelector('input[name="kbSyncMode"][value="whole"]');
|
||
if (radio) radio.checked = true;
|
||
['kbViewName', 'kbBucket', 'kbSourceTable', 'kbSourceQuery',
|
||
'kbSyncSchedule', 'kbDescription', 'kbFolder', 'kbPrimaryKey',
|
||
// v26 Direct-extract fields — reset so a stale value from a prior
|
||
// open doesn't leak into the next registration.
|
||
'kbIncrementalWindowDays', 'kbMaxHistoryDays', 'kbPartitionBy',
|
||
'kbInitialLoadChunkDays', 'kbWhereFilters'].forEach(function(id) {
|
||
var el = document.getElementById(id);
|
||
if (el) el.value = '';
|
||
});
|
||
// Default v26 dropdowns
|
||
var kbStrategyEl = document.getElementById('kbStrategy');
|
||
if (kbStrategyEl) kbStrategyEl.value = 'full_refresh';
|
||
var kbGranEl = document.getElementById('kbPartitionGranularity');
|
||
if (kbGranEl) kbGranEl.value = 'month';
|
||
onKbSyncModeChange(); // apply default visibility
|
||
var btn = document.getElementById('registerKeboolaSubmitBtn');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register';
|
||
modal.classList.add('active');
|
||
}
|
||
|
||
function closeRegisterKeboolaModal() {
|
||
document.getElementById('registerKeboolaModal').classList.remove('active');
|
||
}
|
||
|
||
function _getKbSyncMode() {
|
||
var el = document.querySelector('input[name="kbSyncMode"]:checked');
|
||
return el ? el.value : 'whole';
|
||
}
|
||
|
||
function onKbSyncModeChange() {
|
||
var mode = _getKbSyncMode();
|
||
// Whole + Direct both need bucket/source_table inputs; only Custom hides them
|
||
document.querySelectorAll('.kb-source-table').forEach(function(el) {
|
||
el.style.display = (mode === 'custom') ? 'none' : '';
|
||
});
|
||
document.querySelectorAll('.kb-source-custom').forEach(function(el) {
|
||
el.style.display = (mode === 'custom') ? '' : 'none';
|
||
});
|
||
// v26 strategy panel — Direct mode only
|
||
document.querySelectorAll('.kb-direct-only').forEach(function(el) {
|
||
el.style.display = (mode === 'direct') ? '' : 'none';
|
||
});
|
||
if (mode === 'direct') onKbStrategyChange();
|
||
}
|
||
|
||
function _getKbStrategy() {
|
||
var el = document.getElementById('kbStrategy');
|
||
return el ? el.value : 'full_refresh';
|
||
}
|
||
|
||
function _kbStrategyVisibility(el, s) {
|
||
// Single-pass visibility check that handles elements tagged with
|
||
// multiple strategy classes (e.g. window_days has both
|
||
// kb-strategy-incremental + kb-strategy-partitioned because the
|
||
// field is shared). Using two separate forEach loops would race —
|
||
// the second loop hiding what the first showed.
|
||
if (el.classList.contains('kb-strategy-not-incremental')) {
|
||
return s !== 'incremental';
|
||
}
|
||
// Element is visible if its class list mentions the active strategy
|
||
return el.classList.contains('kb-strategy-' + s);
|
||
}
|
||
|
||
function onKbStrategyChange() {
|
||
var s = _getKbStrategy();
|
||
document.querySelectorAll(
|
||
'.kb-direct-only .kb-strategy-incremental, ' +
|
||
'.kb-direct-only .kb-strategy-partitioned, ' +
|
||
'.kb-direct-only .kb-strategy-not-incremental'
|
||
).forEach(function(el) {
|
||
el.style.display = _kbStrategyVisibility(el, s) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function _intOrNull(id) {
|
||
var raw = (document.getElementById(id).value || '').trim();
|
||
if (!raw) return null;
|
||
var n = parseInt(raw, 10);
|
||
return isNaN(n) ? null : n;
|
||
}
|
||
|
||
function _parseFiltersJSONOrThrow(id) {
|
||
var raw = (document.getElementById(id).value || '').trim();
|
||
if (!raw) return null;
|
||
try {
|
||
return JSON.parse(raw);
|
||
} catch (e) {
|
||
throw new Error('where_filters: invalid JSON — ' + e.message);
|
||
}
|
||
}
|
||
|
||
function _buildKeboolaPayload() {
|
||
// Three modes:
|
||
// whole / custom → query_mode='materialized' (DuckDB Keboola extension)
|
||
// direct → query_mode='local' + v26 sync_strategy fields
|
||
// (Storage API SDK, supports incremental/partitioned/where_filters)
|
||
var mode = _getKbSyncMode();
|
||
var viewName = (document.getElementById('kbViewName').value || '').trim();
|
||
var bucket = (document.getElementById('kbBucket').value || '').trim();
|
||
var sourceTable = (document.getElementById('kbSourceTable').value || '').trim();
|
||
var pk = (document.getElementById('kbPrimaryKey').value || '').trim();
|
||
var primaryKey = pk
|
||
? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
|
||
: [];
|
||
|
||
if (mode === 'direct') {
|
||
var strategy = _getKbStrategy();
|
||
var payload = {
|
||
name: viewName || sourceTable,
|
||
source_type: 'keboola',
|
||
query_mode: 'local',
|
||
bucket: bucket,
|
||
source_table: sourceTable,
|
||
primary_key: primaryKey,
|
||
sync_strategy: strategy,
|
||
sync_schedule: (document.getElementById('kbSyncSchedule').value || '').trim() || null,
|
||
description: (document.getElementById('kbDescription').value || '').trim() || null,
|
||
folder: (document.getElementById('kbFolder').value || '').trim() || null,
|
||
};
|
||
if (strategy === 'incremental' || strategy === 'partitioned') {
|
||
payload.incremental_window_days = _intOrNull('kbIncrementalWindowDays');
|
||
payload.max_history_days = _intOrNull('kbMaxHistoryDays');
|
||
}
|
||
if (strategy === 'partitioned') {
|
||
payload.partition_by = (document.getElementById('kbPartitionBy').value || '').trim() || null;
|
||
payload.partition_granularity = document.getElementById('kbPartitionGranularity').value || null;
|
||
payload.initial_load_chunk_days = _intOrNull('kbInitialLoadChunkDays');
|
||
}
|
||
if (strategy !== 'incremental') {
|
||
payload.where_filters = _parseFiltersJSONOrThrow('kbWhereFilters');
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
// Materialized paths (whole / custom)
|
||
var common = {
|
||
name: viewName || sourceTable,
|
||
source_type: 'keboola',
|
||
query_mode: 'materialized',
|
||
primary_key: primaryKey,
|
||
sync_schedule: (document.getElementById('kbSyncSchedule').value || '').trim() || null,
|
||
description: (document.getElementById('kbDescription').value || '').trim() || null,
|
||
folder: (document.getElementById('kbFolder').value || '').trim() || null,
|
||
};
|
||
|
||
if (mode === 'custom') {
|
||
return Object.assign({}, common, {
|
||
source_query: (document.getElementById('kbSourceQuery').value || '').trim(),
|
||
});
|
||
}
|
||
// Whole — synthesize SELECT * FROM kbc."bucket"."table".
|
||
return Object.assign({}, common, {
|
||
bucket: bucket,
|
||
source_table: sourceTable,
|
||
source_query: 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"',
|
||
});
|
||
}
|
||
|
||
function registerKeboolaTable() {
|
||
var btn = document.getElementById('registerKeboolaSubmitBtn');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Registering...';
|
||
var payload;
|
||
try {
|
||
payload = _buildKeboolaPayload();
|
||
} catch (e) {
|
||
// _parseFiltersJSONOrThrow surfaces malformed JSON before the
|
||
// POST so the operator sees the parse error inline rather than
|
||
// a 422 from the server. Re-enable the submit button.
|
||
showToast('' + e.message, 'error');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register';
|
||
return;
|
||
}
|
||
fetch('/api/admin/register-table', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
.then(function(r) {
|
||
if (!r.ok) {
|
||
return r.json().then(function(d) {
|
||
throw new Error(d.detail || d.error || 'Registration failed');
|
||
});
|
||
}
|
||
return r.json();
|
||
})
|
||
.then(function() {
|
||
closeRegisterKeboolaModal();
|
||
showToast('Table registered', 'success');
|
||
loadRegistry();
|
||
})
|
||
.catch(function(err) {
|
||
showToast('' + err.message, 'error');
|
||
})
|
||
.finally(function() {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register';
|
||
});
|
||
}
|
||
|
||
// Discovery shims — the existing /api/admin/discover-tables endpoint
|
||
// already routes by the instance's data_source.type (returning Keboola
|
||
// tables when the instance is Keboola-typed); the source=keboola query
|
||
// param is informational. Hidden behind `data_source_type == 'keboola'`
|
||
// because on a BQ-typed instance the endpoint would return BQ-shaped
|
||
// data (wrong shape, confusing); operators fall back to manual entry
|
||
// for cross-source registration. Future work: extend the endpoint to
|
||
// accept an explicit ?source= override so secondary-source registration
|
||
// works in both directions and we can remove this guard.
|
||
{% if data_source_type == 'keboola' %}
|
||
function discoverKeboolaBuckets(datalistId) {
|
||
fetch('/api/admin/discover-tables?source=keboola')
|
||
.then(function(r) {
|
||
if (!r.ok) return r.json().then(function(d) {
|
||
throw new Error(d.detail || d.error || 'Keboola discovery failed');
|
||
});
|
||
return r.json();
|
||
})
|
||
.then(function(data) {
|
||
var dl = document.getElementById(datalistId);
|
||
if (!dl) return;
|
||
dl.innerHTML = '';
|
||
// Endpoint may return either {buckets:[...]}, {datasets:[...]}
|
||
// or {tables:[...]} depending on routing; project to a flat
|
||
// bucket-id list. Keboola path returns tables → derive uniq
|
||
// bucket_ids.
|
||
var buckets = data.buckets || data.datasets;
|
||
if (!buckets && Array.isArray(data.tables)) {
|
||
var seen = {};
|
||
buckets = [];
|
||
data.tables.forEach(function(t) {
|
||
var b = t.bucket_id || (t.bucket && t.bucket.id);
|
||
if (b && !seen[b]) { seen[b] = 1; buckets.push(b); }
|
||
});
|
||
}
|
||
(buckets || []).forEach(function(b) {
|
||
var o = document.createElement('option');
|
||
o.value = (typeof b === 'string') ? b : (b.id || b.bucket_id || '');
|
||
dl.appendChild(o);
|
||
});
|
||
showToast('Loaded ' + (dl.children.length) + ' buckets', 'success');
|
||
})
|
||
.catch(function(err) {
|
||
showToast('' + err.message, 'error');
|
||
});
|
||
}
|
||
|
||
function discoverKeboolaTables(bucketInputId, tablesDatalistId) {
|
||
var bucketEl = document.getElementById(bucketInputId);
|
||
var bucket = bucketEl ? (bucketEl.value || '').trim() : '';
|
||
if (!bucket) {
|
||
showToast('Fill bucket first', 'error');
|
||
return;
|
||
}
|
||
fetch('/api/admin/discover-tables?source=keboola&bucket=' + encodeURIComponent(bucket))
|
||
.then(function(r) {
|
||
if (!r.ok) return r.json().then(function(d) {
|
||
throw new Error(d.detail || d.error || 'Keboola table discovery failed');
|
||
});
|
||
return r.json();
|
||
})
|
||
.then(function(data) {
|
||
var dl = document.getElementById(tablesDatalistId);
|
||
if (!dl) return;
|
||
dl.innerHTML = '';
|
||
var tables = data.tables || [];
|
||
// Filter to the selected bucket if endpoint didn't.
|
||
tables.filter(function(t) {
|
||
var b = t.bucket_id || (t.bucket && t.bucket.id);
|
||
return !bucket || !b || b === bucket;
|
||
}).forEach(function(t) {
|
||
var o = document.createElement('option');
|
||
var name = (typeof t === 'string') ? t : (t.name || t.id || '');
|
||
// Strip bucket prefix if present.
|
||
if (name.indexOf(bucket + '.') === 0) name = name.substring(bucket.length + 1);
|
||
o.value = name;
|
||
dl.appendChild(o);
|
||
});
|
||
showToast('Loaded ' + dl.children.length + ' tables in ' + bucket, 'success');
|
||
})
|
||
.catch(function(err) {
|
||
showToast('' + err.message, 'error');
|
||
});
|
||
}
|
||
{% endif %}{# data_source_type == 'keboola' — discover helpers #}
|
||
|
||
// ── Keboola edit-modal sync-mode helpers (always needed — radio buttons
|
||
// are rendered for all instance types) ───────────────────────────────
|
||
// Pre-rewrite this whole block lived inside the Jinja
|
||
// data_source_type guard above, which was fine when the modal was
|
||
// only reachable from the (then) Keboola tab. With the package-
|
||
// centric layout, Edit on any Keboola row opens this modal
|
||
// regardless of the instance's primary data_source.type, so the
|
||
// lifecycle helpers must be available unconditionally. The
|
||
// discover/prefill helpers (which hit the keboola-typed
|
||
// /api/admin/discover-tables endpoint) stay gated above + below.
|
||
|
||
function _getEditKbSyncMode() {
|
||
var el = document.querySelector('input[name="editKbSyncMode"]:checked');
|
||
return el ? el.value : 'whole';
|
||
}
|
||
|
||
function onEditKbSyncModeChange() {
|
||
var mode = _getEditKbSyncMode();
|
||
document.querySelectorAll('.editkb-source-table').forEach(function(el) {
|
||
el.style.display = (mode === 'custom') ? 'none' : '';
|
||
});
|
||
document.querySelectorAll('.editkb-source-custom').forEach(function(el) {
|
||
el.style.display = (mode === 'custom') ? '' : 'none';
|
||
});
|
||
document.querySelectorAll('.editkb-direct-only').forEach(function(el) {
|
||
el.style.display = (mode === 'direct') ? '' : 'none';
|
||
});
|
||
if (mode === 'direct') onEditKbStrategyChange();
|
||
}
|
||
|
||
{% if data_source_type == 'keboola' %}{# Phase F2 edit modal + prefill — keboola-only #}
|
||
function _getEditKbStrategy() {
|
||
var el = document.getElementById('editKbStrategy');
|
||
return el ? el.value : 'full_refresh';
|
||
}
|
||
|
||
function _editKbStrategyVisibility(el, s) {
|
||
if (el.classList.contains('editkb-strategy-not-incremental')) {
|
||
return s !== 'incremental';
|
||
}
|
||
return el.classList.contains('editkb-strategy-' + s);
|
||
}
|
||
|
||
function onEditKbStrategyChange() {
|
||
var s = _getEditKbStrategy();
|
||
document.querySelectorAll(
|
||
'.editkb-direct-only .editkb-strategy-incremental, ' +
|
||
'.editkb-direct-only .editkb-strategy-partitioned, ' +
|
||
'.editkb-direct-only .editkb-strategy-not-incremental'
|
||
).forEach(function(el) {
|
||
el.style.display = _editKbStrategyVisibility(el, s) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function _setEditKbRadio(value) {
|
||
var el = document.querySelector('input[name="editKbSyncMode"][value="' + value + '"]');
|
||
if (el) el.checked = true;
|
||
}
|
||
|
||
function openEditKeboolaModal(table) {
|
||
// Populate fields from a registry row. Mode detection:
|
||
// - query_mode='local' → 'direct' (v26 sync-strategy path)
|
||
// - query_mode='materialized' + auto SELECT * → 'whole'
|
||
// - query_mode='materialized' + custom SQL → 'custom'
|
||
table = table || {};
|
||
document.getElementById('editKbTableId').value = table.id || '';
|
||
var bucket = table.bucket || '';
|
||
var sourceTable = table.source_table || '';
|
||
var sourceQuery = table.source_query || '';
|
||
var queryMode = table.query_mode || 'materialized';
|
||
var isAutoSelectStar = false;
|
||
if (sourceQuery && bucket && sourceTable) {
|
||
var auto = 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"';
|
||
isAutoSelectStar = sourceQuery.replace(/\s+/g, ' ').trim() === auto;
|
||
}
|
||
var mode;
|
||
if (queryMode === 'local') {
|
||
mode = 'direct';
|
||
} else if (sourceQuery && !isAutoSelectStar) {
|
||
mode = 'custom';
|
||
} else {
|
||
mode = 'whole';
|
||
}
|
||
_setEditKbRadio(mode);
|
||
document.getElementById('editKbBucket').value = bucket;
|
||
document.getElementById('editKbSourceTable').value = sourceTable;
|
||
document.getElementById('editKbSourceQuery').value = sourceQuery;
|
||
document.getElementById('editKbSyncSchedule').value = table.sync_schedule || '';
|
||
document.getElementById('editKbDescription').value = table.description || '';
|
||
document.getElementById('editKbFolder').value = table.folder || '';
|
||
document.getElementById('editKbPrimaryKey').value = (table.primary_key || []).join(', ');
|
||
|
||
// v26 fields
|
||
document.getElementById('editKbStrategy').value = table.sync_strategy || 'full_refresh';
|
||
document.getElementById('editKbIncrementalWindowDays').value =
|
||
table.incremental_window_days != null ? table.incremental_window_days : '';
|
||
document.getElementById('editKbMaxHistoryDays').value =
|
||
table.max_history_days != null ? table.max_history_days : '';
|
||
document.getElementById('editKbPartitionBy').value = table.partition_by || '';
|
||
document.getElementById('editKbPartitionGranularity').value =
|
||
table.partition_granularity || 'month';
|
||
document.getElementById('editKbInitialLoadChunkDays').value =
|
||
table.initial_load_chunk_days != null ? table.initial_load_chunk_days : '';
|
||
document.getElementById('editKbWhereFilters').value =
|
||
table.where_filters ? JSON.stringify(table.where_filters, null, 2) : '';
|
||
|
||
onEditKbSyncModeChange();
|
||
var btn = document.getElementById('editKeboolaSubmitBtn');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
|
||
// Reset + hydrate the Data Packages chip-input (parity with the
|
||
// legacy + BQ edit modals).
|
||
_editKbOriginalPackageIds = new Set();
|
||
var kbChipHost = document.getElementById('editKbPackagesChips');
|
||
if (kbChipHost) {
|
||
if (typeof kbChipHost.clearChips === 'function') kbChipHost.clearChips();
|
||
_hydrateEditPackagesChips(table.id, kbChipHost, _editKbOriginalPackageIds);
|
||
}
|
||
|
||
document.getElementById('editKeboolaModal').classList.add('active');
|
||
}
|
||
|
||
function closeEditKeboolaModal() {
|
||
_closeEditModalById('editKeboolaModal');
|
||
}
|
||
|
||
function _editIntOrNull(id) {
|
||
var raw = (document.getElementById(id).value || '').trim();
|
||
if (!raw) return null;
|
||
var n = parseInt(raw, 10);
|
||
return isNaN(n) ? null : n;
|
||
}
|
||
|
||
function _editParseFiltersJSONOrThrow(id) {
|
||
var raw = (document.getElementById(id).value || '').trim();
|
||
if (!raw) return null;
|
||
try {
|
||
return JSON.parse(raw);
|
||
} catch (e) {
|
||
throw new Error('where_filters: invalid JSON — ' + e.message);
|
||
}
|
||
}
|
||
|
||
function _buildKeboolaEditPayload() {
|
||
var mode = _getEditKbSyncMode();
|
||
var bucket = (document.getElementById('editKbBucket').value || '').trim();
|
||
var sourceTable = (document.getElementById('editKbSourceTable').value || '').trim();
|
||
var pk = (document.getElementById('editKbPrimaryKey').value || '').trim();
|
||
var primaryKey = pk
|
||
? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
|
||
: [];
|
||
|
||
if (mode === 'direct') {
|
||
var strategy = _getEditKbStrategy();
|
||
var payload = {
|
||
query_mode: 'local',
|
||
bucket: bucket,
|
||
source_table: sourceTable,
|
||
primary_key: primaryKey,
|
||
sync_strategy: strategy,
|
||
sync_schedule: (document.getElementById('editKbSyncSchedule').value || '').trim() || null,
|
||
description: (document.getElementById('editKbDescription').value || '').trim() || null,
|
||
folder: (document.getElementById('editKbFolder').value || '').trim() || null,
|
||
// PUT requires explicit nulls to clear v26 fields when switching
|
||
// away from a strategy that used them — otherwise the merged-dict
|
||
// path keeps the stale value.
|
||
incremental_window_days: null,
|
||
max_history_days: null,
|
||
partition_by: null,
|
||
partition_granularity: null,
|
||
initial_load_chunk_days: null,
|
||
where_filters: null,
|
||
};
|
||
if (strategy === 'incremental' || strategy === 'partitioned') {
|
||
payload.incremental_window_days = _editIntOrNull('editKbIncrementalWindowDays');
|
||
payload.max_history_days = _editIntOrNull('editKbMaxHistoryDays');
|
||
}
|
||
if (strategy === 'partitioned') {
|
||
payload.partition_by = (document.getElementById('editKbPartitionBy').value || '').trim() || null;
|
||
payload.partition_granularity = document.getElementById('editKbPartitionGranularity').value || null;
|
||
payload.initial_load_chunk_days = _editIntOrNull('editKbInitialLoadChunkDays');
|
||
}
|
||
if (strategy !== 'incremental') {
|
||
payload.where_filters = _editParseFiltersJSONOrThrow('editKbWhereFilters');
|
||
}
|
||
return payload;
|
||
}
|
||
|
||
var common = {
|
||
query_mode: 'materialized',
|
||
primary_key: primaryKey,
|
||
sync_schedule: (document.getElementById('editKbSyncSchedule').value || '').trim() || null,
|
||
description: (document.getElementById('editKbDescription').value || '').trim() || null,
|
||
folder: (document.getElementById('editKbFolder').value || '').trim() || null,
|
||
};
|
||
if (mode === 'custom') {
|
||
return Object.assign({}, common, {
|
||
source_query: (document.getElementById('editKbSourceQuery').value || '').trim(),
|
||
});
|
||
}
|
||
return Object.assign({}, common, {
|
||
bucket: bucket,
|
||
source_table: sourceTable,
|
||
source_query: 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"',
|
||
});
|
||
}
|
||
|
||
function saveKeboolaTabEdit() {
|
||
var btn = document.getElementById('editKeboolaSubmitBtn');
|
||
var tableId = document.getElementById('editKbTableId').value;
|
||
if (!tableId) {
|
||
showToast('Missing table id', 'error');
|
||
return;
|
||
}
|
||
btn.disabled = true;
|
||
btn.textContent = 'Saving...';
|
||
var payload;
|
||
try {
|
||
payload = _buildKeboolaEditPayload();
|
||
} catch (e) {
|
||
showToast('' + e.message, 'error');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
return;
|
||
}
|
||
(async function () {
|
||
try {
|
||
var r = await fetch('/api/admin/registry/' + encodeURIComponent(tableId), {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload),
|
||
});
|
||
if (!r.ok) {
|
||
var d = await r.json().catch(function() { return {}; });
|
||
throw new Error(d.detail || d.error || 'Update failed');
|
||
}
|
||
// Diff Data Package chip selection vs original.
|
||
var kbFails = await _diffApplyPackageMembership(
|
||
tableId,
|
||
document.getElementById('editKbPackagesChips'),
|
||
_editKbOriginalPackageIds
|
||
);
|
||
if (kbFails > 0) {
|
||
showToast(kbFails + ' package membership change(s) failed', 'error');
|
||
}
|
||
closeEditKeboolaModal();
|
||
showToast('Table updated', 'success');
|
||
loadRegistry();
|
||
if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
|
||
} catch (err) {
|
||
showToast('' + err.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
}
|
||
})();
|
||
}
|
||
|
||
// prefillFromKeboolaTable is already inside the outer Phase F2
|
||
// guard (the data_source_type keboola Jinja `if` above) — it only
|
||
// fires from a button inside the Keboola Edit modal that itself
|
||
// only renders when data_source_type == 'keboola'. The redundant
|
||
// nested guard was dropped during the rebase onto main; main
|
||
// never had it.
|
||
function prefillFromKeboolaTable(textareaId) {
|
||
// Edit-modal callers may pass an editKbBucket / editKbSourceTable
|
||
// pair instead of the Register modal's kbBucket / kbSourceTable.
|
||
// Detect the modal via the textarea id prefix.
|
||
var prefix = textareaId.indexOf('editKb') === 0 ? 'editKb' : 'kb';
|
||
var bucket = (document.getElementById(prefix + 'Bucket').value || '').trim();
|
||
var sourceTable = (document.getElementById(prefix + 'SourceTable').value || '').trim();
|
||
if (!bucket || !sourceTable) {
|
||
showToast('Fill bucket + source table first', 'error');
|
||
return;
|
||
}
|
||
var ta = document.getElementById(textareaId);
|
||
if (ta.value.trim()) {
|
||
if (!confirm('Replace existing SQL?')) return;
|
||
}
|
||
ta.value = 'SELECT *\nFROM kbc."' + bucket + '"."' + sourceTable + '"\nWHERE -- your filter here';
|
||
}
|
||
{% endif %}{# data_source_type == 'keboola' — Phase F2 edit modal + prefill #}
|
||
|
||
// C3: removed dead helper _buildKeboolaLegacyPayload — the Phase F
|
||
// _buildKeboolaPayload (above) replaced it.
|
||
|
||
function _getBqAccessMode() {
|
||
// Q1 radio. Default 'live' if nothing's checked yet (model-validator
|
||
// safety net for the initial render).
|
||
var el = document.querySelector('input[name="bqAccessMode"]:checked');
|
||
return el ? el.value : 'live';
|
||
}
|
||
|
||
function _getBqSyncMode() {
|
||
// Q2 radio (only meaningful when access mode is 'synced').
|
||
var el = document.querySelector('input[name="bqSyncMode"]:checked');
|
||
return el ? el.value : 'whole';
|
||
}
|
||
|
||
function _buildBigQueryPayload() {
|
||
// Two-question form maps to backend `query_mode`:
|
||
// live → query_mode='remote' (server auto-detects
|
||
// BASE TABLE vs VIEW)
|
||
// synced/whole → query_mode='materialized' (auto SELECT *)
|
||
// synced/custom → query_mode='materialized' (admin SQL)
|
||
// The UI never asks "Table vs View" — that's a server-side detail.
|
||
var accessMode = _getBqAccessMode();
|
||
var syncMode = _getBqSyncMode();
|
||
var viewName = document.getElementById('bqViewName').value.trim();
|
||
var description = document.getElementById('bqDescription').value.trim() || null;
|
||
var folder = document.getElementById('bqFolder').value.trim() || null;
|
||
var syncSchedule = document.getElementById('bqSyncSchedule').value.trim() || null;
|
||
|
||
if (accessMode === 'synced' && syncMode === 'custom') {
|
||
return {
|
||
name: viewName,
|
||
source_type: 'bigquery',
|
||
query_mode: 'materialized',
|
||
source_query: document.getElementById('bqSourceQuery').value.trim(),
|
||
profile_after_sync: false,
|
||
description: description,
|
||
folder: folder,
|
||
sync_schedule: syncSchedule,
|
||
};
|
||
}
|
||
|
||
var dataset = document.getElementById('bqDataset').value.trim();
|
||
var sourceTable = document.getElementById('bqSourceTable').value.trim();
|
||
|
||
if (accessMode === 'synced' && syncMode === 'whole') {
|
||
// Whole-table sync. We don't ship the project to the browser, so
|
||
// the SQL uses DuckDB three-part syntax against the materialize
|
||
// session's ATTACH alias. Native BQ dry-run can't parse this form
|
||
// (DuckDB identifier quoting), so the cost guardrail falls
|
||
// fail-open with a warning — operator who needs the cap to engage
|
||
// picks Custom query and writes backtick-quoted native BQ
|
||
// identifiers.
|
||
//
|
||
// Issue #266: also persist bucket+source_table on the row so the
|
||
// Edit modal can pre-fill those inputs on a subsequent open. Pre-
|
||
// #266 the register flow only sent source_query, leaving bucket=
|
||
// NULL in the registry; the Edit modal then loaded empty inputs
|
||
// and an admin saving with the visible empty fields would
|
||
// synthesize the broken `SELECT * FROM bq."".""` SQL.
|
||
return {
|
||
name: viewName || sourceTable,
|
||
source_type: 'bigquery',
|
||
query_mode: 'materialized',
|
||
bucket: dataset,
|
||
source_table: sourceTable,
|
||
source_query: 'SELECT * FROM bq."' + dataset + '"."' + sourceTable + '"',
|
||
profile_after_sync: false,
|
||
description: description,
|
||
folder: folder,
|
||
sync_schedule: syncSchedule,
|
||
};
|
||
}
|
||
|
||
// Live access — server auto-detects BASE TABLE vs VIEW at register
|
||
// time, so the UI doesn't make the operator pick.
|
||
return {
|
||
name: viewName || sourceTable,
|
||
source_type: 'bigquery',
|
||
bucket: dataset,
|
||
source_table: sourceTable,
|
||
query_mode: 'remote',
|
||
profile_after_sync: false,
|
||
description: description,
|
||
folder: folder,
|
||
sync_schedule: syncSchedule,
|
||
};
|
||
}
|
||
|
||
function onBqAccessModeChange() {
|
||
// Q1: toggle live ↔ synced. Q2 (sync mode) is meaningful only when
|
||
// synced; default it to 'whole' on first reveal so the form stays
|
||
// consistent without forcing the operator to click twice.
|
||
var accessMode = _getBqAccessMode();
|
||
var liveFields = document.querySelectorAll('.bq-access-live');
|
||
var syncedFields = document.querySelectorAll('.bq-access-synced');
|
||
liveFields.forEach(function(el) {
|
||
el.style.display = (accessMode === 'live') ? '' : 'none';
|
||
});
|
||
syncedFields.forEach(function(el) {
|
||
el.style.display = (accessMode === 'synced') ? '' : 'none';
|
||
});
|
||
// Q2 is fresh on first reveal; trigger its handler to apply the
|
||
// source-table vs source-custom visibility rules.
|
||
if (accessMode === 'synced') {
|
||
onBqSyncModeChange();
|
||
} else {
|
||
// Live mode: show source-table fields, hide custom-SQL textarea.
|
||
document.querySelectorAll('.bq-source-table').forEach(function(el) {
|
||
el.style.display = '';
|
||
});
|
||
document.querySelectorAll('.bq-source-custom').forEach(function(el) {
|
||
el.style.display = 'none';
|
||
});
|
||
}
|
||
}
|
||
|
||
function onBqSyncModeChange() {
|
||
// Q2: toggle whole-table ↔ custom-SQL. Whole reuses the
|
||
// dataset/source-table inputs (server-side SELECT *), Custom shows
|
||
// the SQL textarea. Only fires when access mode is already 'synced'.
|
||
var syncMode = _getBqSyncMode();
|
||
var tableFields = document.querySelectorAll('.bq-source-table');
|
||
var customFields = document.querySelectorAll('.bq-source-custom');
|
||
tableFields.forEach(function(el) {
|
||
el.style.display = (syncMode === 'whole') ? '' : 'none';
|
||
});
|
||
customFields.forEach(function(el) {
|
||
el.style.display = (syncMode === 'custom') ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
// The discover / list-tables / prefill helpers are shared between the
|
||
// Register and Edit modals. The default datalist + input ids match the
|
||
// Register modal; Edit-modal callers pass their own ids so the
|
||
// autocomplete populates the right datalist and reads from the right
|
||
// dataset input.
|
||
|
||
function discoverBqDatasets(datalistId) {
|
||
// GET /api/admin/discover-tables (no `dataset`) → list datasets in
|
||
// the configured BQ project. Populate the named <datalist> so the
|
||
// dataset input shows them as autocomplete suggestions. Endpoint
|
||
// routes through BqAccess so config / auth errors come back as the
|
||
// standard {error, kind, details} shape.
|
||
var dlId = datalistId || 'bqDatasetList';
|
||
fetch('/api/admin/discover-tables')
|
||
.then(function(r) {
|
||
if (!r.ok) return r.json().then(function(d) {
|
||
var msg = (d && d.detail && d.detail.error) || (d && d.detail) || 'BQ discovery failed';
|
||
throw new Error(msg);
|
||
});
|
||
return r.json();
|
||
})
|
||
.then(function(data) {
|
||
var dl = document.getElementById(dlId);
|
||
dl.innerHTML = '';
|
||
(data.datasets || []).forEach(function(ds) {
|
||
var opt = document.createElement('option');
|
||
opt.value = ds.dataset_id;
|
||
opt.label = ds.full_id || ds.dataset_id;
|
||
dl.appendChild(opt);
|
||
});
|
||
showToast('Loaded ' + (data.count || 0) + ' datasets', 'success');
|
||
})
|
||
.catch(function(err) {
|
||
showToast(err.message || 'Discovery failed', 'error');
|
||
});
|
||
}
|
||
|
||
function discoverBqTables(datasetInputId, tablesDatalistId) {
|
||
// GET /api/admin/discover-tables?dataset=NAME → list tables + views
|
||
// in the dataset. Two-step (dataset → tables) avoids paying the
|
||
// per-dataset list_tables() cost up front on big projects.
|
||
var inId = datasetInputId || 'bqDataset';
|
||
var dlId = tablesDatalistId || 'bqTableList';
|
||
var dataset = document.getElementById(inId).value.trim();
|
||
if (!dataset) {
|
||
showToast('Fill Dataset first', 'error');
|
||
return;
|
||
}
|
||
fetch('/api/admin/discover-tables?dataset=' + encodeURIComponent(dataset))
|
||
.then(function(r) {
|
||
if (!r.ok) return r.json().then(function(d) {
|
||
var msg = (d && d.detail && d.detail.error) || (d && d.detail) || 'BQ table discovery failed';
|
||
throw new Error(msg);
|
||
});
|
||
return r.json();
|
||
})
|
||
.then(function(data) {
|
||
var dl = document.getElementById(dlId);
|
||
dl.innerHTML = '';
|
||
(data.tables || []).forEach(function(t) {
|
||
var opt = document.createElement('option');
|
||
opt.value = t.table_id;
|
||
// BQ entity types: TABLE, VIEW, MATERIALIZED_VIEW,
|
||
// EXTERNAL, SNAPSHOT — surface so the operator can
|
||
// pick the right entity option.
|
||
opt.label = t.table_id + (t.table_type ? ' (' + t.table_type + ')' : '');
|
||
dl.appendChild(opt);
|
||
});
|
||
showToast('Loaded ' + (data.count || 0) + ' tables in ' + dataset, 'success');
|
||
})
|
||
.catch(function(err) {
|
||
showToast(err.message || 'Table list failed', 'error');
|
||
});
|
||
}
|
||
|
||
function prefillFromTable(textareaId) {
|
||
// Convenience for the Custom SQL path: prompt for project.dataset.table
|
||
// and prefill `SELECT * FROM \`...\`` so the operator only edits the
|
||
// WHERE / projection. We can't know the project from the form (it's
|
||
// server-side config), so the prompt accepts both `dataset.table` and
|
||
// `project.dataset.table`. Empty / cancel → no change.
|
||
var taId = textareaId || 'bqSourceQuery';
|
||
var ta = document.getElementById(taId);
|
||
var existing = ta.value.trim();
|
||
if (existing && !confirm('SQL field is not empty — overwrite with prefill?')) {
|
||
return;
|
||
}
|
||
var ref = window.prompt(
|
||
'Enter the source table as `dataset.table` or `project.dataset.table` '
|
||
+ '(it will be wrapped in backticks):',
|
||
''
|
||
);
|
||
if (!ref) return;
|
||
ref = ref.trim().replace(/^`|`$/g, '');
|
||
var stub =
|
||
'SELECT *\n'
|
||
+ 'FROM `' + ref + '`\n'
|
||
+ 'WHERE -- TODO: filter or aggregate before the COPY runs (10 GiB cap)\n'
|
||
+ 'LIMIT 1000';
|
||
ta.value = stub;
|
||
}
|
||
|
||
// C3: removed dead entry points registerTable / _registerKeboolaTable
|
||
// that submitted the now-deleted #registerModal. The Keboola Register
|
||
// flow runs through #registerKeboolaModal → registerKeboolaTable().
|
||
|
||
function registerBqTable() {
|
||
// BQ tab modal entry point — runs the same two-step precheck →
|
||
// confirm flow against #registerBqSubmitBtn / #registerBqModal.
|
||
var btn = document.getElementById('registerBqSubmitBtn');
|
||
btn.disabled = true;
|
||
_registerBigQueryTable(btn);
|
||
}
|
||
|
||
function _registerBigQueryTable(btn) {
|
||
// Step 1 of two-step flow: precheck only. After precheck succeeds
|
||
// we surface row count / size / column count in the modal AND swap
|
||
// the primary button to "Register" — operator must explicitly
|
||
// click it to fire the actual register call. Pre-fix this chained
|
||
// precheck → register in a single promise, so the operator never
|
||
// got to review the summary before the row was committed (review
|
||
// IMPORTANT 4 in #119).
|
||
btn.textContent = 'Checking source...';
|
||
var payload = _buildBigQueryPayload();
|
||
var summary = document.getElementById('bqPrecheckSummary');
|
||
var summaryText = document.getElementById('bqPrecheckSummaryText');
|
||
|
||
fetch('/api/admin/register-table/precheck', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
})
|
||
.then(function(r) {
|
||
if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || 'Precheck failed'); });
|
||
return r.json();
|
||
})
|
||
.then(function(data) {
|
||
// Surface the source-side metrics so the operator can sanity-
|
||
// check the dataset/table before committing the row.
|
||
var t = data.table || {};
|
||
if (summary && summaryText) {
|
||
summary.style.display = '';
|
||
summaryText.textContent =
|
||
formatNumber(t.rows) + ' rows, ' +
|
||
formatSize(t.size_bytes) + ', ' +
|
||
(t.column_count != null ? t.column_count : (t.columns || []).length) + ' columns';
|
||
}
|
||
// Swap the primary button from "Register Table" (which fired
|
||
// the precheck) to "Register" (which fires the actual register
|
||
// call). Reusing the same modal means the operator can still
|
||
// hit Cancel or close without committing.
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register';
|
||
btn.onclick = function() { _confirmRegisterBigQueryTable(btn, payload); };
|
||
})
|
||
.catch(function(err) {
|
||
showToast('Precheck failed: ' + err.message, 'error');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register Table';
|
||
});
|
||
}
|
||
|
||
function _confirmRegisterBigQueryTable(btn, payload) {
|
||
// Step 2 of the two-step BQ flow: actually POST /register-table.
|
||
// Reached only after the operator has reviewed the precheck
|
||
// summary in the modal and clicked the (relabeled) Register button.
|
||
btn.disabled = true;
|
||
btn.textContent = 'Registering...';
|
||
fetch('/api/admin/register-table', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
})
|
||
.then(function(r) {
|
||
// 200 (synchronous materialize) and 202 (BG materialize) are
|
||
// success; 500 with a `rebuild_failed` body is the new failure
|
||
// mode where the row is in the registry but the view wasn't
|
||
// created. Surface the error verbatim so the operator can fix
|
||
// it (typically a missing project in the overlay or auth
|
||
// missing bigquery.metadata.get).
|
||
return r.json().then(function(d) {
|
||
if (!r.ok) {
|
||
var msg = d.detail || d.message || 'Registration failed';
|
||
if (d.errors && d.errors.length) {
|
||
msg += ' (' + d.errors.length + ' error' + (d.errors.length > 1 ? 's' : '') + ')';
|
||
}
|
||
throw new Error(msg);
|
||
}
|
||
closeRegisterBqModal();
|
||
if (r.status === 202) {
|
||
showToast('Registration accepted, materializing in background', 'success');
|
||
} else {
|
||
showToast('Queryable as ' + (d.view_name || d.id || payload.name), 'success');
|
||
}
|
||
loadRegistry();
|
||
});
|
||
})
|
||
.catch(function(err) {
|
||
showToast('Registration failed: ' + err.message, 'error');
|
||
})
|
||
.finally(function() {
|
||
// Restore the modal's default button state — the operator may
|
||
// close + reopen the modal, and openRegisterModal also resets
|
||
// onclick back to registerBqTable.
|
||
btn.disabled = false;
|
||
btn.textContent = 'Register Table';
|
||
btn.onclick = registerBqTable;
|
||
});
|
||
}
|
||
|
||
// Back-compat entry point — kept for any external wiring that may
|
||
// still call openBigQueryRegisterModal(). Phase E: routes through
|
||
// the new BQ-tab modal.
|
||
function openBigQueryRegisterModal() {
|
||
openRegisterModal('bigquery');
|
||
}
|
||
|
||
// ── Edit Modal ──────────────────────────────────────────────
|
||
|
||
// Original mode captured at openEditModal-time so the access-mode
|
||
// change handler can detect "operator just switched it" vs "loaded
|
||
// from registry" and only surface the destructive-edit warning on a
|
||
// real change.
|
||
let _editOriginalQueryMode = null;
|
||
|
||
function _getEditBqAccessMode() {
|
||
var el = document.querySelector('input[name="editBqAccessMode"]:checked');
|
||
return el ? el.value : 'live';
|
||
}
|
||
|
||
function _getEditBqSyncMode() {
|
||
var el = document.querySelector('input[name="editBqSyncMode"]:checked');
|
||
return el ? el.value : 'whole';
|
||
}
|
||
|
||
function _setEditBqRadio(name, value) {
|
||
var el = document.querySelector('input[name="' + name + '"][value="' + value + '"]');
|
||
if (el) el.checked = true;
|
||
}
|
||
|
||
// ── Edit-modal architecture (v55 review of #L61) ──────────────────
|
||
// We dispatch by ``table.source_type`` to one of three per-source
|
||
// modals because their inner forms genuinely differ:
|
||
//
|
||
// * BQ: access-mode radios (live / synced), sync-mode radios
|
||
// (whole / custom SQL), dataset + source_table inputs.
|
||
// * Keboola: storage-API bucket + table inputs, sync_strategy enum,
|
||
// primary_key chip list, sync_schedule cron.
|
||
// * Generic: description, folder, strategy, primary_key (catch-all
|
||
// fallback for jira / future connectors).
|
||
//
|
||
// What's *already* shared lives in helpers:
|
||
// * ``_hydrateEditPackagesChips`` — Data Packages chip-input
|
||
// fill-in (all three modals).
|
||
// * ``_diffApplyPackageMembership`` — minimal POST/DELETE delta
|
||
// against /api/admin/data-packages/{id}/tables (all three save
|
||
// handlers).
|
||
// * ``_closeEditModalById`` — uniform close/reset (added v55).
|
||
//
|
||
// A fourth "one modal with conditional sections" design would shave
|
||
// ~40% of the form HTML but multiply state-hydration bugs (stale
|
||
// field state when source_type-switches re-show different inputs).
|
||
// The per-source modals + shared helpers pattern is the explicit
|
||
// architecture; see ``openEditModal`` for the dispatcher.
|
||
function openEditModal(table) {
|
||
var sourceType = (table.source_type || '').toLowerCase();
|
||
if (sourceType === 'bigquery') {
|
||
return _openEditBqModal(table);
|
||
}
|
||
if (sourceType === 'keboola') {
|
||
return openEditKeboolaModal(table);
|
||
}
|
||
return _openEditGenericModal(table);
|
||
}
|
||
|
||
// Single close/reset helper used by all three per-source modal
|
||
// wrappers. Resets currentEditTableId + _editOriginalQueryMode so a
|
||
// subsequent open() doesn't inherit stale state from the previous
|
||
// modal-source.
|
||
function _closeEditModalById(modalId) {
|
||
var el = document.getElementById(modalId);
|
||
if (el) el.classList.remove('active');
|
||
currentEditTableId = null;
|
||
_editOriginalQueryMode = null;
|
||
}
|
||
|
||
function _openEditBqModal(table) {
|
||
// Populate the BQ-tab Edit modal from a registry row. Mirror of
|
||
// populateEditModal's BQ branch from before C2 — same query_mode →
|
||
// radio mapping, same field bindings, but writes to the new
|
||
// #editBqModal scope.
|
||
currentEditTableId = table.id;
|
||
document.getElementById('editBqTableId').value = table.id || '';
|
||
var badge = document.getElementById('editBqSourceTypeBadge');
|
||
if (badge) badge.textContent = (table.source_type || 'bigquery');
|
||
|
||
var qmode = (table.query_mode || 'remote');
|
||
var sq = (table.source_query || '');
|
||
// Issue #266: register-time the whole-table branch omits
|
||
// bucket/source_table from the JSON payload (only source_query is
|
||
// sent), so existing whole-table materialized rows persist with
|
||
// bucket=NULL in the registry. When the Edit modal then reads
|
||
// table.bucket on those rows it gets null → empty input → admin
|
||
// saves a broken `SELECT * FROM bq."".""` SQL. Parse the source_query
|
||
// to recover the dataset+table for the pre-fill. Same regex shape
|
||
// we already use to detect whole-table mode below.
|
||
var SELECT_STAR_RE = /^\s*SELECT\s+\*\s+FROM\s+bq\."([^"]+)"\."([^"]+)"\s*$/i;
|
||
var isAutoSelectStar = SELECT_STAR_RE.test(sq);
|
||
if (qmode === 'materialized') {
|
||
_setEditBqRadio('editBqAccessMode', 'synced');
|
||
_setEditBqRadio('editBqSyncMode', isAutoSelectStar ? 'whole' : 'custom');
|
||
} else {
|
||
_setEditBqRadio('editBqAccessMode', 'live');
|
||
_setEditBqRadio('editBqSyncMode', 'whole');
|
||
}
|
||
|
||
// Pre-fill dataset/table inputs. For whole-table materialized rows
|
||
// without persisted bucket/source_table (pre-#266 register state),
|
||
// recover them from the SQL.
|
||
var preDataset = table.bucket || '';
|
||
var preSourceTable = table.source_table || '';
|
||
if (!preDataset && !preSourceTable && isAutoSelectStar) {
|
||
var m = sq.match(SELECT_STAR_RE);
|
||
if (m) { preDataset = m[1]; preSourceTable = m[2]; }
|
||
}
|
||
document.getElementById('editBqDataset').value = preDataset;
|
||
document.getElementById('editBqSourceTable').value = preSourceTable;
|
||
document.getElementById('editBqSourceQuery').value = sq;
|
||
document.getElementById('editBqSyncSchedule').value = table.sync_schedule || '';
|
||
document.getElementById('editBqDescription').value = table.description || '';
|
||
document.getElementById('editBqFolder').value = table.folder || '';
|
||
document.getElementById('editBqModeWarning').style.display = 'none';
|
||
_editOriginalQueryMode = qmode;
|
||
onEditBqAccessModeChange(); // fire to set field visibility
|
||
|
||
var btn = document.getElementById('editBqSubmitBtn');
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
|
||
// Reset + hydrate the Data Packages chip-input (parity with the
|
||
// legacy edit modal — see _openEditGenericModal for full notes).
|
||
_editBqOriginalPackageIds = new Set();
|
||
var bqChipHost = document.getElementById('editBqPackagesChips');
|
||
if (bqChipHost) {
|
||
if (typeof bqChipHost.clearChips === 'function') bqChipHost.clearChips();
|
||
_hydrateEditPackagesChips(table.id, bqChipHost, _editBqOriginalPackageIds);
|
||
}
|
||
|
||
document.getElementById('editBqModal').classList.add('active');
|
||
}
|
||
|
||
function closeEditBqModal() {
|
||
_closeEditModalById('editBqModal');
|
||
}
|
||
|
||
// Tracks the set of Data Package ids each edit modal was opened
|
||
// with, so each save handler can emit the minimal add/remove deltas
|
||
// against /api/admin/data-packages/{id}/tables instead of replaying
|
||
// every chip. One Set per modal because the BQ + Keboola + legacy
|
||
// modals can coexist in the DOM and need independent origin state.
|
||
var _editGenericOriginalPackageIds = new Set();
|
||
var _editBqOriginalPackageIds = new Set();
|
||
var _editKbOriginalPackageIds = new Set();
|
||
|
||
function _openEditGenericModal(table) {
|
||
// Catch-all fallback for source_types that aren't bigquery or keboola
|
||
// (e.g. jira, internal, future connectors). Carries the Strategy +
|
||
// Primary Key + Description + Folder fields and a Data Packages
|
||
// chip-input (parity with BQ). Renamed from _openEditLegacyModal
|
||
// — "Legacy" was misleading; this is the default, not a deprecated
|
||
// path.
|
||
currentEditTableId = table.id;
|
||
document.getElementById('editTableId').value = table.id || '';
|
||
var sourceType = (table.source_type || '').toLowerCase();
|
||
document.getElementById('editSourceTypeBadge').textContent = sourceType || '—';
|
||
document.getElementById('editDescription').value = table.description || '';
|
||
document.getElementById('editFolder').value = table.folder || '';
|
||
document.getElementById('editStrategy').value = table.sync_strategy || 'full_refresh';
|
||
document.getElementById('editPrimaryKey').value = (table.primary_key || []).join(', ');
|
||
_editOriginalQueryMode = null;
|
||
document.getElementById('editSubmitBtn').disabled = false;
|
||
|
||
// Hydrate Data Packages chip-input with current memberships.
|
||
// chip-input.js inits idempotently at DOMContentLoaded; we add
|
||
// chips via the public `.addChip()` API after a fresh memberships
|
||
// fetch, after clearing whatever was left from a prior edit.
|
||
_editGenericOriginalPackageIds = new Set();
|
||
var chipHost = document.getElementById('editGenericPackagesChips');
|
||
if (chipHost) {
|
||
// Reset chips between edits — clear hidden + visible state.
|
||
var hidden = chipHost.querySelector('input[type="hidden"]');
|
||
if (hidden) hidden.value = '[]';
|
||
var chipsRow = chipHost.querySelector('div');
|
||
if (chipsRow) chipsRow.innerHTML = '';
|
||
// selected[] is closure-private in chip-input.js — easiest way
|
||
// to clear it is Backspace simulation, but that's brittle.
|
||
// Instead we wire a `clearChips()` helper if exposed; fall
|
||
// back to wiping `dataset.selected` and re-init.
|
||
if (typeof chipHost.clearChips === 'function') {
|
||
chipHost.clearChips();
|
||
}
|
||
_hydrateGenericEditPackagesChips(table.id, chipHost);
|
||
}
|
||
|
||
document.getElementById('editModal').classList.add('active');
|
||
}
|
||
|
||
async function _hydrateGenericEditPackagesChips(tableId, chipHost) {
|
||
return _hydrateEditPackagesChips(tableId, chipHost, _editGenericOriginalPackageIds);
|
||
}
|
||
|
||
// Shared chip-input hydration for any edit modal. Pulls the package
|
||
// list, fetches members in parallel, and pre-fills `chipHost` with
|
||
// every package containing `tableId`. The matched ids are stashed
|
||
// in `originalIdsSet` so the save handler can diff against the
|
||
// current chip selection and emit minimal POST/DELETE calls.
|
||
// ~N small fetches; fine for instances with <50 packages.
|
||
async function _hydrateEditPackagesChips(tableId, chipHost, originalIdsSet) {
|
||
try {
|
||
var r = await fetch('/api/admin/data-packages', { credentials: 'same-origin' });
|
||
if (!r.ok) return;
|
||
var pkgs = await r.json();
|
||
var members = await Promise.all(pkgs.map(function(p) {
|
||
return fetch('/api/admin/data-packages/' + encodeURIComponent(p.id),
|
||
{ credentials: 'same-origin' })
|
||
.then(function(rr) { return rr.ok ? rr.json() : null; })
|
||
.catch(function() { return null; });
|
||
}));
|
||
members.forEach(function(det, i) {
|
||
if (!det) return;
|
||
var ids = (det.tables || []).map(function(t) { return t.id; });
|
||
if (ids.indexOf(tableId) === -1) return;
|
||
originalIdsSet.add(pkgs[i].id);
|
||
if (chipHost.addChip) {
|
||
chipHost.addChip({ id: pkgs[i].id, name: pkgs[i].name });
|
||
}
|
||
});
|
||
} catch (_) {
|
||
// Non-fatal: the field stays empty and admin can re-pick.
|
||
}
|
||
}
|
||
|
||
// Shared delta sync — diffs the chip-input's current selection vs
|
||
// the originally-loaded set, emits minimal POST/DELETE against the
|
||
// junction endpoint, and returns the failure count so the calling
|
||
// save handler can surface it in the toast.
|
||
async function _diffApplyPackageMembership(tableId, chipHost, originalIdsSet) {
|
||
if (!chipHost || !chipHost.getSelectedIds) return 0;
|
||
var nowIds = new Set(chipHost.getSelectedIds());
|
||
var calls = [];
|
||
nowIds.forEach(function(id) {
|
||
if (!originalIdsSet.has(id)) {
|
||
calls.push(fetch('/api/admin/data-packages/' + encodeURIComponent(id) + '/tables', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify({ table_id: tableId }),
|
||
}));
|
||
}
|
||
});
|
||
originalIdsSet.forEach(function(id) {
|
||
if (!nowIds.has(id)) {
|
||
calls.push(fetch('/api/admin/data-packages/' + encodeURIComponent(id)
|
||
+ '/tables/' + encodeURIComponent(tableId),
|
||
{ method: 'DELETE', credentials: 'same-origin' }));
|
||
}
|
||
});
|
||
if (!calls.length) return 0;
|
||
var results = await Promise.allSettled(calls);
|
||
return results.filter(function(x) {
|
||
return x.status === 'rejected' || (x.value && !x.value.ok);
|
||
}).length;
|
||
}
|
||
|
||
function onEditBqAccessModeChange() {
|
||
var accessMode = _getEditBqAccessMode();
|
||
document.querySelectorAll('.bq-edit-access-synced').forEach(function(el) {
|
||
el.style.display = (accessMode === 'synced') ? '' : 'none';
|
||
});
|
||
|
||
if (accessMode === 'synced') {
|
||
onEditBqSyncModeChange();
|
||
} else {
|
||
// Live: dataset+table inputs visible, SQL textarea hidden.
|
||
document.querySelectorAll('.bq-edit-source-table').forEach(function(el) {
|
||
el.style.display = '';
|
||
});
|
||
document.querySelectorAll('.bq-edit-source-custom').forEach(function(el) {
|
||
el.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
// Mode-switch warning: only fire when the operator actually flipped
|
||
// access mode from what was loaded — typo-fix edits stay quiet.
|
||
var newMode = (accessMode === 'synced') ? 'materialized' : 'remote';
|
||
var warn = document.getElementById('editBqModeWarning');
|
||
if (_editOriginalQueryMode && newMode !== _editOriginalQueryMode) {
|
||
var msg;
|
||
if (_editOriginalQueryMode === 'materialized' && newMode === 'remote') {
|
||
msg = '⚠ Switching Synced locally → Live from BigQuery will drop the materialized parquet on the next sync. Analysts who already pulled this table will start getting live BQ queries instead of a local copy; the sync schedule becomes ignored.';
|
||
} else {
|
||
msg = '⚠ Switching Live from BigQuery → Synced locally: the next scheduled sync runs a SELECT and writes a parquet. Analysts will start reading the local copy on their next `agnes pull`. Remember to set a sync schedule.';
|
||
}
|
||
warn.textContent = msg;
|
||
warn.style.display = '';
|
||
} else {
|
||
warn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function onEditBqSyncModeChange() {
|
||
var syncMode = _getEditBqSyncMode();
|
||
document.querySelectorAll('.bq-edit-source-table').forEach(function(el) {
|
||
el.style.display = (syncMode === 'whole') ? '' : 'none';
|
||
});
|
||
document.querySelectorAll('.bq-edit-source-custom').forEach(function(el) {
|
||
el.style.display = (syncMode === 'custom') ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function closeEditModal() {
|
||
_closeEditModalById('editModal');
|
||
}
|
||
|
||
async function saveTableEdit() {
|
||
// Generic / catch-all save handler — runs for source_types that
|
||
// aren't bigquery (handled by saveBqTabEdit) or keboola (handled
|
||
// by saveKeboolaTabEdit). Currently covers jira-style rows.
|
||
if (!currentEditTableId) return;
|
||
|
||
var btn = document.getElementById('editSubmitBtn');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Saving...';
|
||
|
||
var pk = document.getElementById('editPrimaryKey').value.trim();
|
||
var primaryKey = pk
|
||
? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
|
||
: [];
|
||
var payload = {
|
||
sync_strategy: document.getElementById('editStrategy').value,
|
||
primary_key: primaryKey,
|
||
description:
|
||
document.getElementById('editDescription').value.trim() || null,
|
||
folder: document.getElementById('editFolder').value.trim() || null,
|
||
};
|
||
|
||
try {
|
||
var r = await fetch('/api/admin/registry/' + encodeURIComponent(currentEditTableId), {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
if (!r.ok) {
|
||
var d = await r.json().catch(function() { return {}; });
|
||
throw new Error(d.detail || d.error || 'Update failed');
|
||
}
|
||
|
||
// Diff chip selection vs original — emit minimal POST/DELETE
|
||
// against the junction. Errors surface via toast but don't
|
||
// roll back the table PUT.
|
||
var legacyFails = await _diffApplyPackageMembership(
|
||
currentEditTableId,
|
||
document.getElementById('editGenericPackagesChips'),
|
||
_editGenericOriginalPackageIds
|
||
);
|
||
if (legacyFails > 0) {
|
||
showToast(legacyFails + ' package membership change(s) failed', 'error');
|
||
}
|
||
|
||
closeEditModal();
|
||
showToast('Table updated successfully', 'success');
|
||
loadRegistry();
|
||
if (typeof loadAdminTablesLayout === 'function') {
|
||
loadAdminTablesLayout();
|
||
}
|
||
} catch (err) {
|
||
showToast('Update failed: ' + err.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
}
|
||
}
|
||
|
||
function saveBqTabEdit() {
|
||
// Save handler for the relocated BQ Edit modal (#editBqModal).
|
||
// Mirrors the pre-C2 BQ branch of saveTableEdit() but reads from
|
||
// the BQ-modal-scoped fields (editBqDescription / editBqFolder).
|
||
if (!currentEditTableId) return;
|
||
|
||
var btn = document.getElementById('editBqSubmitBtn');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Saving...';
|
||
|
||
// Two-question state machine — same as Register modal:
|
||
// live → query_mode='remote'
|
||
// synced/whole → materialized + auto SELECT *
|
||
// synced/custom → materialized + admin SQL
|
||
var accessMode = _getEditBqAccessMode();
|
||
var syncMode = _getEditBqSyncMode();
|
||
var dataset = document.getElementById('editBqDataset').value.trim();
|
||
var sourceTable = document.getElementById('editBqSourceTable').value.trim();
|
||
|
||
var payload = {
|
||
description: document.getElementById('editBqDescription').value.trim() || null,
|
||
folder: document.getElementById('editBqFolder').value.trim() || null,
|
||
source_type: 'bigquery',
|
||
sync_schedule:
|
||
document.getElementById('editBqSyncSchedule').value.trim() || null,
|
||
};
|
||
|
||
if (accessMode === 'synced' && syncMode === 'custom') {
|
||
payload.query_mode = 'materialized';
|
||
payload.source_query =
|
||
document.getElementById('editBqSourceQuery').value.trim();
|
||
// Issue #266: only clear bucket/source_table on a genuine mode
|
||
// flip (was non-materialized → now custom-SQL materialized). The
|
||
// original pre-#266 code nulled unconditionally on every save —
|
||
// so an admin editing only the description on an already-
|
||
// materialized custom-SQL row would silently wipe bucket/
|
||
// source_table. Destructive for rows that had them persisted
|
||
// (whole-table-then-switched-to-custom, or curl-set via API).
|
||
// On no-op saves (mode didn't change since modal load), omit
|
||
// the keys entirely so the PUT handler's `exclude_unset=True`
|
||
// preserves the existing values in the registry.
|
||
if (_editOriginalQueryMode !== 'materialized') {
|
||
payload.bucket = null;
|
||
payload.source_table = null;
|
||
}
|
||
} else if (accessMode === 'synced' && syncMode === 'whole') {
|
||
payload.query_mode = 'materialized';
|
||
payload.source_query =
|
||
'SELECT * FROM bq."' + dataset + '"."' + sourceTable + '"';
|
||
payload.bucket = dataset || null;
|
||
payload.source_table = sourceTable || null;
|
||
} else {
|
||
// Live.
|
||
payload.query_mode = 'remote';
|
||
payload.bucket = dataset || null;
|
||
payload.source_table = sourceTable || null;
|
||
payload.source_query = null;
|
||
}
|
||
|
||
(async function () {
|
||
try {
|
||
var r = await fetch('/api/admin/registry/' + encodeURIComponent(currentEditTableId), {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
if (!r.ok) {
|
||
var d = await r.json().catch(function() { return {}; });
|
||
throw new Error(d.detail || d.error || 'Update failed');
|
||
}
|
||
// Diff Data Package chip selection vs original.
|
||
var bqFails = await _diffApplyPackageMembership(
|
||
currentEditTableId,
|
||
document.getElementById('editBqPackagesChips'),
|
||
_editBqOriginalPackageIds
|
||
);
|
||
if (bqFails > 0) {
|
||
showToast(bqFails + ' package membership change(s) failed', 'error');
|
||
}
|
||
closeEditBqModal();
|
||
showToast('Table updated successfully', 'success');
|
||
loadRegistry();
|
||
if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
|
||
} catch (err) {
|
||
showToast('Update failed: ' + err.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Save Changes';
|
||
}
|
||
})();
|
||
}
|
||
|
||
// ── Registry (legacy shim) ──────────────────────────────────
|
||
// Pre-rewrite, loadRegistry() filled four per-tab listing divs
|
||
// (bqTableListing, kbTableListing, jiraTableListing, internalTableListing).
|
||
// Those listings were deleted with the connector tabs. Existing register /
|
||
// edit / delete flows still call loadRegistry() to refresh the page after
|
||
// a mutation — delegate to loadAdminTablesLayout() which now renders the
|
||
// unified package-centric view from the same /api/admin/registry payload.
|
||
function loadRegistry() {
|
||
if (typeof loadAdminTablesLayout === 'function') {
|
||
return loadAdminTablesLayout();
|
||
}
|
||
}
|
||
|
||
// Per-row Mode badge — tooltip mirrors the explanation in the
|
||
// Register modal so admins can hover instead of opening
|
||
// docs/admin/query-modes.md to remember which mode does what.
|
||
var _MODE_TOOLTIPS = {
|
||
local: 'Synced locally — DuckDB downloads to parquet on a schedule; analysts query the local copy via agnes pull.',
|
||
remote: 'Live from BigQuery — no download; queries go through the DuckDB BQ extension with the 5 GiB scan cap.',
|
||
materialized: 'Materialised SQL — scheduler runs admin SQL through DuckDB and writes the result to a parquet, distributed like a local table.',
|
||
internal: 'Internal agnes_* table backed by system.duckdb; read-only, seeded on app boot.',
|
||
};
|
||
function renderModeBadge(mode) {
|
||
var m = (mode || 'local').toLowerCase();
|
||
var cls = 'mode-badge mode-' + (['local','remote','materialized','internal'].indexOf(m) >= 0 ? m : 'local');
|
||
var tip = _MODE_TOOLTIPS[m] || '';
|
||
return '<span class="' + cls + '" title="' + escapeHtmlAttr(tip) + '">' + escapeHtml(m) + '</span>';
|
||
}
|
||
|
||
function renderRegistryListing(target, tables) {
|
||
if (!target) return;
|
||
if (tables.length === 0) {
|
||
target.innerHTML = '<div class="panel-body-empty">No tables registered yet.</div>';
|
||
return;
|
||
}
|
||
var html = '<table class="registry-table">';
|
||
html += '<thead><tr>';
|
||
html += '<th class="col-id">Table ID</th>';
|
||
html += '<th class="col-mode">Mode</th>';
|
||
html += '<th class="col-source">Source</th>';
|
||
html += '<th class="col-pk">Primary Key</th>';
|
||
html += '<th class="col-schedule">Schedule</th>';
|
||
html += '<th class="col-folder">Folder</th>';
|
||
html += '<th>Description</th>';
|
||
html += '<th class="col-registered">Registered</th>';
|
||
html += '<th class="col-status"></th>';
|
||
html += '<th class="col-actions">Actions</th>';
|
||
html += '</tr></thead><tbody>';
|
||
tables.forEach(function(table) {
|
||
html += '<tr>';
|
||
html += '<td class="col-id" title="' + escapeHtml(table.id) + '">' + escapeHtml(table.id) + '</td>';
|
||
html += '<td class="col-mode">' + renderModeBadge(table.query_mode) + '</td>';
|
||
|
||
// Source: bucket / source_table; em-dash when both empty (custom-SQL row).
|
||
var bucket = table.bucket || '';
|
||
var srcTable = table.source_table || '';
|
||
var sourceText = '';
|
||
if (bucket && srcTable) {
|
||
sourceText = bucket + ' / ' + srcTable;
|
||
} else if (bucket || srcTable) {
|
||
sourceText = bucket || srcTable;
|
||
}
|
||
var sourceCell = sourceText ? escapeHtml(sourceText) : '—';
|
||
html += '<td class="col-source" title="' + escapeHtml(sourceText) + '">' + sourceCell + '</td>';
|
||
|
||
html += '<td class="col-pk">' + escapeHtml((table.primary_key || []).join(', ') || '—') + '</td>';
|
||
html += '<td class="col-schedule">' + escapeHtml(table.sync_schedule || '—') + '</td>';
|
||
|
||
// Folder badge — '—' when null/empty.
|
||
if (table.folder) {
|
||
html += '<td class="col-folder"><span class="folder-badge">' + escapeHtml(table.folder) + '</span></td>';
|
||
} else {
|
||
html += '<td class="col-folder">—</td>';
|
||
}
|
||
|
||
var desc = unescapeShellQuoting(table.description || '');
|
||
html += '<td class="col-description" title="' + escapeHtml(desc) + '">' + escapeHtml(desc || '—') + '</td>';
|
||
|
||
// Registered: stacked email + date (first 10 chars of ISO timestamp).
|
||
var regBy = table.registered_by || '';
|
||
var regByDisplay = regBy;
|
||
if (regBy.length > 24 && regBy.indexOf('@') > 0) {
|
||
regByDisplay = regBy.split('@')[0];
|
||
}
|
||
var regAt = table.registered_at ? String(table.registered_at).slice(0, 10) : '';
|
||
html += '<td class="col-registered">';
|
||
html += '<div class="registered-by" title="' + escapeHtml(regBy) + '">' + (regByDisplay ? escapeHtml(regByDisplay) : '—') + '</div>';
|
||
html += '<div class="registered-at">' + escapeHtml(regAt || '') + '</div>';
|
||
html += '</td>';
|
||
|
||
// Status: warning icon when the last sync errored.
|
||
html += '<td class="col-status">';
|
||
if (table.last_sync_error) {
|
||
html += '<span title="' + escapeHtml(table.last_sync_error) + '">';
|
||
html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--error);"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
|
||
html += '</span>';
|
||
}
|
||
html += '</td>';
|
||
|
||
html += '<td class="col-actions"><div style="display:flex; gap:4px; justify-content:flex-end;">';
|
||
// Internal source tables (agnes_*) are seeded on every app
|
||
// boot from connectors/internal/registry.py — Edit/Delete
|
||
// would either no-op or be reverted on next start. Hide both
|
||
// actions; Manage access stays because RBAC is still
|
||
// per-table (internal tables auto-grant; the link still
|
||
// takes the admin to the access page if they want to inspect).
|
||
//
|
||
// Issue #265: HTML attribute values do not recognize backslash
|
||
// escapes the way JavaScript string literals do — use HTML-
|
||
// entity escape (`'` for `'`, plus `"`, `<`, `>`, `&`)
|
||
// via escapeHtmlAttr, the right encoding for an HTML attribute.
|
||
var isInternal = (table.source_type === 'internal');
|
||
if (!isInternal) {
|
||
html += '<button class="btn-icon" title="Edit" onclick=\'openEditModal(' + escapeHtmlAttr(JSON.stringify(table)) + ')\'>';
|
||
html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
|
||
html += '</button>';
|
||
}
|
||
// Manage access: deep-link to /admin/access pre-filtered to this table.
|
||
html += '<button class="btn-icon" title="Manage access" onclick="manageAccess('' + escapeHtmlAttr(table.id) + '')">';
|
||
html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
|
||
html += '</button>';
|
||
if (!isInternal) {
|
||
html += '<button class="btn-icon danger" title="Delete" onclick="deleteTable('' + escapeHtmlAttr(table.id) + '')">';
|
||
html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
|
||
html += '</button>';
|
||
}
|
||
html += '</div></td></tr>';
|
||
});
|
||
html += '</tbody></table>';
|
||
target.innerHTML = html;
|
||
}
|
||
|
||
// Deep-link from a table row to /admin/access scoped to this table_id.
|
||
// The /admin/access page reads window.location.hash on bootstrap and,
|
||
// when it matches `table:<id>`, pre-fills the resource filter so the
|
||
// operator lands on the just-clicked table once they pick a group.
|
||
function manageAccess(tableId) {
|
||
window.location.href = '/admin/access#table:' + encodeURIComponent(tableId);
|
||
}
|
||
|
||
function deleteTable(tableId) {
|
||
if (!confirm('Are you sure you want to unregister "' + tableId + '"?\n\nThis will remove it from sync and clean up user subscriptions.')) {
|
||
return;
|
||
}
|
||
|
||
// DELETE doesn't need a body — the API has no `version` field.
|
||
fetch('/api/admin/registry/' + encodeURIComponent(tableId), {
|
||
method: 'DELETE',
|
||
})
|
||
.then(function(r) {
|
||
// 204 No Content has an empty body, so don't .json() it.
|
||
if (r.status === 204) return null;
|
||
if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || d.error || 'Delete failed'); });
|
||
return r.json();
|
||
})
|
||
.then(function() {
|
||
showToast('Table unregistered successfully', 'success');
|
||
loadRegistry();
|
||
})
|
||
.catch(function(err) {
|
||
showToast('Delete failed: ' + err.message, 'error');
|
||
});
|
||
}
|
||
|
||
// ── Modal close on overlay click ────────────────────────────
|
||
|
||
var _registerBqModalEl = document.getElementById('registerBqModal');
|
||
if (_registerBqModalEl) {
|
||
_registerBqModalEl.addEventListener('click', function(e) {
|
||
if (e.target === this) closeRegisterBqModal();
|
||
});
|
||
}
|
||
|
||
var _registerKeboolaModalEl = document.getElementById('registerKeboolaModal');
|
||
if (_registerKeboolaModalEl) {
|
||
_registerKeboolaModalEl.addEventListener('click', function(e) {
|
||
if (e.target === this) closeRegisterKeboolaModal();
|
||
});
|
||
}
|
||
|
||
var _editKeboolaModalEl = document.getElementById('editKeboolaModal');
|
||
if (_editKeboolaModalEl) {
|
||
_editKeboolaModalEl.addEventListener('click', function(e) {
|
||
if (e.target === this) closeEditKeboolaModal();
|
||
});
|
||
}
|
||
|
||
var _editBqModalEl = document.getElementById('editBqModal');
|
||
if (_editBqModalEl) {
|
||
_editBqModalEl.addEventListener('click', function(e) {
|
||
if (e.target === this) closeEditBqModal();
|
||
});
|
||
}
|
||
|
||
document.getElementById('editModal').addEventListener('click', function(e) {
|
||
if (e.target === this) closeEditModal();
|
||
});
|
||
|
||
// Close modals on Escape key
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeRegisterBqModal();
|
||
if (typeof closeRegisterKeboolaModal === 'function') closeRegisterKeboolaModal();
|
||
if (typeof closeEditKeboolaModal === 'function') closeEditKeboolaModal();
|
||
if (typeof closeEditBqModal === 'function') closeEditBqModal();
|
||
closeEditModal();
|
||
}
|
||
});
|
||
|
||
// ── Initialize ──────────────────────────────────────────────
|
||
|
||
loadRegistry();
|
||
|
||
// ── Cache warmup toolbar (issue #155 / #156) ────────────────
|
||
let cacheWarmupSource = null;
|
||
|
||
function _cacheWarmupClearPollFallback() {
|
||
if (window._cacheWarmupPollInterval) {
|
||
clearInterval(window._cacheWarmupPollInterval);
|
||
window._cacheWarmupPollInterval = null;
|
||
}
|
||
}
|
||
|
||
function cacheWarmupInit() {
|
||
cacheWarmupRefreshSnapshot();
|
||
cacheWarmupOpenStream();
|
||
}
|
||
|
||
function cacheWarmupRefreshSnapshot() {
|
||
fetch('/api/admin/cache-warmup/status')
|
||
.then(function(r) { return r.json(); })
|
||
.then(function(state) { cacheWarmupRender(state); })
|
||
.catch(function() { /* silent */ });
|
||
}
|
||
|
||
function cacheWarmupOpenStream() {
|
||
try {
|
||
cacheWarmupSource = new EventSource('/api/admin/cache-warmup/stream');
|
||
cacheWarmupSource.addEventListener('start', cacheWarmupOnStart);
|
||
cacheWarmupSource.addEventListener('row', cacheWarmupOnRow);
|
||
cacheWarmupSource.addEventListener('complete', cacheWarmupOnComplete);
|
||
cacheWarmupSource.addEventListener('snapshot', function(e) {
|
||
_cacheWarmupClearPollFallback();
|
||
cacheWarmupRender(JSON.parse(e.data));
|
||
});
|
||
cacheWarmupSource.onerror = function() {
|
||
if (cacheWarmupSource) {
|
||
cacheWarmupSource.close();
|
||
cacheWarmupSource = null;
|
||
}
|
||
// Continuous polling fallback. Try to re-open SSE every 30 s in
|
||
// case the proxy / network heals. Only one polling interval at a
|
||
// time (prevent stacking on repeated errors).
|
||
if (!window._cacheWarmupPollInterval) {
|
||
window._cacheWarmupPollInterval = setInterval(
|
||
cacheWarmupRefreshSnapshot, 3000
|
||
);
|
||
setTimeout(function tryReconnect() {
|
||
if (cacheWarmupSource) return; // already reconnected
|
||
try {
|
||
clearInterval(window._cacheWarmupPollInterval);
|
||
window._cacheWarmupPollInterval = null;
|
||
cacheWarmupOpenStream(); // recursive — onerror retries again
|
||
} catch (e) {
|
||
window._cacheWarmupPollInterval = setInterval(
|
||
cacheWarmupRefreshSnapshot, 3000
|
||
);
|
||
setTimeout(tryReconnect, 30000);
|
||
}
|
||
}, 30000);
|
||
}
|
||
};
|
||
} catch (e) {
|
||
setInterval(cacheWarmupRefreshSnapshot, 3000);
|
||
}
|
||
}
|
||
|
||
function cacheWarmupRender(state) {
|
||
var summary = document.getElementById('cacheWarmupSummary');
|
||
var bar = document.getElementById('cacheWarmupBar');
|
||
var btn = document.getElementById('cacheWarmupRunBtn');
|
||
if (!summary) return;
|
||
|
||
if (!state || state.state === 'never_run') {
|
||
summary.textContent = 'No cache warmup yet — click Re-warm all to start.';
|
||
bar.style.display = 'none';
|
||
btn.disabled = false;
|
||
return;
|
||
}
|
||
var inProgress = state.completed_at === null || state.completed_at === undefined;
|
||
var pct = state.total > 0 ? Math.round((state.completed * 100) / state.total) : 0;
|
||
summary.textContent = inProgress
|
||
? state.completed + ' / ' + state.total + ' fresh — running…'
|
||
: 'Last run: ' + state.completed + ' ok, ' + state.failed + ' errors';
|
||
bar.style.display = 'block';
|
||
bar.value = pct;
|
||
btn.disabled = inProgress;
|
||
|
||
if (state.rows) {
|
||
for (var tid in state.rows) {
|
||
cacheWarmupSetRowBadge(tid, state.rows[tid]);
|
||
}
|
||
}
|
||
}
|
||
|
||
function cacheWarmupOnStart(e) {
|
||
_cacheWarmupClearPollFallback();
|
||
var data = JSON.parse(e.data);
|
||
var log = document.getElementById('cacheWarmupLog');
|
||
log.textContent = '';
|
||
// Hide the inline hint paragraph as soon as a real log line lands
|
||
// — the empty <pre>'s placeholder context is no longer useful and
|
||
// the dark log block is what the operator wants to watch.
|
||
var hint = document.getElementById('cacheWarmupHint');
|
||
if (hint) hint.style.display = 'none';
|
||
// Auto-open the details so streamed events are visible immediately,
|
||
// even if the operator clicked Re-warm without expanding first.
|
||
var details = document.getElementById('cacheWarmupDetails');
|
||
if (details) details.open = true;
|
||
cacheWarmupAppendLog(
|
||
'[' + nowHHMMSS() + '] start trigger=' + data.trigger + ' total=' + data.total
|
||
);
|
||
cacheWarmupRefreshSnapshot();
|
||
}
|
||
|
||
function cacheWarmupOnRow(e) {
|
||
_cacheWarmupClearPollFallback();
|
||
var rs = JSON.parse(e.data);
|
||
cacheWarmupAppendLog(
|
||
'[' + nowHHMMSS() + '] ' + rs.status.padEnd(7) + ' ' + rs.table_id +
|
||
(rs.duration_ms ? ' (' + (rs.duration_ms / 1000).toFixed(1) + ' s)' : '') +
|
||
(rs.error ? ' ' + rs.error : '')
|
||
);
|
||
cacheWarmupSetRowBadge(rs.table_id, rs);
|
||
cacheWarmupRefreshSnapshot();
|
||
}
|
||
|
||
function cacheWarmupOnComplete(e) {
|
||
_cacheWarmupClearPollFallback();
|
||
var data = JSON.parse(e.data);
|
||
cacheWarmupAppendLog(
|
||
'[' + nowHHMMSS() + '] complete total=' + data.total +
|
||
' ok=' + data.completed + ' fail=' + data.failed
|
||
);
|
||
cacheWarmupRefreshSnapshot();
|
||
}
|
||
|
||
function cacheWarmupAppendLog(line) {
|
||
var log = document.getElementById('cacheWarmupLog');
|
||
if (!log) return;
|
||
log.textContent += line + '\n';
|
||
log.scrollTop = log.scrollHeight;
|
||
}
|
||
|
||
function cacheWarmupSetRowBadge(tableId, rs) {
|
||
document.querySelectorAll('tr').forEach(function(tr) {
|
||
var idCell = tr.querySelector('td.col-id');
|
||
if (!idCell || idCell.textContent.trim() !== tableId) return;
|
||
var statusCell = tr.querySelector('td.col-status');
|
||
if (!statusCell) return;
|
||
var color = {fresh: '#10B77F', warming: '#0073D1', pending: '#9CA3AF', error: '#EA580C'}[rs.status] || '#9CA3AF';
|
||
var label = rs.status === 'fresh' ? 'fresh' : rs.status;
|
||
// Build via DOM API so rs.error escapes safely into the title
|
||
// attribute (XSS guard — rs.error is server-derived, may contain
|
||
// quotes / angle brackets).
|
||
var span = document.createElement('span');
|
||
span.style.cssText =
|
||
'display:inline-block;padding:2px 6px;border-radius:3px;' +
|
||
'font-size:11px;background:' + color + ';color:white;';
|
||
if (rs.error) span.setAttribute('title', rs.error);
|
||
span.textContent = label;
|
||
statusCell.replaceChildren(span);
|
||
});
|
||
}
|
||
|
||
function nowHHMMSS() {
|
||
var d = new Date();
|
||
return d.toTimeString().slice(0, 8);
|
||
}
|
||
|
||
function cacheWarmupRun() {
|
||
var btn = document.getElementById('cacheWarmupRunBtn');
|
||
btn.disabled = true;
|
||
// Auto-open the log section so the operator sees streaming output
|
||
// instead of staring at a disabled button while ~24s pass per
|
||
// remote BQ row. The hint paragraph hides as soon as a real log
|
||
// line lands (see cacheWarmupOnStart).
|
||
var details = document.getElementById('cacheWarmupDetails');
|
||
if (details) details.open = true;
|
||
fetch('/api/admin/cache-warmup/run', {method: 'POST'})
|
||
.then(function(r) { return r.json(); })
|
||
.then(function() { /* SSE stream picks up the new run */ })
|
||
.catch(function() { btn.disabled = false; });
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', cacheWarmupInit);
|
||
|
||
// ── Top-level Data Packages section hydration ───────────────
|
||
// Discovery fix: before this section existed, admins had to open a
|
||
// table's edit modal to even know Data Packages were a thing (the
|
||
// chip-input lives inside the BQ register/edit form). This block
|
||
// surfaces the package list above the connector tabs + adds a
|
||
// "+ New" entry point that opens the existing Create Data Package
|
||
// modal directly. The card grid reuses the .stack-grid + .stack-card
|
||
// classes shared with /catalog + /memory.
|
||
// ── Package-centric layout hydrator ──────────────────────────
|
||
// Replaces the prior loadDataPackagesSection (card grid) + the four
|
||
// per-tab listing renders. Pulls /api/admin/data-packages and
|
||
// /api/admin/registry in parallel, then renders:
|
||
// 1. one collapsible <details> per package containing its member tables
|
||
// 2. an "Unpackaged tables" callout for everything else
|
||
// Source_type appears as an inline tag on each row but no longer
|
||
// drives the layout (the user's "everything must live within some
|
||
// group in data packages" feedback).
|
||
async function loadAdminTablesLayout() {
|
||
var pkgsEl = document.getElementById('adminTablesLayoutPackages');
|
||
var unpkEl = document.getElementById('adminTablesLayoutUnpackaged');
|
||
if (!pkgsEl || !unpkEl) return;
|
||
try {
|
||
// v54: single round-trip for packages + their member ids via
|
||
// ``?include_table_ids=true``. Was N+1 (one GET per package
|
||
// after the list); on instances with 50+ packages the page
|
||
// took multiple seconds before this collapsed fetch.
|
||
var [pkgResp, tableResp] = await Promise.all([
|
||
fetch('/api/admin/data-packages?include_table_ids=true',
|
||
{ credentials: 'same-origin' }),
|
||
fetch('/api/admin/registry', { credentials: 'same-origin' }),
|
||
]);
|
||
if (!pkgResp.ok) {
|
||
pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">Failed to load Data Packages (HTTP ' + pkgResp.status + ').</div>';
|
||
unpkEl.innerHTML = '';
|
||
return;
|
||
}
|
||
if (!tableResp.ok) {
|
||
pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">Failed to load registry (HTTP ' + tableResp.status + ').</div>';
|
||
unpkEl.innerHTML = '';
|
||
return;
|
||
}
|
||
var pkgs = await pkgResp.json();
|
||
var registryBody = await tableResp.json();
|
||
registryData = registryBody;
|
||
registryVersion = registryBody.version;
|
||
var allTables = Array.isArray(registryBody)
|
||
? registryBody
|
||
: (registryBody.tables || []);
|
||
|
||
var tableById = {};
|
||
allTables.forEach(function(t) { tableById[t.id] = t; });
|
||
var packagedIds = new Set();
|
||
var pkgsWithTables = pkgs.map(function(p) {
|
||
// table_ids comes from the new ?include_table_ids=true
|
||
// server-side join. Empty packages omit the field — default to [].
|
||
var memberIds = p.table_ids || [];
|
||
memberIds.forEach(function(id) { packagedIds.add(id); });
|
||
var memberRows = memberIds
|
||
.map(function(id) { return tableById[id]; })
|
||
.filter(Boolean);
|
||
return Object.assign({}, p, { _members: memberRows });
|
||
});
|
||
|
||
// ── Render packages ──
|
||
if (!pkgsWithTables.length) {
|
||
pkgsEl.innerHTML = ''
|
||
+ '<div style="padding:24px; text-align:center; color:var(--text-secondary); '
|
||
+ 'background:var(--background); border:1px dashed var(--border); '
|
||
+ 'border-radius:8px;">'
|
||
+ ' <p style="margin:0 0 8px; font-size:14px; color:var(--text-primary);">'
|
||
+ ' <strong>No Data Packages yet</strong>'
|
||
+ ' </p>'
|
||
+ ' <p style="margin:0 0 12px; font-size:13px;">'
|
||
+ ' Bundle related tables so analysts can opt-in to them as a group.'
|
||
+ ' </p>'
|
||
+ ' <button class="btn btn-primary" type="button" '
|
||
+ ' onclick="openCreateDataPackageModal(\'\', null)">+ New Data Package</button>'
|
||
+ ' <button class="btn btn-secondary" type="button" '
|
||
+ ' onclick="groupTablesByBucket()" style="margin-left:8px;">'
|
||
+ ' Group tables by bucket'
|
||
+ ' </button>'
|
||
+ '</div>';
|
||
} else {
|
||
pkgsEl.innerHTML = pkgsWithTables.map(function(p) {
|
||
var iconRaw = p.icon || '📦';
|
||
var color = p.color || '#f3f4f6';
|
||
var name = String(p.name || '');
|
||
var slug = String(p.slug || '');
|
||
var desc = String(p.description || '');
|
||
var tcount = (p._members || []).length;
|
||
var rowsHtml = (p._members || []).length
|
||
? _renderPackageTableRows(p._members, p.id)
|
||
: '<div class="panel-body-empty" style="padding:16px; font-size:12px;">'
|
||
+ 'No tables in this package yet. Click <strong>+ Add tables</strong> above.</div>';
|
||
return ''
|
||
+ '<details open data-package-id="' + escapeHtmlAttr(p.id) + '" '
|
||
+ 'style="margin-bottom:12px; border:1px solid var(--border); '
|
||
+ 'border-radius:10px; background:var(--surface);">'
|
||
+ ' <summary style="display:flex; align-items:center; gap:12px; padding:12px 16px; '
|
||
+ 'cursor:pointer; user-select:none; list-style:none;">'
|
||
+ ' <span style="display:inline-flex; align-items:center; justify-content:center; '
|
||
+ 'width:32px; height:32px; border-radius:8px; flex-shrink:0; '
|
||
+ 'background:' + escapeHtmlAttr(color) + ';">'
|
||
+ escapeHtml(iconRaw)
|
||
+ ' </span>'
|
||
+ ' <span style="flex:1; min-width:0;">'
|
||
+ ' <strong style="font-size:14px;">' + escapeHtml(name) + '</strong>'
|
||
+ (desc ? ('<div style="font-size:12px; color:var(--text-secondary); '
|
||
+ 'margin-top:2px;">' + escapeHtml(desc) + '</div>') : '')
|
||
+ ' </span>'
|
||
+ ' <span style="font-size:12px; color:var(--text-secondary);">'
|
||
+ tcount + ' table' + (tcount === 1 ? '' : 's') + '</span>'
|
||
+ ' <button class="btn btn-secondary btn-sm" type="button" '
|
||
+ 'onclick="event.preventDefault(); event.stopPropagation(); '
|
||
+ 'openBulkAssignModal(\'' + escapeHtmlAttr(p.id) + '\')">'
|
||
+ ' + Add tables'
|
||
+ ' </button>'
|
||
+ ' <button class="btn btn-secondary btn-sm" type="button" '
|
||
+ 'onclick="event.preventDefault(); event.stopPropagation(); '
|
||
+ 'openEditDataPackageModal(\'' + escapeHtmlAttr(p.id) + '\')">'
|
||
+ ' Edit package'
|
||
+ ' </button>'
|
||
+ ' <a class="btn btn-secondary btn-sm" '
|
||
+ 'href="/catalog/p/' + escapeHtmlAttr(slug) + '" '
|
||
+ 'onclick="event.stopPropagation()" '
|
||
+ 'title="See this package as analysts will">'
|
||
+ ' View as analyst'
|
||
+ ' </a>'
|
||
+ ' </summary>'
|
||
+ ' <div style="padding:0 12px 12px;">' + rowsHtml + '</div>'
|
||
+ '</details>';
|
||
}).join('');
|
||
}
|
||
|
||
// ── Render Unpackaged tables ──
|
||
// Exclude internal/agnes_* rows from "needs packaging" — they're
|
||
// auto-seeded and shouldn't be auto-bundled. Still listed in a
|
||
// separate read-only group below.
|
||
var unpackagedNeedsAttention = allTables.filter(function(t) {
|
||
return !packagedIds.has(t.id)
|
||
&& (t.source_type || '') !== 'internal';
|
||
});
|
||
var internalUnpackaged = allTables.filter(function(t) {
|
||
return !packagedIds.has(t.id)
|
||
&& (t.source_type || '') === 'internal';
|
||
});
|
||
|
||
var unpkParts = [];
|
||
if (unpackagedNeedsAttention.length) {
|
||
unpkParts.push(''
|
||
+ '<section id="adminTablesUnpackaged" style="border:1px solid #FCD34D; '
|
||
+ 'background:rgba(255,247,205,0.4); border-radius:10px;">'
|
||
+ ' <header style="display:flex; align-items:center; gap:12px; '
|
||
+ 'padding:12px 16px; border-bottom:1px solid #FCD34D;">'
|
||
+ ' <span style="font-size:16px;">⚠️</span>'
|
||
+ ' <strong style="flex:1; font-size:14px;">Unpackaged tables '
|
||
+ '<span style="color:var(--text-secondary); font-weight:500;">'
|
||
+ '(' + unpackagedNeedsAttention.length + ' — needs packaging)</span></strong>'
|
||
+ ' <button class="btn btn-secondary btn-sm" type="button" '
|
||
+ 'onclick="groupTablesByBucket()">Group by bucket</button>'
|
||
+ ' <button class="btn btn-primary btn-sm" type="button" '
|
||
+ 'onclick="openBulkAssignModal(\'\')">Bulk assign</button>'
|
||
+ ' </header>'
|
||
+ ' <div style="padding:0 12px 12px;">'
|
||
+ _renderPackageTableRows(unpackagedNeedsAttention, null)
|
||
+ ' </div>'
|
||
+ '</section>');
|
||
}
|
||
if (internalUnpackaged.length) {
|
||
unpkParts.push(''
|
||
+ '<section style="margin-top:16px; border:1px solid var(--border); '
|
||
+ 'background:var(--background); border-radius:10px;">'
|
||
+ ' <header style="display:flex; align-items:center; gap:12px; '
|
||
+ 'padding:12px 16px; border-bottom:1px solid var(--border);">'
|
||
+ ' <strong style="flex:1; font-size:13px; color:var(--text-secondary);">'
|
||
+ ' Agnes internal tables '
|
||
+ '<span style="font-weight:500;">(read-only; seeded on app boot)</span>'
|
||
+ ' </strong>'
|
||
+ ' </header>'
|
||
+ ' <div style="padding:0 12px 12px;">'
|
||
+ _renderPackageTableRows(internalUnpackaged, null)
|
||
+ ' </div>'
|
||
+ '</section>');
|
||
}
|
||
unpkEl.innerHTML = unpkParts.join('');
|
||
} catch (e) {
|
||
pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">'
|
||
+ 'Network error: ' + escapeHtml(e.message) + '</div>';
|
||
unpkEl.innerHTML = '';
|
||
}
|
||
}
|
||
|
||
// Render a list of table rows for the package-centric layout. Each row:
|
||
// [name link → /admin/tables?edit=<id>] [source_type tag] [bucket] [mode]
|
||
// [Edit] [Remove from package | + Add to package ▾]
|
||
// pkgIdOrNull → when non-null, rows expose a "Remove from package" action;
|
||
// when null (Unpackaged section), rows expose "+ Add to package".
|
||
function _renderPackageTableRows(tables, pkgIdOrNull) {
|
||
if (!tables || !tables.length) {
|
||
return '<div class="panel-body-empty">No tables here yet.</div>';
|
||
}
|
||
var html = '<table class="registry-table" style="margin-top:8px;">';
|
||
html += '<thead><tr>';
|
||
html += '<th class="col-id">Table</th>';
|
||
html += '<th>Source</th>';
|
||
html += '<th>Bucket</th>';
|
||
html += '<th class="col-mode">Mode</th>';
|
||
html += '<th class="col-actions">Actions</th>';
|
||
html += '</tr></thead><tbody>';
|
||
tables.forEach(function(t) {
|
||
var id = String(t.id || '');
|
||
var name = String(t.name || id);
|
||
var src = String(t.source_type || '');
|
||
var bucket = String(t.bucket || '');
|
||
var editUrl = '/admin/tables?edit=' + encodeURIComponent(id);
|
||
var isInternal = (src === 'internal');
|
||
// data-table-row-{name,source,bucket} attributes power the
|
||
// filterAdminTablesLayout() search; lower-case once at render
|
||
// time so the filter can use plain substring matching.
|
||
html += '<tr data-table-id="' + escapeHtmlAttr(id) + '" '
|
||
+ 'data-table-row-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
|
||
+ 'data-table-row-source="' + escapeHtmlAttr(src.toLowerCase()) + '" '
|
||
+ 'data-table-row-bucket="' + escapeHtmlAttr(bucket.toLowerCase()) + '">';
|
||
html += '<td class="col-id" title="' + escapeHtml(id) + '">'
|
||
+ '<a href="' + escapeHtmlAttr(editUrl) + '" '
|
||
+ 'style="color:var(--primary); text-decoration:none;">'
|
||
+ escapeHtml(name) + '</a></td>';
|
||
html += '<td><span class="badge badge-available" style="font-size:11px;">'
|
||
+ escapeHtml(src || '—') + '</span></td>';
|
||
html += '<td style="font-family:var(--font-mono); font-size:12px; color:var(--text-secondary);">'
|
||
+ escapeHtml(bucket || '—') + '</td>';
|
||
html += '<td class="col-mode">' + renderModeBadge(t.query_mode) + '</td>';
|
||
html += '<td class="col-actions"><div style="display:flex; gap:4px; justify-content:flex-end;">';
|
||
if (!isInternal) {
|
||
html += '<button class="btn-icon" title="Edit" '
|
||
+ 'onclick=\'openEditModal(' + escapeHtmlAttr(JSON.stringify(t)) + ')\'>'
|
||
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>'
|
||
+ '</button>';
|
||
}
|
||
if (pkgIdOrNull && !isInternal) {
|
||
html += '<button class="btn-icon danger" title="Remove from package" '
|
||
+ 'onclick="removeTableFromPackageById('' + escapeHtmlAttr(pkgIdOrNull) + '', '' + escapeHtmlAttr(id) + '')">'
|
||
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>'
|
||
+ '</button>';
|
||
} else if (!pkgIdOrNull && !isInternal) {
|
||
// Icon button for visual rhythm with Edit (the wide
|
||
// "+ Add to package" text button used to overflow the
|
||
// 120px col-actions and bleed leftward into the Mode
|
||
// column — user-reported visual bug). Title attr keeps
|
||
// the explicit label discoverable on hover.
|
||
html += '<button class="btn-icon" type="button" '
|
||
+ 'title="Add to a Data Package" '
|
||
+ 'onclick="openBulkAssignFromRow('' + escapeHtmlAttr(id) + '')" '
|
||
+ 'style="color:var(--primary);">'
|
||
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
|
||
+ '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>'
|
||
+ '<line x1="12" y1="11" x2="12" y2="17"/>'
|
||
+ '<line x1="9" y1="14" x2="15" y2="14"/>'
|
||
+ '</svg>'
|
||
+ '</button>';
|
||
}
|
||
html += '</div></td></tr>';
|
||
});
|
||
html += '</tbody></table>';
|
||
return html;
|
||
}
|
||
|
||
// Remove a single table from a package, then refresh the layout.
|
||
async function removeTableFromPackageById(pkgId, tableId) {
|
||
if (!confirm('Remove this table from the package? (The table itself is not deleted.)')) return;
|
||
var r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId)
|
||
+ '/tables/' + encodeURIComponent(tableId),
|
||
{ method: 'DELETE', credentials: 'same-origin' });
|
||
if (!r.ok) { alert('Remove failed: HTTP ' + r.status); return; }
|
||
if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
|
||
}
|
||
|
||
// Open bulk-assign modal pre-checking a single table — the "+ Add to
|
||
// package" CTA on each unpackaged row. Defers to the existing modal so
|
||
// the operator can pick the target package without leaving the page.
|
||
function openBulkAssignFromRow(tableId) {
|
||
openBulkAssignModal('');
|
||
// Once the modal's table list has rendered, pre-check the requested
|
||
// row. The modal renders synchronously via renderBulkAssignList after
|
||
// its async fetches resolve, so poll briefly.
|
||
var tries = 0;
|
||
var tick = setInterval(function() {
|
||
tries += 1;
|
||
var cb = document.querySelector(
|
||
'#bulk-assign-list .bulk-assign-cb[value="' + tableId.replace(/"/g, '') + '"]'
|
||
);
|
||
if (cb) {
|
||
cb.checked = true;
|
||
cb.scrollIntoView({ block: 'center' });
|
||
clearInterval(tick);
|
||
} else if (tries > 50) {
|
||
clearInterval(tick);
|
||
}
|
||
}, 50);
|
||
}
|
||
|
||
// Backward-compat alias — Edit/Create/Delete-package flows declared
|
||
// before the rewrite still call loadDataPackagesSection() to refresh.
|
||
var loadDataPackagesSection = loadAdminTablesLayout;
|
||
window.loadDataPackagesSection = loadDataPackagesSection;
|
||
|
||
// ── Search filter for the /admin/tables layout ───────────────────
|
||
// Mirrors the /catalog + /memory hero-search pattern: one input
|
||
// narrows both packages and table rows in place. A package is
|
||
// visible when its name matches OR any of its member tables match;
|
||
// an unpackaged row is visible when its name / source / bucket
|
||
// matches.
|
||
function filterAdminTablesLayout() {
|
||
var input = document.getElementById('adminTablesSearch');
|
||
var hint = document.getElementById('adminTablesSearchHint');
|
||
var q = (input && input.value || '').toLowerCase().trim();
|
||
var matched = 0;
|
||
var total = 0;
|
||
// Per-package <details> filtering — show the package if its name
|
||
// matches, OR any of the rows inside match.
|
||
document.querySelectorAll(
|
||
'#adminTablesLayoutPackages details[data-package-id]'
|
||
).forEach(function(d) {
|
||
var pkgName = ((d.querySelector('summary strong')||{}).textContent || '').toLowerCase();
|
||
var rows = d.querySelectorAll('[data-table-row-name]');
|
||
var anyRow = false;
|
||
rows.forEach(function(r) {
|
||
total += 1;
|
||
var rn = (r.getAttribute('data-table-row-name') || '').toLowerCase();
|
||
var rs = (r.getAttribute('data-table-row-source') || '').toLowerCase();
|
||
var rb = (r.getAttribute('data-table-row-bucket') || '').toLowerCase();
|
||
var hit = !q || rn.indexOf(q) !== -1 || rs.indexOf(q) !== -1 || rb.indexOf(q) !== -1;
|
||
r.style.display = hit ? '' : 'none';
|
||
if (hit) { anyRow = true; matched += 1; }
|
||
});
|
||
var pkgHit = !q || pkgName.indexOf(q) !== -1 || anyRow;
|
||
d.style.display = pkgHit ? '' : 'none';
|
||
// When the query hits the package name only, expand it; when the
|
||
// query is empty leave the user's open/closed state alone.
|
||
if (q && pkgHit && (anyRow || pkgName.indexOf(q) !== -1)) {
|
||
d.open = true;
|
||
}
|
||
});
|
||
// Unpackaged rows live outside the per-package <details>.
|
||
document.querySelectorAll(
|
||
'#adminTablesLayoutUnpackaged [data-table-row-name]'
|
||
).forEach(function(r) {
|
||
total += 1;
|
||
var rn = (r.getAttribute('data-table-row-name') || '').toLowerCase();
|
||
var rs = (r.getAttribute('data-table-row-source') || '').toLowerCase();
|
||
var rb = (r.getAttribute('data-table-row-bucket') || '').toLowerCase();
|
||
var hit = !q || rn.indexOf(q) !== -1 || rs.indexOf(q) !== -1 || rb.indexOf(q) !== -1;
|
||
r.style.display = hit ? '' : 'none';
|
||
if (hit) matched += 1;
|
||
});
|
||
if (hint) {
|
||
hint.textContent = q
|
||
? matched + ' of ' + total + ' table' + (total === 1 ? '' : 's')
|
||
: '';
|
||
}
|
||
}
|
||
window.filterAdminTablesLayout = filterAdminTablesLayout;
|
||
|
||
document.addEventListener('DOMContentLoaded', loadAdminTablesLayout);
|
||
|
||
// Auto-open the Create Data Package modal when the page is opened with
|
||
// `?new_package=1` — drives the /catalog right-of-tabs admin action
|
||
// (which redirects here rather than duplicating the modal scaffolding).
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var qs = new URLSearchParams(window.location.search);
|
||
if (qs.get('new_package') !== '1') return;
|
||
// Wait a tick so the layout's deferred load completes (the modal
|
||
// doesn't actually depend on it, but the page feels less janky if
|
||
// the layout has rendered first).
|
||
setTimeout(function() {
|
||
if (typeof openCreateDataPackageModal === 'function') {
|
||
openCreateDataPackageModal('', null);
|
||
}
|
||
}, 50);
|
||
// Strip the query param so a manual refresh doesn't re-open the
|
||
// modal (mirrors closeBulkAssignModal's URL hygiene).
|
||
history.replaceState(null, '',
|
||
window.location.pathname + window.location.hash);
|
||
});
|
||
|
||
// Auto-open the Edit Data Package modal when the page is opened
|
||
// with `?edit_package=<pkg_id>` — closes the /catalog/p/<slug>
|
||
// drill-down Edit button (which previously linked to `#<pkg.id>`
|
||
// and did nothing past landing on the page).
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var qs = new URLSearchParams(window.location.search);
|
||
var pkgId = qs.get('edit_package');
|
||
if (!pkgId) return;
|
||
// Wait for the layout's deferred load to settle so the modal
|
||
// hydrators (member tables, RBAC matrix) have something to hang
|
||
// their fetches on.
|
||
setTimeout(function() {
|
||
if (typeof openEditDataPackageModal === 'function') {
|
||
openEditDataPackageModal(pkgId);
|
||
}
|
||
}, 250);
|
||
// Strip the query param so a manual refresh doesn't re-open.
|
||
history.replaceState(null, '',
|
||
window.location.pathname + window.location.hash);
|
||
});
|
||
|
||
// Auto-open the source-typed edit modal when the page is opened with
|
||
// `?edit=<table_id>` — closes the /catalog/p/<slug> drill-down loop
|
||
// where each table name is now an admin-only link landing here.
|
||
// Package-centric rewrite: no more switchTab; the modal opens directly.
|
||
document.addEventListener('DOMContentLoaded', async function() {
|
||
var qs = new URLSearchParams(window.location.search);
|
||
var editId = qs.get('edit');
|
||
if (!editId) return;
|
||
try {
|
||
var r = await fetch('/api/admin/registry', { credentials: 'same-origin' });
|
||
if (!r.ok) return;
|
||
var body = await r.json();
|
||
var tables = Array.isArray(body) ? body : (body.tables || []);
|
||
var t = tables.find(function(x) { return String(x.id) === String(editId); });
|
||
if (!t) {
|
||
alert('Table not found (id=' + editId + '). It may have been deleted.');
|
||
return;
|
||
}
|
||
// Small delay so the layout has time to mount; then open the source-
|
||
// dispatched edit modal directly. No tab nav anymore.
|
||
setTimeout(function() {
|
||
if (typeof openEditModal === 'function') openEditModal(t);
|
||
}, 200);
|
||
} catch (e) {
|
||
console.warn('?edit auto-open failed:', e);
|
||
}
|
||
});
|
||
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{# Chip-input component (v55 — was globally loaded in base.html, now
|
||
opt-in per template via this extra_scripts block; admin_tables mounts
|
||
it via the BQ Register modal's `data-name="bq_package_ids"` host). #}
|
||
{% block extra_scripts %}
|
||
<script type="module" src="{{ static_url('js/components/chip-input.js') }}"></script>
|
||
{% endblock %}
|