Garbo Validation Tool

June 9, 2026 · View on GitHub

image

A modern React-based tool for validating and managing workflow queues with real-time updates and interactive visualizations.

Features

  • Authentication: GitHub OAuth authentication for secure access (internal tool)
  • Real-time Queue Monitoring: Track active, waiting, completed, and failed jobs across multiple workflow stages
  • Jobbstatus Archive: Read-only Postgres-backed run history from Garbo (separate from live Redis); optional batch filters by Garbo Batch id or pipeline batch string. See API and proxy setup.
  • Company-Centric View: Group jobs by company and view their progress through the workflow
  • Interactive Workflow Diagram: Visualize the entire workflow process with job counts
  • Detailed Job Inspection: Examine job details, data, and logs in a user-friendly interface
  • Job Management: Approve, retry, or manage jobs directly from the dashboard

Tech Stack

  • Frontend: React with TypeScript
  • UI Components: Custom components with Tailwind CSS
  • State Management: RxJS for reactive state management
  • API Communication: Axios for HTTP requests
  • Data Fetching: SWR for data fetching with caching and revalidation
  • Containerization: Docker for deployment
  • Orchestration: Kubernetes for container orchestration

RxJS Architecture

This project uses RxJS for reactive data processing and state management. The application follows a reactive programming paradigm where data flows through streams (Observables) that can be transformed, combined, and consumed.

Key aspects of our RxJS implementation:

  • Reactive Data Flow: Data flows through streams from API to UI
  • Centralized State Management: Using BehaviorSubjects in QueueStore
  • Non-blocking Operations: All data processing is asynchronous
  • Declarative Transformations: Using operators like map, filter, mergeMap

For detailed information about our RxJS implementation and best practices, see RxJS Guide.

Getting Started

Prerequisites

  • Node.js (v16+)
  • npm or yarn

Installation

  1. Clone the repository
git clone <repository-url>
cd <repository-directory>
  1. Install dependencies
npm install
# or
yarn install
  1. Start the development server
npm run dev
# or
yarn dev

The development server will start on http://localhost:5173 (or the next available port).

On startup, the terminal logs which backends the Vite proxy targets, for example:

[vite] pipeline target: stage -> https://stage-pipeline-api.klimatkollen.se
[vite] unearth target: stage -> https://stage-api.unearthdata.ai ...
[vite] garbo (queue-archive) target: stage -> https://stage-api.klimatkollen.se ...
  1. Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173)

Backend APIs

The app talks to three backends:

BackendUsed forDefault host (stage)
Unearth APIAuth, crawler, registry, api-access, errors tabstage-api.unearthdata.ai
Garbo APIQueue archive (Jobbstatus Archive, batch pickers)stage-api.klimatkollen.se
PipelineLive job status, upload, rerunsstage-pipeline-api.klimatkollen.se

In local dev, Unearth uses /unearth-stage/api/... and Garbo archive uses /garbo-stage/api/queue-archive/....

In staging/production, nginx proxies /unearth-api/ → UNEARTH_API_URL and /garbo-api/queue-archive/ → GARBO_API_URL. Pipeline uses BACKEND_API_URL.

For path names, env vars, and Jobbstatus live vs archive, see API and proxy setup.

Company editor routing

The company editor uses full internal UUID in paths (/editor/company/:id). Staff API mutations also take company.id in path segments. Partner/integration read endpoints still accept Wikidata ID, full UUID, or 8-char prefix (legacy /editor/company/Q123 bookmarks keep working).

Public Klimatkollen links use wikidataId when present, otherwise the 8-char UUID prefix — see src/lib/company-routing.ts and ROUTING_URL_STATE.md.

Development

Project Structure

  • /src: Source code
    • /components: UI components
      • /ui: Reusable UI components
    • /hooks: Custom React hooks
    • /lib: Utilities, types, and constants
    • /assets: Static assets

Building for Production

npm run build
# or
yarn build

Docker Deployment

Build the Docker image:

docker build -t garbo-validation-tool .

Run the container:

docker run -p 80:80 garbo-validation-tool

Kubernetes Deployment

Apply the Kubernetes manifests:

kubectl apply -f k8s/

License

MIT License