Revision ec06b07c ui/templates/instances.html

b/ui/templates/instances.html
3 3
<div id="instances" class="seperator"></div>
4 4

  
5 5
<a id="create" rel="#wizard" href="#">{% trans "Create New +" %}</a>
6

  
6
<a id="notify" rel="#misc" href="#"></a>
7 7
<div id="view-select">
8
    <a id="standard" class="current" href="/">#</a>
8
    <a id="standard" class="current" href="/instances">#</a>
9 9
    |
10 10
    <a id="list" href="/instances/list">=</a>
11 11
</div>
12 12

  
13

  
14

  
13 15
<div id="instancesview" class="standard">
14 16

  
17
    <div class="instance" id="instance-template" style="display:none">
18
        <div class="state">
19
            <div class="status">Running</div>
20
            <div class="indicator"></div>
21
            <div class="indicator"></div>
22
            <div class="indicator"></div>
23
            <div class="indicator"></div>
24
        </div>
25
        <img class="logo" src="static/machines/ubuntu.png" />
26
        <a href="#" class="name">
27
            <h5>Hostname: <span class="name">node.name</span><span class="rename"></span></h5>
28
        </a>
29
        <a href="#" class="ip">
30
            <h5>IP: <span class="public">node.public_ip</span></h5>
31
        </a>
32
        <h5 class="storage">
33
            Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a>
34
        </h5>
35
        <div class="actions">
36
            <a href="#" class="action">Reboot</a>
37
            <a href="#" class="action">Shutdown</a>
38
            <a href="#" class="more">more &hellip;</a>
39
        </div>
40
    </div>
41

  
15 42
    <div class="running">
16
        {% for node in nodes %}
17
            {% if node.state == '3' %} 
18
                <div class="instance running">
19
                    <div class="actions">
20
                        <a href="#" class="action">Reboot</a>
21
                        <a href="#" class="action">Shutdown</a>
22
                        <a href="#" class="more">more &hellip;</a>
23
                    </div>
24
                    <div class="state">
25
                        <div>Running</div>
26
                        <div class="indicator" />
27
                        <div class="indicator" />
28
                        <div class="indicator" />
29
                        <div class="indicator" />
30
                    </div>
31
                    <img src="static/machines/{{ node.thumb }}" />
32
                    <a href="#" class="name">
33
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
34
                    </a>
35
                    <a href="#" class="ip">
36
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
37
                    </a>
38
                    <br />
39
                    <h5 class="storage">
40
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
41
                    </h5>
42
                </div>
43
            {% endif %}
44
        {% endfor %}
45 43
    </div>
46 44
    <div id="mini" class="seperator"></div>
47 45
    <div class="terminated">
48
        {% for node in nodes %}
49
            {% if node.state == '0' %}
50
                <div class="instance terminated">
51
                    <div class="actions">
52
                        <a href="#" class="action">Start</a>
53
                        <a href="#" class="action">Destroy</a>
54
                        <a href="#" class="more">more &hellip;</a>
55
                    </div>
56
                    <div class="state">
57
                        <div>Terminated</div>
58
                        <div class="indicator" />
59
                        <div class="indicator" />
60
                        <div class="indicator" />
61
                        <div class="indicator" />
62
                    </div>
63
                    <img src="static/machines/{{ node.thumb }}" />
64
                    <a href="#" class="name">
65
                        <h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
66
                    </a>
67
                    <a href="#" class="ip">
68
                        <h5>IP: <span>{{ node.public_ip }}</span></h5>
69
                    </a>
70
                    <br />
71
                    <h5 class="storage">
72
                        Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
73
                    </h5>
74
                </div>
75
            {% endif %}
76
        {% endfor %} 
77 46
    </div>
78 47
</div>
79 48

  
......
99 68
                    <li><a href="#">custom</a></li>
100 69
                </ul>
101 70
                <div class="panes">
102
                    <ul class="pane">
71
		            <li id="image-template" style="display:none">
72
			            <label for="image.id"> 
73
                            <a><div class="image">
74
                                <img src="static/os_logos/image.logo" class="image-logo"/>
75
                                <strong class="image-title">image.title</strong>
76
                                <input class="radio" type="radio" name="image-id" id="image-id" />
77
                                <br />
78
                                <span class="description">image.description</span> 
79
                                <span class="size">?? MB</span>
80
                                
81
                            </div></a>
82
			            </label>
83
		            </li>
84
                    <ul class="pane" id="standard-images">
103 85
					    <!-- standard images -->
104
                        {% for image in images %}
105
                            {% if image.type == 'standard' %}
106
					            <li>
107
						            <label for={{ image.id }}> 
108
                                        <a><div class="image">
109
                                            <img src="static/os_logos/{{ image.logo }}" class="image-logo"/>
110
                                            <strong>{{ image.title }}</strong>
111
                                            <input class="radio" type="radio" {% if forloop.first %}checked="checked"{% endif %} name="image-id" id={{ image.id }} />
112
                                            <br />
113
                                            <span class="description">{{ image.description }}</span> 
114
                                            <span class="size">{{ image.size }}MB</span>
115
                                            
116
                                        </div></a>
117
						            </label>
118
					            </li>
119
                            {% endif %}
120
                        {% endfor %} 
121 86
				    </ul>
122
                    <ul class="pane">
87
                    <ul class="pane" id="custom-images">
123 88
					    <!-- custom images -->
124
                        {% for image in images %}
