Nail/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v9.50: platforms row0, infra row1, grid row2+, Manhattan colored edges

Browse Source
This commit is contained in:
Naeel
2026-04-17 10:26:55 +03:00
parent da06f64baf
commit 256e00181b
2 changed files with 217 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
k8s/deployment.yaml
+1 -1
View File
@@ -15,7 +15,7 @@ spec:
spec: spec:
containers: containers:
- name: cloud-dashboard - name: cloud-dashboard
image: naeel/cloud-dashboard:v9.49 image: naeel/cloud-dashboard:v9.50
imagePullPolicy: Always imagePullPolicy: Always
ports: ports:
- containerPort: 8080 - containerPort: 8080
static/graph.js
+216 -221
View File
@@ -1,265 +1,260 @@
// graph.js — Simple grid layout, max 5 columns, arrows between deps // graph.js — v9.50: platform row | infra row | grid | Manhattan edges
(function () { (function () {
"use strict"; "use strict";
var COLS = 5; var COLS=5, NW=170, NH=56, RW=160, RH=44, GX=30, GY=70, PX=40, PY=30;
var NODE_W = 170;
var NODE_H = 58;
var GAP_X = 30;
var GAP_Y = 80;
var PAD = 40;
var SVC_COLORS = [ var INFRA = ["s3","vcloud","штурвал","cloud direct","edge","vdc","vapp"];
["s3", "#1d4e6e", "#38bdf8"], function isInfra(svc){
["postgresql", "#1a3d2b", "#4ade80"], var s=(svc||"").toLowerCase();
["postgres", "#1a3d2b", "#4ade80"], for(var i=0;i<INFRA.length;i++){if(s.indexOf(INFRA[i])>=0)return true;}
["redis", "#4a1c1c", "#f87171"], return false;
["kubernetes", "#1a2e4a", "#60a5fa"], }
["штурвал", "#1a2e4a", "#60a5fa"],
["rabbitmq", "#3b2000", "#fb923c"], var SVC_STYLE = [
["nodejs", "#1a3b20", "#86efac"], ["s3","#1d4e6e","#38bdf8"],["postgresql","#1a3d2b","#4ade80"],["postgres","#1a3d2b","#4ade80"],
["flask", "#1a3b20", "#86efac"], ["redis","#4a1c1c","#f87171"],["vcloud","#1a2e4a","#60a5fa"],["штурвал","#1a2e4a","#60a5fa"],
["lucee", "#2d1b4a", "#c084fc"], ["cloud direct","#0c2340","#93c5fd"],["rabbitmq","#3b2000","#fb923c"],
["mongodb", "#1a3a1a", "#4ade80"], ["nodejs","#1a3b20","#86efac"],["flask","#1a3b20","#86efac"],["lucee","#2d1b4a","#c084fc"],
["grafana", "#2d1000", "#fdba74"], ["mongodb","#1a3a1a","#4ade80"],["grafana","#2d1000","#fdba74"],["pgadmin","#1a3d2b","#6ee7b7"],
["pgadmin", "#1a3d2b", "#6ee7b7"], ["edge","#1e293b","#94a3b8"],["vdc","#1e293b","#94a3b8"],["vapp","#1e293b","#94a3b8"],
["edge", "#1e293b", "#94a3b8"], ["dns","#1a2040","#818cf8"],["nodered","#3b1500","#fdba74"],["http","#1a2e1a","#bbf7d0"]
["vdc", "#1e293b", "#94a3b8"],
["dns", "#1a2040", "#818cf8"],
["nodered", "#3b1500", "#fdba74"]
]; ];
function svcStyle(svc){
function svcStyle(svc) { var s=(svc||"").toLowerCase();
var s = (svc || "").toLowerCase(); for(var i=0;i<SVC_STYLE.length;i++){
for (var i = 0; i < SVC_COLORS.length; i++) { if(s.indexOf(SVC_STYLE[i][0])>=0)return{bg:SVC_STYLE[i][1],border:SVC_STYLE[i][2]};
if (s.indexOf(SVC_COLORS[i][0]) >= 0)
return { bg: SVC_COLORS[i][1], border: SVC_COLORS[i][2] };
} }
return { bg: "#1e293b", border: "#475569" }; return{bg:"#1e293b",border:"#475569"};
}
function svcColor(svc){return svcStyle(svc).border;}
function statusDot(s){
var m={running:"#56d364",suspended:"#e3b341",deleted:"#f85149",
deleting:"#f85149",pending:"#58a6ff",creating:"#58a6ff"};
return m[(s||"").toLowerCase()]||"#6e7681";
}
function esc(v){
return String(v==null?"":v)
.replace(/&/g,"&amp;").replace(/</g,"&lt;")
.replace(/>/g,"&gt;").replace(/"/g,"&quot;");
}
function trunc(s,n){return(!s)?"":s.length>n?s.slice(0,n-1)+"\u2026":s;}
// ── State ─────────────────────────────────────────────────────────────────
var graphCache=null, building=false;
function getOverlay(){return document.getElementById("graph-overlay");}
function getCanvas() {return document.getElementById("graph-canvas");}
function getStatus() {return document.getElementById("graph-status");}
function setStatus(m){var el=getStatus();if(el)el.textContent=m;}
function openGraph(){
var ov=getOverlay();if(!ov)return;
ov.style.display="flex";
if(graphCache){getCanvas().innerHTML=graphCache;attachPanzoom();}
else if(!building)buildGraph();
}
function closeGraph(){var ov=getOverlay();if(ov)ov.style.display="none";}
function refreshGraph(){graphCache=null;building=false;var c=getCanvas();if(c)c.innerHTML="";buildGraph();}
// ── Layout ────────────────────────────────────────────────────────────────
function computeLayout(instances){
var realms=[],seen={};
instances.forEach(function(i){
var r=i.resourceRealm||"";
if(r&&!seen[r]){seen[r]=true;realms.push(r);}
});
var infra = instances.filter(function(i){return isInfra(i.svc);});
var others = instances.filter(function(i){return !isInfra(i.svc);});
var canvasW = PX*2 + COLS*NW + (COLS-1)*GX;
// Row 0: platforms — spread evenly across full width
var realmNodes = realms.map(function(r,i){
var sp=canvasW/realms.length, cx=sp*i+sp/2;
return{id:"realm:"+r,label:r,x:cx-RW/2,y:PY,w:RW,h:RH,cx:cx,cy:PY+RH/2};
});
// Row 1: infra (S3, Cloud Director, Edge) — spread evenly
var row1Y = PY+RH+GY;
var infraNodes = infra.map(function(inst,i){
var sp=canvasW/Math.max(infra.length,1), cx=sp*i+sp/2;
return{uid:inst.instanceUid,inst:inst,x:cx-NW/2,y:row1Y,w:NW,h:NH,cx:cx,cy:row1Y+NH/2};
});
// Row 2+: other instances — grid, max COLS per row
var row2Y = row1Y+(infra.length>0?NH+GY:0);
var otherNodes = others.map(function(inst,i){
var col=i%COLS, row=Math.floor(i/COLS);
var x=PX+col*(NW+GX), y=row2Y+row*(NH+GY);
return{uid:inst.instanceUid,inst:inst,x:x,y:y,w:NW,h:NH,cx:x+NW/2,cy:y+NH/2};
});
return{realms:realmNodes,infra:infraNodes,others:otherNodes};
} }
function statusColor(status) { // ── Manhattan (orthogonal) path ───────────────────────────────────────────
var m = { running: "#56d364", suspended: "#e3b341", deleted: "#f85149", function mpath(src,tgt){
deleting: "#f85149", pending: "#58a6ff", creating: "#58a6ff" }; var x1=src.cx, y1=src.y+src.h; // source bottom-center
return m[(status || "").toLowerCase()] || "#6e7681"; var x2=tgt.cx, y2=tgt.y; // target top-center
if(Math.abs(y1-y2)<8){
// same row: dip below both nodes
var dip=Math.max(src.y+src.h,tgt.y+tgt.h)+24;
return"M"+x1+","+y1+" L"+x1+","+dip+" L"+x2+","+dip+" L"+x2+","+y2;
}
var my=(y1+y2)/2;
return"M"+x1+","+y1+" L"+x1+","+my+" L"+x2+","+my+" L"+x2+","+y2;
} }
function esc(v) { // ── SVG render ────────────────────────────────────────────────────────────
return String(v == null ? "" : v) function renderSVG(instances, depEdges){
.replace(/&/g, "&amp;").replace(/</g, "&lt;") var layout=computeLayout(instances);
.replace(/>/g, "&gt;").replace(/"/g, "&quot;"); var nodeMap={};
} layout.realms.forEach(function(n){nodeMap[n.id]=n;});
layout.infra.forEach(function(n){nodeMap[n.uid]=n;});
layout.others.forEach(function(n){nodeMap[n.uid]=n;});
function trunc(s, n) { var allN=layout.realms.concat(layout.infra).concat(layout.others);
if (!s) return ""; var maxX=0, maxY=0;
return s.length > n ? s.slice(0, n - 1) + "…" : s; allN.forEach(function(n){
} if(n.x+n.w>maxX)maxX=n.x+n.w;
if(n.y+n.h>maxY)maxY=n.y+n.h;
});
var W=maxX+PX, H=maxY+PY;
// ── State ──────────────────────────────────────────────────────────────── // Collect unique edge colors for arrowhead markers
var graphCache = null; var colors={"#334155":1};
var building = false; depEdges.forEach(function(e){if(e.color)colors[e.color]=1;});
function getOverlay() { return document.getElementById("graph-overlay"); } var p=[
function getCanvas() { return document.getElementById("graph-canvas"); } '<svg id="graph-svg" xmlns="http://www.w3.org/2000/svg" width="'+W+'" height="'+H+'" viewBox="0 0 '+W+' '+H+'">',
function getStatus() { return document.getElementById("graph-status"); } '<defs>'
function setStatus(m) { var el = getStatus(); if (el) el.textContent = m; }
function openGraph() {
var ov = getOverlay();
if (!ov) return;
ov.style.display = "flex";
if (graphCache) { getCanvas().innerHTML = graphCache; attachPanzoom(); }
else if (!building) buildGraph();
}
function closeGraph() {
var ov = getOverlay();
if (ov) ov.style.display = "none";
}
function refreshGraph() {
graphCache = null; building = false;
var c = getCanvas(); if (c) c.innerHTML = "";
buildGraph();
}
// ── Grid layout ──────────────────────────────────────────────────────────
function gridPos(idx) {
var col = idx % COLS;
var row = Math.floor(idx / COLS);
return {
x: PAD + col * (NODE_W + GAP_X),
y: PAD + row * (NODE_H + GAP_Y),
cx: PAD + col * (NODE_W + GAP_X) + NODE_W / 2,
cy: PAD + row * (NODE_H + GAP_Y) + NODE_H / 2
};
}
// ── SVG render ───────────────────────────────────────────────────────────
function renderSVG(instances, edges) {
var n = instances.length;
var cols = Math.min(n, COLS);
var rows = Math.ceil(n / COLS);
var W = PAD * 2 + cols * NODE_W + (cols - 1) * GAP_X;
var H = PAD * 2 + rows * NODE_H + (rows - 1) * GAP_Y;
// index map: uid → index
var idx = {};
instances.forEach(function (inst, i) { idx[inst.instanceUid] = i; });
var parts = [
'<svg id="graph-svg" xmlns="http://www.w3.org/2000/svg" width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '">',
'<defs>',
'<marker id="arr" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">',
'<path d="M0,0 L0,6 L8,3 z" fill="#64748b"/>',
'</marker>',
'</defs>'
]; ];
Object.keys(colors).forEach(function(c){
var id="arr"+c.replace(/[^a-zA-Z0-9]/g,"");
p.push('<marker id="'+id+'" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">'+
'<path d="M0,0 L0,6 L8,3 z" fill="'+esc(c)+'"/></marker>');
});
p.push('</defs>');
// Draw arrows first (under nodes) // Platform → instance lines (thin dashed, gray)
edges.forEach(function (e) { instances.forEach(function(inst){
var fi = idx[e.from], ti = idx[e.to]; var r=inst.resourceRealm; if(!r)return;
if (fi === undefined || ti === undefined) return; var src=nodeMap["realm:"+r], tgt=nodeMap[inst.instanceUid];
var fp = gridPos(fi), tp = gridPos(ti); if(!src||!tgt)return;
// line from bottom-center of source to top-center of target (or center-to-center) p.push('<path d="'+esc(mpath(src,tgt))+'" fill="none" stroke="#334155" stroke-width="1" opacity="0.35" stroke-dasharray="4,3"/>');
parts.push(
'<line x1="' + fp.cx + '" y1="' + fp.cy + '" x2="' + tp.cx + '" y2="' + tp.cy + '"' +
' stroke="#64748b" stroke-width="1.5" opacity="0.7" marker-end="url(#arr)"/>'
);
}); });
// Draw nodes // Dependency edges (colored Manhattan lines with arrow)
instances.forEach(function (inst, i) { depEdges.forEach(function(e){
var p = gridPos(i); var src=nodeMap[e.from], tgt=nodeMap[e.to];
var st = svcStyle(inst.svc); if(!src||!tgt)return;
var dot = statusColor(inst.explainedStatus); var c=e.color||"#475569";
var lbl = trunc(inst.displayName || inst.instanceUid, 18); var id="arr"+c.replace(/[^a-zA-Z0-9]/g,"");
var svc = trunc(inst.svc || "", 24); p.push('<path d="'+esc(mpath(src,tgt))+'" fill="none" stroke="'+esc(c)+
'" stroke-width="2" opacity="0.85" marker-end="url(#'+id+')"/>');
parts.push(
'<rect x="' + p.x + '" y="' + p.y + '" width="' + NODE_W + '" height="' + NODE_H + '"' +
' rx="6" fill="' + esc(st.bg) + '" stroke="' + esc(st.border) + '" stroke-width="1.5"/>'
);
parts.push(
'<circle cx="' + (p.x + 12) + '" cy="' + (p.y + NODE_H / 2) + '" r="4" fill="' + esc(dot) + '"/>'
);
parts.push(
'<text x="' + (p.x + 24) + '" y="' + (p.y + NODE_H / 2 - 6) + '"' +
' font-family="sans-serif" font-size="12" font-weight="600" fill="#f1f5f9">' + esc(lbl) + '</text>'
);
parts.push(
'<text x="' + (p.x + 24) + '" y="' + (p.y + NODE_H / 2 + 11) + '"' +
' font-family="sans-serif" font-size="10" fill="' + esc(st.border) + '">' + esc(svc) + '</text>'
);
}); });
parts.push('</svg>'); // Realm (platform) nodes
return parts.join("\n"); layout.realms.forEach(function(n){
p.push('<rect x="'+n.x+'" y="'+n.y+'" width="'+n.w+'" height="'+n.h+
'" rx="6" fill="#0f172a" stroke="#475569" stroke-width="1.5" stroke-dasharray="5,3"/>');
p.push('<text x="'+n.cx+'" y="'+(n.y+13)+'" text-anchor="middle" '+
'font-family="sans-serif" font-size="9" font-weight="600" fill="#64748b">ПЛАТФОРМА</text>');
p.push('<text x="'+n.cx+'" y="'+(n.y+n.h-10)+'" text-anchor="middle" '+
'font-family="sans-serif" font-size="12" font-weight="700" fill="#e2e8f0">'+
esc(trunc(n.label,20))+'</text>');
});
// Instance nodes (infra row + grid rows)
layout.infra.concat(layout.others).forEach(function(n){
var st=svcStyle(n.inst.svc), dot=statusDot(n.inst.explainedStatus);
var lbl=trunc(n.inst.displayName||n.inst.instanceUid,18);
var svc=trunc(n.inst.svc||"",22);
p.push('<rect x="'+n.x+'" y="'+n.y+'" width="'+n.w+'" height="'+n.h+
'" rx="6" fill="'+esc(st.bg)+'" stroke="'+esc(st.border)+'" stroke-width="1.5"/>');
p.push('<circle cx="'+(n.x+12)+'" cy="'+(n.y+n.h/2)+'" r="4" fill="'+esc(dot)+'"/>');
p.push('<text x="'+(n.x+24)+'" y="'+(n.y+n.h/2-5)+
'" font-family="sans-serif" font-size="12" font-weight="600" fill="#f1f5f9">'+esc(lbl)+'</text>');
p.push('<text x="'+(n.x+24)+'" y="'+(n.y+n.h/2+11)+
'" font-family="sans-serif" font-size="10" fill="'+esc(st.border)+'">'+esc(svc)+'</text>');
});
p.push('</svg>');
return p.join("\n");
} }
// ── Panzoom ────────────────────────────────────────────────────────────── // ── Panzoom ───────────────────────────────────────────────────────────────
function attachPanzoom() { function attachPanzoom(){
var svg = document.getElementById("graph-svg"); var svg=document.getElementById("graph-svg");
if (!svg || typeof panzoom === "undefined") return; if(!svg||typeof panzoom==="undefined")return;
if (svg._pz) { try { svg._pz.dispose(); } catch(e) {} } if(svg._pz){try{svg._pz.dispose();}catch(e){}}
svg._pz = panzoom(svg, { maxZoom: 4, minZoom: 0.1, smoothScroll: false }); svg._pz=panzoom(svg,{maxZoom:4,minZoom:0.1,smoothScroll:false});
} }
// ── Build ──────────────────────────────────────────────────────────────── // ── Build ─────────────────────────────────────────────────────────────────
function buildGraph() { function buildGraph(){
if (building) return; if(building)return;
building = true; building=true; graphCache=null;
graphCache = null; var canvas=getCanvas(); if(!canvas)return;
canvas.innerHTML=""; setStatus("Загрузка\u2026");
var canvas = getCanvas(); var instances=(typeof window._getVisibleInstances==="function")?window._getVisibleInstances()
if (!canvas) return; :(typeof window._getInstances==="function"?window._getInstances():[]);
canvas.innerHTML = "";
setStatus("Загрузка…");
var instances = (typeof window._getInstances === "function") ? window._getInstances() : []; if(!instances||!instances.length){
if (!instances || !instances.length) {
setStatus("Нет данных. Обновите таблицу и откройте схему снова."); setStatus("Нет данных. Обновите таблицу и откройте схему снова.");
building = false; building=false; return;
return;
} }
// Render grid immediately without edges canvas.innerHTML=renderSVG(instances,[]); attachPanzoom();
canvas.innerHTML = renderSVG(instances, []); setStatus("Загрузка зависимостей\u2026");
attachPanzoom();
setStatus("Загрузка зависимостей…");
// Load all deps, then re-render once var edges=[], total=instances.length, done=0;
var edges = [];
var total = instances.length;
var done = 0;
function loadNext(idx) { function loadNext(idx){
if (idx >= instances.length) { if(idx>=instances.length){
canvas.innerHTML = renderSVG(instances, edges); canvas.innerHTML=renderSVG(instances,edges); attachPanzoom();
attachPanzoom(); graphCache=canvas.innerHTML; building=false; setStatus(""); return;
graphCache = canvas.innerHTML;
building = false;
setStatus("");
return;
} }
var uid = instances[idx].instanceUid; var uid=instances[idx].instanceUid, srcSvc=instances[idx].svc||"";
fetch("/dashboard/api/instances/" + uid, { fetch("/dashboard/api/instances/"+uid,{
headers: { headers:{
"X-Deck-Token": localStorage.getItem("deck_token") || "", "X-Deck-Token":localStorage.getItem("deck_token")||"",
"X-Deck-Env": localStorage.getItem("deck_env") || "test" "X-Deck-Env":localStorage.getItem("deck_env")||"test"
} }
}) })
.then(function (r) { return r.ok ? r.json() : null; }) .then(function(r){return r.ok?r.json():null;})
.then(function (data) { .then(function(data){
done++; done++; setStatus("Зависимости: "+done+"/"+total);
setStatus("Зависимости: " + done + "/" + total); if(data){
if (data) { var inst=data.instance||data;
var inst = data.instance || data; [].concat(inst.dependencies||[],inst.deps||[]).forEach(function(d){
var deps = [].concat(inst.dependencies || [], inst.deps || []); var to=d.uid||d.instanceUid||d.dependencyUid;
deps.forEach(function (d) { if(to)edges.push({from:uid,to:to,color:svcColor(d.svc||srcSvc)});
var to = d.uid || d.instanceUid || d.dependencyUid;
if (to) edges.push({ from: uid, to: to });
}); });
var dInst = [].concat(inst.dependentInstances || [], inst.dependsOn || []); [].concat(inst.dependentInstances||[],inst.dependsOn||[]).forEach(function(d){
dInst.forEach(function (d) { var from=d.uid||d.instanceUid||d.dependencyUid;
var from = d.uid || d.instanceUid || d.dependencyUid; if(from)edges.push({from:from,to:uid,color:svcColor(d.svc||srcSvc)});
if (from) edges.push({ from: from, to: uid });
}); });
} }
setTimeout(function () { loadNext(idx + 1); }, 20); setTimeout(function(){loadNext(idx+1);},20);
}) })
.catch(function () { .catch(function(){done++;setTimeout(function(){loadNext(idx+1);},20);});
done++;
setTimeout(function () { loadNext(idx + 1); }, 20);
});
} }
loadNext(0); loadNext(0);
} }
// ── Init ───────────────────────────────────────────────────────────────── // ── Init ──────────────────────────────────────────────────────────────────
function init() { function init(){
var btnOpen = document.getElementById("btn-graph-open"); var a=document.getElementById("btn-graph-open");
var btnClose = document.getElementById("btn-graph-close"); var b=document.getElementById("btn-graph-close");
var btnRefresh = document.getElementById("btn-graph-refresh"); var c=document.getElementById("btn-graph-refresh");
var overlay = document.getElementById("graph-overlay"); var ov=document.getElementById("graph-overlay");
if(a)a.addEventListener("click",openGraph);
if (btnOpen) btnOpen.addEventListener("click", openGraph); if(b)b.addEventListener("click",closeGraph);
if (btnClose) btnClose.addEventListener("click", closeGraph); if(c)c.addEventListener("click",refreshGraph);
if (btnRefresh) btnRefresh.addEventListener("click", refreshGraph); if(ov)ov.addEventListener("click",function(e){if(e.target===ov)closeGraph();});
if (overlay) overlay.addEventListener("click", function (e) { document.addEventListener("keydown",function(e){if(e.key==="Escape")closeGraph();});
if (e.target === overlay) closeGraph();
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") closeGraph();
});
} }
if (document.readyState === "loading") { if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",init);}else{init();}
document.addEventListener("DOMContentLoaded", init); window.graphModule={open:openGraph,close:closeGraph,refresh:refreshGraph};
} else {
init();
}
window.graphModule = { open: openGraph, close: closeGraph, refresh: refreshGraph };
})(); })();