Statistics
| Branch: | Tag: | Revision:

root / ui / templates / standard.html @ e2ccad35

History | View | Annotate | Download (11.8 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="message"></span>
41
            <button class="details">Details</button>
42
        </div>
43
        <div class="separator"></div>
44
    </div>
45

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

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

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

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

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

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

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

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

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

157

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

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

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

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

258
}
259

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

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