Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 5cac72a2

History | View | Annotate | Download (23.2 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
    <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 %}
15

    
16
    <link rel="stylesheet" type="text/css" href="static/main.css"/>
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

    
41
    
42
    <script src="static/snf/js/utils.js"></script>
43
    <script src="static/snf/js/sync.js"></script>
44
    <script src="static/snf/js/models.js"></script>
45
    <script src="static/snf/js/views.js"></script>
46

    
47
    <script src="static/snf/js/ui/web/ui_vms_base_view.js"></script>
48
    <script src="static/snf/js/ui/web/ui_error_view.js"></script>
49
    <script src="static/snf/js/ui/web/ui_icon_view.js"></script>
50
    <script src="static/snf/js/ui/web/ui_single_view.js"></script>
51
    <script src="static/snf/js/ui/web/ui_list_view.js"></script>
52
    <script src="static/snf/js/ui/web/ui_networks_view.js"></script>
53
    <script src="static/snf/js/ui/web/ui_main_view.js"></script>
54
    <script src="static/snf/js/ui/web/ui_metadata_view.js"></script>
55
    <script src="static/snf/js/ui/web/ui_feedback_view.js"></script>
56
    <script src="static/snf/js/ui/web/ui_create_view.js"></script>
57
    <script src="static/snf/js/ui/web/ui_connect_view.js"></script>
58

    
59
    <!-- the following views require refactor -->
60
    <!--<script src="static/snf/js/ui/create_view.js"></script>-->
61
    <script src="static/invitations.js"></script>
62
    <script src="static/synnefo.js"></script>
63

    
64
    {% if DEBUG %}
65
        <script src="static/snf/js/tests/functional.js"></script>
66
    {% endif %}
67
    
68
    <script>
69
        // empty object for console to avoid errors in browsers that don't support it
70
        if (!window.console) {window.console = {}; window.console.log = window.console.info = window.console.debug =
71
            window.console.error = function() {}};
72

73
        //populate available image icons array
74
        var os_icons = {{image_icons|safe}};
75
        
76
        // timeout value from settings.py
77
        var TIMEOUT = {{ timeout }};
78
        var TIMEOUTS_OCCURED = 0;
79
        var SKIP_TIMEOUTS = 1;
80
        var UPDATE_INTERVAL = {{ update_interval }};
81
        var LOGOUT_REDIRECT = '{{ logout_redirect }}';
82
        var INVITATIONS_URL = "{% url invitations %}";
83
        var INVITATIONS_TITLE = "{% trans "Invite people" %}";
84
        var APP_DEBUG = {% if DEBUG %}true{% else %}false{% endif %};
85
        var FEEDBACK_URL = "{% url feedback %}";
86
        var FEEDBACK_TITLE = "{% trans "Send feedback" %}";
87
        var API_OVERLAY_TITLE = "{% trans "API access" %}";
88
        var API_OVERLAY_SUBCONTENT = "{% trans "The API key provides full access to your <em>~okeanos</em> account, so always keep it private." %}";
89

90
        STATE_TEXTS = {
91
            'UNKNOWN': '{% trans "Unknown" %}',
92
            'BUILD':  '{% trans "Building..." %}',
93
            'FIREWALL':  '{% trans "Firewall change..." %}',
94
            'REBOOT': '{% trans "Rebooting..." %}',
95
            'STOPPED':'{% trans "Stopped" %}',
96
            'ACTIVE': '{% trans "Running" %}',
97
            'ERROR':  '{% trans "Error" %}',
98
            'DELETE': '',
99
            'DESTROY': '{% trans "Destroying..." %}',
100
            'BUILD_INIT':  '{% trans "Building..." %}',
101
            'BUILD_COPY':  '{% trans "Building..." %}',
102
            'BUILD_FINAL':  '{% trans "Building..." %}',
103
            'SHUTDOWN': '{% trans "Shutting down..." %}',
104
            'START': '{% trans "Starting..." %}',
105
            'CONNECT': '{% trans "Connecting..." %}',
106
            'DISCONNECT': '{% trans "Disconnecting..." %}'
107
        }
108

109

110

111
        // building statuses
112
        var BUILDING_MESSAGES = {
113
            'INIT': '{% trans "Initializing..." %}',
114
            'COPY': '{% trans "{0} of {1} ({2}%)" %}',
115
            'FINAL': '{% trans "Finalizing..." %}'
116
        }
117

118
        // server statuses and transitions
119
        var STATUSES = {
120
            'UNKNOWN'   : '{% trans "Unknown" %}',
121
            'BUILD'     : '{% trans "Building" %}',
122
            'REBOOT'    : '{% trans "Rebooting" %}',
123
            'STOPPED'   : '{% trans "Stopped" %}',
124
            'ACTIVE'    : '{% trans "Running" %}',
125
            'ERROR'     : '{% trans "Error" %}'
126
        };
127

128
        var TRANSITIONS = {
129
            'Shutting down' : '{% trans "Shutting down" %}',
130
            'Rebooting'     : '{% trans "Rebooting" %}',
131
            'Starting'      : '{% trans "Starting" %}',
132
            'Destroying'    : '{% trans "Destroying" %}',
133
            'Connecting'    : '{% trans "Connecting" %}',   // used only in networks
134
            'Disconnecting' : '{% trans "Disconnecting" %}' // used only in networks
135
        };
136

137
        // Server statuses and transitions that should be displayed as active or inactive
138
        var ACTIVE_STATES = [
139
            '{% trans "Building" %}',
140
            '{% trans "Rebooting" %}',
141
            '{% trans "Running" %}',
142
            '{% trans "Shutting down" %}',
143
            '{% trans "Rebooting" %}',
144
            '{% trans "Destroying" %}'
145
        ];
146
        
147
        var TRANSITION_STATES = [
148
            '{% trans "Building" %}',
149
            '{% trans "Rebooting" %}',
150
            '{% trans "Starting" %}',
151
            '{% trans "Shutting down" %}',
152
            '{% trans "Destroying" %}',
153
            '{% trans "Connecting" %}',
154
            '{% trans "Disconnectig" %}'
155
        ]
156
        var TRANSITION_STATE_APPEND = "...";
157

158
        var INACTIVE_STATES = [
159
            '{% trans "Unknown" %}',
160
            '{% trans "Stopped" %}',
161
            '{% trans "Error" %}',
162
            '{% trans "Starting" %}',
163
        ];
164

165
        // Network statuses and transitions
166
        var NET_STATES = {
167
            'ACTIVE'        : '{% trans "Private network" %}',  // this comes from the API
168
            'DELETED'       : '{% trans "Deleted" %}',          // this comes from the API
169
            'Destroying'    : '{% trans "Destroying" %}',
170
            'Connecting'    : '{% trans "Connecting" %}',
171
            'Disconnecting' : '{% trans "Disconnecting" %}'
172
        };
173

174
        var ERROR_OVERRIDES = {
175
            // error message header
176
            'HEADER' : '{% trans "Error" %}',
177
            // default
178
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
179
            // bad request
180
            '400' : '{% trans "Malformed request." %}',
181
            // not found
182
            '404' : '{% trans "Your request has failed. Resource not found." %}',
183
            // internal server error
184
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
185
            // service unavailable
186
            '501' : '{% trans "This server has not been implemented yet." %}',
187
            // service unavailable
188
            '502' : '{% trans "Bad Gateway error." %}',
189
            // service unavailable
190
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
191
            // no server handshake
192
            '0' : '{% trans "Could not contact the server." %}',
193
            // no images found
194
            '-212' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
195
            // no flavors found
196
            '-213' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
197
            // error box title
198
            'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}',
199
            // no advanced details
200
            'NO_DETAILS' : '{% trans "Νο advanced details provided" %}'
201
        };
202

203
        var SUGGESTED_FLAVORS = {{ suggested_flavors|safe }};
204
        var SUGGESTED_ROLES = {{ suggested_roles|safe }}
205

206
        var SUCCESS = {
207
            'HEADER' : '{% trans "Success" %}',
208
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
209
            'PASSWORD' : '{% trans "Password:" %}',
210
            'CREATE_VM_SUCCESS' : '{% trans "Success" %}',
211
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your new machine is now buidling... (this might take a few minutes)" %}',
212
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Write down your password now:" %}',
213
            'CREATE_VM_SUCCESS_THREE' : '{% trans "You will need this later to connect to your machine." %}',
214
            'CREATE_VM_SUCCESS_FOUR' : '{% trans "After closing this window you will NOT be able to retrieve it again." %}'
215
        };
216

217
        var VARIOUS = {
218
            'CONFIRM' : '{% trans "Confirm" %}',
219
            'CANCEL' : '{% trans "Cancel" %}',
220
            'APPLY' : '{% trans "Apply" %}',
221
            'OFF' : '{% trans "Off" %}',
222
            'ON' : '{% trans "On" %}'
223
        };
224

    
225
    </script>
