Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 978648f4

History | View | Annotate | Download (23.4 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="{{ UI_MEDIA_URL }}main.css"/>
17
    <!--[if IE]>
18
        <style type="text/css" media="all">@import url({{ UI_MEDIA_URL }}ie.css);</style>
19
    <![endif]-->
20

    
21
    <script src="{{ SYNNEFO_JS_LIB_URL }}jquery.js"></script>
22
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.cookie.js"></script>
23
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.client.js"></script>
24
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.tools.min.js"></script>
25
    <script src="{{ SYNNEFO_JS_LIB_URL}}jquery.dataTables.min.js"></script>
26
    <script src="{{ SYNNEFO_JS_LIB_URL}}ZeroClipboard.js"></script>
27

    
28

    
29
    <script src="{{ SYNNEFO_JS_LIB_URL}}underscore.js"></script>
30
    <script src="{{ SYNNEFO_JS_LIB_URL}}underscore.string.js"></script>
31
    <script src="{{ SYNNEFO_JS_LIB_URL}}backbone.js"></script>
32
    <script src="{{ SYNNEFO_JS_LIB_URL}}json2.js"></script>
33
    <script src="{{ SYNNEFO_JS_LIB_URL}}stacktrace.js"></script>
34

    
35
    <!--[if (gte IE 6)&(lte IE 7)]>
36
        <script src="{{ SYNNEFO_JS_LIB_URL}}selectivizr.js"></script>
37
    <! [endif] -->
38

    
39
    <!--[if IE]>
40
        <script src="{{ SYNNEFO_JS_URL}}ui/ie_fixes.js"></script>
41
    <![endif]-->
42
    
43
    <script src="{{ SYNNEFO_JS_URL}}utils.js"></script>
44
    <script src="{{ SYNNEFO_JS_URL}}sync.js"></script>
45
    <script src="{{ SYNNEFO_JS_URL}}models.js"></script>
46
    <script src="{{ SYNNEFO_JS_URL}}views.js"></script>
47

    
48
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_vms_base_view.js"></script>
49
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_error_view.js"></script>
50
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_icon_view.js"></script>
51
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_single_view.js"></script>
52
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_list_view.js"></script>
53
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_networks_view.js"></script>
54
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_metadata_view.js"></script>
55
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_feedback_view.js"></script>
56
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_create_view.js"></script>
57
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_connect_view.js"></script>
58
    <script src="{{ SYNNEFO_JS_WEB_URL}}ui_main_view.js"></script>
59

    
60
    <!-- the following views require refactor -->
61
    <script src="static/invitations.js"></script>
62
    <script src="static/synnefo.js"></script>
63
    
64
    <script>
65
        // empty object for console to avoid errors in browsers that don't support it
66
        if (!window.console) {window.console = {}; window.console.log = window.console.info = window.console.debug =
67
            window.console.error = function() {}};
68
        
69
        // initialize zero clipboard
70
        ZeroClipboard.setMoviePath( '{{ SYNNEFO_JS_LIB_URL}}ZeroClipboard.swf' );
71

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

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

108

109

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

117
        var ERROR_OVERRIDES = {
118
            // error message header
119
            'HEADER' : '{% trans "Error" %}',
120
            // default
121
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
122
            // bad request
123
            '400' : '{% trans "Malformed request." %}',
124
            // not found
125
            '404' : '{% trans "Your request has failed. Resource not found." %}',
126
            // internal server error
127
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
128
            // service unavailable
129
            '501' : '{% trans "This server has not been implemented yet." %}',
130
            // service unavailable
131
            '502' : '{% trans "Bad Gateway error." %}',
132
            // service unavailable
133
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
134
            // no server handshake
135
            '0' : '{% trans "Could not contact the server." %}',
136
            // no images found
137
            '-212' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
138
            // no flavors found
139
            '-213' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
140
            // error box title
141
            'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}',
142
            // no advanced details
143
            'NO_DETAILS' : '{% trans "Νο advanced details provided" %}',
144
            // timeout message
145
            'TIMEOUT' : '{% trans "It seems the server takes too long to respond, please check your network connectivity" %}'
146
        };
147

148
        var SUGGESTED_FLAVORS = {{ suggested_flavors|safe }};
149
        var SUGGESTED_ROLES = {{ suggested_roles|safe }}
150

151
        var SUCCESS = {
152
            'HEADER' : '{% trans "Success" %}',
153
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
154
            'PASSWORD' : '{% trans "Password:" %}',
155
            'CREATE_VM_SUCCESS' : '{% trans "Success" %}',
156
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your new machine is now buidling... (this might take a few minutes)" %}',
157
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Write down your password now:" %}',
158
            'CREATE_VM_SUCCESS_THREE' : '{% trans "You will need this later to connect to your machine." %}',
159
            'CREATE_VM_SUCCESS_FOUR' : '{% trans "After closing this window you will NOT be able to retrieve it again." %}'
160
        };
161

162
        var VARIOUS = {
163
            'CONFIRM' : '{% trans "Confirm" %}',
164
            'CANCEL' : '{% trans "Cancel" %}',
165
            'APPLY' : '{% trans "Apply" %}',
166
            'OFF' : '{% trans "Off" %}',
167
            'ON' : '{% trans "On" %}'
168
        };
169

    
170
    </script>
171
</head>
172

    
173
<body id="app">
174
    <!--<img id="okeanos-image" src="/static/body-bg2.png" />-->
175
    <div id="container">
176
        <div id="header">
177
            <div id="user">
178
                <div class="usermenu">
179
                    <div class="username">{{ request.user.uniq }}</div>
180
                    <ul class="useractions">
181
                        <li class="invitations"><a class="action" href="#">{% trans "invite friends..." %}</a></li>
182
                        <li class="feedback"><a class="action" href="#">{% trans "send feedback..." %}</a></li>
183
                        <li class="api"><a class="action" href="#">{% trans "API access..." %}</a></li>
184
                        <li class="logout last"><a class="action" href="#">{% trans "logout" %}</a></li>
185
                    </ul>
186
                </div>
187
                <div class="langmenu">
188
                    <a class="current_lang">en</a>
189
                    {% comment %}
190
                {% get_available_languages as LANGUAGES %}
191
                {% for lang in LANGUAGES %}
192
                <a {% if  == lang.0 %}
193
                    class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
194

    
195
                    {% if not forloop.last %}<span class="sep">~</span>{% endif %}
196
                    {% endfor %}
197
                {% endcomment %}
198
                </div>
199
            </div>
200
            <div class="header-logo">
201
                <a href="/">
202
                    <img src="static/okeanos-logo-alpha.png" alt="okeanos (alpha)"/>
203
                </a>
204
            </div>
205
        </div>
206
        <div id="content">
207
            <div id="wrapper" class="clearfix">
208

    
209
                <div class="panes-menu clearfix">
210
                <!-- tabs -->
211
                <div class="tab-name">{% trans "machines" %}</div>
212
                <ul class="css-tabs">
213
                    <li><a href="machines" title="{% trans "manage  virtual " %}"
214
                        class="primary" id="machines_view_link">
215
                        <img src="static/machines-icon.png" /></a></li>
216
                    <li><a href="networks" title="{% trans "configure " %}"
217
                        class="primary" id="networks_view_link">
218
                        <img src="static/networks-icon.png" /></a></li>
219
                    <li class="hidden"><a href="disks" title="{% trans "manage  storage " %}"
220
                        class="primary" id="disks_view_link">
221
                        <img src="static/disks-icon.png" /></a></li>
222
                </ul>
223
                </div>
224
                <div class="css-panes">
225
                    <div id="machines-pane" class="pane" style="display:block;">
226
                        {% include "partials/machines.html" %}
227
                    </div>
228
                    <div id="networks-pane" class="pane">
229
                        {% include "partials/networks.html" %}
230
                    </div>
231
                    <div id="disks-pane" class="pane"></div>
232

    
233
                    <div class="confirm_multiple clearfix" id="multiple_actions_container">
234
                        <div class="confirm_multiple_actions confirm_multiple_cont clearfix">
235
                            <p>{% trans "Your actions will affect" %} <span class="actionLen">XX</span> {% trans "machines" %}</p>
236
                            <button class="yes">{% trans "Confirm All" %}</button>
237
                            <button class="no">{% trans "Cancel All" %}</button>
238
                        </div>
239
                        <div class="confirm_reboot_required confirm_multiple_cont clearfix">
240
                            <p><span class="actionLen"></span> {% trans "machines needs to be rebooted for changes to apply" %}</p>
241
                            <button class="yes">{% trans "Reboot All" %}</button>
242
                            <button class="no">{% trans "Cancel All" %}</button>
243
                            <div class="reboot-machines-list"></div>
244
                        </div>
245
                    </div>
246

    
247
                </div>
248
            </div>
249
        </div>
250
    </div>
251

    
252
    <!-- activate tabs with JavaScript -->
253
    <script>
254

255
        //load opera css fixes
256
        if ($.browser.opera) {
257
            $("<link/>", {
258
               rel: "stylesheet",
259
               type: "text/css",
260
               href: "static/opera.css"
261
            }).appendTo("head");
262
        }
263

264
        $(document).ready(function(){
265

266
            {% if current_lang == "el" and not DEBUG %}
267
                window.location = "/lang/?l=en";
268
            {% endif %}
269

270
            // user menu interaction
271
            var resetUserMenu = function() {
272
                $(this).removeClass("hovered");
273
                $(this).removeClass("active");
274
            }
275

276
            $(".usermenu").live("click", function(){
277
                $(this).addClass("active");
278
            });
279
            $(".usermenu").bind('mouseleave', resetUserMenu);
280
            $(".usermenu").live("mouseover", function(){
281
                $(this).addClass("hovered");
282
            });
283

284
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
285
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
286

287
            // bind menu actions
288
            $(".usermenu .logout").click(function() {
289
                snf.ui.logout();
290
            });
291

292
            $(".usermenu .invitations").click(show_invitations);
293
            $(".usermenu .api").click(function(){
294
                synnefo.ui.main.api_info_view.show();
295
            });
296

297
        });
298
        
299
        function positionBottomMessages() {
300
            var el = $("#multiple_actions_container");
301
        }
302

303
        $(window).bind("load", function() { 
304
               var footerHeight = 0;
305
               var footerTop = 0;
306
               var $footer = $("#footer-container");
307

308
               positionFooter();
309
               function positionFooter() {
310
                   footerHeight = 80;
311
                   footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
312
                   if (($(document.body).height()+footerHeight) < $(window).height()) {
313

314
                       $footer.css({
315
                            position: "absolute"
316
                       }).css({
317
                            top: footerTop
318
                       })
319
                    } else {
320
                    
321
                       if ($footer.css("position") == "static") {
322
                           if ($(document.body).height() < $(window).height()) {    
323
                               $footer.css({
324
                                    position: "absolute"
325
                               }).css({
326
                                    top: footerTop
327
                                })
328
                            }
329
                        } else {
330

331
                           $footer.css({
332
                               position: "static"
333
                           })
334
                       }
335
                   }
336

337
                   }
338
               window.positionFooter = _.throttle(positionFooter, 100);
339
               $(window).scroll(positionFooter).resize(positionFooter)
340
        });
341
    </script>
342

    
343
    <!-- base notification for error/success reporting -->
344
    <a id="notification" rel="#error-success" href="#"></a>
345
    <a id="msgbox" rel="#notification-box" href="#"></a>
346
    <a id="feedbackbox" rel="#feedback-form" href="#"></a>
347

    
348
    <div class="overlay" id="generic-overlay-tpl">
349
        <div class="overlay-inner">
350
            <h3 class="header clearfix">
351
                <span class="subtitle"></span>
352
                <span class="title"></span>
353
                <span class="closeme">close</span></h3>
354
            <div class="container">
355
                <div class="content">
356
                </div>
357
            </div>
358
            <div class="footer"></div>
359
        </div>
360
    </div>
361

    
362
    <div id="error-overlay-content" class="hidden">
363
        <div class="error-nav hidden clearfix">
364
            <span class="indicator"><span class="num">1</span> <span
365
                    class="ind-msg">new error occured</span></span>
366
            <span class="show-next nav-btn">{% trans "next" %}</span>
367
            <span class="show-prev nav-btn">{% trans "previous" %}</span>
368
        </div>
369
        <div class="message"><p></p></div>
370
        <div class="error-details">
371
            <span class="key">{% trans "Module" %}</span>
372
            <span class="value error-module"></span>
373

    
374
            <span class="key">{% trans "Code" %}</span>
375
            <span class="value error-code"></span>
376

    
377
            <span class="key">{% trans "Type" %}</span>
378
            <span class="value error-type"></span>
379

    
380
            <span class="key details">{% trans "Details" %}</span>
381
            <div class="value error-more-details"><p></p></div>
382
        </div>
383
        
384
        <!--<div class="navigation">-->
385
            <!--<span class="next-error">{% trans "next error" %}</span>-->
386
            <!--<span class="previous-error">{% trans "previous error" %}</span>-->
387
        <!--</div>-->
388
        
389
        <!--<div class="date">-->
390
            <!--<span class="error-date"></span>-->
391
        <!--</div>-->
392

    
393
        <div class="actions">
394
            <span class="show-details">{% trans "Show details" %}</span>
395
            <span class="hide-details">{% trans "Hide details" %}</span>
396
            <span class="report-error">{% trans "Send report" %}</span>
397
            <span class="reload-app">{% trans "Reload" %}</span>
398
        </div>
399
    </div>
400

    
401
    <div id="feedback-overlay-content" class="hidden overlay-content feedback-form">
402
        <div class="description">
403
            <p>
404
                {% blocktrans %}~okeanos is currently in alpha test and we would appreciate any kind of feedback.
405
                We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %}
