Revision 8d08f18a ui/templates/home.html
b/ui/templates/home.html | ||
---|---|---|
1 |
<!-- |
|
2 |
Copyright 2011 GRNET S.A. All rights reserved. |
|
3 |
|
|
4 |
Redistribution and use in source and binary forms, with or |
|
5 |
without modification, are permitted provided that the following |
|
6 |
conditions are met: |
|
7 |
|
|
8 |
1. Redistributions of source code must retain the above |
|
9 |
copyright notice, this list of conditions and the following |
|
10 |
disclaimer. |
|
11 |
|
|
12 |
2. Redistributions in binary form must reproduce the above |
|
13 |
copyright notice, this list of conditions and the following |
|
14 |
disclaimer in the documentation and/or other materials |
|
15 |
provided with the distribution. |
|
16 |
|
|
17 |
THIS SOFTWARE IS PROVIDED BY GRNET S.A. ``AS IS'' AND ANY EXPRESS |
|
18 |
OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
|
19 |
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
|
20 |
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GRNET S.A OR |
|
21 |
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
|
22 |
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
|
23 |
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF |
|
24 |
USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED |
|
25 |
AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT |
|
26 |
LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN |
|
27 |
ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE |
|
28 |
POSSIBILITY OF SUCH DAMAGE. |
|
29 |
|
|
30 |
The views and conclusions contained in the software and |
|
31 |
documentation are those of the authors and should not be |
|
32 |
interpreted as representing official policies, either expressed |
|
33 |
or implied, of GRNET S.A. |
|
34 |
--> |
|
35 |
|
|
1 |
<!doctype html> |
|
36 | 2 |
<html> |
37 | 3 |
|
38 | 4 |
{% load i18n %} |
39 |
<!DOCTYPE html> |
|
40 | 5 |
<head> |
41 | 6 |
<title>~okeanos</title> |
42 |
<!-- include the Tools --> |
|
43 |
<!-- jquery tools minified for deployment--> |
|
44 |
<script src="static/jquery.tools.min.js"></script> |
|
45 |
<!-- jquery tools source for JS debugging --> |
|
46 |
<!-- |
|
47 |
<script src="http://flowplayer.org/tools/download/1.2.5/jquery-1.4.2.js"></script> |
|
48 |
<script src="http://flowplayer.org/tools/download/1.2.5/tabs/tabs.js"></script> |
|
49 |
<script src="http://flowplayer.org/tools/download/1.2.5/scrollable/scrollable.js"></script> |
|
50 |
<script src="http://flowplayer.org/tools/download/1.2.5/overlay/overlay.js"></script> |
|
51 |
<script src="http://flowplayer.org/tools/download/1.2.5/rangeinput/rangeinput.js"></script> |
|
52 |
<script src="http://flowplayer.org/tools/download/1.2.5/toolbox/toolbox.expose.js"></script> |
|
53 |
--> |
|
54 |
<script src="static/jquery.cookie.js"></script> |
|
55 |
<script src="static/jquery.client.js"></script> |
|
56 |
<script src="static/json2.js"></script> |
|
57 |
<script src="static/jquery.dataTables.min.js"></script> |
|
58 |
<script src="static/jquery.pagination.js"></script> |
|
59 |
<script src="static/invitations.js"></script> |
|
60 |
<script src="static/synnefo.js"></script> |
|
7 |
|
|
8 |
<!--<meta http-equiv="X-UA-Compatible" content="IE=7">--> |
|
9 |
<link href="http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,greek" rel="stylesheet" type="text/css" > |
|
10 |
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,greek' rel='stylesheet' type='text/css'> |
|
11 |
|
|
12 |
{% comment %} |
|
13 |
<script type="text/javascript" src="{% url javascript_catalog %}"></script> |
|
14 |
{% endcomment %} |
|
61 | 15 |
|
62 | 16 |
<link rel="stylesheet" type="text/css" href="static/main.css"/> |
63 |
<!--[if IE]><style type="text/css" media="all">@import url(static/ie.css);</style><![endif]--> |
|
17 |
<!--[if IE]> |
|
18 |
<style type="text/css" media="all">@import url(static/ie.css);</style> |
|
19 |
<![endif]--> |
|
20 |
|
|
21 |
<script src="static/snf/js/lib/jquery.js"></script> |
|
22 |
<script src="static/snf/js/lib/jquery.cookie.js"></script> |
|
23 |
<script src="static/snf/js/lib/jquery.client.js"></script> |
|
24 |
<script src="static/snf/js/lib/jquery.tools.min.js"></script> |
|
25 |
<script src="static/snf/js/lib/jquery.dataTables.min.js"></script> |
|
26 |
|
|
27 |
<script src="static/snf/js/lib/underscore.js"></script> |
|
28 |
<script src="static/snf/js/lib/underscore.string.js"></script> |
|
29 |
<script src="static/snf/js/lib/backbone.js"></script> |
|
30 |
<script src="static/snf/js/lib/json2.js"></script> |
|
31 |
<script src="static/snf/js/lib/stacktrace.js"></script> |
|
32 |
<!--[if (gte IE 6)&(lte IE 7)]> |
|
33 |
<script src="static/snf/js/lib/selectivizr.js"></script> |
|
34 |
<! [endif] --> |
|
35 |
|
|
36 |
<!--[if IE]> |
|
37 |
<script src="static/snf/js/ui/ie_fixes.js"></script> |
|
38 |
<![endif]--> |
|
39 |
|
|
40 |
<script src="static/snf/js/utils.js"></script> |
|
41 |
<script src="static/snf/js/sync.js"></script> |
|
42 |
<script src="static/snf/js/models.js"></script> |
|
43 |
<script src="static/snf/js/views.js"></script> |
|
44 |
|
|
45 |
<script src="static/snf/js/ui/web/ui_vms_base_view.js"></script> |
|
46 |
<script src="static/snf/js/ui/web/ui_icon_view.js"></script> |
|
47 |
<script src="static/snf/js/ui/web/ui_single_view.js"></script> |
|
48 |
<script src="static/snf/js/ui/web/ui_list_view.js"></script> |
|
49 |
<script src="static/snf/js/ui/web/ui_networks_view.js"></script> |
|
50 |
<script src="static/snf/js/ui/web/ui_main_view.js"></script> |
|
51 |
<script src="static/snf/js/ui/web/ui_metadata_view.js"></script> |
|
52 |
<script src="static/snf/js/ui/web/ui_feedback_view.js"></script> |
|
53 |
<script src="static/snf/js/ui/web/ui_create_view.js"></script> |
|
54 |
|
|
55 |
<!-- the following views require refactor --> |
|
56 |
<!--<script src="static/snf/js/ui/create_view.js"></script>--> |
|
57 |
<script src="static/invitations.js"></script> |
|
58 |
<script src="static/synnefo.js"></script> |
|
59 |
|
|
64 | 60 |
<script> |
65 | 61 |
// empty object for console to avoid errors in browsers that don't support it |
66 | 62 |
if (!window.console) {window.console = {}; window.console.log = window.console.info = window.console.debug = |
... | ... | |
68 | 64 |
|
69 | 65 |
//populate available image icons array |
70 | 66 |
var os_icons = {{image_icons|safe}}; |
67 |
|
|
68 |
|
|
71 | 69 |
|
72 | 70 |
// timeout value from settings.py |
73 |
var TIMEOUT = {{ timeout }}; |
|
71 |
var TIMEOUT = 10000 || {{ timeout }};
|
|
74 | 72 |
var TIMEOUTS_OCCURED = 0; |
75 | 73 |
var SKIP_TIMEOUTS = 1; |
76 | 74 |
var UPDATE_INTERVAL = {{ update_interval }}; |
... | ... | |
82 | 80 |
var FEEDBACK_TITLE = "{% trans "Send feedback" %}"; |
83 | 81 |
var API_OVERLAY_TITLE = "{% trans "API access" %}"; |
84 | 82 |
var API_OVERLAY_SUBCONTENT = "{% trans "The API key provides full access to your <em>~okeanos</em> account, so always keep it private." %}"; |
85 |
var INVITATIONS_PER_PAGE = {% if invitations_per_page %} {{ invitations_per_page }} {% else %} 10 {% endif %}; |
|
86 |
|
|
83 |
|
|
84 |
STATE_TEXTS = { |
|
85 |
'UNKNOWN': '{% trans "Unknown" %}', |
|
86 |
'BUILD': '{% trans "Building..." %}', |
|
87 |
'FIREWALL': '{% trans "Firewall change..." %}', |
|
88 |
'REBOOT': '{% trans "Rebooting..." %}', |
|
89 |
'STOPPED':'{% trans "Stopped" %}', |
|
90 |
'ACTIVE': '{% trans "Running" %}', |
|
91 |
'ERROR': '{% trans "Error" %}', |
|
92 |
'DELETE': '', |
|
93 |
'DESTROY': '{% trans "Destroying..." %}', |
|
94 |
'BUILD_INIT': '{% trans "Building..." %}', |
|
95 |
'BUILD_COPY': '{% trans "Building..." %}', |
|
96 |
'BUILD_FINAL': '{% trans "Building..." %}', |
|
97 |
'SHUTDOWN': '{% trans "Shutting down..." %}', |
|
98 |
'START': '{% trans "Starting..." %}', |
|
99 |
'CONNECT': '{% trans "Connecting..." %}', |
|
100 |
'DISCONNECT': '{% trans "Disconnecting..." %}' |
|
101 |
} |
|
102 |
|
|
103 |
|
|
104 |
|
|
87 | 105 |
// building statuses |
88 |
var BUILDING_STATUSES = {
|
|
106 |
var BUILDING_MESSAGES = {
|
|
89 | 107 |
'INIT': '{% trans "Initializing..." %}', |
90 |
'IMAGE_COPY': '{% trans "{0} of {1} ({2}%)" %}',
|
|
91 |
'FINISH': '{% trans "Finalizing... (approx. 10 minutes remaining)" %}'
|
|
108 |
'COPY': '{% trans "{0} of {1} ({2}%)" %}', |
|
109 |
'FINAL': '{% trans "Finalizing..." %}'
|
|
92 | 110 |
} |
93 |
|
|
94 |
var VM_IMAGE_COMMON_METADATA = {{ vm_image_common_metadata|safe }}; |
|
95 | 111 |
|
96 | 112 |
// server statuses and transitions |
97 | 113 |
var STATUSES = { |
... | ... | |
149 | 165 |
'Disconnecting' : '{% trans "Disconnecting" %}' |
150 | 166 |
}; |
151 | 167 |
|
152 |
var ERRORS = { |
|
168 |
var ERROR_OVERRIDES = {
|
|
153 | 169 |
// error message header |
154 | 170 |
'HEADER' : '{% trans "Error" %}', |
155 | 171 |
// default |
156 | 172 |
'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}', |
157 | 173 |
// bad request |
158 | 174 |
'400' : '{% trans "Malformed request." %}', |
159 |
// Unauthorized |
|
160 |
'401' : '{% trans "Unauthorized" %}', |
|
161 | 175 |
// not found |
162 | 176 |
'404' : '{% trans "Your request has failed. Resource not found." %}', |
163 | 177 |
// internal server error |
... | ... | |
171 | 185 |
// no server handshake |
172 | 186 |
'0' : '{% trans "Could not contact the server." %}', |
173 | 187 |
// no images found |
174 |
'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
|
|
188 |
'-212' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
|
|
175 | 189 |
// no flavors found |
176 |
'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
|
|
190 |
'-213' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
|
|
177 | 191 |
// error box title |
178 | 192 |
'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}', |
179 | 193 |
// no advanced details |
180 |
'NO_DETAILS' : '{% trans "Νο advanced details provided" %}', |
|
181 |
'TIMEOUT' : '{% trans "It seems the server takes too long to respond, please check your network connectivity" %}' |
|
194 |
'NO_DETAILS' : '{% trans "Νο advanced details provided" %}' |
|
182 | 195 |
}; |
183 | 196 |
|
184 | 197 |
var SUGGESTED_FLAVORS = {{ suggested_flavors|safe }}; |
... | ... | |
202 | 215 |
'ON' : '{% trans "On" %}' |
203 | 216 |
}; |
204 | 217 |
|
205 |
// ajax error checking |
|
206 |
function ajax_error(status, serverID, action, responseText, ajax_settings) { |
|
207 |
|
|
208 |
var error_date = new Date(); |
|
209 |
if (!ajax_settings) { |
|
210 |
ajax_settings = {}; |
|
211 |
} |
|
212 |
|
|
213 |
// flag to display or not error report link |
|
214 |
var allow_report = ajax_settings.disable_report ? false : true; |
|
215 |
var no_details = ajax_settings.no_details === undefined || ajax_settings.no_details === false ? false : true; |
|
216 |
|
|
217 |
// close existing overlays to begin with |
|
218 |
close_all_overlays(); |
|
219 |
// clear old deferred calls (stops all auto-updates) |
|
220 |
clearTimeout(deferred); |
|
221 |
|
|
222 |
$('#error-success').addClass('error'); |
|
223 |
$('#error-success').removeClass('success'); |
|
224 |
|
|
225 |
var serverName = ''; |
|
226 |
|
|
227 |
if (serverID !== undefined) { |
|
228 |
// standard view |
|
229 |
serverName = $("#" + serverID).find("span.name").text(); |
|
230 |
if (serverName === "") { // list view |
|
231 |
serverName = $("#" + serverID).parent().parent().find("span.name").text(); |
|
232 |
} |
|
233 |
} |
|
234 |
|
|
235 |
// prepare the error message |
|
236 |
$("#error-success h3").text(ERRORS['HEADER']); |
|
237 |
if (responseText !== undefined) { |
|
238 |
var errors = parse_error(responseText, status), details = ''; |
|
239 |
if (serverName) { |
|
240 |
serverName = "<p>{% trans "Server" %}: " + serverName + "</p>"; |
|
241 |
} |
|
242 |
|
|
243 |
if ((errors[0].details === undefined) || (errors[0].details === "")) { |
|
244 |
details = ERRORS["NO_DETAILS"]; |
|
245 |
|
|
246 |
// if no details message show debug info |
|
247 |
if (window.APP_DEBUG) { |
|
248 |
details = responseText; |
|
249 |
try { |
|
250 |
console.trace(); |
|
251 |
} catch (err) { |
|
252 |
} |
|
253 |
} |
|
254 |
} else { |
|
255 |
details = errors[0].details; |
|
256 |
} |
|
257 |
|
|
258 |
// fallback to predefined message |
|
259 |
if (ERRORS[status] !== undefined) { |
|
260 |
errors[0].message = ERRORS[status]; |
|
261 |
} |
|
262 |
|
|
263 |
$("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]); |
|
264 |
$("#error-success .popup-header").addClass("popup-header-error"); |
|
265 |
$("#error-success").addClass("popup-border-error"); |
|
266 |
$("#error-success .password-container").hide(); |
|
267 |
$("#error-success .popup-details").addClass("popup-details-error"); |
|
268 |
$("#error-success .popup-separator").addClass("popup-separator-error"); |
|
269 |
$("#error-success .popup-details").html("<p>" + |
|
270 |
(errors[0].message || ERRORS[errors[0].code] || serverID) + |
|
271 |
"</p>" + serverName + "<p>{% trans "Action" %}:" + |
|
272 |
action + "</p><p>{% trans "Code" %}: " + errors[0].code + |
|
273 |
"<p><a class='expand-details' href='#'>{% trans 'Details' %}</a><div class='more-details'>" + |
|
274 |
details + "</div></p>"); |
|
275 |
|
|
276 |
} else if (ERRORS[status] !== undefined) { |
|
277 |
if (serverID === undefined) { |
|
278 |
//eg no_images, no_flavors cases |
|
279 |
$("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]); |
|
280 |
$("#error-success .popup-header").addClass("popup-header-error"); |
|
281 |
$("#error-success").addClass("popup-border-error"); |
|
282 |
$("#error-success .password-container").hide(); |
|
283 |
$("#error-success .popup-details").addClass("popup-details-error"); |
|
284 |
$("#error-success .popup-separator").addClass("popup-separator-error"); |
|
285 |
$("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p>"); |
|
286 |
} else { |
|
287 |
$("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]); |
|
288 |
$("#error-success .popup-header").addClass("popup-header-error"); |
|
289 |
$("#error-success").addClass("popup-border-error"); |
|
290 |
$("#error-success .password-container").hide(); |
|
291 |
$("#error-success .popup-details").addClass("popup-details-error"); |
|
292 |
$("#error-success .popup-separator").addClass("popup-separator-error"); |
|
293 |
$("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p><p>" + serverName + "</p>"); |
|
294 |
} |
|
295 |
} else { |
|
296 |
$("#error-success .machine-now-building").html(ERRORS["DEFAULT"]); |
|
297 |
$("#error-success .popup-header").addClass("popup-header-error"); |
|
298 |
$("#error-success").addClass("popup-border-error"); |
|
299 |
$("#error-success .password-container").hide(); |
|
300 |
$("#error-success .popup-details").hide(); |
|
301 |
$("#error-success .popup-separator").hide(); |
|
302 |
} |
|
303 |
$("#error-success p:first").css("padding-bottom", "10px"); |
|
304 |
$("#error-success p:first").css("color", "#800000"); |
|
305 |
$("#error-success div.more-details").hide(); |
|
306 |
$("#error-success a.expand-details").live('click', function () { |
|
307 |
$(this).parent().parent().find("div.more-details").slideToggle(600); |
|
308 |
return false; |
|
309 |
}); |
|
310 |
//stop the progress icon and hide the wizard |
|
311 |
if (action !== undefined) { |
|
312 |
if (action === 'Create VM') { |
|
313 |
$('#wizard #start').text('{% trans "Create VM" %}'); |
|
314 |
$("#wizard").hide(); |
|
315 |
} else if (action === 'Create network') { |
|
316 |
$('#networks-wizard').hide(); |
|
317 |
} else if (action === 'Add server to network') { |
|
318 |
$('#add-machines-wizard').hide(); |
|
319 |
} |
|
320 |
} |
|
321 |
|
|
322 |
|
|
323 |
// prepare ajax call to get called when user clicks on |
|
324 |
// send error report button |
|
325 |
function initialize_error_report(cont, extra_data) { |
|
326 |
var cont = $(cont); |
|
327 |
var sel = function(sel) {return $(sel, cont)}; |
|
328 |
var btn = sel(".send-btn"); |
|
329 |
var extra_data = extra_data; |
|
330 |
|
|
331 |
// clear previous callbacks |
|
332 |
btn.unbind('click'); |
|
333 |
btn.click(function(){ |
|
334 |
// wrap in its own try catch to avoid retriggering ajax_error |
|
335 |
try { |
|
336 |
|
|
337 |
var data = {}; |
|
338 |
// fallback to error object |
|
339 |
try { |
|
340 |
var data = $.extend({'error_info': $.extend({}, extra_data)}, get_user_data()); |
|
341 |
} catch (err) { |
|
342 |
var data = {'error': err}; |
|
343 |
} |
|
344 |
|
|
345 |
try { |
|
346 |
// make it text then again object to be sure it can be |
|
347 |
// converted to text |
|
348 |
var ajax_data = {'ajax_settings': JSON.parse(JSON.stringify(ajax_settings))}; |
|
349 |
} catch (err) { |
|
350 |
var ajax_data = {'ajax_settings': err}; |
|
351 |
} |
|
352 |
|
|
353 |
var payload = {'feedback-msg': "Automated error report", 'feedback-data': JSON.stringify(data)}; |
|
354 |
// we will close error overlay to display feedback form |
|
355 |
// set feedback pending flag to not reload the window url |
|
356 |
// unless the user is done with the feedback |
|
357 |
window.FEEDBACK_PENDING = true; |
|
358 |
|
|
359 |
$("a#notification").overlay().close(); |
|
360 |
|
|
361 |
var errorCode = extra_data[0] || -10; |
|
362 |
var errorType = extra_data[1] || "Generic error"; |
|
363 |
var errorAction = extra_data[2] || "noaction"; |
|
364 |
var errorData = extra_data[3] || ""; |
|
365 |
|
|
366 |
fdb_msg = "Error report\n" + |
|
367 |
"------------\n" + |
|
368 |
"Code: " + errorCode + "\n" + |
|
369 |
"Type: " + errorType + "\n" + |
|
370 |
"Action: " + errorAction + "\n" + |
|
371 |
"Data: " + errorData + "\n\n" + |
|
372 |
"Please describe the actions that triggered the error:\n"; |
|
373 |
|
|
374 |
// append error date to extra user info |
|
375 |
var extra_user_data = $.extend(ajax_data, {'error_date': error_date}); |
|
376 |
setTimeout(function() { |
|
377 |
show_feedback_form(fdb_msg, 1, extra_user_data); |
|
378 |
$("#exposeMask").show(); |
|
379 |
}, 400); |
|
380 |
} catch (err) { |
|
381 |
sel(".send-btn").hide(); |
|
382 |
sel(".errormsg").fadeIn(); |
|
383 |
window.FEEDBACK_PENDING = false; |
|
384 |
} |
|
385 |
}); |
|
386 |
} |
|
387 |
|
|
388 |
// bring up error notification |
|
389 |
var triggers = $("a#notification").overlay({ |
|
390 |
// some mask tweaks suitable for modal dialogs |
|
391 |
mask: '#666', |
|
392 |
top: 'center', |
|
393 |
closeOnClick: false, |
|
394 |
fixed: false, |
|
395 |
oneInstance: false, |
|
396 |
load: false, |
|
397 |
onClose: function () { |
|
398 |
// user requested feedback from error page |
|
399 |
if (!window.FEEDBACK_PENDING) { |
|
400 |
// refresh the whole page |
|
401 |
location.reload(); |
|
402 |
} |
|
403 |
}, |
|
404 |
onBeforeLoad: function() { |
|
405 |
if (allow_report) { |
|
406 |
$(".error-report .send-btn").show(); |
|
407 |
} else { |
|
408 |
$(".error-report .send-btn").hide(); |
|
409 |
} |
|
410 |
|
|
411 |
if (no_details) { |
|
412 |
$(".expand-details").hide(); |
|
413 |
} else { |
|
414 |
$(".expand-details").show(); |
|
415 |
} |
|
416 |
}, |
|
417 |
onLoad: function() { |
|
418 |
if (allow_report) { |
|
419 |
initialize_error_report($(this.getOverlay()), [status, serverID, action, responseText]); |
|
420 |
} else { |
|
421 |
} |
|
422 |
} |
|
423 |
|
|
424 |
}); |
|
425 |
|
|
426 |
// we need to give the browser some time to close the old overlays before opening the new one |
|
427 |
setTimeout("$('a#notification').data('overlay').load()",400); |
|
428 |
return false; |
|
429 |
} |
|
430 |
|
|
431 |
// ajax success checking |
|
432 |
function ajax_success(status, password) { |
|
433 |
// prepare the error message |
|
434 |
// bring up success notification |
|
435 |
$('#error-success').addClass('success'); |
|
436 |
$('#error-success').removeClass('error'); |
|
437 |
if (status !== undefined && SUCCESS[status]) { |
|
438 |
if (password !== undefined && status === "CREATE_VM_SUCCESS") { |
|
439 |
|
|
440 |
//stop the progress icon and hide the wizard |
|
441 |
$('#wizard #start').text('{% trans "Create VM" %}'); |
|
442 |
$("#wizard").hide(); |
|
443 |
|
|
444 |
$("#error-success h3 span.header-box").text(SUCCESS[status]); |
|
445 |
var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_THREE"] + '<br / >' |
|
446 |
+ SUCCESS["CREATE_VM_SUCCESS_FOUR"]; |
|
447 |
$("#error-success div.machine-now-building").html(SUCCESS["CREATE_VM_SUCCESS_ONE"]); |
|
448 |
$("#error-success .popup-header").removeClass("popup-header-error"); |
|
449 |
$("#error-success").removeClass("popup-border-error"); |
|
450 |
$("#error-success .popup-details").removeClass("popup-details-error"); |
|
451 |
$("#error-success .popup-separator").removeClass("popup-separator-error"); |
|
452 |
$("#error-success .password-container").show(); |
|
453 |
|
|
454 |
$("#error-success .popup-details").html("</div><div class=\"write-password-details\">" + CREATE_VM_SUCCESS_MSG + "</div>"); |
|
455 |
$("#error-success div.password").html("<div class=\"write-password\">" + SUCCESS["CREATE_VM_SUCCESS_TWO"] + "<div class=\"write-password-password\"> " + password + "</div></div>"); |
|
456 |
//$("#error-success div.write-password").html(SUCCESS["CREATE_VM_SUCCESS_TWO"]); |
|
457 |
//$("#error-success div.write-password-details").html(CREATE_VM_SUCCESS_MSG); |
|
458 |
} else { |
|
459 |
$("#error-success h3").text(SUCCESS['HEADER']); |
|
460 |
$("#error-success div.popup-body-inner").text("<p>" + SUCCESS[status] + "</p>"); |
|
461 |
} |
|
462 |
} else { |
|
463 |
$("#error-success h3").text(SUCCESS['HEADER']); |
|
464 |
$("#error-success div.popup-body-inner").html("<p>" + SUCCESS['DEFAULT'] + "</p>"); |
|
465 |
} |
|
466 |
|
|
467 |
var triggers = $("a#notification").overlay({ |
|
468 |
// some mask tweaks suitable for modal dialogs |
|
469 |
mask: '#666', |
|
470 |
top: 'center', |
|
471 |
closeOnClick: false, |
|
472 |
oneInstance: false, |
|
473 |
load: false, |
|
474 |
onClose: function () { |
|
475 |
// With partial refresh working properly, |
|
476 |
// it is no longer necessary to refresh the whole page |
|
477 |
// choose_view(); |
|
478 |
} |
|
479 |
}); |
|
480 |
$("a#notification").data('overlay').load(); |
|
481 |
return false; |
|
482 |
} |
|
483 | 218 |
</script> |
484 | 219 |
</head> |
220 |
|
|
485 | 221 |
<body> |
222 |
<!--<img id="okeanos-image" src="/static/body-bg2.png" />--> |
|
486 | 223 |
<div id="container"> |
487 |
<div id='header'>
|
|
488 |
<div id='user'>
|
|
224 |
<div id="header">
|
|
225 |
<div id="user">
|
|
489 | 226 |
<div class="usermenu"> |
490 | 227 |
<div class="username">{{ request.user.uniq }}</div> |
491 | 228 |
<ul class="useractions"> |
... | ... | |
496 | 233 |
</ul> |
497 | 234 |
</div> |
498 | 235 |
<div class="langmenu"> |
499 |
<a class="current_lang">en</a> |
|
500 |
{% comment %} |
|
236 |
<a class="current_lang">en</a>
|
|
237 |
{% comment %}
|
|
501 | 238 |
{% get_available_languages as LANGUAGES %} |
502 | 239 |
{% for lang in LANGUAGES %} |
503 |
<a {% if current_lang == lang.0 %}class="current_lang" {% else %} href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a> |
|
240 |
<a {% if current_lang == lang.0 %} |
|
241 |
class="current_lang" {% else %} href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a> |
|
242 |
|
|
504 | 243 |
{% if not forloop.last %}<span class="sep">~</span>{% endif %} |
505 | 244 |
{% endfor %} |
506 | 245 |
{% endcomment %} |
... | ... | |
513 | 252 |
</div> |
514 | 253 |
</div> |
515 | 254 |
<div id="content"> |
516 |
<div id="wrapper"> |
|
255 |
<div id="wrapper" class="clearfix"> |
|
256 |
|
|
257 |
<div class="panes-menu clearfix"> |
|
517 | 258 |
<!-- tabs --> |
518 | 259 |
<div class="tab-name">{% trans "machines" %}</div> |
519 |
<div class="tab-separator"></div> |
|
520 | 260 |
<ul class="css-tabs"> |
521 |
<li><a href="machines" title="{% trans "manage your virtual machines" %}" class="primary" id="machines"> |
|
522 |
<img src="static/machines-icon.png" /></a></li><div class="tab-separator"></div> |
|
523 |
<li><a href="networks" title="{% trans "configure networking" %}" class="primary" id="networks"> |
|
524 |
<img src="static/networks-icon.png" /></a></li><div class="tab-separator"></div> |
|
525 |
<li><a href="disks" title="{% trans "manage your storage volumes" %}" class="primary" id="disks"> |
|
261 |
<li><a href="machines" title="{% trans "manage your virtual machines" %}" |
|
262 |
class="primary" id="machines_view_link"> |
|
263 |
<img src="static/machines-icon.png" /></a></li> |
|
264 |
<li><a href="networks" title="{% trans "configure networking" %}" |
|
265 |
class="primary" id="networks_view_link"> |
|
266 |
<img src="static/networks-icon.png" /></a></li> |
|
267 |
<li><a href="disks" title="{% trans "manage your storage volumes" %}" |
|
268 |
class="primary" id="disks_view_link"> |
|
526 | 269 |
<img src="static/disks-icon.png" /></a></li> |
527 | 270 |
</ul> |
271 |
</div> |
|
528 | 272 |
<div class="css-panes"> |
529 |
<div id="machines-pane" class="pane" style="display:block;"></div> |
|
530 |
<div id="networks-pane" class="pane"></div> |
|
273 |
<div id="machines-pane" class="pane" style="display:block;"> |
|
274 |
{% include "partials/machines.html" %} |
|
275 |
</div> |
|
276 |
<div id="networks-pane" class="pane"> |
|
277 |
{% include "partials/networks.html" %} |
|
278 |
</div> |
|
531 | 279 |
<div id="disks-pane" class="pane"></div> |
280 |
|
|
281 |
<div class="confirm_multiple" id="multiple_actions_container"> |
|
282 |
<p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "machines" %}</p> |
|
283 |
<button class="yes">{% trans "Confirm All" %}</button> |
|
284 |
<button class="no">{% trans "Cancel All" %}</button> |
|
285 |
</div> |
|
286 |
|
|
532 | 287 |
</div> |
533 | 288 |
</div> |
534 | 289 |
</div> |
535 |
{% include "footer.html" %} |
|
536 | 290 |
</div> |
537 | 291 |
|
538 | 292 |
<!-- activate tabs with JavaScript --> |
539 | 293 |
<script> |
540 | 294 |
|
541 |
$(function() { |
|
542 |
// check pane cookie to select the initial pane |
|
543 |
var initial = 0, pane = $.cookie("pane"); |
|
544 |
if (pane > 0) |
|
545 |
initial = pane; |
|
546 |
//alert(initial); |
|
547 |
$("ul.css-tabs").tabs("div.css-panes div.pane", { |
|
548 |
initialIndex: initial, |
|
549 |
onBeforeClick: function(event, i) { |
|
550 |
this.getPanes().children().remove(); |
|
551 |
// get the pane to be opened |
|
552 |
var pane = this.getPanes().eq(i); |
|
553 |
//change the displaying title |
|
554 |
$(".tab-name").text(this.getTabs().eq(i).attr("href")); |
|
555 |
// load it with a page specified in the tab's href attribute |
|
556 |
pane.load(this.getTabs().eq(i).attr("href"),function() {if (!i) {choose_view()}}); |
|
557 |
} |
|
558 |
}); |
|
559 |
}); |
|
560 |
|
|
561 |
// set pane cookie whenever the user clicks on a different pane |
|
562 |
$("ul.css-tabs a").click(function(i) { |
|
563 |
$.cookie("pane", $("ul.css-tabs a").index(this)); |
|
564 |
}); |
|
565 |
|
|
566 |
//change menu title on hover |
|
567 |
$("ul.css-tabs li").hover( |
|
568 |
function () { |
|
569 |
if ($(this).find("a.current").length == 0) { |
|
570 |
$(this).parent().parent().find(".tab-name").text($(this).find("a").attr("href")); |
|
571 |
} |
|
572 |
}, |
|
573 |
function () { |
|
574 |
$(this).parent().parent().find(".tab-name").text($(this).parent().find("a.current").attr("href")); |
|
575 |
} |
|
576 |
); |
|
577 |
|
|
578 | 295 |
//load opera css fixes |
579 | 296 |
if ($.browser.opera) { |
580 | 297 |
$("<link/>", { |
... | ... | |
586 | 303 |
|
587 | 304 |
$(document).ready(function(){ |
588 | 305 |
|
589 |
$(".close-msg-box").live('click', close_all_overlays); |
|
590 |
|
|
591 | 306 |
{% if current_lang == "el" and not DEBUG %} |
592 | 307 |
window.location = "/lang/?l=en"; |
593 | 308 |
{% endif %} |
... | ... | |
614 | 329 |
}); |
615 | 330 |
|
616 | 331 |
$(".usermenu .invitations").click(show_invitations); |
617 |
$(".usermenu .feedback").click(show_feedback_form); |
|
618 | 332 |
$(".usermenu .api").click(show_api_overlay); |
333 |
|
|
334 |
}); |
|
335 |
|
|
336 |
function positionBottomMessages() { |
|
337 |
var el = $("#multiple_actions_container"); |
|
338 |
} |
|
339 |
|
|
340 |
$(window).bind("load", function() { |
|
341 |
var footerHeight = 0; |
|
342 |
var footerTop = 0; |
|
343 |
var $footer = $("#footer-container"); |
|
344 |
|
|
345 |
positionFooter(); |
|
346 |
function positionFooter() { |
|
347 |
footerHeight = 80; |
|
348 |
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px"; |
|
349 |
if (($(document.body).height()+footerHeight) < $(window).height()) { |
|
350 |
|
|
351 |
$footer.css({ |
|
352 |
position: "absolute" |
|
353 |
}).css({ |
|
354 |
top: footerTop |
|
355 |
}) |
|
356 |
} else { |
|
357 |
|
|
358 |
if ($footer.css("position") == "static") { |
|
359 |
if ($(document.body).height() < $(window).height()) { |
|
360 |
$footer.css({ |
|
361 |
position: "absolute" |
|
362 |
}).css({ |
|
363 |
top: footerTop |
|
364 |
}) |
|
365 |
} |
|
366 |
} else { |
|
367 |
|
|
368 |
$footer.css({ |
|
369 |
position: "static" |
|
370 |
}) |
|
371 |
} |
|
372 |
} |
|
373 |
|
|
374 |
} |
|
375 |
window.positionFooter = _.throttle(positionFooter, 40); |
|
376 |
$(window).scroll(positionFooter).resize(positionFooter) |
|
619 | 377 |
}); |
620 | 378 |
</script> |
379 |
|
|
621 | 380 |
<!-- base notification for error/success reporting --> |
622 | 381 |
<a id="notification" rel="#error-success" href="#"></a> |
623 | 382 |
<a id="msgbox" rel="#notification-box" href="#"></a> |
624 | 383 |
<a id="feedbackbox" rel="#feedback-form" href="#"></a> |
625 | 384 |
|
626 |
<div class="modal" id="error-success"> |
|
627 |
<h3 class="popup-header"> |
|
628 |
<span class="header-box"></span> |
|
629 |
</h3> |
|
630 |
<div class="popup-body"> |
|
631 |
<div class="popup-body-inner"> |
|
632 |
<div class="error-report"> |
|
633 |
<div class="send-btn">{% trans "report error" %}</div> |
|
634 |
<div class="sending">{% trans "sending error report..." %}</div> |
|
635 |
<div class="errormsg">{% trans "report failed" %}</div> |
|
636 |
<div class="success">{% trans "report send successfully" %}</div> |
|
637 |
</div> |
|
638 |
<div class="machine-now-building"></div> |
|
639 |
<div class="popup-separator"></div> |
|
640 |
<div class="password-container"> |
|
641 |
<div class="password-header"></div> |
|
642 |
<div class="password"></div> |
|
643 |
</div> |
|
644 |
<div class="popup-details"> |
|
645 |
<div class="write-password"></div> |
|
646 |
<div class="write-password-details">{% trans "More details about the result"%}</div> |
|
647 |
</div> |
|
385 |
<div class="overlay" id="generic-overlay-tpl"> |
|
386 |
<h3 class="header clearfix"> |
|
387 |
<span class="subtitle"></span> |
|
388 |
<span class="title"></span> |
|
389 |
<span class="closeme">close</span></h3> |
|
390 |
<div class="container"> |
|
391 |
<div class="content"> |
|
648 | 392 |
</div> |
649 | 393 |
</div> |
394 |
<div class="footer"></div> |
|
650 | 395 |
</div> |
651 | 396 |
|
397 |
<div id="error-overlay-content" class="hidden"> |
|
398 |
<div class="message"><p></p></div> |
|
399 |
<div class="error-details"> |
|
400 |
<span class="key">{% trans "Module" %}</span> |
|
401 |
<span class="value error-module"></span> |
|
402 |
|
|
403 |
<span class="key">{% trans "Code" %}</span> |
|
404 |
<span class="value error-code"></span> |
|
405 |
|
|
406 |
<span class="key">{% trans "Type" %}</span> |
|
407 |
<span class="value error-type"></span> |
|
408 |
|
|
409 |
<span class="key details">{% trans "Details" %}</span> |
|
410 |
<div class="value error-more-details"><p></p></div> |
|
411 |
</div> |
|
412 |
|
|
413 |
<div class="actions"> |
|
414 |
<span class="show-details">{% trans "Show details" %}</span> |
|
415 |
<span class="hide-details">{% trans "Hide details" %}</span> |
|
416 |
<span class="report-error">{% trans "Send report" %}</span> |
|
417 |
<span class="reload-app">{% trans "Reload application" %}</span> |
|
418 |
</div> |
|
419 |
</div> |
|
420 |
|
|
421 |
<div id="feedback-overlay-content" class="hidden overlay-content feedback-form"> |
|
422 |
<div class="description"> |
|
423 |
<p> |
|
424 |
{% blocktrans %}~okeanos is currently in alpha test and we would appreciate any kind of feedback. |
|
425 |
We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %} |
|
426 |
</p> |
|
427 |
</div> |
|
428 |
<div class="description messages noborder"> |
|
429 |
<p class="success-message hidden"> |
|
430 |
{% trans "thank you for submiting your feedback" %} |
|
431 |
</p> |
|
432 |
<p class="error-message hidden"> |
|
433 |
{% trans "some error occured submiting submiting your feedback, please try again later" %} |
|
434 |
</p> |
|
435 |
<p class="sending-message hidden"> |
|
436 |
{% blocktrans %}Sending feedback...{% endblocktrans %} |
|
437 |
</p> |
|
438 |
</div> |
|
439 |
<div class="form"> |
|
440 |
<div class="form-field"> |
|
441 |
<label for>{% trans "Please describe your problem here, provide as many details as possible" %}</label> |
|
442 |
<textarea class="feedback-message"> |
|
443 |
</textarea> |
|
444 |
</div> |
|
445 |
<div class="form-actions clearfix noborder"> |
|
446 |
<span class="form-action submit">{% trans "send feedback" %}</span> |
|
447 |
</div> |
|
448 |
</div> |
|
449 |
</div> |
|
652 | 450 |
<div class="modal" id="feedback-form" class="feedback notification-box"> |
653 | 451 |
<h3 class="popup-header"> |
654 | 452 |
<span class="header-box">{% trans "Send feedback" %}</span> |
... | ... | |
704 | 502 |
</div> |
705 | 503 |
</div> |
706 | 504 |
</div> |
505 |
|
|
506 |
<div id="loading-view" class="hidden"> |
|
507 |
<img src="/static/icons/indicators/small/progress.gif" /> |
|
508 |
<div class="header">Loading <span>~okeanos</span></div> |
|
509 |
<div class="info hidden"></div> |
|
510 |
</div> |
|
511 |
{% include "footer.html" %} |
|
512 |
|
|
513 |
<script> |
|
514 |
$(document).ready(function() { |
|
515 |
$(".css-panes").hide(); |
|
516 |
|
|
517 |
synnefo.ui.main.bind("initial", function() { |
|
518 |
if (window.TEST) { |
|
519 |
setTimeout(window.TEST, 60); |
|
520 |
} |
|
521 |
}); |
|
522 |
|
|
523 |
synnefo.config.update_interval = 5000 || {{ update_interval }}; |
|
524 |
synnefo.ui.init(); |
|
525 |
|
|
526 |
}) |
|
527 |
</script> |
|
707 | 528 |
</body> |
708 | 529 |
</html> |
Also available in: Unified diff