226
</head>
227

    
228
<body>
229
    <!--<img id="okeanos-image" src="/static/body-bg2.png" />-->
230
    <div id="container">
231
        <div id="header">
232
            <div id="user">
233
                <div class="usermenu">
234
                    <div class="username">{{ request.user.uniq }}</div>
235
                    <ul class="useractions">
236
                        <li class="invitations"><a class="action" href="#">{% trans "invite friends..." %}</a></li>
237
                        <li class="feedback"><a class="action" href="#">{% trans "send feedback..." %}</a></li>
238
                        <li class="api"><a class="action" href="#">{% trans "API access..." %}</a></li>
239
                        <li class="logout last"><a class="action" href="#">{% trans "logout" %}</a></li>
240
                    </ul>
241
                </div>
242
                <div class="langmenu">
243
                    <a class="current_lang">en</a>
244
                    {% comment %}
245
                {% get_available_languages as LANGUAGES %}
246
                {% for lang in LANGUAGES %}
247
                <a {% if  == lang.0 %}
248
                    class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
249

    
250
                    {% if not forloop.last %}<span class="sep">~</span>{% endif %}
251
                    {% endfor %}
252
                {% endcomment %}
253
                </div>
254
            </div>
255
            <div class="header-logo">
256
                <a href="/">
257
                    <img src="static/okeanos-logo-alpha.png" alt="okeanos (alpha)"/>
258
                </a>
259
            </div>
260
        </div>
261
        <div id="content">
262
            <div id="wrapper" class="clearfix">
263

    
264
                <div class="panes-menu clearfix">
265
                <!-- tabs -->
266
                <div class="tab-name">{% trans "machines" %}</div>
267
                <ul class="css-tabs">
268
                    <li><a href="machines" title="{% trans "manage  virtual " %}"
269
                        class="primary" id="machines_view_link">
270
                        <img src="static/machines-icon.png" /></a></li>
271
                    <li><a href="networks" title="{% trans "configure " %}"
272
                        class="primary" id="networks_view_link">
273
                        <img src="static/networks-icon.png" /></a></li>
274
                    <li class="hidden"><a href="disks" title="{% trans "manage  storage " %}"
275
                        class="primary" id="disks_view_link">
276
                        <img src="static/disks-icon.png" /></a></li>
277
                </ul>
278
                </div>
279
                <div class="css-panes">
280
                    <div id="machines-pane" class="pane" style="display:block;">
281
                        {% include "partials/machines.html" %}
282
                    </div>
283
                    <div id="networks-pane" class="pane">
284
                        {% include "partials/networks.html" %}
285
                    </div>
286
                    <div id="disks-pane" class="pane"></div>
287

    
288
                    <div class="confirm_multiple clearfix" id="multiple_actions_container">
289
                        <div class="confirm_multiple_actions confirm_multiple_cont clearfix">
290
                            <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "machines" %}</p>
291
                            <button class="yes">{% trans "Confirm All" %}</button>
292
                            <button class="no">{% trans "Cancel All" %}</button>
293
                        </div>
294
                        <div class="confirm_reboot_required confirm_multiple_cont clearfix">
295
                            <p><span class="actionLen"></span> {% trans "machines needs to be rebooted for changes to apply" %}</p>
296
                            <button class="yes">{% trans "Reboot All" %}</button>
297
                            <button class="no">{% trans "Cancel All" %}</button>
298
                            <div class="reboot-machines-list"></div>
299
                        </div>
300
                    </div>
301

    
302
                </div>
303
            </div>
304
        </div>
305
    </div>
306

    
307
    <!-- activate tabs with JavaScript -->
308
    <script>
309

310
        //load opera css fixes
311
        if ($.browser.opera) {
312
            $("<link/>", {
313
               rel: "stylesheet",
314
               type: "text/css",
315
               href: "static/opera.css"
316
            }).appendTo("head");
317
        }
318

319
        $(document).ready(function(){
320

321
            {% if current_lang == "el" and not DEBUG %}
322
                window.location = "/lang/?l=en";
323
            {% endif %}
324

325
            // user menu interaction
326
            var resetUserMenu = function() {
327
                $(this).removeClass("hovered");
328
                $(this).removeClass("active");
329
            }
330

331
            $(".usermenu").live("click", function(){
332
                $(this).addClass("active");
333
            });
334
            $(".usermenu").bind('mouseleave', resetUserMenu);
335
            $(".usermenu").live("mouseover", function(){
336
                $(this).addClass("hovered");
337
            });
338

339
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
340
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
341

342
            // bind menu actions
343
            $(".usermenu .logout").click(function() {
344
                user_session_logout();
345
            });
346

347
            $(".usermenu .invitations").click(show_invitations);
348
            $(".usermenu .api").click(show_api_overlay);
349

350
        });
