63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
/**
|
|
* React version of the Multi-Cloud Orchestration Portal
|
|
* Alternative to Vue implementation
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
|
|
import Dashboard from './views/Dashboard';
|
|
import HealthDashboard from './views/HealthDashboard';
|
|
import CostDashboard from './views/CostDashboard';
|
|
import AdminPanel from './views/AdminPanel';
|
|
import MonitoringDashboard from './views/MonitoringDashboard';
|
|
import type { Environment, DeploymentStatus, Alert } from '../types';
|
|
|
|
function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Navigation */}
|
|
<nav className="bg-gradient-to-r from-primary-500 to-purple-600 text-white shadow-lg">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<div className="flex items-center">
|
|
<h1 className="text-2xl font-bold">
|
|
<i className="fas fa-cloud mr-2"></i>
|
|
Multi-Cloud Orchestration
|
|
</h1>
|
|
</div>
|
|
<div className="flex gap-6">
|
|
<Link to="/" className="hover:opacity-80 transition-opacity">
|
|
<i className="fas fa-home mr-1"></i> Dashboard
|
|
</Link>
|
|
<Link to="/health" className="hover:opacity-80 transition-opacity">
|
|
<i className="fas fa-heartbeat mr-1"></i> Health
|
|
</Link>
|
|
<Link to="/costs" className="hover:opacity-80 transition-opacity">
|
|
<i className="fas fa-dollar-sign mr-1"></i> Costs
|
|
</Link>
|
|
<Link to="/admin" className="hover:opacity-80 transition-opacity">
|
|
<i className="fas fa-cog mr-1"></i> Admin
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Main Content */}
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/health" element={<HealthDashboard />} />
|
|
<Route path="/costs" element={<CostDashboard />} />
|
|
<Route path="/admin" element={<AdminPanel />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|