0a7b4f320b
Some checks failed
API CI / API Lint (push) Has been cancelled
API CI / API Type Check (push) Has been cancelled
API CI / API Test (push) Has been cancelled
API CI / API Build (push) Has been cancelled
CD Pipeline / Deploy to Staging (push) Has been cancelled
CI Pipeline / Lint and Type Check (push) Has been cancelled
CI Pipeline / Test Backend (push) Has been cancelled
CI Pipeline / Test Frontend (push) Has been cancelled
CI Pipeline / Security Scan (push) Has been cancelled
Deploy to Staging / Deploy to Staging (push) Has been cancelled
Portal CI / Portal Lint (push) Has been cancelled
Portal CI / Portal Type Check (push) Has been cancelled
Portal CI / Portal Test (push) Has been cancelled
Portal CI / Portal Build (push) Has been cancelled
Test Suite / frontend-tests (push) Has been cancelled
Test Suite / api-tests (push) Has been cancelled
Test Suite / blockchain-tests (push) Has been cancelled
Type Check / type-check (map[directory:. name:root]) (push) Has been cancelled
Type Check / type-check (map[directory:api name:api]) (push) Has been cancelled
Type Check / type-check (map[directory:portal name:portal]) (push) Has been cancelled
API CI / Build Docker Image (push) Has been cancelled
CD Pipeline / Deploy to Production (push) Has been cancelled
CI Pipeline / Build (push) Has been cancelled
- root .eslintrc with recommended TS rules; eslint --fix import order project-wide - Replace any/unknown in lib clients (ArgoCD, K8s, Phoenix), hooks, and key components - Form labels: htmlFor+id; escape apostrophes; remove or gate console (error boundary keep) - Crossplane VM status typing; webhook test result interface; infrastructure/resources maps typed 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