(WIP)ft: DeviceCtl GUI refactor

src/django_devicectl/rest/serializers/devicectl.py

@@ -242,6 +242,7 @@ def get_virtual_port_name(self, port):
 @register
 class VirtualPort(TagMixin, ModelSerializer):
     physical_ports = serializers.SerializerMethodField()
+    logical_port = LogicalPort()
     device = serializers.SerializerMethodField()
     port = serializers.SerializerMethodField()
     tags = serializers.SerializerMethodField()
@@ -262,7 +263,7 @@ class Meta:
         ]
 
     def get_physical_ports(self, obj):
-        return InlinePhysicalPort(obj.physical_ports.all(), many=True).data
+        return PhysicalPort(obj.physical_ports.all(), many=True).data
 
     def get_device(self, obj):
         return obj.device.id

src/django_devicectl/static/devicectl/v2/devicectl.js

@@ -27,14 +27,6 @@ $ctl.application.Devicectl = $tc.extend(
         return new $ctl.application.Devicectl.DeviceDetails();
       });
 
-      this.tool("logical_ports", () => {
-        return new $ctl.application.Devicectl.LogicalPorts();
-      });
-
-      this.tool("physical_ports", () => {
-        return new $ctl.application.Devicectl.PhysicalPorts();
-      });
-
       this.tool("virtual_ports", () => {
         return new $ctl.application.Devicectl.VirtualPorts();
       });
