Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / templates / partials / create_vm.html @ c566f369

History | View | Annotate | Download (18.9 kB)

1
{% load i18n %}
2
<div id="createvm-overlay-content" class="hidden create-vm">
3
    <div class="steps-history clearfix">
4
        <div class="steps-history-cont step1h completed step-header"
5
            id="vm-create-step-history-1">
6
            <div class="steps-history-step clearfix">
7
                <span class="header-step step-1 clearfix">
8
                    <span class="num">1<span class="subnum">/5</span></span>
9
                    <span class="title">
10
                        {% trans "Image" %}
11
                    </span>
12
                    <div class="info">
13
                        <span class="subtitle">
14
                            {% trans "Select an OS" %}
15
                        </span>
16
                        <span class="description">
17
                            {% trans "Choose your preferred image" %}
18
                        </span>
19
                    </div>
20
                </span>
21
            </div>
22
        </div>
23
        <div class="steps-history-cont step2h current step-header"
24
           id="vm-create-step-history-2" >
25
            <div class="steps-history-step clearfix">
26
                <span class="header-step step-2 clearfix">
27
                    <span class="num">2<span class="subnum">/5</span></span>
28
                    <span class="title">
29
                        {% trans "Flavor" %}
30
                    </span>
31
                    <div class="info">
32
                        <span class="subtitle">
33
                            {% trans "Select CPUs, RAM and Disk Size" %}
34
                        </span>
35
                        <span class="description">
36
                            {% trans "Available options are filtered based on the selected image" %}
37
                        </span>
38
                    </div>
39
                </span>
40
            </div>
41
        </div>
42
        <div class="steps-history-cont step3h step-header">
43
            <div class="steps-history-step clearfix"
44
                id="vm-create-step-history-3">
45
                <span class="header-step step-3 clearfix">
46
                    <span class="num">3<span class="subnum">/5</span></span>
47
                    <span class="title">
48
                        {% trans "Networking" %}
49
                    </span>
50
                    <div class="info">
51
                        <span class="subtitle">
52
                            {% trans "Virtual machine networking configuration" %}
53
                        </span>
54
                        <span class="description">
55
                            {% trans "Select machine IP address and private networks" %}
56
                        </span>
57
                    </div>
58
                </span>
59
            </div>
60
        </div>
61
        <div class="steps-history-cont step4h step-header">
62
            <div class="steps-history-step clearfix"
63
                id="vm-create-step-history-4">
64
                <span class="header-step step-4 clearfix">
65
                    <span class="num">4<span class="subnum">/5</span></span>
66
                    <span class="title">
67
                        {% trans "Personalize" %}
68
                    </span>
69
                    <div class="info">
70
                        <span class="subtitle">
71
                            {% trans "Virtual machine custom options" %}
72
                        </span>
73
                        <span class="description">
74
                            {% trans "Virtual machine custom options" %}
75
                        </span>
76
                    </div>
77
                </span>
78
            </div>
79
        </div>
80
        <div class="steps-history-cont step5h last step-header">
81
            <div class="steps-history-step clearfix"
82
                id="vm-create-step-history-5">
83
                <span class="header-step step-5 clearfix">
84
                    <span class="num">5<span class="subnum">/5</span></span>
85
                    <span class="title">
86
                        {% trans "Confirm" %}
87
                    </span>
88
                    <div class="info">
89
                        <span class="subtitle">
90
                            {% trans "Confirm your settings" %}
91
                        </span>
92
                        <span class="description">
93
                            {% trans "Confirm that the options you have selected are correct" %}
94
                        </span>
95
                    </div>
96
                </span>
97
            </div>
98
        </div>
99
    </div>
100
    <div class="steps-container clearfix">
101
        <div class="step-1 select-image wide create-step-cont clearfix">
102
            <div class="clearfix step-header">
103
            </div>
104
            <div class="step-cont clearfix">
105
                <div class="images-filter-cont content-cont">
