Visual inventory management

src/webui/service/device/routes.py

@@ -149,6 +149,18 @@ def detail(device_uuid: str):
 
     return render_template(
         'device/detail.html', device=device_obj, dde=DeviceDriverEnum, dose=DeviceOperationalStatusEnum)
+    
+@device.route('inventory/<path:device_uuid>', methods=['GET', 'POST'])
+def inventory(device_uuid: str):
+    context_client.connect()
+    device_obj = get_device(context_client, device_uuid, rw_copy=False)
+    if device_obj is None:
+        flash('Device({:s}) not found'.format(str(device_uuid)), 'danger')
+        device_obj = Device()
+    context_client.close()
+
+    return render_template(
+        'device/inventory.html', device=device_obj, dde=DeviceDriverEnum, dose=DeviceOperationalStatusEnum)
 
 @device.get('<path:device_uuid>/delete')
 def delete(device_uuid):

src/webui/service/templates/device/detail.html

@@ -86,42 +86,6 @@
             </tbody>
         </table>
     </div>
-    {% if device.components|length > 0 %}
-    <div class="col-sm-8">
-        <table class="table table-striped table-hover">
-            <thead>
-                <tr>
-                    <th scope="col">Component UUID</th>
-                    <th scope="col">Name</th>
-                    <th scope="col">Type</th>
-                    <th scope="col">Parent</th>
-                    <th scope="col">Attributes</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for component in device.components %}
-                <tr>
-                    <td>
-                        {{ component.component_uuid.uuid }}
-                    </td>
-                    <td>
-                        {{ component.name }}
-                    </td>
-                    <td>
-                        {{ component.type }}
-                    </td>
-                    <td>
-                        {{ component.parent }}
-                    </td>
-                    <td>
-                        {{ component.attributes }}
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    {% endif %}
 </div>
 
 <b>Configurations:</b>

src/webui/service/templates/device/home.html

@@ -50,6 +50,7 @@
             <th scope="col">Status</th>
             <th scope="col">Config Rules</th>
             <th scope="col"></th>
+            <th scope="col"></th>
           </tr>
         </thead>
         <tbody>
@@ -74,6 +75,14 @@
                             </svg>
                         </a>
                     </td>
+                    <td>
+                        <a href="{{ url_for('device.inventory', device_uuid=device.device_id.device_uuid.uuid) }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pci-card" viewBox="0 0 16 16">
+                                <path d="M0 1.5A.5.5 0 0 1 .5 1h1a.5.5 0 0 1 .5.5V4h13.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5H2v2.5a.5.5 0 0 1-1 0V2H.5a.5.5 0 0 1-.5-.5Z"/>
+                                <path d="M3 12.5h3.5v1a.5.5 0 0 1-.5.5H3.5a.5.5 0 0 1-.5-.5v-1Zm4 0h4v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1Z"/>
+                              </svg>
+                        </a>
+                    </td>
                 </tr>
                 {% endfor %}
             {% else %}

src/webui/service/templates/device/inventory.html

+<!--
+    Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+   
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+   
+         http://www.apache.org/licenses/LICENSE-2.0
+   
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+   -->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<style>
+    ul,
+    #myUL {
+        list-style-type: none;
+    }
+
+    #myUL {
+        margin: 0;
+        padding: 0;
+    }
+
+    .caret {
+        cursor: pointer;
+        -webkit-user-select: none;
+        /* Safari 3.1+ */
+        -moz-user-select: none;
+        /* Firefox 2+ */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+    }
+
+    .caret::before {
+        content: "\25B6";
+        color: black;
+        display: inline-block;
+        margin-right: 6px;
+    }
+
+    .caret-down::before {
+        -ms-transform: rotate(90deg);
+        /* IE 9 */
+        -webkit-transform: rotate(90deg);
+        /* Safari */
+        transform: rotate(90deg);
+    }
+
+    .nested {
+        display: none;
+    }
+
+    .active {
+        display: block;
+    }
+</style>
+
+<h1>Device {{ device.name }} ({{ device.device_id.device_uuid.uuid }})</h1>
+
+<div class="row mb-3">
+    <div class="col-sm-3">
+        <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('device.home') }}'">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Back to device list
+        </button>
+    </div>
+</div>
+
+<br>
+<div class="row mb-3">
+    <div class="col-sm-3">
+        <ul id="myUL">
+            <li><span class="caret"></span>>Components</span>
+                <ul class="nested">
+                    {% for item in (device.components|sort(true, attribute='name'))%}
+                    {%if item.parent |length < 1 or item.type=='CHASSIS' %} 
+                    <li><span class="caret"></span>{{item.name}}</span>
+                        <ul class="nested">
+                            {%for comp in (device.components|sort(true, attribute='name'))%}
+                            {%if item.name == comp.parent%}
+                            <li>{{comp.name}}</li>
+                            {%endif%}
+                            {%endfor%}
+                        </ul>
+                    </li>
+                    {%endif%}
+                    {%endfor%}
+                </ul>
+            </li>
+        </ul>
+        
+        <script>
+            var toggler = document.getElementsByClassName("caret");
+            var i;
+            
+            for (i = 0; i < toggler.length; i++) {
+              toggler[i].addEventListener("click", function() {
+                this.parentElement.querySelector(".nested").classList.toggle("active");
+                this.classList.toggle("caret-down");
+              });
+            }
+        </script>
+
+    </div>
+    {% if device.components|length > 1 %}
+    <div class="col-sm-8">
+        <table class="table table-striped table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">Component UUID</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Parent</th>
+                    <th scope="col">Attributes</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for component in (device.components|sort(true, attribute='name'))%}
+                <tr>
+                    <td>
+                        {{ component.component_uuid.uuid }}
+                    </td>
+                    <td>
+                        {{ component.name }}
+                    </td>
+                    <td>
+                        {{ component.type }}
+                    </td>
+                    <td>
+                        {{ component.parent }}
+                    </td>
+                    <td>
+                        {{ component.attributes }}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% endif %}
+</div>
+
+
+    
+{% endblock %}
\ No newline at end of file