Skip to content
Snippets Groups Projects
Commit 2d1eb2fc authored by longllu's avatar longllu
Browse files

WebUI component 

- Adding slice page
- Format constraints
parent 2db5eda7
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/slice/routes.py
+ 6
− 4
View file @ 2d1eb2fc
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
# #
import grpc import grpc
from flask import current_app, redirect, render_template, Blueprint, flash, session, url_for from flask import current_app, redirect, render_template, Blueprint, flash, session, url_for
from common.proto.context_pb2 import ContextId, Slice, SliceId, SliceList, Connection from common.proto.context_pb2 import ContextId, Slice, SliceId, SliceList, Connection, SliceStatusEnum
from context.client.ContextClient import ContextClient from context.client.ContextClient import ContextClient
#from slice.client.SliceClient import SliceClient #from slice.client.SliceClient import SliceClient
...@@ -48,7 +48,7 @@ def home(): ...@@ -48,7 +48,7 @@ def home():
slices = [] slices = []
context_not_found = True context_not_found = True
context_client.close() context_client.close()
return render_template('slice/home.html',slices=slices, context_not_found=context_not_found) return render_template('slice/home.html',slices=slices, context_not_found=context_not_found, sse=SliceStatusEnum)
# #
#@slice.route('add', methods=['GET', 'POST']) #@slice.route('add', methods=['GET', 'POST'])
...@@ -68,16 +68,18 @@ def detail(slice_uuid: str): ...@@ -68,16 +68,18 @@ def detail(slice_uuid: str):
request: SliceId = SliceId() request: SliceId = SliceId()
request.slice_uuid.uuid = slice_uuid request.slice_uuid.uuid = slice_uuid
request.context_id.context_uuid.uuid = context_uuid request.context_id.context_uuid.uuid = context_uuid
req = ContextId()
req.context_uuid.uuid = context_uuid
try: try:
context_client.connect() context_client.connect()
response: Slice = context_client.GetSlice(request) response: Slice = context_client.GetSlice(request)
#services: Service = context_client.ListServices(request) services = context_client.ListServices(req)
context_client.close() context_client.close()
except Exception as e: except Exception as e:
flash('The system encountered an error and cannot show the details of this slice.', 'warning') flash('The system encountered an error and cannot show the details of this slice.', 'warning')
current_app.logger.exception(e) current_app.logger.exception(e)
return redirect(url_for('slice.home')) return redirect(url_for('slice.home'))
return render_template('slice/detail.html', slice=response) return render_template('slice/detail.html', slice=response, sse=SliceStatusEnum, services=services)
# #
#@slice.get('<path:slice_uuid>/delete') #@slice.get('<path:slice_uuid>/delete')
#def delete(slice_uuid: str): #def delete(slice_uuid: str):
......
src/webui/service/templates/service/detail.html
+ 60
− 3
View file @ 2d1eb2fc
...@@ -63,9 +63,12 @@ ...@@ -63,9 +63,12 @@
<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" class="bi bi-eye" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
<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"/> class="bi bi-eye" viewBox="0 0 16 16">
<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="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> </svg>
</a> </a>
</td> </td>
...@@ -79,13 +82,18 @@ ...@@ -79,13 +82,18 @@
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">Kind</th>
<th scope="col">Type</th> <th scope="col">Type</th>
<th scope="col">Value</th> <th scope="col">Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for constraint in service.service_constraints %} {% for constraint in service.service_constraints %}
{% if constraint.WhichOneof('constraint')=='custom' %}
<tr> <tr>
<td>
Custom
</td>
<td> <td>
{{ constraint.custom.constraint_type }} {{ constraint.custom.constraint_type }}
</td> </td>
...@@ -95,6 +103,55 @@ ...@@ -95,6 +103,55 @@
</ul> </ul>
</td> </td>
</tr> </tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='endpoint_location' %}
<tr>
<td>
Endpoint Location
</td>
<td>
{{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }}
</td>
<td>
<ul>
{{ constraint.endpoint_location.location }}
</ul>
</td>
</tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='endpoint_priority' %}
<tr>
<td>
Endpoint Priority
</td>
<td>
{{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }}
</td>
<td>
<ul>
{{ constraint.endpoint_priority.priority }}
</ul>
</td>
</tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='sla_availability' %}
<tr>
<td>
SLA Availability
</td>
<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>
</tr>
{% endif %}
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
......
src/webui/service/templates/slice/detail.html
+ 139
− 38
View file @ 2d1eb2fc
...@@ -17,12 +17,20 @@ ...@@ -17,12 +17,20 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<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="col-sm-3">
<button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('slice.home') }}'">
<i class="bi bi-box-arrow-in-left"></i>
Back to slice list
</button>
</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> {{ slice.slice_status.slice_status }}<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">
...@@ -56,59 +64,152 @@ ...@@ -56,59 +64,152 @@
</table> </table>
</div> </div>
</div> </div>
<b>Constraints:</b> <b>Constraints:</b>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Kind</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
{% for constraint in slice.slice_constraints %}
{% if constraint.WhichOneof('constraint')=='custom' %}
<tr>
<td>
Custom
</td>
<td>
{{ constraint.custom.constraint_type }}
</td>
<td>
<ul>
{{ constraint.custom.constraint_value }}
</ul>
</td>
</tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='endpoint_location' %}
<tr>
<td>
Endpoint Location
</td>
<td>
{{ constraint.endpoint_location.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_location.endpoint_id.endpoint_uuid.uuid }}
</td>
<td>
<ul>
{{ constraint.endpoint_location.location }}
</ul>
</td>
</tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='endpoint_priority' %}
<tr>
<td>
Endpoint Priority
</td>
<td>
{{ constraint.endpoint_priority.endpoint_id.device_id.device_uuid.uuid }} / {{
constraint.endpoint_priority.endpoint_id.endpoint_uuid.uuid }}
</td>
<td>
<ul>
{{ constraint.endpoint_priority.priority }}
</ul>
</td>
</tr>
{% endif %}
{% if constraint.WhichOneof('constraint')=='sla_availability' %}
<tr>
<td>
SLA Availability
</td>
<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>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<b>Configurations:</b>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th scope="col">Type</th> <th scope="col">Key</th>
<th scope="col">Value</th> <th scope="col">Value</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for constraint in slice.slice_constraints %} {% for config in slice.slice_config.config_rules %}
{% if config.WhichOneof('config_rule') == 'custom' %}
<tr> <tr>
<td> <td>
{{ constraint.custom.constraint_type }} {{ config.custom.resource_key }}
</td> </td>
<td> <td>
<ul> <ul>
{{ constraint.custom.constraint_value }} {% for key, value in (config.custom.resource_value | from_json).items() %}
<li><b>{{ key }}:</b> {{ value }}</li>
{% endfor %}
</ul> </ul>
</td> </td>
</tr> </tr>
{% endif %}
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<!-- <div class="row mb-2">
<table class="table table-striped table-hover"> <div class="col-sm-6">
<thead> <table class="table table-striped table-hover">
<tr> <thead>
<th scope="col">Service Id</th> <tr>
<th scope="col">Sub-slice</th> <th scope="col">Service Id</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for connections in connections.connections %} {% for services in services.services %}
<tr> <tr>
<td> <td>
{{ connections.connection_id.connection_uuid.uuid }} <a href="{{ url_for('service.detail', service_uuid=services.service_id.service_uuid.uuid) }}">
</td> {{ services.service_id.service_uuid.uuid }}
<td> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
{{ connections.sub_service_ids|map(attribute='service_uuid')|map(attribute='uuid')|join(', ') }} <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"/>
</td> <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>
{% for i in range(connections.path_hops_endpoint_ids|length) %} </a>
<td> </td>
{{ connections.path_hops_endpoint_ids[i].device_id.device_uuid.uuid }} / {{ </tr>
connections.path_hops_endpoint_ids[i].endpoint_uuid.uuid }} {% endfor %}
</td> </tbody>
{% endfor %} </table>
</div>
<div class="col-sm-6">
</tr> <table class="table table-striped table-hover">
{% endfor %} <thead>
</tbody> <tr>
</table> --> <th scope="col">Sub-slice</th>
</tr>
</thead>
<tbody>
{% for services in services.services %}
<tr>
<td>
{{ services.sub_slice_ids|map(attribute='slice_uuid')|map(attribute='uuid')|join(', ') }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
src/webui/service/templates/slice/home.html
+ 15
− 5
View file @ 2d1eb2fc
...@@ -19,6 +19,14 @@ ...@@ -19,6 +19,14 @@
{% block content %} {% block content %}
<h1>Slice</h1> <h1>Slice</h1>
<div class="row">
<div class="col">
{{ slices | length }} slices found in context <i>{{ session['context_uuid'] }}</i>
</div>
</div>
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
...@@ -35,15 +43,17 @@ ...@@ -35,15 +43,17 @@
{% for slice in slices %} {% for slice in slices %}
<tr> <tr>
<td> <td>
<!-- <a href="{{ url_for('slice.detail', slice_uuid=slice.slice_id.slice_uuid.uuid) }}"> --> {{ slice.slice_id.slice_uuid.uuid }}
{{ slice.slice_id.slice_uuid.uuid }}
<!-- </a> -->
</td> </td>
<td> <td>
{{ slice.slice_endpoint_ids }} {% for i in range(slice.slice_endpoint_ids|length) %}
<ul>
<li> {{ slice.slice_endpoint_ids[i].device_id.device_uuid.uuid }} / {{ slice.slice_endpoint_ids[i].endpoint_uuid.uuid }} </li>
</ul>
{% endfor %}
</td> </td>
<td> <td>
{{ slice.slice_status }} {{ sse.Name(slice.slice_status.slice_status).replace('SLICESTATUS_', '') }}
</td> </td>
<td> <td>
<a href="{{ url_for('slice.detail', slice_uuid=slice.slice_id.slice_uuid.uuid) }}"> <a href="{{ url_for('slice.detail', slice_uuid=slice.slice_id.slice_uuid.uuid) }}">
......
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