diff --git a/src/webui/service/service/routes.py b/src/webui/service/service/routes.py
index d62e28ca16246934e715086b9091ce965e18ff5b..bc05daee3e4ff8795c26bed9e0707b9a3ab2be7c 100644
--- a/src/webui/service/service/routes.py
+++ b/src/webui/service/service/routes.py
@@ -79,7 +79,8 @@ def detail(service_uuid: str):
flash('The system encountered an error and cannot show the details of this service.', 'warning')
current_app.logger.exception(e)
return redirect(url_for('service.home'))
- return render_template('service/detail.html', service=response, connections=connections)
+ return render_template('service/detail.html', service=response, connections=connections,ste=ServiceTypeEnum,
+ sse=ServiceStatusEnum)
@service.get('<path:service_uuid>/delete')
diff --git a/src/webui/service/static/TeraFlow SDN Logo ScreenColour with Slogan.png b/src/webui/service/static/TeraFlow SDN Logo ScreenColour with Slogan.png
new file mode 100644
index 0000000000000000000000000000000000000000..218cc713c0a2704f96371fdd2916ef16b44cf667
Binary files /dev/null and b/src/webui/service/static/TeraFlow SDN Logo ScreenColour with Slogan.png differ
diff --git a/src/webui/service/templates/base.html b/src/webui/service/templates/base.html
index d314acb3d5cbe607e82474be7e66302f3d620d6a..cc245819ee60c76c018d03aca05e7f9e576cb63a 100644
--- a/src/webui/service/templates/base.html
+++ b/src/webui/service/templates/base.html
@@ -1,160 +1,161 @@
-<!doctype html>
-<!--
- Copyright 2021-2023 H2020 TeraFlow (https://www.teraflow-h2020.eu/)
- 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.
--->
-
-<html lang="en">
- <head>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
-
- <link rel="shortcut icon" href="https://teraflow-h2020.eu/sites/teraflow/files/public/favicon.png" type="image/png" />
-
- <!-- Bootstrap CSS -->
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
-
- <title>TeraFlow OFC 2022 Demo</title>
- </head>
- <body>
- <div id="teraflow-branding" style="width: 260px; margin: 7px;">
- <a href="{{ url_for('main.home') }}" title="Home" rel="home" id="main-logo" class="site-logo site-logo-pages">
- <svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.3 132.1"><defs><style>.cls-1{fill:#36a9e1;}.cls-2{fill:#1d71b8;}.cls-3{fill:none;stroke-width:2.52px;}.cls-10,.cls-3,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{stroke:#0f77b6;}.cls-3,.cls-4,.cls-8{stroke-miterlimit:10;}.cls-10,.cls-4,.cls-5,.cls-7,.cls-8,.cls-9{fill:#fff;}.cls-4{stroke-width:0.73px;}.cls-5,.cls-7{stroke-miterlimit:10;}.cls-5{stroke-width:0.75px;}.cls-6{fill:#0f77b6;}.cls-7{stroke-width:0.72px;}.cls-8{stroke-width:0.7px;}.cls-9{stroke-miterlimit:10;stroke-width:0.69px;}.cls-10{stroke-miterlimit:10;stroke-width:0.7px;}</style></defs><path class="cls-1" d="M96,57V51.3h44.1V57H121v52.3h-5.9V57Z"></path><path class="cls-1" d="M168.9,95.1l4.7,2.4a26,26,0,0,1-5.3,7.3,22.27,22.27,0,0,1-6.7,4.2,22.64,22.64,0,0,1-8.5,1.4c-7,0-12.5-2.3-16.4-6.9a23.53,23.53,0,0,1-5.9-15.6,23,23,0,0,1,5-14.5c4.2-5.4,9.9-8.1,17-8.1,7.3,0,13.2,2.8,17.5,8.3,3.1,3.9,4.7,8.8,4.7,14.7H136.4a17.48,17.48,0,0,0,4.8,12.3,15.26,15.26,0,0,0,11.4,4.8,20,20,0,0,0,6.4-1.1,19.3,19.3,0,0,0,5.3-3A33.07,33.07,0,0,0,168.9,95.1Zm0-11.6a18.66,18.66,0,0,0-3.2-7.1,15.25,15.25,0,0,0-5.6-4.3,16.87,16.87,0,0,0-7.3-1.6,16.06,16.06,0,0,0-10.9,4.1,18.15,18.15,0,0,0-5,8.9Z"></path><path class="cls-1" d="M182,66.4h5.6v6.3a20,20,0,0,1,5.3-5.5,10.67,10.67,0,0,1,5.8-1.8,9.87,9.87,0,0,1,4.9,1.5l-2.9,4.7a7.52,7.52,0,0,0-2.9-.7,8.09,8.09,0,0,0-5.3,2.3,14.64,14.64,0,0,0-3.9,7c-.7,2.4-1,7.4-1,14.8v14.5H182Z"></path><path class="cls-1" d="M246.2,66.4v42.9h-5.4V102a23.11,23.11,0,0,1-7.8,6.3,21.23,21.23,0,0,1-9.4,2.1,21,21,0,0,1-15.6-6.6,23.07,23.07,0,0,1,.1-32,21.23,21.23,0,0,1,15.7-6.6,20,20,0,0,1,17.1,8.9V66.2h5.3Zm-22.1,4.2a16.67,16.67,0,0,0-8.5,2.3,15.93,15.93,0,0,0-6.2,6.4,17.68,17.68,0,0,0-2.3,8.7,18.26,18.26,0,0,0,2.3,8.7,15.93,15.93,0,0,0,6.2,6.4,16.58,16.58,0,0,0,8.4,2.3,17.59,17.59,0,0,0,8.6-2.3,15.42,15.42,0,0,0,6.2-6.2,17.17,17.17,0,0,0,2.2-8.8,16.73,16.73,0,0,0-4.9-12.4A15.8,15.8,0,0,0,224.1,70.6Z"></path><path class="cls-2" d="M259.5,51.3h29.1V57H265.3V75.2h23.3v5.7H265.3v28.5h-5.8V51.3Z"></path><path class="cls-2" d="M296.9,49.9h5.5v59.5h-5.5Z"></path><path class="cls-2" d="M330.5,65.3a21.1,21.1,0,0,1,16.4,7.2A22.55,22.55,0,0,1,352.8,88a22.24,22.24,0,0,1-6.3,15.7c-4.2,4.5-9.5,6.7-16.1,6.7s-12-2.2-16.1-6.7A22.24,22.24,0,0,1,308,88a22.73,22.73,0,0,1,5.9-15.5A21.81,21.81,0,0,1,330.5,65.3Zm0,5.4a15.83,15.83,0,0,0-11.8,5.1,17,17,0,0,0-4.9,12.3,17.68,17.68,0,0,0,2.3,8.7,15.19,15.19,0,0,0,6.1,6.2,16.48,16.48,0,0,0,8.4,2.2A16,16,0,0,0,339,103a15.82,15.82,0,0,0,6.1-6.2,17.68,17.68,0,0,0,2.3-8.7,17.07,17.07,0,0,0-5-12.3A16.2,16.2,0,0,0,330.5,70.7Z"></path><path class="cls-2" d="M351.2,66.4h5.7L370,97.6l13.7-31.1h1l13.8,31.1,13.4-31.1h5.7L399,109.3h-1L384.3,78.6l-13.7,30.7h-1Z"></path><polyline class="cls-3" points="51 105 51 41.2 27 41.2"></polyline><polyline class="cls-3" points="38.1 33.8 56.4 33.8 56.4 93"></polyline><polyline class="cls-3" points="79.9 33.8 61.5 33.8 61.5 79.2"></polyline><polyline class="cls-3" points="90.7 41.2 66.7 41.2 66.7 105"></polyline><line class="cls-3" x1="83.1" y1="62.6" x2="66.7" y2="62.6"></line><circle class="cls-4" cx="27" cy="41.2" r="5.3"></circle><path class="cls-1" d="M23.3,41.2a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,23.3,41.2Z"></path><circle class="cls-5" cx="51" cy="105" r="5.4"></circle><path class="cls-1" d="M47.3,105a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,47.3,105Z"></path><circle class="cls-6" cx="56.36" cy="93.02" r="3.4"></circle><circle class="cls-6" cx="61.5" cy="79.2" r="2.8"></circle><circle class="cls-7" cx="66.7" cy="105.01" r="5.3"></circle><path class="cls-1" d="M63,105a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,63,105Z"></path><circle class="cls-8" cx="90.7" cy="41.2" r="5.1"></circle><path class="cls-1" d="M87,41.2a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,87,41.2Z"></path><circle class="cls-8" cx="84.7" cy="62.6" r="5.1"></circle><path class="cls-1" d="M81,62.6a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,81,62.6Z"></path><line class="cls-3" x1="34.8" y1="62.6" x2="51.1" y2="62.6"></line><circle class="cls-8" cx="33.1" cy="62.6" r="5.1"></circle><path class="cls-1" d="M36.9,62.6a3.8,3.8,0,1,1-3.8-3.8A3.8,3.8,0,0,1,36.9,62.6Z"></path><line class="cls-3" x1="23.7" y1="26.7" x2="94.1" y2="26.7"></line><circle class="cls-9" cx="94.09" cy="26.67" r="5"></circle><path class="cls-1" d="M90.3,26.7a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,90.3,26.7Z"></path><circle class="cls-6" cx="78" cy="33.8" r="3.8"></circle><circle class="cls-6" cx="40" cy="33.8" r="3.8"></circle><circle class="cls-10" cx="23.71" cy="26.71" r="5.1"></circle><path class="cls-1" d="M20,26.7a3.8,3.8,0,1,0,3.8-3.8A3.8,3.8,0,0,0,20,26.7Z"></path></svg>
- </a>
- </div>
-
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="margin-bottom: 10px;">
- <div class="container-fluid">
- <a class="navbar-brand" href="{{ url_for('main.home') }}">
- <img src="https://teraflow-h2020.eu/sites/teraflow/files/public/favicon.png" alt="" width="30" height="24" class="d-inline-block align-text-top"/>
- TeraFlow
+ <!doctype html>
+ <!--
+ Copyright 2021-2023 H2020 TeraFlow (https://www.teraflow-h2020.eu/)
+
+ 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.
+ -->
+
+ <html lang="en">
+ <head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="shortcut icon" href="https://tfs.etsi.org/images/logos/tfs_logo_small.png" type="image/png" />
+
+ <!-- Bootstrap CSS -->
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
+
+ <title>ETSI TeraFlowSDN Controller</title>
+ </head>
+ <body>
+ <div id="teraflow-branding">
+ <a href="{{ url_for('main.home') }}" title="Home" rel="home" id="main-logo" class="site-logo site-logo-pages">
+ <img src="{{ url_for('static', filename='TeraFlow SDN Logo ScreenColour with Slogan.png') }}" width="400" type="image/png">
</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="navbarColor02">
- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- {% if request.path == '/' %}
- <a class="nav-link active" aria-current="page" href="{{ url_for('main.home') }}">Home</a>
- {% else %}
- <a class="nav-link" href="{{ url_for('main.home') }}">Home</a>
- {% endif %}
- </li>
- <li class="nav-item">
- {% if '/device/' in request.path %}
- <a class="nav-link active" aria-current="page" href="{{ url_for('device.home') }}">Device</a>
- {% else %}
- <a class="nav-link" href="{{ url_for('device.home') }}">Device</a>
- {% endif %}
- </li>
- <li class="nav-item">
- {% if '/link/' in request.path %}
- <a class="nav-link active" aria-current="page" href="{{ url_for('link.home') }}">Link</a>
- {% else %}
- <a class="nav-link" href="{{ url_for('link.home') }}">Link</a>
- {% endif %}
- </li>
- <li class="nav-item">
- {% if '/service/' in request.path %}
- <a class="nav-link active" aria-current="page" href="{{ url_for('service.home') }}">Service</a>
- {% else %}
- <a class="nav-link" href="{{ url_for('service.home') }}">Service</a>
- {% endif %}
- </li>
-
- <li class="nav-item">
- <a class="nav-link" href="/grafana" id="grafana_link" target="grafana">Grafana</a>
- </li>
-
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('main.debug') }}">Debug</a>
- </li>
-
- <!-- <li class="nav-item">
- <a class="nav-link" href="#">Context</a>
- </li>
-
- <li class="nav-item">
- <a class="nav-link" href="#">Monitoring</a>
- </li> -->
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('main.about') }}">About</a>
- </li>
- </ul>
- <span class="navbar-text" style="color: #fff;">
- Current context: <b>{{ get_working_context() }}</b>
- </span>
- </div>
</div>
- </nav>
-
- <main class="container">
- <div class="row">
- <div class="col-md-12">
- {% with messages = get_flashed_messages(with_categories=true) %}
- {% if messages %}
- {% for category, message in messages %}
- <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
- {{ message }}
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
- </div>
-
- {% endfor %}
- {% endif %}
- {% endwith %}
- </div>
- </div>
- <div class="row">
- <div class="col-xxl-12">
- {% block content %}{% endblock %}
+
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="margin-bottom: 10px;">
+ <div class="container-fluid">
+ <a class="navbar-brand" href="{{ url_for('main.home') }}">
+ <img src="https://teraflow-h2020.eu/sites/teraflow/files/public/favicon.png" alt="" width="30" height="24" class="d-inline-block align-text-top"/>
+ TeraFlow
+ </a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarColor02">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+ <li class="nav-item">
+ {% if request.path == '/' %}
+ <a class="nav-link active" aria-current="page" href="{{ url_for('main.home') }}">Home</a>
+ {% else %}
+ <a class="nav-link" href="{{ url_for('main.home') }}">Home</a>
+ {% endif %}
+ </li>
+ <li class="nav-item">
+ {% if '/device/' in request.path %}
+ <a class="nav-link active" aria-current="page" href="{{ url_for('device.home') }}">Device</a>
+ {% else %}
+ <a class="nav-link" href="{{ url_for('device.home') }}">Device</a>
+ {% endif %}
+ </li>
+ <li class="nav-item">
+ {% if '/link/' in request.path %}
+ <a class="nav-link active" aria-current="page" href="{{ url_for('link.home') }}">Link</a>
+ {% else %}
+ <a class="nav-link" href="{{ url_for('link.home') }}">Link</a>
+ {% endif %}
+ </li>
+ <li class="nav-item">
+ {% if '/service/' in request.path %}
+ <a class="nav-link active" aria-current="page" href="{{ url_for('service.home') }}">Service</a>
+ {% else %}
+ <a class="nav-link" href="{{ url_for('service.home') }}">Service</a>
+ {% endif %}
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="/grafana" id="grafana_link" target="grafana">Grafana</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('main.debug') }}">Debug</a>
+ </li>
+
+ <!-- <li class="nav-item">
+ <a class="nav-link" href="#">Context</a>
+ </li>
+
+ <li class="nav-item">
+ <a class="nav-link" href="#">Monitoring</a>
+ </li> -->
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('main.about') }}">About</a>
+ </li>
+ </ul>
+ <span class="navbar-text" style="color: #fff;">
+ Current context: <b>{{ get_working_context() }}</b>
+ </span>
+ </div>
</div>
- </div>
- </main>
-
- <footer class="footer" style="background-color: darkgrey; margin-top: 30px; padding-top: 20px;">
- <div class="container">
+ </nav>
+
+ <main class="container">
<div class="row">
<div class="col-md-12">
- <p class="text-center" style="color: white;">© 2021-2023</p>
+ {% with messages = get_flashed_messages(with_categories=true) %}
+ {% if messages %}
+ {% for category, message in messages %}
+ <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+ {{ message }}
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+ </div>
+
+ {% endfor %}
+ {% endif %}
+ {% endwith %}
</div>
</div>
<div class="row">
- <div class="col-md-6">
- <p>This project has received funding from the European Union's Horizon 2020 research and innovation programme under grant agreement No 101015857.</p>
+ <div class="col-xxl-12">
+ {% block content %}{% endblock %}
+ </div>
+ </div>
+ </main>
+
+ <footer class="footer" style="background-color: darkgrey; margin-top: 30px; padding-top: 20px;">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <p class="text-center" style="color: white;">© 2021-2023</p>
+ </div>
</div>
- <div class="col-md-6">
- <img src="https://teraflow-h2020.eu/sites/teraflow/files/public/content-images/media/2021/logo%205G-ppp%20eu.png" width="310" alt="5g ppp EU logo" loading="lazy" typeof="foaf:Image">
+ <div class="row">
+ <div class="col-md-6">
+ <p>This project has received funding from the European Union's Horizon 2020 research and innovation programme under grant agreement No 101015857.</p>
+ </div>
+ <div class="col-md-6">
+ <img src="https://teraflow-h2020.eu/sites/teraflow/files/public/content-images/media/2021/logo%205G-ppp%20eu.png" width="310" alt="5g ppp EU logo" loading="lazy" typeof="foaf:Image">
+ </div>
</div>
</div>
- </div>
- </footer>
-
- <!-- Optional JavaScript; choose one of the two! -->
-
- <!-- Option 1: Bootstrap Bundle with Popper -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
- <!-- <script src="{{ url_for('static', filename='site.js') }}"/> -->
- <!-- <script>
- document.getElementById("grafana_link").href = window.location.protocol + "//" + window.location.hostname + ":30300"
- </script> -->
- <!-- Option 2: Separate Popper and Bootstrap JS -->
- <!--
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script>
- -->
- </body>
-</html>
\ No newline at end of file
+ </footer>
+
+ <!-- Optional JavaScript; choose one of the two! -->
+
+ <!-- Option 1: Bootstrap Bundle with Popper -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
+ <!-- <script src="{{ url_for('static', filename='site.js') }}"/> -->
+ <!-- <script>
+ document.getElementById("grafana_link").href = window.location.protocol + "//" + window.location.hostname + ":30300"
+ </script> -->
+ <!-- Option 2: Separate Popper and Bootstrap JS -->
+ <!--
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script>
+ -->
+ </body>
+ </html>
\ No newline at end of file
diff --git a/src/webui/service/templates/link/detail.html b/src/webui/service/templates/link/detail.html
index 8b49a65eb4b61edaf4d286f691d41c73e6d1c676..7df9ddce6bdddd511f3b50313cafa1374990b99e 100644
--- a/src/webui/service/templates/link/detail.html
+++ b/src/webui/service/templates/link/detail.html
@@ -36,7 +36,7 @@
<thead>
<tr>
<th scope="col">Endpoints</th>
- <th scope="col">Type</th>
+ <th scope="col">Device</th>
</tr>
</thead>
<tbody>
@@ -46,7 +46,13 @@
{{ end_point.endpoint_uuid.uuid }}
</td>
<td>
- {{ end_point.endpoint_uuid.uuid }}
+ <a href="{{ url_for('device.detail', device_uuid=end_point.device_id.device_uuid.uuid) }}">
+ {{ end_point.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>
</td>
</tr>
{% endfor %}
diff --git a/src/webui/service/templates/main/about.html b/src/webui/service/templates/main/about.html
index 4ba3a5845b0e8e70b029d4ec459733468899698b..80d61891ce95ff096308ed903da294bbf23c5070 100644
--- a/src/webui/service/templates/main/about.html
+++ b/src/webui/service/templates/main/about.html
@@ -16,10 +16,10 @@
{% extends 'base.html' %}
{% block content %}
- <h1>TeraFlow OS</h1>
+ <h1>ETSI TeraFlowSDN Controller</h1>
- <p>For more information, visit the <a href="https://teraflow-h2020.eu/" target="_newtf">TeraFlow H2020 webpage</a>.</p>
+ <p>For more information, visit the <a href="https://tfs.etsi.org/" target="_newtf">ETSI Open Source Group for TeraFlowSDN</a>.</p>
- <img alt="Consortium" class="img-fluid" src="{{ url_for('static', filename='partners.png') }}"/>
+ <!--<img alt="Consortium" class="img-fluid" src="{{ url_for('static', filename='partners.png') }}"/>-->
{% endblock %}
\ No newline at end of file
diff --git a/src/webui/service/templates/service/detail.html b/src/webui/service/templates/service/detail.html
index 3a0f0f7d0c3e8b2e4130c967b45568ce2a96fc8d..9d2c1e736a1afb40e1cc2433fae2b2db9371a107 100644
--- a/src/webui/service/templates/service/detail.html
+++ b/src/webui/service/templates/service/detail.html
@@ -17,120 +17,170 @@
{% extends 'base.html' %}
{% block content %}
- <h1>Service {{ service.service_id.service_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('service.home') }}'">
- <i class="bi bi-box-arrow-in-left"></i>
- Back to service list
- </button>
- </div>
- <div class="col-sm-3">
- <a id="update" class="btn btn-secondary" href="#">
- <i class="bi bi-pencil-square"></i>
- Update
- </a>
- </div>
- <div class="col-sm-3">
- <!-- <button type="button" class="btn btn-danger"><i class="bi bi-x-square"></i>Delete service</button> -->
- <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
- <i class="bi bi-x-square"></i>Delete service
- </button>
- </div>
+<h1>Service {{ service.service_id.service_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('service.home') }}'">
+ <i class="bi bi-box-arrow-in-left"></i>
+ Back to service list
+ </button>
</div>
-
- <div class="row mb-3">
- <div class="col-sm-1"><b>UUID:</b></div>
- <div class="col-sm-5">
- {{ service.service_id.service_uuid.uuid }}
- </div>
- <div class="col-sm-1"><b>Type:</b></div>
- <div class="col-sm-5">
- {{ service.service_type }}
- </div>
+ <div class="col-sm-3">
+ <a id="update" class="btn btn-secondary" href="#">
+ <i class="bi bi-pencil-square"></i>
+ Update
+ </a>
</div>
- <div class="row mb-3">
- <b>Endpoints:</b>
- <div class="col-sm-10">
- <ul>
- {% for endpoint in service.service_endpoint_ids %}
- <li>{{ endpoint.endpoint_uuid.uuid }}: {{ endpoint.endpoint_type }}</li>
- {% endfor %}
- </ul>
- </div>
- </div>
- <div class="row mb-3">
- <b>Configurations:</b>
- <div class="col-sm-10">
- <ul>
- {% for config in service.service_config.config_rules %}
- {% if config.WhichOneof('config_rule') == 'custom' %}
- <li>{{ config.custom.resource_key }}:
- <ul>
- {% for key, value in (config.custom.resource_value | from_json).items() %}
- <li><b>{{ key }}:</b> {{ value }}</li>
- {% endfor %}
- </ul>
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- </div>
+ <div class="col-sm-3">
+ <!-- <button type="button" class="btn btn-danger"><i class="bi bi-x-square"></i>Delete service</button> -->
+ <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+ <i class="bi bi-x-square"></i>Delete service
+ </button>
</div>
+</div>
- <!-- Modal -->
-<div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+<div class="row mb-3">
+ <div class="col-sm-4">
+ <b>UUID: </b> {{ service.service_id.service_uuid.uuid }}<br><br>
+ <b>Type: </b> {{ ste.Name(service.service_type).replace('SERVICETYPE_', '') }}<br><br>
+ <b>Status: </b> {{ sse.Name(service.service_status.service_status).replace('SERVICESTATUS_', '') }}<br><br>
+ </div>
+ <div class="col-sm-8">
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Endpoints</th>
+ <th scope="col">Device</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for endpoint in service.service_endpoint_ids %}
+ <tr>
+ <td>
+ {{ endpoint.endpoint_uuid.uuid }}
+ </td>
+ <td>
+ <a href="{{ url_for('device.detail', device_uuid=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>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
+</div>
+<b>Constraints:</b>
+<table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Type</th>
+ <th scope="col">Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for constraint in service.service_constraints %}
+ <tr>
+ <td>
+ {{ constraint.custom.constraint_type }}
+ </td>
+ <td>
+ <ul>
+ {{ constraint.custom.constraint_value }}
+ </ul>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
+<b>Configurations:</b>
+<table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Key</th>
+ <th scope="col">Value</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for config in service.service_config.config_rules %}
+ {% if config.WhichOneof('config_rule') == 'custom' %}
+ <tr>
+ <td>
+ {{ config.custom.resource_key }}
+ </td>
+ <td>
+ <ul>
+ {% for key, value in (config.custom.resource_value | from_json).items() %}
+ <li><b>{{ key }}:</b> {{ value }}</li>
+ {% endfor %}
+ </ul>
+ </td>
+ </tr>
+ {% endif %}
+ {% endfor %}
+ </tbody>
+</table>
+<!-- Modal -->
+<div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+ aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="staticBackdropLabel">Delete service?</h5>
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="staticBackdropLabel">Delete service?</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ Are you sure you want to delete the service "{{ service.service_id.service_uuid.uuid }}"?
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
+ <a type="button" class="btn btn-danger"
+ href="{{ url_for('service.delete', service_uuid=service.service_id.service_uuid.uuid) }}"><i
+ class="bi bi-exclamation-diamond"></i>Yes</a>
+ </div>
</div>
- <div class="modal-body">
- Are you sure you want to delete the service "{{ service.service_id.service_uuid.uuid }}"?
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
- <a type="button" class="btn btn-danger" href="{{ url_for('service.delete', service_uuid=service.service_id.service_uuid.uuid) }}"><i class="bi bi-exclamation-diamond"></i>Yes</a>
- </div>
- </div>
</div>
- </div>
-
-
- <table class="table table-striped table-hover">
- <thead>
- <tr>
- <th scope="col">Connection Id</th>
- <th scope="col">Sub-service</th>
- <th scope="col">Path</th>
- </tr>
- </thead>
- <tbody>
- {% for connections in connections.connections %}
- <tr>
- <td>
- {{ connections.connection_id.connection_uuid.uuid }}
- </td>
- <td>
- {{ connections.sub_service_ids|map(attribute='service_uuid')|map(attribute='uuid')|join(', ') }}
- </td>
-
- {% for i in range(connections.path_hops_endpoint_ids|length) %}
-<td>
- {{ connections.path_hops_endpoint_ids[i].device_id.device_uuid.uuid }} / {{ connections.path_hops_endpoint_ids[i].endpoint_uuid.uuid }}
-</td>
-{% endfor %}
-
-
- </tr>
+</div>
+
+
+<table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Connection Id</th>
+ <th scope="col">Sub-service</th>
+ <th scope="col">Path</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for connections in connections.connections %}
+ <tr>
+ <td>
+ {{ connections.connection_id.connection_uuid.uuid }}
+ </td>
+ <td>
+ {{ connections.sub_service_ids|map(attribute='service_uuid')|map(attribute='uuid')|join(', ') }}
+ </td>
+
+ {% for i in range(connections.path_hops_endpoint_ids|length) %}
+ <td>
+ {{ connections.path_hops_endpoint_ids[i].device_id.device_uuid.uuid }} / {{
+ connections.path_hops_endpoint_ids[i].endpoint_uuid.uuid }}
+ </td>
{% endfor %}
- </tbody>
- </table>
+
+
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/src/webui/service/templates/service/home.html b/src/webui/service/templates/service/home.html
index 8d231cf17e553f879bd8314514c078054a5a17d5..c0a01839bb519074526a4ed34669ebfdd3d8b8e4 100644
--- a/src/webui/service/templates/service/home.html
+++ b/src/webui/service/templates/service/home.html
@@ -46,7 +46,6 @@
<th scope="col">#</th>
<th scope="col">Type</th>
<th scope="col">End points</th>
- <th scope="col">Constraints</th>
<th scope="col">Status</th>
<th scope="col"></th>
</tr>
@@ -70,14 +69,7 @@
{% endfor %}
</ul>
</td>
- <td>
- <ul>
- {% for constraint in service.service_constraints %}
- <li>{{ constraint.custom.constraint_type }}: {{ constraint.custom.constraint_value }}</li>
- {% endfor %}
- </ul>
- </td>
- <td>{{ sse.Name(service.service_status.service_status).replace('SERVICESTATUS_', '') }}</td>
+ <td>{{ sse.Name(service.service_status.service_status).replace('SERVICESTATUS_', '') }} </td>
<td>
<a href="{{ url_for('service.detail', service_uuid=service.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">