Skip to content

Commit

Permalink
shell: Server appearance edit dialog for dashboard
Browse files Browse the repository at this point in the history 
Reviewed-by: Stef Walter <stefw@redhat.com>
  • Loading branch information
@mvollmer @stefwalter
mvollmer authored and stefwalter committed Nov 26, 2014
1 parent ba71c8b commit 2b12461
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 2 deletions.
100 changes: 99 additions & 1 deletion pkg/shell/cockpit-dashboard.js
View file
Expand Up @@ -78,6 +78,81 @@ var resource_monitors = [
}
];

var avatar_editor;

$(function () {
var rows = [ ];
for (var i = 0; i < shell.host_colors.length; i += 6) {
var part = shell.host_colors.slice(i, i+6);
rows.push(
$('<div>').
append(
part.map(function (c) {
return $('<div class="color-cell">').
css('background-color', c);
})));
}

$('#host-edit-color-popover .popover-content').append(rows);
$('#host-edit-color-popover .popover-content .color-cell').click(function () {
$('#host-edit-color').css('background-color', $(this).css('background-color'));
});

avatar_editor = shell.image_editor($('#host-edit-avatar'), 256, 256);

$('#host-edit-color').parent().
on('show.bs.dropdown', function () {
var $div = $('#host-edit-color');
var $pop = $('#host-edit-color-popover');
var div_pos = $div.position();
var div_width = $div.width();
var div_height = $div.height();
var pop_width = $pop.width();
var pop_height = $pop.height();

$pop.css('left', div_pos.left + (div_width - pop_width) / 2);
$pop.css('top', div_pos.top - pop_height + 10);
$pop.show();
}).
on('hide.bs.dropdown', function () {
$('#host-edit-color-popover').hide();
});
});

function host_edit_dialog(addr) {
var info = shell.hosts[addr];

$('#host-edit-fail').text("").hide();
$('#host-edit-name').val(info.display_name);
$('#host-edit-name').prop('disabled', info.state == "failed");
$('#host-edit-color').css('background-color', info.color);
$('#host-edit-apply').off('click');
$('#host-edit-apply').on('click', function () {
$('#host-edit-dialog').modal('hide');
$.when(avatar_editor.changed? info.set_avatar(avatar_editor.get_data(128, 128, "image/png")) : null,
info.set_color($('#host-edit-color').css('background-color')),
info.state != "failed"? info.set_display_name($('#host-edit-name').val()) : null).
fail(shell.show_unexpected_error);
});
$('#host-edit-avatar').off('click');
$('#host-edit-avatar').on('click', function () {
$('#host-edit-fail').text("").hide();
avatar_editor.select_file().
done(function () {
$('#host-edit-avatar').off('click');
avatar_editor.changed = true;
avatar_editor.start_cropping();
});
});
$('#host-edit-dialog').modal('show');

avatar_editor.stop_cropping();
avatar_editor.load_data(info.avatar || "images/server-large.png").
fail(function () {
$('#host-edit-fail').text("Can't load image").show();
});
}

