Statistics
| Branch: | Tag: | Revision:

root / ui / templates / instances.html @ b303ba05

History | View | Annotate | Download (11.6 kB)

1
<a id="create" rel="#wizard" href="#">Create New +</a>
2

    
3
<div id="instancesview" class="standard">
4
    <a id="list" href="/instances/list">list view</a>
5
    {% for node in nodes %}
6
        {% if node.state == '3' %}        
7
            <div class="instance running">
8
                <div class="actions">
9
                    <a href="#" class="action">reboot</a>
10
                    <a href="#" class="action">shutdown</a>
11
                    <a href="#" class="more">more &hellip;</a>
12
                </div>
13
                <div class="state">
14
                    <div>Running</div>
15
                    <div class="indicator" />
16
                    <div class="indicator" />
17
                    <div class="indicator" />
18
                    <div class="indicator" />
19
                    <div class="uptime">24 days uptime</div>
20
                </div>
21
                <img src="static/server.png" />
22
                <a href="#" class="name">
23
                    <h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
24
                </a>
25
                <a href="#" class="ip">
26
                    <h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5>
27
                </a>
28
                <a href="#" class="storage">
29
                    <h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5>
30
                </a>
31
                </div>
32
            </div>
33
        {% endif %}
34
    {% endfor %}
35
</div>
36

    
37
<!-- the form -->
38
<form action="#">
39
        <!-- scrollable root element -->
40
        <div class="modal" id="wizard">
41
                <!-- status bar -->
42
                <ul id="status">
43
                        <li class="active"><strong>1.</strong> Select image</li>
44
                        <li><strong>2.</strong> Instance type</li>
45
                        <li><strong>3.</strong> Review</li>
46
                </ul>
47
                <!-- scrollable items -->
48
                <div class="items">
49
                        <!-- pages -->
50
                        <div class="page">
51
                <h2>
52
                                        <strong>Step 1: </strong> Select image
53
                                        <em>Select an OS image to boot from</em>
54
                                </h2>
55
                <ul class="tabs">
56
                    <li><a href="#">standard</a></li>
57
                    <li><a href="#">custom</a></li>
58
                </ul>
59
                <div class="panes" tal:define="images context['images']">
60
                    <ul class="pane">
61
                                            <!-- standard images -->
62
                                            <li>
63
                                                    <label for="${image['id']}" tal:repeat="image images"> 
64
                                <a tal:condition="image['type']=='standard'">
65
                                    <div class="image">
66
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
67
                                        <span class="description">${image['description']}</span> 
68
                                        <span class="size">${image['size']}MB</span>
69
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
70
                                    </div>
71
                                </a>
72
                                                    </label> 
73
                                            </li>
74
                                    </ul>
75
                    <ul class="pane">
76
                                            <!-- custom images -->
77
                                            <li>
78
                                                    <label for="${image['id']}" tal:repeat="image images"> 
79
                                <a tal:condition="image['type']=='custom'">
80
                                    <div class="image">
81
                                        <img tal:attributes="src image['logo']" class="image-logo" /> <strong>${image['title']}</strong><br />
82
                                        <span class="description">${image['description']}</span> 
83
                                        <span class="size">${image['size']}MB</span>
84
                                        <input class="radio" type="radio" name="image-id" id="${image['id']}" value="${image['id']}" checked="${repeat.image.start}" />
85
                                    </div>
86
                                </a>
87
                                                    </label> 
88
                                            </li>
89
                    </ul>
90
                </div>
91
                                <button type="button" class="prev" id="cancel">Cancel</button>
92
                                <button type="button" class="next right">Next &raquo;</button>
93
            </div>
94
                        <div class="page">
95
                                <h2>
96
                                        <strong>Step 2: </strong> Instance type <b></b>
97
                                        <em>Select CPU cores, RAM and storage space for your instance</em>
98
                                </h2>
99
                <ul>
100
                    <li>
101
                        <div class="instance-type">
102
                            <label for="small">
103
                                <input type="radio" id="small" name="instance-type" value="small" checked="true" />
104
                                <strong>small</strong>
105
                            </label>
106
                        </div>
107
                        <div class="instance-type">      
108
                            <label for="medium">
109
                                <input type="radio" id="medium" name="instance-type" value="medium" />                  
110
                                <strong>medium</strong>
111
                            </label>
112
                        </div>
113
                        <div class="instance-type">
114
                            <label for="large">
115
                                <input type="radio" id="large" name="instance-type" value="large" />
116
                                <strong>large</strong>
117
                            </label>
118
                        </div>
119
                        <div class="instance-type">
120
                            <label for="custom">
121
                                <input type="radio" name="instance-type" id="custom" value="large" />
122
                                <strong>custom</strong>
123
                            </label>
124
                        </div>
125
                    </li>
126
                    <li>
127
                                    <label><strong class="sliders">CPU (cores)</strong></label>
128
                        <input type="range" id="cpu" value="1" max="8" min="1" />
129
                    </li>
130
                    <li>
131
                                    <label><strong class="sliders">RAM (MB)</strong></label>
132
                        <input type="range" id="ram" value="256" max="2048" min="256" step="256" />
133
                    </li>
134
                    <li>
135
                                <label><strong class="sliders">Storage (GB)</strong></label>
136
                        <input type="range" id="storage" value="5" step="1" max="100" min="2" />
137
                    </li>
138
                    <li>
139
                        <div class="cost">
140
                            Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
141
                        </div>
142
                    </li>
143
                </ul>
144
                                <button type="button" class="prev">&laquo; Back</button>
