From a6fcfb4e73c67a0fc2b59a610779a6871d242146 Mon Sep 17 00:00:00 2001 From: Julie Pichon Date: Thu, 20 Jun 2013 16:20:07 +0100 Subject: [PATCH] Clean-up some of the workflows-related javascript * Initialise the workflows javascript outside modals too When opening the Modify Users page into a new window rather than as a modal form, the "All Users" and "Project Members" lists would show as empty as the javascript for initialising workflow wasn't called. Also fix similar problems in other workflows such as Edit Security Groups, Launch Instances' network list. * Avoid having the projects-specific workflow js initialised on every modal init * Move the Network List drag & drop to horizon.instances.js as it's unrelated to Project workflows Also: * Fix a typo in help text Fixes bug #1193007 Change-Id: If476d6babf3d93bd6e9abb051008aff4fb393436 --- .../static/horizon/js/horizon.instances.js | 117 +++++++++++++++++ horizon/static/horizon/js/horizon.projects.js | 120 ------------------ .../common/_workflow_step_update_members.html | 11 ++ .../templates/instances/_update_networks.html | 11 ++ .../instances/workflows/create_instance.py | 2 +- 5 files changed, 140 insertions(+), 121 deletions(-) diff --git a/horizon/static/horizon/js/horizon.instances.js b/horizon/static/horizon/js/horizon.instances.js index 20f396e97..f23abc204 100644 --- a/horizon/static/horizon/js/horizon.instances.js +++ b/horizon/static/horizon/js/horizon.instances.js @@ -1,5 +1,7 @@ horizon.instances = { user_decided_length: false, + networks_selected: [], + networks_available: [], getConsoleLog: function(via_user_submit) { var form_element = $("#tail_length"), @@ -40,6 +42,121 @@ horizon.instances = { e.stopPropagation(); } }); + }, + + /* + * Gets the html select element associated with a given + * network id for network_id. + **/ + get_network_element: function(network_id) { + return $('li > label[for^="id_network_' + network_id + '"]'); + }, + + /* + * Initializes an associative array of lists of the current + * networks. + **/ + init_network_list: function() { + horizon.instances.networks_selected = []; + horizon.instances.networks_available = []; + $(this.get_network_element("")).each(function(){ + var $this = $(this); + var $input = $this.children("input"); + var network_property = { + name:$this.text().replace(/^\s+/,""), + id:$input.attr("id"), + value:$input.attr("value") + }; + if($input.is(':checked')) { + horizon.instances.networks_selected.push(network_property); + } else { + horizon.instances.networks_available.push(network_property); + } + }); + }, + + /* + * Generates the HTML structure for a network that will be displayed + * as a list item in the network list. + **/ + generate_network_element: function(name, id, value) { + var $li = $('
  • '); + $li.attr('name', value).html(name + '(' + value + ')'); + return $li; + }, + + /* + * Generates the HTML structure for the Network List. + **/ + generate_networklist_html: function() { + var self = this; + var updateForm = function() { + var lists = $("#networkListId div.input li").attr('data-index',100); + var active_networks = $("#selected_network > li").map(function(){ + return $(this).attr("name"); + }); + $("#networkListId div.input input:checkbox").removeAttr('checked'); + active_networks.each(function(index, value){ + $("#networkListId div.input input:checkbox[value=" + value + "]") + .attr('checked','checked') + .parents("li").attr('data-index',index); + }); + $("#networkListId div.input ul").html( + lists.sort(function(a,b){ + if( $(a).data("index") < $(b).data("index")) return -1; + if( $(a).data("index") > $(b).data("index")) return 1; + return 0; + }) + ); + }; + $("#networkListSortContainer").show(); + $("#networkListIdContainer").hide(); + self.init_network_list(); + // Make sure we don't duplicate the networks in the list + $("#available_network").empty(); + $.each(self.networks_available, function(index, value){ + $("#available_network").append(self.generate_network_element(value.name, value.id, value.value)); + }); + // Make sure we don't duplicate the networks in the list + $("#selected_network").empty(); + $.each(self.networks_selected, function(index, value){ + $("#selected_network").append(self.generate_network_element(value.name, value.id, value.value)); + }); + // $(".networklist > li").click(function(){ + // $(this).toggleClass("ui-selected"); + // }); + $(".networklist > li > a.btn").click(function(e){ + var $this = $(this); + e.preventDefault(); + e.stopPropagation(); + if($this.parents("ul#available_network").length > 0) { + $this.parent().appendTo($("#selected_network")); + } else if ($this.parents("ul#selected_network").length > 0) { + $this.parent().appendTo($("#available_network")); + } + updateForm(); + }); + if ($("#networkListId > div.control-group.error").length > 0) { + var errortext = $("#networkListId > div.control-group.error").find("span.help-inline").text(); + $("#selected_network_h4").before($('
    ').html(errortext)); + } + $(".networklist").sortable({ + connectWith: "ul.networklist", + placeholder: "ui-state-highlight", + distance: 5, + start:function(e,info){ + $("#selected_network").addClass("dragging"); + }, + stop:function(e,info){ + $("#selected_network").removeClass("dragging"); + updateForm(); + } + }).disableSelection(); + }, + + workflow_init: function(modal) { + // Initialise the drag and drop network list + horizon.instances.generate_networklist_html(); } }; diff --git a/horizon/static/horizon/js/horizon.projects.js b/horizon/static/horizon/js/horizon.projects.js index 6ce0a0cf0..cb8efaa28 100644 --- a/horizon/static/horizon/js/horizon.projects.js +++ b/horizon/static/horizon/js/horizon.projects.js @@ -4,8 +4,6 @@ horizon.projects = { current_membership: [], users: [], roles: [], - networks_selected: [], - networks_available: [], has_roles: true, default_role_id: "", @@ -33,15 +31,6 @@ horizon.projects = { return $('li[data-user-id$=' + user_id + ']').parent(); }, - /* - - * Gets the html select element associated with a given - * network id for network_id. - **/ - get_network_element: function(network_id) { - return $('li > label[for^="id_network_' + network_id + '"]'); - }, - /* * Initializes all of the horizon.projects lists with * data parsed from the hidden form fields, as well as the @@ -101,28 +90,6 @@ horizon.projects = { }); }, - /* - * Initializes an associative array of lists of the current - * networks. - **/ - init_network_list: function() { - horizon.projects.networks_selected = []; - horizon.projects.networks_available = []; - $(this.get_network_element("")).each(function(){ - var $this = $(this); - var $input = $this.children("input"); - var network_property = { - name:$this.text().replace(/^\s+/,""), - id:$input.attr("id"), - value:$input.attr("value") - }; - if($input.is(':checked')) { - horizon.projects.networks_selected.push(network_property); - } else { - horizon.projects.networks_available.push(network_property); - } - }); - }, /* * Returns the ids of roles the user is a member of. **/ @@ -245,16 +212,6 @@ horizon.projects = { return $(user_el); }, - /* - * Generates the HTML structure for a network that will be displayed - * as a list item in the project network list. - **/ - generate_network_element: function(name, id, value) { - var $li = $('
  • '); - $li.attr('name', value).html(name + '(' + value + ')'); - return $li; - }, - /* * Generates the HTML structure for the project membership UI. **/ @@ -274,76 +231,6 @@ horizon.projects = { horizon.projects.detect_no_results(); }, - /* - * Generates the HTML structure for the project Network List. - **/ - generate_networklist_html: function() { - var self = this; - var updateForm = function() { - var lists = $("#networkListId div.input li").attr('data-index',100); - var active_networks = $("#selected_network > li").map(function(){ - return $(this).attr("name"); - }); - $("#networkListId div.input input:checkbox").removeAttr('checked'); - active_networks.each(function(index, value){ - $("#networkListId div.input input:checkbox[value=" + value + "]") - .attr('checked','checked') - .parents("li").attr('data-index',index); - }); - $("#networkListId div.input ul").html( - lists.sort(function(a,b){ - if( $(a).data("index") < $(b).data("index")) return -1; - if( $(a).data("index") > $(b).data("index")) return 1; - return 0; - }) - ); - }; - $("#networkListSortContainer").show(); - $("#networkListIdContainer").hide(); - self.init_network_list(); - // Make sure we don't duplicate the networks in the list - $("#available_network").empty(); - $.each(self.networks_available, function(index, value){ - $("#available_network").append(self.generate_network_element(value.name, value.id, value.value)); - }); - // Make sure we don't duplicate the networks in the list - $("#selected_network").empty(); - $.each(self.networks_selected, function(index, value){ - $("#selected_network").append(self.generate_network_element(value.name, value.id, value.value)); - }); - // $(".networklist > li").click(function(){ - // $(this).toggleClass("ui-selected"); - // }); - $(".networklist > li > a.btn").click(function(e){ - var $this = $(this); - e.preventDefault(); - e.stopPropagation(); - if($this.parents("ul#available_network").length > 0) { - $this.parent().appendTo($("#selected_network")); - } else if ($this.parents("ul#selected_network").length > 0) { - $this.parent().appendTo($("#available_network")); - } - updateForm(); - }); - if ($("#networkListId > div.control-group.error").length > 0) { - var errortext = $("#networkListId > div.control-group.error").find("span.help-inline").text(); - $("#selected_network_h4").before($('
    ').html(errortext)); - } - $(".networklist").sortable({ - connectWith: "ul.networklist", - placeholder: "ui-state-highlight", - distance: 5, - start:function(e,info){ - $("#selected_network").addClass("dragging"); - }, - stop:function(e,info){ - $("#selected_network").removeClass("dragging"); - updateForm(); - } - }).disableSelection(); - }, - - /* * Triggers on click of link to add/remove member from the project. **/ @@ -534,8 +421,6 @@ horizon.projects = { * Calls set-up functions upon loading the workflow. **/ workflow_init: function(modal) { - horizon.projects.generate_networklist_html(); - // fix the dropdown menu overflow issues $(".tab-content, .workflow").addClass("dropdown_fix"); @@ -587,8 +472,3 @@ horizon.projects = { }); } }; - - -horizon.addInitFunction(function() { - horizon.modals.addModalInitFunction(horizon.projects.workflow_init); -}); diff --git a/horizon/templates/horizon/common/_workflow_step_update_members.html b/horizon/templates/horizon/common/_workflow_step_update_members.html index f8c909d8c..31c8a0018 100644 --- a/horizon/templates/horizon/common/_workflow_step_update_members.html +++ b/horizon/templates/horizon/common/_workflow_step_update_members.html @@ -37,3 +37,14 @@
    {% include "horizon/common/_form_fields.html" %}
    + + + diff --git a/openstack_dashboard/dashboards/project/instances/templates/instances/_update_networks.html b/openstack_dashboard/dashboards/project/instances/templates/instances/_update_networks.html index a8185f48c..1f635a8d2 100644 --- a/openstack_dashboard/dashboards/project/instances/templates/instances/_update_networks.html +++ b/openstack_dashboard/dashboards/project/instances/templates/instances/_update_networks.html @@ -33,3 +33,14 @@ + + + diff --git a/openstack_dashboard/dashboards/project/instances/workflows/create_instance.py b/openstack_dashboard/dashboards/project/instances/workflows/create_instance.py index 072ec418f..fce4c8fd2 100644 --- a/openstack_dashboard/dashboards/project/instances/workflows/create_instance.py +++ b/openstack_dashboard/dashboards/project/instances/workflows/create_instance.py @@ -441,7 +441,7 @@ class SetNetworkAction(workflows.Action): "At least one network must" " be specified.")}, help_text=_("Launch instance with" - "these networks")) + " these networks")) class Meta: name = _("Networking")