# Hybrid Cloud Control Plane Portal

A modern Next.js web portal for managing the hybrid cloud control plane, replacing Azure Portal functionality.

## Features

- **Authentication**: Keycloak OIDC integration with SSO
- **VM Management**: Create, update, delete virtual machines via Crossplane
- **Resource Explorer**: Browse and manage all infrastructure resources
- **Kubernetes Management**: View and manage clusters via Rancher integration
- **Metrics Dashboards**: Embedded Grafana panels for monitoring
- **Log Viewer**: Integrated Loki log viewer
- **GitOps Status**: ArgoCD application status and sync information
- **RBAC**: Role-based access control with dynamic UI rendering

## Tech Stack

- **Framework**: Next.js 14+ (App Router)
- **UI**: React 18+, Tailwind CSS 3+
- **Authentication**: Keycloak with next-auth
- **State Management**: React Query (TanStack Query)
- **API Client**: Axios
- **Charts**: Recharts
- **Icons**: Lucide React

## Getting Started

### Prerequisites

- Node.js 18+
- npm or yarn
- Keycloak instance configured
- Access to Kubernetes cluster
- Access to Crossplane API

### Installation

```bash
cd portal
npm install
```

### Configuration

Copy [`.env.example`](.env.example) to `.env.local` and configure:

```env
KEYCLOAK_URL=https://keycloak.sankofa.nexus
KEYCLOAK_REALM=your-realm
KEYCLOAK_CLIENT_ID=portal-client
KEYCLOAK_CLIENT_SECRET=your-client-secret

NEXT_PUBLIC_CROSSPLANE_API=https://crossplane-api.crossplane-system.svc.cluster.local
NEXT_PUBLIC_ARGOCD_URL=https://argocd.sankofa.nexus
NEXT_PUBLIC_GRAFANA_URL=https://grafana.sankofa.nexus
NEXT_PUBLIC_LOKI_URL=https://loki.monitoring.svc.cluster.local:3100

# Must match the browser URL (NPM vhost), not the LAN upstream — e.g. https://sankofa.nexus
NEXTAUTH_URL=https://portal.sankofa.nexus
NEXTAUTH_SECRET=your-nextauth-secret
```

### Development

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

### Production Build

```bash
npm run build
npm start
```

## Project Structure

```
portal/
├── src/
│   ├── app/              # Next.js App Router pages
│   ├── components/       # React components
│   ├── lib/              # Utilities, API clients, auth
│   ├── types/            # TypeScript definitions
│   └── styles/           # Global styles
├── public/               # Static assets
└── package.json
```

## Key Components

### Authentication
- Keycloak OIDC provider integration
- Session management
- Token refresh
- Role extraction from JWT

### VM Management
- Create VM wizard
- VM list with filtering and search
- VM details and console access
- Start/stop/delete operations

### Resource Explorer
- Crossplane resource browser
- Filter by type, namespace, status
- Resource details and YAML viewer
- Quick actions

### Monitoring
- Embedded Grafana panels
- Custom metrics widgets
- Real-time updates
- Alert status

## Deployment

The portal is deployed as a Kubernetes deployment. See `gitops/apps/portal/` for deployment manifests.

## License

Apache 2.0