Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ 7db06d5a

History | View | Annotate | Download (21.4 kB)

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

    
36
<html>
37

    
38
{% load i18n %}
39
<!DOCTYPE html>
40
<head>
41
    <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/json2.js"></script>
56
    <script src="static/jquery.dataTables.min.js"></script>
57
    <script src="static/synnefo.js"></script>
58
    <link rel="stylesheet" type="text/css" href="static/main.css"/>
59
    <!--[if IE]><style type="text/css" media="all">@import url(static/ie.css);</style><![endif]-->
60
    <script>
61
        //populate available image icons array
62
        var os_icons = {{image_icons|safe}};
63

64
        // timeout value from settings.py
65
        var TIMEOUT = {{timeout}};
66
        var UPDATE_INTERVAL = {{update_interval}};
67
        var LOGOUT_REDIRECT = undefined;
68

69
        // server statuses and transitions
70
        var STATUSES = {
71
            'UNKNOWN'   : '{% trans "Unknown" %}',
72
            'BUILD'     : '{% trans "Building" %}',
73
            'REBOOT'    : '{% trans "Rebooting" %}',
74
            'STOPPED'   : '{% trans "Stopped" %}',
75
            'ACTIVE'    : '{% trans "Running" %}',
76
            'ERROR'     : '{% trans "Error" %}'
77
        };
78

79
        var TRANSITIONS = {
80
            'Shutting down' : '{% trans "Shutting down" %}',
81
            'Rebooting'     : '{% trans "Rebooting" %}',
82
            'Starting'      : '{% trans "Starting" %}',
83
            'Destroying'    : '{% trans "Destroying" %}',
84
            'Connecting'    : '{% trans "Connecting" %}',   // used only in networks
85
            'Disconnecting' : '{% trans "Disconnecting" %}' // used only in networks
86
        };
87

88
        // Server statuses and transitions that should be displayed as active or inactive
89
        var ACTIVE_STATES = [
90
            '{% trans "Building" %}',
91
            '{% trans "Rebooting" %}',
92
            '{% trans "Running" %}',
93
            '{% trans "Shutting down" %}',
94
            '{% trans "Rebooting" %}',
95
            '{% trans "Destroying" %}'
96
        ];
97

98
        var INACTIVE_STATES = [
99
            '{% trans "Unknown" %}',
100
            '{% trans "Stopped" %}',
101
            '{% trans "Error" %}',
102
            '{% trans "Starting" %}',
103
            '{% trans "Destroying" %}'
104
        ];
105

106
        // Network statuses and transitions
107
        var NET_STATES = {
108
            'ACTIVE'        : '{% trans "Private network" %}',  // this comes from the API
109
            'DELETED'       : '{% trans "Deleted" %}',          // this comes from the API
110
            'Destroying'    : '{% trans "Destroying" %}',
111
            'Connecting'    : '{% trans "Connecting" %}',
112
            'Disconnecting' : '{% trans "Disconnecting" %}'
113
        };
114

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

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

155
        var VARIOUS = {
156
            'CONFIRM' : '{% trans "Confirm" %}',
157
            'CANCEL' : '{% trans "Cancel" %}',
158
            'APPLY' : '{% trans "Apply" %}',
159
            'OFF' : '{% trans "Off" %}',
160
            'ON' : '{% trans "On" %}'
161
        };
162

163
        // ajax error checking