@@ -89,9 +81,7 @@ $ctl.application.Devicectl = $tc.extend(
 
       $('#ports-tab').on('show.bs.tab', () => {
         $('[data-element=button_create_facility]').hide();
-        $('[data-component=virtual_ports').appendTo($("#device-detail"));
-        $('[data-component=logical_ports').appendTo($("#device-detail"));
-        $('[data-component=physical_ports').appendTo($("#device-detail"));
+        $('[data-component=virtual_ports').appendTo($("#allports"));
       });
 
       $('#tab-overview').on('show.bs.tab', () => {
@@ -101,9 +91,6 @@ $ctl.application.Devicectl = $tc.extend(
       $($ctl).trigger("init_tools", [this]);
 
       this.$t.devices.activate();
-      this.$t.logical_ports.activate();
-      this.$t.physical_ports.activate();
-      this.$t.virtual_ports.activate();
 
       this.sync();
 
@@ -187,8 +174,6 @@ $ctl.application.Devicectl.DeviceSelect = $tc.extend(
 
     sync : function() {
       $ctl.devicectl.$t.virtual_ports.sync();
-      $ctl.devicectl.$t.logical_ports.sync();
-      $ctl.devicectl.$t.physical_ports.sync();
       $ctl.devicectl.$t.device.show_device(this.element.val());
     },
 
@@ -1391,6 +1376,10 @@ $ctl.application.Devicectl.VirtualPorts = $tc.extend(
         if (!grainy.check(data.grainy, "d")) {
           button_delete.element.hide();
         }
+
+        row.click(() =>{
+          new $ctl.application.Devicectl.PortsViewInformation(data);
+        });
       };
 
       this.$w.list.format_request_url = (url) => {
@@ -1444,6 +1433,88 @@ $ctl.application.Devicectl.VirtualPorts = $tc.extend(
   $ctl.application.Tool
 );
 
+$ctl.application.Devicectl.PortsViewInformation = $tc.extend(
+  "PortsViewInformation",
+  {
+    PortsViewInformation: function (data) {
+      var title = "Virtual Ports - " + data.display_name;
+      var element = $('<div>');
+
+      var dataContent = `
+        <div class="row mb-3">
+        <label class="form-label">Name</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.display_name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+        <label class="form-label">Logical Port</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.logical_port_name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+        <label class="form-label">VLAN ID</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.vlan_id}" readonly/>
+        </div>
+
+        <h5 class="modal-title">Logical Port - ${data.logical_port.name}</h5>
+        <br>
+        <div class="row mb-3">
+        <label class="form-label">Name</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.logical_port.name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+        <label class="form-label">Channel</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.logical_port.channel}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+        <label class="form-label">Trunk</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.logical_port.trunk}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+        <label class="form-label">Description</label>
+        <input type="text" style="background-color: var(--bs-body-bg);" value="${data.logical_port.description}" readonly/>
+        </div>
+
+        <h5 class="modal-title">Physical Ports</h5>
+
+      `;
+
+      data.physical_ports.forEach(function(physical_port, index){
+        dataContent += `
+        <h5 class="modal-title">Physical Port - ${physical_port.display_name}</h5>
+        <br>
+        <div class="row mb-3">
+            <label class="form-label">Name</label>
+            <input type="text" style="background-color: var(--bs-body-bg);" value="${physical_port.name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+            <label class="form-label">Device</label>
+            <input type="text" style="background-color: var(--bs-body-bg);" value="${physical_port.device_name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+            <label class="form-label">Logical Port</label>
+            <input type="text" style="background-color: var(--bs-body-bg);" value="${physical_port.logical_port_name}" readonly/>
+        </div>
+
+        <div class="row mb-3">
+            <label class="form-label">Description</label>
+            <input type="text" style="background-color: var(--bs-body-bg);" value="${physical_port.description}" readonly/>
+        </div>
+        `;
+      })
+      element.append(dataContent);
+
+      this.Modal("no_button_lg", title, element);
+  }
+},
+  $ctl.application.Modal
+);
+
 $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
   "ModalVirtualPort",
   {
@@ -1453,6 +1524,7 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
       var form = this.form = new twentyc.rest.Form(
         $ctl.template("form_virtual_port")
       );
+      var LogicalPortsList = [];
 
       var logical_port_select = this.logical_port_select = new twentyc.rest.Select(
         form.element.find('select[name="logical_port"]')
@@ -1465,14 +1537,141 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
       logical_port_select.load().then(() => {
         if (virtual_port) { logical_port_select.element.val(virtual_port.logical_port) }
       });
+
+      console.log(virtual_port)
+
+      $.ajax({
+        url: `/api/facility/digital_reality/${fullctl.devicectl.facility_slug()}/logical_ports/`,
+        type: 'GET',
+        success: function(response) {
+            logical_ports_data = response.data
+            response.data.forEach(function(data) {
+                LogicalPortsList.push({
+                  logical_ports_name: data.display_name
+              });
+          });
+        },
+        error: function(xhr, status, error) {
+            console.error(xhr.responseText);
+        },
+        async: false
+      });
+      // channel
+      var logical_port_channel = form.element.find('input[name="logical_port_channel"]');
+      if (virtual_port) { 
+        logical_port_channel.val(virtual_port.logical_port.channel) 
+      }
+
+      // trunk
+      var logical_port_trunk = form.element.find('input[name="logical_port_trunk"]')
+      if (virtual_port) { 
+        logical_port_trunk.val(virtual_port.logical_port.trunk) 
+      }
+
+      // description
+      var logical_port_description = form.element.find('input[name="logical_port_description"]');
+      if (virtual_port) { 
+        logical_port_description.val(virtual_port.logical_port.description)
+      }
       this.virtual_port = virtual_port;
 
+      physical_ports = form.element.find('.physical-ports-container');
+
+      // Creation of a Port
+      if (!virtual_port) {
+        var phyical_data_content = `
+        <div class="row mb-3">
+        <div class="col-12" data-api-submit="yes">
+          <label for="physical_port-name" class="form-label">Name</label>
+          <input type="text" class="form-control" id="physical_port-name" name="physical_port_name" />
+        </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-12" data-api-submit="yes">
+            <label for="physical_port-device" class="form-label">Device</label>
+            <span class="modal-control">
+              <input type="text" class="form-control" id="device-name" name="physical_port_device_name" disabled />
+              <input type="hidden" name="device" id="device">
+            </span>
+          </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-12" data-api-submit="yes">
+            <label for="physical_port-logical_port" class="form-label">Logical Port</label>
+            <span class="modal-control">
+            <select 
+              data-api-action="" class="form-control" id="physical_port-logical_port" name="physical_logical_port">
+            <select>
+            </span>
+          </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-12" data-api-submit="yes">
+            <label for="physical_port-description" class="form-label">Description</label>
+            <input type="text" class="form-control" id="physical_port-description" name="physical_port_description" />
+          </div>
+        </div>
+        `
+        physical_ports.append(phyical_data_content)
+        var logical_ports_select = form.element.find('#physical_port-logical_port');
+        logical_ports_select.append($('<option>').attr('value', '').text('Create matching logical port'));
+
+        $.each(LogicalPortsList, function(index, logical_port) {
+          var option = $('<option>').attr('value', logical_port.logical_ports_name).text(logical_port.logical_ports_name);
+          logical_ports_select.append(option);
+        });
+      }
+
       if (virtual_port) {
-        title = "Edit " + virtual_port.display_name;
+        title = "Edit Virtual Port" + virtual_port.display_name;
         form.method = "PUT"
         form.form_action = virtual_port.id;
         form.fill(virtual_port);
 
+        virtual_port.physical_ports.forEach(function(port, index){
+          var physicaldataContent = `
+            <div class="row mb-3">
+              <div class="col-12" data-api-submit="yes">
+                <label for="physical_port-name" class="form-label">Physical Port Name</label>
+                <input type="text" class="form-control" id="physical_port-name" name="physical_port_name_${index}" value="${port.display_name}"/>
+              </div>
+            </div>
+            <div class="row mb-3">
+              <div class="col-12" data-api-submit="yes">
+                <label for="physical_port-device" class="form-label">Device</label>
+                <input type="text" class="form-control" name="physical_port_device_name_${index}" id="device" value="${port.device_name}" disabled>
+              </div>
+            </div>
+            <div class="row mb-3">
+              <div class="col-12" data-api-submit="yes">
+                <label for="physical_port-logical_port_${index}" class="form-label">Logical Port</label>
+                <span class="modal-control">
+                <select 
+                  data-api-action="" class="form-control" id="physical_port-logical_port_${index}" name="physical_logical_port_${index}">
+                <select>
+                </span>
+              </div>
+            </div>
+            <div class="row mb-3">
+              <div class="col-12" data-api-submit="yes">
+                <label for="physical_port-description" class="form-label">Description</label>
+                <input type="text" class="form-control" id="physical_port-description" name="physical_port_description_${index}" value="${port.description}" />
+              </div>
+            </div>
+            <hr style="border-color: #000; border-width: 2px;">
+          `
+          physical_ports.append(physicaldataContent)
+
+          var logical_ports_select = form.element.find(`#physical_port-logical_port_${index}`);
+          logical_ports_select.append($('<option>').attr('value', '').text(`${port.logical_port_name}`));
+
+          $.each(LogicalPortsList, function(index, logical_port) {
+            if (port.logical_port_name !== logical_port.logical_ports_name) {
+              var option = $('<option>').attr('value', logical_port.logical_ports_name).text(logical_port.logical_ports_name);
+              logical_ports_select.append(option);
+            }
+          })
+        });
 
         form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () {
           if (!grainy.check(virtual_port.grainy + "." + $(this).attr("name"), "u")) {
@@ -1483,6 +1682,42 @@ $ctl.application.Devicectl.ModalVirtualPort = $tc.extend(
 
         $(this.form).on("api-write:before", (ev, e, payload) => {
           payload["id"] = virtual_port.id;
+          payload["physical_ports"] = []
+          payload.logical_port_data = {
+            channel: payload.logical_port_channel,
+            description: payload.logical_port_description,
+            name: payload.logical_port_name,
+            trunk: payload.logical_port_trunk
+          }
+          delete payload.logical_port_channel;
+          delete payload.logical_port_description;
+          delete payload.logical_port_name;
+          delete payload.logical_port_trunk;
+
+          var count = 0;
+          for (var key in payload) {
+              // Check if the key starts with "physical"
+              if (key.startsWith("physical")) {
+                  // Increment the count
+                  count++;
+              }
+          }
+          iterate_times = count / 4
+
+          for (var i = 0; i < iterate_times; i++) {
+            payload.physical_ports.push({
+              name: payload[`physical_port_name_${i}`],
+              device_name: payload[`physical_port_device_name_${i}`],
+              logical_port: payload[`physical_logical_port_${i}`],
+              description: payload[`physical_port_description_${i}`],
+            })
+
+            delete payload[`physical_port_name_${i}`];
+            delete payload[`physical_port_device_name_${i}`];
+            delete payload[`physical_logical_port_${i}`];
+            delete payload[`physical_port_description_${i}`];
+          }
+
         });
       }
 

src/django_devicectl/templates/devicectl/v2/base.html

@@ -165,9 +165,6 @@
     </div>
     <div class="device-container" style="display:none">
       {% include "devicectl/v2/tool/device/main.html" %}
-      {% include "devicectl/v2/tool/virtual_ports/main.html" %}
-      {% include "devicectl/v2/tool/logical_ports/main.html" %}
-      {% include "devicectl/v2/tool/physical_ports/main.html" %}
     </div>
   </div>
 </div>

src/django_devicectl/templates/devicectl/v2/tool/device/main.html

@@ -24,6 +24,9 @@
         <li class="nav-item" role="presentation">
           <a class="nav-link" id="history-tab" data-bs-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
         </li>
+        <li class="nav-item" role="presentation">
+          <a class="nav-link" id="allports-tab" data-bs-toggle="tab" href="#allports" role="tab" aria-controls="allports" aria-selected="false">Ports</a>
+        </li>
 
       </ul>
 
@@ -56,6 +59,10 @@
         <div class="tab-pane fade" id="history" role="tabpanel" data-element="config_history_container" aria-labelledby="history-tab">
 
         </div>
+        <!-- Ports Tab -->
+        <div class="tab-pane fade" id="allports" role="tabpanel" data-element="all_ports_container" aria-labelledby="allports-tab">
+
+        </div>
 
       </div>
 
@@ -71,6 +78,7 @@
     {% include "devicectl/v2/tool/device/config-current.html" %}
     {% include "devicectl/v2/tool/device/config-reference.html" %}
     {% include "devicectl/v2/tool/device/reports.html" %}
+    {% include "devicectl/v2/tool/device/ports.html" %}
 
   </div>
 </div>

src/django_devicectl/templates/devicectl/v2/tool/device/ports.html

@@ -0,0 +1,4 @@
+{% load static i18n %}
+<div data-template="all_ports" >
+  {% include "devicectl/v2/tool/virtual_ports/main.html" %}
+</div>