406
            </p>
407
        </div>
408
        <div class="description messages noborder">
409
            <p class="success-message hidden">
410
            {% trans "thank you for submiting your feedback" %}
411
            </p>
412
            <p class="error-message hidden">
413
                {% trans "some error occured submiting submiting your feedback, please try again later" %}
414
            </p>
415
            <p class="sending-message hidden">
416
            {% blocktrans %}Sending feedback...{% endblocktrans %}
417
            </p>
418
        </div>
419
        <div class="form">
420
            <div class="form-field">
421
                <label for{% trans "Please  your  here, provide  many  as " %}</label
422
                <textarea ="feedback-message"> 
423
                </textarea>
424
            </div>
425
            <div class="form-actions clearfix noborder">
426
                <span class="form-action submit">{% trans "send feedback" %}</span>
427
            </div>
428
        </div>
429
    </div>
430
    <div class="modal" id="feedback-form" class="feedback notification-box">
431
        <h3 class="popup-header">
432
            <span class="header-box">{% trans "Send feedback" %}</span>
433
        </h3>
434
        <div class="popup-body">
435
            <div class="popup-body-inner">
436
                <div class="form-container">
437
                <p class="feedback-intro">
438
                {% blocktrans %}~okeanos is currently in alpha test and we would appreciate any kind of feedback.
