From 38f382ae2ff5636c354f8502b2cc52f8e3bd6890 Mon Sep 17 00:00:00 2001
From: gifrerenom <lluis.gifre@cttc.es>
Date: Tue, 24 Dec 2024 17:28:49 +0000
Subject: [PATCH] WebUI component:

- Add logic to show link type
- Minor code formatting
---
 src/webui/service/device/routes.py           |   8 +-
 src/webui/service/link/routes.py             |  16 +-
 src/webui/service/templates/link/detail.html |   1 +
 src/webui/service/templates/link/home.html   | 160 ++++++++++---------
 4 files changed, 100 insertions(+), 85 deletions(-)

diff --git a/src/webui/service/device/routes.py b/src/webui/service/device/routes.py
index f3896bdd8..16b86c769 100644
--- a/src/webui/service/device/routes.py
+++ b/src/webui/service/device/routes.py
@@ -13,10 +13,14 @@
 # limitations under the License.
 
 import json
-from flask import current_app, render_template, Blueprint, flash, session, redirect, url_for
+from flask import (
+    current_app, render_template, Blueprint, flash, session, redirect, url_for
+)
 from common.DeviceTypes import DeviceTypeEnum
 from common.proto.context_pb2 import (
-    ConfigActionEnum, Device, DeviceDriverEnum, DeviceId, DeviceList, DeviceOperationalStatusEnum, Empty)
+    ConfigActionEnum, Device, DeviceDriverEnum, DeviceId, DeviceList,
+    DeviceOperationalStatusEnum, Empty
+)
 from common.tools.context_queries.Device import get_device
 from common.tools.context_queries.Topology import get_topology
 from context.client.ContextClient import ContextClient
diff --git a/src/webui/service/link/routes.py b/src/webui/service/link/routes.py
index dacf77534..42f5984a3 100644
--- a/src/webui/service/link/routes.py
+++ b/src/webui/service/link/routes.py
@@ -13,8 +13,10 @@
 # limitations under the License.
 
 
-from flask import current_app, render_template, Blueprint, flash, session, redirect, url_for
-from common.proto.context_pb2 import Empty, Link, LinkId, LinkList
+from flask import (
+    current_app, render_template, Blueprint, flash, session, redirect, url_for
+)
+from common.proto.context_pb2 import Empty, Link, LinkId, LinkList, LinkTypeEnum
 from common.tools.context_queries.EndPoint import get_endpoint_names
 from common.tools.context_queries.Link import get_link
 from common.tools.context_queries.Topology import get_topology
@@ -50,7 +52,10 @@ def home():
         device_names, endpoints_data = get_endpoint_names(context_client, endpoint_ids)
     context_client.close()
 
-    return render_template('link/home.html', links=links, device_names=device_names, endpoints_data=endpoints_data)
+    return render_template(
+        'link/home.html', links=links, device_names=device_names,
+        endpoints_data=endpoints_data, lte=LinkTypeEnum
+    )
 
 
 @link.route('detail/<path:link_uuid>', methods=('GET', 'POST'))
@@ -64,7 +69,10 @@ def detail(link_uuid: str):
     else:
         device_names, endpoints_data = get_endpoint_names(context_client, link_obj.link_endpoint_ids)
     context_client.close()
-    return render_template('link/detail.html',link=link_obj, device_names=device_names, endpoints_data=endpoints_data)
+    return render_template(
+        'link/detail.html', link=link_obj, device_names=device_names,
+        endpoints_data=endpoints_data, lte=LinkTypeEnum
+    )
 
 @link.get('<path:link_uuid>/delete')
 def delete(link_uuid):
diff --git a/src/webui/service/templates/link/detail.html b/src/webui/service/templates/link/detail.html
index 7c5f732e3..775e5392d 100644
--- a/src/webui/service/templates/link/detail.html
+++ b/src/webui/service/templates/link/detail.html
@@ -39,6 +39,7 @@
     <div class="col-sm-4">
         <b>UUID: </b>{{ link.link_id.link_uuid.uuid }}<br>
         <b>Name: </b>{{ link.name }}<br>
+        <b>Type: </b>{{ lte.Name(link.link_type).replace('LINKTYPE_', '') }}<br>
     </div>
     <div class="col-sm-8">
         <table class="table table-striped table-hover">