164
        function ajax_error(status, serverID, action, responseText) {
165
             // close existing overlays to begin with
166
            close_all_overlays();
167
            // clear old deferred calls (stops all auto-updates)
168
            clearTimeout(deferred);
169

170
            $('#error-success').addClass('error');
171
            $('#error-success').removeClass('success');
172

173
            var serverName = '';
174

175
            if (serverID !== undefined) {
176
                // standard view
177
                serverName = $("#" + serverID).find("span.name").text();
178
                if (serverName === "") { // list view
179
                    serverName = $("#" + serverID).parent().parent().find("span.name").text();
180
                }
181
            }
182

183
            // prepare the error message
184
            $("#error-success h3").text(ERRORS['HEADER']);
185
            if (responseText !== undefined) {
186
                var errors = parse_error(responseText, status), details = '';
187
                if (serverName) {
188
                    serverName = "<p>{% trans "Server" %}: " + serverName + "</p>";
189
                }
190
                if ((errors[0].details === undefined) || (errors[0].details === "")) {
191
                    details = ERRORS["NO_DETAILS"];
192
                } else {
193
                    details = errors[0].details;
194
                }
195

196
                $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
197
                $("#error-success .popup-header").addClass("popup-header-error");
198
                $("#error-success").addClass("popup-border-error");
199
                $("#error-success .password-container").hide();
200
                $("#error-success .popup-details").addClass("popup-details-error");
201
                $("#error-success .popup-separator").addClass("popup-separator-error");
202
                $("#error-success .popup-details").html("<p>" + (errors[0].message || ERRORS[errors[0].code]) + "</p>" + serverName + "<p>{% trans "Action" %}: " + action + "</p><p>{% trans "Code" %}: " + errors[0].code + "<p><a class='expand-details' href='#'>{% trans 'Details' %}</a><div class='more-details'>" + details + "</div></p>");
203
            } else if (ERRORS[status] !== undefined) {
204
                if (serverID === undefined) {
205
                    //eg no_images, no_flavors cases
206
                    $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
207
                    $("#error-success .popup-header").addClass("popup-header-error");
208
                    $("#error-success").addClass("popup-border-error");
209
                    $("#error-success .password-container").hide();
210
                    $("#error-success .popup-details").addClass("popup-details-error");
211
                    $("#error-success .popup-separator").addClass("popup-separator-error");
212
                    $("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p>");
213
                } else {
214
                    $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
215
                    $("#error-success .popup-header").addClass("popup-header-error");
216
                    $("#error-success").addClass("popup-border-error");
217
                    $("#error-success .password-container").hide();
218
                    $("#error-success .popup-details").addClass("popup-details-error");
219
                    $("#error-success .popup-separator").addClass("popup-separator-error");
220
                    $("#error-success .popup-details").html("<p>" + ERRORS[status] + "</p><p>" + serverName + "</p>");
221
                }
222
            } else {
223
                $("#error-success .machine-now-building").html(ERRORS["DEFAULT"]);
224
                $("#error-success .popup-header").addClass("popup-header-error");
225
                $("#error-success").addClass("popup-border-error");
226
                $("#error-success .password-container").hide();
227
                $("#error-success .popup-details").hide();
228
                $("#error-success .popup-separator").hide();
229
            }
230
            $("#error-success p:first").css("padding-bottom", "10px");
231
            $("#error-success p:first").css("color", "#800000");
232
            $("#error-success div.more-details").hide();
233
            $("#error-success a.expand-details").live('click', function () {
234
                $(this).parent().parent().find("div.more-details").slideToggle(600);
235
                return false;
236
            });
237
            //stop the progress icon and hide the wizard
238
            if (action !== undefined) {
239
                if (action === 'Create VM') {
240
                    $('#wizard #start').text('{% trans "Create VM" %}');
241
                    $("#wizard").hide();
242
                } else if (action === 'Create network') {
243
                    $('#networks-wizard').hide();
244
                } else if (action === 'Add server to network') {
245
                    $('#add-machines-wizard').hide();
246
                }
247
            }
248

249
            // bring up error notification
250
            var triggers = $("a#notification").overlay({
251
                // some mask tweaks suitable for modal dialogs
252
                mask: '#666',
253
                top: 'center',
254
                closeOnClick: false,
255
                oneInstance: false,
256
                load: false,
257
                onClose: function () {
258
                    // refresh the whole page
259
                    location.reload();
260
                }
261
            });
262

263
            // we need to give the browser some time to close the old overlays before opening the new one
264
            setTimeout("$('a#notification').data('overlay').load()",400);
265
            return false;
266
        }
