amadzarak
88 lines
3.9 KiB
TypeScript
88 lines
3.9 KiB
TypeScript
import '@blueprintjs/core/lib/css/blueprint.css';
|
|
import './App.css';
|
|
import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
|
import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
import PipelinesPage from './pages/PipelinesPage';
|
|
import BuildMonitorPage from './pages/BuildMonitorPage';
|
|
import ImageBuildPage from './pages/ImageBuildPage';
|
|
import BranchPage from './pages/BranchPage';
|
|
import OpcPage from './opc/OpcPage';
|
|
import InfraPage from './pages/InfraPage';
|
|
import ChangesetsPage from './pages/ChangesetsPage';
|
|
|
|
function Sidebar() {
|
|
const navigate = useNavigate();
|
|
const { pathname } = useLocation();
|
|
const at = (path: string) => pathname === path || pathname.startsWith(path + '/');
|
|
|
|
return (
|
|
<aside className="cp-sidebar">
|
|
<div className="cp-sidebar-brand">
|
|
<span className="brand-mark">CP</span>
|
|
<span className="brand-name">Control Plane</span>
|
|
</div>
|
|
|
|
<div className="cp-sidebar-nav">
|
|
<Menu className="cp-sidebar-menu">
|
|
<MenuItem icon="cloud-upload" text="Deployments" active={at('/deployments')} onClick={() => navigate('/deployments')} />
|
|
<MenuItem icon="git-branch" text="Pipelines" active={at('/pipelines')} onClick={() => navigate('/pipelines')} />
|
|
<MenuItem icon="git-merge" text="Branch Ladder" active={at('/branches')} onClick={() => navigate('/branches')} />
|
|
<MenuItem icon="build" text="Image Build" active={at('/image-build')} onClick={() => navigate('/image-build')} />
|
|
<MenuItem icon="pulse" text="Build Monitor" active={at('/build-monitor')} onClick={() => navigate('/build-monitor')} />
|
|
<MenuDivider />
|
|
<MenuItem icon="heat-grid" text="Infrastructure" active={at('/infra')} onClick={() => navigate('/infra')} />
|
|
<MenuItem icon="clipboard" text="OPC" active={at('/opc')} onClick={() => navigate('/opc')} />
|
|
<MenuItem icon="history" text="Changesets" active={at('/changesets')} onClick={() => navigate('/changesets')} />
|
|
<MenuItem icon="people" text="Clients" active={at('/clients')} onClick={() => navigate('/clients')} />
|
|
<MenuItem icon="cog" text="Settings" active={at('/settings')} onClick={() => navigate('/settings')} />
|
|
</Menu>
|
|
</div>
|
|
|
|
<div className="cp-sidebar-footer">
|
|
<div className="cp-sidebar-user">
|
|
<div className="user-avatar">A</div>
|
|
<div className="user-info">
|
|
<span className="user-name">Platform Admin</span>
|
|
<span className="user-role">Clarity Internal</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function PlaceholderPage({ title }: { title: string }) {
|
|
return (
|
|
<div className="page-header">
|
|
<h1>{title}</h1>
|
|
<p>Coming soon.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<div className="cp-shell">
|
|
<Sidebar />
|
|
<main className="cp-main">
|
|
<Routes>
|
|
<Route path="/" element={<Navigate to="/opc" replace />} />
|
|
<Route path="/deployments" element={<DashboardPage />} />
|
|
<Route path="/pipelines" element={<PipelinesPage />} />
|
|
<Route path="/branches" element={<BranchPage />} />
|
|
<Route path="/image-build" element={<ImageBuildPage />} />
|
|
<Route path="/build-monitor" element={<BuildMonitorPage />} />
|
|
<Route path="/infra" element={<InfraPage />} />
|
|
<Route path="/opc" element={<OpcPage />} />
|
|
<Route path="/changesets" element={<ChangesetsPage />} />
|
|
<Route path="/clients" element={<PlaceholderPage title="Clients" />} />
|
|
<Route path="/settings" element={<PlaceholderPage title="Settings" />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|