diff --git a/src/webui/service/templates/link/home.html b/src/webui/service/templates/link/home.html
index d96da7814..663289879 100644
--- a/src/webui/service/templates/link/home.html
+++ b/src/webui/service/templates/link/home.html
@@ -12,87 +12,89 @@
     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 %}
-       <h1>Links</h1>
-   
-       <div class="row">
-           <div class="col">
-               <!-- <a href="#" class="btn btn-primary" style="margin-bottom: 10px;">
-                   <i class="bi bi-plus"></i>
-                   Add New Link
-               </a> -->
-           </div>
-           <div class="col">
-               {{ links | length }} links found in context <i>{{ session['context_uuid'] }}</i>
-           </div>
-           <!-- <div class="col">
-               <form>
-                   <div class="input-group">
-                       <input type="text" aria-label="Search" placeholder="Search..." class="form-control"/>
-                       <button type="submit" class="btn btn-primary">Search</button>
-                     </div>
-               </form>
-           </div> -->
-       </div>
-   
-       <table class="table table-striped table-hover">
-           <thead>
-             <tr>
-               <th scope="col">UUID</th>
-               <th scope="col">Name</th>
-               <th scope="col">Endpoints</th>
-               <th scope="col"></th>
-             </tr>
-           </thead>
-           <tbody>
-               {% if links %}
-                   {% for link in links %}
-                   <tr>
-                       <td>
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+    <h1>Links</h1>
+
+    <div class="row">
+        <div class="col">
+            <!-- <a href="#" class="btn btn-primary" style="margin-bottom: 10px;">
+                <i class="bi bi-plus"></i>
+                Add New Link
+            </a> -->
+        </div>
+        <div class="col">
+            {{ links | length }} links found in context <i>{{ session['context_uuid'] }}</i>
+        </div>
+        <!-- <div class="col">
+            <form>
+                <div class="input-group">
+                    <input type="text" aria-label="Search" placeholder="Search..." class="form-control"/>
+                    <button type="submit" class="btn btn-primary">Search</button>
+                </div>
+            </form>
+        </div> -->
+    </div>
+
+    <table class="table table-striped table-hover">
+        <thead>
+            <tr>
+                <th scope="col">UUID</th>
+                <th scope="col">Name</th>
+                <th scope="col">Type</th>
+                <th scope="col">Endpoints</th>
+                <th scope="col"></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% if links %}
+                {% for link in links %}
+                    <tr>
+                        <td>
                             {{ link.link_id.link_uuid.uuid }}
-                       </td>
-                       <td>
+                        </td>
+                        <td>
                             {{ link.name }}
                         </td>
-
-                       <td>
-                           <ul>
-                               {% for endpoint in link.link_endpoint_ids %}
-                               <li>
-                                   {{ endpoints_data.get(endpoint.endpoint_uuid.uuid, (endpoint.endpoint_uuid.uuid, ''))[0] }} / 
-                                   Device: 
-                                   <a href="{{ url_for('device.detail', device_uuid=endpoint.device_id.device_uuid.uuid) }}">
-                                       {{ device_names.get(endpoint.device_id.device_uuid.uuid, endpoint.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">
-                                           <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>
+                        <td>
+                            {{ lte.Name(link.link_type).replace('LINKTYPE_', '') }}
+                        </td>
+                        <td>
+                            <ul>
+                                {% for endpoint in link.link_endpoint_ids %}
+                                <li>
+                                    {{ endpoints_data.get(endpoint.endpoint_uuid.uuid, (endpoint.endpoint_uuid.uuid, ''))[0] }} / 
+                                    Device: 
+                                    <a href="{{ url_for('device.detail', device_uuid=endpoint.device_id.device_uuid.uuid) }}">
+                                        {{ device_names.get(endpoint.device_id.device_uuid.uuid, endpoint.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">
+                                            <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>
    
-                       <td> 
+                        <td> 
                             <a href="{{ url_for('link.detail', link_uuid=link.link_id.link_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>
-                       </td>
-                   </tr>
-                   {% endfor %}
-               {% else %}
-                   <tr>
-                       <td colspan="7">No links found</td>
-                   </tr>
-               {% endif %}
-           </tbody>
-       </table>
-   
-   {% endblock %}
\ No newline at end of file
+                                <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>
+                        </td>
+                    </tr>
+                {% endfor %}
+            {% else %}
+                <tr>
+                    <td colspan="7">No links found</td>
+                </tr>
+            {% endif %}
+        </tbody>
+    </table>
+{% endblock %}
-- 
GitLab