Improve Ports/Rules selection UI

Previously Ports tab in "Add Firewall Group" form and "Rules" tab
in "Add Firewall Policy" provided poor UX.
This commit improves them to more interactive UI
as FWaaS v1 "Add Firewall Policy" form does.

Note that static files are moved to static/neutron_fwaas_dashboard.
If we place static files directly under 'static' directory,
after collectstatic runs they cannot be distinguished from
static files from horizon or other plugins.

Change-Id: Ib1e3cd5f915a4e7b1277f5a79c43c5b6ad66c790
Closes-Bug: #1747506
This commit is contained in:
Akihiro Motoki 2018-02-06 05:25:05 +09:00
parent 2b281e03e3
commit 8c74c1e3eb
7 changed files with 58 additions and 7 deletions

View File

@ -21,7 +21,7 @@
</div>
<div class="help_text">
{{ step.get_help_text }}
<div>
</div>
</div>
<script>

View File

@ -1,10 +1,12 @@
{% load i18n %}
<noscript><h3>{{ step }}</h3></noscript>
<div id="portListSortContainer">
<div id="portListSortContainer" class="sort-container">
<div class="col-sm-6">
<h4 id="selected_port_label">{% trans "Selected Ports" %}</h4>
<ul id="selected_port" class="portlist box-list"></ul>
<h4>{% trans "Available Ports" %}</h4>
<ul id="available_port" class="portlist"></ul>
<ul id="available_port" class="portlist box-list"></ul>
</div>
<div class="col-sm-6">
{% include "project/firewalls_v2/_update_port_help.html" %}
@ -20,4 +22,14 @@
<div class="help_text">
{{ step.get_help_text }}
</div>
</div>
</div>
<script>
if (typeof $ !== 'undefined') {
horizon.firewalls_v2.workflow_init($(".workflow"));
} else {
addHorizonLoadEvent(function() {
horizon.firewalls_v2.workflow_init($(".workflow"));
});
}
</script>

View File

@ -1,12 +1,12 @@
{% load i18n %}
<noscript><h3>{{ step }}</h3></noscript>
<div id="ruleListSortContainer">
<div id="ruleListSortContainer" class="sort-container">
<div class="col-sm-6">
<h4 id="selected_rule_label">{% trans "Selected Rules" %}</h4>
<ul id="selected_rule" class="rulelist"></ul>
<ul id="selected_rule" class="rulelist box-list"></ul>
<h4>{% trans "Available Rules" %}</h4>
<ul id="available_rule" class="rulelist"></ul>
<ul id="available_rule" class="rulelist box-list"></ul>
</div>
<div class="col-sm-6">
{% include "project/firewalls_v2/_update_rule_help.html" %}
@ -23,3 +23,13 @@
{{ step.get_help_text }}
</div>
</div>
<script>
if (typeof $ !== 'undefined') {
horizon.firewalls_v2.workflow_init($(".workflow"));
} else {
addHorizonLoadEvent(function() {
horizon.firewalls_v2.workflow_init($(".workflow"));
});
}
</script>

View File

@ -17,3 +17,4 @@ FEATURE = 'neutron-fwaas-dashboard'
ADD_INSTALLED_APPS = ['neutron_fwaas_dashboard']
AUTO_DISCOVER_STATIC_FILES = True
ADD_SCSS_FILES = ['neutron_fwaas_dashboard/scss/firewalls.scss']

View File

@ -0,0 +1,21 @@
/**
* Licensed under the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License. You may obtain
* a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
horizon.firewalls_v2 = {
workflow_init: function() {
// Initialise the drag and drop rule list
horizon.lists.generate_html("port");
horizon.lists.generate_html("rule");
}
};

View File

@ -0,0 +1,7 @@
@import "/dashboard/scss/components/resource_topology";
.sort-container {
#selected_port {
@include common_box_list_selected("port");
}
}