openstack
/
horizon
Code Issues Proposed changes

Confirm Dialog for Delete operation in Network Topology 

When we click a delete button in network topology, the corresponding
delete operation is issued immediately. Now, a confirm dialog is
displayed first to confirm the user's action and then the item gets
deleted accordingly. It brings better consistency with delete
operations of other tables.

Change-Id: I1312364c75cea17f228eb298daacb141bf1bfdde
Co-Authored-By: Vladislav Kuzmin <vkuzmin@mirantis.com>
Co-Authored-By: Swati Sharma <sharma.swati6@tcs.com>
Co-Authored-By: Allen <chen.qiaomin@99cloud.net>
Closes-Bug: #1242251
This commit is contained in:
swati 2015-02-23 15:45:35 +05:30 committed by Vladislav Kuzmin
parent 638593ccc8
commit 698dbe322b
7 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
horizon/static/horizon/js/horizon.tables.js
View File

@ -256,11 +256,29 @@ horizon.datatables.confirm = function(action) {
var help_text = $action.attr("help_text") || "";
var name_string = "";
// Assume that we are going from the "Network Topology" tab
// If we trying perform an action on a port or subnet
var $closest_tr = $action.closest("tr");
var $data_display = $closest_tr.find('span[data-display]');
if ($data_display.length > 0){
name_string = ' "' + $data_display.attr("data-display") + '"';
name_array = [name_string];
} else {
// Else we trying to perform an action on device
var $device_window = $('div.topologyBalloon');
var $device_table = $device_window.find('table.detailInfoTable').has('caption[data-display]');
var $data_display = $device_table.find('caption[data-display]');
if ($data_display.length > 0){
name_string = ' "' + $data_display.attr("data-display") + '"';
name_array = [name_string];
}
}
// Add the display name defined by table.get_object_display(datum)
var $closest_table = $action.closest("table");
// Check if data-display attribute is available
var $data_display = $closest_table.find('tr[data-display]');
$data_display = $closest_table.find('tr[data-display]');
if ($data_display.length > 0) {
var $actions_div = $action.closest("div");
if ($actions_div.hasClass("table_actions") || $actions_div.hasClass("table_actions_menu")) {

8
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/client_side/_balloon_container.html
View File

@ -1,5 +1,5 @@
{% extends "horizon/client_side/template.html" %}
{% load horizon %}
{% load horizon i18n %}
{% block id %}balloon_container{% endblock %}
@ -23,7 +23,11 @@
</div>
[[#type]]
<div class="cell delete">
<button class="delete-device btn btn-danger btn-xs [[type]]" data-type="[[type]]" data-device-id="[[id]]">[[delete_label]]</button>
<button class="delete-device btn btn-danger btn-xs [[type]]"
data-type="[[type]]" data-device-id="[[id]]"
help_text="{% trans "This action cannot be undone." %}">
[[delete_label]]
</button>
</div>
[[/type]]
</div>

2
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/client_side/_balloon_device.html
View File

@ -6,7 +6,7 @@
{% block template %}
{% jstemplate %}
<table class="detailInfoTable">
<caption>[[name]]</caption>
<caption data-display="[[name]]">[[name]]</caption>
<tbody>
<tr>
<th class="device">[[id_label]]</th>

8
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/client_side/_balloon_net.html
View File

@ -1,5 +1,5 @@
{% extends "horizon/client_side/template.html" %}
{% load horizon %}
{% load horizon i18n %}
{% block id %}balloon_net{% endblock %}
@ -20,7 +20,7 @@
[[#subnet]]
<tr>
<th>
<span title="[[id]]">
<span data-display="[[id]]" title="[[id]]">
<a href="[[url]]">[[id]]</a>
</span>
</th>
@ -28,7 +28,9 @@
<td class="delete">
<button class="delete-port btn btn-danger btn-xs"
data-router-id="[[router_id]]" data-network-id="[[network_id]]"
data-port-id="[[id]]">[[delete_subnet_label]]</button>
data-port-id="[[id]]" help_text="{% trans "This action cannot be undone." %}">
[[delete_subnet_label]]
</button>
</td>
</tr>
[[/subnet]]

8
openstack_dashboard/dashboards/project/network_topology/templates/network_topology/client_side/_balloon_port.html
View File

@ -1,5 +1,5 @@
{% extends "horizon/client_side/template.html" %}
{% load horizon %}
{% load horizon i18n %}
{% block id %}balloon_port{% endblock %}
@ -20,7 +20,7 @@
[[#port]]
<tr>
<th>
<span title="[[id]]">
<span data-display="[[id]]" title="[[id]]">
[[#url]]
<a href="[[url]]">[[id]]</a>
[[/url]]
@ -38,7 +38,9 @@
[[#is_interface]]
<button class="delete-port btn btn-danger btn-xs"
data-router-id="[[router_id]]" data-network-id="[[network_id]]"
data-port-id="[[id]]">[[delete_interface_label]]</button>
data-port-id="[[id]]" help_text="{% trans "This action cannot be undone." %}">
[[delete_interface_label]]
</button>
[[/is_interface]]
</td>
</tr>

17
openstack_dashboard/static/js/horizon.flatnetworktopology.js
View File

@ -617,13 +617,22 @@ horizon.flat_network_topology = {
$balloon.find('.delete-device').click(function(){
var $this = $(this);
$this.prop('disabled', true);
d3.select('#id_' + $this.data('device-id')).classed('loading',true);
self.delete_device($this.data('type'),$this.data('device-id'));
var delete_modal = horizon.datatables.confirm($this);
delete_modal.find('.btn-primary').click(function () {
$this.prop('disabled', true);
d3.select('#id_' + $this.data('device-id')).classed('loading',true);
self.delete_device($this.data('type'),$this.data('device-id'));
horizon.modals.spinner.modal('hide');
});
});
$balloon.find('.delete-port').click(function(){
var $this = $(this);
self.delete_port($this.data('router-id'),$this.data('port-id'),$this.data('network-id'));
var delete_modal = horizon.datatables.confirm($this);
delete_modal.find('.btn-primary').click(function () {
$this.prop('disabled', true);
self.delete_port($this.data('router-id'),$this.data('port-id'),$this.data('network-id'));
horizon.modals.spinner.modal('hide');
});
});
self.balloon_id = balloon_id;
},

18
openstack_dashboard/static/js/horizon.networktopology.js
View File

@ -1035,14 +1035,22 @@ horizon.network_topology = {
}
_balloon.find('.delete-device').click(function() {
var _this = angular.element(this);
_this.prop('disabled', true);
d3.select('#id_' + _this.data('device-id')).classed('loading',true);
self.delete_device(_this.data('type'),_this.data('device-id'));
var delete_modal = horizon.datatables.confirm(_this);
delete_modal.find('.btn-primary').click(function () {
_this.prop('disabled', true);
d3.select('#id_' + _this.data('device-id')).classed('loading',true);
self.delete_device(_this.data('type'),_this.data('device-id'));
horizon.modals.spinner.modal('hide');
});
});
_balloon.find('.delete-port').click(function() {
var _this = angular.element(this);
self.delete_port(_this.data('router-id'),_this.data('port-id'),_this.data('network-id'));
self.delete_balloon();
var delete_modal = horizon.datatables.confirm(_this);
delete_modal.find('.btn-primary').click(function () {
_this.prop('disabled', true);
self.delete_port(_this.data('router-id'),_this.data('port-id'),_this.data('network-id'));
horizon.modals.spinner.modal('hide');
});
});
self.balloonID = balloonID;
},