125
                            {% if image.type == 'custom' %}
126
					            <li>
127
						            <label for={{ image.id }}> 
128
                                        <a><div class="image">
129
                                            <img src="static/os_logos/{{ image.logo }}" class="image-logo"/>
130
                                            <strong>{{ image.title }}</strong>
131
                                            <input class="radio" type="radio" name="image-id" id={{ image.id }} />
132
                                            <br />
133
                                            <span class="description">{{ image.description }}</span> 
134
                                            <span class="size">{{ image.size }}MB</span>
135
                                        </div></a>
136
						            </label>
137
					            </li>
138
                            {% endif %}
139
                        {% endfor %}
89

  
140 90
                    </ul>
141 91
                </div>
142 92
				<button type="button" class="prev" id="cancel">Cancel</button>
......
235 185

  
236 186
<script>
237 187
// <![CDATA[ 
188
var image_tags = {
189
                1: 'archlinux',
190
                2: 'centos',
191
                3: 'debian',
192
                4: 'freebsd',
193
                5: 'gentoo',
194
                6: 'netbsd',
195
                7: 'openbsd',
196
                8: 'redhat',
197
                9: 'slackware',
198
                10: 'suse',
199
                11: 'ubuntu',
200
                12: 'windows',
201
               };
202

  
203
function update() {
204

  
205
    $("div.running").text('');
206
    $("div.terminated").text('');
207
    $("ul#standard-images").text('');
208
    $("ul#custom-images").text('');
209

  
210
    $.ajax({
211
        url: '/api/v1.0/servers/detail',
212
        type: "GET",
213
    //    async: false,
214
        dataType: "json",
215
        success: function(data) {
216
            $.each(data.servers, function(i,server){
217
                var instance = $('#instance-template').clone().attr("id",server.id).fadeIn("slow");
218
                instance.find("a.name span.name").text(server.name);
219
                instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'.png');
220
                instance.find("img.list-logo").attr("src","static/os_logos/"+image_tags[server.imageId]+'.png');
221
                instance.find("a.ip span.public").text(String(server.addresses.public));            
238 222

  
223
                if (server.status == 'BUILD'){
224
                    instance.find("div.status").text('Building');
225
                    instance.appendTo("div.running");
226
                } else if (server.status == 'ACTIVE') {
227
                    instance.find("div.status").text('Running');
228
                    instance.appendTo("div.running");
229
                } else if (server.status == 'SUSPENDED') {
230
                    instance.find("div.status").text('Terminated');
231
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
232
                    instance.appendTo("div.terminated");
233
                } else {
234
                    instance.find("div.status").text('Unknown');
235
                    instance.find("img.logo").attr("src","static/machines/"+image_tags[server.imageId]+'-off.png');
236
                    instance.appendTo("div.terminated");
237
                }
238

  
239

  
240
            });
241
        }
242
    });
243

  
244
    $.ajax({
245
        url: '/api/v1.0/images/detail',
246
        type: "GET",
247
    //    async: false,
248
        dataType: "json",
249
        success: function(data) {
250
            $.each(data.images, function(i,image){
251
                var img = $('#image-template').clone().attr("id","img-"+image.id).fadeIn("slow");
252
                img.find("label").attr('for',"img-radio-" + image.id);
253
                img.find(".image-title").text(image.name);
254
                img.find("input.radio").attr('id',"img-radio-" + image.id);
255
                if (i==0) img.find("input.radio").attr("checked","checked"); 
256
                img.find("img.image-logo").attr('src','static/os_logos/'+image_tags[image.id]+'.png');
257
                if (image.serverId) {
258
                    img.appendTo("ul#custom-images");
259
                } else {
260
                    img.appendTo("ul#standard-images");
261
                }
262
            });
263
        }
264
    });
265
}
266
update();
239 267
$("#list").click(function(event){
240
    $("div#instancesview").load($("#list").attr("href"));
268
    $("div.standard#instancesview").load($("#list").attr("href"));
241 269
    $("a#standard")[0].className += ' activelink'
242 270
    this.style.color = '#5f8dd3';
271
    update(); 
272
    return false;
273
});
274

  
275
$("a#standard").click(function(event){
276
    href=$("a#standard").attr("href");
277
    $("div.pane#instances-pane").load(href);
278
    //$("a#standard")[0].className += ' activelink'
279
    //this.style.color = '#5f8dd3';
243 280
    return false;
244 281
});
245 282

  
......
283 320
});
284 321

  
285 322
$("#start").click(function(event){
286
    $("a#create[rel]").overlay().close();
287 323

  
288
    var triggers = $("div#misc").overlay({
324
    var triggers = $("a#notify").overlay({
289 325
	    // some mask tweaks suitable for modal dialogs
290 326
	    mask: {
291 327
		    color: '#ebecff',
292 328
		    opacity: '0.9'
293 329
	    },
294 330
        top: 'center',
295
        load: 'true',
296
	    closeOnClick: 'false'  
331
	    closeOnClick: false,
332
        oneInstance: false,
333
        load: true
297 334
    });
335
    $("#wizard").hide();
336
    update();
337
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
298 338
});
299 339

  
300 340
$("a#create").click(function(event){
......
314 354
});
315 355

  
316 356
$(function() { 
317
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
318

  
357
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%', oneInstance: false, closeOnClick: false});
319 358
});
320 359

  
321 360
$(function() {

Also available in: Unified diff