Skip to content
Snippets Groups Projects
Commit 55fcf40a authored by Lluis Gifre Renom's avatar Lluis Gifre Renom
Browse files

Merge branch 'feat/webui' of https://gitlab.com/teraflow-h2020/controller into... 

Merge branch 'feat/webui' of https://gitlab.com/teraflow-h2020/controller into feat/ecoc22-dc-interconnect-disjoint
parents af8fd343 209c6248
No related branches found
No related tags found
2 merge requests!54Release 2.0.0,!4Compute component:
Hide whitespace changes
Inline Side-by-side
Showing
with 317 additions and 267 deletions
src/webui/service/service/routes.py
+ 2
− 1
View file @ 55fcf40a
......@@ -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')
......
src/webui/service/static/TeraFlow SDN Logo ScreenColour with Slogan.png 0 → 100644
+ 0
− 0
View file @ 55fcf40a
src/webui/service/static/TeraFlow SDN Logo ScreenColour with Slogan.png

33.6 KiB

src/webui/service/templates/base.html
+ 149
− 148
View file @ 55fcf40a
<!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;">&copy; 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;">&copy; 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
src/webui/service/templates/link/detail.html
+ 8
− 2
View file @ 55fcf40a
......@@ -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 %}
......
src/webui/service/templates/main/about.html
+ 3
− 3
View file @ 55fcf40a
......@@ -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
src/webui/service/templates/service/detail.html
+ 154
− 104
View file @ 55fcf40a
......@@ -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
src/webui/service/templates/service/home.html
+ 1
− 9
View file @ 55fcf40a
......@@ -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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment