Statistics
| Branch: | Tag: | Revision:

root / ui / templates / standard.html @ 038383b1

History | View | Annotate | Download (12.3 kB)

1
{% load i18n %}
2

    
3
<!-- the standard view -->
4
<div id="machinesview" class="standard">
5
    <div id="emptymachineslist">{% trans "You have no virtual machines! Press Create New to create some!" %}</div>
6
    <div id="spinner"></div>
7
    <div class="machine" id="machine-template" style="display:none">
8
        <div class="actions">
9
            <a href="#" class="action-start">{% trans "Start" %}</a>
10
            <a href="#" class="action-reboot">{% trans "Reboot" %}</a>
11
            <a href="#" class="action-shutdown">{% trans "Shutdown" %}</a>
12
            <a href="#" class="more">{% trans "more &hellip;" %}</a>
13
        </div>        
14
        <div class="state">
15
            <div class="status">{% trans "Running" %}</div>
16
            <div class="indicator"></div>
17
            <div class="indicator"></div>
18
            <div class="indicator"></div>
19
            <div class="indicator"></div>
20
            <img class="spinner" style="display:none" src="/static/progress.gif" />
21
            <img class="wave" style="display:none" src="/static/wave.gif" />
22
        </div>
23
        <img class="logo" src="" />
24
        <a href="#" class="name">
25
            <h5>Name: <span class="name">node.name</span><span class="rename"></span></h5>
26
        </a>
27
        <a href="#" class="ip">
28
            <h5>IP: <span class="public">node.public_ip</span></h5>
29
        </a>
30
        <h5 class="settings">
31
            {% trans "Show:" %} <a href="#">{% trans "disks" %}</a> | <a href="#">{% trans "networks" %}</a> | <a href="#">{% trans "group" %}</a>
32
        </h5>
33

    
34
        <div class="confirm_single">
35
            <button class="yes">{% trans "Confirm" %}</button>
36
            <button class="no">{% trans "Cancel" %}</button>
37
        </div>
38
        <div class="action_error" align="center">
39
            {% trans "<span class='orange'>Error</span> on" %} <span class="action">error action</span>
40
            <span class="code"></span>            
41
            <span class="message"></span>
42
            <button class="details">Details</button>
43
        </div>
44
        <div class="separator"></div>
45
    </div>
46

    
47
    <div class="running"></div>
48
    <div id="mini" class="separator"></div>
49
    <div class="terminated"></div>
50
</div>
51

    
52
<script>
53
    
54
// intercept reboot click 
55
$("div.actions a.action-reboot").live('click', function(){
56
    var serverID = $(this).parent().parent().attr("id");
57
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
58
    var found = false;
59
    
60
    $(this).parent().children('a').removeClass('selected');
61
    $(this).addClass('selected');
62
    $(this).parent().addClass('display');
63
    $(this).parent().parent().find('.action_error').hide();
64
    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
65
        if (pending_actions[i][1]==serverID){
66
            pending_actions[i][0] = reboot;
67
            found = true
68
        }
69
    }
70
    if (!found) // no pending action for this server was found, so let's just add it to the list
71
        pending_actions.push([reboot, serverID, serverName])
72
    update_confirmations();
73
    return false;
74
});
75

76
// intercept shutdown click
77
$("div.actions a.action-shutdown").live('click', function(){ 
78
    var serverID = $(this).parent().parent().attr("id");
79
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
80
    var found = false;
81
    $(this).parent().children('a').removeClass('selected');
82
    $(this).addClass('selected');
83
    $(this).parent().addClass('display')
84
    $(this).parent().parent().find('.action_error').hide();
85

86
    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
87
        if (pending_actions[i][1]==serverID){
88
            pending_actions[i][0] = shutdown;
89
            found = true
90
        }
91
    }
92
    if (!found) // no pending action for this server was found, so let's just add it to the list 
93
        pending_actions.push([shutdown, serverID, serverName])
94
    update_confirmations();
95
    return false;
96
});
97

98
// intercept start click
99
$("div.actions a.action-start").live('click', function(){ 
100
    var serverID = $(this).parent().parent().attr("id");
101
    var serverName = $(this).parent().prevAll("a.name").find("span.name").text();
102
    var found = false;
103
    $(this).parent().children('a').removeClass('selected');
104
    $(this).addClass('selected');
105
    $(this).parent().addClass('display')
106
    $(this).parent().parent().find('.action_error').hide();
107

108
    for (i=0;i<pending_actions.length;i++){ // if there is already a pending action for this server replace it
109
        if (pending_actions[i][1]==serverID){
110
            pending_actions[i][0] = start;
111
            found = true
112
        }
113
    }
114
    if (!found) // no pending action for this server was found, so let's just add it to the list
115
        pending_actions.push([start, serverID, serverName])
116
    update_confirmations();    
117
    return false;
118
});
119

120
$("div.confirm_single .yes").live('click', function(){
121
    var serverID = $(this).parent().parent().attr("id");
122
    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server execute it
123
        if (pending_actions[i][1]==serverID){
124
            action = pending_actions.splice(i,1)[0]; // extract action
125
            action[0]([action[1]]); // execute action            
126
        }
127
    }
128
    $(this).parent().hide();
129
    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');
130
    $(this).parent().parent().children('.state').children('.spinner').show()
131
    $(this).parent().parent().children('div.actions').removeClass('display');
132
    update_confirmations();    
133
    return false;
134
});
135

136
$("div.confirm_single .no").live('click', function(){
137
    // remove the action from the pending list
138
    var serverID = $(this).parent().parent().attr("id");
139
    
140
    $(this).parent().parent().children('div.actions').children('a').removeClass('selected');
141
    $(this).parent().parent().children('div.actions').removeClass('display');    
142
    for (i=0;i<pending_actions.length;i++){ // if there is a pending action for this server remove it
143
        if (pending_actions[i][1]==serverID){
144
            pending_actions.splice(i,1);
145
        }
146
    }
147
    $(this).parent().hide();
148
    update_confirmations();    
149
    return false;
150
});
151

152
$("div.action_error .details").live('click', function(){
153
    // remove the action from the pending list
154
    ajax_error($(this).parent().children('.code').text(), undefined, $(this).parent().children('.action').text(), $(this).parent().children('.message').text());
155
    $(this).parent().hide();
156
});
157

158

159
// update the servers list
160
function update_machines_view(data){
161
    /* 
162
    Go through the servers in the input data. Update existing entries, add
163
    new ones to the list
164
    */    
165
    $.each(data.servers, function(i,server){
166
        
167
        existing = $('#' + server.id);
168
        
169
        // if multiple machines exist in the DOM, delete all but one
170
        // defensive coding - that shouldn't happen normally
171
        while (existing.length > 1){
172
            existing.remove();
173
        }
174
        
175
        // server already exists in DOM
176
        if (existing.length){
177
            $("div.machine:last-child").find("div.separator").show();                
178

179
            //  if the status is deleted, delete it from the DOM
180
            if (server.status == 'DELETED') {
181
                existing.remove();            
182
                try {
183
                    console.info(existing.find("a.name span.name").text() + ' removed');
184
                } catch(err) {}            
185
            } else if (existing.find(".status").text() != STATUS_MESSAGES[server.status]) {
186
                
187
                try { // firebug console logging
188
                    console.info(existing.find("a.name span.name").text() + ' from ' 
189
                                + existing.find(".status").text() + ' to ' + STATUS_MESSAGES[server.status]);
190
                } catch(err) {}
191
                
192
                if (['BUILD','ACTIVE','REBOOT'].indexOf(server.status) >= 0 &&
193
                    [STATUS_MESSAGES['STOPPED'], STATUS_MESSAGES['ERROR']].indexOf(existing.find(".status").text()) >= 0) {
194
                    // from stopped to running
195
                    moved = existing.clone().appendTo(".running");
196
                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'.png');
197
                    existing.remove();
198
                    existing = moved;
199
                } else if (['STOPPED','ERROR'].indexOf(server.status) >= 0 &&
200
                           [STATUS_MESSAGES['ACTIVE'], STATUS_MESSAGES['BUILD'], STATUS_MESSAGES['REBOOT']].indexOf(existing.find(".status").text()) >= 0) {
201
                    moved = existing.clone().appendTo(".terminated");
202
                    moved.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'-off.png');
203
                    existing.remove();
204
                    existing = moved;
205
                } 
206
                existing.find('.spinner').hide();
207
                existing.find(' .wave').attr('src','static/wave.gif').show();
208
                setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);         
209
                existing.find(".status").text(STATUS_MESSAGES[server.status]);
210
                            
211
            }
212
            existing.find("a.name span.name").text(server.name);
213
            existing.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));