267

268
        // ajax success checking
269
        function ajax_success(status, password) {
270
            // prepare the error message
271
            // bring up success notification
272
            $('#error-success').addClass('success');
273
            $('#error-success').removeClass('error');
274
            if (status !== undefined && SUCCESS[status]) {
275
                if (password !== undefined && status === "CREATE_VM_SUCCESS") {
276

277
                    //stop the progress icon and hide the wizard
278
                    $('#wizard #start').text('{% trans "Create VM" %}');
279
                    $("#wizard").hide();
280

281
                    $("#error-success h3 span.header-box").text(SUCCESS[status]);
282
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_THREE"] + '<br / >'
283
                        + SUCCESS["CREATE_VM_SUCCESS_FOUR"];
284
                    $("#error-success div.machine-now-building").html(SUCCESS["CREATE_VM_SUCCESS_ONE"]);
285
                    $("#error-success .popup-header").removeClass("popup-header-error");
286
                    $("#error-success").removeClass("popup-border-error");
287
                    $("#error-success .popup-details").removeClass("popup-details-error");
288
                    $("#error-success .popup-separator").removeClass("popup-separator-error");
289
                    $("#error-success .password-container").show();
290

291
                    $("#error-success .popup-details").html("</div><div class=\"write-password-details\">" + CREATE_VM_SUCCESS_MSG + "</div>");
292
                    $("#error-success div.password").html("<div class=\"write-password\">" + SUCCESS["CREATE_VM_SUCCESS_TWO"] + "<div class=\"write-password-password\">" + password + "</div></div>");
293
                    //$("#error-success div.write-password").html(SUCCESS["CREATE_VM_SUCCESS_TWO"]);
294
                    //$("#error-success div.write-password-details").html(CREATE_VM_SUCCESS_MSG);
295
                } else {
296
                    $("#error-success h3").text(SUCCESS['HEADER']);
297
                    $("#error-success div.popup-body-inner").text("<p>" + SUCCESS[status] + "</p>");
298
                }
299
            } else {
300
                $("#error-success h3").text(SUCCESS['HEADER']);
301
                $("#error-success div.popup-body-inner").html("<p>" + SUCCESS['DEFAULT'] + "</p>");
302
            }
303

304
            var triggers = $("a#notification").overlay({
305
                // some mask tweaks suitable for modal dialogs
306
                mask: '#666',
307
                top: 'center',
308
                closeOnClick: false,
309
                oneInstance: false,
310
                load: false,
311
                onClose: function () {
312
                    // With partial refresh working properly,
313
                    // it is no longer necessary to refresh the whole page
314
                    // choose_view();
315
                }
316
            });
317
            $("a#notification").data('overlay').load();
318
            return false;
319
        }
320
    </script>
321
</head>
322
<body>
323
    <div id="container">
324
        <div id='header'>
325
            <div id='user'>
326
                <div class="usermenu">
327
                    <div class="username">{{ request.user.uniq }}</div>
328
                    <ul class="useractions">
329
                        <li class="logout last"><a class="action" href="#">{% trans "logout" %}</a></li>
330
                    </ul>
331
                </div>
332
                <div class="langmenu">
333
                {% get_available_languages as LANGUAGES %}
334
                {% for lang in LANGUAGES %}
335
                    <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
336
                    {% if not forloop.last %}<span class="sep">~</span>{% endif %}
337
                    {% endfor %}
338
                </div>
339
            </div>
340
            <div class="header-logo">
341
                <a href="/">
342
                    <img src="static/okeanos.png" alt="okeanos"/>
343
                </a>
344
            </div>
345
        </div>
346
        <div id="content">
347
            <div id="wrapper">
348
                <!-- tabs -->
349
                <div class="tab-name">{% trans "machines" %}</div>
350
                <div class="tab-separator"></div>
351
                <ul class="css-tabs">
352
                    <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
353
                        <img src="static/machines-icon.png" /></a></li><div class="tab-separator"></div>
