ClarityStack/OPC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OPC # 0006: OPC Git Trunk-Based management

Browse Source
This commit is contained in:
amadzarak
2026-04-26 11:32:23 -04:00
parent 9ff1488bb5
commit 553ea59d39
21 changed files with 552 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clarity.controlplane/src/App.tsx
+56 -48
View File
@@ -1,6 +1,6 @@
import '@blueprintjs/core/lib/css/blueprint.css';
import './App.css';
import { useState } from 'react';
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';
@@ -11,59 +11,44 @@ import OpcPage from './opc/OpcPage';
import InfraPage from './pages/InfraPage';
import ChangesetsPage from './pages/ChangesetsPage';
function App() {
const [activeNav, setActiveNav] = useState('opc');
function Sidebar() {
const navigate = useNavigate();
const { pathname } = useLocation();
const at = (path: string) => pathname === path || pathname.startsWith(path + '/');
return (
<div className="cp-shell">
{/* ── Sidebar ── */}
<aside className="cp-sidebar">
<div className="cp-sidebar-brand">
<span className="brand-mark">CP</span>
<span className="brand-name">Control Plane</span>
</div>
<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={activeNav === 'deployments'} onClick={() => setActiveNav('deployments')} />
<MenuItem icon="git-branch" text="Pipelines" active={activeNav === 'pipelines'} onClick={() => setActiveNav('pipelines')} />
<MenuItem icon="git-merge" text="Branch Ladder" active={activeNav === 'branches'} onClick={() => setActiveNav('branches')} />
<MenuItem icon="build" text="Image Build" active={activeNav === 'image-build'} onClick={() => setActiveNav('image-build')} />
<MenuItem icon="pulse" text="Build Monitor" active={activeNav === 'build-monitor'} onClick={() => setActiveNav('build-monitor')} />
<MenuDivider />
<MenuItem icon="heat-grid" text="Infrastructure" active={activeNav === 'infra'} onClick={() => setActiveNav('infra')} />
<MenuItem icon="clipboard" text="OPC" active={activeNav === 'opc'} onClick={() => setActiveNav('opc')} />
<MenuItem icon="history" text="Changesets" active={activeNav === 'changesets'} onClick={() => setActiveNav('changesets')} />
<MenuItem icon="people" text="Clients" active={activeNav === 'clients'} onClick={() => setActiveNav('clients')} />
<MenuItem icon="cog" text="Settings" active={activeNav === 'settings'} onClick={() => setActiveNav('settings')} />
</Menu>
</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 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>
</aside>
{/* ── Main content ── */}
<main className="cp-main">
{activeNav === 'deployments' && <DashboardPage />}
{activeNav === 'pipelines' && <PipelinesPage />}
{activeNav === 'branches' && <BranchPage />}
{activeNav === 'image-build' && <ImageBuildPage />}
{activeNav === 'build-monitor' && <BuildMonitorPage />}
{activeNav === 'infra' && <InfraPage />}
{activeNav === 'opc' && <OpcPage />}
{activeNav === 'changesets' && <ChangesetsPage />}
{activeNav === 'clients' && <PlaceholderPage title="Clients" />}
{activeNav === 'settings' && <PlaceholderPage title="Settings" />}
</main>
</div>
</div>
</aside>
);
}
@@ -76,4 +61,27 @@ function PlaceholderPage({ title }: { title: string }) {
);
}
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;