106
                    <div class="images-filters">
107
                        <div class="image-types-cont">
108
                            <h4>Image type</h4>
109
                            <ul class="type-filter">
110
                            </ul>
111
                        </div>
112
                        <div class="categories-filters-cont">
113
                            <h4 class="image-filters-title">Categories </h4>
114
                            <ul class="category-filters clearfix"></ul>
115
                            <span class="clear">{% trans "clear categories" %}</span>
116
                            <span class="empty">{% trans "no categories available" %}</span>
117
                        </div>
118
                    </div>
119
                </div>
120
                <div class="images-list-cont content-cont">
121
                    <h4>{% trans "Available images" %}
122
                        <span class="loading-indicator"></span>
123
                        <span class="custom-action">
124
                        <a href="#" class="register-custom-image">{% trans "create image" %}</a>
125
                        </span>
126
                    </h4>
127
                    <ul class="images-list">
128
                    </ul>
129
                    <span class="empty">
130
                      {% trans "No images available" %}.
131
                    </span>
132
                    {% if custom_image_help_url %}
133
                    <span class="custom-image-help" style="display:none">
134
                      <br /><br />
135
                      {% blocktrans with custom_image_help_url as url %}
136
                      Consult <a href="{{ url }}">this guide</a> if you want to create a custom OS image
137
                      {% endblocktrans %}
138
                    </span>
139
                    {% endif %}
140
                    <span class="loading hidden">{% trans "loading..." %}</span>
141
                </div>
142
                <div class="images-info-cont content-cont">
143
                    <h4>Image title</h4>
144
                    <span class="hide">close details</span>
145
                    <div class="image-detail description clearfix">
146
                        <span class="title">{% trans "Description" %}</span>
147
                        <p></p>
148
                    </div>
149
                    <h3>Image metadata</h3>
150
                    <div class="extra-details clearfix">
151
                    </div>
152

    
153
                </div>
154
            </div>
155
        </div>
156
        <div class="step-2 select-flavor create-step-cont clearfix">
157
            <div class="clearfix step-header">
158
            </div>
159
            <div class="step-cont clearfix">
160
                <div class="flavors-predefined-cont content-cont"> 
161
                    <div class="flavors-predefined">
162
                        <h4>{% trans "Predefined" %}</h4>
163
                        <ul class="predefined-list">
164
                        </ul>
165
                    </div>
166
                </div>
167
                <div class="flavor-options-cont content-cont">
168
                    <div class="flavor-options-inner-cont clearfix"
169
                        id="create-vm-flavor-options">
170
                        <div class="flavor-options cpu clearfix">
171
                          <h4 class="clearfix"><span class="title">{% trans "CPUs" %}</span>
172
                            <span class="available"></span>
173
                                <span class="desc">{% trans "Choose number of CPU cores" %}</span>
174
                            </h4>
175
                            <ul class="flavors-cpu-list flavor-opts-list clearfix">
176
                            </ul>
177
                        </div>
178
                        <div class="flavor-options mem clearfix">
179
                            <h4 class="clearfix"><span class="title">{% trans "Memory size" %}</span>
180
                            <span class="available"></span>
181
                                <span class="desc">{% trans "Choose memory size" %}</span>
182
                            </h4>
183
                            <ul class="flavors-mem-list flavor-opts-list clearfix">
184
                            </ul>
185
                        </div>
186
                        <div class="flavor-options disk clearfix">
187
                            <h4 class="clearfix"><span class="title">{% trans "Disk size" %}</span>
188
                            <span class="available"></span>
189
                                <span class="desc">{% trans "Choose disk size" %}</span>
190
                            </h4>
191
                            <ul class="flavors-disk-list flavor-opts-list clearfix">
192
                            </ul>
193
                        </div>
194
                        <div class="flavor-options disk_template clearfix">
195
                            <h4 class="clearfix"><span class="title">{% trans "Storage" %}</span>
196
                                <span class="desc">{% trans "Select storage type" %}</span>
