WebUI:

- Improved look & feel of service and slice pages.

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

@@ -207,7 +207,19 @@
                 {{ connection.connection_id.connection_uuid.uuid }}
             </td>
             <td>
-                {{ connection.sub_service_ids|map(attribute='service_uuid')|map(attribute='uuid')|join(', ') }}
+                <ul>
+                {% for sub_service_id in connection.sub_service_ids %}
+                    <li>
+                        <a href="{{ url_for('service.detail', service_uuid=sub_service_id.service_uuid.uuid) }}">
+                            {{ sub_service_id.service_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">
+                                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+                            </svg>
+                        </a>
+                    </li>
+                {% endfor %}
+                </ul>
             </td>
 
             {% for i in range(connection.path_hops_endpoint_ids|length) %}

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

@@ -46,11 +46,11 @@
                         {{ slice.slice_id.slice_uuid.uuid }}
                     </td>
                     <td>
-                        {% for i in range(slice.slice_endpoint_ids|length) %}
                         <ul>
+                        {% for i in range(slice.slice_endpoint_ids|length) %}
                             <li> {{ slice.slice_endpoint_ids[i].device_id.device_uuid.uuid }} / {{ slice.slice_endpoint_ids[i].endpoint_uuid.uuid }} </li>
-                        </ul>
                         {% endfor %}
+                        </ul>
                     </td>
                     <td>
                         {{ sse.Name(slice.slice_status.slice_status).replace('SLICESTATUS_', '') }}