e01131efaf
- Transitioned from server-side session management to client-side using `useSession` from `next-auth/react`. - Added loading and unauthenticated states with user-friendly sign-in prompts in the Home and VMs pages. - Enhanced `auth.ts` to conditionally configure authentication providers based on Keycloak setup, with a fallback to a credentials provider for development mode. - Improved session management to include user details when using credentials provider.
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.yourdomain.com
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.yourdomain.com
NEXT_PUBLIC_GRAFANA_URL=https://grafana.yourdomain.com
NEXT_PUBLIC_LOKI_URL=https://loki.monitoring.svc.cluster.local:3100
NEXTAUTH_URL=https://portal.yourdomain.com
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