Statistics
| Branch: | Tag: | Revision:

root / ui / templates / home.html @ f533f224

History | View | Annotate | Download (15.7 kB)

1
{% load i18n %}
2
<!DOCTYPE html>
3
<head>
4
    <title>{{ project }}</title>
5
    <!-- include the Tools -->
6
    <!-- jquery tools minified for deployment-->
7
    <script src="static/jquery.tools.min.js"></script>
8
    <!-- jquery tools source for JS debugging -->
9
    <!--
10
    <script src="http://flowplayer.org/tools/download/1.2.5/jquery-1.4.2.js"></script>
11
    <script src="http://flowplayer.org/tools/download/1.2.5/tabs/tabs.js"></script>
12
    <script src="http://flowplayer.org/tools/download/1.2.5/scrollable/scrollable.js"></script>
13
    <script src="http://flowplayer.org/tools/download/1.2.5/overlay/overlay.js"></script>
14
    <script src="http://flowplayer.org/tools/download/1.2.5/rangeinput/rangeinput.js"></script>
15
    <script src="http://flowplayer.org/tools/download/1.2.5/toolbox/toolbox.expose.js"></script>
16
    -->
17
    <script src="static/jquery.cookie.js"></script>
18
    <script src="static/jquery.dataTables.min.js"></script>
19
    <script src="static/synnefo.js"></script>
20
    <link rel="stylesheet" type="text/css" href="static/main.css"/>
21
    <script>
22
        //populate available image icons array
23
        var os_icons = {{image_icons|safe}};
24

25
        // timeout value from settings.py
26
        var TIMEOUT = {{timeout}};
27
        var UPDATE_INTERVAL = {{5000}};
28
        var STATUSES = {
29
            'UNKNOWN'   : '{% trans "Unknown" %}',
30
            'BUILD'     : '{% trans "Building" %}',
31
            'REBOOT'    : '{% trans "Rebooting" %}',
32
            'STOPPED'   : '{% trans "Stopped" %}',
33
            'ACTIVE'    : '{% trans "Running" %}',
34
            'ERROR'     : '{% trans "Error" %}'
35
        };
36

37
        var TRANSITIONS = {
38
            'Shutting down' : '{% trans "Shutting down" %}',
39
            'Rebooting'     : '{% trans "Rebooting" %}',
40
            'Starting'      : '{% trans "Starting" %}',
41
            'Destroying'    : '{% trans "Destroying" %}'
42
        };
43

44
        // Statuses and transitions that should be displayed as active or inactive
45
        var ACTIVE_STATES = [
46
            '{% trans "Building" %}',
47
            '{% trans "Rebooting" %}',
48
            '{% trans "Running" %}',
49
            '{% trans "Shutting down" %}',
50
            '{% trans "Rebooting" %}',
51
            '{% trans "Destroying" %}'
52
        ];
53

54
        var INACTIVE_STATES = [
55
            '{% trans "Unknown" %}',
56
            '{% trans "Stopped" %}',
57
            '{% trans "Error" %}',
58
            '{% trans "Starting" %}',
59
            '{% trans "Destroying" %}'
60
        ];
61

62
        var ERRORS = {
63
            // error message header
64
            'HEADER' : '{% trans "Error" %}',
65
            // default
66
            'DEFAULT' : '{% trans "Could not contact the service. Please check your network connectivity and try again." %}',
67
            // bad request
68
            '400' : '{% trans "Malformed request." %}',
69
            // not found
70
            '404' : '{% trans "Your request has failed. Resource not found." %}',
71
            // internal server error
72
            '500' : '{% trans "There has been an Internal Error. Our administrators have been notified." %}',
73
            // service unavailable
74
            '501' : '{% trans "This server has not been implemented yet." %}',
75
            // service unavailable
76
            '502' : '{% trans "Bad Gateway error." %}',
77
            // service unavailable
78
            '503' : '{% trans "This service is unavailable right now, please try again later." %}',
79
            // no server handshake
80
            '0' : '{% trans "Could not contact the server." %}',
81
            // no images found
82
            'NO_IMAGES' : '{% trans "Cannot show the Create machine wizard: No images found." %}',
83
            // no flavors found
84
            'NO_FLAVORS' : '{% trans "Cannot show the Create machine wizard: No machine configurations found." %}',
85
            // error box title
86
            'GENERIC_POPUP_HEADER' : '{% trans "Something seems to have gone wrong :( Here is what happened:" %}',
87
            // no advanced details
88
            'NO_DETAILS' : '{% trans "Νο advanced details provided" %}'
89
        };
90

91
        var SUCCESS = {
92
            'HEADER' : '{% trans "Success" %}',
93
            'DEFAULT' : '{% trans "Your request has been succefully executed." %}',
94
            'PASSWORD' : '{% trans "Password:" %}',
95
            'CREATE_VM_SUCCESS' : '{% trans "Success!" %}',
96
            'CREATE_VM_SUCCESS_ONE' : '{% trans "Your new machine is now buidling... (this might take a few minutes)" %}',
97
            'CREATE_VM_SUCCESS_TWO' : '{% trans "Write down your password now!" %}',
98
            'CREATE_VM_SUCCESS_THREE' : '{% trans "You will need this later to connect to your machine." %}',
99
            'CREATE_VM_SUCCESS_FOUR' : '{% trans "After closing this window you will NOT be able to retrieve it again." %}'
100
        };
