Revision 7af53e78
| b/ui/static/main.css | ||
|---|---|---|
| 876 | 876 |
top: 9px; |
| 877 | 877 |
} |
| 878 | 878 |
|
| 879 |
.standard .machine img {
|
|
| 879 |
.standard .machine .logo {
|
|
| 880 | 880 |
float: left; |
| 881 |
width: 50px; |
|
| 882 |
height: 54px; |
|
| 881 | 883 |
margin: 4px 14px 0; |
| 882 | 884 |
} |
| 885 |
.machine .logo {
|
|
| 886 |
background-image: url("./icons/machines/medium/unknown-sprite.png");
|
|
| 887 |
background-repeat: no-repeat; |
|
| 888 |
cursor: pointer; |
|
| 889 |
} |
|
| 890 |
|
|
| 891 |
.standard .machine .single-image-state1 {
|
|
| 892 |
background-position: 0px 0; |
|
| 893 |
} |
|
| 894 |
|
|
| 895 |
.standard .machine .single-image-state3 {
|
|
| 896 |
background-position: -100px 0; |
|
| 897 |
} |
|
| 898 |
|
|
| 899 |
.standard .machine .single-image-state4 {
|
|
| 900 |
background-position: -150px 0; |
|
| 901 |
} |
|
| 902 |
|
|
| 903 |
.standard .machine .single-image-state2 {
|
|
| 904 |
background-position: -50px 0; |
|
| 905 |
} |
|
| 883 | 906 |
|
| 884 |
.standard .running .machine img {
|
|
| 907 |
.standard .running .machine .logo {
|
|
| 885 | 908 |
cursor: pointer; |
| 886 | 909 |
} |
| 887 | 910 |
|
| ... | ... | |
| 3515 | 3538 |
|
| 3516 | 3539 |
.single .single-image {
|
| 3517 | 3540 |
width: 126px; |
| 3541 |
height: 136px; |
|
| 3518 | 3542 |
margin-bottom: 10px; |
| 3519 | 3543 |
margin-left: 4px; |
| 3544 |
background-image: url("./icons/machines/large/unknown-sprite.png");
|
|
| 3545 |
background-repeat: no-repeat; |
|
| 3546 |
cursor: pointer; |
|
| 3547 |
} |
|
| 3548 |
|
|
| 3549 |
.single .single-image-state1 {
|
|
| 3550 |
background-position: 0px 0; |
|
| 3551 |
} |
|
| 3552 |
|
|
| 3553 |
.single .single-image-state3 {
|
|
| 3554 |
background-position: -252px 0; |
|
| 3555 |
} |
|
| 3556 |
|
|
| 3557 |
.single .single-image-state4 {
|
|
| 3558 |
background-position: -378px 0; |
|
| 3559 |
} |
|
| 3560 |
|
|
| 3561 |
.single .single-image-state2 {
|
|
| 3562 |
background-position: -126px 0; |
|
| 3520 | 3563 |
} |
| 3521 | 3564 |
|
| 3522 | 3565 |
.single .column3 .previous, .single .column3 .next {
|
| b/ui/static/synnefo.js | ||
|---|---|---|
| 1227 | 1227 |
// success: Update icons if meta key is OS |
| 1228 | 1228 |
if (meta_key == "OS") {
|
| 1229 | 1229 |
$("#metadata-wizard .machine-icon").attr("src","static/icons/machines/small/" + os_icon_from_value(meta_value) + '-' + $("#metadata-wizard div#on-off").text() + '.png');
|
| 1230 |
$("#machinesview-icon").find("div#" + serverID).find("img.logo").attr("src", "static/icons/machines/medium/" + os_icon_from_value(meta_value) + '-' + $("#metadata-wizard div#on-off").text() + '.png');
|
|
| 1230 |
var machine = $("#machinesview-icon").find("div#" + serverID);
|
|
| 1231 |
var os = os_icon_from_value(meta_value); |
|
| 1232 |
var state = $("#metadata-wizard div#on-off").text()
|
|
| 1233 |
set_machine_os_image(machine, "icon", state, os); |
|
| 1231 | 1234 |
} |
| 1232 | 1235 |
} |
| 1233 | 1236 |
}); |
| ... | ... | |
| 1903 | 1906 |
var rows = $("tr:has(input[type=checkbox]:checked)",table);
|
| 1904 | 1907 |
return rows; |
| 1905 | 1908 |
} |
| 1909 |
|
|
| 1910 |
// machines images utils |
|
| 1911 |
function set_machine_os_image(machine, machines_view, state, os, skip_reset_states, remove_state) {
|
|
| 1912 |
var views_map = {'single': '.single-image', 'icon': '.logo'};
|
|
| 1913 |
var states_map = {'on': 'state1', 'off': 'state3', 'hover': 'state4', 'click': 'state2'}
|
|
| 1914 |
var sizes_map = {'single': 'large', 'icon': 'medium'}
|
|
| 1915 |
|
|
| 1916 |
console.log(state); |
|
| 1917 |
|
|
| 1918 |
var size = sizes_map[machines_view]; |
|
| 1919 |
var img_selector = views_map[machines_view]; |
|
| 1920 |
var cls = states_map[state]; |
|
| 1921 |
var new_img = 'url("./static/icons/machines/' + size + '/' + os + '-sprite.png")';
|
|
| 1922 |
|
|
| 1923 |
var el = $(img_selector, machine); |
|
| 1924 |
var current_img = el.css("backgroundImage");
|
|
| 1925 |
if (os == undefined){
|
|
| 1926 |
new_img = current_img; |
|
| 1927 |
} |
|
| 1928 |
|
|
| 1929 |
// os changed |
|
| 1930 |
el.css("backgroundImage", new_img);
|
|
| 1931 |
|
|
| 1932 |
// reset current state |
|
| 1933 |
if (skip_reset_states === undefined) |
|
| 1934 |
{
|
|
| 1935 |
el.removeClass("single-image-state1");
|
|
| 1936 |
el.removeClass("single-image-state2");
|
|
| 1937 |
el.removeClass("single-image-state3");
|
|
| 1938 |
} |
|
| 1939 |
|
|
| 1940 |
if (remove_state !== undefined) |
|
| 1941 |
{
|
|
| 1942 |
remove_state = "single-image-" + states_map[remove_state]; |
|
| 1943 |
el.removeClass(remove_state); |
|
| 1944 |
return; |
|
| 1945 |
} |
|
| 1946 |
|
|
| 1947 |
console.log(cls); |
|
| 1948 |
// set proper state |
|
| 1949 |
el.addClass("single-image-" + cls);
|
|
| 1950 |
} |
|
| 1951 |
|
|
| b/ui/templates/machines_icon.html | ||
|---|---|---|
| 41 | 41 |
<div class="machine" id="machine-template"> |
| 42 | 42 |
<div class='connect-border' title='{% trans 'Connect to machine' %}'></div>
|
| 43 | 43 |
<div class='connect-arrow' title='{% trans 'Connect to machine' %}'></div>
|
| 44 |
<img class="logo" src="" />
|
|
| 44 |
<div class="logo"></div>
|
|
| 45 | 45 |
<div class="machine-details"> |
| 46 | 46 |
<div href="#" class="name"> |
| 47 | 47 |
<h5 class="namecontainer editable"> |
| ... | ... | |
| 170 | 170 |
|
| 171 | 171 |
init_action_indicator_handlers('icon');
|
| 172 | 172 |
|
| 173 |
// handle connect machine image states |
|
| 174 |
$("div.connect-arrow, div.running .machine .logo").live('mouseenter',
|
|
| 175 |
function() {
|
|
| 176 |
set_machine_os_image($(this).parent().parent(), "icon", "hover", undefined, 1); |
|
| 177 |
}); |
|
| 178 |
|
|
| 179 |
$("div.connect-arrow, div.running .machine .logo").live('mouseleave',
|
|
| 180 |
function() {
|
|
| 181 |
set_machine_os_image($(this).parent().parent(), "icon", "hover", undefined, 1, "hover"); |
|
| 182 |
}); |
|
| 183 |
|
|
| 184 |
$("div.connect-arrow, div.running .machine .logo").live('mousedown',
|
|
| 185 |
function() {
|
|
| 186 |
set_machine_os_image($(this).parent().parent(), "icon", "click", undefined, 1); |
|
| 187 |
}); |
|
| 188 |
|
|
| 189 |
$("div.connect-arrow, div.running .machine .logo").live('mouseup',
|
|
| 190 |
function() {
|
|
| 191 |
set_machine_os_image($(this).parent().parent(), "icon", "click", undefined, 1, "click"); |
|
| 192 |
}); |
|
| 193 |
|
|
| 173 | 194 |
// actions on machine mouseover |
| 174 | 195 |
$("#machinesview-icon.standard .machine").live('mouseover', function() {
|
| 175 | 196 |
// show connect button only if the machine is active |
| ... | ... | |
| 203 | 224 |
}); |
| 204 | 225 |
|
| 205 | 226 |
// open console on connect arrow click |
| 227 |
$("#machinesview-icon.standard .running div.logo").live('click', function(){
|
|
| 228 |
$(this).parent().parent().find("a.action-console").click();
|
|
| 229 |
return false; |
|
| 230 |
}); |
|
| 231 |
|
|
| 206 | 232 |
$("#machinesview-icon.standard .running div.connect-arrow").live('click', function(){
|
| 207 | 233 |
$(this).parent().parent().find("a.action-console").click();
|
| 208 | 234 |
return false; |
| ... | ... | |
| 539 | 565 |
// from an active state to an inactive one |
| 540 | 566 |
log_server_status_change(existing, server.status); |
| 541 | 567 |
moved = existing.clone().appendTo("#machinesview-icon.standard .terminated");
|
| 542 |
moved.find("img.logo").attr("src",'static/icons/machines/medium/' + server_image + '-off.png');
|
|
| 568 |
set_machine_os_image(moved, "icon", "off", server_image);
|
|
| 543 | 569 |
existing.remove(); |
| 544 | 570 |
existing = moved; |
| 545 | 571 |
existing.find(".status").text(STATUSES[server.status]);
|
| ... | ... | |
| 556 | 582 |
// From an inactive state to an active one |
| 557 | 583 |
log_server_status_change(existing, server.status); |
| 558 | 584 |
moved = existing.clone().appendTo("#machinesview-icon.standard .running");
|
| 559 |
moved.find("img.logo").attr('src','static/icons/machines/medium/' + server_image + '-on.png');
|
|
| 585 |
set_machine_os_image(moved, "icon", "on", server_image);
|
|
| 560 | 586 |
existing.remove(); |
| 561 | 587 |
existing = moved; |
| 562 | 588 |
existing.find(".status").text(STATUSES[server.status]);
|
| ... | ... | |
| 606 | 632 |
// check server status to select where to append the new server to |
| 607 | 633 |
if (ACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0 ) {
|
| 608 | 634 |
// append to running |
| 609 |
machine.find("img.logo").attr("src","static/icons/machines/medium/"+server_image+'-on.png');
|
|
| 635 |
set_machine_os_image(machine, "icon", "on", server_image);
|
|
| 610 | 636 |
machine.appendTo("#machinesview-icon.standard .running");
|
| 611 | 637 |
} else {
|
| 612 | 638 |
// append to terminated |
| 613 |
machine.find("img.logo").attr("src","static/icons/machines/medium/"+server_image+'-off.png');
|
|
| 639 |
set_machine_os_image(machine, "icon", "off", server_image);
|
|
| 614 | 640 |
machine.appendTo("#machinesview-icon.standard .terminated");
|
| 615 | 641 |
if (server.status == "STOPPED") { //if server status us stopped is a different case than status unknown/error
|
| 616 | 642 |
machine.find('.state').removeClass().addClass('state terminated-state');
|
| b/ui/templates/machines_single.html | ||
|---|---|---|
| 43 | 43 |
<div class="column1"> |
| 44 | 44 |
<div class='connect-border' title='{% trans 'Connect to machine' %}'></div>
|
| 45 | 45 |
<div class='connect-arrow' title='{% trans 'Connect to machine' %}'></div>
|
| 46 |
<img src="static/icons/machines/large/ubuntu-on.png" class="single-image" />
|
|
| 46 |
<div class="single-image" />
|
|
| 47 | 47 |
<div class="state"> |
| 48 | 48 |
<span class="state-label">{% trans "Running" %}</span>
|
| 49 | 49 |
<div class="indicators"> |
| ... | ... | |
| 191 | 191 |
//hide the all of the tags contents |
| 192 | 192 |
$("#machinesview-single.single .tags-content").hide();
|
| 193 | 193 |
|
| 194 |
// handle connect machine image states |
|
| 195 |
$("div.connect-arrow, .single-image").live('mouseenter',
|
|
| 196 |
function() {
|
|
| 197 |
// ugly check to see if machine is running |
|
| 198 |
if ($(this).parent().find(".terminated-state").length > 0) { return };
|
|
| 199 |
set_machine_os_image($(this).parent().parent(), "single", "hover", undefined, 1); |
|
| 200 |
}); |
|
| 201 |
|
|
| 202 |
$("div.connect-arrow, .single-image").live('mouseleave',
|
|
| 203 |
function() {
|
|
| 204 |
if ($(this).parent().find(".terminated-state").length > 0) { return };
|
|
| 205 |
set_machine_os_image($(this).parent().parent(), "single", "hover", undefined, 1, "hover"); |
|
| 206 |
}); |
|
| 207 |
|
|
| 208 |
$("div.connect-arrow, .single-image").live('mousedown',
|
|
| 209 |
function() {
|
|
| 210 |
if ($(this).parent().find(".terminated-state").length > 0) { return };
|
|
| 211 |
set_machine_os_image($(this).parent().parent(), "single", "click", undefined, 1); |
|
| 212 |
}); |
|
| 213 |
|
|
| 214 |
$("div.connect-arrow, .single-image").live('mouseup',
|
|
| 215 |
function() {
|
|
| 216 |
if ($(this).parent().find(".terminated-state").length > 0) { return };
|
|
| 217 |
set_machine_os_image($(this).parent().parent(), "single", "click", undefined, 1, "click"); |
|
| 218 |
}); |
|
| 219 |
|
|
| 194 | 220 |
//toggle the component with class tags-content |
| 195 | 221 |
$("#machinesview-single.single div.tags-header").live('click', function() {
|
| 196 | 222 |
if ($(this).find('.toggler').hasClass('up')) {
|
| ... | ... | |
| 445 | 471 |
INACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {
|
| 446 | 472 |
// from an active state to an inactive one |
| 447 | 473 |
log_server_status_change(existing, server.status); |
| 448 |
existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-off.png');
|
|
| 474 |
set_machine_os_image(existing, "single", "off", server_image);
|
|
| 449 | 475 |
existing.find(".column1 .state-label").text(STATUSES[server.status]);
|
| 450 | 476 |
existing.find(".connect-border").hide();
|
| 451 | 477 |
existing.find(".connect-arrow").hide();
|
| ... | ... | |
| 458 | 484 |
ACTIVE_STATES.indexOf(STATUSES[server.status]) >= 0) {
|
| 459 | 485 |
// From an inactive state to an active one |
| 460 | 486 |
log_server_status_change(existing, server.status); |
| 461 |
existing.find("img.single-image").attr("src","static/icons/machines/large/" + server_image + '-on.png');
|
|
| 487 |
set_machine_os_image(existing, "single", "on", server_image);
|
|
| 462 | 488 |
existing.find(".column1 .state-label").text(STATUSES[server.status]);
|
| 463 | 489 |
existing.find(".connect-border").show();
|
| 464 | 490 |
existing.find(".connect-arrow").show();
|
| ... | ... | |
| 512 | 538 |
var machine = $("#machinesview-single.single #machine-container-template").clone().attr("id", server.id);
|
| 513 | 539 |
machine.find(".scrollable").scrollable({vertical: true});
|
| 514 | 540 |
machine.find(".machine-details div.name").text(server.name.substring(0,30));
|
| 515 |
machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-on.png');
|
|
| 541 |
set_machine_os_image(machine, "single", "on", server_image);
|
|
| 516 | 542 |
machine.find("span.imagetag").text(server_image);
|
| 517 | 543 |
machine.find(".column1 .state-label").text(STATUSES[server.status]);
|
| 518 | 544 |
// find and display flavor parameters |
| ... | ... | |
| 530 | 556 |
machine.find(".machine-details div.ipv6").text(ips['ip6']);
|
| 531 | 557 |
//show off image if server is not active |
| 532 | 558 |
if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) < 0){
|
| 533 |
machine.find("img.single-image").attr("src","static/icons/machines/large/"+server_image+'-off.png');
|
|
| 559 |
set_machine_os_image(machine, "single", "off", server_image);
|
|
| 534 | 560 |
machine.find(".connect-border").hide();
|
| 535 | 561 |
machine.find(".connect-arrow").hide();
|
| 536 | 562 |
machine.find(".column1 .state").removeClass().addClass("state terminated-state");
|
Also available in: Unified diff