197
                            </h4>
198
                            <ul class="flavors-disk-template-list flavor-opts-list clearfix">
199
                            </ul>
200
                            <div class="disk-template-description">
201
                                <p></p>
202
                            </div>
203
                        </div>
204
                    </div>
205
                </div>
206
            </div>
207
        </div>
208
        <div class="step-3 vm-network create-step-cont clearfix">
209
            <div class="clearfix step-header">
210
            </div>
211
            <div class="step-cont clearfix">
212
                    <div class="personalize-conts clearfix">
213
                    </div>
214
            </div>
215
        </div>
216
        <div class="step-4 vm-personalize create-step-cont clearfix">
217
            <div class="clearfix step-header">
218
            </div>
219
            <div class="step-cont clearfix">
220
                <div class="rename">
221
                    <div class="form-field">
222
                        <h4>
223
                            <label for="create-vm-name">{% trans "Machine name" %}</label>
224
                        </h4>
225
                        <input type="text" name="create-vm-name"
226
                        class="rename-field" id="create-vm-name" />
227
                    </div>
228
                    
229
                    <div class="personalize-conts clearfix">
230
                        <div class="list-cont personalize-cont ssh">
231
                            <h4>{% trans "Public SSH keys" %} <span><a
232
                                        class="create-ssh-key" href="#">manage keys</a></span></h4>
233
                            <p class="desc">
234
                            {% blocktrans %}
235
                            Your account contains the following SSH public keys. 
236
                            Select one or more to activate in your new machine. 
237
                            You will then be able to ssh with the corresponding 
238
                            private key without a password."
239
                            {% endblocktrans %}
240
                            </p>
241
                            <p class="desc empty hidden">
242
                            No ssh keys in your account. <a href="#"
243
                                class="create-ssh-key">Create/import a new key now</a>.
244
                            </p>
245
                            <p class="desc warning disabled hidden">
246
                                The image you selected does not support ssh key
247
                                assignments.
248
                            </p>
249
                            <ul class="confirm-params">
250
                            </ul>
251
                        </div>
252
                        <div class="list-cont personalize-cont meta">
253
                            <h4>{% trans "Suggested tags" %}</h4>
254
                            <ul class="confirm-params">
255
                                <li class="predefined-meta role">
256
                                    <p class="desc">
257
                                        You may change machine tags
258
                                        later from the machines view.
259
                                    </p>
260
                                    <span class="key">{% trans "Role" %}</span>
261
                                    <div class="values clearfix">
262
                                    </div>
263
                                </li>
264
                                <!--<li class="predefined-meta clearfix">-->
265
                                    <!--<span class="key">{% trans "Public key" %}</span>-->
266
                                    <!--<input type="file"/>-->
267
                                    <!--<textarea height="20"></textarea>-->
268
                                <!--</li>-->
269
                            </ul>
270
                        </div>
271
                    </div>
272
                </div>
273
            </div>
274
    </div>
275
        <div class="step-5 vm-confirm create-step-cont clearfix">
276
            <div class="clearfix step-header">
277
            </div>
278
            <div class="step-cont clearfix">
279
                <div class="rename">
280
                    <div class="form-field">
281
                        <h4>Machine name</h4>
282
                        <h3 class="vm-name">
283
                        </h3>
284
                    </div>
285
                    
286
                    <div class="confirm-conts clearfix">
287
                        <div class="list-cont confirm-cont image">
288
                            <h4>{% trans "Image" %}</h4>
289
                            <ul class="confirm-params">
290
                                <li class="param image-name clearfix">
291
                                    <h4 class="value"></h4>
292
                                </li>
293
                                <li class="param image-description clearfix">
294
                                    <span class="title">{% trans "Description" %}</span>
295
                                    <span class="value"></span>
296
                                </li>
297
                                <li class="param image-os clearfix">
298
                                    <span class="title">{% trans "OS" %}</span>
299
                                    <span class="value"></span>
