web: start: clean some code
Signed-off-by: GnomeZworc <nicolas.boufidjeline@g3e.fr>
This commit is contained in:
parent
686b2f62f3
commit
64bef67a0e
GPG key ID:
4406BBBF8845D632
10 changed files with 5 additions and 232 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -30,3 +30,8 @@ go.work.sum
|
||||||
|
|
||||||
# ignore local info
|
# ignore local info
|
||||||
data/
|
data/
|
||||||
|
|
||||||
|
|
||||||
|
web/components.json
|
||||||
|
web/navigation.json
|
||||||
|
web/pages.json
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
[
|
|
||||||
"components/login-gate/login-gate.js",
|
|
||||||
"components/api-client/api-client.js",
|
|
||||||
"components/side-nav/side-nav.js",
|
|
||||||
"components/logout-button/logout-button.js",
|
|
||||||
"components/side-panel/side-panel.js",
|
|
||||||
"components/date-display/date-display.js",
|
|
||||||
"components/form-vm/form-vm.js"
|
|
||||||
]
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
// await api.agent.delete('/vpcs/vp-admin')
|
// await api.agent.delete('/vpcs/vp-admin')
|
||||||
// await api.agent.waitFor('/vms/i-test1', 'started')
|
// await api.agent.waitFor('/vms/i-test1', 'started')
|
||||||
//
|
//
|
||||||
// Credentials come from <login-gate>.ready — no direct config.json dependency.
|
|
||||||
// Phase 2: swap login-gate for oidc-gate → this component unchanged.
|
// Phase 2: swap login-gate for oidc-gate → this component unchanged.
|
||||||
|
|
||||||
export class ApiError extends Error {
|
export class ApiError extends Error {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
import { config } from '../../core/config.js'
|
|
||||||
|
|
||||||
const CSS = new URL('./date-display.css', import.meta.url).href
|
const CSS = new URL('./date-display.css', import.meta.url).href
|
||||||
|
|
||||||
class DateDisplay extends HTMLElement {
|
class DateDisplay extends HTMLElement {
|
||||||
|
|
@ -14,7 +12,6 @@ class DateDisplay extends HTMLElement {
|
||||||
<div class="date" id="date"></div>
|
<div class="date" id="date"></div>
|
||||||
<div class="agent">agent → <span id="agent-url"></span></div>
|
<div class="agent">agent → <span id="agent-url"></span></div>
|
||||||
`
|
`
|
||||||
this.shadowRoot.getElementById('agent-url').textContent = config.agent_url
|
|
||||||
this.#tick()
|
this.#tick()
|
||||||
this.#interval = setInterval(() => this.#tick(), 1000)
|
this.#interval = setInterval(() => this.#tick(), 1000)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,12 +44,7 @@ class LoginGate extends HTMLElement {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load config.json defaults to pre-fill the form
|
|
||||||
let defaults = {}
|
let defaults = {}
|
||||||
try {
|
|
||||||
const r = await fetch('./config.json')
|
|
||||||
if (r.ok) defaults = await r.json()
|
|
||||||
} catch { /* no defaults */ }
|
|
||||||
|
|
||||||
this.#renderOverlay(defaults)
|
this.#renderOverlay(defaults)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
{
|
|
||||||
"netbox_url": "http://netbox.local",
|
|
||||||
"netbox_token": "your-token-here",
|
|
||||||
"agent_url": "http://127.0.0.1:8080"
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
// Single source of truth for configuration.
|
|
||||||
// Phase 2: replace the fetch with a call to the orchestrator.
|
|
||||||
const response = await fetch('./config.json')
|
|
||||||
if (!response.ok) throw new Error('Failed to load config.json')
|
|
||||||
|
|
||||||
export const config = await response.json()
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"label": "Dashboard",
|
|
||||||
"href": "#/dashboard",
|
|
||||||
"icon": "dashboard"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "section",
|
|
||||||
"label": "Réseau"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "VPCs",
|
|
||||||
"href": "#/vpcs",
|
|
||||||
"icon": "vpc"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Subnets",
|
|
||||||
"href": "#/subnets",
|
|
||||||
"icon": "subnet"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "separator"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "VMs",
|
|
||||||
"href": "#/vms",
|
|
||||||
"icon": "vm"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"route": "dashboard",
|
|
||||||
"label": "Dashboard",
|
|
||||||
"icon": "dashboard",
|
|
||||||
"html": "pages/dashboard/index.html",
|
|
||||||
"css": "pages/dashboard/dashboard.css",
|
|
||||||
"js": "pages/dashboard/dashboard.js"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"route": "vpcs",
|
|
||||||
"label": "VPCs",
|
|
||||||
"icon": "vpc",
|
|
||||||
"html": "pages/vpcs/index.html",
|
|
||||||
"css": null,
|
|
||||||
"js": null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"route": "subnets",
|
|
||||||
"label": "Subnets",
|
|
||||||
"icon": "subnet",
|
|
||||||
"html": "pages/subnets/index.html",
|
|
||||||
"css": null,
|
|
||||||
"js": null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"route": "vms",
|
|
||||||
"label": "VMs",
|
|
||||||
"icon": "vm",
|
|
||||||
"html": "pages/vms/index.html",
|
|
||||||
"css": null,
|
|
||||||
"js": null
|
|
||||||
}
|
|
||||||
]
|
|
||||||
140
web/vpc.html
140
web/vpc.html
|
|
@ -1,140 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>two — dashboard</title>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
|
||||||
<style>
|
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #181825;
|
|
||||||
color: #cdd6f4;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 14px 24px;
|
|
||||||
border-bottom: 1px solid #313244;
|
|
||||||
background: #1e1e2e;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #89b4fa;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
header span {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #6c7086;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .spacer {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1;
|
|
||||||
padding: 28px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-content: flex-start;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile: side-nav gère sa propre géométrie via inline styles (JS) */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
main { padding: 16px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
#error {
|
|
||||||
display: none;
|
|
||||||
background: #313244;
|
|
||||||
border: 1px solid #f38ba8;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 14px 18px;
|
|
||||||
color: #f38ba8;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 13px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<login-gate></login-gate>
|
|
||||||
<api-client></api-client>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<h1>two</h1>
|
|
||||||
<span>network orchestrator</span>
|
|
||||||
<div class="spacer"></div>
|
|
||||||
<logout-button></logout-button>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="layout">
|
|
||||||
<side-nav></side-nav>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<div id="error"></div>
|
|
||||||
<date-display></date-display>
|
|
||||||
|
|
||||||
<!-- Dev test: open stacked panels -->
|
|
||||||
<div style="display:flex;gap:8px;margin-top:8px;">
|
|
||||||
<button onclick="openTestPanel('Panel A', '400px')"
|
|
||||||
style="background:#313244;border:1px solid #45475a;border-radius:6px;
|
|
||||||
padding:7px 14px;color:#89b4fa;font-size:13px;cursor:pointer;">
|
|
||||||
Open panel A
|
|
||||||
</button>
|
|
||||||
<button onclick="openTestPanel('Panel B', '520px')"
|
|
||||||
style="background:#313244;border:1px solid #45475a;border-radius:6px;
|
|
||||||
padding:7px 14px;color:#a6e3a1;font-size:13px;cursor:pointer;">
|
|
||||||
Open panel B
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import './core/registry.js'
|
|
||||||
import { SidePanel } from './components/side-panel/side-panel.js'
|
|
||||||
|
|
||||||
window.openTestPanel = (title, width) => {
|
|
||||||
SidePanel.open({
|
|
||||||
title,
|
|
||||||
width,
|
|
||||||
content: `<p style="color:#a6adc8;font-size:14px;line-height:1.6">
|
|
||||||
Contenu du panneau <strong style="color:#cdd6f4">${title}</strong>.<br>
|
|
||||||
Largeur : ${width}.<br><br>
|
|
||||||
Tu peux ouvrir plusieurs panneaux — ils s'empilent vers la gauche.
|
|
||||||
Ferme avec ✕, Échap, ou en cliquant le fond.
|
|
||||||
</p>`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('unhandledrejection', e => {
|
|
||||||
const el = document.getElementById('error')
|
|
||||||
el.style.display = 'block'
|
|
||||||
el.textContent = `Error: ${e.reason?.message ?? e.reason}`
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue