Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / templates / home.html @ 5af5920c

History | View | Annotate | Download (30.5 kB)

1
<!doctype html>
2
<html>
3

    
4
{% load i18n %}
5
<head>
6
    <title>~okeanos</title>
7
    
8
    <!--<meta http-equiv="X-UA-Compatible" content="IE=7">-->
9
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
10

    
11
    <link href="https://fonts.googleapis.com/css?family=Ubuntu&subset=latin,greek" rel="stylesheet" type="text/css" >
12
    <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,greek' rel='stylesheet' type='text/css'>
13

    
14
    <link rel="shortcut icon" href="{{ SYNNEFO_IMAGES_URL }}favicon.ico" />
15

    
16
    {% comment %}
17
    <script type="text/javascript" src="{% url javascript_catalog %}"></script> 
18
    {% endcomment %}
19

    
20
    <link rel="stylesheet" type="text/css" href="{{ SYNNEFO_CSS_URL }}main.css"/>
21

    
22
    <!--[if IE]>
23
        <style type="text/css" media="all">@import url({{ SYNNEFO_CSS_URL }}ie.css);</style>
24
    <![endif]-->
25
    <!--[if (lte IE 8)]>
26
        <style type="text/css" media="all">@import url({{ SYNNEFO_CSS_URL }}ie8.css);</style>
27
    <![endif]-->
28
    <!--[if (lte IE 7)]>
29
        <style type="text/css" media="all">@import url({{ SYNNEFO_CSS_URL }}ie7.css);</style>
30
    <![endif]-->
31

    
32
    <script src="{{ SYNNEFO_JS_LIB_URL }}jquery-1.7.2.js"></script>
33
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.cookie.js"></script>
34
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.client.js"></script>
35
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.tools.min.js"></script>
36
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.dataTables.min.js"></script>
37
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.pagination.js"></script>
38
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.zclip.js"></script>
39
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.base64.js"></script>
40

    
41

    
42
    <script src="{{ SYNNEFO_JS_LIB_URL}}underscore.js"></script>
43
    <script src="{{ SYNNEFO_JS_LIB_URL}}underscore.string.js"></script>
44
    <script src="{{ SYNNEFO_JS_LIB_URL}}backbone.js"></script>
45
    <script src="{{ SYNNEFO_JS_LIB_URL}}json2.js"></script>
46
    <script src="{{ SYNNEFO_JS_LIB_URL}}stacktrace.js"></script>
47

    
48
    <!--[if (lt IE 7)]>
49
        <script src="{{ SYNNEFO_JS_LIB_URL }}selectivizr.js"></script>
50
    <! [endif] -->
51

    
52
    <!--[if IE]>
53
        <script src="{{ SYNNEFO_JS_URL }}ui/ie_fixes.js"></script>
54
    <![endif]-->
55
    
56
    <script src="{{ SYNNEFO_JS_URL }}utils.js"></script>
57
    <script src="{{ SYNNEFO_JS_URL }}auth.js"></script>
58
    <script src="{{ SYNNEFO_JS_URL }}quota.js"></script>
59
    <script src="{{ SYNNEFO_JS_URL }}sync.js"></script>
60
    <script src="{{ SYNNEFO_JS_URL }}models.js"></script>
61
    <script src="{{ SYNNEFO_JS_URL }}glance_models.js"></script>
62
    <script src="{{ SYNNEFO_JS_URL }}views.js"></script>
63

    
64
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_vms_base_view.js"></script>
65
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_model_views.js"></script>
66
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_error_view.js"></script>
67
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_icon_view.js"></script>
68
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_single_view.js"></script>
69
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_list_view.js"></script>
70
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_networks_view.js"></script>
71
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_disks_view.js"></script>
72
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_metadata_view.js"></script>
73
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_feedback_view.js"></script>
74
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_create_view.js"></script>
75
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_connect_view.js"></script>
76
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_public_keys_view.js"></script>
77
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_custom_images.js"></script>
78

    
79
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_router.js"></script>
80
    <script src="{{ SYNNEFO_JS_WEB_URL }}ui_main_view.js"></script>
81

    
82
    <!-- the following views require refactor -->
83
    <script src="{{ SYNNEFO_JS_URL }}synnefo.js"></script>
84
    <script>
85
        tmp_auth_client = new synnefo.auth.AstakosClient({
86
            cookie_name: '{{ auth_cookie_name }}',
87
            login_url: '{{ login_redirect }}'
88
        });
89
        if (!tmp_auth_client.get_token()) { tmp_auth_client.redirect_to_login(); }
90
    </script>
91
    {{ CLOUDBAR_CODE }}
92
    
93
    <script>
94
        // empty object for console to avoid errors in browsers that don't support it
95
        if (!window.console) {window.console = {}; window.console.log = window.console.info = window.console.debug =
96
            window.console.error = function() {}};
97
        
98
        //populate available image icons array
99
        var os_icons = {{image_icons|safe}};
100
        
101
        // timeout value from settings.py
102
        var TIMEOUT = {{ timeout }};
103
        var TIMEOUTS_OCCURED = 0;
104
        var SKIP_TIMEOUTS = {{ skip_timeouts }};
105
        var UPDATE_INTERVAL = {{ update_interval }};
106
        var APP_DEBUG = {% if DEBUG %}true{% else %}false{% endif %};
107
        var API_OVERLAY_TITLE = "{% trans "API access" %}";
108
        var API_OVERLAY_SUBCONTENT = "{% trans "The API key provides full access to your <em>~okeanos</em> account, so always keep it private." %}";
109

110
        STATE_TEXTS = {
111
            'UNKNOWN': '{% trans "Unknown" %}',
112
            'BUILD':  '{% trans "Building..." %}',
113
            'FIREWALL':  '{% trans "Firewall change..." %}',
114
            'REBOOT': '{% trans "Rebooting..." %}',
115
            'STOPPED':'{% trans "Stopped" %}',
116
            'ACTIVE': '{% trans "Running" %}',
117
            'ERROR':  '{% trans "Error" %}',
118
            'DELETE': '',
119
            'DESTROY': '{% trans "Destroying..." %}',
120
            'BUILD_INIT':  '{% trans "Building..." %}',
121
            'BUILD_COPY':  '{% trans "Building..." %}',
122
            'BUILD_FINAL':  '{% trans "Building..." %}',
123
            'SHUTDOWN': '{% trans "Shutting down..." %}',
124
            'START': '{% trans "Starting..." %}',
125
            'CONNECT': '{% trans "Connecting..." %}',
126
            'DISCONNECT': '{% trans "Disconnecting..." %}'
127
        }
128

129

130

131
        // building statuses
132
        var BUILDING_MESSAGES = {
133
            'INIT': '{% trans "Initializing..." %}',
134
            'COPY': '{% trans "{0} of {1} ({2}%)" %}',
135
            'FINAL': '{% trans "Bulding image..." %}'
136
        }
137

138
        var ERROR_OVERRIDES = {
139
            // error message header
140
            'HEADER' : '{% trans "Error" %}',
141
            // default
142
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
143
            // bad request
144
            '400' : '{% trans "Malformed request." %}',
145
            // not found
146
            '404' : '{% trans "Your request has failed. Resource not found." %}',
147
            // internal server error
148
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
149
            // service unavailable
150
            '501' : '{% trans "This server has not been implemented yet." %}',
151
            // service unavailable
152
            '502' : '{% trans "Bad Gateway error." %}',
153
            // service unavailable
154
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
155
            // no server handshake
156
            '0' : '{% trans "Could not contact the server." %}',
157
            // no images found
158
            '-212' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
159
            // no flavors found
160
            '-213' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
161
            // error box title
162
            'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}',
163
            // no advanced details
164
            'NO_DETAILS' : '{% trans "Νο advanced details provided" %}',
165
            // timeout message
166
            'TIMEOUT' : '{% trans "It seems the server takes too long to respond, please check your network connectivity" %}'
167
        };
168

169
        var SUGGESTED_FLAVORS = {{ suggested_flavors|safe }};
170
        var SUGGESTED_ROLES = {{ suggested_roles|safe }}
171

172
        var SUCCESS = {
173
            'HEADER' : '{% trans "Success" %}',
174
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
175
            'PASSWORD' : '{% trans "Password:" %}',
176
            'CREATE_VM_SUCCESS' : '{% trans "Success" %}',
177
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your new machine is now buidling... (this might take a few minutes)" %}',
178
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Write down your password now:" %}',
179
            'CREATE_VM_SUCCESS_THREE' : '{% trans "You will need this later to connect to your machine." %}',
180
            'CREATE_VM_SUCCESS_FOUR' : '{% trans "After closing this window you will NOT be able to retrieve it again." %}'
181
        };
182

183
        var VARIOUS = {
184
            'CONFIRM' : '{% trans "Confirm" %}',
185
            'CANCEL' : '{% trans "Cancel" %}',
186
            'APPLY' : '{% trans "Apply" %}',
187
            'OFF' : '{% trans "Off" %}',
188
            'ON' : '{% trans "On" %}'
189
        };
190

    
191
    </script>
192
</head>
193

    
194
<body id="app">
195
    <!--<img id="okeanos-image" src="{{ SYNNEFO_IMAGES_URL }}body-bg2.png" />-->
196
    <div id="container">
197
        <div id="header">
198
            <div id="user">
199
                <div class="usermenu">
200
                    <div class="username"></div>
201
                    <ul class="useractions">
202
                        <!--<li class="feedback"><a class="action" href="#">{% trans "send feedback..." %}</a></li>-->
203
                        <li class="api"><a class="action" href="#">{% trans "API access..." %}</a></li>
204
                        <li class="public_keys"><a class="action" href="#">{% trans "ssh public keys..." %}</a></li>
205
                        <!--<li class="custom_images"><a class="action" href="#">{% trans "custom images..." %}</a></li>-->
206
                        <!--<li class="logout last"><a class="action" href="#">{% trans "logout" %}</a></li>-->
207
                    </ul>
208
                </div>
209
                <div class="langmenu">
210
                    <a class="current_lang">en</a>
211
                    {% comment %}
212
                {% get_available_languages as LANGUAGES %}
213
                {% for lang in LANGUAGES %}
214
                <a {% if  == lang.0 %}
215
                    class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
216

    
217
                    {% if not forloop.last %}<span class="sep">~</span>{% endif %}
218
                    {% endfor %}
219
                {% endcomment %}
220
                </div>
221
            </div>
222
            <div class="header-logo">
223
                <a href="/">
224
                    <img src="{{ SYNNEFO_IMAGES_URL }}okeanos-logo-alpha.png" alt="okeanos (alpha)"/>
225
                </a>
226
            </div>
227
        </div>
228
        <div id="content">
229
            <div id="wrapper" class="clearfix">
230

    
231
                <div class="panes-menu clearfix">
232
                <!-- tabs -->
233
                <div class="tab-name">{% trans "machines" %}</div>
234
                <ul class="css-tabs">
235
                    <li><a href="machines" title="{% trans "manage  virtual " %}"
236
                        class="primary" id="machines_view_link">
237
                        <img src="{{ SYNNEFO_IMAGES_URL }}machines-icon.png" /></a></li>
238
                    <li><a href="networks" title="{% trans "configure " %}"
239
                        class="primary" id="networks_view_link">
240
                        <img src="{{ SYNNEFO_IMAGES_URL }}networks-icon.png" /></a></li>
241
                    {% comment %}
242
                    <li><a href="disks" title="{% trans "manage  storage " %}"
243
                        class="primary" id="disks_view_link">
244
                        <img src="{{ SYNNEFO_IMAGES_URL }}disks-icon.png" /></a></li>
245
                    {% endcomment %}
246
                </ul>
247
                </div>
248
                <div class="css-panes">
249
                    <div id="machines-pane" class="pane" style="display:block;">
250
                        {% include "partials/machines.html" %}
251
                    </div>
252
                    <div id="networks-pane" class="pane">
253
                        {% include "partials/networks.html" %}
254
                    </div>
255
                    <div id="disks-pane" class="pane">
256
                            {% include "partials/disks.html" %}
257
                    </div>
258

    
259
                    <div class="confirm_multiple clearfix" id="multiple_actions_container">
260
                        <div class="confirm_multiple_actions confirm-all-cont global hidden confirm_multiple_cont clearfix">
261
                            <div class="confirm-all msg">
262
                                <p>You requested multiple actions to execute (<span
263
                                    class="show">show all</span>)</p>
264
                                <button class="yes">Confirm all</button>
265
                                <button class="no">Cancel all</button>
266
                            </div>
267
                            <div class="details"></div>
268
                        </div>
269
                        <div class="ns-confirms-cont">
270
                            <div class="confirm_multiple_actions hidden confirm_multiple_cont
271
                                ns-confirm clearfix"
272
                                id="conirm_multiple_cont_template">
273
                                <div class="confirm-all msg">
274
                                    <p></p>
275
                                    <button class="yes"></button>
276
                                    <button class="no"></button>
277
                                </div>
278
                                <div class="details"></div>
279
                            </div>
280
                        </div>
281
                    </div>
282

    
283
                </div>
284
            </div>
285
        </div>
286
    </div>
287

    
288
    <!-- activate tabs with JavaScript -->
289
    <script>
290

291
        //load opera css fixes
292
        if ($.browser.opera) {
293
            $("<link/>", {
294
               rel: "stylesheet",
295
               type: "text/css",
296
               href: "{{ SYNNEFO_CSS_URL }}opera.css"
297
            }).appendTo("head");
298
        }
299

300
        $(document).ready(function(){
301

302
            {% if current_lang == "el" and not DEBUG %}
303
                window.location = "/lang/?l=en";
304
            {% endif %}
305

306
            // user menu interaction
307
            var resetUserMenu = function() {
308
                $(this).removeClass("hovered");
309
                $(this).removeClass("active");
310
            }
311

312
            $(".usermenu").live("click", function(){
313
                $(this).addClass("active");
314
            });
315
            $(".usermenu").bind('mouseleave', resetUserMenu);
316
            $(".usermenu").live("mouseover", function(){
317
                $(this).addClass("hovered");
318
            });
319

320
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
321
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
322

323
            // bind menu actions
324
            $(".usermenu .logout").click(function() {
325
                synnefo.auth_client.logout();
326
            });
327

328
            $(".usermenu .api").click(function(){
329
                synnefo.ui.main.api_info_view.show();
330
            });
331

332
        });
333
        
334
        function positionBottomMessages() {
335
            var el = $("#multiple_actions_container");
336
        }
337
        
338
        
339
        $(document).ready(function() {
340
          // Footer position handlers
341
          var footerHeight = 0;
342
          var footerTop = 0;
343
          var $footer = $("#footer-container");
344
          function _positionFooter() {
345

346
              footerHeight = 80;
347
              footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
348
              if (($(document.body).height()+footerHeight) < $(window).height()) {
349

350
                  $footer.css({
351
                       position: "absolute"
352
                  }).css({
353
                       top: footerTop
354
                  })
355
               } else {
356
               
357
                  if ($footer.css("position") == "static") {
358
                      if ($(document.body).height() < $(window).height()) {    
359
                          $footer.css({
360
                               position: "absolute"
361
                          }).css({
362
                               top: footerTop
363
                           })
364
                       }
365
                   } else {
366

367
                      $footer.css({
368
                          position: "static"
369
                      })
370
                  }
371
              }
372

373
          }
374
          _positionFooter();
375
          window.positionFooter = _.throttle(_positionFooter, 100);
376
          window.forcePositionFooter = _positionFooter;
377
          $(window).scroll(window.positionFooter).resize(window.positionFooter)
378

379
          $(window).bind("load", function() { 
380
            _positionFooter();
381
          });
382
        
383
        })
384
    </script>
385

    
386
    <!-- base notification for error/success reporting -->
387
    <a id="notification" rel="#error-success" href="#"></a>
388
    <a id="msgbox" rel="#notification-box" href="#"></a>
389
    <a id="feedbackbox" rel="#feedback-form" href="#"></a>
390

    
391
    <div class="overlay" id="generic-overlay-tpl">
392
        <div class="overlay-inner">
393
            <h3 class="overlay-header clearfix">
394
                <span class="subtitle"></span>
395
                <span class="title"></span>
396
                <span class="closeme">close</span></h3>
397
            <div class="container">
398
                <div class="content">
399
                </div>
400
            </div>
401
            <div class="footer"></div>
402
        </div>
403
    </div>
404

    
405
    <div id="error-overlay-content" class="hidden">
406
        <div class="error-nav hidden clearfix">
407
            <span class="indicator"><span class="num">1</span> <span
408
                    class="ind-msg">new error occured</span></span>
409
            <span class="show-next nav-btn">{% trans "next" %}</span>
410
            <span class="show-prev nav-btn">{% trans "previous" %}</span>
411
        </div>
412
        <div class="message"><p></p></div>