101

102
        // ajax error checking
103
        function ajax_error(status, serverID, action, responseText) {
104
            var serverName = '';
105

106
            if (serverID != undefined) {
107
                // standard view
108
                serverName = $("#"+serverID).find("span.name").text();
109
                if (serverName == "") { // list view
110
                    serverName = $("#"+serverID).parent().parent().find("span.name").text();
111
                }
112
            }
113

114
            // prepare the error message
115
            $("#error-success h3").text(ERRORS['HEADER']);
116
            if (responseText != undefined){
117
                var errors = parse_error(responseText, status), details = '';
118
                if (serverName){
119
                    serverName="<p>{% trans "Server" %}: " + serverName + "</p>";
120
                }
121
                if ((errors[0].details == undefined) || (errors[0].details == "")) {
122
                    details = ERRORS["NO_DETAILS"];
123
                } else {
124
                    details = errors[0].details;
125
                }
126

127
                //$("#error-success div.popup-body-inner").html("<p>"+(errors[0].message || ERRORS[errors[0].code]) +"</p>"+serverName +"<p><strong>{% trans "Action" %}:</strong> " + action + "</p><p><strong>{% trans "Code" %}:</strong> " + errors[0].code + "</p>" + details);
128
                $("#error-success .machine-now-building").html(ERRORS["GENERIC_POPUP_HEADER"]);
129
                $("#error-success .popup-header").addClass("popup-header-error");
130
                $("#error-success").addClass("popup-border-error");
131
                $("#error-success .password-container").hide();
132
                $("#error-success .popup-details").addClass("popup-details-error");
133
                $("#error-success .popup-separator").addClass("popup-separator-error");
134
                $("#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>");
135
            } else if (ERRORS[status] != undefined) {
136
                if (serverID == undefined){
137
                    $("#error-success p").text(ERRORS[status]);
138
                } else {
139
                    $("#error-success p").html("<b>" + serverName + "</b>" + ": " + ERRORS[status]);
140
                }
141
            } else {
142
                $("#error-success p").text(ERRORS['DEFAULT']);
143
            }
144
            $("#error-success p:first").css("padding-bottom","10px");
145
            $("#error-success p:first").css("color","#800000");
146
            $("#error-success div.more-details").hide();
147
            $("#error-success a.expand-details").live('click', function() {
148
                $(this).parent().parent().find("div.more-details").slideToggle(600);
149
                return false;
150
                });
151
            //stop the progress icon and hide the wizard
152
            if (action != undefined) {
153
                if (action == 'Create VM') {
154
                    $('#wizard #start').text('{% trans "Create VM" %}');
155
                    $("#wizard").hide();
156
                } else if (action == 'Create network') {
157
                    $('#networks-wizard').hide();
158
                } else if (action == 'Add server to network') {
159
                    $('#add-machines-wizard').hide();
160
                }
161
            }
162

163
            // bring up error notification
164
            var triggers = $("a#notification").overlay({
165
                // some mask tweaks suitable for modal dialogs
166
                mask: {
167
                    color: '#ebecff',
168
                    opacity: '0.9'
169
                },
170
                top: 'center',
171
                closeOnClick: false,
172
                oneInstance: false,
173
                load: false,
174
                onClose: function(){
175
                    // With partial refresh working properly,
176
                    // it is no longer necessary to refresh the whole page
177
                    // choose_view();
178
                }
179
            });
180
            $("a#notification").data('overlay').load();
181
            return false;
182
        }
183

184
        // ajax success checking
185
        function ajax_success(status, password) {
186
            // prepare the error message
187
            // bring up success notification
188
            if (status != undefined && SUCCESS[status]) {
189
                if (password != undefined && status == "CREATE_VM_SUCCESS") {
190

191
                    //stop the progress icon and hide the wizard
192
                    $('#wizard #start').text('{% trans "Create VM" %}');
193
                    $("#wizard").hide();
194

195
                    $("#error-success h3").text(SUCCESS[status]);
196
                    var CREATE_VM_SUCCESS_MSG = SUCCESS["CREATE_VM_SUCCESS_THREE"] + '<br / >'
197
                        + SUCCESS["CREATE_VM_SUCCESS_FOUR"];
198
                    $("#error-success div.machine-now-building").html(SUCCESS["CREATE_VM_SUCCESS_ONE"]);
199
                    $("#error-success .popup-header").removeClass("popup-header-error");
200
                    $("#error-success").removeClass("popup-border-error");
201
                    $("#error-success .popup-details").removeClass("popup-details-error");
202
                    $("#error-success .popup-separator").removeClass("popup-separator-error");
203
                    $("#error-success .password-container").show();
204
                    $("#error-success .popup-details").html("<div class=\"write-password\">"+ SUCCESS["CREATE_VM_SUCCESS_TWO"] + "</div><div class=\"write-password-details\">" + CREATE_VM_SUCCESS_MSG +"</div>");
205
                    $("#error-success div.password").html(password);
206
                    //$("#error-success div.write-password").html(SUCCESS["CREATE_VM_SUCCESS_TWO"]);
207
                    //$("#error-success div.write-password-details").html(CREATE_VM_SUCCESS_MSG);
208
                } else {
209
                    $("#error-success h3").text(SUCCESS['HEADER']);
210
                    $("#error-success div.popup-body-inner").text("<p>" + SUCCESS[status] + "</p>");
211
                }
212
            } else {
213
                $("#error-success h3").text(SUCCESS['HEADER']);
214
                $("#error-success div.popup-body-inner").html("<p>" + SUCCESS['DEFAULT'] + "</p>");
215
            }
216

217
            var triggers = $("a#notification").overlay({
218
                // some mask tweaks suitable for modal dialogs
219
                mask: {
220
                    color: '#ebecff',
221
                    opacity: '0.9'
222
                },
223
                top: 'center',
224
                closeOnClick: false,
225
                oneInstance: false,
226
                load: false,
227
                onClose: function(){
228
                    // With partial refresh working properly,
229
                    // it is no longer necessary to refresh the whole page
230
                    // choose_view();
231
                }
232
            });
233
            $("a#notification").data('overlay').load();
234
            return false;
235
        }
