Skip to content

alloy-go/Alloy-ui

BranchesTags

Repository files navigation

Alloy logo

Alloy UI - Visual Control Center for Kubernetes Deployments

Monitor, manage, and orchestrate production releases through an intuitive web interface

Overview • Features • Getting Started • Configuration • Structure

Overview

Alloy UI is the web-based dashboard for Alloy — a Kubernetes-native continuous deployment orchestration system.

While Alloy-core handles the deployment engine and Kubernetes orchestration, Alloy UI provides the human interface for:

  • Creating and managing deployment projects
  • Triggering releases with custom strategies
  • Real-time monitoring of canary rollouts
  • Viewing deployment history and logs
  • Managing rollback operations
  • Visualizing traffic progression through canary stages

Built with Next.js 15, React 19, and TypeScript, Alloy UI delivers a modern, responsive experience for DevOps teams managing production releases .

Core Philosophy

Alloy-core orchestrates. Alloy UI visualizes and controls.

The dashboard transforms complex Kubernetes deployment operations into an intuitive visual workflow, making progressive delivery accessible to the entire team.

🚀 Key Features

  • 📊 Real-Time Deployment Dashboard — Live status updates for active deployments across all projects
  • 🎯 Project Management — Create, configure, and manage multiple deployment projects
  • 🚀 One-Click Deployments — Trigger releases with canary, rolling, or auto strategies
  • 📈 Canary Progression Tracking — Visual representation of traffic splits (17% → 50% → 83% → 100%)
  • 🔄 Deployment History — Complete audit trail with commit SHA tracking and timestamps
  • ⏮️ Instant Rollback Controls — Emergency rollback to last stable version with single click
  • 📋 Kubernetes Manifest Manager — Upload and validate Secret, Service, and Deployment YAML files
  • 🔐 Authentication & Authorization — Secure user management with project-level access control
  • 🎨 Responsive Design — Fully responsive interface built with Tailwind CSS
  • ⚡ Server-Side Rendering — Fast page loads with Next.js App Router

🏗 Architecture

Alloy UI acts as the frontend client for the Alloy orchestrator backend.

System Integration

┌─────────────────────────┐
│      Alloy UI           │
│   (Next.js Frontend)    │
│                         │
│  - Project Dashboard    │
│  - Deployment Controls  │
│  - Real-time Monitoring │
│  - History Viewer       │
└───────────┬─────────────┘
            │ REST API
            │ (HTTP/HTTPS)
            ▼
┌─────────────────────────┐
│   Alloy Orchestrator    │
│      (Go Backend)       │
│                         │
│  - Deployment Engine    │
│  - Strategy Controller  │
│  - Health Monitoring    │
└───────────┬─────────────┘
            │ client-go SDK
            ▼
┌─────────────────────────┐
│ Kubernetes API Server   │
└─────────────────────────┘

Communication Flow

  1. User Action — User triggers deployment through UI
  2. API Request — Next.js frontend sends HTTP request to Alloy-core API
  3. Orchestration — Alloy-core validates request and begins Kubernetes orchestration
  4. Status Updates — UI polls or receives webhooks for real-time status
  5. Visualization — Dashboard displays live deployment progress and metrics

🛠 Getting Started

Prerequisites

  • Node.js (v18+ or v20+)
  • npm or yarn or pnpm
  • Alloy-core running and accessible

Installation

1. Clone the repository

git clone https://github.com/Alloy-go/Alloy-ui.git
cd Alloy-ui

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install

3. Configure environment variables

Create a .env.local file in the root directory:

# Alloy Core API Configuration
NEXT_PUBLIC_API_URL=http://localhost:8080

4. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev

5. Open the application

Navigate to http://localhost:3000 in your browser .

⚙️ Environment Configuration

Alloy UI uses Next.js environment variables with the NEXT_PUBLIC_ prefix for client-side access.

Required Variables

Variable Description Example Required
NEXT_PUBLIC_API_URL Base URL for Alloy-core API http://localhost:8080 ✅ Yes

Environment Files

  • .env.local — Local development (not committed to Git)
  • .env.development — Development environment defaults
  • .env.production — Production environment settings

Example .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8080

Example .env.production:

NEXT_PUBLIC_API_URL=https://alloy.yourdomain.com

Security Note: Never commit .env.local files containing sensitive credentials. All client-accessible variables must use the NEXT_PUBLIC_ prefix .

Based on your screenshots showing the actual project structure, here's the updated Project Structure section for your README:

📁 Project Structure

