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.

4 files changed, 32 insertions, 6 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() {
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index 7be19b4..3ad3b05 100644
--- a/ogcp/templates/base.html
+++ b/ogcp/templates/base.html
@@ -108,7 +108,7 @@
     <!-- ChartJS -->
     <script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
 
-    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=10"></script>
+    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=11"></script>
 
     <script>
         // error messages
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index eda57ed..077bad5 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -28,7 +28,8 @@
 
 {% macro scopes_tree_collapse_level(scopes, parent_room, parent_id, state, selection_mode) -%}
 {% for scope in scopes %}
-  <li id="{{ scope["name"]|replace(".", "_")|replace(" ", "_") }}_{{ scope["id"] }}" class="nav-item">
+  {% set scope_name = scope["name"]|replace(".", "_")|replace(" ", "_") %}
+  <li id="{{ scope_name }}_{{ scope["id"] }}" class="nav-item">
     {% set input_id = "input" ~ parent_id ~ "-" ~ loop.index %}
     {% if scope["type"] == "server" %}
         <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
@@ -62,8 +63,10 @@
                {% if scope.get("selected", False) %}checked{% endif %}
                name="{{ scope["name"] }}_{{ scope["id"] }}" />
     {% endif %}
-    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#scope{{parent_id ~ "-" ~ loop.index}}"
-                       {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
+    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}"
+        id="{{ scope["type"] }}-{{ scope.get('id', scope_name) }}"
+        href="#scope{{parent_id ~ "-" ~ loop.index}}"
+        {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
       {% if "state" in scope %}
         <i class="nav-icon fa-circle
                   {% if scope['state'] == 'OPG' %}fas text-warning