Statistics
| Branch: | Tag: | Revision:

root / ui / templates / alt_instances.pt @ 5153f2a9

History | View | Annotate | Download (11.3 kB)

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

    
3
<div id="instancesview" class="standard" tal:define="nodes context['nodes']">
4
    <a id="list" href="/instances/list">list view</a>
5
    <div class="instance running" tal:repeat="node nodes">
6
        <div tal:condition="node['state']=='3'" tal:omit-tag="">
7

    
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
        
14
        <div class="state">
15
            <div>Running</div>
16
            <div class="indicator" />
17
            <div class="indicator" />
18
            <div class="indicator" />
19
            <div class="indicator" />
20
        </div>
21

    
22
        <img src="static/pc.png" />
23
        <a href="#" class="name">
24
            <h5>Hostname: <span tal:replace="node['name']" /><span class="rename">rename</span></h5>
25
        </a>
26
        <a href="#" class="ip">
27
            <h5>IP: <span tal:replace="node['public_ip']" /></h5>
28
        </a>
29
        <br />
30
        <a href="#" class="storage">
31
            <h5>Show: disks | networks | group | uptime: 24 days</h5>
32
        </a>
33
        </div>
34
    </div>
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