fix(devops-web): resolve rendering issues and improve error handling
- Add timeout to auth check to prevent hanging on API failures - Add timeout to API requests to prevent infinite loading - Add proper error state and error messages to dashboard - Show empty states when no services/deployments are available - Update E2E tests to handle authentication properly - Improve user feedback when API is unavailable This fixes the "Loading..." hang issue when backend APIs are unavailable and provides better user experience with clear error messages and retry options. Generated with [Devin](https://cli.devin.ai/docs) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
root
parent
21b20a091a
commit
dcf7ecbb32
60
dashboard/web/e2e/dashboard.spec.ts
Normal file
60
dashboard/web/e2e/dashboard.spec.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('DevOps Dashboard E2E Tests', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate to login page first
|
||||
await page.goto('http://localhost:3000/login');
|
||||
|
||||
// Fill in login form
|
||||
await page.fill('input[type="email"]', 'admin@bytelyst.com');
|
||||
await page.fill('input[type="password"]', 'admin12345');
|
||||
await page.fill('input[type="text"]', 'bytelyst-devops');
|
||||
|
||||
// Submit login
|
||||
await page.click('button[type="submit"]');
|
||||
|
||||
// Wait for navigation to dashboard
|
||||
await page.waitForURL('http://localhost:3000/', { timeout: 10000 });
|
||||
});
|
||||
|
||||
test('dashboard page loads successfully', async ({ page }) => {
|
||||
// Check main heading
|
||||
await expect(page.getByText('Dashboard')).toBeVisible();
|
||||
await expect(page.getByText('Services and deployments overview')).toBeVisible();
|
||||
});
|
||||
|
||||
test('refresh button is visible', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: /refresh/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('create service button is visible', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: /create service/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('seed services button is visible', async ({ page }) => {
|
||||
await expect(page.getByRole('button', { name: /seed services/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('services section is visible', async ({ page }) => {
|
||||
await expect(page.getByText('Services')).toBeVisible();
|
||||
});
|
||||
|
||||
test('recent deployments section is visible', async ({ page }) => {
|
||||
await expect(page.getByText('Recent Deployments')).toBeVisible();
|
||||
});
|
||||
|
||||
test('refresh button works', async ({ page }) => {
|
||||
const refreshButton = page.getByRole('button', { name: /refresh/i }).first();
|
||||
await refreshButton.click();
|
||||
// Check that button shows loading state
|
||||
await expect(refreshButton).toBeDisabled();
|
||||
});
|
||||
|
||||
test('shows empty state when no services', async ({ page }) => {
|
||||
// Check for empty state message
|
||||
const emptyState = page.getByText('No services configured');
|
||||
if (await emptyState.isVisible()) {
|
||||
await expect(page.getByText('Create Service')).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
359
dashboard/web/src/app/page.tsx
Normal file
359
dashboard/web/src/app/page.tsx
Normal file
@ -0,0 +1,359 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { SidebarNav } from '@/components/sidebar-nav';
|
||||
import { api } from '@/lib/api';
|
||||
import type { Service, Deployment } from '@/lib/api';
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import { Play, Activity, Clock, RefreshCw, Plus, Edit, Trash2, FileText } from 'lucide-react';
|
||||
import { ServiceForm } from '@/components/service-form';
|
||||
import { LogViewer } from '@/components/log-viewer';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { user } = useAuth();
|
||||
const [services, setServices] = useState<Service[]>([]);
|
||||
const [recentDeployments, setRecentDeployments] = useState<Deployment[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showServiceForm, setShowServiceForm] = useState(false);
|
||||
const [editingService, setEditingService] = useState<Service | undefined>();
|
||||
const [viewingLogsDeployment, setViewingLogsDeployment] = useState<string | null>(null);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setError(null);
|
||||
try {
|
||||
// Add timeout to prevent hanging
|
||||
const timeoutPromise = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('API request timeout')), 15000)
|
||||
);
|
||||
|
||||
const [servicesData, deploymentsData] = await Promise.race([
|
||||
Promise.all([
|
||||
api.getServices(),
|
||||
api.getDeployments(10),
|
||||
]),
|
||||
timeoutPromise
|
||||
]) as [Service[], Deployment[]];
|
||||
|
||||
setServices(servicesData);
|
||||
setRecentDeployments(deploymentsData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : 'Failed to load data';
|
||||
setError(errorMessage);
|
||||
// Set empty arrays on error to prevent hanging
|
||||
setServices([]);
|
||||
setRecentDeployments([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const refreshHealth = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await api.clearHealthCache();
|
||||
const [servicesData, deploymentsData] = await Promise.all([
|
||||
api.getServices(),
|
||||
api.getDeployments(10),
|
||||
]);
|
||||
setServices(servicesData);
|
||||
setRecentDeployments(deploymentsData);
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh health:', error);
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
|
||||
// Auto-refresh every 60 seconds
|
||||
const interval = setInterval(() => {
|
||||
loadData();
|
||||
}, 60000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [loadData]);
|
||||
|
||||
async function handleDeploy(serviceId: string) {
|
||||
try {
|
||||
await api.triggerDeployment(serviceId);
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error('Deploy failed:', error);
|
||||
alert('Deployment failed');
|
||||
}
|
||||
}
|
||||
|
||||
function handleCreateService() {
|
||||
setEditingService(undefined);
|
||||
setShowServiceForm(true);
|
||||
}
|
||||
|
||||
function handleEditService(service: Service) {
|
||||
setEditingService(service);
|
||||
setShowServiceForm(true);
|
||||
}
|
||||
|
||||
async function handleDeleteService(serviceId: string) {
|
||||
if (!confirm('Are you sure you want to delete this service?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await api.deleteService(serviceId);
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error('Delete failed:', error);
|
||||
alert('Failed to delete service');
|
||||
}
|
||||
}
|
||||
|
||||
function handleCloseServiceForm() {
|
||||
setShowServiceForm(false);
|
||||
setEditingService(undefined);
|
||||
}
|
||||
|
||||
function handleViewLogs(deploymentId: string) {
|
||||
setViewingLogsDeployment(deploymentId);
|
||||
}
|
||||
|
||||
function handleCloseLogs() {
|
||||
setViewingLogsDeployment(null);
|
||||
}
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
switch (status) {
|
||||
case 'up':
|
||||
case 'success':
|
||||
return 'text-green-600 bg-green-50 border-green-200';
|
||||
case 'down':
|
||||
case 'failed':
|
||||
return 'text-red-600 bg-red-50 border-red-200';
|
||||
case 'degraded':
|
||||
case 'running':
|
||||
return 'text-yellow-600 bg-yellow-50 border-yellow-200';
|
||||
default:
|
||||
return 'text-gray-600 bg-gray-50 border-gray-200';
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-gray-600">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<SidebarNav />
|
||||
|
||||
<main className="ml-64 min-h-screen p-8 max-md:ml-0">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-red-600 font-medium">Error:</span>
|
||||
<span className="text-red-700">{error}</span>
|
||||
</div>
|
||||
<p className="text-sm text-red-600 mt-2">
|
||||
Unable to connect to the DevOps API. Please check your connection and try again.
|
||||
</p>
|
||||
<button
|
||||
onClick={loadData}
|
||||
className="mt-2 px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-sm text-gray-600">Services and deployments overview</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleCreateService}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Create Service
|
||||
</button>
|
||||
<button
|
||||
onClick={() => api.seedServices().then(loadData)}
|
||||
className="px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-md hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
Seed Services
|
||||
</button>
|
||||
<button
|
||||
onClick={refreshHealth}
|
||||
disabled={refreshing}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services Grid */}
|
||||
<section className="mb-12">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-6">Services</h2>
|
||||
{services.length === 0 ? (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-8 text-center">
|
||||
<p className="text-gray-600 mb-4">No services configured</p>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
{error
|
||||
? 'Unable to load services due to API connection issues.'
|
||||
: 'Get started by creating your first service.'}
|
||||
</p>
|
||||
<button
|
||||
onClick={handleCreateService}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Create Service
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((service) => (
|
||||
<div
|
||||
key={service.id}
|
||||
className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{service.name}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{service.repoPath}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full border ${getStatusColor(service.status)}`}>
|
||||
{service.status}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleEditService(service)}
|
||||
className="text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded p-1"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteService(service.id)}
|
||||
className="text-gray-400 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 rounded p-1"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm text-gray-600 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4" />
|
||||
<span>Version: {service.version}</span>
|
||||
</div>
|
||||
{service.lastDeployedAt && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Last deploy: {new Date(service.lastDeployedAt).toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeploy(service.id)}
|
||||
disabled={service.status !== 'up'}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
<Play className="w-4 h-4" />
|
||||
Deploy
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Recent Deployments */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-6">Recent Deployments</h2>
|
||||
{recentDeployments.length === 0 ? (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-8 text-center">
|
||||
<p className="text-gray-600">No recent deployments</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
{error
|
||||
? 'Unable to load deployments due to API connection issues.'
|
||||
: 'Deployments will appear here once you start deploying services.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Version</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Triggered</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{recentDeployments.map((deployment) => {
|
||||
const service = services.find(s => s.id === deployment.serviceId);
|
||||
return (
|
||||
<tr key={deployment.id}>
|
||||
<td className="px-6 py-4 text-sm text-gray-900">{service?.name || deployment.serviceId}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">{deployment.version}</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full border ${getStatusColor(deployment.status)}`}>
|
||||
{deployment.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">{deployment.triggeredBy}</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600">{new Date(deployment.triggeredAt).toLocaleString()}</td>
|
||||
<td className="px-6 py-4">
|
||||
<button
|
||||
onClick={() => handleViewLogs(deployment.id)}
|
||||
className="flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
View Logs
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{showServiceForm && (
|
||||
<ServiceForm
|
||||
service={editingService}
|
||||
onClose={handleCloseServiceForm}
|
||||
onSuccess={loadData}
|
||||
/>
|
||||
)}
|
||||
|
||||
{viewingLogsDeployment && (
|
||||
<LogViewer
|
||||
deploymentId={viewingLogsDeployment}
|
||||
onClose={handleCloseLogs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
168
dashboard/web/src/lib/auth.tsx
Normal file
168
dashboard/web/src/lib/auth.tsx
Normal file
@ -0,0 +1,168 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState, createContext, useContext } from 'react';
|
||||
import { getAccessTokenFromStorage, authApi, setAccessToken, setRefreshToken, clearAuthTokens, type MeResponse } from './api';
|
||||
import { productId } from './product-config';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
role: string;
|
||||
plan: string;
|
||||
displayName: string;
|
||||
products?: Array<{
|
||||
productId: string;
|
||||
plan: string;
|
||||
role: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
login: (email: string, password: string, productId: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
isAdmin: boolean;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useAuth must be used within an AuthProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
// Skip auth check for login page
|
||||
if (pathname === '/login') {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
checkAuth();
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
// Skip redirect for login page
|
||||
if (pathname === '/login') {
|
||||
return;
|
||||
}
|
||||
if (!loading && mounted && !user) {
|
||||
router.push('/login');
|
||||
}
|
||||
}, [loading, mounted, user, router, pathname]);
|
||||
|
||||
// If on login page, render children without auth context
|
||||
if (pathname === '/login') {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const token = getAccessTokenFromStorage();
|
||||
if (!token) {
|
||||
console.log('No token found in storage');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Checking auth with token...');
|
||||
|
||||
// Add timeout to prevent hanging
|
||||
const timeoutPromise = new Promise((_, reject) =>
|
||||
setTimeout(() => reject(new Error('Auth check timeout')), 10000)
|
||||
);
|
||||
|
||||
const userData = await Promise.race([
|
||||
authApi.me(token),
|
||||
timeoutPromise
|
||||
]) as MeResponse;
|
||||
|
||||
console.log('User data received:', userData);
|
||||
setUser(userData);
|
||||
|
||||
// Simplified admin check - just check global admin role
|
||||
const globalRole = userData.role;
|
||||
const hasAdminAccess = globalRole === 'admin';
|
||||
setIsAdmin(hasAdminAccess);
|
||||
|
||||
console.log('Admin access:', hasAdminAccess);
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
clearAuthTokens();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function login(email: string, password: string, productId: string) {
|
||||
try {
|
||||
console.log('Attempting login for:', email, 'with productId:', productId);
|
||||
const response = await authApi.login({ email, password, productId });
|
||||
console.log('Login response received:', response);
|
||||
|
||||
setAccessToken(response.accessToken);
|
||||
setRefreshToken(response.refreshToken);
|
||||
setUser(response.user);
|
||||
|
||||
// Check if user has admin access (global admin role)
|
||||
const hasAdminAccess = response.user.role === 'admin';
|
||||
setIsAdmin(hasAdminAccess);
|
||||
|
||||
console.log('Login successful, admin access:', hasAdminAccess);
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
clearAuthTokens();
|
||||
setUser(null);
|
||||
setIsAdmin(false);
|
||||
router.push('/');
|
||||
}
|
||||
|
||||
// Prevent hydration mismatch by not rendering until mounted
|
||||
if (!mounted) {
|
||||
return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <div className="min-h-screen flex items-center justify-center">Redirecting to login...</div>;
|
||||
}
|
||||
|
||||
if (user && !isAdmin) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h1>
|
||||
<p className="text-gray-600">You need admin privileges to access the DevOps dashboard.</p>
|
||||
<p className="text-sm text-gray-500 mt-2">Your role: {user.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, logout, isAdmin }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user