ogcp: show an indicator in each sidebar branch with live children

Add visual indicator to the disclosure widget when its branch has
any clients in live mode.
Ease the search of systems in ogLive in need of being booted or
turned off.

Add id= to the HTML component containing the disclosure widget.
Set the id to the value scope_type-scope_name for type='server' and
scope_type-scope_id for the rest.

Add the CSS class 'live-report' to the HTML components with live
children. Assign the class field in the js function updateScopes.

2 files changed, 25 insertions, 2 deletions

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index 87e9e98..7d5eb9e 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -81,6 +81,10 @@ a.nav-link:not(.collapsed):not(.disabled)[data-toggle="collapse"]::before {
   font-size: 0.7em;
 }
 
+a.nav-link.live-report::before {
+  color: #ffc107;
+}
+
 .subhead-heading {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 83fe52d..872f03c 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -258,9 +258,12 @@ function updatePillStatus(scope, pill) {
 }
 
 function updateScopes(scopes) {
+    let hasLiveChildren = false;
+
     scopes.forEach((scope) => {
+        const scopeName = `${scope.name}`.replaceAll(/[.]|[ ]/g, '_');
         if (scope.state) {
-            const scopeId = `${scope.name}_${scope.id}`.replaceAll(/[.]|[ ]/g, '_');
+            const scopeId = `${scopeName}_${scope.id}`;
             const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
             const iconCls = ['fas', 'far', 'fa-circle', 'fa-check-circle',
                              'fa-times-circle', 'fa-user-circle', 'text-danger',
@@ -269,6 +272,7 @@ function updateScopes(scopes) {
             iconEl.classList.remove(...iconCls);
             let newIconCls = [];
             if (scope.state === 'OPG') {
+                hasLiveChildren = true;
                 newIconCls.push('fas', 'text-warning');
                 if (scope.last_cmd.result === 'failure')
                     newIconCls.push('fa-times-circle');
@@ -283,6 +287,7 @@ function updateScopes(scopes) {
             } else if (scope.state === 'WINS') {
                 newIconCls.push('fas', 'fa-user-circle', 'text-windows');
             } else if (scope.state === 'BSY') {
+                hasLiveChildren = true;
                 newIconCls.push('fas', 'fa-circle', 'text-danger');
             } else if (scope.state === 'VDI') {
                 newIconCls.push('fas', 'fa-circle', 'text-success');
@@ -300,9 +305,23 @@ function updateScopes(scopes) {
         }
         if (scope.scope) {
             // This is a level so we should update all childs
-            updateScopes(scope.scope);
+            let hasLocalLiveChildren = updateScopes(scope.scope);
+            if (hasLocalLiveChildren) {
+                hasLiveChildren = true;
+            }
+
+            const disclosureWidgetId = scope.id ?
+                `${scope.type}-${scope.id}` : `${scope.type}-${scopeName}`;
+            const disclosureWidget = document.querySelector(`#${disclosureWidgetId}`);
+
+            disclosureWidget.classList.remove('live-report');
+
+            if (hasLocalLiveChildren) {
+                disclosureWidget.classList.add('live-report');
+            }
         }
     });
+    return hasLiveChildren;
 }
 
 function unfoldAll() {