214
        } else if (server.status != 'DELETED') {
215
            // If it does not exist and it's not deleted, we should create it
216
            var machine = $("#machine-template").clone().attr("id", server.id).fadeIn("slow");
217
            machine.find("a.name span.name").text(server.name);
218
            machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'.png');
219
            machine.find("span.imagetag").text(image_tags[server.imageRef]);
220
            machine.find("a.ip span.public").text(String(server.addresses.public.ip.addr).replace(',',' '));            
221
            machine.find(".status").text(STATUS_MESSAGES[server.status]);
222
            if (['BUILD', 'ACTIVE', 'REBOOT'].indexOf(server.status) >= 0){
223
                machine.appendTo(".running");
224
            } else {
225
                machine.find("img.logo").attr("src","static/machines/"+image_tags[server.imageRef]+'-off.png');
226
                machine.appendTo(".terminated");
227
            }
228
            //machine.find(' .wave').attr('src','static/wave.gif').show();
229
            //setTimeout("$('#" + server.id +" .wave').attr('src','').hide()", 3000);  
230
        }
231
    });
232

233
    $("#spinner").hide();
234
    // show all separators
235
    $("div.machine div.separator").show();
236
    // hide the last one
237
    $("div.machine:last-child").find("div.separator").hide();
238
    // the separator shows only when running and terminated machines are available
239
    if ($(".terminated a.name").length > 0 && $(".running a.name").length > 0) {
240
        $("#mini.separator").fadeIn("slow");
241
    } else {
242
        $("#mini.separator").fadeOut("slow");
243
    }
244
    // show message in case user has no servers!
245
    if (servers.length == 0) {
246
        $("#emptymachineslist").fadeIn("slow");
247
    }
248
    
249
    // set confirm box position
250
    if (window.innerHeight - 220 < $('#machinesview').height())
251
        $('.confirm_multiple').addClass('fixed');
252
    else
253
        $('.confirm_multiple').removeClass('fixed');
254
}
255

256
// indicate that the requested action was succesfully completed
257
function display_success(serverID) {
258

259
}
260

261
// indicate that the requested action was not completed
262
function display_failure(status, serverID, action, responseText) {
263
    $('#'+serverID+ ' .spinner').hide();
264
    $('#'+serverID+ ' .action_error .action').text(action);
265
    $('#'+serverID+ ' .action_error .code').text(status);
266
    $('#'+serverID+ ' .action_error .message').text(responseText);
267
    $('#'+serverID+ ' .action_error').show();
268
    
269
}
270

271
if (images.length == 0) {
272
    // populate image list
273
    update_images();
274
}
275
if (flavors.length == 0) {
276
    // configure flavors
277
    update_flavors(); 
278
}
279
// set the label of the multiple buttons 
280
$('div.confirm_multiple button.yes').text('Confirm All');
281
$('div.confirm_multiple button.no').text('Cancel All');
282

283
// reposition multiple confirmation box on window resize
284
$(window).resize(function(){
285
    if (this.innerHeight - 220 < $('#machinesview').height())
286
        $('.confirm_multiple').addClass('fixed');
287
    else
288
        $('.confirm_multiple').removeClass('fixed');
289
});
290

291
// start updating vm list
292
update_vms(UPDATE_INTERVAL);
293
</script>