413
        <div class="error-details">
414
            <span class="key">{% trans "Module" %}</span>
415
            <span class="value error-module"></span>
416

    
417
            <span class="key">{% trans "Code" %}</span>
418
            <span class="value error-code"></span>
419

    
420
            <span class="key">{% trans "Type" %}</span>
421
            <span class="value error-type"></span>
422

    
423
            <span class="key details">{% trans "Details" %}</span>
424
            <div class="value error-more-details"><p></p></div>
425
        </div>
426
        
427
        <!--<div class="navigation">-->
428
            <!--<span class="next-error">{% trans "next error" %}</span>-->
429
            <!--<span class="previous-error">{% trans "previous error" %}</span>-->
430
        <!--</div>-->
431
        
432
        <!--<div class="date">-->
433
            <!--<span class="error-date"></span>-->
434
        <!--</div>-->
435

    
436
        <div class="actions">
437
            <span class="show-details">{% trans "Show details" %}</span>
438
            <span class="hide-details">{% trans "Hide details" %}</span>
439
            <span class="report-error">{% trans "Send report" %}</span>
440
            <span class="reload-app">{% trans "Reload" %}</span>
441
        </div>
442
    </div>
443
    <div id="feedback-overlay-content" class="hidden overlay-content feedback-form">
444
        <div class="description">
445
            <p>
446
                {% blocktrans %}~okeanos is currently in alpha test and we would appreciate any kind of feedback.
447
                We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %}
448
            </p>
449
        </div>
450
        <div class="description messages noborder">
451
            <p class="success-message hidden">
452
            {% trans "thank you for submiting your feedback" %}
453
            </p>
454
            <p class="error-message hidden">
455
                {% trans "some error occured submiting submiting your feedback, please try again later" %}
456
            </p>
457
            <p class="sending-message hidden">
458
            {% blocktrans %}Sending feedback...{% endblocktrans %}
459
            </p>
460
        </div>
461
        <div class="form">
462
            <div class="form-field">
463
                <label for{% trans "Please  your  here, provide  many  as " %}</label
464
                <textarea ="feedback-message"> 
465
                </textarea>
466
            </div>
467
            <div class="form-actions clearfix noborder">
468
                <span class="form-action submit">{% trans "send feedback" %}</span>
469
            </div>
470
        </div>
471
    </div>
472
    <div class="modal" id="feedback-form" class="feedback notification-box">
473
      <h3 class="popup-header overlay-header">
474
        <span class="header-box">{% trans "Send feedback" %}</span>
475
      </h3>
476
      <div class="popup-body">
477
        <div class="popup-body-inner">
478
          <div class="form-container">
479
            <p class="feedback-intro">
480
            {% blocktrans %}~okeanos is currently in alpha test and we would appreciate any kind of feedback.
481
            We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %}</p>
482
            <form id="feedback-form">
483
              <label for="feedback-msg">{% trans "Please describe your problem here, provide as many details as possible" %}</label>
484
              <div class="description"></div>
485
              <div class="empty-error-msg">{% trans "Please provide some feedback" %}</div>
486
              <textarea name="feedback-msg" class="feedback-text"></textarea>
487

    
488
              <input type="checkbox" name="submit-submit-data" class='submit-data' />
489
              <input type="submit" value="{% trans "submit " %}" class="submit" />
490
              <textarea name="feedback-data" class="data-text"></textarea>
491
            </form>
492
          </div>
493

    
494
          <div class="message sending">{% trans "submiting your data....." %}</div>
495
          <div class="message success">
496
            {% trans "thank you for submiting your feedback" %}
497
            <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
498
          <div class="message errormsg">
499
            {% trans "some error occured submiting submiting your feedback, please try again later" %}
500
            <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
501
        </div>
502
      </div>
503
    </div>
504
    
505
    <div id="details-overlay" class="overlay-content overlay-info hidden">
506
        <div class="description intro">
507
            <p></p>
508
        </div>
509
        <div class="description subinfo">
510
            <p></p>
511
        </div>
512
    </div>
513

    
514
    <div id="suspended-vm-overlay" class="overlay-content overlay-info hidden">
515
        <div class="description noborder">
516
          You VM has been suspended, please contact us for more details.
517
        </div>
518
    </div>
519

    
520
    <div id="api-info-overlay" class="overlay-content overlay-info hidden">
