feat(plan-13): read-only Ops Console (NestJS API + React UI) — Track 1
Real web Control Panel over CASAN harness telemetry (Level-3 casan-platform component).
Read-only ("Đọc ≠ Ghi"): no settings writes, no gate bypass. Management/RBAC/approval are
Track 2/3 (future, Plan-14). Additive — harness gate untouched (64/0/3).
packages/casan-control-panel/
- backend/ (NestJS, ESM, /api/v1 + ok() envelope): TelemetryReader (jsonl/json, missing→[],
never fabricates) + TelemetryService (aggregations mirroring generate-agentops-dashboard.py)
+ endpoints overview/runs(+:traceId)/governance/security/incidents/tools/traceability/
drift/cost, and /healthz (stale-aware 200/503, fail-loud like dashboard-server.py). App
root + telemetry paths resolve via casan-paths-style marker walk-up (.specify OR
packages/casan-harness) + honor CASAN_DASHBOARD_* env. Binds 127.0.0.1; refuses
non-loopback under CASAN_PROFILE=prod. @Inject token so DI works under tsc AND tsx.
Tests (node native runner) 7/0: reader parse/missing, app-root, overview shape on real
repo state, freshness/stale fail-loud.
- frontend/ (React+Vite+Tailwind+TanStack, port 5174, proxies to :3010): AppLayout +
Sidebar + Header (LIVE/STALE badge from /healthz) + pages Overview/Runs/Governance/
Security/Incidents/Traceability. axios client unwraps ok() envelope. build green.
Wiring: root workspaces + `console:*` scripts. packaging/levels.json + casan-platform
README: platform preview now lists the Ops Console as an implemented component.
Verified: backend build + test 7/0; frontend tsc + vite build; API serves REAL data
(runs=6, provider_tokens=5556, action_blocks=7); /healthz 503 stale → 200 after touch.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
thanhnv
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
98d699d844
commit
63dd44a11b
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CASAN Ops Console</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "@casan/control-panel-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "CASAN Ops Console \u2014 read-only React UI over the harness telemetry API.",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"axios": "^1.10.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.30.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.23",
|
||||
"@types/react-dom": "^18.3.7",
|
||||
"@vitejs/plugin-react": "^4.6.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^5.4.19"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export default { plugins: { tailwindcss: {}, autoprefixer: {} } };
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { AppLayout } from './components/layout/AppLayout';
|
||||
import { Overview } from './pages/Overview';
|
||||
import { Runs } from './pages/Runs';
|
||||
import { Governance } from './pages/Governance';
|
||||
import { Security } from './pages/Security';
|
||||
import { Incidents } from './pages/Incidents';
|
||||
import { Traceability } from './pages/Traceability';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<AppLayout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Overview />} />
|
||||
<Route path="/runs" element={<Runs />} />
|
||||
<Route path="/governance" element={<Governance />} />
|
||||
<Route path="/security" element={<Security />} />
|
||||
<Route path="/incidents" element={<Incidents />} />
|
||||
<Route path="/traceability" element={<Traceability />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { Header } from './Header';
|
||||
export function AppLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50">
|
||||
<Sidebar />
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<Header />
|
||||
<main className="flex-1 overflow-auto p-6 space-y-6">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { health } from '../../lib/api';
|
||||
export function Header() {
|
||||
const { data } = useQuery({ queryKey: ['health'], queryFn: health });
|
||||
const stale = data ? !data.ok : true;
|
||||
return (
|
||||
<header className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6">
|
||||
<h1 className="text-base font-semibold text-gray-800">CASAN Ops Console <span className="text-gray-400 font-normal">· read-only</span></h1>
|
||||
<div className="flex items-center gap-3 text-xs">
|
||||
<span className="text-gray-500">runs: {data?.runs ?? '—'}</span>
|
||||
<span className={`px-2 py-1 rounded-full font-medium ${stale ? 'bg-orange-100 text-orange-700' : 'bg-green-100 text-green-700'}`}>
|
||||
{stale ? `STALE${data?.metrics_age_s != null ? ` (${data.metrics_age_s}s)` : ''}` : 'LIVE'}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
const NAV = [
|
||||
['/', 'Overview'], ['/runs', 'Runs'], ['/governance', 'Governance'],
|
||||
['/security', 'Security'], ['/incidents', 'Incidents'], ['/traceability', 'Traceability'],
|
||||
];
|
||||
export function Sidebar() {
|
||||
return (
|
||||
<aside className="w-56 bg-white border-r border-gray-200 flex-shrink-0">
|
||||
<div className="h-14 flex items-center px-6 font-bold text-blue-600 border-b border-gray-200">CASAN</div>
|
||||
<nav className="p-3 space-y-1">
|
||||
{NAV.map(([to, label]) => (
|
||||
<NavLink key={to} to={to} end={to === '/'}
|
||||
className={({ isActive }) => `block px-3 py-2 rounded-lg text-sm ${isActive ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'}`}>
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import type { ReactNode } from 'react';
|
||||
export function Card({ title, children, right }: { title?: string; children: ReactNode; right?: ReactNode }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
{title && (
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">{title}</h2>
|
||||
{right}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export function StatTile({ label, value, sub }: { label: string; value: ReactNode; sub?: string }) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
||||
<div className="text-xs text-gray-500">{label}</div>
|
||||
<div className="text-2xl font-semibold text-gray-800 mt-1">{value}</div>
|
||||
{sub && <div className="text-xs text-gray-400 mt-1">{sub}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const TONE: Record<string, string> = {
|
||||
ok: 'bg-green-100 text-green-700', pass: 'bg-green-100 text-green-700', success: 'bg-green-100 text-green-700', allow: 'bg-green-100 text-green-700',
|
||||
warn: 'bg-orange-100 text-orange-700', stale: 'bg-orange-100 text-orange-700',
|
||||
fail: 'bg-red-100 text-red-700', failed: 'bg-red-100 text-red-700', denied: 'bg-red-100 text-red-700', blocked: 'bg-red-100 text-red-700', deny: 'bg-red-100 text-red-700', block: 'bg-red-100 text-red-700', crit: 'bg-red-100 text-red-700',
|
||||
};
|
||||
export function StatusBadge({ value }: { value: string }) {
|
||||
const tone = TONE[String(value).toLowerCase()] ?? 'bg-gray-100 text-gray-600';
|
||||
return <span className={`px-2 py-1 rounded-full text-xs font-medium ${tone}`}>{value}</span>;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -0,0 +1,44 @@
|
||||
// Single axios client for the read-only Ops Console API. Mirrors the OKR app's api.ts:
|
||||
// relative baseURL, unwrap response.data.data. All GET (read-only).
|
||||
import axios from 'axios';
|
||||
|
||||
const client = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL ?? '/api/v1',
|
||||
});
|
||||
|
||||
async function get<T>(path: string): Promise<T> {
|
||||
const res = await client.get(`/${path}`);
|
||||
return res.data.data as T;
|
||||
}
|
||||
|
||||
export interface Freshness { stale: boolean; age_s: number | null; stale_after_s: number }
|
||||
|
||||
export interface Overview extends Freshness {
|
||||
totals: {
|
||||
runs: number; total_cost: number; avg_latency_ms: number; failures: number;
|
||||
hallucination_signals: number; provider_tokens: number; provider_cost: number;
|
||||
fallback_routes: number; tool_denies: number; action_blocks: number;
|
||||
};
|
||||
harness_signals: Record<string, Record<string, number | string>>;
|
||||
audit_chain: { records: number; head: string | null; last_decision: string | null };
|
||||
}
|
||||
|
||||
export const api = {
|
||||
overview: () => get<Overview>('overview'),
|
||||
runs: (limit = 50) => get<Freshness & { count: number; runs: any[] }>(`runs?limit=${limit}`),
|
||||
governance: () => get<Freshness & { records: number; by_decision: Record<string, number>; head: string | null; recent: any[] }>('governance'),
|
||||
security: () => get<Freshness & { verdicts: number; by_status: Record<string, number>; benign_fp: any; recent: any[] }>('security'),
|
||||
incidents: () => get<Freshness & { total: number; kill_switch_scopes: string[]; incidents: any[] }>('incidents'),
|
||||
traceability: () => get<Freshness & { matrix: any }>('traceability'),
|
||||
cost: () => get<Freshness & { provider_tokens: number; provider_cost: number; by_provider: any[]; business_kpi: any }>('cost'),
|
||||
};
|
||||
|
||||
// Health is raw (not enveloped) + carries HTTP status.
|
||||
export async function health(): Promise<{ ok: boolean; status: string; metrics_age_s: number | null; runs: number }> {
|
||||
try {
|
||||
const res = await axios.get('/healthz', { baseURL: '', validateStatus: () => true });
|
||||
return { ok: res.status === 200, ...res.data };
|
||||
} catch {
|
||||
return { ok: false, status: 'unreachable', metrics_age_s: null, runs: 0 };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { QueryClient } from '@tanstack/react-query';
|
||||
|
||||
// Poll telemetry every 15s; read-only console tolerates brief staleness.
|
||||
export const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 15_000, refetchInterval: 15_000, retry: 1 } },
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { queryClient } from './lib/queryClient';
|
||||
import App from './App';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatTile, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
export function Governance() {
|
||||
const { data, isLoading } = useQuery({ queryKey: ['governance'], queryFn: api.governance });
|
||||
if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatTile label="Audit records" value={data.records} />
|
||||
{Object.entries(data.by_decision).map(([k, v]) => <StatTile key={k} label={k} value={v as number} />)}
|
||||
</div>
|
||||
<Card title="Recent governance decisions" right={<span className="text-xs text-gray-400">head {data.head?.slice(0, 12) ?? '—'}…</span>}>
|
||||
<div className="overflow-x-auto"><table className="w-full text-sm">
|
||||
<thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">time</th><th>action</th><th>actor</th><th>risk</th><th>decision</th></tr></thead>
|
||||
<tbody>{data.recent.map((r: any, i: number) => (
|
||||
<tr key={i} className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">{r.timestamp?.replace('T',' ').replace('Z','')}</td>
|
||||
<td className="text-gray-700">{r.action}</td><td>{r.actor}</td><td>{r.risk_level}</td>
|
||||
<td><StatusBadge value={r.decision ?? '—'} /></td>
|
||||
</tr>))}</tbody>
|
||||
</table></div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatTile, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
export function Incidents() {
|
||||
const { data, isLoading } = useQuery({ queryKey: ['incidents'], queryFn: api.incidents });
|
||||
if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<StatTile label="Incidents" value={data.total} />
|
||||
<StatTile label="Kill-switch scopes" value={data.kill_switch_scopes.length} sub={data.kill_switch_scopes.join(', ') || 'none'} />
|
||||
</div>
|
||||
<Card title="Incident log">
|
||||
<div className="overflow-x-auto"><table className="w-full text-sm">
|
||||
<thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">time</th><th>event</th><th>severity</th><th>scope</th><th>action</th></tr></thead>
|
||||
<tbody>{data.incidents.map((r: any, i: number) => (
|
||||
<tr key={i} className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">{r.timestamp?.replace('T',' ').replace('Z','')}</td>
|
||||
<td className="text-gray-700">{r.event}</td><td><StatusBadge value={r.severity ?? '—'} /></td>
|
||||
<td>{r.scope}</td><td>{r.action}</td>
|
||||
</tr>))}</tbody>
|
||||
</table></div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatTile, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
export function Overview() {
|
||||
const { data, isLoading, isError } = useQuery({ queryKey: ['overview'], queryFn: api.overview });
|
||||
if (isLoading) return <div className="text-gray-500">Loading…</div>;
|
||||
if (isError || !data) return <div className="text-red-600">Cannot reach Ops Console API.</div>;
|
||||
const t = data.totals;
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatTile label="Runs" value={t.runs} />
|
||||
<StatTile label="Failures" value={t.failures} />
|
||||
<StatTile label="Total cost (est)" value={`$${t.total_cost.toFixed(4)}`} sub={`${t.provider_tokens} provider tokens`} />
|
||||
<StatTile label="Avg latency" value={`${t.avg_latency_ms} ms`} />
|
||||
<StatTile label="Fallback routes" value={t.fallback_routes} />
|
||||
<StatTile label="Tool denies" value={t.tool_denies} />
|
||||
<StatTile label="Action blocks" value={t.action_blocks} />
|
||||
<StatTile label="Hallucination signals" value={t.hallucination_signals} />
|
||||
</div>
|
||||
<Card title="Harness signals (real counts)">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
|
||||
{Object.entries(data.harness_signals).map(([h, sig]) => (
|
||||
<div key={h} className="border border-gray-200 rounded-lg p-3">
|
||||
<div className="font-medium text-gray-700">{h}</div>
|
||||
<div className="text-gray-500 mt-1">{Object.entries(sig).map(([k, v]) => `${k}: ${v}`).join(' · ')}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Audit chain" right={<StatusBadge value={data.audit_chain.last_decision ?? 'n/a'} />}>
|
||||
<div className="text-sm text-gray-600">records: {data.audit_chain.records} · head: <code className="text-xs">{data.audit_chain.head?.slice(0, 16) ?? '—'}…</code></div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
export function Runs() {
|
||||
const { data, isLoading } = useQuery({ queryKey: ['runs'], queryFn: () => api.runs(100) });
|
||||
if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
|
||||
return (
|
||||
<Card title={`Recent runs (${data.count})`}>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead><tr className="text-left text-gray-500 border-b border-gray-200">
|
||||
<th className="py-2">time</th><th>step</th><th>status</th><th>latency</th><th>tokens</th><th>cost</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{data.runs.map((r: any, i: number) => (
|
||||
<tr key={i} className="border-b border-gray-100">
|
||||
<td className="py-2 text-gray-500">{r.timestamp?.replace('T', ' ').replace('Z', '')}</td>
|
||||
<td className="text-gray-700">{r.step ?? r.harness}</td>
|
||||
<td><StatusBadge value={r.status ?? '—'} /></td>
|
||||
<td>{r.latency_ms ?? '—'} ms</td>
|
||||
<td>{r.total_tokens ?? '—'}</td>
|
||||
<td>${Number(r.cost_estimate ?? 0).toFixed(5)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatTile } from '../components/ui/Card';
|
||||
|
||||
export function Security() {
|
||||
const { data, isLoading } = useQuery({ queryKey: ['security'], queryFn: api.security });
|
||||
if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
|
||||
const fp = data.benign_fp;
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatTile label="H4 verdicts" value={data.verdicts} />
|
||||
{Object.entries(data.by_status).map(([k, v]) => <StatTile key={k} label={k} value={v as number} />)}
|
||||
</div>
|
||||
{fp && <Card title="Benign / false-positive budget">
|
||||
<pre className="text-xs text-gray-600 overflow-x-auto">{JSON.stringify(fp, null, 2)}</pre>
|
||||
</Card>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
import { Card, StatTile, StatusBadge } from '../components/ui/Card';
|
||||
|
||||
export function Traceability() {
|
||||
const { data, isLoading } = useQuery({ queryKey: ['traceability'], queryFn: api.traceability });
|
||||
if (isLoading || !data) return <div className="text-gray-500">Loading…</div>;
|
||||
const m = data.matrix;
|
||||
if (!m) return <Card title="Traceability"><div className="text-gray-500">No traceability-matrix.json yet.</div></Card>;
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatTile label="Requirements" value={m.summary?.requirements ?? '—'} />
|
||||
<StatTile label="Passed" value={m.summary?.passed ?? '—'} />
|
||||
<StatTile label="Failed" value={m.summary?.failed ?? '—'} />
|
||||
</div>
|
||||
<Card title="FR → code → test">
|
||||
<div className="overflow-x-auto"><table className="w-full text-sm">
|
||||
<thead><tr className="text-left text-gray-500 border-b border-gray-200"><th className="py-2">FR</th><th>name</th><th>status</th><th>code</th><th>tests</th></tr></thead>
|
||||
<tbody>{(m.matrix ?? []).map((r: any) => (
|
||||
<tr key={r.id} className="border-b border-gray-100">
|
||||
<td className="py-2 font-medium text-gray-700">{r.id}</td><td>{r.name}</td>
|
||||
<td><StatusBadge value={r.status} /></td>
|
||||
<td>{r.code?.length ?? 0}</td><td>{r.tests?.length ?? 0}</td>
|
||||
</tr>))}</tbody>
|
||||
</table></div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,3 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
const config: Config = { content: ['./index.html', './src/**/*.{ts,tsx}'], theme: { extend: {} }, plugins: [] };
|
||||
export default config;
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"types": ["node", "vite/client"]
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/components/layout/applayout.tsx","./src/components/layout/header.tsx","./src/components/layout/sidebar.tsx","./src/components/ui/card.tsx","./src/lib/api.ts","./src/lib/queryclient.ts","./src/pages/governance.tsx","./src/pages/incidents.tsx","./src/pages/overview.tsx","./src/pages/runs.tsx","./src/pages/security.tsx","./src/pages/traceability.tsx"],"errors":true,"version":"5.9.3"}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// Ops Console UI. Dev server on 5174 (5173 is the OKR app). Proxies /api/v1 + /healthz to
|
||||
// the read-only console API (default :3010) so the axios client uses a relative baseURL.
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5174,
|
||||
proxy: {
|
||||
'/api/v1': { target: 'http://127.0.0.1:3010', changeOrigin: true },
|
||||
'/healthz': { target: 'http://127.0.0.1:3010', changeOrigin: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user