WebUI component:

- Device List: show number of endpoints instead of detail
- Device List: show number of rules
- Remove UUIDs from topology elements
- Service List: add service name
- Service Details: add service name
- Slice List: add slice name
- Slice Details: add slice name

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

@@ -48,7 +48,7 @@
             <th scope="col">Endpoints</th>
             <th scope="col">Drivers</th>
             <th scope="col">Status</th>
-            <!-- <th scope="col">Configuration</th> -->
+            <th scope="col">Config Rules</th>
             <th scope="col"></th>
           </tr>
         </thead>
@@ -56,40 +56,16 @@
             {% if devices %}
                 {% for device in devices %}
                 <tr>
-                    <td>
-                        {{ device.device_id.device_uuid.uuid }}
-                    </td>
-                    <td>
-                        {{ device.name }}
-                    </td>
-                    <td>
-                        {{ device.device_type }}
-                    </td>
-                    <td>
-                        <ul>
-                            {% for end_point in device.device_endpoints %}
-                            <li>{{ end_point.endpoint_id.endpoint_uuid.uuid }}</li>
-                            {% endfor %}
-                        </ul>
-                    </td>
-                    <td>
-                        <ul>
-                            {% for driver in device.device_drivers %}
-                            <li>{{ dde.Name(driver).replace('DEVICEDRIVER_', '').replace('UNDEFINED', 'EMULATED') }}</li>
-                            {% endfor %}
-                        </ul>
-                    </td>
+                    <td>{{ device.device_id.device_uuid.uuid }}</td>
+                    <td>{{ device.name }}</td>
+                    <td>{{ device.device_type }}</td>
+                    <td>{{ device.device_endpoints | length }}</td>
+                    <td><ul>{% for driver in device.device_drivers %}
+                        <li>{{ dde.Name(driver).replace('DEVICEDRIVER_', '').replace('UNDEFINED', 'EMULATED') }}</li>
+                        {% endfor %}
+                    </ul></td>
                     <td>{{ dose.Name(device.device_operational_status).replace('DEVICEOPERATIONALSTATUS_', '') }}</td>
-                    <!-- <td>
-                        <ul>
-                            {% for config in device.device_config.config_rules %}
-                            <li>
-                                Key: {{ config.resource_key }}<br/>
-                                Value: {{ config.resource_value }}
-                            </li>
-                            {% endfor %}
-                        </ul>
-                    </td> -->
+                    <td>{{ device.device_config.config_rules | length }}</td>
                     <td>
                         <a href="{{ url_for('device.detail', 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-eye" viewBox="0 0 16 16">

src/webui/service/templates/js/topology.js

@@ -88,9 +88,9 @@ d3.json("{{ url_for('main.topology') }}", function(data) {
         .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
 
     // node tooltip
-    node.append("title").text(function(n) { return n.name + ' (' + n.id + ')'; });
+    node.append("title").text(function(n) { return n.name; });
     // link tooltip
-    link.append("title").text(function(l) { return l.name + ' (' + l.id + ')'; });
+    link.append("title").text(function(l) { return l.name; });
 
     // link style
     link

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

@@ -17,7 +17,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h1>Service {{ service.service_id.service_uuid.uuid }}</h1>
+<h1>Service {{ service.name }} ({{ service.service_id.service_uuid.uuid }})</h1>
 
 <div class="row mb-3">
     <div class="col-sm-3">
@@ -45,6 +45,7 @@
     <div class="col-sm-4">
         <b>Context: </b> {{ service.service_id.context_id.context_uuid.uuid }}<br>
         <b>UUID: </b> {{ service.service_id.service_uuid.uuid }}<br>
+        <b>Name: </b> {{ service.name }}<br>
         <b>Type: </b> {{ ste.Name(service.service_type).replace('SERVICETYPE_', '') }}<br>
         <b>Status: </b> {{ sse.Name(service.service_status.service_status).replace('SERVICESTATUS_', '') }}<br>
     </div>

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

@@ -43,7 +43,8 @@
     <table class="table table-striped table-hover">
         <thead>
           <tr>
-            <th scope="col">#</th>
+            <th scope="col">UUID</th>
+            <th scope="col">Name</th>
             <th scope="col">Type</th>
             <th scope="col">End points</th>
             <th scope="col">Status</th>
@@ -59,6 +60,9 @@
                             {{ service.service_id.service_uuid.uuid }}
                         <!-- </a> -->
                     </td>
+                    <td>
+                        {{ service.name }}
+                    </td>
                     <td>
                         {{ ste.Name(service.service_type).replace('SERVICETYPE_', '') }}
                     </td>

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

@@ -17,7 +17,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h1>Slice {{ slice.slice_id.slice_uuid.uuid }} </h1>
+<h1>Slice {{ slice.name }} ({{ slice.slice_id.slice_uuid.uuid }}) </h1>
 
 <div class="row mb-3">
     <div class="col-sm-3">
@@ -46,6 +46,7 @@
     <div class="col-sm-4">
         <b>Context: </b> {{ slice.slice_id.context_id.context_uuid.uuid }}<br>
         <b>UUID: </b> {{ slice.slice_id.slice_uuid.uuid }}<br>
+        <b>Name: </b> {{ slice.name }}<br>
         <b>Owner: </b> {{ slice.slice_owner.owner_uuid.uuid }}<br>
         <b>Status: </b> {{ sse.Name(slice.slice_status.slice_status).replace('SLICESTATUS_', '') }}<br>
     </div>

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

@@ -31,20 +31,19 @@
     <table class="table table-striped table-hover">
         <thead>
           <tr>
-            <th scope="col">#</th>
+            <th scope="col">UUID</th>
+            <th scope="col">Name</th>
             <th scope="col">End points</th>
             <th scope="col">Status</th>
             <th scope="col"></th>
-            
           </tr>
         </thead>
         <tbody>
             {% if slices %}
                 {% for slice in slices %}
                 <tr>
-                    <td>
-                        {{ slice.slice_id.slice_uuid.uuid }}
-                    </td>
+                    <td>{{ slice.slice_id.slice_uuid.uuid }}</td>
+                    <td>{{ slice.name }}</td>
                     <td>
                         <ul>
                         {% for i in range(slice.slice_endpoint_ids|length) %}