354
                    <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
355
                        <img src="static/networks-icon.png" /></a></li><div class="tab-separator"></div>
356
                    <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
357
                        <img src="static/disks-icon.png" /></a></li>
358
                </ul>
359
                <div class="css-panes">
360
                    <div id="machines-pane" class="pane" style="display:block;"></div>
361
                    <div id="networks-pane" class="pane"></div>
362
                    <div id="disks-pane" class="pane"></div>
363
                </div>
364
            </div>
365
        </div>
366
        {% include "footer.html" %}
367
    </div>
368

    
369
    <!-- activate tabs with JavaScript -->
370
    <script>
371

372
        $(function() {
373
            // check pane cookie to select the initial pane
374
            var initial = 0, pane = $.cookie("pane");
375
            if (pane > 0)
376
                initial = pane;
377
            //alert(initial);
378
            $("ul.css-tabs").tabs("div.css-panes div.pane", {
379
                initialIndex: initial,
380
                onBeforeClick: function(event, i) {
381
                    this.getPanes().children().remove();
382
                    // get the pane to be opened
383
                    var pane = this.getPanes().eq(i);
384
                    //change the displaying title
385
                    $(".tab-name").text(this.getTabs().eq(i).attr("href"));
386
                    // load it with a page specified in the tab's href attribute
387
                    pane.load(this.getTabs().eq(i).attr("href"),function() {if (!i) {choose_view()}});
388
                }
389
            });
390
        });
391

392
        // set pane cookie whenever the user clicks on a different pane
393
        $("ul.css-tabs a").click(function(i) {
394
            $.cookie("pane", $("ul.css-tabs a").index(this));
395
        });
396

397
        //change menu title on hover
398
        $("ul.css-tabs li").hover(
399
            function () {
400
                if ($(this).find("a.current").length == 0) {
401
                    $(this).parent().parent().find(".tab-name").text($(this).find("a").attr("href"));
402
                }
403
            },
404
            function () {
405
                $(this).parent().parent().find(".tab-name").text($(this).parent().find("a.current").attr("href"));
406
            }
407
        );
408

409
        //load opera css fixes
410
        if ($.browser.opera) {
411
            $("<link/>", {
412
               rel: "stylesheet",
413
               type: "text/css",
414
               href: "static/opera.css"
415
            }).appendTo("head");
416
        }
417

418
        // user menu interaction
419
        $(document).ready(function(){
420
            var resetUserMenu = function() {
421
                $(this).removeClass("hovered");
422
                $(this).removeClass("active");
423
            }
424
            $(".usermenu").live("click", function(){
425
                $(this).addClass("active");
426
            });
427
            $(".usermenu").bind('mouseleave', resetUserMenu);
428
            $(".usermenu").live("mouseover", function(){
429
                $(this).addClass("hovered");
430
            });
431

432
            $(".usermenu li").mouseenter(function(){$(this).addClass("hovered")})
433
            $(".usermenu li").mouseleave(function(){$(this).removeClass("hovered")});
434

435
            // bind menu actions
436
            $(".usermenu .logout").click(function() {
437
                user_session_logout();
438
            });
439
        });
440
    </script>
441
    <!-- base notification for error/success reporting -->
442
    <a id="notification" rel="#error-success" href="#"></a>
443

    
444
    <div class="modal" id="error-success">
445
        <h3 class="popup-header">
446
            <span class="header-box"></span>
447
        </h3>
448
        <div class="popup-body">
449
            <div class="popup-body-inner">
450
                <div class="machine-now-building"></div>
451
                <div class="popup-separator"></div>
452
                <div class="password-container">
453
                    <div class="password-header"></div>
454
                    <div class="password"></div>
455
                </div>
456
                <div class="popup-details">
457
                    <div class="write-password"></div>
458
                    <div class="write-password-details">{% trans "More details about the result"%}</div>
459
                </div>
460
            </div>
461
        </div>
462
    </div>
463
</body>
464
</html>