diff --git a/src/webui/service/templates/opticalconfig/details.html b/src/webui/service/templates/opticalconfig/details.html
index 51ab5b5d6edd6c380477a8440ac9bff6b3f33906..f74538eed82789514a4ef6e52f12c6a4593cf0f9 100644
--- a/src/webui/service/templates/opticalconfig/details.html
+++ b/src/webui/service/templates/opticalconfig/details.html
@@ -14,145 +14,129 @@
limitations under the License.
-->
-
-
{% extends 'base.html' %}
{% block content %}
-
<h1>Optical Configurations</h1>
<div class="row">
-
{% if device %}
- <div class="col-sm-12">
- <span>Device ID:</span>
- <h5>{{config_id}}</h5>
- </div>
- <div class="col-sm-12">
- <div class="col-sm-12">
- <div class="row mb-3 ">
-
- <div class="col-sm-3">
- <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('opticalconfig.home') }}'">
- <i class="bi bi-box-arrow-in-left"></i>
- Back to device list
- </button>
+ <div class="col-sm-12">
+ <span>Device ID:</span>
+ <h5>{{config_id}}</h5>
+ </div>
+ <div class="col-sm-12">
+ <div class="col-sm-12">
+ <div class="row mb-3 ">
+ <div class="col-sm-3">
+ <button type="button" class="btn btn-success" onclick="window.location.href='{{ url_for('opticalconfig.home') }}'">
+ <i class="bi bi-box-arrow-in-left"></i>
+ Back to device list
+ </button>
+ </div>
+ <div class="col-sm-3">
+ <!-- <button type="button" class="btn btn-danger"><i class="bi bi-x-square"></i>Delete device</button> -->
+ <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+ <i class="bi bi-x-square"></i>
+ Delete Optical Config
+ </button>
+ </div>
</div>
- <div class="col-sm-3">
- <!-- <button type="button" class="btn btn-danger"><i class="bi bi-x-square"></i>Delete device</button> -->
- <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
- <i class="bi bi-x-square"></i>
- Delete Optical Config
- </button>
+ </div>
+ <div class="col-sm-12">
+ <span>Device Name:</span>
+ <span>{{device_name}}</span>
</div>
</div>
- </div>
- <div class="col-sm-12">
- <span>Device Name:</span>
- <span>{{device_name}}</span>
- </div>
-
- </div>
-
- {% if type == 'optical-transponder' %}
- <table class="table table-striped table-hover">
- <thead>
- <tr>
- <th scope="col">channel name</th>
- <th scope="col">Frequency</th>
- <th scope="col">Target Output Power</th>
- <th scope="col">Operational Mode</th>
- <th scope="col">Line Port</th>
- <th scope="col">Channel Status</th>
- </tr>
- </thead>
- <tbody>
-
- {% for channel in device %}
- <tr style="background-color:{%if channel.status == 'DISABLED' %} gray {% endif %};">
- <td>{{channel.name.index}}</td>
- <td>{{channel.frequency}}</td>
- <td>{{channel.targetOutputPower}}</td>
- <td>{{channel.operationalMode}}</td>
- <td>{{channel.line_port}}</td>
- <td>{{channel.status}}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- {% elif type == 'openroadm' %}
-
- <table class="table table-striped table-hover">
- <thead>
- <tr>
- <th scope="col"> name</th>
- <th scope="col"> type</th>
- <th scope="col">administrative state</th>
- <th scope="col">circuit pack name</th>
- <th scope="col">port</th>
- <th scope="col">interface list</th>
- <th scope="col">frequency</th>
- <th scope="col">width</th>
- </tr>
- </thead>
- <tbody>
-
- {% for channel in device %}
- <tr style="background-color:{%if channel.status == 'DISABLED' %} gray {% endif %};">
- <td>{{channel.name}}</td>
- <td>{{channel.type}}</td>
- <td>{{channel.administrative_state}}</td>
- <td> {{channel.circuit_pack_name}}</td>
- <td>{{channel.port}}</td>
- <td>{{channel.interface_list}}</td>
- <td> {{channel.frequency}}</td>
- <td> {{channel.width}}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- {% else %}
- <table class="table table-striped table-hover">
- <thead>
- <tr>
- <th scope="col">Channel Index</th>
- <th scope="col">Optical Band Parent</th>
- <th scope="col">Band Name</th>
- <th scope="col">Lower Frequency</th>
- <th scope="col">Upper Frequency</th>
- <th scope="col">type</th>
- <th scope="col"> Source Port</th>
- <th scope="col">Destination Port</th>
- <th scope="col">Channel Status </th>
-
- </tr>
- </thead>
- <tbody>
-
- {% for channel in device %}
- <tr>
- <td>{{channel.channel_index}}</td>
- <td>{{channel.optical_band_parent}}</td>
- <td> {{channel.band_name}}</td>
- <td>{{channel.lower_frequency}}</td>
- <td>{{channel.upper_frequency}}</td>
- <td> {{channel.type}}</td>
- <td>{{channel.src_port}}</td>
- <td>{{channel.dest_port}}</td>
- <td> {{channel.status}}</td>
-
- </tr>
- {% endfor %}
-
- </tbody>
- </table>
-
- {% endif%}
-
-</div>
+ {% if type == 'optical-transponder' %}
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">channel name</th>
+ <th scope="col">Frequency</th>
+ <th scope="col">Target Output Power</th>
+ <th scope="col">Operational Mode</th>
+ <th scope="col">Line Port</th>
+ <th scope="col">Channel Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for channel in device %}
+ <tr style="background-color:{%if channel.status == 'DISABLED' %} gray {% endif %};">
+ <td>{{channel.name.index}}</td>
+ <td>{{channel.frequency}}</td>
+ <td>{{channel.targetOutputPower}}</td>
+ <td>{{channel.operationalMode}}</td>
+ <td>{{channel.line_port}}</td>
+ <td>{{channel.status}}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ {% elif type == 'openroadm' %}
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col"> name</th>
+ <th scope="col"> type</th>
+ <th scope="col">administrative state</th>
+ <th scope="col">circuit pack name</th>
+ <th scope="col">port</th>
+ <th scope="col">interface list</th>
+ <th scope="col">frequency</th>
+ <th scope="col">width</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for channel in device %}
+ <tr style="background-color:{%if channel.status == 'DISABLED' %} gray {% endif %};">
+ <td>{{channel.name}}</td>
+ <td>{{channel.type}}</td>
+ <td>{{channel.administrative_state}}</td>
+ <td>{{channel.circuit_pack_name}}</td>
+ <td>{{channel.port}}</td>
+ <td>{{channel.interface_list}}</td>
+ <td>{{channel.frequency}}</td>
+ <td>{{channel.width}}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ {% else %}
+ <table class="table table-striped table-hover">
+ <thead>
+ <tr>
+ <th scope="col">Channel Index</th>
+ <th scope="col">Optical Band Parent</th>
+ <th scope="col">Band Name</th>
+ <th scope="col">Lower Frequency</th>
+ <th scope="col">Upper Frequency</th>
+ <th scope="col">type</th>
+ <th scope="col">Source Port</th>
+ <th scope="col">Destination Port</th>
+ <th scope="col">Channel Status </th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for channel in device %}
+ <tr>
+ <td>{{channel.channel_index}}</td>
+ <td>{{channel.optical_band_parent}}</td>
+ <td>{{channel.band_name}}</td>
+ <td>{{channel.lower_frequency}}</td>
+ <td>{{channel.upper_frequency}}</td>
+ <td>{{channel.type}}</td>
+ <td>{{channel.src_port}}</td>
+ <td>{{channel.dest_port}}</td>
+ <td>{{channel.status}}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ {% endif%}
+ </div>
{% else %}
<div class="col">