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.

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;

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() {

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

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