300
                                </li>
301
                                <li class="param image-size clearfix">
302
                                    <span class="title">{% trans "Size" %}</span>
303
                                    <span class="value"></span>
304
                                </li>
305
                                <li class="param image-gui clearfix">
306
                                    <span class="title">{% trans "GUI" %}</span>
307
                                    <span class="value"></span>
308
                                </li>
309
                                <li class="param image-kernel clearfix">
310
                                    <span class="title">{% trans "Kernel" %}</span>
311
                                    <span class="value"></span>
312
                                </li>
313
                            </ul>
314
                        </div>
315
                        <div class="list-cont confirm-cont flavor">
316
                            <h4>{% trans "Flavor" %}</h4>
317
                            <ul class="confirm-params">
318
                                <li class="param flavor-cpu clearfix">
319
                                    <span class="title">{% trans "CPUs" %}</span>
320
                                    <span class="value"></span>
321
                                </li>
322
                                <li class="param flavor-ram clearfix">
323
                                    <span class="title">{% trans "Memory" %}</span>
324
                                    <span class="value"></span>
325
                                </li>
326
                                <li class="param flavor-disk clearfix">
327
                                    <span class="title">{% trans "Disk" %}</span>
328
                                    <span class="value"></span>
329
                                </li>
330
                                <li class="param flavor-disktype clearfix">
331
                                    <span class="title">{% trans "Storage type" %}</span>
332
                                    <span class="value"></span>
333
                                </li>
334
                            </ul>
335
                            <h4>{% trans "Machine Tags" %}</h4>
336
                            <ul class="confirm-params meta">
337
                            </ul>
338
                        </div>
339
                        <div class="list-cont confirm-cont meta">
340
                            <h4>{% trans "SSH Keys" %}</h4>
341
                            <ul class="confirm-params ssh">
342
                            </ul>
343
                            <h4>{% trans "IP Addresses" %}</h4>
344
                            <ul class="confirm-params ip-addresses">
345
                            </ul>
346
                            <h4>{% trans "Private networks" %}</h4>
347
                            <ul class="confirm-params private-networks">
348
                            </ul>
349
                        </div>
350
                    </div>
351
                </div>
352
            </div>
353
    </div>
354
</div>
355

    
356
<div class="image-warning clearfix">
357
  <p>
358
  {% blocktrans %}You have selected a user-provided Image, which is not
359
  officially endorsed by {{ BRANDING_SERVICE_NAME }}. Please make sure it is from a
360
  trustworthy source.{% endblocktrans %}
361
  </p>
362
  <span class="untrusted-image-confirm confirm">confirm</span>
363
</div>
364
<div class="create-controls clearfix">
365
    <div class="form-action cancel">{% trans "cancel" %}</div>
366
    <div class="form-action next">{% trans "next" %}</div>
367
    <div class="form-action prev">{% trans "previous" %}</div>
368
    <div class="form-action create submit">{% trans "create machine" %}</div>
369
</div>
370
</div>
371

    
372
<div id="creation-password-overlay" class="overlay-content overlay-info hidden">
373
    <div class="description">
374
        <p>{% blocktrans %}Your new machine is now buidling... (this might take a few minutes){% endblocktrans %}</p>
375
    </div>
376
    <div class="password-cont clearfix">
377
        <div class="password-label">{% blocktrans %}Write down your password now:{% endblocktrans %}</div>
378
        <div class="password" id="new-machine-password">password</div>
379
        <div class="clipboard new-vm-password-copy"></div>
380
    </div>
381
    <div class="description subinfo">
382
        <p>{% blocktrans %}You will need this later to connect to your machine.{% endblocktrans %}</p>
383
        <p class="important">{% blocktrans %}After closing this window you will <em>NOT</em> be able to retrieve it again
384
        {% endblocktrans %}</p>
385
    </div>
386
    <div class="form-action show-machine">{% trans "OK" %}</div>
387
</div>
388