v9.11: no arrows, age in days+space, panel subtle bg colors

k8s/deployment.yaml

@@ -15,7 +15,7 @@ spec:
     spec:
       containers:
       - name: cloud-dashboard
-        image: naeel/cloud-dashboard:v9.10
+        image: naeel/cloud-dashboard:v9.11
         imagePullPolicy: Always
         ports:
         - containerPort: 8080

static/index.html

@@ -81,6 +81,12 @@
     .tab { padding: 7px 14px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; color: #8b949e; }
     .tab.active { color: #58a6ff; border-bottom-color: #58a6ff; }
     .panel { display: none; }
+    .panel-params { background: #0d1117; }
+    .panel-history { background: #0b0f1a; }
+    .panel-deps { background: #0f1107; }
+    body.light .panel-params { background: #f8fafc; }
+    body.light .panel-history { background: #f0f4ff; }
+    body.light .panel-deps { background: #f0fff4; }
     .panel.active { display: block; }
     .inst-graph { height: 420px; border: 1px solid #30363d; border-radius: 8px; background: #0b0f14; }
     .graph-hint { color: #8b949e; font-size: 12px; margin-bottom: 8px; }
@@ -454,11 +460,9 @@ function humanAge(dtStr){
   var days = Math.floor(hrs / 24);
   var months = Math.floor(days / 30);
   var years = Math.floor(days / 365);
-  if(years >= 1) return years + "г " + (months % 12) + "м";
+  if(days >= 1) return days + " д";
-  if(months >= 1) return months + "м " + (days % 30) + "д";
+  if(hrs >= 1) return hrs + " ч";
-  if(days >= 1) return days + "д";
+  return mins + " мин";
-  if(hrs >= 1) return hrs + "ч";
-  return mins + "мин";
 }
 
 function graphElements(data, focusUid, laneById){
@@ -563,12 +567,15 @@ function drawGraph(containerId, data, focusUid, forceShowAux){
       { selector: "edge", style: {
           "line-color": "data(color)",
           "target-arrow-shape": "none",
+          "source-arrow-shape": "none",
+          "mid-target-arrow-shape": "none",
+          "mid-source-arrow-shape": "none",
           "curve-style": "taxi",
           "taxi-direction": "auto",
           "taxi-turn": "50px",
           "taxi-turn-min-distance": "10px",
-        "width": 2.4,
+        "width": 2,
-        "opacity": 0.9
+        "opacity": 0.7
       }}
     ],
     layout: layoutCfg
@@ -950,7 +957,7 @@ function buildDetail(inst){
     (hasDeps ? "<div class=\"tab\" data-panel=\"g-graph-" + uid + "\">Граф</div>" : "") +
     "</div>";
 
-  h += "<div class=\"panel active\" id=\"p-" + uid + "\"><div class=\"params-grid\">" +
+  h += "<div class=\"panel panel-params active\" id=\"p-" + uid + "\"><div class=\"params-grid\">" +
     "<div class=\"params-section\"><h4>Input (params)</h4>" + renderP(params) + "</div>" +
     "<div class=\"params-section\"><h4>Output (out)</h4>" + renderP(out) + "</div>" +
     "</div></div>";
@@ -968,7 +975,7 @@ function buildDetail(inst){
   } else {
     opsHtml = "<tr><td colspan=\"6\" class=\"empty-msg\" style=\"padding:10px\">Нет записей</td></tr>";
   }
-  h += "<div class=\"panel\" id=\"h-" + uid + "\"><table class=\"hist-table\"><thead><tr>" +
+  h += "<div class=\"panel panel-history\" id=\"h-" + uid + "\"><table class=\"hist-table\"><thead><tr>" +
     "<th>Операция</th><th>Кто</th><th>Начало</th><th>Конец</th><th>Длит.&nbsp;(s)</th><th>Статус</th>" +
     "</tr></thead><tbody>" + opsHtml + "</tbody></table></div>";
 
@@ -995,7 +1002,7 @@ function buildDetail(inst){
   } else {
     depOnHtml = "<div class=\"empty-msg\">Никто не зависит</div>";
   }
-  h += "<div class=\"panel\" id=\"d-" + uid + "\"><div class=\"deps-grid\">" +
+  h += "<div class=\"panel panel-deps\" id=\"d-" + uid + "\"><div class=\"deps-grid\">" +
     "<div class=\"deps-section\"><h4>Зависит от (" + deps.length + ")</h4>" + depsHtml + "</div>" +
     "<div class=\"deps-section\"><h4>Зависят от него (" + depOn.length + ")</h4>" + depOnHtml + "</div>" +
     "</div></div>";