439
We welcome any suggestions, questions and bug reports you may have.{% endblocktrans %}</p>
440
                <form id="feedback-form">
441
                    <label for="feedback-msg">{% trans "Please describe your problem here, provide as many details as possible" %}</label>
442
                    <div class="description"></div>
443
                    <div class="empty-error-msg">{% trans "Please provide some feedback" %}</div>
444
                    <textarea name="feedback-msg" class="feedback-text"></textarea>
445

    
446
                    <input type="checkbox" name="submit-submit-data" class='submit-data' />
447
                    <input type="submit" value="{% trans "submit " %}" class="submit" />
448
                    <textarea name="feedback-data" class="data-text"></textarea>
449
                </form>
450
            </div>
451

    
452
            <div class="message sending">{% trans "submiting your data....." %}</div>
453
            <div class="message success">
454
                {% trans "thank you for submiting your feedback" %}
455
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
456
            <div class="message errormsg">
457
                {% trans "some error occured submiting submiting your feedback, please try again later" %}
458
                <span class="close-msg-box"> {% trans "close feedback" %}</span></div>
459
            </div>
460
            </div>
461
        </div>
462
    </div>
463
    
464
    <div id="api-info-overlay" class="overlay-content overlay-info hidden">
465
        <div class="description">
466
            <p>{% blocktrans with EXTERNAL_CLIENT_URL as EXTERNAL_CLIENT_URL %}Use the following API key along with the <a
