Revision e9b14cb8
b/ui/static/ie.css | ||
---|---|---|
36 | 36 |
} |
37 | 37 |
|
38 | 38 |
#wizard { |
39 |
height: 450px;
|
|
39 |
height: 468px;
|
|
40 | 40 |
} |
41 | 41 |
|
42 | 42 |
#wizard .topruler, #networks-wizard .topruler { |
... | ... | |
135 | 135 |
|
136 | 136 |
#wizard .separator-end { |
137 | 137 |
font-size: 2%; |
138 |
margin-top: 383px;
|
|
138 |
margin-top: 401px;
|
|
139 | 139 |
} |
140 | 140 |
|
141 | 141 |
div.confirm_single { |
... | ... | |
288 | 288 |
} |
289 | 289 |
|
290 | 290 |
#networks-wizard .separator-end { |
291 |
margin-top: 5px;
|
|
291 |
margin-top: 8px;
|
|
292 | 292 |
} |
293 | 293 |
|
294 | 294 |
.private-networks .state div { |
b/ui/static/main.css | ||
---|---|---|
309 | 309 |
/* server wizard scrollable root element and network wizard */ |
310 | 310 |
#wizard, #networks-wizard { |
311 | 311 |
font-size:75%; |
312 |
height:405px;
|
|
312 |
height:425px;
|
|
313 | 313 |
width:453px; |
314 | 314 |
overflow:hidden; |
315 | 315 |
position:absolute !important; |
... | ... | |
562 | 562 |
background-color: #387693; |
563 | 563 |
height: 5px; |
564 | 564 |
margin-left: -14px; |
565 |
margin-top: 362px;
|
|
565 |
margin-top: 382px;
|
|
566 | 566 |
width: 550px; |
567 | 567 |
} |
568 | 568 |
|
... | ... | |
1209 | 1209 |
color: #FFFFFF |
1210 | 1210 |
} |
1211 | 1211 |
|
1212 |
div.machine-type label.disabled { |
|
1213 |
color: #aaa !important; |
|
1214 |
} |
|
1215 |
|
|
1212 | 1216 |
#machinesview { |
1213 | 1217 |
min-height: 270px; |
1214 | 1218 |
margin-top: 40px; |
... | ... | |
3808 | 3812 |
height: 6px; |
3809 | 3813 |
width: 479px; |
3810 | 3814 |
margin-left: -13px; |
3811 |
margin-top: 22px;
|
|
3815 |
margin-top: 19px;
|
|
3812 | 3816 |
} |
3813 | 3817 |
|
3814 | 3818 |
.red { |
... | ... | |
4294 | 4298 |
padding: 0 10px; |
4295 | 4299 |
text-align: center; |
4296 | 4300 |
} |
4301 |
|
|
4302 |
.slider .slider-point { |
|
4303 |
width: 4px; |
|
4304 |
height: 3px; |
|
4305 |
margin-left: 1px; |
|
4306 |
background-color: transparent; |
|
4307 |
display: block; |
|
4308 |
position: absolute; |
|
4309 |
z-index: 10; |
|
4310 |
bottom: 0px; |
|
4311 |
} |
|
4312 |
|
|
4313 |
.slider .slider-point-light { |
|
4314 |
background-color: transparent; |
|
4315 |
} |
|
4316 |
|
|
4317 |
.slider-point-text { |
|
4318 |
font-size: 0.6em; |
|
4319 |
position: absolute; |
|
4320 |
top: 4px; |
|
4321 |
border-top: 5px solid #C5DEE9; |
|
4322 |
padding: 3px; |
|
4323 |
color: #4085A5; |
|
4324 |
display: block; |
|
4325 |
min-width: 6px; |
|
4326 |
text-align: middle; |
|
4327 |
} |
|
4328 |
|
|
4329 |
.slider .handle { |
|
4330 |
z-index: 50; |
|
4331 |
} |
|
4332 |
|
|
4333 |
.modal p.desc { |
|
4334 |
margin: 5px 0; |
|
4335 |
margin-left: 37px; |
|
4336 |
font-size: 0.8em; |
|
4337 |
color: #888; |
|
4338 |
} |
b/ui/static/synnefo.js | ||
---|---|---|
566 | 566 |
old_server.network_transition = undefined; |
567 | 567 |
}; |
568 | 568 |
} |
569 |
} catch (err) { console.info(err) } |
|
569 |
} catch (err) { |
|
570 |
// no old server |
|
571 |
} |
|
570 | 572 |
|
571 | 573 |
if (exists !== false) { |
572 | 574 |
try { |
... | ... | |
732 | 734 |
images = data.images.values; |
733 | 735 |
jQuery.parseJSON(data); |
734 | 736 |
update_wizard_images(); |
737 |
|
|
738 |
// update images options |
|
739 |
update_image_flavor_options(); |
|
740 |
handle_image_choice_changed(); |
|
735 | 741 |
} catch(err){ |
736 | 742 |
ajax_error("NO_IMAGES"); |
737 | 743 |
} |
... | ... | |
740 | 746 |
return false; |
741 | 747 |
} |
742 | 748 |
|
749 |
// update images panel |
|
743 | 750 |
function update_wizard_images() { |
744 | 751 |
if ($("ul#standard-images li").toArray().length + $("ul#custom-images li").toArray().length == 0) { |
745 | 752 |
$.each(images, function(i,image){ |
... | ... | |
768 | 775 |
img.appendTo("ul#standard-images"); |
769 | 776 |
} |
770 | 777 |
}); |
778 |
|
|
779 |
$(".image-container input[type=radio]").change(function(){ |
|
780 |
handle_image_choice_changed(); |
|
781 |
}); |
|
782 |
} |
|
783 |
} |
|
784 |
|
|
785 |
|
|
786 |
// get closest value from specified percentage |
|
787 |
function get_closest_option(perc, map) { |
|
788 |
min = 1; |
|
789 |
max = Math.max.apply(Math, map); |
|
790 |
|
|
791 |
// create a map with percentages |
|
792 |
perc_map = []; |
|
793 |
$.each(map, function(i,v) { |
|
794 |
perc_map[i] = parseInt(range_value_to_percentage(v, map)); |
|
795 |
|
|
796 |
}) |
|
797 |
|
|
798 |
perc_map = perc_map.sort(function(a,b){return a>b}); |
|
799 |
// find closest percentage |
|
800 |
var close = perc_map[0]; |
|
801 |
found = close; |
|
802 |
found_pos = 0; |
|
803 |
diff = Math.abs(close - perc); |
|
804 |
|
|
805 |
// get closest based on map values |
|
806 |
for (var i=1; i< perc_map.length; i++) { |
|
807 |
if (Math.abs(perc_map[i] - perc) > diff) { |
|
808 |
break; |
|
809 |
} else { |
|
810 |
found = perc_map[i]; |
|
811 |
found_pos = i; |
|
812 |
diff = Math.abs(perc_map[i] - perc); |
|
813 |
} |
|
814 |
} |
|
815 |
|
|
816 |
var val = range_percentage_to_value(perc_map[found_pos], map); |
|
817 |
return val; |
|
818 |
} |
|
819 |
|
|
820 |
// get closest percentage from specified value |
|
821 |
function get_closest_from_value(value, map) { |
|
822 |
var perc = range_value_to_percentage(value, map, false); |
|
823 |
var close_val = get_closest_option(perc, map); |
|
824 |
var value = range_value_to_percentage(close_val, map); |
|
825 |
return value; |
|
826 |
} |
|
827 |
|
|
828 |
// convert a range value (e.g. ram 1024) to percentage |
|
829 |
function range_value_to_percentage(value, map, valid) { |
|
830 |
if (valid == undefined) { valid = true } |
|
831 |
var pos = map.indexOf(value) |
|
832 |
|
|
833 |
// do we need to validate that value is in the map |
|
834 |
if (pos == -1 && valid ) { return 0 } |
|
835 |
if (value == 1) { return 0; } |
|
836 |
if (pos == map.length -1) { return 100; } |
|
837 |
|
|
838 |
perc = value * (100 / Math.max.apply(Math, map)); |
|
839 |
|
|
840 |
// fix for small fragmentations |
|
841 |
min = 1; max = Math.max.apply(Math, map); |
|
842 |
if (max - min <= 4) { |
|
843 |
perc = perc - 12 |
|
844 |
} |
|
845 |
|
|
846 |
return perc; |
|
847 |
} |
|
848 |
|
|
849 |
// get range value to display based on the percentage value |
|
850 |
// of the range control |
|
851 |
function range_percentage_to_value(value, map) { |
|
852 |
min = 0; max = Math.max.apply(Math, map); |
|
853 |
ret = Math.round(value * max / 100); |
|
854 |
|
|
855 |
// fix for small fragmentations |
|
856 |
if (max - min <= 4) { ret = ret; } |
|
857 |
if (ret < min) { ret = min; } |
|
858 |
if (ret >= max) { ret = max; } |
|
859 |
ret = ret; |
|
860 |
// 0 is not an option |
|
861 |
ret = ret == 0 ? 1: ret; |
|
862 |
return ret; |
|
863 |
} |
|
864 |
|
|
865 |
// get flavor unique index key |
|
866 |
function get_flavor_index_key(flv) { |
|
867 |
return "cpu:" + flv.cpu + ":ram:" + flv.ram + ":disk:" + flv.disk |
|
868 |
} |
|
869 |
|
|
870 |
// create a map with available flavors for each image |
|
871 |
function update_image_flavor_options() { |
|
872 |
// invalid state, do not update, |
|
873 |
// wait for both images and flavors to get filled/updated |
|
874 |
if (!window.images || !window.flavors) { |
|
875 |
return |
|
876 |
} |
|
877 |
|
|
878 |
// create images flavors map |
|
879 |
var images_options = {}; |
|
880 |
$.each(images, function(i, img) { |
|
881 |
images_options[img.id] = {flavors:{}, options:{cpu:[], ram:[], disk:[]}}; |
|
882 |
// check disk usage |
|
883 |
var disk_limit = img.metadata.values.size; |
|
884 |
var image_flavors = {}; |
|
885 |
var image_options = {cpu:[], ram:[], disk:[]}; |
|
886 |
var flavor_combinations = []; |
|
887 |
var default_flavor = undefined; |
|
888 |
$.each(flavors, function(j, flv) { |
|
889 |
var disk = flv.disk * 1000; |
|
890 |
// flavor size can contain image size |
|
891 |
if (disk > disk_limit) { |
|
892 |
image_flavors[flv.id] = flv; |
|
893 |
image_options.cpu.push(flv.cpu) |
|
894 |
image_options.ram.push(flv.ram) |
|
895 |
image_options.disk.push(flv.disk) |
|
896 |
|
|
897 |
// create combinations indexes |
|
898 |
flavor_combinations.push(get_flavor_index_key(flv)); |
|
899 |
default_flavor = default_flavor || flv; |
|
900 |
} else { |
|
901 |
} |
|
902 |
}); |
|
903 |
|
|
904 |
// update image suggested flavors |
|
905 |
var suggested = []; |
|
906 |
$.each(SUGGESTED_FLAVORS, function(i, el) { |
|
907 |
// image contains suggested flavor ??? |
|
908 |
if (flavor_combinations.indexOf(get_flavor_index_key(el)) > -1){ |
|
909 |
suggested.push(i); |
|
910 |
} |
|
911 |
}); |
|
912 |
|
|
913 |
// unique data |
|
914 |
image_options.cpu = image_options.cpu.unique(); |
|
915 |
image_options.ram = image_options.ram.unique(); |
|
916 |
image_options.disk = image_options.disk.unique(); |
|
917 |
flavor_combinations = flavor_combinations.unique(); |
|
918 |
|
|
919 |
// sort data |
|
920 |
var numeric_sort = function(a,b){return a>b}; |
|
921 |
image_options.cpu = image_options.cpu.sort(numeric_sort); |
|
922 |
image_options.ram = image_options.ram.sort(numeric_sort); |
|
923 |
image_options.disk = image_options.disk.sort(numeric_sort); |
|
924 |
|
|
925 |
// append data |
|
926 |
images_options[img.id].flavors = image_flavors; |
|
927 |
images_options[img.id].options = image_options; |
|
928 |
images_options[img.id].image = img; |
|
929 |
images_options[img.id].flavors_index = flavor_combinations; |
|
930 |
images_options[img.id].default_flavor = default_flavor; |
|
931 |
images_options[img.id].suggested = suggested; |
|
932 |
}) |
|
933 |
|
|
934 |
// export it to global namespace |
|
935 |
window.IMAGES_DATA = images_options; |
|
936 |
} |
|
937 |
|
|
938 |
// is flavor available for the specified image ??? |
|
939 |
function image_flavor_available(image_ref, flavor_object) { |
|
940 |
return IMAGES_DATA[image_ref].flavors_index.indexOf(get_flavor_index_key(flavor_object)) > -1; |
|
941 |
} |
|
942 |
|
|
943 |
// update sliders and flavor choices on ui |
|
944 |
function handle_image_choice_changed() { |
|
945 |
try { |
|
946 |
validate_selected_flavor_options(); |
|
947 |
repaint_flavor_choices(); |
|
948 |
update_suggested_flavors(); |
|
949 |
} catch (err) { |
|
950 |
console.error(err); |
|
951 |
} |
|
952 |
} |
|
953 |
|
|
954 |
// disable/enable suggested flavor options (small/medium/large) |
|
955 |
function update_suggested_flavors() { |
|
956 |
var img_id = get_selected_image_id(); |
|
957 |
var img = IMAGES_DATA[img_id]; |
|
958 |
|
|
959 |
// disable all |
|
960 |
$("#machinetype input[type=radio]").attr("disabled", "disabled").parent().addClass("disabled"); |
|
961 |
|
|
962 |
$.each(SUGGESTED_FLAVORS, function(i, el) { |
|
963 |
if (img.suggested.indexOf(i) != -1) { |
|
964 |
$("#machinetype label input[value="+i+"]").attr("disabled", "").parent().removeClass("disabled"); |
|
965 |
} |
|
966 |
}) |
|
967 |
$("#machinetype label input[value=custom]").attr("disabled", "").parent().removeClass("disabled"); |
|
968 |
|
|
969 |
// select first enabled |
|
970 |
$($("#machinetype input[type=radio]").not(":disabled")[0]).click(); |
|
971 |
} |
|
972 |
|
|
973 |
// clear points |
|
974 |
function clean_flavor_choice_points() { |
|
975 |
$(".slider-container .slider .slider-point").remove(); |
|
976 |
} |
|
977 |
|
|
978 |
function repaint_flavor_choices() { |
|
979 |
clean_flavor_choice_points(); |
|
980 |
var img = IMAGES_DATA[get_selected_image_id()]; |
|
981 |
function paint_slider_points(slider, points) { |
|
982 |
$.each(points, function(i, point) { |
|
983 |
// proper width |
|
984 |
var width = slider.width() - slider.find(".handle").width(); |
|
985 |
// progress number |
|
986 |
var progress = slider.find(".progress").width(); |
|
987 |
// percentage based on value |
|
988 |
var perc = range_value_to_percentage(point, points); |
|
989 |
// position |
|
990 |
var pos = perc*width/100; |
|
991 |
|
|
992 |
// handlers |
|
993 |
var last = false; |
|
994 |
var first = false; |
|
995 |
if (pos == 0) { first - true; pos = 2} |
|
996 |
if (pos == width) { last = true; } |
|
997 |
|
|
998 |
// create pointer container and text |
|
999 |
var text = $('<span class="slider-point-text">' + point + '</span>'); |
|
1000 |
var span = $('<span class="slider-point"></span>').css("left", pos + "px").addClass(pos <= progress ? "slider-point-light": ""); |
|
1001 |
span.append(text); |
|
1002 |
|
|
1003 |
// wait for element to get dimensions |
|
1004 |
setTimeout(function() { |
|
1005 |
// choose text pointer position |
|
1006 |
move = "-" + ($(text).width()/2 + 1) + "px"; |
|
1007 |
if (last) { move = "-" + ($(text).width() - 2) + "px"; } |
|
1008 |
if (first) { move = "0px"; } |
|
1009 |
$(text).css("margin-left", move); |
|
1010 |
}, 100); |
|
1011 |
// append to slider |
|
1012 |
slider.append(span); |
|
1013 |
}); |
|
1014 |
} |
|
1015 |
|
|
1016 |
// paint points for each slider |
|
1017 |
paint_slider_points($("#cpu-indicator").parent().find(".slider"), img.options.cpu); |
|
1018 |
paint_slider_points($("#storage-indicator").parent().find(".slider"), img.options.disk); |
|
1019 |
paint_slider_points($("#ram-indicator").parent().find(".slider"), img.options.ram); |
|
1020 |
} |
|
1021 |
|
|
1022 |
function validate_selected_flavor_options(selected) { |
|
1023 |
var img = IMAGES_DATA[get_selected_image_id()]; |
|
1024 |
if (!check_selected_flavor_values()) { |
|
1025 |
var flv = img.default_flavor; |
|
1026 |
set_flavor_sliders_values(flv.cpu, flv.disk, flv.ram); |
|
1027 |
} |
|
1028 |
} |
|
1029 |
|
|
1030 |
// check if selected values are available |
|
1031 |
// as a flavor for the image |
|
1032 |
function check_selected_flavor_values() { |
|
1033 |
var img = IMAGES_DATA[get_selected_image_id()]; |
|
1034 |
var values = get_flavor_sliders_values(); |
|
1035 |
var found = false; |
|
1036 |
|
|
1037 |
// index lookup |
|
1038 |
if (img.flavors_index.indexOf(get_flavor_index_key(values)) > -1) { |
|
1039 |
// return flavor id |
|
1040 |
return identify_flavor(values.cpu, values.disk, values.ram); |
|
771 | 1041 |
} |
1042 |
|
|
1043 |
return false; |
|
1044 |
} |
|
1045 |
|
|
1046 |
// find which image is selected |
|
1047 |
// return the options requested available for this image |
|
1048 |
function get_selected_image_options(opt_name) { |
|
1049 |
var img_id = get_selected_image_id(); |
|
1050 |
var img = IMAGES_DATA[img_id]; |
|
1051 |
return img.options[opt_name]; |
|
1052 |
} |
|
1053 |
|
|
1054 |
// identify selected image |
|
1055 |
function get_selected_image_id() { |
|
1056 |
return $(".image-container input:checked").attr("id").replace("img-radio-", ""); |
|
772 | 1057 |
} |
773 | 1058 |
|
774 | 1059 |
function update_wizard_flavors(){ |
1060 |
|
|
1061 |
// find max range values |
|
1062 |
cpus_max = Math.max.apply(Math, cpus); |
|
1063 |
cpus_min = 1; |
|
1064 |
|
|
1065 |
disks_max = Math.max.apply(Math, disks); |
|
1066 |
disks_min = 1; |
|
1067 |
|
|
1068 |
ram_max = Math.max.apply(Math, ram); |
|
1069 |
ram_min = 1; |
|
1070 |
|
|
775 | 1071 |
// sliders for selecting VM flavor |
776 |
$("#cpu:range").rangeinput({min:0,
|
|
1072 |
$("#cpu:range").rangeinput({min:1,
|
|
777 | 1073 |
value:0, |
778 | 1074 |
step:1, |
779 | 1075 |
progress: true, |
780 |
max:cpus.length-1});
|
|
1076 |
max:100});
|
|
781 | 1077 |
|
782 |
$("#storage:range").rangeinput({min:0,
|
|
1078 |
$("#storage:range").rangeinput({min:1,
|
|
783 | 1079 |
value:0, |
784 | 1080 |
step:1, |
785 | 1081 |
progress: true, |
786 |
max:disks.length-1});
|
|
1082 |
max:100});
|
|
787 | 1083 |
|
788 |
$("#ram:range").rangeinput({min:0,
|
|
1084 |
$("#ram:range").rangeinput({min:1,
|
|
789 | 1085 |
value:0, |
790 | 1086 |
step:1, |
791 | 1087 |
progress: true, |
792 |
max:ram.length-1}); |
|
793 |
$("#small").click(); |
|
1088 |
max:100}); |
|
794 | 1089 |
|
795 | 1090 |
// update the indicators when sliding |
796 | 1091 |
$("#cpu:range").data().rangeinput.onSlide(function(event,value){ |
797 |
$("#cpu-indicator")[0].value = cpus[Number(value)]; |
|
1092 |
var cpus = get_selected_image_options("cpu"); |
|
1093 |
$("#cpu-indicator")[0].value = range_percentage_to_value(value, cpus); |
|
798 | 1094 |
$("#cpu-indicator").addClass('selectedrange'); |
799 | 1095 |
}); |
800 | 1096 |
$("#cpu:range").data().rangeinput.change(function(event,value){ |
801 |
$("#cpu-indicator")[0].value = cpus[Number(value)]; |
|
1097 |
var cpus = get_selected_image_options("cpu"); |
|
1098 |
$("#cpu-indicator")[0].value = range_percentage_to_value(value, cpus); |
|
1099 |
normal_value = range_value_to_percentage(get_closest_option(value, cpus), cpus); |
|
1100 |
if (this.getValue() != normal_value) { |
|
1101 |
this.setValue(normal_value); |
|
1102 |
} |
|
802 | 1103 |
$("#custom").click(); |
803 | 1104 |
$("#cpu-indicator").removeClass('selectedrange'); |
1105 |
validate_selected_flavor_options("cpu"); |
|
804 | 1106 |
}); |
805 | 1107 |
$("#ram:range").data().rangeinput.onSlide(function(event,value){ |
806 |
$("#ram-indicator")[0].value = ram[Number(value)]; |
|
1108 |
var ram = get_selected_image_options("ram"); |
|
1109 |
$("#ram-indicator")[0].value = range_percentage_to_value(value, ram); |
|
807 | 1110 |
$("#ram-indicator").addClass('selectedrange'); |
808 | 1111 |
}); |
809 | 1112 |
$("#ram:range").data().rangeinput.change(function(event,value){ |
810 |
$("#ram-indicator")[0].value = ram[Number(value)]; |
|
1113 |
var ram = get_selected_image_options("ram"); |
|
1114 |
$("#ram-indicator")[0].value = range_percentage_to_value(value, ram); |
|
1115 |
normal_value = range_value_to_percentage(get_closest_option(value, ram), ram); |
|
1116 |
if (this.getValue() != normal_value) { |
|
1117 |
this.setValue(normal_value); |
|
1118 |
} |
|
811 | 1119 |
$("#custom").click(); |
812 | 1120 |
$("#ram-indicator").removeClass('selectedrange'); |
1121 |
validate_selected_flavor_options("ram"); |
|
813 | 1122 |
}); |
814 | 1123 |
$("#storage:range").data().rangeinput.onSlide(function(event,value){ |
815 |
$("#storage-indicator")[0].value = disks[Number(value)]; |
|
1124 |
var disks = get_selected_image_options("disk") |
|
1125 |
$("#storage-indicator")[0].value = range_percentage_to_value(value, disks); |
|
816 | 1126 |
$("#storage-indicator").addClass('selectedrange'); |
817 | 1127 |
}); |
818 | 1128 |
$("#storage:range").data().rangeinput.change(function(event,value){ |
819 |
$("#storage-indicator")[0].value = disks[Number(value)]; |
|
1129 |
var disks = get_selected_image_options("disk") |
|
1130 |
$("#storage-indicator")[0].value = range_percentage_to_value(value, disks); |
|
1131 |
normal_value = range_value_to_percentage(get_closest_option(value, disks), disks); |
|
1132 |
if (this.getValue() != normal_value) { |
|
1133 |
this.setValue(normal_value); |
|
1134 |
} |
|
820 | 1135 |
$("#custom").click(); |
821 | 1136 |
$("#storage-indicator").removeClass('selectedrange'); |
1137 |
validate_selected_flavor_options("disk"); |
|
822 | 1138 |
}); |
823 | 1139 |
} |
824 | 1140 |
|
1141 |
function get_flavor_slider(name) { |
|
1142 |
return $("#" + name + ":range").data().rangeinput; |
|
1143 |
} |
|
1144 |
|
|
1145 |
// utility function to grab the value of the slider |
|
1146 |
function get_flavor_slider_value(name) { |
|
1147 |
var maps = { |
|
1148 |
'cpu': cpus, |
|
1149 |
'ram': ram, |
|
1150 |
'storage': disks |
|
1151 |
} |
|
1152 |
return range_percentage_to_value(get_flavor_slider(name).getValue(), maps[name]); |
|
1153 |
} |
|
1154 |
|
|
1155 |
function set_flavor_sliders_values(cpu, disk, ram) { |
|
1156 |
get_flavor_slider("cpu").setValue(range_value_to_percentage(cpu, get_selected_image_options("cpu"))); |
|
1157 |
get_flavor_slider("storage").setValue(range_value_to_percentage(disk, get_selected_image_options("disk"))); |
|
1158 |
get_flavor_slider("ram").setValue(range_value_to_percentage(ram, get_selected_image_options("ram"))); |
|
1159 |
} |
|
1160 |
|
|
1161 |
function get_flavor_sliders_values() { |
|
1162 |
return { |
|
1163 |
'cpu': get_flavor_slider_value("cpu"), |
|
1164 |
'ram': get_flavor_slider_value("ram"), |
|
1165 |
'disk': get_flavor_slider_value("storage") |
|
1166 |
} |
|
1167 |
} |
|
1168 |
|
|
825 | 1169 |
Array.prototype.unique = function () { |
826 | 1170 |
var r = new Array(); |
827 | 1171 |
o:for(var i = 0, n = this.length; i < n; i++) |
... | ... | |
865 | 1209 |
disks[i] = flavor['disk']; |
866 | 1210 |
ram[i] = flavor['ram']; |
867 | 1211 |
}); |
1212 |
|
|
1213 |
// we only need unique and sorted arrays |
|
868 | 1214 |
cpus = cpus.unique(); |
869 | 1215 |
disks = disks.unique(); |
870 | 1216 |
ram = ram.unique(); |
1217 |
|
|
1218 |
// sort arrays |
|
1219 |
var numeric_sort = function(a,b) { return a>b}; |
|
1220 |
disks.sort(numeric_sort); |
|
1221 |
cpus.sort(numeric_sort); |
|
1222 |
ram.sort(numeric_sort); |
|
1223 |
|
|
1224 |
// ui update handlers |
|
871 | 1225 |
update_wizard_flavors(); |
1226 |
update_image_flavor_options(); |
|
872 | 1227 |
} catch(err){ |
873 | 1228 |
ajax_error("NO_FLAVORS"); |
874 | 1229 |
} |
b/ui/templates/home.html | ||
---|---|---|
170 | 170 |
'NO_DETAILS' : '{% trans "Νο advanced details provided" %}' |
171 | 171 |
}; |
172 | 172 |
|
173 |
var SUGGESTED_FLAVORS = { |
|
174 |
'small': {cpu:1, ram:1024, disk:20}, |
|
175 |
'medium': {cpu:2, ram:2048, disk:30}, |
|
176 |
'large': {cpu:4, ram:4096, disk:40} |
|
177 |
} |
|
178 |
|
|
173 | 179 |
var SUCCESS = { |
174 | 180 |
'HEADER' : '{% trans "Success" %}', |
175 | 181 |
'DEFAULT' : '{% trans "Your request has been succefully executed." %}', |
b/ui/templates/machines.html | ||
---|---|---|
92 | 92 |
<!-- pages --> |
93 | 93 |
<div class="page page1"> |
94 | 94 |
<h2>{% trans "Select an OS" %}</h2> |
95 |
<p class="desc">{% blocktrans %}Choose your preferred image{% endblocktrans %}</p> |
|
95 | 96 |
<hr class="topruler" /> |
96 | 97 |
<div id="tabscontainer"> |
97 | 98 |
<ul class="tabs"> |
... | ... | |
123 | 124 |
</ul> |
124 | 125 |
<ul class="pane" id="custom-images"> |
125 | 126 |
<!-- custom images --> |
127 |
<p class="desc">{% blocktrans %}No custom images available{% endblocktrans %}</p> |
|
126 | 128 |
</ul> |
127 | 129 |
</div> |
128 | 130 |
<hr class="bottomruler" /> |
... | ... | |
131 | 133 |
</div> |
132 | 134 |
<div class="page page2"> |
133 | 135 |
<h2>{% trans "Select CPUs, RAM and Disk Size" %}</h2> |
136 |
<p class="desc">{% blocktrans %}Available options are filtered based on the selected image{% endblocktrans %}</p> |
|
134 | 137 |
<hr class="topruler" /> |
135 | 138 |
<ul> |
136 | 139 |
<li id="machinetype"> |
... | ... | |
191 | 194 |
</div> |
192 | 195 |
<div class="page page3"> |
193 | 196 |
<h2>{% trans "Confirm your settings" %}</h2> |
197 |
<p class="desc">{% blocktrans %}Confirm that the options you have selected are correct{% endblocktrans %}</p> |
|
194 | 198 |
<hr class="topruler" /> |
195 | 199 |
<ul id="page3-container"> |
196 | 200 |
<li class="required" id="label-name"> |
... | ... | |
358 | 362 |
$('#machines-pane a#create').data('overlay').load(); |
359 | 363 |
// enable submit button |
360 | 364 |
$("#wizard #start").removeAttr('disabled'); |
365 |
|
|
366 |
try { |
|
367 |
handle_image_choice_changed(); |
|
368 |
} catch (err) {}; |
|
361 | 369 |
} else if (images.length == 0 ) { |
362 | 370 |
ajax_error('NO_IMAGES'); |
363 | 371 |
return false; |
... | ... | |
482 | 490 |
} |
483 | 491 |
}); |
484 | 492 |
|
493 |
var v2p = range_value_to_percentage; |
|
485 | 494 |
// validate cpu input box |
486 |
$("#cpu-indicator").live('change',function(){ |
|
487 |
var v = Number(this.value); |
|
488 |
var i = cpus.indexOf(v); |
|
489 |
if (isNaN(v)) { |
|
490 |
$(this).value = cpus[0]; |
|
491 |
$("#cpu").data('rangeinput').setValue(0); |
|
492 |
} else if (i == -1) { |
|
493 |
for (var j=0; j < cpus.length; j++) |
|
494 |
if (v<cpus[j]) |
|
495 |
break; |
|
496 |
$("#cpu").data('rangeinput').setValue(j); |
|
497 |
} else { |
|
498 |
$("#cpu").data('rangeinput').setValue(i); |
|
499 |
} |
|
495 |
$("#cpu-indicator").live('change',function() { |
|
496 |
$("#cpu").data('rangeinput').setValue(get_closest_from_value(this.value, cpus)); |
|
497 |
validate_selected_flavor_options(); |
|
500 | 498 |
return false; |
501 | 499 |
}); |
502 | 500 |
|
503 | 501 |
// validate ram input box |
504 |
$("#ram-indicator").live('change',function(){ |
|
505 |
var v = Number(this.value); |
|
506 |
var i = ram.indexOf(v); |
|
507 |
if (isNaN(v)) { |
|
508 |
$(this).value = cpus[0]; |
|
509 |
$("#ram").data('rangeinput').setValue(0); |
|
510 |
} else if (i == -1) { |
|
511 |
for (var j=0; j < ram.length; j++) |
|
512 |
if (v<ram[j]) |
|
513 |
break; |
|
514 |
$("#ram").data('rangeinput').setValue(j); |
|
515 |
} else { |
|
516 |
$("#ram").data('rangeinput').setValue(i); |
|
517 |
} |
|
502 |
$("#ram-indicator").live('change',function() { |
|
503 |
$("#ram").data('rangeinput').setValue(get_closest_from_value(this.value, ram)); |
|
504 |
validate_selected_flavor_options(); |
|
518 | 505 |
return false; |
519 | 506 |
}); |
520 | 507 |
|
521 | 508 |
// validate storage input box |
522 | 509 |
$("#storage-indicator").live('change',function(){ |
523 |
var v = Number(this.value); |
|
524 |
var i = disks.indexOf(v); |
|
525 |
if (isNaN(v)) { |
|
526 |
$(this).value = disks[0]; |
|
527 |
$("#storage").data('rangeinput').setValue(0); |
|
528 |
} else if (i == -1) { |
|
529 |
for (var j=0; j < disks.length; j++) |
|
530 |
if (v<disks[j]) |
|
531 |
break; |
|
532 |
$("#storage").data('rangeinput').setValue(j); |
|
533 |
} else { |
|
534 |
$("#storage").data('rangeinput').setValue(i); |
|
535 |
} |
|
510 |
$("#storage").data('rangeinput').setValue(get_closest_from_value(this.value, disks)); |
|
511 |
validate_selected_flavor_options(); |
|
536 | 512 |
return false; |
537 | 513 |
}); |
538 | 514 |
|
539 | 515 |
// selecting the small size |
540 | 516 |
$("#small").click(function(){ |
541 |
$("#cpu").data('rangeinput').setValue(0); |
|
542 |
$("#ram").data('rangeinput').setValue(0); |
|
543 |
$("#storage").data('rangeinput').setValue(0); |
|
544 |
$("#cpu-indicator")[0].value = cpus[0]; |
|
545 |
$("#ram-indicator")[0].value = ram[0]; |
|
546 |
$("#storage-indicator")[0].value = disks[0]; |
|
547 |
$("#small").addClass("active"); |
|
548 |
$("#medium").removeClass("active"); |
|
549 |
$("#large").removeClass("active"); |
|
550 |
$("#custom").removeClass("active"); |
|
517 |
if ($(this).find("input:disabled").length == 1) { return }; |
|
518 |
var flavor = SUGGESTED_FLAVORS[$(this).attr("id")]; |
|
519 |
$(this).parent().parent().parent().find("label").removeClass("active"); |
|
520 |
$(this).addClass("active"); |
|
521 |
set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram); |
|
551 | 522 |
}); |
552 | 523 |
|
553 | 524 |
// selecting the medium size |
554 | 525 |
$("#medium").click(function(){ |
555 |
$("#cpu").data('rangeinput').setValue(1); |
|
556 |
$("#ram").data('rangeinput').setValue(1); |
|
557 |
$("#storage").data('rangeinput').setValue(1); |
|
558 |
$("#cpu-indicator")[0].value = cpus[1]; |
|
559 |
$("#ram-indicator")[0].value = ram[1]; |
|
560 |
$("#storage-indicator")[0].value = disks[1]; |
|
561 |
$("#medium").addClass("active"); |
|
562 |
$("#small").removeClass("active"); |
|
563 |
$("#large").removeClass("active"); |
|
564 |
$("#custom").removeClass("active"); |
|
526 |
if ($(this).find("input:disabled").length == 1) { return }; |
|
527 |
var flavor = SUGGESTED_FLAVORS[$(this).attr("id")]; |
|
528 |
$(this).parent().parent().parent().find("label").removeClass("active"); |
|
529 |
$(this).addClass("active"); |
|
530 |
set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram); |
|
565 | 531 |
}); |
566 | 532 |
|
567 | 533 |
// selecting the large size |
568 | 534 |
$("#large").click(function(){ |
569 |
$("#cpu").data('rangeinput').setValue(2); |
|
570 |
$("#ram").data('rangeinput').setValue(2); |
|
571 |
$("#storage").data('rangeinput').setValue(2); |
|
572 |
$("#cpu-indicator")[0].value = cpus[2]; |
|
573 |
$("#ram-indicator")[0].value = ram[2]; |
|
574 |
$("#storage-indicator")[0].value = disks[2]; |
|
575 |
$("#large").addClass("active"); |
|
576 |
$("#medium").removeClass("active"); |
|
577 |
$("#small").removeClass("active"); |
|
578 |
$("#custom").removeClass("active"); |
|
535 |
if ($(this).find("input:disabled").length == 1) { return }; |
|
536 |
var flavor = SUGGESTED_FLAVORS[$(this).attr("id")]; |
|
537 |
$(this).parent().parent().parent().find("label").removeClass("active"); |
|
538 |
$(this).addClass("active"); |
|
539 |
set_flavor_sliders_values(flavor.cpu, flavor.disk, flavor.ram); |
|
579 | 540 |
}); |
580 | 541 |
|
581 | 542 |
// selecting the custom flavor enables the sliders |
b/ui/templates/machines_icon.html | ||
---|---|---|
937 | 937 |
$('a#single').click(); |
938 | 938 |
}) |
939 | 939 |
|
940 |
|
|
941 | 940 |
// machine rename hover handlers |
942 | 941 |
if ($.browser.msie) { |
943 | 942 |
$(".machine .name, .machine .namecontainer, .machine span.name").live('mouseover', function() { |
... | ... | |
947 | 946 |
$(this).parent().find("span.rename").removeClass("rename_hovered"); |
948 | 947 |
}) |
949 | 948 |
} |
949 |
|
|
950 | 950 |
</script> |
b/ui/templates/networks.html | ||
---|---|---|
47 | 47 |
<div class="header"> |
48 | 48 |
</div> |
49 | 49 |
<h2>{% trans "Name your network" %}</h2> |
50 |
<p class="desc">{% blocktrans %}Select a proper name for your network{% endblocktrans %}</p> |
|
50 | 51 |
<hr class="topruler" /> |
51 | 52 |
<div class="container"> |
52 | 53 |
<div class="name-input"> |
Also available in: Unified diff