e123f407d3
- Portal: phoenix-api-client, usePhoenixRailing hooks, /infrastructure page - Portal: PhoenixHealthTile on dashboard, resources page uses tenant me/resources - Sidebar: Infrastructure link; Keycloak token used for API calls (BFF) - api/.env.example: PHOENIX_RAILING_URL, PHOENIX_RAILING_API_KEY - rate-limit: key by tenant when tenantContext present Made-with: Cursor
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
cd portal
npm install
Configuration
Copy .env.example to .env.local and configure:
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
NEXTAUTH_URL=https://portal.sankofa.nexus
NEXTAUTH_SECRET=your-nextauth-secret
Development
npm run dev
Production Build
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