From 8ed246c1117bdf88eb7c5bfb36cada73f647ce10 Mon Sep 17 00:00:00 2001 From: Genza999 Date: Fri, 26 Apr 2024 06:28:56 +0300 Subject: [PATCH 1/6] ft: move ports view and create ports tab --- .../static/devicectl/v2/devicectl.js | 495 +----------------- .../static/devicectl/v2/ports/ports.js | 0 .../templates/devicectl/v2/base.html | 3 - .../devicectl/v2/tool/device/main.html | 8 + .../devicectl/v2/tool/device/ports.html | 44 ++ 5 files changed, 69 insertions(+), 481 deletions(-) create mode 100644 src/django_devicectl/static/devicectl/v2/ports/ports.js create mode 100644 src/django_devicectl/templates/devicectl/v2/tool/device/ports.html diff --git a/src/django_devicectl/static/devicectl/v2/devicectl.js b/src/django_devicectl/static/devicectl/v2/devicectl.js index 48945a27..39eef200 100644 --- a/src/django_devicectl/static/devicectl/v2/devicectl.js +++ b/src/django_devicectl/static/devicectl/v2/devicectl.js @@ -27,18 +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(); - }); - $(this.$c.toolbar.$e.button_create_facility).click(() => { fullctl.devicectl.page('facilities'); fullctl.devicectl.$t.settings.create_facility(); @@ -100,11 +88,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(); this.autoload_page(); @@ -117,6 +100,7 @@ $ctl.application.Devicectl = $tc.extend( case "current-config": case "reference-config": case "history": + case "allports": page = "ports"; } @@ -186,9 +170,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()); }, @@ -547,6 +528,12 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( ) }); + // create ports widget + this.widget("allports", ($e) => { + return new $ctl.application.Devicectl.ConfigLoader( + this.template("all_ports", this.$e.all_ports_container) + ) + }); // url formatting to replace /0/ with // across // all widgets @@ -572,6 +559,11 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( return url.replace("/0/", "/"+this.device_id+"/"); }; + this.$w.allports.format_request_url = (url) => { + console.log("URL", url, url.replace("/0/", "/"+this.device_id+"/")) + return url.replace("/0/", "/"+this.device_id+"/"); + }; + // set up config history listing widget this.$w.config_history.formatters.error_message = (value, data) => { @@ -623,6 +615,11 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( this.$w.reference_config.load(); }); + // upon showing the reference-config tab, load the reference config + $('#allports-tab').on('show.bs.tab', () => { + this.$w.allports.load(); + }); + }, show_device : function(device_id) { @@ -1042,464 +1039,6 @@ $ctl.application.Devicectl.ModalDevice = $tc.extend( ); - -// LOGICAL PORTS - -$ctl.application.Devicectl.LogicalPorts = $tc.extend( - "LogicalPorts", - { - LogicalPorts: function () { - this.Tool("logical_ports"); - }, - init: function () { - // v2 - create delete selected button - this.delete_selected_button = this.$t.button_delete_selected; - // v2 - create SelectionList - this.widget("list", ($e) => { - return new $ctl.widget.SelectionList( - this.template("list", this.$e.body), - $(this.delete_selected_button) - ); - }) - - this.$w.list.format_request_url = (url) => { - return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); - }; - - - this.$w.list.formatters.row = (row, data) => { - row.find('a[data-action="edit_logical_port"]').click(() => { - var logical_port = row.data("apiobject"); - new $ctl.application.Devicectl.ModalLogicalPort(logical_port); - }).each(function () { - if (!grainy.check(data.grainy + ".?", "u")) { - $(this).hide() - } - }); - - var button_delete = new twentyc.rest.Button( - row.find('a[data-element="delete_logical_port"]') - ); - - button_delete.format_request_url = (url) => { - return url.replace("/0/", "/" + data.id + "/"); - }; - - $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); - - if (!grainy.check(data.grainy, "d")) { - button_delete.element.hide(); - } - - - }; - - this.initialize_sortable_headers("name"); - - $(this.$w.list).on("api_callback_remove:after", () => { - $ctl.devicectl.sync(); - }); - }, - - menu: function () { - var menu = this.Tool_menu(); - menu.find('[data-element="button_add_logical_port"]').click(() => { - return new $ctl.application.Devicectl.ModalLogicalPort(); - }); - - // v2 - add/set-up delete selected button - $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_logical_port"]')); - - $(this.delete_selected_button).click(() => { - if (confirm("Remove selected Logical Ports?")) { - this.$w.list.delete_selected_list(); - } - }); - - return menu; - }, - - sync: function () { - let namespace = `logical_port.${$ctl.org.id}` - - if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { - return; - } - - if (grainy.check(namespace, "r")) { - this.show(); - this.apply_ordering(); - this.$w.list.load(); - - // v2 - set up view API button - this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( - "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" - ) - - this.$e.menu.find('[data-element="button_add_logical_port"]').grainy_toggle(namespace, "c") - - } else { - this.hide(); - } - } - }, - $ctl.application.Tool -); - -$ctl.application.Devicectl.ModalLogicalPort = $tc.extend( - "ModalLogicalPort", - { - ModalLogicalPort: function (logical_port) { - var modal = this; - var title = "Add LogicalPort" - var form = this.form = new twentyc.rest.Form( - $ctl.template("form_logical_port") - ); - - this.logical_port = logical_port; - - if (logical_port) { - title = "Edit " + logical_port.display_name; - form.method = "PUT" - form.form_action = logical_port.id; - form.fill(logical_port); - - - form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { - if (!grainy.check(logical_port.grainy + "." + $(this).attr("name"), "u")) { - $(this).attr("disabled", true) - } - }); - - - $(this.form).on("api-write:before", (ev, e, payload) => { - payload["id"] = logical_port.id; - }); - } - - $(this.form).on("api-write:success", (ev, e, payload, response) => { - $ctl.devicectl.$t.logical_ports.$w.list.load(); - $ctl.devicectl.$t.physical_ports.$w.list.load(); - modal.hide(); - }); - - this.Modal("save_right", title, form.element); - form.wire_submit(this.$e.button_submit); - } - }, - $ctl.application.Modal -); - -// PHYSICAL PORTS - -$ctl.application.Devicectl.PhysicalPorts = $tc.extend( - "PhysicalPorts", - { - PhysicalPorts: function () { - this.Tool("physical_ports"); - }, - init: function () { - // v2 - create delete selected button - this.delete_selected_button = this.$t.button_delete_selected; - // v2 - create SelectionList - this.widget("list", ($e) => { - return new $ctl.widget.SelectionList( - this.template("list", this.$e.body), - $(this.delete_selected_button) - ); - }) - - this.$w.list.formatters.row = (row, data) => { - row.find('a[data-action="edit_physical_port"]').click(() => { - var physical_port = row.data("apiobject"); - new $ctl.application.Devicectl.ModalPhysicalPort(physical_port); - }).each(function () { - if (!grainy.check(data.grainy + ".?", "u")) { - $(this).hide() - } - }); - - var button_delete = new twentyc.rest.Button( - row.find('a[data-element="delete_physical_port"]') - ); - - button_delete.format_request_url = (url) => { - return url.replace("/0/", "/" + data.id + "/"); - }; - - $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); - - if (!grainy.check(data.grainy, "d")) { - button_delete.element.hide(); - } - }; - - this.$w.list.format_request_url = (url) => { - return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); - }; - - $(this.$w.list).on("api-delete:after", () => { - $ctl.devicectl.sync(); - }); - - this.initialize_sortable_headers("name"); - }, - - menu: function () { - var menu = this.Tool_menu(); - menu.find('[data-element="button_add_physical_port"]').click(() => { - return new $ctl.application.Devicectl.ModalPhysicalPort(); - }); - - $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_physical_port"]')); - $(this.delete_selected_button).click(() => { - if (confirm("Remove selected Physical Ports?")) { - this.$w.list.delete_selected_list(); - } - }); - - return menu; - }, - - sync: function () { - if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { - return; - } - - - let namespace = `physical_port.${$ctl.org.id}` - if (grainy.check(namespace, "r")) { - this.show(); - this.apply_ordering(); - this.$w.list.load(); - - // v2 - set up view API button - this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( - "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" - ) - - this.$e.menu.find('[data-element="button_add_physical_port"]').grainy_toggle(namespace, "c") - - } else { - this.hide(); - } - } - }, - $ctl.application.Tool -); - -$ctl.application.Devicectl.ModalPhysicalPort = $tc.extend( - "ModalPhysicalPort", - { - ModalPhysicalPort: function (physical_port) { - var modal = this; - var title = "Add PhysicalPort" - var form = this.form = new twentyc.rest.Form( - $ctl.template("form_physical_port") - ); - - var logical_port_select = this.logical_port_select = new twentyc.rest.Select( - form.element.find('select[name="logical_port"]') - ) - - logical_port_select.format_request_url = (url) => { - return url.replace("/fac_tag/", "/" + fullctl.devicectl.facility_slug() + "/"); - }; - - logical_port_select.load().then(() => { - if (physical_port) { logical_port_select.element.val(physical_port.logical_port) } - }); - this.physical_port = physical_port; - - if (physical_port) { - title = "Edit " + physical_port.display_name; - form.method = "PUT" - form.form_action = physical_port.id; - form.fill(physical_port); - - - form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { - if (!grainy.check(physical_port.grainy + "." + $(this).attr("name"), "u")) { - $(this).attr("disabled", true) - } - }); - - - $(this.form).on("api-write:before", (ev, e, payload) => { - payload["id"] = physical_port.id; - }); - } - - form.fill({ - device: fullctl.devicectl.device_id(), - device_name: fullctl.devicectl.device_name(), - }) - - $(this.form).on("api-write:success", (ev, e, payload, response) => { - $ctl.devicectl.$t.physical_ports.$w.list.load(); - $ctl.devicectl.$t.logical_ports.$w.list.load(); - modal.hide(); - }); - - this.Modal("save_right", title, form.element); - form.wire_submit(this.$e.button_submit); - } - }, - $ctl.application.Modal -); - - -// VIRTUAL PORTS - -$ctl.application.Devicectl.VirtualPorts = $tc.extend( - "VirtualPorts", - { - VirtualPorts: function () { - this.Tool("virtual_ports"); - }, - init: function () { - // v2 - create delete selected button - this.delete_selected_button = this.$t.button_delete_selected; - // v2 - create SelectionList - this.widget("list", ($e) => { - return new $ctl.widget.SelectionList( - this.template("list", this.$e.body), - $(this.delete_selected_button) - ); - }) - - this.$w.list.formatters.row = (row, data) => { - row.find('a[data-action="edit_virtual_port"]').click(() => { - var virtual_port = row.data("apiobject"); - new $ctl.application.Devicectl.ModalVirtualPort(virtual_port); - }).each(function () { - if (!grainy.check(data.grainy + ".?", "u")) { - $(this).hide() - } - }); - - var button_delete = new twentyc.rest.Button( - row.find('a[data-element="delete_virtual_port"]') - ); - - button_delete.format_request_url = (url) => { - return url.replace("/0/", "/" + data.id + "/"); - }; - - $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); - - if (!grainy.check(data.grainy, "d")) { - button_delete.element.hide(); - } - }; - - this.$w.list.format_request_url = (url) => { - return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); - }; - - this.initialize_sortable_headers("name"); - }, - - menu: function () { - let menu = this.Tool_menu(); - menu.find('[data-element="button_add_virtual_port"]').click(() => { - return new $ctl.application.Devicectl.ModalVirtualPort(); - }); - - // v2 - add/setup delete selected button - $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_virtual_port"]')); - $(this.delete_selected_button).click(() => { - if (confirm("Remove selected Virtual Ports?")) { - this.$w.list.delete_selected_list(); - } - }); - - return menu; - }, - - sync: function () { - let namespace = `virtual_port.${$ctl.org.id}` - - if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { - return; - } - - if (grainy.check(namespace, "r")) { - this.show(); - this.apply_ordering(); - this.$w.list.load(); - - // v2 - set up view API button - this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( - "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" - ) - - this.$e.menu.find('[data-element="button_add_virtual_port"]').grainy_toggle(namespace, "c") - - } else { - this.hide(); - } - } - }, - $ctl.application.Tool -); - -$ctl.application.Devicectl.ModalVirtualPort = $tc.extend( - "ModalVirtualPort", - { - ModalVirtualPort: function (virtual_port) { - var modal = this; - var title = "Add VirtualPort" - var form = this.form = new twentyc.rest.Form( - $ctl.template("form_virtual_port") - ); - - var logical_port_select = this.logical_port_select = new twentyc.rest.Select( - form.element.find('select[name="logical_port"]') - ) - - logical_port_select.format_request_url = (url) => { - return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); - }; - - logical_port_select.load().then(() => { - if (virtual_port) { logical_port_select.element.val(virtual_port.logical_port) } - }); - this.virtual_port = virtual_port; - - if (virtual_port) { - title = "Edit " + virtual_port.display_name; - form.method = "PUT" - form.form_action = virtual_port.id; - form.fill(virtual_port); - - - form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { - if (!grainy.check(virtual_port.grainy + "." + $(this).attr("name"), "u")) { - $(this).attr("disabled", true) - } - }); - - - $(this.form).on("api-write:before", (ev, e, payload) => { - payload["id"] = virtual_port.id; - }); - } - - $(this.form).on("api-write:success", (ev, e, payload, response) => { - $ctl.devicectl.$t.virtual_ports.$w.list.load(); - modal.hide(); - }); - - this.Modal("save_right", title, form.element); - form.wire_submit(this.$e.button_submit); - } - }, - $ctl.application.Modal -); - - - $(document).ready(function () { $ctl.devicectl = new $ctl.application.Devicectl(); }); diff --git a/src/django_devicectl/static/devicectl/v2/ports/ports.js b/src/django_devicectl/static/devicectl/v2/ports/ports.js new file mode 100644 index 00000000..e69de29b diff --git a/src/django_devicectl/templates/devicectl/v2/base.html b/src/django_devicectl/templates/devicectl/v2/base.html index 4308cfc0..c50280a8 100644 --- a/src/django_devicectl/templates/devicectl/v2/base.html +++ b/src/django_devicectl/templates/devicectl/v2/base.html @@ -165,9 +165,6 @@ diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/main.html b/src/django_devicectl/templates/devicectl/v2/tool/device/main.html index d0dc66ae..fef66f42 100644 --- a/src/django_devicectl/templates/devicectl/v2/tool/device/main.html +++ b/src/django_devicectl/templates/devicectl/v2/tool/device/main.html @@ -24,6 +24,9 @@ + @@ -56,6 +59,10 @@
+ +
+ +
@@ -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" %} diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html new file mode 100644 index 00000000..c8a19a38 --- /dev/null +++ b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html @@ -0,0 +1,44 @@ + + +{% load static i18n %} + \ No newline at end of file From f1a8673c26fea102ab49fe0ed39ff6e90acc39ff Mon Sep 17 00:00:00 2001 From: Genza999 Date: Fri, 26 Apr 2024 17:40:40 +0300 Subject: [PATCH 2/6] reset removed code --- .../static/devicectl/v2/devicectl.js | 485 +++++++++++++++++- .../devicectl/v2/tool/device/ports.html | 2 - 2 files changed, 480 insertions(+), 7 deletions(-) diff --git a/src/django_devicectl/static/devicectl/v2/devicectl.js b/src/django_devicectl/static/devicectl/v2/devicectl.js index 39eef200..7f53749e 100644 --- a/src/django_devicectl/static/devicectl/v2/devicectl.js +++ b/src/django_devicectl/static/devicectl/v2/devicectl.js @@ -27,6 +27,18 @@ $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(); + }); + $(this.$c.toolbar.$e.button_create_facility).click(() => { fullctl.devicectl.page('facilities'); fullctl.devicectl.$t.settings.create_facility(); @@ -88,6 +100,11 @@ $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(); this.autoload_page(); @@ -170,6 +187,9 @@ $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()); }, @@ -528,13 +548,11 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( ) }); - // create ports widget this.widget("allports", ($e) => { - return new $ctl.application.Devicectl.ConfigLoader( - this.template("all_ports", this.$e.all_ports_container) - ) + return new $ctl.application.Devicectl.VirtualPorts(); }); + // url formatting to replace /0/ with // across // all widgets @@ -619,7 +637,6 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( $('#allports-tab').on('show.bs.tab', () => { this.$w.allports.load(); }); - }, show_device : function(device_id) { @@ -1039,6 +1056,464 @@ $ctl.application.Devicectl.ModalDevice = $tc.extend( ); + +// LOGICAL PORTS + +$ctl.application.Devicectl.LogicalPorts = $tc.extend( + "LogicalPorts", + { + LogicalPorts: function () { + this.Tool("logical_ports"); + }, + init: function () { + // v2 - create delete selected button + this.delete_selected_button = this.$t.button_delete_selected; + // v2 - create SelectionList + this.widget("list", ($e) => { + return new $ctl.widget.SelectionList( + this.template("list", this.$e.body), + $(this.delete_selected_button) + ); + }) + + this.$w.list.format_request_url = (url) => { + return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); + }; + + + this.$w.list.formatters.row = (row, data) => { + row.find('a[data-action="edit_logical_port"]').click(() => { + var logical_port = row.data("apiobject"); + new $ctl.application.Devicectl.ModalLogicalPort(logical_port); + }).each(function () { + if (!grainy.check(data.grainy + ".?", "u")) { + $(this).hide() + } + }); + + var button_delete = new twentyc.rest.Button( + row.find('a[data-element="delete_logical_port"]') + ); + + button_delete.format_request_url = (url) => { + return url.replace("/0/", "/" + data.id + "/"); + }; + + $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); + + if (!grainy.check(data.grainy, "d")) { + button_delete.element.hide(); + } + + + }; + + this.initialize_sortable_headers("name"); + + $(this.$w.list).on("api_callback_remove:after", () => { + $ctl.devicectl.sync(); + }); + }, + + menu: function () { + var menu = this.Tool_menu(); + menu.find('[data-element="button_add_logical_port"]').click(() => { + return new $ctl.application.Devicectl.ModalLogicalPort(); + }); + + // v2 - add/set-up delete selected button + $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_logical_port"]')); + + $(this.delete_selected_button).click(() => { + if (confirm("Remove selected Logical Ports?")) { + this.$w.list.delete_selected_list(); + } + }); + + return menu; + }, + + sync: function () { + let namespace = `logical_port.${$ctl.org.id}` + + if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { + return; + } + + if (grainy.check(namespace, "r")) { + this.show(); + this.apply_ordering(); + this.$w.list.load(); + + // v2 - set up view API button + this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( + "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" + ) + + this.$e.menu.find('[data-element="button_add_logical_port"]').grainy_toggle(namespace, "c") + + } else { + this.hide(); + } + } + }, + $ctl.application.Tool +); + +$ctl.application.Devicectl.ModalLogicalPort = $tc.extend( + "ModalLogicalPort", + { + ModalLogicalPort: function (logical_port) { + var modal = this; + var title = "Add LogicalPort" + var form = this.form = new twentyc.rest.Form( + $ctl.template("form_logical_port") + ); + + this.logical_port = logical_port; + + if (logical_port) { + title = "Edit " + logical_port.display_name; + form.method = "PUT" + form.form_action = logical_port.id; + form.fill(logical_port); + + + form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { + if (!grainy.check(logical_port.grainy + "." + $(this).attr("name"), "u")) { + $(this).attr("disabled", true) + } + }); + + + $(this.form).on("api-write:before", (ev, e, payload) => { + payload["id"] = logical_port.id; + }); + } + + $(this.form).on("api-write:success", (ev, e, payload, response) => { + $ctl.devicectl.$t.logical_ports.$w.list.load(); + $ctl.devicectl.$t.physical_ports.$w.list.load(); + modal.hide(); + }); + + this.Modal("save_right", title, form.element); + form.wire_submit(this.$e.button_submit); + } + }, + $ctl.application.Modal +); + +// PHYSICAL PORTS + +$ctl.application.Devicectl.PhysicalPorts = $tc.extend( + "PhysicalPorts", + { + PhysicalPorts: function () { + this.Tool("physical_ports"); + }, + init: function () { + // v2 - create delete selected button + this.delete_selected_button = this.$t.button_delete_selected; + // v2 - create SelectionList + this.widget("list", ($e) => { + return new $ctl.widget.SelectionList( + this.template("list", this.$e.body), + $(this.delete_selected_button) + ); + }) + + this.$w.list.formatters.row = (row, data) => { + row.find('a[data-action="edit_physical_port"]').click(() => { + var physical_port = row.data("apiobject"); + new $ctl.application.Devicectl.ModalPhysicalPort(physical_port); + }).each(function () { + if (!grainy.check(data.grainy + ".?", "u")) { + $(this).hide() + } + }); + + var button_delete = new twentyc.rest.Button( + row.find('a[data-element="delete_physical_port"]') + ); + + button_delete.format_request_url = (url) => { + return url.replace("/0/", "/" + data.id + "/"); + }; + + $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); + + if (!grainy.check(data.grainy, "d")) { + button_delete.element.hide(); + } + }; + + this.$w.list.format_request_url = (url) => { + return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); + }; + + $(this.$w.list).on("api-delete:after", () => { + $ctl.devicectl.sync(); + }); + + this.initialize_sortable_headers("name"); + }, + + menu: function () { + var menu = this.Tool_menu(); + menu.find('[data-element="button_add_physical_port"]').click(() => { + return new $ctl.application.Devicectl.ModalPhysicalPort(); + }); + + $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_physical_port"]')); + $(this.delete_selected_button).click(() => { + if (confirm("Remove selected Physical Ports?")) { + this.$w.list.delete_selected_list(); + } + }); + + return menu; + }, + + sync: function () { + if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { + return; + } + + + let namespace = `physical_port.${$ctl.org.id}` + if (grainy.check(namespace, "r")) { + this.show(); + this.apply_ordering(); + this.$w.list.load(); + + // v2 - set up view API button + this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( + "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" + ) + + this.$e.menu.find('[data-element="button_add_physical_port"]').grainy_toggle(namespace, "c") + + } else { + this.hide(); + } + } + }, + $ctl.application.Tool +); + +$ctl.application.Devicectl.ModalPhysicalPort = $tc.extend( + "ModalPhysicalPort", + { + ModalPhysicalPort: function (physical_port) { + var modal = this; + var title = "Add PhysicalPort" + var form = this.form = new twentyc.rest.Form( + $ctl.template("form_physical_port") + ); + + var logical_port_select = this.logical_port_select = new twentyc.rest.Select( + form.element.find('select[name="logical_port"]') + ) + + logical_port_select.format_request_url = (url) => { + return url.replace("/fac_tag/", "/" + fullctl.devicectl.facility_slug() + "/"); + }; + + logical_port_select.load().then(() => { + if (physical_port) { logical_port_select.element.val(physical_port.logical_port) } + }); + this.physical_port = physical_port; + + if (physical_port) { + title = "Edit " + physical_port.display_name; + form.method = "PUT" + form.form_action = physical_port.id; + form.fill(physical_port); + + + form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { + if (!grainy.check(physical_port.grainy + "." + $(this).attr("name"), "u")) { + $(this).attr("disabled", true) + } + }); + + + $(this.form).on("api-write:before", (ev, e, payload) => { + payload["id"] = physical_port.id; + }); + } + + form.fill({ + device: fullctl.devicectl.device_id(), + device_name: fullctl.devicectl.device_name(), + }) + + $(this.form).on("api-write:success", (ev, e, payload, response) => { + $ctl.devicectl.$t.physical_ports.$w.list.load(); + $ctl.devicectl.$t.logical_ports.$w.list.load(); + modal.hide(); + }); + + this.Modal("save_right", title, form.element); + form.wire_submit(this.$e.button_submit); + } + }, + $ctl.application.Modal +); + + +// VIRTUAL PORTS + +$ctl.application.Devicectl.VirtualPorts = $tc.extend( + "VirtualPorts", + { + VirtualPorts: function () { + this.Tool("virtual_ports"); + }, + init: function () { + // v2 - create delete selected button + this.delete_selected_button = this.$t.button_delete_selected; + // v2 - create SelectionList + this.widget("list", ($e) => { + return new $ctl.widget.SelectionList( + this.template("list", this.$e.body), + $(this.delete_selected_button) + ); + }) + + this.$w.list.formatters.row = (row, data) => { + row.find('a[data-action="edit_virtual_port"]').click(() => { + var virtual_port = row.data("apiobject"); + new $ctl.application.Devicectl.ModalVirtualPort(virtual_port); + }).each(function () { + if (!grainy.check(data.grainy + ".?", "u")) { + $(this).hide() + } + }); + + var button_delete = new twentyc.rest.Button( + row.find('a[data-element="delete_virtual_port"]') + ); + + button_delete.format_request_url = (url) => { + return url.replace("/0/", "/" + data.id + "/"); + }; + + $(button_delete).on("api-write:success", () => $ctl.devicectl.sync()); + + if (!grainy.check(data.grainy, "d")) { + button_delete.element.hide(); + } + }; + + this.$w.list.format_request_url = (url) => { + return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); + }; + + this.initialize_sortable_headers("name"); + }, + + menu: function () { + let menu = this.Tool_menu(); + menu.find('[data-element="button_add_virtual_port"]').click(() => { + return new $ctl.application.Devicectl.ModalVirtualPort(); + }); + + // v2 - add/setup delete selected button + $(this.delete_selected_button).insertBefore(menu.find('[data-element="button_add_virtual_port"]')); + $(this.delete_selected_button).click(() => { + if (confirm("Remove selected Virtual Ports?")) { + this.$w.list.delete_selected_list(); + } + }); + + return menu; + }, + + sync: function () { + let namespace = `virtual_port.${$ctl.org.id}` + + if (!fullctl.devicectl || !fullctl.devicectl.device_id()) { + return; + } + + if (grainy.check(namespace, "r")) { + this.show(); + this.apply_ordering(); + this.$w.list.load(); + + // v2 - set up view API button + this.$e.bottom_menu.find('[data-element="button_api_view"]').attr( + "href", this.$w.list.base_url.replace('/0/', "/" + fullctl.devicectl.device_id() + "/") + "/" + this.$w.list.action + "?pretty" + ) + + this.$e.menu.find('[data-element="button_add_virtual_port"]').grainy_toggle(namespace, "c") + + } else { + this.hide(); + } + } + }, + $ctl.application.Tool +); + +$ctl.application.Devicectl.ModalVirtualPort = $tc.extend( + "ModalVirtualPort", + { + ModalVirtualPort: function (virtual_port) { + var modal = this; + var title = "Add VirtualPort" + var form = this.form = new twentyc.rest.Form( + $ctl.template("form_virtual_port") + ); + + var logical_port_select = this.logical_port_select = new twentyc.rest.Select( + form.element.find('select[name="logical_port"]') + ) + + logical_port_select.format_request_url = (url) => { + return url.replace("/0/", "/" + fullctl.devicectl.device_id() + "/"); + }; + + logical_port_select.load().then(() => { + if (virtual_port) { logical_port_select.element.val(virtual_port.logical_port) } + }); + this.virtual_port = virtual_port; + + if (virtual_port) { + title = "Edit " + virtual_port.display_name; + form.method = "PUT" + form.form_action = virtual_port.id; + form.fill(virtual_port); + + + form.element.find('input[type="text"],select,input[type="checkbox"]').each(function () { + if (!grainy.check(virtual_port.grainy + "." + $(this).attr("name"), "u")) { + $(this).attr("disabled", true) + } + }); + + + $(this.form).on("api-write:before", (ev, e, payload) => { + payload["id"] = virtual_port.id; + }); + } + + $(this.form).on("api-write:success", (ev, e, payload, response) => { + $ctl.devicectl.$t.virtual_ports.$w.list.load(); + modal.hide(); + }); + + this.Modal("save_right", title, form.element); + form.wire_submit(this.$e.button_submit); + } + }, + $ctl.application.Modal +); + + + $(document).ready(function () { $ctl.devicectl = new $ctl.application.Devicectl(); }); diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html index c8a19a38..e21613df 100644 --- a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html +++ b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html @@ -39,6 +39,4 @@ {% load static i18n %} \ No newline at end of file From 34fcb3f5ab11ef741a8c75c01b792f855fa85ea9 Mon Sep 17 00:00:00 2001 From: Genza999 Date: Mon, 29 Apr 2024 16:45:49 +0300 Subject: [PATCH 3/6] fix: resolve error onload --- .../static/devicectl/v2/devicectl.js | 11 ++++- .../templates/devicectl/v2/base.html | 3 ++ .../devicectl/v2/tool/device/ports.html | 40 +------------------ 3 files changed, 13 insertions(+), 41 deletions(-) diff --git a/src/django_devicectl/static/devicectl/v2/devicectl.js b/src/django_devicectl/static/devicectl/v2/devicectl.js index 7f53749e..d97e6a1d 100644 --- a/src/django_devicectl/static/devicectl/v2/devicectl.js +++ b/src/django_devicectl/static/devicectl/v2/devicectl.js @@ -548,8 +548,11 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( ) }); + // create ports widget this.widget("allports", ($e) => { - return new $ctl.application.Devicectl.VirtualPorts(); + return new $ctl.application.Devicectl.VirtualPorts( + this.template("all_ports", this.$e.all_ports_container) + ) }); @@ -633,7 +636,6 @@ $ctl.application.Devicectl.DeviceDetails = $tc.extend( this.$w.reference_config.load(); }); - // upon showing the reference-config tab, load the reference config $('#allports-tab').on('show.bs.tab', () => { this.$w.allports.load(); }); @@ -1431,6 +1433,11 @@ $ctl.application.Devicectl.VirtualPorts = $tc.extend( return menu; }, + load : function() { + var virtual_port = $("div.device-container[data-template='all_ports']"); + + }, + sync: function () { let namespace = `virtual_port.${$ctl.org.id}` diff --git a/src/django_devicectl/templates/devicectl/v2/base.html b/src/django_devicectl/templates/devicectl/v2/base.html index c50280a8..4308cfc0 100644 --- a/src/django_devicectl/templates/devicectl/v2/base.html +++ b/src/django_devicectl/templates/devicectl/v2/base.html @@ -165,6 +165,9 @@ diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html index e21613df..99b40537 100644 --- a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html +++ b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html @@ -1,42 +1,4 @@ - - {% load static i18n %} - diff --git a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html index 99b40537..936d4ade 100644 --- a/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html +++ b/src/django_devicectl/templates/devicectl/v2/tool/device/ports.html @@ -1,4 +1,4 @@ {% load static i18n %} -
+
{% include "devicectl/v2/tool/virtual_ports/main.html" %} -
\ No newline at end of file +
From 2f50a3e75ef490ab1f10bf37cad31fd2eaf1a6fc Mon Sep 17 00:00:00 2001 From: Genza999 Date: Wed, 1 May 2024 04:42:36 +0300 Subject: [PATCH 5/6] ft: add model for ports information and refute click propagation from button --- .../static/devicectl/v2/devicectl.js | 132 +++++++++++++++++- .../devicectl/v2/tool/virtual_ports/list.html | 6 +- 2 files changed, 130 insertions(+), 8 deletions(-) diff --git a/src/django_devicectl/static/devicectl/v2/devicectl.js b/src/django_devicectl/static/devicectl/v2/devicectl.js index ab175a57..135b25bc 100644 --- a/src/django_devicectl/static/devicectl/v2/devicectl.js +++ b/src/django_devicectl/static/devicectl/v2/devicectl.js @@ -1378,7 +1378,7 @@ $ctl.application.Devicectl.VirtualPorts = $tc.extend( } row.click(() =>{ - this.view_port_details(data); + new $ctl.application.Devicectl.PortsViewInformation(data); }); }; @@ -1389,10 +1389,6 @@ $ctl.application.Devicectl.VirtualPorts = $tc.extend( this.initialize_sortable_headers("name"); }, - view_port_details: function(data){ - console.log("here::", data) - }, - menu: function () { let menu = this.Tool_menu(); menu.find('[data-element="button_add_virtual_port"]').click(() => { @@ -1437,6 +1433,132 @@ $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 = $('
'); + var logical_response_data, logical_port_name, logical_port_channel, logical_port_trunk, logical_port_description; + var PhysicalPortsList = []; + + // Call for the Logical Ports information for the + $.ajax({ + url: `/api/device/digital_reality/${fullctl.devicectl.device_id()}/logical_ports`, + type: 'GET', + success: function(response) { + logical_response_data = response.data[0] + + logical_port_name = logical_response_data.name; + logical_port_channel = logical_response_data.channel; + logical_port_trunk = logical_response_data.trunk; + logical_port_description = logical_response_data.description; + + }, + error: function(xhr, status, error) { + console.error(xhr.responseText); + }, + async: false + }); + + // Call for the Physical Ports information + physical_ports = `/api/device/digital_reality/${fullctl.devicectl.device_id()}/physical_ports`; + $.ajax({ + url: physical_ports, + type: 'GET', + success: function(response) { + response.data.forEach(function(physical_response_data) { + var physical_port_name = physical_response_data.name; + var device_name = physical_response_data.device_name; + var physical_logical_port_name = physical_response_data.logical_port_name; + var physical_port_description = physical_response_data.description; + + PhysicalPortsList.push({ + physical_port_name: physical_port_name, + device_name: device_name, + physical_logical_port_name: physical_logical_port_name, + physical_port_description: physical_port_description + }); + }); + }, + error: function(xhr, status, error) { + console.error(xhr.responseText); + }, + async: false + }); + + var dataContent = ` +
+ + +
+ +
+ + +
+ +
+ + +
+ +
Logical Port - ${data.logical_port_name}
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ `; + + PhysicalPortsList.forEach(function(item){ + dataContent += ` +
Physical Port - ${item.physical_port_name}
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ `; + }) + element.append(dataContent); + + this.Modal("no_button_lg", title, element); + } +}, + $ctl.application.Modal +); + $ctl.application.Devicectl.ModalVirtualPort = $tc.extend( "ModalVirtualPort", { diff --git a/src/django_devicectl/templates/devicectl/v2/tool/virtual_ports/list.html b/src/django_devicectl/templates/devicectl/v2/tool/virtual_ports/list.html index dd7a2f9f..9b8e419f 100644 --- a/src/django_devicectl/templates/devicectl/v2/tool/virtual_ports/list.html +++ b/src/django_devicectl/templates/devicectl/v2/tool/virtual_ports/list.html @@ -21,13 +21,13 @@ - + - + - From 26e8d3e2daa4340b6a5d93ba72b70afea69c9ca3 Mon Sep 17 00:00:00 2001 From: Genza999 Date: Mon, 6 May 2024 21:05:24 +0300 Subject: [PATCH 6/6] refactor: additon and edition of ports --- .../rest/serializers/devicectl.py | 3 +- .../static/devicectl/v2/devicectl.js | 238 +++++++++++++----- .../devicectl/v2/tool/virtual_ports/form.html | 35 +++ 3 files changed, 216 insertions(+), 60 deletions(-) diff --git a/src/django_devicectl/rest/serializers/devicectl.py b/src/django_devicectl/rest/serializers/devicectl.py index 5715598f..a9039aac 100644 --- a/src/django_devicectl/rest/serializers/devicectl.py +++ b/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 diff --git a/src/django_devicectl/static/devicectl/v2/devicectl.js b/src/django_devicectl/static/devicectl/v2/devicectl.js index 135b25bc..6bdb4936 100644 --- a/src/django_devicectl/static/devicectl/v2/devicectl.js +++ b/src/django_devicectl/static/devicectl/v2/devicectl.js @@ -1439,53 +1439,6 @@ $ctl.application.Devicectl.PortsViewInformation = $tc.extend( PortsViewInformation: function (data) { var title = "Virtual Ports - " + data.display_name; var element = $('
'); - var logical_response_data, logical_port_name, logical_port_channel, logical_port_trunk, logical_port_description; - var PhysicalPortsList = []; - - // Call for the Logical Ports information for the - $.ajax({ - url: `/api/device/digital_reality/${fullctl.devicectl.device_id()}/logical_ports`, - type: 'GET', - success: function(response) { - logical_response_data = response.data[0] - - logical_port_name = logical_response_data.name; - logical_port_channel = logical_response_data.channel; - logical_port_trunk = logical_response_data.trunk; - logical_port_description = logical_response_data.description; - - }, - error: function(xhr, status, error) { - console.error(xhr.responseText); - }, - async: false - }); - - // Call for the Physical Ports information - physical_ports = `/api/device/digital_reality/${fullctl.devicectl.device_id()}/physical_ports`; - $.ajax({ - url: physical_ports, - type: 'GET', - success: function(response) { - response.data.forEach(function(physical_response_data) { - var physical_port_name = physical_response_data.name; - var device_name = physical_response_data.device_name; - var physical_logical_port_name = physical_response_data.logical_port_name; - var physical_port_description = physical_response_data.description; - - PhysicalPortsList.push({ - physical_port_name: physical_port_name, - device_name: device_name, - physical_logical_port_name: physical_logical_port_name, - physical_port_description: physical_port_description - }); - }); - }, - error: function(xhr, status, error) { - console.error(xhr.responseText); - }, - async: false - }); var dataContent = `
@@ -1503,51 +1456,54 @@ $ctl.application.Devicectl.PortsViewInformation = $tc.extend(
-
Logical Port - ${data.logical_port_name}
+
Logical Port - ${data.logical_port.name}

- +
- +
- +
- +
+ +
Physical Ports
+ `; - PhysicalPortsList.forEach(function(item){ + data.physical_ports.forEach(function(physical_port, index){ dataContent += ` -
Physical Port - ${item.physical_port_name}
+
Physical Port - ${physical_port.display_name}

- +
- +
- +
- +
`; }) @@ -1568,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"]') @@ -1580,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 = ` +
+
+ + +
+
+
+
+ + + + + +
+
+
+
+ + + + +
+
+
+
+ + +
+
+ ` + physical_ports.append(phyical_data_content) + var logical_ports_select = form.element.find('#physical_port-logical_port'); + logical_ports_select.append($('
+ +
Logical Port
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
Physical Ports
+
+
+