https://github.com/projectcontinuum/continuum-workbench-management-ui
Web based UI for managing continuum workbenchs
https://github.com/projectcontinuum/continuum-workbench-management-ui
Last synced: about 1 month ago
JSON representation
Web based UI for managing continuum workbenchs
- Host: GitHub
- URL: https://github.com/projectcontinuum/continuum-workbench-management-ui
- Owner: projectcontinuum
- Created: 2026-04-04T19:46:12.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-04T22:40:16.000Z (3 months ago)
- Last Synced: 2026-04-05T00:36:14.259Z (3 months ago)
- Language: TypeScript
- Size: 214 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Continuum Workbench Management UI
A modern React-based web interface for managing Continuum workbench instances. This UI allows users to interact with the `continuum-cluster-manager` backend API to create, manage, and monitor workbench instances.
## Repository
- **GitHub**: https://github.com/projectcontinuum/continuum-workbench-management-ui
## Features
- **Create Workbenches**: Launch new isolated workbench environments with customizable resources
- **Manage Instances**: View, suspend, resume, and delete workbench instances
- **Real-time Status**: Monitor the status of your workbenches (Running, Pending, Suspended, etc.)
- **Resource Configuration**: Configure CPU, memory, and storage for each workbench
- **Dark/Light Theme**: Consistent theming with the Continuum platform branding
- **Responsive Design**: Works seamlessly on desktop and mobile devices
## Tech Stack
- **React 18** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool and dev server
- **Tailwind CSS** - Utility-first styling
- **Framer Motion** - Animations
- **React Router** - Client-side routing
## Getting Started
### Prerequisites
- Node.js 18+
- npm or yarn
- Running instance of `continuum-cluster-manager` backend
### Installation
```bash
# Clone the repository
git clone https://github.com/projectcontinuum/continuum-workbench-management-ui.git
cd continuum-workbench-management-ui
# Install dependencies
npm install
```
### Development Mode
```bash
npm run dev
```
The Vite dev server will be available at `http://localhost:5173` with API proxying configured.
API requests to `/api/*` are proxied to the cluster-manager backend (default: `http://localhost:8080`).
### Production Build
```bash
# Build the frontend
npm run build
# Preview the production build locally
npm run preview
```
The built static files will be in the `dist/` directory. In production, these are served by the platform's ingress controller — the frontend calls `/api/v1/workbench` directly.
### Configuration
#### Environment Variables (Development)
| Variable | Default | Description |
|----------|---------|-------------|
| `CLUSTER_MANAGER_URL` | `http://localhost:8080` | URL of the cluster-manager backend (Vite dev proxy) |
#### Vite Development Proxy
For development, the Vite dev server proxies API requests. Configure in `vite.config.ts`:
```typescript
server: {
proxy: {
'/api': {
target: process.env.CLUSTER_MANAGER_URL || 'http://localhost:8080',
changeOrigin: true,
},
},
},
```
## API Endpoints
The UI communicates with the following backend endpoints:
| Method | Endpoint | Description |
|--------|----------|-------------|
| `GET` | `/api/v1/workbench` | List all workbenches |
| `POST` | `/api/v1/workbench` | Create a new workbench |
| `GET` | `/api/v1/workbench/{name}` | Get workbench status |
| `PUT` | `/api/v1/workbench/{name}` | Update workbench |
| `DELETE` | `/api/v1/workbench/{name}` | Delete workbench |
| `PUT` | `/api/v1/workbench/{name}/suspend` | Suspend workbench |
| `PUT` | `/api/v1/workbench/{name}/resume` | Resume workbench |
## Project Structure
```
workbench-management-ui/
├── src/
│ ├── api/ # API client functions
│ ├── components/ # Reusable UI components
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── types/ # TypeScript type definitions
│ ├── App.tsx # Root component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles and theme
├── public/ # Static assets
├── index.html # HTML template
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
```
## Theme Customization
The UI uses CSS custom properties for theming, matching the Continuum platform design system. Colors are defined in `src/index.css`:
- Light theme: Clean white backgrounds with purple accents
- Dark theme: Dark blue-grey backgrounds with light purple accents
## Contributing
1. Follow the existing component patterns
2. Use TypeScript for all new code
3. Keep components focused and reusable
4. Add proper accessibility attributes (aria-labels, roles, etc.)
## License
Apache 2.0 - See the main repository for full license details.