alloy-ui/
├── public/                      # Static assets
│   └── Alloy-Logo.svg          # Application logo
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Auth route group
│   │   ├── (dashboard)/       # Dashboard route group
│   │   │   └── metrics/       # Metrics pages
│   │   │       └── [projectId]/  # Dynamic project metrics
│   │   ├── applications/      # Applications management
│   │   ├── settings/          # Settings pages
│   │   ├── favicon.ico        # Application favicon
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Home/Dashboard page
│   ├── components/            # React components
│   │   ├── applications/      # Application-specific components
│   │   ├── auth/              # Authentication components
│   │   ├── metrics/           # Metrics visualization components
│   │   ├── settings/          # Settings page components
│   │   └── ui/                # Reusable UI components
│   └── lib/                   # Utility functions
│       ├── api.ts             # API client for Alloy-core
│       ├── types.ts           # TypeScript type definitions
│       └── utils.ts           # Helper functions
├── .gitignore                 # Git ignore rules
├── README.md                  # Project documentation
├── bun.lock                   # Bun package lock file
├── components.json            # shadcn/ui configuration
├── eslint.config.mjs          # ESLint configuration
├── next.config.ts             # Next.js configuration
├── package.json               # Node.js dependencies
├── postcss.config.mjs         # PostCSS configuration
└── tsconfig.json              # TypeScript configuration

Key Directories

/src/app

Next.js 15 App Router with route groups for organized navigation:

  • (auth)/ — Authentication routes (login, signup) with separate layout
  • (dashboard)/ — Main dashboard with metrics and project views
  • applications/ — Application/project management interface
  • settings/ — User and system configuration pages

/src/components

Modular React components organized by feature:

  • applications/ — Project cards, deployment triggers, manifest editors
  • auth/ — Login forms, signup flows, auth guards
  • metrics/ — Charts, graphs, and deployment progress visualizations
  • settings/ — Configuration forms and preference controls
  • ui/ — Reusable UI primitives (buttons, cards, dialogs, forms)

/src/lib

Core utilities and business logic:

  • api.ts — Centralized API client for Alloy-core communication
  • types.ts — TypeScript interfaces for deployments, projects, metrics
  • utils.ts — Helper functions for formatting, validation, and common operations

/public

Static assets served from root:

  • Alloy-Logo.svg — Application branding

🎨 Tech Stack

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • UI Library: React 19
  • Styling: Tailwind CSS
  • API Client: Fetch API
  • Form Handling: React Hook Form + Zod validation
  • Icons: Lucide React

📊 Key UI Components

Dashboard View

  • Active Deployments Panel — Real-time status of ongoing releases
  • Project Overview Cards — Quick access to all configured projects
  • Recent Activity Feed — Latest deployment history across all projects

Project Management

  • Create Project Form — Configure new deployment projects with Kubernetes manifests
  • Project Settings — Update deployment strategies and configurations
  • Manifest Editor — YAML validation and syntax highlighting for K8s resources

Deployment Control

  • Trigger Deployment — Select image tag, commit SHA, and strategy
  • Canary Progress Bar — Visual representation of traffic progression
  • Health Metrics Display — Pod readiness and availability status
  • Rollback Button — Emergency rollback with confirmation dialog

History & Logs

  • Deployment Timeline — Chronological view of all releases
  • Status Badges — Visual indicators (Success, Failed, Rolling Back, In Progress)
  • Commit Tracking — Git commit SHA linking for traceability

🚀 Deployment

Production Build

npm run build
npm run start

Docker Deployment

Create a Dockerfile:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["npm", "start"]

Build and run:

docker build -t alloy-ui:latest .
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_API_URL=http://alloy-core:8080 \
  alloy-ui:latest

🔗 API Integration

Alloy UI communicates with Alloy-core through RESTful APIs.

Example API Client

// lib/api.ts
const API_BASE = process.env.NEXT_PUBLIC_API_URL;

export async function triggerDeployment(payload: DeploymentPayload) {
  const response = await fetch(`${API_BASE}/api/webhook/deploy`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  
  if (!response.ok) {
    throw new Error('Deployment failed');
  }
  
  return response.json();
}

export async function fetchProjects(userId: string) {
  const response = await fetch(`${API_BASE}/api/projects?user_id=${userId}`);
  return response.json();
}

Connecting to Alloy-Core

Ensure your NEXT_PUBLIC_API_URL points to a running Alloy-core instance:

# Local development
NEXT_PUBLIC_API_URL=http://localhost:8080

# Production
NEXT_PUBLIC_API_URL=https://alloy-api.yourdomain.com

🎯 Usage Example

Creating a New Project

  1. Navigate to Projects → Create New
  2. Upload Kubernetes manifests (Secret, Service, Deployment YAML)
  3. Configure default deployment strategy (auto, canary, or rollout)
  4. Save project configuration

Triggering a Deployment

  1. Select project from dashboard
  2. Enter Image Tag (e.g., v1.2.3)
  3. Enter Commit SHA (e.g., abc123def)
  4. Choose deployment strategy or use auto
  5. Click Deploy
  6. Monitor real-time progress through canary stages

Rolling Back

  1. View deployment history
  2. Identify failed or problematic release
  3. Click Rollback button
  4. Confirm rollback action
  5. System automatically reverts to last stable version

🔗 Related Projects

  • Alloy-core — Kubernetes orchestration engine (required backend)

Made with ❤️ for safer Kubernetes deployments

``

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages