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

WebUI component: 

- minor formatting in service page
- minor formatting in slice service page
parent 2d1eb2fc
No related branches found
No related tags found
2 merge requests!54Release 2.0.0,!4Compute component:
Hide whitespace changes
Inline Side-by-side
src/webui/service/templates/service/detail.html
+ 30
− 43
View file @ 4e5c8f3a
...@@ -26,18 +26,20 @@ ...@@ -26,18 +26,20 @@
Back to service list Back to service list
</button> </button>
</div> </div>
<!--
<div class="col-sm-3"> <div class="col-sm-3">
<a id="update" class="btn btn-secondary" href="#"> <a id="update" class="btn btn-secondary" href="#">
<i class="bi bi-pencil-square"></i> <i class="bi bi-pencil-square"></i>
Update Update
</a> </a>
</div> </div>
<div class="col-sm-3"> <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"><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"> <!--<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="bi bi-x-square"></i>Delete service <i class="bi bi-x-square"></i>Delete service
</button> </button>
</div> </div>
-->
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
...@@ -91,66 +93,51 @@ ...@@ -91,66 +93,51 @@
{% for constraint in service.service_constraints %} {% for constraint in service.service_constraints %}
{% if constraint.WhichOneof('constraint')=='custom' %} {% if constraint.WhichOneof('constraint')=='custom' %}
<tr> <tr>
<td> <td>Custom</td>
Custom <td>{{ constraint.custom.constraint_type }}</td>
</td> <td>{{ constraint.custom.constraint_value }}</td>
<td>
{{ constraint.custom.constraint_type }}
</td>
<td>
<ul>
{{ constraint.custom.constraint_value }}
</ul>
</td>
</tr> </tr>
{% endif %} {% elif constraint.WhichOneof('constraint')=='endpoint_location' %}
{% if constraint.WhichOneof('constraint')=='endpoint_location' %}
<tr> <tr>
<td> <td>Endpoint Location</td>
Endpoint Location
</td>
<td> <td>
{{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{ {{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }} constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }}
</td> </td>
<td> <td>
<ul> {% if constraint.endpoint_location.location.WhichOneof('location')=='region' %}
{{ constraint.endpoint_location.location }} Region: {{ constraint.endpoint_location.location.region }}
</ul> {% elif constraint.endpoint_location.location.WhichOneof('location')=='gps_position' %}
Position (lat/long):
{{ constraint.endpoint_location.location.gps_position.latitude }} /
{{ constraint.endpoint_location.location.gps_position.longitude }}
{% endif %}
</td> </td>
</tr> </tr>
{% endif %} {% elif constraint.WhichOneof('constraint')=='endpoint_priority' %}
{% if constraint.WhichOneof('constraint')=='endpoint_priority' %}
<tr> <tr>
<td> <td>Endpoint Priority</td>
Endpoint Priority
</td>
<td> <td>
{{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{ {{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }} constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }}
</td> </td>
<td> <td>{{ constraint.endpoint_priority.priority }}</td>
<ul>
{{ constraint.endpoint_priority.priority }}
</ul>
</td>
</tr> </tr>
{% endif %} {% elif constraint.WhichOneof('constraint')=='sla_availability' %}
{% if constraint.WhichOneof('constraint')=='sla_availability' %}
<tr> <tr>
<td>SLA Availability</td>
<td>-</td>
<td> <td>
SLA Availability {{ constraint.sla_availability.num_disjoint_paths }} disjoint paths;
</td> {% if constraint.sla_availability.all_active %}all{% else %}single{% endif %}active
<td>
/
</td>
<td>
<ul>
<li> num_disjoint_paths: {{ constraint.sla_availability.num_disjoint_paths }} </li>
<li> all_active: {{ constraint.sla_availability.all_active }} </li>
</ul>
</td> </td>
</tr> </tr>
{% else %}
<tr>
<td>-</td>
<td>-</td>
<td>{{ constraint }}</td>
</tr>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody> </tbody>
......
src/webui/service/templates/slice/detail.html
+ 144
− 144
View file @ 4e5c8f3a
...@@ -20,49 +20,64 @@ ...@@ -20,49 +20,64 @@
<h1>Slice {{ slice.slice_id.slice_uuid.uuid }} </h1> <h1>Slice {{ slice.slice_id.slice_uuid.uuid }} </h1>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-3"> <div class="col-sm-3">
<button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('slice.home') }}'"> <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('slice.home') }}'">
<i class="bi bi-box-arrow-in-left"></i> <i class="bi bi-box-arrow-in-left"></i>
Back to slice list Back to slice list
</button> </button>
</div> </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 slice</button> -->
<!--<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="bi bi-x-square"></i>Delete slice
</button>
</div>
-->
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-sm-4"> <div class="col-sm-4">
<b>UUID: </b> {{ slice.slice_id.slice_uuid.uuid }}<br><br> <b>UUID: </b> {{ slice.slice_id.slice_uuid.uuid }}<br><br>
<b>Status: </b> {{ sse.Name(slice.slice_status.slice_status).replace('SLICESTATUS_', '') }}<br><br> <b>Status: </b> {{ sse.Name(slice.slice_status.slice_status).replace('SLICESTATUS_', '') }}<br><br>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">Endpoints</th> <th scope="col">Endpoints</th>
<th scope="col">Device</th> <th scope="col">Device</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for endpoint in slice.slice_endpoint_ids %} {% for endpoint in slice.slice_endpoint_ids %}
<tr> <tr>
<td> <td>
{{ endpoint.endpoint_uuid.uuid }} {{ endpoint.endpoint_uuid.uuid }}
</td> </td>
<td> <td>
<a href="{{ url_for('device.detail', device_uuid=endpoint.device_id.device_uuid.uuid) }}"> <a href="{{ url_for('device.detail', device_uuid=endpoint.device_id.device_uuid.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" <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-eye" viewBox="0 0 16 16"> class="bi bi-eye" viewBox="0 0 16 16">
<path <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" /> 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 <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" /> 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> </svg>
</a> </a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<b>Constraints:</b> <b>Constraints:</b>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
...@@ -77,63 +92,75 @@ ...@@ -77,63 +92,75 @@
{% for constraint in slice.slice_constraints %} {% for constraint in slice.slice_constraints %}
{% if constraint.WhichOneof('constraint')=='custom' %} {% if constraint.WhichOneof('constraint')=='custom' %}
<tr> <tr>
<td> <td>Custom</td>
Custom <td>{{ constraint.custom.constraint_type }}</td>
</td> <td>{{ constraint.custom.constraint_value }}</td>
<td>
{{ constraint.custom.constraint_type }}
</td>
<td>
<ul>
{{ constraint.custom.constraint_value }}
</ul>
</td>
</tr> </tr>
{% endif %} {% elif constraint.WhichOneof('constraint')=='endpoint_location' %}
{% if constraint.WhichOneof('constraint')=='endpoint_location' %}
<tr> <tr>
<td> <td>Endpoint Location</td>
Endpoint Location
</td>
<td> <td>
{{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{ {{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }} constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }}
</td> </td>
<td> <td>
<ul> {% if constraint.endpoint_location.location.WhichOneof('location')=='region' %}
{{ constraint.endpoint_location.location }} Region: {{ constraint.endpoint_location.location.region }}
</ul> {% elif constraint.endpoint_location.location.WhichOneof('location')=='gps_position' %}
Position (lat/long):
{{ constraint.endpoint_location.location.gps_position.latitude }} /
{{ constraint.endpoint_location.location.gps_position.longitude }}
{% endif %}
</td> </td>
</tr> </tr>
{% endif %} {% elif constraint.WhichOneof('constraint')=='endpoint_priority' %}
{% if constraint.WhichOneof('constraint')=='endpoint_priority' %}
<tr> <tr>
<td> <td>Endpoint Priority</td>
Endpoint Priority
</td>
<td> <td>
{{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{ {{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }} constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }}
</td> </td>
<td>{{ constraint.endpoint_priority.priority }}</td>
</tr>
{% elif constraint.WhichOneof('constraint')=='sla_availability' %}
<tr>
<td>SLA Availability</td>
<td>-</td>
<td> <td>
<ul> {{ constraint.sla_availability.num_disjoint_paths }} disjoint paths;
{{ constraint.endpoint_priority.priority }} {% if constraint.sla_availability.all_active %}all{% else %}single{% endif %}active
</ul>
</td> </td>
</tr> </tr>
{% else %}
<tr>
<td>-</td>
<td>-</td>
<td>{{ constraint }}</td>
</tr>
{% endif %} {% endif %}
{% if constraint.WhichOneof('constraint')=='sla_availability' %} {% 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 slice.slice_config.config_rules %}
{% if config.WhichOneof('config_rule') == 'custom' %}
<tr> <tr>
<td> <td>
SLA Availability {{ config.custom.resource_key }}
</td>
<td>
/
</td> </td>
<td> <td>
<ul> <ul>
<li> num_disjoint_paths: {{ constraint.sla_availability.num_disjoint_paths }} </li> {% for key, value in (config.custom.resource_value | from_json).items() %}
<li> all_active: {{ constraint.sla_availability.all_active }} </li> <li><b>{{ key }}:</b> {{ value }}</li>
{% endfor %}
</ul> </ul>
</td> </td>
</tr> </tr>
...@@ -141,75 +168,48 @@ ...@@ -141,75 +168,48 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </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 slice.slice_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>
<div class="row mb-2"> <div class="row mb-2">
<div class="col-sm-6"> <div class="col-sm-6">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">Service Id</th> <th scope="col">Service Id</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for services in services.services %} {% for services in services.services %}
<tr> <tr>
<td> <td>
<a href="{{ url_for('service.detail', service_uuid=services.service_id.service_uuid.uuid) }}"> <a href="{{ url_for('service.detail', service_uuid=services.service_id.service_uuid.uuid) }}">
{{ services.service_id.service_uuid.uuid }} {{ services.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"> <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="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"/> <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> </svg>
</a> </a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">Sub-slice</th> <th scope="col">Sub-slice</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for services in services.services %} {% for services in services.services %}
<tr> <tr>
<td> <td>
{{ services.sub_slice_ids|map(attribute='slice_uuid')|map(attribute='uuid')|join(', ') }} {{ services.sub_slice_ids|map(attribute='slice_uuid')|map(attribute='uuid')|join(', ') }}
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
\ No newline at end of file
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