145
                                <button type="button" class="next right">Next &raquo;</button>
146
            </div>
147
                        <div class="page">
148
                                <h2>
149
                                        <strong>Step 3: </strong> Review <b></b>
150
                                        <em>Confirm the settings below and create your new instance</em>
151
                                </h2>
152
                <ul>
153
                    <li class="required">
154
                        <label>
155
                            <strong></strong> Instance name <span>*</span><br />
156
                            <input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/>
157
                        </label>
158
                    </li>
159
                    <li>
160
                        <strong>Image:</strong> <span>Ubuntu 10.04 x86_64 server</span>
161
                    </li>
162
                    <li>
163
                        <strong>CPU:</strong> <span>2 cores</span>
164
                    </li>
165
                    <li>
166
                        <strong>RAM:</strong> <span>1024MB</span>
167
                    </li>
168
                    <li>
169
                        <strong>Storage:</strong> <span>10GB</span>
170
                    </li>
171
                    <li>
172
                        <strong>Cost per hour:</strong> <span>20 credits</span>
173
                    </li>
174
                    <li>
175
                        <strong>Remaining credits:</strong> <span>10.000</span>
176
                    </li>
177
                </ul>
178
                                <button type="button" class="prev">&laquo; Back</button>
179
                                <button type="button" class="next right" id="start">Create VM</button>        
180
            </div>
181
                </div>
182
        </div>
183
</form>
184

    
185
<div class="modal" id="misc">
186
    <h3>Your VM is being created!</h3>
187
    <p>Your password is:<strong> sdeEFre</strong></p>
188
    <p>Please copy this! Without it you can not connect to your VM.</p>
189
</div>
190

    
191
<script>
192
// <![CDATA[ 
193

194
$("#list").click(function(event){
195
    $("div#instancesview").load($("#list").attr("href"));
196
    return false;
197
});
198

199
$("ul.tabs").tabs("div.panes ul");
200

201
$(":range").rangeinput();
202

203
function disableSliders() {
204
    $("#cpu").attr('disabled',true);
205
    $("#ram").attr('disabled',true);
206
    $("#storage").attr('disabled',true);
207
}
208

209
$("#custom").click(function(event){
210
    $("#cpu").attr('disabled',false);
211
    $("#ram").attr('disabled',false);
212
    $("#storage").attr('disabled',false);
213
    $("strong.sliders").style = 'color: #778899;';
214
});
215

216
$("#small").click(function(event){
217
    $("#cpu").data('rangeinput').setValue(1);
218
    $("#ram").data('rangeinput').setValue(256);
219
    $("#storage").data('rangeinput').setValue(5);
220
});
221

222
$("#medium").click(function(event){
223
    $("#cpu").data('rangeinput').setValue(4);
224
    $("#ram").data('rangeinput').setValue(1024);
225
    $("#storage").data('rangeinput').setValue(30);
226
});
227

228
$("#large").click(function(event){
229
    $("#cpu").data('rangeinput').setValue(8);
230
    $("#ram").data('rangeinput').setValue(4096);
231
    $("#storage").data('rangeinput').setValue(80);
232
});
233

234
$("#cancel").click(function(event){
235
    $("a#create[rel]").overlay().close();
236
});
237

238
$("#start").click(function(event){
239
    $("a#create[rel]").overlay().close();
240

241
    var triggers = $("div#misc").overlay({
242
            // some mask tweaks suitable for modal dialogs
243
            mask: {
244
                    color: '#ebecff',
245
                    opacity: '0.9'
246
            },
247
        top: 'center',
248
        load: 'true',
249
            closeOnClick: 'false'  
250
    });
251
});
252

253
$("a#create").click(function(event){
254
    $("#wizard").scrollable().begin();
255
});
256

257
$("#cpu").change(function(event){
258
    $("#custom").click();
259
});
260

261
$("#ram").change(function(event){
262
    $("#custom").click();
263
});
264

265
$("#storage").change(function(event){
266
    $("#custom").click();
267
});
268

269
$(function() { 
270
    $("a#create[rel]").overlay({mask: '#000', effect: 'default', top: '5%'});
271

272
});
273

274
$(function() {
275
    var root = $("#wizard").scrollable();
276

277
    // some variables that we need
278
    var api = root.scrollable();
279

280
    // rangeinput with default configuration
281
    // validation logic is done inside the onBeforeSeek callback
282
    api.onBeforeSeek(function(event, i) {
283
            // we are going 1 step backwards so no need for validation
284
            if (api.getIndex() < i) {
285
             // 1. get current page
286
                     var page = root.find(".page").eq(api.getIndex()),
287
                         // 2. .. and all required fields inside the page
288
                         inputs = page.find(".required :input").removeClass("error"),
289
                         // 3. .. which are empty
290
                         empty = inputs.filter(function() {
291
                                return $(this).val().replace(/\s*/g, '') == '';
292
                         });
293
                     // if there are empty fields, then
294
                    if (empty.length) {
295
                            // add a CSS class name "error" for empty & required fields
296
                            empty.addClass("error");
297
                            // cancel seeking of the scrollable by returning false
298
                            return false;
299
                    // everything is good
300
                    } 
301
            }
302
            // update status bar
303
            $("#status li").removeClass("active").eq(i).addClass("active");
304
    });
305

306
    // if tab is pressed on the next button seek to next page
307
    root.find("button.next").keydown(function(e) {
308
            if (e.keyCode == 9) {
309
                    // seeks to next tab by executing our validation routine
310
                    api.next();
311
                    e.preventDefault();
312
            }
313
    });
314
// ]]>
315
});
316
</script>
317