125 lines
3.0 KiB
Markdown
125 lines
3.0 KiB
Markdown
# 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
|