Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ af6fc929

History | View | Annotate | Download (21.2 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

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

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

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

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

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

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

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

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

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

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

172
            var serverName = '';
173

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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