Rebrand: Sentry -> Cairn OBS
Full rebrand across cosmetic branding, code identifiers, and infrastructure/data-plane naming, using the supplied Cairn OBS logo package. Cosmetic: favicon/logo swap (also closes a stale license-audit finding -- the old favicon was SvelteKit's unreplaced scaffold logo), new centered welcome landing page, larger/legible sidebar logo, page titles, CLAUDE.md/README/docs prose. Code identifiers: Go module path github.com/sentry/sentry -> github.com/cairnobs/cairnobs across all 13 modules and ~91 files (protoc regenerated); Rust crates sentry-agent/sentry-parser/sentry-search -> cairnobs-*; CLI sentryctl -> cairnobsctl; Terraform provider fully renamed (sentry_dashboard etc. -> cairnobs_dashboard, provider type, env vars); every session/auth cookie name; agent config paths and Windows service identity. Deliberately preserved: the gRPC wire protocol's protobuf packages (sentry.logs.v1, sentry.agent.v1) and their Go import directory (proto/sentry/...) -- renaming the wire-level package would break every currently-deployed agent binary (confirmed two real hosts, including mail.inbuxa.com, are actively streaming through this exact contract) until rebuilt and redeployed in lockstep with an ingest cutover. Only the Go module path wrapping the generated code changes. Infrastructure: every docker-compose container name (root and three component-level compose files); the Helm chart (directory, Chart.yaml, named-template helpers, all templates, values.yaml image repos); Kubernetes Operator (CRD group sentry.io -> cairnobs.io, both CRD YAML files, Go identifiers, RBAC markers); the coupled enterprise/tenantcrd package. Caught and fixed real path-coupling bugs along the way: the Helm chart's search/ingest volume mounts and the dev-only-credential detection constant vs. docker-compose.yml's literal values had to move together or a security warning would have silently stopped firing. Data plane: Postgres database sentry_metadata -> cairnobs_metadata and role sentry -> cairnobs; ClickHouse database sentry -> cairnobs; Kafka topic sentry.logs.raw -> cairnobs.logs.raw and its consumer groups. Source-level defaults, docker-compose.yml, and every migrate.sh/ provision script default updated together; already-applied migration files left untouched per this repo's immutable-migration convention. Verified at every layer: all 13 Go modules build/vet/test clean, both Rust workspaces (agent, search) build/clippy/test clean, npm run check/ build clean, docker compose config validates on all four compose files. Live-verified against a real docker stack multiple times through this work, including a final fresh-volume run confirming the actual renamed Postgres database/role, ClickHouse database, and Kafka topic all work end to end with a real login and query, zero console errors.
This commit is contained in:
+2
-2
@@ -13,11 +13,11 @@
|
||||
// $lib/density.ts; see those for the source of truth.
|
||||
(function () {
|
||||
try {
|
||||
var theme = localStorage.getItem('sentry.theme');
|
||||
var theme = localStorage.getItem('cairnobs.theme');
|
||||
if (theme === 'dark' || theme === 'light') {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
if (localStorage.getItem('sentry.density') === 'compact') {
|
||||
if (localStorage.getItem('cairnobs.density') === 'compact') {
|
||||
document.documentElement.classList.add('density-compact');
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
+5
-5
@@ -285,7 +285,7 @@ export async function getAuthFeatures(): Promise<AuthFeatures> {
|
||||
//
|
||||
// The two calls below are the reason getAuthFeatures above doesn't send
|
||||
// credentials but these do: they carry the short-lived
|
||||
// sentry_pending_login cookie enterprise-auth's finishLogin sets when an
|
||||
// cairnobs_pending_login cookie enterprise-auth's finishLogin sets when an
|
||||
// identity resolves to more than one tenant_memberships row (see
|
||||
// enterprise/internal/loginhandler's package doc comment), and
|
||||
// selectTenant's response sets the real session cookie. Both require
|
||||
@@ -716,8 +716,8 @@ export function issueAgentCommand(host: string, command: 'restart'): Promise<Age
|
||||
// ---- Host CPU/memory/disk metrics ----
|
||||
// No new REST endpoints -- a metrics sample is an ordinary log record
|
||||
// (see agent/README.md's "Host CPU/memory/disk metrics" section and
|
||||
// agent/sentry-agent/src/main.rs's send_metrics), tagged
|
||||
// `sentry.metrics=true`, fetched through the same POST /query every
|
||||
// agent/cairnobs-agent/src/main.rs's send_metrics), tagged
|
||||
// `cairnobs.metrics=true`, fetched through the same POST /query every
|
||||
// other page already uses via runQuery(). Only ever set on one agent
|
||||
// process per physical host, so `stats count by host` over this tag
|
||||
// naturally lists real hosts, not every fragmented per-source agent
|
||||
@@ -728,7 +728,7 @@ export function issueAgentCommand(host: string, command: 'restart'): Promise<Age
|
||||
export type HostSummary = { host: string; sampleCount: number };
|
||||
|
||||
export async function listMetricsHosts(): Promise<HostSummary[]> {
|
||||
const result = await runQuery('sentry.metrics=true | stats count by host', 'spl');
|
||||
const result = await runQuery('cairnobs.metrics=true | stats count by host', 'spl');
|
||||
const hostIdx = result.columns.indexOf('host');
|
||||
const countIdx = result.columns.indexOf('count');
|
||||
return result.rows.map((r) => ({ host: String(r[hostIdx]), sampleCount: Number(r[countIdx]) }));
|
||||
@@ -763,7 +763,7 @@ export type HostMetrics = {
|
||||
// attribute columns the same way filtering does.
|
||||
export async function getHostMetrics(host: string): Promise<HostMetrics | null> {
|
||||
const result = await runQuery(
|
||||
`host="${host}" sentry.metrics=true | sort -timestamp | head 1`,
|
||||
`host="${host}" cairnobs.metrics=true | sort -timestamp | head 1`,
|
||||
'spl'
|
||||
);
|
||||
if (result.rows.length === 0) return null;
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Favicon: simplified 3-stone mark on terminal-dark rounded square -->
|
||||
<rect x="0" y="0" width="64" height="64" rx="14" fill="#0D1117"/>
|
||||
<g>
|
||||
<rect x="12" y="38" width="40" height="13" rx="6.5" fill="#FF8A00" transform="rotate(-2 32 44.5)"/>
|
||||
<rect x="18" y="24" width="28" height="12" rx="6" fill="#FF9D2E" transform="rotate(3 32 30)"/>
|
||||
<rect x="23" y="12" width="18" height="10" rx="5" fill="#FFB157" transform="rotate(-3 32 17)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 551 B |
@@ -0,0 +1,12 @@
|
||||
<svg width="600" height="140" viewBox="0 0 600 140" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Horizontal lockup for dark backgrounds -->
|
||||
<g transform="translate(20,10) scale(0.6)">
|
||||
<rect x="30" y="142" width="140" height="42" rx="20" fill="#E6690E" transform="rotate(-1.5 100 163)"/>
|
||||
<rect x="48" y="106" width="104" height="38" rx="18" fill="#FF8A00" transform="rotate(2.5 100 125)"/>
|
||||
<rect x="64" y="73" width="72" height="34" rx="16" fill="#FF9D2E" transform="rotate(-3 100 90)"/>
|
||||
<rect x="78" y="43" width="44" height="30" rx="14" fill="#FFB157" transform="rotate(3.5 100 58)"/>
|
||||
</g>
|
||||
<text x="160" y="87" font-family="'JetBrains Mono','Fira Code',ui-monospace,monospace" font-size="48" font-weight="700" fill="#F2F2F2" letter-spacing="-1">cairn</text>
|
||||
<text x="342" y="87" font-family="'JetBrains Mono','Fira Code',ui-monospace,monospace" font-size="48" font-weight="700" fill="#FF8A00" letter-spacing="1"> obs</text>
|
||||
<rect x="540" y="49" width="14" height="38" fill="#FF8A00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1017 B |
@@ -0,0 +1,10 @@
|
||||
<svg width="360" height="360" viewBox="0 0 360 360" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Stacked lockup for dark backgrounds / square placements -->
|
||||
<g transform="translate(80,30) scale(1.0)">
|
||||
<rect x="30" y="142" width="140" height="42" rx="20" fill="#E6690E" transform="rotate(-1.5 100 163)"/>
|
||||
<rect x="48" y="106" width="104" height="38" rx="18" fill="#FF8A00" transform="rotate(2.5 100 125)"/>
|
||||
<rect x="64" y="73" width="72" height="34" rx="16" fill="#FF9D2E" transform="rotate(-3 100 90)"/>
|
||||
<rect x="78" y="43" width="44" height="30" rx="14" fill="#FFB157" transform="rotate(3.5 100 58)"/>
|
||||
</g>
|
||||
<text x="180" y="290" font-family="'JetBrains Mono','Fira Code',ui-monospace,monospace" font-size="42" font-weight="700" fill="#F2F2F2" letter-spacing="-1" text-anchor="middle">cairn <tspan fill="#FF8A00">obs</tspan></text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 859 B |
@@ -64,5 +64,5 @@ export function drillDownUrl(target: DrillDownTarget): string {
|
||||
const params = new URLSearchParams({ q: target.query });
|
||||
if (target.earliest) params.set('earliest', target.earliest);
|
||||
if (target.latest) params.set('latest', target.latest);
|
||||
return `/?${params.toString()}`;
|
||||
return `/search?${params.toString()}`;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// would ship every chart type/component ECharts has ever shipped,
|
||||
// against the whole reason it was picked over hand-rolled D3 for the
|
||||
// bundle-size tradeoff (see the Phase 5 charting-library review). This
|
||||
// registers only what Sentry's five chart types actually use: line/bar
|
||||
// registers only what Cairn OBS's five chart types actually use: line/bar
|
||||
// (time-series, stacked bar, top-N, the single-stat sparkline) and
|
||||
// heatmap, plus tooltip/legend/grid/dataZoom/visualMap and the canvas
|
||||
// renderer. Imported once, here, not per-component -- echarts.use() is
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
type Item = { id: string; label: string; hint: string; go: () => void };
|
||||
|
||||
const staticItems: Item[] = [
|
||||
{ id: 'nav-search', label: 'Search', hint: 'Go to', go: () => goto('/') },
|
||||
{ id: 'nav-search', label: 'Search', hint: 'Go to', go: () => goto('/search') },
|
||||
{ id: 'nav-dashboards', label: 'Dashboards', hint: 'Go to', go: () => goto('/dashboards') },
|
||||
{ id: 'nav-alerts', label: 'Alerts', hint: 'Go to', go: () => goto('/alerts') },
|
||||
{ id: 'nav-data-sources', label: 'Data Sources', hint: 'Go to', go: () => goto('/data-sources') },
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
} from '$lib/api';
|
||||
import { getTheme, setTheme, type Theme } from '$lib/theme.svelte';
|
||||
import { getDensity, toggleDensity } from '$lib/density.svelte';
|
||||
import logo from '$lib/assets/logo-horizontal-dark.svg';
|
||||
|
||||
let {
|
||||
onOpenPalette,
|
||||
@@ -19,7 +20,7 @@
|
||||
}: { onOpenPalette: () => void; mobileOpen?: boolean; onCloseMobile?: () => void } = $props();
|
||||
|
||||
const baseNavItems = [
|
||||
{ href: '/', label: 'Search', icon: '◇' },
|
||||
{ href: '/search', label: 'Search', icon: '◇' },
|
||||
{ href: '/dashboards', label: 'Dashboards', icon: '▤' },
|
||||
{ href: '/alerts', label: 'Alerts', icon: '▲' },
|
||||
{ href: '/data-sources', label: 'Data Sources', icon: '◈' },
|
||||
@@ -82,8 +83,9 @@
|
||||
|
||||
<aside class="sidebar" class:mobile-open={mobileOpen}>
|
||||
<div class="brand">
|
||||
<span class="mark" aria-hidden="true">◆</span>
|
||||
<span class="name">Sentry</span>
|
||||
<a href="/" class="brand-link" onclick={onCloseMobile}>
|
||||
<img src={logo} alt="Cairn OBS" class="brand-logo" />
|
||||
</a>
|
||||
<button type="button" class="close-mobile" onclick={onCloseMobile} aria-label="Close menu">✕</button>
|
||||
</div>
|
||||
|
||||
@@ -166,12 +168,13 @@
|
||||
gap: var(--space-2);
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
.mark {
|
||||
color: var(--color-accent);
|
||||
.brand-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.name {
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--text-md);
|
||||
.brand-logo {
|
||||
height: 2.5rem;
|
||||
width: auto;
|
||||
}
|
||||
.close-mobile {
|
||||
display: none;
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
export type Density = 'comfortable' | 'compact';
|
||||
|
||||
const STORAGE_KEY = 'sentry.density';
|
||||
const STORAGE_KEY = 'cairnobs.density';
|
||||
|
||||
function readStored(): Density {
|
||||
if (typeof localStorage === 'undefined') return 'comfortable';
|
||||
|
||||
@@ -26,7 +26,7 @@ const STATS_FUNCTIONS = new Set(['count', 'sum', 'avg', 'min', 'max']);
|
||||
const TIME_FIELDS = new Set(['earliest', 'latest']);
|
||||
|
||||
export const pipeLanguage = StreamLanguage.define({
|
||||
name: 'sentry-pipe',
|
||||
name: 'cairnobs-pipe',
|
||||
startState() {
|
||||
return { afterPipe: true };
|
||||
},
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
export type Theme = 'dark' | 'light' | 'system';
|
||||
|
||||
const STORAGE_KEY = 'sentry.theme';
|
||||
const STORAGE_KEY = 'cairnobs.theme';
|
||||
|
||||
function readStored(): Theme {
|
||||
if (typeof localStorage === 'undefined') return 'dark';
|
||||
|
||||
@@ -60,8 +60,12 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Sentry</title>
|
||||
<title>Cairn OBS</title>
|
||||
<link rel="icon" href={favicon} />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png" />
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/favicon-180.png" />
|
||||
</svelte:head>
|
||||
|
||||
{#if isLoginPage}
|
||||
|
||||
+57
-179
@@ -1,204 +1,82 @@
|
||||
<script lang="ts">
|
||||
// Phase 2: single unified query page. Replaces Phase 0/1's two
|
||||
// separate pages (raw-SQL-only /query, free-text-only /search) --
|
||||
// see /docs/query-language-design.md and /docs/query-language-reference.md.
|
||||
// Phase 3: query bar extracted into $lib/QueryBar.svelte (reused by
|
||||
// the dashboard panel editor and alert rule editor), fetch calls
|
||||
// moved into $lib/api.ts.
|
||||
|
||||
import ResultsTable from '$lib/ResultsTable.svelte';
|
||||
import QueryBar from '$lib/QueryBar.svelte';
|
||||
import AddToDashboardModal from '$lib/components/AddToDashboardModal.svelte';
|
||||
// Landing page -- the app's first stop after login, distinct from
|
||||
// /search (the old root; every prior link/shortcut/drill-down that
|
||||
// used to point at "/" expecting the query page now points at
|
||||
// "/search" explicitly, see NavSidebar/CommandPalette/drilldown.ts).
|
||||
import logo from '$lib/assets/logo-stacked-dark.svg';
|
||||
import { Button } from '$lib/components/ui';
|
||||
import { runQuery as apiRunQuery, injectTimeRange, type Language } from '$lib/api';
|
||||
import { page } from '$app/state';
|
||||
|
||||
type HistoryEntry = { query: string; language: Language; at: number };
|
||||
|
||||
const HISTORY_KEY = 'sentry.queryHistory';
|
||||
const HISTORY_LIMIT = 20;
|
||||
|
||||
let query = $state('earliest=-1h | sort -timestamp | head 100');
|
||||
let language = $state<Language>('');
|
||||
let columns = $state<string[]>([]);
|
||||
let rows = $state<unknown[][]>([]);
|
||||
let error = $state('');
|
||||
let warnings = $state<string[]>([]);
|
||||
let loading = $state(false);
|
||||
let hasRun = $state(false);
|
||||
let history = $state<HistoryEntry[]>(loadHistory());
|
||||
|
||||
function loadHistory(): HistoryEntry[] {
|
||||
if (typeof sessionStorage === 'undefined') return [];
|
||||
try {
|
||||
const raw = sessionStorage.getItem(HISTORY_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveHistory(entry: HistoryEntry) {
|
||||
history = [entry, ...history.filter((h) => h.query !== entry.query)].slice(0, HISTORY_LIMIT);
|
||||
try {
|
||||
sessionStorage.setItem(HISTORY_KEY, JSON.stringify(history));
|
||||
} catch {
|
||||
// session storage unavailable/full -- history is a convenience,
|
||||
// not worth failing the query over
|
||||
}
|
||||
}
|
||||
|
||||
function useHistoryEntry(entry: HistoryEntry) {
|
||||
query = entry.query;
|
||||
language = entry.language;
|
||||
}
|
||||
|
||||
async function runQuery() {
|
||||
loading = true;
|
||||
error = '';
|
||||
warnings = [];
|
||||
try {
|
||||
const result = await apiRunQuery(query, language);
|
||||
columns = result.columns ?? [];
|
||||
rows = result.rows ?? [];
|
||||
warnings = result.warnings ?? [];
|
||||
saveHistory({ query, language, at: Date.now() });
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : String(e);
|
||||
columns = [];
|
||||
rows = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
hasRun = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Drill-down landing: a chart's "click to drill into query"
|
||||
// (see $lib/charts/drilldown.ts) navigates here with ?q=&earliest=&latest=.
|
||||
// Runs once per navigation, not on every reactive change, so editing
|
||||
// the query bar afterwards doesn't keep re-injecting the original
|
||||
// drill-down range.
|
||||
let consumedDrillDownParams = false;
|
||||
$effect(() => {
|
||||
const params = page.url.searchParams;
|
||||
const q = params.get('q');
|
||||
if (!q || consumedDrillDownParams) return;
|
||||
consumedDrillDownParams = true;
|
||||
const earliest = params.get('earliest');
|
||||
const latest = params.get('latest');
|
||||
query = earliest ? injectTimeRange(q, earliest, latest ?? 'now') : q;
|
||||
runQuery();
|
||||
});
|
||||
|
||||
let addToDashboardOpen = $state(false);
|
||||
const shortcuts: { href: string; label: string; hint: string }[] = [
|
||||
{ href: '/search', label: 'Search', hint: 'Query logs with filters, free-text, or raw SQL' },
|
||||
{ href: '/dashboards', label: 'Dashboards', hint: 'Saved multi-panel views over your queries' },
|
||||
{ href: '/agents', label: 'Agents', hint: 'Everything reporting logs, and its config' },
|
||||
{ href: '/hosts', label: 'Hosts', hint: 'Per-host log volume and service breakdown' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Sentry — Query</h1>
|
||||
<p>
|
||||
One query bar for both filter/stats queries and free-text search — see
|
||||
<code>/docs/query-language-reference.md</code> in the repo for the full syntax, or the cheat
|
||||
sheet below. Build reusable queries into a <a href="/dashboards">dashboard</a>.
|
||||
<img src={logo} alt="Cairn OBS" class="logo" />
|
||||
<p class="tagline">
|
||||
One query bar for filter/stats queries and free-text search across every host and service
|
||||
you're shipping logs from.
|
||||
</p>
|
||||
|
||||
<QueryBar bind:query bind:language onRun={runQuery} {loading} errorMessage={error} {warnings} />
|
||||
|
||||
{#if error}
|
||||
<p class="error">Error: {error}</p>
|
||||
{/if}
|
||||
|
||||
{#if hasRun && !error && columns.length > 0}
|
||||
<div class="results-actions">
|
||||
<Button size="sm" variant="secondary" onclick={() => (addToDashboardOpen = true)}>
|
||||
+ Add as panel to dashboard
|
||||
<div class="shortcuts">
|
||||
{#each shortcuts as s (s.href)}
|
||||
<Button href={s.href} variant="secondary">
|
||||
<span class="shortcut-label">{s.label}</span>
|
||||
<span class="shortcut-hint">{s.hint}</span>
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ResultsTable {columns} {rows} {hasRun} />
|
||||
|
||||
<AddToDashboardModal bind:open={addToDashboardOpen} {query} {language} />
|
||||
|
||||
{#if history.length > 0}
|
||||
<details class="history">
|
||||
<summary>Query history ({history.length})</summary>
|
||||
<ul>
|
||||
{#each history as entry (entry.at)}
|
||||
<li>
|
||||
<button class="history-item" onclick={() => useHistoryEntry(entry)}>
|
||||
<code>{entry.query}</code>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
<details class="cheatsheet">
|
||||
<summary>Pipe syntax cheat sheet</summary>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><code>field=value</code></td><td>filter on a structured field</td></tr>
|
||||
<tr><td><code>"free text"</code> / bare word</td><td>full-text search on <code>message</code></td></tr>
|
||||
<tr><td><code>message:"exact phrase"</code></td><td>explicit full-text search</td></tr>
|
||||
<tr><td><code>| where field>value</code></td><td>additional structured filter</td></tr>
|
||||
<tr><td><code>| stats count by field</code></td><td>aggregate (count/sum/avg/min/max)</td></tr>
|
||||
<tr><td><code>| sort -field</code></td><td>sort descending (<code>+field</code> for ascending)</td></tr>
|
||||
<tr><td><code>| fields a, b</code></td><td>project specific columns</td></tr>
|
||||
<tr><td><code>| head 50</code> / <code>| tail 50</code></td><td>limit results</td></tr>
|
||||
<tr><td><code>earliest=-1h</code> / <code>latest=...</code></td><td>time range (relative or RFC3339)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Full reference: <code>/docs/query-language-reference.md</code> in the repo.</p>
|
||||
</details>
|
||||
{/each}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 64rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--space-8, 4rem);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-2);
|
||||
.logo {
|
||||
width: 11rem;
|
||||
height: 11rem;
|
||||
}
|
||||
p {
|
||||
.tagline {
|
||||
margin-top: var(--space-4);
|
||||
color: var(--color-text-muted);
|
||||
max-width: 32rem;
|
||||
}
|
||||
.error {
|
||||
color: var(--color-danger);
|
||||
.shortcuts {
|
||||
margin-top: var(--space-6);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
}
|
||||
.results-actions {
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
.history ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
.history-item {
|
||||
background: none;
|
||||
border: none;
|
||||
.shortcuts :global(.btn) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-1);
|
||||
height: auto;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
text-align: left;
|
||||
padding: var(--space-1) 0;
|
||||
cursor: pointer;
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.history-item:hover {
|
||||
text-decoration: underline;
|
||||
.shortcut-label {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.cheatsheet {
|
||||
margin-top: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
.shortcut-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--color-text-muted);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
.cheatsheet table {
|
||||
border-collapse: collapse;
|
||||
margin-top: var(--space-2);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.cheatsheet td {
|
||||
padding: var(--space-1) var(--space-4) var(--space-1) 0;
|
||||
vertical-align: top;
|
||||
@media (max-width: 30rem) {
|
||||
.shortcuts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
<script lang="ts">
|
||||
// Phase 2: single unified query page. Replaces Phase 0/1's two
|
||||
// separate pages (raw-SQL-only /query, free-text-only /search) --
|
||||
// see /docs/query-language-design.md and /docs/query-language-reference.md.
|
||||
// Phase 3: query bar extracted into $lib/QueryBar.svelte (reused by
|
||||
// the dashboard panel editor and alert rule editor), fetch calls
|
||||
// moved into $lib/api.ts.
|
||||
|
||||
import ResultsTable from '$lib/ResultsTable.svelte';
|
||||
import QueryBar from '$lib/QueryBar.svelte';
|
||||
import AddToDashboardModal from '$lib/components/AddToDashboardModal.svelte';
|
||||
import { Button } from '$lib/components/ui';
|
||||
import { runQuery as apiRunQuery, injectTimeRange, type Language } from '$lib/api';
|
||||
import { page } from '$app/state';
|
||||
|
||||
type HistoryEntry = { query: string; language: Language; at: number };
|
||||
|
||||
const HISTORY_KEY = 'cairnobs.queryHistory';
|
||||
const HISTORY_LIMIT = 20;
|
||||
|
||||
let query = $state('earliest=-1h | sort -timestamp | head 100');
|
||||
let language = $state<Language>('');
|
||||
let columns = $state<string[]>([]);
|
||||
let rows = $state<unknown[][]>([]);
|
||||
let error = $state('');
|
||||
let warnings = $state<string[]>([]);
|
||||
let loading = $state(false);
|
||||
let hasRun = $state(false);
|
||||
let history = $state<HistoryEntry[]>(loadHistory());
|
||||
|
||||
function loadHistory(): HistoryEntry[] {
|
||||
if (typeof sessionStorage === 'undefined') return [];
|
||||
try {
|
||||
const raw = sessionStorage.getItem(HISTORY_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveHistory(entry: HistoryEntry) {
|
||||
history = [entry, ...history.filter((h) => h.query !== entry.query)].slice(0, HISTORY_LIMIT);
|
||||
try {
|
||||
sessionStorage.setItem(HISTORY_KEY, JSON.stringify(history));
|
||||
} catch {
|
||||
// session storage unavailable/full -- history is a convenience,
|
||||
// not worth failing the query over
|
||||
}
|
||||
}
|
||||
|
||||
function useHistoryEntry(entry: HistoryEntry) {
|
||||
query = entry.query;
|
||||
language = entry.language;
|
||||
}
|
||||
|
||||
async function runQuery() {
|
||||
loading = true;
|
||||
error = '';
|
||||
warnings = [];
|
||||
try {
|
||||
const result = await apiRunQuery(query, language);
|
||||
columns = result.columns ?? [];
|
||||
rows = result.rows ?? [];
|
||||
warnings = result.warnings ?? [];
|
||||
saveHistory({ query, language, at: Date.now() });
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : String(e);
|
||||
columns = [];
|
||||
rows = [];
|
||||
} finally {
|
||||
loading = false;
|
||||
hasRun = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Drill-down landing: a chart's "click to drill into query"
|
||||
// (see $lib/charts/drilldown.ts) navigates here with ?q=&earliest=&latest=.
|
||||
// Runs once per navigation, not on every reactive change, so editing
|
||||
// the query bar afterwards doesn't keep re-injecting the original
|
||||
// drill-down range.
|
||||
let consumedDrillDownParams = false;
|
||||
$effect(() => {
|
||||
const params = page.url.searchParams;
|
||||
const q = params.get('q');
|
||||
if (!q || consumedDrillDownParams) return;
|
||||
consumedDrillDownParams = true;
|
||||
const earliest = params.get('earliest');
|
||||
const latest = params.get('latest');
|
||||
query = earliest ? injectTimeRange(q, earliest, latest ?? 'now') : q;
|
||||
runQuery();
|
||||
});
|
||||
|
||||
let addToDashboardOpen = $state(false);
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Cairn OBS — Query</h1>
|
||||
<p>
|
||||
One query bar for both filter/stats queries and free-text search — see
|
||||
<code>/docs/query-language-reference.md</code> in the repo for the full syntax, or the cheat
|
||||
sheet below. Build reusable queries into a <a href="/dashboards">dashboard</a>.
|
||||
</p>
|
||||
|
||||
<QueryBar bind:query bind:language onRun={runQuery} {loading} errorMessage={error} {warnings} />
|
||||
|
||||
{#if error}
|
||||
<p class="error">Error: {error}</p>
|
||||
{/if}
|
||||
|
||||
{#if hasRun && !error && columns.length > 0}
|
||||
<div class="results-actions">
|
||||
<Button size="sm" variant="secondary" onclick={() => (addToDashboardOpen = true)}>
|
||||
+ Add as panel to dashboard
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ResultsTable {columns} {rows} {hasRun} />
|
||||
|
||||
<AddToDashboardModal bind:open={addToDashboardOpen} {query} {language} />
|
||||
|
||||
{#if history.length > 0}
|
||||
<details class="history">
|
||||
<summary>Query history ({history.length})</summary>
|
||||
<ul>
|
||||
{#each history as entry (entry.at)}
|
||||
<li>
|
||||
<button class="history-item" onclick={() => useHistoryEntry(entry)}>
|
||||
<code>{entry.query}</code>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
<details class="cheatsheet">
|
||||
<summary>Pipe syntax cheat sheet</summary>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td><code>field=value</code></td><td>filter on a structured field</td></tr>
|
||||
<tr><td><code>"free text"</code> / bare word</td><td>full-text search on <code>message</code></td></tr>
|
||||
<tr><td><code>message:"exact phrase"</code></td><td>explicit full-text search</td></tr>
|
||||
<tr><td><code>| where field>value</code></td><td>additional structured filter</td></tr>
|
||||
<tr><td><code>| stats count by field</code></td><td>aggregate (count/sum/avg/min/max)</td></tr>
|
||||
<tr><td><code>| sort -field</code></td><td>sort descending (<code>+field</code> for ascending)</td></tr>
|
||||
<tr><td><code>| fields a, b</code></td><td>project specific columns</td></tr>
|
||||
<tr><td><code>| head 50</code> / <code>| tail 50</code></td><td>limit results</td></tr>
|
||||
<tr><td><code>earliest=-1h</code> / <code>latest=...</code></td><td>time range (relative or RFC3339)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Full reference: <code>/docs/query-language-reference.md</code> in the repo.</p>
|
||||
</details>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 64rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-xl);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
p {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.error {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.results-actions {
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
.history ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-2) 0 0;
|
||||
}
|
||||
.history-item {
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
padding: var(--space-1) 0;
|
||||
cursor: pointer;
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.history-item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.cheatsheet {
|
||||
margin-top: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.cheatsheet table {
|
||||
border-collapse: collapse;
|
||||
margin-top: var(--space-2);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.cheatsheet td {
|
||||
padding: var(--space-1) var(--space-4) var(--space-1) 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
// Static adapter needs every route prerenderable. This page has no load
|
||||
// function (all data comes from a client-side fetch on submit), so a plain
|
||||
// prerender is enough — no need to disable SSR.
|
||||
export const prerender = true;
|
||||
@@ -3,7 +3,7 @@
|
||||
// the browser here (SELECT_TENANT_REDIRECT_URL, default
|
||||
// http://localhost:3000/select-tenant -- see enterprise/internal/
|
||||
// config's doc comment) after a login resolves to more than one
|
||||
// tenant_memberships row, carrying a short-lived sentry_pending_login
|
||||
// tenant_memberships row, carrying a short-lived cairnobs_pending_login
|
||||
// cookie instead of a real session. This page's whole job: show the
|
||||
// choices GET /auth/memberships returns, and turn a click into
|
||||
// POST /auth/select-tenant, which trades that cookie for a real
|
||||
|
||||
Reference in New Issue
Block a user