Oops-ui

Frontend dashboard for oops — a Kubernetes-native test runner.

oops-ui shows test scenario executions triggered by pull requests and job. It displays run statuses, scenario results, pass/fail summaries, and allows looking up historical run results by run ID. It communicates with oopshubd (the oopshub gRPC backend) via oopshubproxyd, a grpc-gateway HTTP proxy running on Cloud Run.

Tech stack

Framework	React 18 + TypeScript
Build tool	Vite
Styling	Tailwind CSS
Routing	React Router v7
State management	Zustand
HTTP client	Axios
Auth	Google OAuth via @react-oauth/google + JWT decode
Data fetching	@tanstack/react-query
i18n	i18next + react-i18next

Prerequisites

• Node.js 18+
• Access to GCP with permissions to impersonate SA
• The oopshubproxyd binary built from ouchan/cloudrun/oopshubproxyd

Local setup

1. Install dependencies

npm install

2. Configure environment

cp .env.local.sample .env.local

Edit .env.local if needed (default port is 4000).

3. Start the local oopshub proxy

The Vite dev server proxies /oopshub/* requests to a local oopshubproxyd instance, which in turn authenticates and forwards them to oopshubd on Cloud Run.

Build the proxy binary (from the repo root):

cd ../ouchan
go build -o /tmp/oopshubproxyd ./cloudrun/oopshubproxyd/...

Start it:

AUDIENCE=https://oopshubd-next-30705341751.asia-northeast1.run.app \
  /tmp/oopshubproxyd -addr :4000

The proxy uses your local Application Default Credentials (ADC). Make sure you are authenticated:

4. Start the dev server

npm run dev

Open http://localhost:3000/oops-ui.

Project structure

src/
  components/       # Shared UI components
    uikit/          # Generic reusable components (StatusBadge, Loading, etc.)
  config/           # App-level config (reads from env vars)
  core/             # App infrastructure (RequireAuth, etc.)
  layouts/          # Page layout components (Sidebar, etc.)
  pages/            # Route-level page components
  services/         # API clients (api.ts)
  store/            # Zustand state stores
  types/            # Shared TypeScript types
    auth.ts         # Auth-related types
    oopshub.ts      # Oopshub API types
    test.ts         # Test run / scenario types
    ui.ts           # UI component types