Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (17.2 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">/3</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">/3</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">/3</span></span>
47
                    <span class="title">
48
                        {% trans "Personalize" %}
49
                    </span>
50
                    <div class="info">
51
                        <span class="subtitle">
52
                            {% trans "Virtual machine custom options" %}
53
                        </span>
54
                        <span class="description">
55
                            {% trans "Virtual machine custom options" %}
56
                        </span>
57
                    </div>
58
                </span>
59
            </div>
60
        </div>
61
        <div class="steps-history-cont step4h last 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">/3</span></span>
66
                    <span class="title">
67
                        {% trans "Confirm" %}
68
                    </span>
69
                    <div class="info">
70
                        <span class="subtitle">
71
                            {% trans "Confirm your settings" %}
72
                        </span>
73
                        <span class="description">
74
                            {% trans "Confirm that the options you have selected are correct" %}
75
                        </span>
76
                    </div>
77
                </span>
78
            </div>
79
        </div>
80
    </div>
81
    <div class="image-warning">
82
      <p>
83
      {% blocktrans %}You have selected a user-provided Image, which is not
84
      officially endorsed by ~okeanos. Please make sure it is from a
85
      trustworthy source.{% endblocktrans %}
86
      </p>
87
    </div>
88
    <div class="steps-container clearfix">
89
        <div class="step-1 select-image wide create-step-cont clearfix">
90
            <div class="clearfix step-header">
91
            </div>
92
            <div class="step-cont clearfix">
93
                <div class="images-filter-cont content-cont">
94
                    <div class="images-filters">
95
                        <div class="image-types-cont">
96
                            <h4>Image type</h4>
97
                            <ul class="type-filter">
98
                            </ul>
99
                        </div>
100
                        <div class="categories-filters-cont">
101
                            <h4 class="image-filters-title">Categories </h4>
102
                            <ul class="category-filters clearfix"></ul>
103
                            <span class="clear">{% trans "clear categories" %}</span>
104
                            <span class="empty">{% trans "no categories available" %}</span>
105
                        </div>
106
                    </div>
107
                </div>
108
                <div class="images-list-cont content-cont">
109
                    <h4>{% trans "Available images" %}
110
                        <span class="loading-indicator"></span>
111
                        <span class="custom-action">
112
                        <a href="#" class="register-custom-image">{% trans "create image" %}</a>
113
                        </span>
114
                    </h4>
115
                    <ul class="images-list">
116
                    </ul>
117
                    <span class="empty">
118
                      {% trans "No images available" %}.
119
                    </span>
120
                    {% if custom_image_help_url %}
121
                    <span class="custom-image-help" style="display:none">
122
                      <br /><br />
123
                      {% blocktrans with custom_image_help_url as url %}
124
                      Consult <a href="{{ url }}">this guide</a> if you want to create a custom OS image
125
                      {% endblocktrans %}
126
                    </span>
127
                    {% endif %}
128
                    <span class="loading hidden">{% trans "loading..." %}</span>
129
                </div>
130
                <div class="images-info-cont content-cont">
131
                    <h4>Image title</h4>
132
                    <span class="hide">close details</span>
133
                    <div class="image-detail description clearfix">
134
                        <span class="title">{% trans "Description" %}</span>
135
                        <p></p>
136
                    </div>
137
                    <h3>Image metadata</h3>
138
                    <div class="extra-details clearfix">
139
                    </div>
140

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

    
327
<div class="create-controls clearfix">
328
    <div class="form-action cancel">{% trans "cancel" %}</div>
329
    <div class="form-action next">{% trans "next" %}</div>
330
    <div class="form-action prev">{% trans "previous" %}</div>
331
    <div class="form-action create submit">{% trans "create machine" %}</div>
332
</div>
333
</div>
334

    
335
<div id="creation-password-overlay" class="overlay-content overlay-info hidden">
336
    <div class="description">
337
        <p>{% blocktrans %}Your new machine is now buidling... (this might take a few minutes){% endblocktrans %}</p>
338
    </div>
339
    <div class="password-cont clearfix">
340
        <div class="password-label">{% blocktrans %}Write down your password now:{% endblocktrans %}</div>
341
        <div class="password" id="new-machine-password">password</div>
342
        <div class="clipboard new-vm-password-copy"></div>
343
    </div>
344
    <div class="description subinfo">
345
        <p>{% blocktrans %}You will need this later to connect to your machine.{% endblocktrans %}</p>
346
        <p class="important">{% blocktrans %}After closing this window you will <em>NOT</em> be able to retrieve it again
347
        {% endblocktrans %}</p>
348
    </div>
349
    <div class="form-action show-machine">{% trans "view machine" %}</div>
350
</div>
351