467
                href="{{ EXTERNAL_CLIENT_URL }}">./kamaki</a> client to manage
468
            your cloud resources from outside this page.{% endblocktrans %}</p>
469
        </div>
470
        <div class="copy-content">
471
            <p></p>
472
        </div>
473
        <div class="description subinfo">
474
            <p>
475
            {% trans "The API key provides full access to your <em>~okeanos</em> account, so always keep it private." %}
476
            </p>
477
        </div>
478
    </div>
479

    
480
    <div class="api_overlay_template">
481
        <div class="api_overlay_content">
482
            <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>
483
        </div>
484
    </div>
485

    
486
    <div class="modal" id="notification-box" class="notification-box">
487
        <h3 class="popup-header">
488
            <span class="header-box"></span>
489
        </h3>
490
        <div class="popup-body">
491
            <div class="popup-body-inner">
492
                <div class="machine-now-building"></div>
493
                <div class="popup-separator"></div>
494
                <div class="password-container">
495
                    <div class="password"></div>
496
                </div>
497
                <div class="sub-text"></div>
498
            </div>
499
        </div>
500
    </div>
501
    
502
    <div id="loading-view" class="hidden">
503
        <img src="/static/icons/indicators/small/progress.gif" />
504
        <div class="header">Loading <span>~okeanos</span></div>
