cloud-list.html 18.1 KB
Newer Older
Giorgos Korfiatis's avatar
Giorgos Korfiatis committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
Copyright (C) 2015 GRNET S.A.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
17

Efthymia Bika's avatar
Efthymia Bika committed
18
        <script type="text/javascript">
19

Efthymia Bika's avatar
Efthymia Bika committed
20
            load_data_from_file(CLOUDS_CONF_FILE, render_clouds);
21

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
            function show_delete_cloud_modal(cloud) {
                $("#del-cloud-modal-p").html("Are you sure you want to delete "
                    + cloud.name + '?');
                $("#delete-cloud-modal").foundation("reveal", "open");
                var i = 0;
                $("#delete-cloud-modal").on('close.fndtn.reveal', function(e) {
                    if(e.namespace !== "fndtn.reveal") return;
                    i++;
                    $(this).click(function(event) {
                        // event is fired more than once so have to check
                        if(event.target.id == "del-cloud-modal-accept" && i == 1) {
                            delete_cloud(cloud);
                        }
                    });
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
39
40
41
42
43
44
            function render_clouds(data) {
                $("#clouds_list").remove();
                // clouds is undefined the first time, when
                // reading data from file
                if(typeof clouds === 'undefined') {
                    if(data != "") {
45
                        clouds = JSON.parse(data);
Efthymia Bika's avatar
Efthymia Bika committed
46
                    } else {
47
                        clouds = new Object();
Efthymia Bika's avatar
Efthymia Bika committed
48
49
50
51
52
53
54
                    }
                }
                var ul = $("<ul></ul>")
                    .attr("id", "clouds_list")
                    .attr("class", "side-nav");
                $.each(clouds, function(i, cloud) {
                    var li = $("<li></li>")
Efthymia Bika's avatar
Efthymia Bika committed
55
56
                        .attr("class", "clearfix")
                        .attr("id", "li_" + cloud.name);
Efthymia Bika's avatar
Efthymia Bika committed
57
58
59
60
                    var a = $("<a>" + cloud.name + "</a>")
                        .attr("href", "#")
                        .attr("id", cloud.name)
                        .attr("class", "left")
Efthymia Bika's avatar
Efthymia Bika committed
61
62
63
64
                        .click(function() {
                            load_cloud(cloud);
                            activate_li("li_" + cloud.name);
                        });
Efthymia Bika's avatar
Efthymia Bika committed
65
                    li.append(a);
Efthymia Bika's avatar
Efthymia Bika committed
66

Efthymia Bika's avatar
Efthymia Bika committed
67
68
69
70
                    var a_del = $("<a><i class='fa fa-times-circle delete_icon'></i></a>")
                        .attr("href", "#")
                        .attr("class", "right")
                        .click(function() {
71
                            show_delete_cloud_modal(cloud);
Efthymia Bika's avatar
Efthymia Bika committed
72
73
                        });
                    li.append(a_del);
Efthymia Bika's avatar
Efthymia Bika committed
74

Efthymia Bika's avatar
Efthymia Bika committed
75
76
77
78
                    ul.append(li);
                    $("#sidebar").append(ul);
                });
            }
79

Efthymia Bika's avatar
Efthymia Bika committed
80
81
82
83
84
85
86
87
88
89
            function activate_li(id) {
                $("li").each(function(i, li) {
                    if($(this).is("#" + id)) {
                        $(this).addClass("active-li");
                    } else {
                        $(this).removeClass("active-li");
                    }
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
90
            var errors = {
91
92
93
94
                cloud_url_empty: 'Provide a Cloud Authentication URL',
                cloud_inaccessible: 'Cloud URL did not respond as expected',
                token_empty: 'Provide a user token',
                token_error: 'Failed to authenticate',
Efthymia Bika's avatar
Efthymia Bika committed
95
                token_cloudless: 'No cloud to try this token against',
96
97
                cloud_name_empty: 'Provide a Cloud Name',
                cloud_name_illegal: 'Invalid Entry. Allowed characters [A-Za-z0-9-_]'
Efthymia Bika's avatar
Efthymia Bika committed
98
            };
99

Efthymia Bika's avatar
Efthymia Bika committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
            function check_cloud_name() {
                var cloud_name = $('#cloud-name').val().replace(/^\s+|\s+$/gm,'');
                if(!cloud_name) {
                    $('#cloud-name-error small').text(errors.cloud_name_empty);
                    $('#cloud-name-error small').show();
                    return false;
                } else {
                    var pattern = /^[\w.\-]+$/;
                    if(!cloud_name.match(pattern)) {
                        $('#cloud-name-error small').text(errors.cloud_name_illegal);
                        $('#cloud-name-error small').show();
                        return false;
                    } else {
                        $('#cloud-name-error small').hide();
                    }
                }
                return true;
            }
118

Efthymia Bika's avatar
Efthymia Bika committed
119
            var url_error = null;
120
            var pithos_public = null;
Efthymia Bika's avatar
Efthymia Bika committed
121
            var account_ui = null;
Efthymia Bika's avatar
Efthymia Bika committed
122

Efthymia Bika's avatar
Efthymia Bika committed
123
            function check_cloud_url() {
124
                var url = $('#cloud-url').val().replace(/^\s+|\s+$/gm,'');
Efthymia Bika's avatar
Efthymia Bika committed
125
126
127
                if(!url) {
                    $('#cloud-error small').text(errors.cloud_url_empty);
                    $('#cloud-error small').show();
Efthymia Bika's avatar
Efthymia Bika committed
128
                    $("#login").hide();
Efthymia Bika's avatar
Efthymia Bika committed
129
130
131
132
133
134
                } else {
                    $.ajax({
                        type : 'POST',
                        url : url + '/tokens',
                    })
                    .done(function(data) {
Efthymia Bika's avatar
Efthymia Bika committed
135
                        $("#login").show();
136
137
138
                        var endpoints = data.access.serviceCatalog
                        $.each(endpoints, function(i, endpoint) {
                            switch(endpoint.type) {
Efthymia Bika's avatar
Efthymia Bika committed
139
140
141
142
143
144
                                case 'object-store': try {
                                    pithos_public = endpoint['endpoints'][0]['publicURL'];
                                    $('#cloud-error small').hide();
                                    url_error = null;
                                } catch(err) { console.log('Failed to get pithos_public ' + err); }
                                break;
Efthymia Bika's avatar
Efthymia Bika committed
145
146
147
148
                                case 'account': try {
                                    account_ui = endpoint['endpoints'][0]['SNF:uiURL'];
                                } catch(err) { console.log('Failed to get account_ui ' + err); }
                                break;
Efthymia Bika's avatar
Efthymia Bika committed
149
150
151
152
153
154
155
156
                            }
                        });
                    })
                    .fail ( function(xhr, status, msg) {
                        pithos_public = null;
                        url_error = xhr.status + ' ' + msg;
                        console.log(xhr.status + ' ' + xhr.responseText);
                        $('#cloud-error small').text(errors.cloud_inaccessible + ' [' + url_error  + ']');
157
                        $('#cloud-error small').show();
Efthymia Bika's avatar
Efthymia Bika committed
158
                        $("#login").hide();
Efthymia Bika's avatar
Efthymia Bika committed
159
160
161
                    });
                }
            }
162

Efthymia Bika's avatar
Efthymia Bika committed
163
164
            var auth_error = null;
            var uuid = null;
165

Efthymia Bika's avatar
Efthymia Bika committed
166
167
            function check_token() {
                var token = $('#token').val().replace(/^\s+|\s+$/gm,'');
168
                if (!token) {
Efthymia Bika's avatar
Efthymia Bika committed
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
                    $('#token-error small').text(errors.token_empty);
                    $('#token-error small').show();
                } else {
                    var url = $('#cloud-url').val().replace(/^\s+|\s+$/gm,'');
                    if (pithos_public && url) {
                        $.ajax({
                            type: 'POST', 
                            url: url + '/tokens',
                            beforeSend : function(req) {
                                req.setRequestHeader('X-Auth-Token', token);
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            data: JSON.stringify({auth: {token: {id: token}}})
                        })
                        .done(function(data) {
                            auth_error = null;
                            $('#token-error small').hide();
Efthymia Bika's avatar
Efthymia Bika committed
188
                            uuid = data.access.token.tenant.id;
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
                        })
                        .fail(function(xhr, status, msg) {
                            auth_error = xhr.status + ' ' + msg;
                            console.log(xhr.status + ' ' + xhr.responseText);
                            $('#token-error small').text(
                                errors.token_error + ' [' + auth_error + ']');
                            $('#token-error small').show();

                        });

                    } else {
                        $('#token-error small').text(errors.token_cloudless);
                        $('#token-error small').show();
                    }
                }
            }
Efthymia Bika's avatar
Efthymia Bika committed
205

Efthymia Bika's avatar
Efthymia Bika committed
206
            function check_fields() {
Efthymia Bika's avatar
Efthymia Bika committed
207
208
                check_cloud_url();
                check_token();
Efthymia Bika's avatar
Efthymia Bika committed
209
                if(auth_error || url_error || !pithos_public || !check_cloud_name())
Efthymia Bika's avatar
Efthymia Bika committed
210
                    return false;
211
212
213
                return true;
            }

Efthymia Bika's avatar
Efthymia Bika committed
214
215
216
217
            function load_cloud(cloud) {
                $('#cloud-name-error small').hide();
                $('#cloud-error small').hide();
                $('#token-error small').hide();
Efthymia Bika's avatar
Efthymia Bika committed
218

Efthymia Bika's avatar
Efthymia Bika committed
219
220
221
222
223
224
225
226
                if(cloud) {
                    $("#cloud-name").val(cloud.name);
                    $("#cloud-url").val(cloud.auth_url);
                    $("#token").val(cloud.token);
                } else {
                    $("#cloud-name").val('');
                    $("#cloud-url").val('');
                    $("#token").val('');
Efthymia Bika's avatar
Efthymia Bika committed
227
                    $("#login").hide();
Efthymia Bika's avatar
Efthymia Bika committed
228
                }
229

Efthymia Bika's avatar
Efthymia Bika committed
230
231
                $("#cloud_details").show();
            }
232

Efthymia Bika's avatar
Efthymia Bika committed
233
234
235
236
            function edit_add_cloud() {
                var cloud_name = $("#cloud-name").val().replace(/^\s+|\s+$/gm,'');
                var url = $("#cloud-url").val().replace(/^\s+|\s+$/gm,'');
                var token = $("#token").val().replace(/^\s+|\s+$/gm,'');
237

238
239
240
241
242
243
244
245
246
                var cloud = {};
                cloud.name = cloud_name;
                cloud.auth_url = url;
                cloud.token = token;
                cloud.pithos_public = pithos_public;
                cloud.uuid = uuid;

                clouds[cloud_name] = cloud;
                render_clouds("");
247
                activate_li("li_" + cloud.name);
248
                write_conf_file(CLOUDS_CONF_FILE, clouds);
249
250
                $("#save-alert").show();
                setTimeout( function() {$("#save-alert").fadeOut()}, 1000);
Efthymia Bika's avatar
Efthymia Bika committed
251
            }
252

Efthymia Bika's avatar
Efthymia Bika committed
253
            function delete_cloud(cloud) {
254
                delete clouds[cloud.name];
Efthymia Bika's avatar
Efthymia Bika committed
255
                render_clouds("");
256
                write_conf_file(CLOUDS_CONF_FILE, clouds);
Efthymia Bika's avatar
Efthymia Bika committed
257
258
                $("#cloud_details").hide();
            }
259

Efthymia Bika's avatar
Efthymia Bika committed
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
            function remove_cookies(win, url) {
                var removed_at_least_one = false
                win.cookies.getAll({url: url}, function(cookies) {
                    $.each(cookies, function(i, cookie) {
                        win.cookies.remove({url: url, name: cookie.name} );
                        removed_at_least_one = true;
                    });
                });
                return removed_at_least_one;
            }

            var cred_win = null;
            var logout_win = null;
            var got_cookie = false;

            function extract_credentials(cookie) {
                var credentials = cookie.value.split('%7C');
                var uuid = credentials[0];
                var token = credentials[1];
                $('#token').val(token);
                $('#token').trigger('change');
            }

            function get_credentials() {
                var cookie_name = '_pithos2_a';
                var lurl = account_ui + '/logout?next=' + pithos_public
                got_cookie = false;
                cred_win = gui.Window.open(lurl, {
288
                    focus: true, width: 820, height: 780, toolbar: false
Efthymia Bika's avatar
Efthymia Bika committed
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
                });
                cred_win.cookies.onChanged.addListener(function(info) {
                    if (info.cookie.name === cookie_name) {
                        console.log('Succesfully logged in');
                        extract_credentials(info.cookie);
                        got_cookie = true;
                    }
                });
                cred_win.on('loaded', function() {
                    if (got_cookie) cred_win.close();
                });
                cred_win.on('closed', function() {
                    logout_win = gui.Window.open(
                        account_ui + '/logout',
                        {focus: true, width:20, height: 20 });
                    logout_win.hide();
                    logout_win.on('loaded', function() {
                        while(remove_cookies(logout_win, pithos_public)) {}
                        logout_win.close();
                    });
                });
            }

Efthymia Bika's avatar
Efthymia Bika committed
312
            window.setInterval(function() {
313
                if($("#clouds_page").attr("id") &&
314
                    $("#cloud-url").val()) {
Efthymia Bika's avatar
Efthymia Bika committed
315
316
317
318
319
                    check_cloud_url();
                    check_token();
                }
            }, 500);
        </script>
320

Efthymia Bika's avatar
Efthymia Bika committed
321
322
323
324
325
326
        <div class="row" id="clouds_page">
            <div class="small-9 columns">
                <p>&nbsp;</p>
            </div>
        </div>
        <div class="row">
Efthymia Bika's avatar
Efthymia Bika committed
327
            <div class="small-3 columns vertical-border" id="sidebar">
Efthymia Bika's avatar
Efthymia Bika committed
328
329
330
331
332
                <a href="#" onclick="load_cloud();" class="button small radius">
                    <i class="fa fa-plus-circle">&nbsp;Add Cloud</i>
                </a>
            </div>
            <div class="small-9 columns">
Efthymia Bika's avatar
Efthymia Bika committed
333
                <div id="cloud_details" class="hide">
334
335
336
337
338
339
                    <div id="save-alert" class="hide">
                        <div data-alert class="alert-box success radius">
                            Successfully saved cloud configuration.
                            <a href="#" class="close">&times;</a>
                        </div>
                    </div>
Efthymia Bika's avatar
Efthymia Bika committed
340
341
342
343
344
345
346
347
348
349
350
351
352
                    <form>
                        <div class="clearfix">
                            <div class="small-3 columns">
                                <label id="cloud_name_label" for="cloud-name" class="right inline">Name</label>
                            </div>
                            <div class="small-9 columns error" id="cloud-name-error">
                                <input type="text" id="cloud-name"
                                placeholder="Cloud Name [A-Za-z0-9-_]" onchange="check_cloud_name();">
                                <small class="error"></small>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-3 columns">
353
354
355
356
                                <label id="url_label" for="cloud-url" class="right inline">
                                    Cloud URL&nbsp;<i class="fa fa-info-circle green-info"
                                onclick="$('#auth-help').slideDown();"></i>
                                </label>
Efthymia Bika's avatar
Efthymia Bika committed
357
358
359
360
361
362
363
364
365
                            </div>
                            <div class="small-9 columns error" id="cloud-error">
                                <input type="text" id="cloud-url" placeholder="Authentication URL"
                                onchange="check_cloud_url();">
                                <small class="error"></small>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="small-3 columns">
366
367
368
369
                                <label id="token_label" for="token" class="right inline">
                                    User token&nbsp;<i class="fa fa-info-circle green-info"
                                        onclick="$('#auth-help').slideDown();"></i>
                                </label>
Efthymia Bika's avatar
Efthymia Bika committed
370
371
372
373
374
375
                            </div>
                            <div class="small-9 columns error" id="token-error">
                                <input type="text" id="token" placeholder="User token"
                                onchange="check_token();">
                                <small class="error"></small>
                            </div>
Efthymia Bika's avatar
Efthymia Bika committed
376
377
378
379
                            <div class="clearfix hide" id="login">
                                <div class="small-8 columns"></div>
                                <a id="get_creds"
                                    class="small-4 columns button right tiny login-button"
380
                                    onclick="get_credentials();">Auto-fill token with login</a>
Efthymia Bika's avatar
Efthymia Bika committed
381
                            </div>
Efthymia Bika's avatar
Efthymia Bika committed
382
383
                        </div>
                        <div class="clearfix">
384
385
386
387
388
389
390
391
                            <div class="small-3 columns"></div>
                            <div class="small-9 columns hide info-text panel" id="auth-help">
                                <i class="fa fa-times right" onclick="$('#auth-help').slideUp();"></i>
                                To get your cloud credentials, browse to your cloud website, log in
                                and click on <u>API access</u>. Copy the Authentication URL and Token above.
                            </div>
                        </div>
                        <div class="clearfix">
Efthymia Bika's avatar
Efthymia Bika committed
392
                            <div class="small-8 columns"></div>
Efthymia Bika's avatar
Efthymia Bika committed
393
                            <a id="save_button" class="button radius right small"
Efthymia Bika's avatar
Efthymia Bika committed
394
395
396
397
398
                                onclick="if(check_fields()) edit_add_cloud();">Save</a>
                        </div>
                </form>
            </div>
        </div>
399
400
401
402
403
404
405
406
407
408
409
410
411
412
        <div id="delete-cloud-modal" class="reveal-modal medium"
            data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <p id="del-cloud-modal-p"></p>
            <a id="del-cloud-modal-cancel" class="button radius small"
                onclick="$('#delete-cloud-modal').foundation('reveal', 'close');">
                Cancel
            </a>
            <a id="del-cloud-modal-accept" class="button radius small alert right"
                onclick="$('#delete-cloud-modal').foundation('reveal', 'close');">
                Delete
            </a>
            <a class="close-reveal-modal" aria-label="Close">&#215;</a>
        </div>