ATC/atc-agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fold Trino federation into Data Explorer tabs; tidy sidebar

Browse Source 
- Data Explorer now hosts Business Overview, Federated (Trino),
  Hadoop Lake and Data Dictionary as tabs instead of a separate
  top-level view (richer, less stacked layout)
- TrinoFederationView supports an embedded mode driven by an
  external active tab
- Remove the standalone Trino Federation sidebar entry/route
- Remove the Kibana shortcut from the sidebar (it already lives in
  the Elasticsearch view)
This commit is contained in:
mo
2026-06-28 18:33:16 +00:00
parent ea3e59cf9c
commit 28bdbaf13a
5 changed files with 103 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/features/TrinoFederationView.tsx
+37 -29
View File
@@ -19,7 +19,7 @@ import {
import { cn } from '../../lib/utils'
type Bucket = { key: string; count: number; value?: number }
type SubTab = 'federated' | 'lake' | 'dictionary'
export type SubTab = 'federated' | 'lake' | 'dictionary'
const COLORS = ['#34d399', '#60a5fa', '#f472b6', '#fbbf24', '#a78bfa', '#22d3ee', '#fb7185']
@@ -117,8 +117,9 @@ function Kpi({ icon: Icon, label, value, sub, accent }: { icon: typeof Users; la
)
}
export function TrinoFederationView() {
const [tab, setTab] = useState<SubTab>('federated')
export function TrinoFederationView({ embedded = false, activeTab }: { embedded?: boolean; activeTab?: SubTab } = {}) {
const [tabState, setTab] = useState<SubTab>('federated')
const tab = embedded ? activeTab ?? 'federated' : tabState
const [catalogs, setCatalogs] = useState<any>(null)
const [marquee, setMarquee] = useState<any>(null)
const [lake, setLake] = useState<any>(null)
@@ -189,32 +190,8 @@ export function TrinoFederationView() {
const m = marquee?.marquee
const totals = catalogs?.source_totals || {}
return (
<div className="scrollbar-thin flex h-full min-h-0 flex-col gap-2 overflow-y-auto p-3">
<header className="panel flex shrink-0 flex-wrap items-center justify-between gap-3 px-4 py-3">
<div>
<h1 className="flex items-center gap-2 text-base font-semibold text-foreground">
<Network className="h-5 w-5 text-docker" />
Trino Federation &amp; Hadoop Lakehouse
</h1>
<p className="text-[11px] text-foreground-muted">
One SQL engine over every source — federated business analytics, mirrored into Hadoop as external Iceberg tables
</p>
</div>
<div className="flex flex-wrap gap-1">
{([
{ id: 'federated', label: 'Federated', icon: Network },
{ id: 'lake', label: 'Hadoop Lake', icon: HardDrive },
{ id: 'dictionary', label: 'Data Dictionary', icon: ShieldCheck },
] as { id: SubTab; label: string; icon: typeof Network }[]).map(({ id, label, icon: Icon }) => (
<button key={id} type="button" onClick={() => setTab(id)}
className={cn('inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-medium transition-colors', tab === id ? 'bg-docker/15 text-docker' : 'text-foreground-muted hover:bg-surface-overlay')}>
<Icon className="h-3.5 w-3.5" /> {label}
</button>
))}
</div>
</header>
const body = (
<>
{/* ───────── FEDERATED ───────── */}
{tab === 'federated' && (
<>
@@ -368,6 +345,37 @@ export function TrinoFederationView() {
{loading && !catalogs && !lake && !dict && (
<div className="flex flex-1 items-center justify-center text-foreground-muted"><Loader2 className="h-5 w-5 animate-spin" /></div>
)}
</>
)
if (embedded) return body
return (
<div className="scrollbar-thin flex h-full min-h-0 flex-col gap-2 overflow-y-auto p-3">
<header className="panel flex shrink-0 flex-wrap items-center justify-between gap-3 px-4 py-3">
<div>
<h1 className="flex items-center gap-2 text-base font-semibold text-foreground">
<Network className="h-5 w-5 text-docker" />
Trino Federation &amp; Hadoop Lakehouse
</h1>
<p className="text-[11px] text-foreground-muted">
One SQL engine over every source — federated business analytics, mirrored into Hadoop as external Iceberg tables
</p>
</div>
<div className="flex flex-wrap gap-1">
{([
{ id: 'federated', label: 'Federated', icon: Network },
{ id: 'lake', label: 'Hadoop Lake', icon: HardDrive },
{ id: 'dictionary', label: 'Data Dictionary', icon: ShieldCheck },
] as { id: SubTab; label: string; icon: typeof Network }[]).map(({ id, label, icon: Icon }) => (
<button key={id} type="button" onClick={() => setTab(id)}
className={cn('inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-medium transition-colors', tab === id ? 'bg-docker/15 text-docker' : 'text-foreground-muted hover:bg-surface-overlay')}>
<Icon className="h-3.5 w-3.5" /> {label}
</button>
))}
</div>
</header>
{body}
</div>
)
}