505
        <div class="info hidden"></div>
506
    </div>
507
    {% include "footer.html" %}
508

    
509
    <script>
510
        $(document).ready(function() {
511
            $(".css-panes").hide();
512

513
            // TODO: match <= 1.9.1
514
            if ($.browser.mozilla && $.browser.version.substr(0,3) == "1.9") {
515
                synnefo.config.overlay_speed = 0;
516
                $.fx.off = true;
517
            }
518
            
519
            // synnefo js config
520
            synnefo.config.update_interval = {{ update_interval }};
521
            synnefo.config.delay_on_blur = {{ delay_on_blur }};
522
            synnefo.config.blur_delay = {{ blur_delay }};
523
            synnefo.config.update_hidden_views = {{ update_hidden_views }};
524
            synnefo.config.handle_window_exceptions = {{ handle_window_exceptions }};
525
            synnefo.config.ajax_timeout = {{ timeout }};
526
            synnefo.config.skip_timeouts = {{ skip_timeouts }};
527

528
            // TODO: make it dynamic
529
            synnefo.config.api_url = '/api/v1.1';
530
            synnefo.config.logout_url = '{{ logout_redirect }}';
531

532
            synnefo.config.media_url = '{{ UI_MEDIA_URL }}';
533
            synnefo.config.js_url = '{{ SYNNEFO_JS_URL }}';
534
            synnefo.config.indicators_icons_url = '{{ UI_MEDIA_URL }}icons/indicators/';
535
            synnefo.config.machines_icons_url = '{{ UI_MEDIA_URL }}icons/machines/';
536

537
            synnefo.ui.init();
538

539
            synnefo.ui.main.bind("initial", function(){})
540
        })
541
    </script>
542
</body>
543
</html>