236
    </script>
237
</head>
238
<body>
239
    <div id="container">
240
        <div id='header'>
241
            <div id='user'>
242
                <a href="#">{% trans "username" %}</a>
243
                {% get_available_languages as LANGUAGES %}
244
                {% for lang in LANGUAGES %}
245
                    &nbsp;|&nbsp;
246
                    <a {% if  == lang.0 %}class="current_lang" {% else %}  href="/lang/?l={{lang.0}}" {% endif %}>{{lang.0}}</a>
247
                {% endfor %}
248
            </div>
249
            <div class="header-logo">
250
                <a href="/">
251
                    <img src="static/okeanos.png" alt="okeanos"/>
252
                </a>
253
            </div>
254
        </div>
255
        <div id="content">
256
            <div id="wrapper">
257
                <!-- tabs -->
258
                <div class="tab-name">{% trans "machines" %}</div>
259
                <div class="tab-separator"></div>
260
                <ul class="css-tabs">
261
                    <li><a href="machines" title="{% trans "manage  virtual " %}" class="primary" id="machines">
262
                        <img src="static/machines-icon.png" /></a></li><div class="tab-separator"></div>
263
                    <li><a href="networks" title="{% trans "configure " %}" class="primary" id="networks">
264
                        <img src="static/networks-icon.png" /></a></li><div class="tab-separator"></div>
265
                    <li><a href="disks" title="{% trans "manage  storage " %}" class="primary" id="disks">
266
                        <img src="static/disks-icon.png" /></a></li>
267
                </ul>
268
                <div class="css-panes">
269
                    <div id="machines-pane" class="pane" style="display:block">{% include "machines.html" %}</div>
270
                    <div id="networks-pane" class="pane"></div>
271
                    <div id="disks-pane" class="pane"></div>
272
                </div>
273
                <!-- base notification for error/success reporting -->
274
                <a id="notification" rel="#error-success" href="#"></a>
275

    
276
                <div class="modal" id="error-success">
277
                    <h3 class="popup-header">{% trans "Error!/Success!" %}</h3>
278
                    <div class="popup-body">
279
                        <div class="popup-body-inner">
280
                            <div class="machine-now-building"></div>
281
                            <div class="popup-separator"></div>
282
                            <div class="password-container">
283
                                <div class="password-header">{% trans "Password:" %}</div>
284
                                <div class="password"></div>
285
                            </div>
286
                            <div class="popup-details">
287
                                <div class="write-password"></div>
288
                                <div class="write-password-details">{% trans "More details about the result"%}</div>
289
                            </div>
290
                        </div>
291
                    </div>
292
                </div>
293
            </div>
294
        </div>
295
        {% include "footer.html" %}
296
    </div>
297

    
298
    <!-- activate tabs with JavaScript -->
299
    <script>
300

301
        $(function() {
302
            $("ul.css-tabs").tabs("div.css-panes div.pane", {
303
                onBeforeClick: function(event, i) {
304
                    // get the pane to be opened
305
                    var pane = this.getPanes().eq(i);
306
                    pane.text('');
307
                    //change the displaying title
308
                    $(".tab-name").text(this.getTabs().eq(i).attr("href"));
309
                    // load it with a page specified in the tab's href attribute
310
                    pane.load(this.getTabs().eq(i).attr("href"),function(){if (!i) {choose_view()}});
311
                }
312
            });
313
        });
314

315
        //change menu title on hover
316
        $("ul.css-tabs li").hover(
317
            function () {
318
                if ($(this).find("a.current").length == 0) {
319
                    $(this).parent().parent().find(".tab-name").text($(this).find("a").attr("href"));
320
                }
321
            },
322
            function () {
323
                $(this).parent().parent().find(".tab-name").text($(this).parent().find("a.current").attr("href"));
324
            }
325
        );
326
    </script>
327
</body>
328
</html>