PageDashboard.prototype = {
_init: function() {
this.id = "dashboard";
Expand All @@ -88,18 +163,31 @@ PageDashboard.prototype = {
},

setup: function() {
var self = this;

$('#dashboard-add').click(function () {
shell.host_setup();
});
$('#dashboard-enable-edit').click(function () {
self.toggle_edit(!self.edit_enabled);
});
this.plot = shell.plot($('#dashboard-plot'), 300, 1);
},

toggle_edit: function(val) {
var self = this;
self.edit_enabled = val;
$('#dashboard-enable-edit').toggleClass('active', self.edit_enabled);
$('#dashboard-hosts .edit-button').toggle(self.edit_enabled);
},

enter: function() {
var self = this;

var hosts = self.hosts = { };

$('#dashboard-hosts').empty();
self.toggle_edit(false);

$(shell.hosts).on("added.dashboard", added);
$(shell.hosts).on("removed.dashboard", removed);
Expand All @@ -124,14 +212,24 @@ PageDashboard.prototype = {
function added(event, addr) {
var info = hosts[addr] = { };
info.link = $('<a class="list-group-item">').append(
$('<button class="btn btn-default" style="float:right">').
$('<button class="btn btn-default edit-button" style="float:right">').
toggle(self.edit_enabled).
text("-").
click(function () {
self.toggle_edit(false);
var h = shell.hosts[addr];
if (h)
h.remove();
return false;
}),
$('<button class="btn btn-default edit-button" style="float:right;margin-right:10px">').
toggle(self.edit_enabled).
text("e").
click(function () {
self.toggle_edit(false);
host_edit_dialog(addr);
return false;
}),
info.avatar_img = $('<img width="32" height="32" class="host-avatar">').
attr('src', "images/server-small.png"),
info.hostname_span = $('<span>')).
Expand Down
7 changes: 7 additions & 0 deletions pkg/shell/shell.css
View file
Expand Up @@ -95,6 +95,13 @@ html, body {
white-space: nowrap;
}

#host-edit-color-popover .color-cell {
display: inline-block;
width: 25px;
height: 25px;
margin: 2px;
}

/* Style a button group */

.navbar-primary .btn-group {
Expand Down
42 changes: 42 additions & 0 deletions pkg/shell/shell.html
View file
Expand Up @@ -130,6 +130,7 @@
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" style="float:right" id="dashboard-add">+</button>
<button class="btn btn-default" style="float:right;margin-right:10px" id="dashboard-enable-edit">v</button>
<span>Servers</span>
</div>
<div class="list-group" id="dashboard-hosts">
Expand Down Expand Up @@ -2727,6 +2728,47 @@ <h4 class="modal-title">Couldn't establish connection</h4>
</div>
</div>

<div class="modal" id="host-edit-dialog"
tabindex="-1" role="dialog"
data-backdrop="static">
<div class="modal-dialog cockpit-modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Change server appearance</h4>
</div>
<div class="modal-body">
<input data-role="none" type="file"
id="host-edit-file-input" style="display:none"/>
<center>
<div>
<input class="form-control" id="host-edit-name"/>
</div>
<div id="host-edit-avatar" style="margin-top:10px"></div>
<div>
<div id="host-edit-color" data-toggle="dropdown"
style="width:256px;height:32px;margin-top:10px">
</div>
<div id="host-edit-color-popover" class="popover top in" tabindex="-1">
<div class="arrow"></div>
<div class="popover-content">
</div>
</div>
</div>
</center>
<div id="host-edit-fail"></div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary" id="host-edit-apply">
Set
</button>
</div>
</div>
</div>
</div>

<div class="cockpit-deauthorize-status" style="display: none;"></div>

</body>
Expand Down
32 changes: 31 additions & 1 deletion test/check-dashboard
View file
Expand Up @@ -61,7 +61,7 @@ class TestDashboard(MachineCase):

def machine_remove(self, b, address):
map = self.get_address_map(b)
b.click('#dashboard-hosts a:nth-child(%d) button' % (map[address]+1))
b.click('#dashboard-hosts a:nth-child(%d) button.pficon-close' % (map[address]+1))

def add_machine(self, b, address):
b.click('#dashboard-add')
Expand Down Expand Up @@ -161,6 +161,36 @@ class TestDashboard(MachineCase):
b.click('#hosts a:nth-child(2)')
b.wait_js_func('(function (expected) { return cockpit.location.href == expected })', last_href)

def testEdit(self):
b = self.browser
m = self.machine

self.login_and_go("dashboard")
self.inject_extras(b)
self.wait_dashboard_addresses (b, [ "localhost" ])

b.wait_not_visible('#dashboard-hosts a:first-child button.pficon-edit')
b.click('#dashboard-enable-edit')
b.wait_visible('#dashboard-hosts a:first-child button.pficon-edit')

b.click('#dashboard-hosts a:first-child button.pficon-edit')
b.wait_not_visible('#dashboard-hosts a:first-child button.pficon-edit')

b.wait_js_cond('shell.hosts["localhost"].color == "gray"')

b.wait_popup('host-edit-dialog')
b.set_val('#host-edit-name', "Horst")
b.click('#host-edit-color')
b.wait_visible('#host-edit-color-popover')
b.click('#host-edit-color-popover div.popover-content > div:first-child > div:first-child')
b.wait_not_visible('#host-edit-color-popover')
b.click('#host-edit-apply')
b.wait_popdown('host-edit-dialog')

b.wait_text('#dashboard-hosts a:first-child span', "Horst")
b.wait_js_cond('shell.hosts["localhost"].color != "gray"')
self.assertEqual(m.execute("hostnamectl --pretty"), "Horst\n")

def testSetup(self):
b = self.browser

Expand Down

0 comments on commit 2b12461

Please sign in to comment.