Restore app shell with tabs and WIP sections around inventory
CI / basic-check (push) Has been cancelled
CI / basic-check (push) Has been cancelled
This commit is contained in:
Perplexity Bot
+178
-1
@@ -1,7 +1,184 @@
|
||||
import { useState } from 'react';
|
||||
import { InventoryPage } from './pages/InventoryPage';
|
||||
import './app-shell.css';
|
||||
|
||||
type TabKey = 'overview' | 'inventory' | 'discovery' | 'topology' | 'wip';
|
||||
|
||||
const tabs: { key: TabKey; label: string; description: string }[] = [
|
||||
{ key: 'overview', label: 'Overview', description: 'Stato generale del workspace NetMapper.' },
|
||||
{ key: 'inventory', label: 'Inventory', description: 'Tree fisico/logico e navigazione tra oggetti.' },
|
||||
{ key: 'discovery', label: 'Discovery', description: 'Pipeline e job di raccolta dati.' },
|
||||
{ key: 'topology', label: 'Topology', description: 'Vista futura della mappa multilivello.' },
|
||||
{ key: 'wip', label: 'WIP', description: 'Blocchi provvisori, note e parti in corso.' },
|
||||
];
|
||||
|
||||
function ShellCard({ title, children, tone = 'default' }: { title: string; children: React.ReactNode; tone?: 'default' | 'accent' | 'warning' }) {
|
||||
return (
|
||||
<section className={`shell-card ${tone}`}>
|
||||
<div className="shell-card-header">
|
||||
<h3>{title}</h3>
|
||||
</div>
|
||||
<div className="shell-card-body">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function OverviewTab() {
|
||||
return (
|
||||
<div className="shell-grid">
|
||||
<ShellCard title="Workspace status" tone="accent">
|
||||
<ul className="shell-list">
|
||||
<li>Frontend inventory collegato al backend.</li>
|
||||
<li>Tree gerarchico e context panel attivi.</li>
|
||||
<li>Navigazione tra parent, children e relazioni disponibile.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
<ShellCard title="Milestone attive">
|
||||
<ul className="shell-list">
|
||||
<li>Reintegro layout persistente.</li>
|
||||
<li>Tab dedicate per viste future.</li>
|
||||
<li>Preparazione vista topology multilivello.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
<ShellCard title="Quick notes" tone="warning">
|
||||
<ul className="shell-list">
|
||||
<li>La discovery avanzata è ancora in fase iniziale.</li>
|
||||
<li>I badge e il contesto nodo sono MVP, non finali.</li>
|
||||
<li>Serve reintegro progressivo delle sezioni storiche.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryTab() {
|
||||
return (
|
||||
<div className="shell-grid two-columns">
|
||||
<ShellCard title="Discovery pipeline">
|
||||
<ul className="shell-list">
|
||||
<li>Seed scan subnet.</li>
|
||||
<li>Classificazione host e object binding.</li>
|
||||
<li>Correlazione con relazioni inventory.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
<ShellCard title="Job queue / WIP">
|
||||
<ul className="shell-list">
|
||||
<li>SNMP collector — WIP.</li>
|
||||
<li>LLDP ingestion — WIP.</li>
|
||||
<li>Port mapping inference — WIP.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TopologyTab() {
|
||||
return (
|
||||
<div className="shell-grid two-columns">
|
||||
<ShellCard title="Topology roadmap">
|
||||
<ul className="shell-list">
|
||||
<li>Vista fisica dispositivi.</li>
|
||||
<li>Vista logica host / VM / container / app.</li>
|
||||
<li>Layer networking e dipendenze.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
<ShellCard title="Planned interactions">
|
||||
<ul className="shell-list">
|
||||
<li>Drag & drop dei contenitori.</li>
|
||||
<li>Link fisici e logici cliccabili.</li>
|
||||
<li>Focus node e highlight dei vicini.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function WipTab() {
|
||||
return (
|
||||
<div className="shell-grid two-columns">
|
||||
<ShellCard title="WIP visibili" tone="warning">
|
||||
<ul className="shell-list">
|
||||
<li>Placeholder per pannelli legacy reintegrati.</li>
|
||||
<li>Spazio riservato ai blocchi non ancora consolidati.</li>
|
||||
<li>Promemoria tecnico per le parti temporanee.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
<ShellCard title="Note operative">
|
||||
<ul className="shell-list">
|
||||
<li>Non rimuovere più la shell quando si aggiungono nuove viste.</li>
|
||||
<li>Le nuove sezioni devono entrare come tab del workspace.</li>
|
||||
<li>Persistenza dello stato UI da migliorare nei prossimi step.</li>
|
||||
</ul>
|
||||
</ShellCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return <InventoryPage />;
|
||||
const [activeTab, setActiveTab] = useState<TabKey>('inventory');
|
||||
const currentTab = tabs.find((tab) => tab.key === activeTab)!;
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<aside className="app-sidebar">
|
||||
<div className="app-brand">
|
||||
<div className="app-brand-mark">NM</div>
|
||||
<div>
|
||||
<h1>NetMapper</h1>
|
||||
<p>Homelab workspace</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="app-nav">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
className={`app-nav-item ${activeTab === tab.key ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
>
|
||||
<span>{tab.label}</span>
|
||||
<small>{tab.description}</small>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="app-sidebar-footer">
|
||||
<span className="shell-pill">MVP</span>
|
||||
<span className="shell-pill">Inventory online</span>
|
||||
<span className="shell-pill">WIP restored</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="app-main">
|
||||
<header className="app-header">
|
||||
<div>
|
||||
<h2>{currentTab.label}</h2>
|
||||
<p>{currentTab.description}</p>
|
||||
</div>
|
||||
<div className="app-header-actions">
|
||||
<span className="shell-pill">LXC ready</span>
|
||||
<span className="shell-pill">Docker-ready base</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section style={{ display: activeTab === 'overview' ? 'block' : 'none' }}>
|
||||
<OverviewTab />
|
||||
</section>
|
||||
<section style={{ display: activeTab === 'inventory' ? 'block' : 'none' }}>
|
||||
<InventoryPage />
|
||||
</section>
|
||||
<section style={{ display: activeTab === 'discovery' ? 'block' : 'none' }}>
|
||||
<DiscoveryTab />
|
||||
</section>
|
||||
<section style={{ display: activeTab === 'topology' ? 'block' : 'none' }}>
|
||||
<TopologyTab />
|
||||
</section>
|
||||
<section style={{ display: activeTab === 'wip' ? 'block' : 'none' }}>
|
||||
<WipTab />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user