Architecture

Overview

ArgoCD IOC Monitor is a React single-page application that provides a dashboard for monitoring ArgoCD-managed IOC (Input/Output Controller) applications.

        graph LR
    Browser --> Nginx
    Nginx -->|/api/| ArgoCD
    Nginx -->|/auth/| ArgoCD
    Nginx -->|/*| SPA[React SPA]
    ArgoCD -.->|OIDC planned| Keycloak
    

Stack

• Frontend: React + TypeScript + Vite

• Styling: Tailwind CSS

• UI Components: base-ui headless components with Tailwind styling (shadcn pattern)

• Data Fetching: TanStack React Query

• Routing: React Router

• Production Server: Nginx (reverse proxy + static files)

Authentication

Currently the app uses manually-pasted ArgoCD tokens. Users run argocd login --sso to authenticate via Keycloak, then copy the auth-token and refresh-token from ~/.config/argocd/config into the app’s login dialog. Tokens are stored in localStorage and synced to cookies for API requests.

Optionally, Keycloak OIDC authentication can be enabled via an oauth2-proxy sidecar so users log in through SSO without manual token handling. See Keycloak Authentication for details.

Deployment

The app is packaged as a Docker container running nginx. A Helm chart is provided for Kubernetes deployment. The nginx config is injected via a ConfigMap so the ArgoCD target URL can be configured per environment.