521
        <div class="description">
522
            <p>{% blocktrans with EXTERNAL_CLIENT_URL as EXTERNAL_CLIENT_URL %}Use the following API key along with the <a
523
                href="{{ EXTERNAL_CLIENT_URL }}">./kamaki</a> client to manage
524
            your cloud resources from outside this page.{% endblocktrans %}</p>
525
        </div>
526
        <div class="copy-content">
527
            <p></p>
528
        </div>
529
        <div class="description subinfo">
530
            <p>
531
            {% trans "The API key provides full access to your <em>~okeanos</em> account, so always keep it private." %}
532
            </p>
533
        </div>
534
    </div>
535

    
536
    <div class="api_overlay_template">
537
        <div class="api_overlay_content">
538
            <p>Use the following API key along with the <a href="{{ EXTERNAL_CLIENT_URL }}">./kamaki</a> client to manage your cloud resources from outside this page.</p>
539
        </div>
540
    </div>
541

    
542
    <div class="modal" id="notification-box" class="notification-box">
543
        <h3 class="popup-header">
544
            <span class="header-box"></span>
545
        </h3>
546
        <div class="popup-body">
547
            <div class="popup-body-inner">
548
                <div class="machine-now-building"></div>
549
                <div class="popup-separator"></div>
550
                <div class="password-container">
551
                    <div class="password"></div>
552
                </div>
553
                <div class="sub-text"></div>
554
            </div>
555
        </div>
556
    </div>
557
    
558
    <div id="loading-view" class="hidden clearfix">
559
        <div class="header clearfix images off">Loading images...<span></span></div>
560
        <div class="header clearfix flavors off">Loading flavors...<span></span></div>
561
        <div class="header clearfix vms off">Loading machines...<span></span></div>
562
        <div class="header clearfix networks off">Loading networks...<span></span></div>
563
        <div class="header clearfix layout off">Rendering layout...<span></span></div>
564
    </div>
565
    <div id="user_public_keys" class="overlay-content overlay-content hidden">
566
        {% include "userdata/public_keys_view.html" %}
567
    </div>
568
    <div id="user_custom_images" class="overlay-content overlay-content hidden">
569
        {% include "partials/custom_images.html" %}
570
    </div>
571
    {% include "footer.html" %}
572

    
573
    <script>