351
        
352
        function positionBottomMessages() {
353
            var el = $("#multiple_actions_container");
354
        }
355

356
        $(window).bind("load", function() { 
357
               var footerHeight = 0;
358
               var footerTop = 0;
359
               var $footer = $("#footer-container");
360

361
               positionFooter();
362
               function positionFooter() {
363
                   footerHeight = 80;
364
                   footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
365
                   if (($(document.body).height()+footerHeight) < $(window).height()) {
366

367
                       $footer.css({
368
                            position: "absolute"
369
                       }).css({
370
                            top: footerTop
371
                       })
372
                    } else {
373
                    
374
                       if ($footer.css("position") == "static") {
375
                           if ($(document.body).height() < $(window).height()) {    
376
                               $footer.css({
377
                                    position: "absolute"
378
                               }).css({
379
                                    top: footerTop
380
                                })
381
                            }
382
                        } else {
383

384
                           $footer.css({
385
                               position: "static"
386
                           })
387
                       }
388
                   }
389

390
                   }
391
               window.positionFooter = _.throttle(positionFooter, 100);
392
               $(window).scroll(positionFooter).resize(positionFooter)
393
        });
394
    </script>
395

    
396
    <!-- base notification for error/success reporting -->
397
    <a id="notification" rel="#error-success" href="#"></a>
398
    <a id="msgbox" rel="#notification-box" href="#"></a>
399
    <a id="feedbackbox" rel="#feedback-form" href="#"></a>
400

    
401
    <div class="overlay" id="generic-overlay-tpl">
402
        <h3 class="header clearfix">
403
            <span class="subtitle"></span>
404
            <span class="title"></span>
405
            <span class="closeme">close</span></h3>
406
        <div class="container">
407
            <div class="content">
408
            </div>
409
        </div>
410
        <div class="footer"></div>
411
    </div>
412

    
413
    <div id="error-overlay-content" class="hidden">
414
        <div class="message"><p></p></div>
415
        <div class="error-details">
416
            <span class="key">{% trans "Module" %}</span>
417
            <span class="value error-module"></span>
418

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

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

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

    
438
        <div class="actions">
439
            <span class="show-details">{% trans "Show details" %}</span>
440
            <span class="hide-details">{% trans "Hide details" %}</span>
441
            <span class="report-error">{% trans "Send report" %}</span>
442
            <span class="reload-app">{% trans "Reload application" %}</span>
443
        </div>
444
    </div>
445

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

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

    
497
            <div class="message sending">{% trans "submiting your data....." %}</div>
498
            <div class="message success">
499
                {% trans "thank you for submiting your feedback" %}
500
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
501
            <div class="message errormsg">
502
                {% trans "some error occured submiting submiting your feedback, please try again later" %}
503
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
504
            </div>
505
            </div>
506
        </div>
507
    </div>
508
    
509
    <div class="api_overlay_template">
510
        <div class="api_overlay_content">
511
            <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>
512
        </div>
513
    </div>
514

    
515
    <div class="modal" id="notification-box" class="notification-box">
516
        <h3 class="popup-header">
517
            <span class="header-box"></span>
518
        </h3>
519
        <div class="popup-body">
520
            <div class="popup-body-inner">
521
                <div class="machine-now-building"></div>
522
                <div class="popup-separator"></div>
523
                <div class="password-container">
524
                    <div class="password"></div>
525
                </div>
526
                <div class="sub-text"></div>
527
            </div>
528
        </div>
529
    </div>
530
    
531
    <div id="loading-view" class="hidden">
532
        <img src="/static/icons/indicators/small/progress.gif" />
533
        <div class="header">Loading <span>~okeanos</span></div>
534
        <div class="info hidden"></div>
535
    </div>
536
    {% include "footer.html" %}
537

    
538
    <script>
539
        $(document).ready(function() {
540
            $(".css-panes").hide();
541

542
            {% if DEBUG %}
543
            synnefo.ui.main.bind("initial", function() {
544
                if (window.TEST) {
545
                    setTimeout(window.TEST, 60);
546
                }
547
            });
548
            {% endif %}
549
            
550
            synnefo.config.update_interval = 5000 || {{ update_interval }};
551
            synnefo.ui.init();
552

553
        })
554
    </script>
555
</body>
556
</html>