574
        $(document).ready(function() {
575
            $(".css-panes").hide();
576

577
            // TODO: match <= 1.9.1
578
            if ($.browser.mozilla && $.browser.version.substr(0,3) == "1.9") {
579
                synnefo.config.overlay_speed = 0;
580
                $.fx.off = true;
581
            }
582
            
583
            // synnefo js config
584
            synnefo.VERSION = "{{ synnefo_version }}";
585
            synnefo.config.update_interval = {{ update_interval }};
586
            synnefo.config.update_interval_increase = {{ update_interval_increase }};
587
            synnefo.config.fast_interval = {{ update_interval_fast }};
588
            synnefo.config.update_interval_increase_after_calls = {{ update_interval_increase_after_calls }};
589
            synnefo.config.update_interval_max = {{ update_interval_max }};
590
            synnefo.config.delay_on_blur = {{ delay_on_blur }};
591
            synnefo.config.update_hidden_views = {{ update_hidden_views }};
592
            synnefo.config.handle_window_exceptions = {{ handle_window_exceptions }};
593
            synnefo.config.ajax_timeout = {{ timeout }};
594
            synnefo.config.skip_timeouts = {{ skip_timeouts }};
595
            synnefo.config.machines_icons_url = '{{ SYNNEFO_IMAGES_URL }}icons/machines/';
596
            synnefo.config.vm_name_template = {{ vm_name_template|safe }};
597
            synnefo.config.flavors_disk_templates_info = {{ flavors_disk_templates_info|safe }};
598
            synnefo.config.vm_image_common_metadata = {{ vm_image_common_metadata|safe }};
599

600
            synnefo.config.diagnostics_update_interval = {{ diagnostics_update_interval }};
601
            // override diagnostic messages display
602
            synnefo.config.diagnostic_messages_tpls = {
603
              'image-helper-task-start': "{% trans "Running task 'MESSAGE'" %}"
604
            };
605
            // what messages to display based on vm status
606
            synnefo.config.diagnostics_status_messages_map = {
607
                'BUILD': ['image-helper-task-start', 'image-info'],
608
                'ERROR': ['image-error']
609
            };
610

611
                           // TODO: make it dynamic
612
            synnefo.config.api_urls = {
613
                'compute':  {{ compute_api_url|safe }}, 
614
                'glance': {{ glance_api_url|safe }}
615
            };
616
            
617
            // TODO: configurable userdata urls in models.js
618
            synnefo.config.userdata_url = '/ui/userdata';
619
            synnefo.config.userdata_keys_url = '{% url ui_keys_collection %}';
620
            synnefo.config.userdata_keys_limit = {{ userdata_keys_limit }};
621
            
622
            // media config
623
            synnefo.config.media_url = '{{ UI_MEDIA_URL }}';
624
            synnefo.config.js_url = '{{ SYNNEFO_JS_URL }}';
625
            synnefo.config.images_url = '{{ SYNNEFO_IMAGES_URL }}';
626
            synnefo.config.image_deleted_title = {{ image_deleted_title|safe }};
627
            synnefo.config.changes_since_alignment = {{ changes_since_alignment }};
628
            synnefo.config.image_deleted_size_title = {{ image_deleted_size_title|safe }};
629
            synnefo.config.use_glance = {{ use_glance }};
630
            synnefo.config.indicators_icons_url = '{{ SYNNEFO_IMAGES_URL }}icons/indicators/';
631
            synnefo.config.machines_icons_url = '{{ SYNNEFO_IMAGES_URL }}icons/machines/';
632
            synnefo.config.support_ssh_os_list = {{ support_ssh_os_list|safe }};
633
            synnefo.config.os_created_users = {{ os_created_users|safe }};
634
            synnefo.config.feedback_post_url = {{ feedback_post_url|safe }};
635
            
636
            synnefo.config.logout_redirect = '{{ logout_redirect }}';
637
            synnefo.config.login_redirect = '{{ login_redirect }}';
638
            synnefo.config.auth_cookie_name = '{{ auth_cookie_name }}';
639

640
            synnefo.config.translate_uuids = {{ translate_uuids|safe }};
641
            synnefo.config.user_catalog_url = {{ user_catalog_url|safe }};
642

643
            synnefo.config.network_suggested_subnets = {{ network_suggested_subnets|safe }};
644
            synnefo.config.network_available_types = {{ network_available_types|safe }};
645
            synnefo.config.network_allow_duplicate_vm_nics = {{ network_allow_duplicate_vm_nics }};
646
            synnefo.config.network_strict_destroy = {{ network_strict_destroy }};
647
            synnefo.config.network_allow_multiple_destory = {{ network_allow_multiple_destroy }};
648
            synnefo.config.group_public_networks = {{ group_public_networks }};
649
            synnefo.config.grouped_public_network_name = {{ grouped_public_network_name|safe }};
650
            synnefo.config.vm_hostname_format = {{ vm_hostname_format|safe }};
651
            synnefo.config.automatic_network_range_format = {{ automatic_network_range_format|safe }};
652
            synnefo.config.quota_url = '{% url synnefo.ui.views.user_quota %}';
653
            synnefo.config.custom_image_help_url = '{{ custom_image_help_url|safe }}';
654
            synnefo.config.quotas_update_interval = {{ quotas_update_interval }};
655
            
656
            synnefo.auth_client = new synnefo.auth.AstakosClient({
657
                login_url: synnefo.config.login_redirect,
658
                logout_url: synnefo.config.logout_redirect,
659
                cookie_name: synnefo.config.auth_cookie_name,
660
                logout_callback: function(client) {
661
                    Backbone.history.navigate(client.config.logout_url);
662
                    window.location = client.config.logout_url; 
663
                }
664
            });
665

666
            // user config
667
            synnefo.user = synnefo.auth_client;
668
            if (!synnefo.user.get_token()) { 
669
              synnefo.auth_client.redirect_to_login(); 
670
            }
671

672
            $(".usermenu .username").text("options");
673

674
            // images config
675
            synnefo.config.system_images_owners = {{ system_images_owners|safe }};
676
            synnefo.ui.init();
677
            synnefo.ui.main.bind("ready", function(){
678

679
              synnefo.ui.trigger_error("test123");
680
            });
681

682
        })
683
    </script>
684
</body>
685
</html>