root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ 9d9b626d
History | View | Annotate | Download (56.8 kB)
1 |
|
---|---|
2 |
<!DOCTYPE html>
|
3 |
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
4 |
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
5 |
|
6 |
<head>
|
7 |
<meta charset="utf-8" /> |
8 |
<meta name="viewport" content="width=device-width" /> |
9 |
<title>VM details</title> |
10 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'> |
11 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
12 |
<link rel="stylesheet" href="stylesheets/farbtastic.css" /> |
13 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
14 |
<link rel="stylesheet" href="stylesheets/font_custom.css" /> |
15 |
<link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" /> |
16 |
<link rel="stylesheet" href="stylesheets/magnific-popup.css" /> |
17 |
<script src="javascripts/vendor/custom.modernizr.js"></script> |
18 |
</head>
|
19 |
<body>
|
20 |
<header class="header"> |
21 |
<nav>
|
22 |
<ul class="icons-nav"> |
23 |
<li><a href="vm_list.html" data-tooltip ="has-tip " title="Machines"><span class="snf-pc-outline"></span></a></li> |
24 |
<li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li> |
25 |
<li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li> |
26 |
<li><a href="pithos.html" data-tooltip ="has-tip" title="Storage"><span class="snf-pithos-outline"></span></a></li> |
27 |
<li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-image-outline"></span></a></li> |
28 |
<li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li> |
29 |
<li><a href="" data-tooltip ="has-tip" title="IPs"><span class="snf-nic-outline"></span></a></li> |
30 |
<li><a href="" data-tooltip ="has-tip" title="SSH keys"><span class="snf-key-outline"></span></a></li> |
31 |
</nav>
|
32 |
<div class="login"> |
33 |
<div class="wrap"> |
34 |
<a href="">user1@synnefo.org</a> |
35 |
<ul>
|
36 |
<li><a href="">dashboard</a></li> |
37 |
<li><a href="">sign out</a></li> |
38 |
</ul>
|
39 |
</div>
|
40 |
</div>
|
41 |
<div class="logo"> |
42 |
<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a> |
43 |
</div>
|
44 |
</header>
|
45 |
<div class="info top-info alert"> |
46 |
<div class="wrap"> |
47 |
<p>ALERT!</p> |
48 |
<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p> |
49 |
</div>
|
50 |
<a href="#" class="close" title="hide message">close</a> |
51 |
</div>
|
52 |
<div class="body-wrapper"> |
53 |
<section class="overlay-area-custom"> |
54 |
<div id="vm-wizard" class="overlay-div wizard"> |
55 |
<div class="top"> |
56 |
<div class="numbers"> |
57 |
<div class="row"> |
58 |
<a href="" class="close"><span class="snf-close"></span></a> |
59 |
<ul class="nums"> |
60 |
<li class="current preselected"> |
61 |
<em><span>1</span></em> |
62 |
<p><strong>Select an OS</strong> Choose your preferred image</p> |
63 |
</li>
|
64 |
<li>
|
65 |
<em><span>2</span></em> |
66 |
<p><strong>Select CPUs, RAM and Disk Size </strong> |
67 |
Available options are filtered based on the selected image</p>
|
68 |
</li>
|
69 |
<li>
|
70 |
<em><span>3</span></em> |
71 |
<p><strong>Virtual machine custom options</strong> |
72 |
Virtual machine custom options</p>
|
73 |
</li>
|
74 |
<li>
|
75 |
<em><span>4</span></em> |
76 |
<p><strong>Confirm your settings</strong> |
77 |
Confirm that the options you have selected are correct</p>
|
78 |
</li>
|
79 |
</ul>
|
80 |
</div>
|
81 |
</div>
|
82 |
<div class="row menus"> |
83 |
<nav class="sub-menu" data-step=1> |
84 |
<ul>
|
85 |
<li><a href="" class="current preselected el2 firstfocus-1" data-img-type="system-images">System</a></li> |
86 |
<li><a href="" data-img-type="my-images">My images</a></li> |
87 |
<li><a href="" data-img-type="shared-images">Shared with me</a></li> |
88 |
<li><a href="" data-next="el1" data-img-type="public-images">Public</a></li> |
89 |
</ul>
|
90 |
</nav>
|
91 |
<nav class="sub-menu" data-step=2> |
92 |
<ul>
|
93 |
<li><a href="" class="current preselected el4 firstfocus-2" data-size="small">Small</a></li> |
94 |
<li><a href="" data-size="medium">Medium</a></li> |
95 |
<li><a href="" data-size="large" data-next="el5">Large</a></li> |
96 |
</ul>
|
97 |
</nav>
|
98 |
</div>
|
99 |
</div>
|
100 |
<div class="middle"> |
101 |
<div class="steps"> |
102 |
<div class="step step-1 current preselected" id="step-1" data-step="1"> |
103 |
<ul class="os"> |
104 |
<li class="current preselected system-images"> |
105 |
<div class="row"> |
106 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
107 |
<a href="" class="name-col el1">Kubuntu</a> |
108 |
<div class="size-col">3.13 GB</div> |
109 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
110 |
</div>
|
111 |
<div class="details"> |
112 |
<div class="row"> |
113 |
<h3>Image metadata</h3> |
114 |
<dl>
|
115 |
<dt>Owner</dt> |
116 |
<dd>system</dd> |
117 |
<dt>OS</dt> |
118 |
<dd>Kubuntu</dd> |
119 |
<dt>Kernel</dt> |
120 |
<dd>4.8.2</dd> |
121 |
<dt>Size</dt> |
122 |
<dd>2.51GB</dd> |
123 |
<dt>Users</dt> |
124 |
<dd>user</dd> |
125 |
<dt>Root partition</dt> |
126 |
<dd>1</dd> |
127 |
</dl>
|
128 |
</div>
|
129 |
</div>
|
130 |
</li>
|
131 |
<li class="public-images"> |
132 |
<div class="row"> |
133 |
<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div> |
134 |
<a href="" class="name-col">Kubuntu LTS (by Kpal)</a> |
135 |
<div class="size-col">10GB</div> |
136 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
137 |
</div>
|
138 |
<div class="details"> |
139 |
<div class="row"> |
140 |
<h3>Image metadata</h3> |
141 |
<dl>
|
142 |
<dt>Owner</dt> |
143 |
<dd>system</dd> |
144 |
<dt>OS</dt> |
145 |
<dd>Kubuntu</dd> |
146 |
<dt>Kernel</dt> |
147 |
<dd>4.8.2</dd> |
148 |
<dt>Size</dt> |
149 |
<dd>2.51GB</dd> |
150 |
<dt>Users</dt> |
151 |
<dd>user</dd> |
152 |
<dt>Root partition</dt> |
153 |
<dd>1</dd> |
154 |
</dl>
|
155 |
</div>
|
156 |
</div>
|
157 |
</li>
|
158 |
<li class="public-images"> |
159 |
<div class="row"> |
160 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
161 |
<a href="" class="name-col">Fedora (by Athina)</a> |
162 |
<div class="size-col">10GB</div> |
163 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
164 |
</div>
|
165 |
<div class="details"> |
166 |
<div class="row"> |
167 |
<h3>Image metadata</h3> |
168 |
<dl>
|
169 |
<dt>Owner</dt> |
170 |
<dd>system</dd> |
171 |
<dt>OS</dt> |
172 |
<dd>Kubuntu</dd> |
173 |
<dt>Kernel</dt> |
174 |
<dd>4.8.2</dd> |
175 |
<dt>Size</dt> |
176 |
<dd>2.51GB</dd> |
177 |
<dt>Users</dt> |
178 |
<dd>user</dd> |
179 |
<dt>Root partition</dt> |
180 |
<dd>1</dd> |
181 |
</dl>
|
182 |
</div>
|
183 |
</div>
|
184 |
</li>
|
185 |
<li class="shared-images"> |
186 |
<div class="row"> |
187 |
<div class="img-col"><img src="images/os-fedora.png" alt=""></div> |
188 |
<a href="" class="name-col">Fedora (by Athina)</a> |
189 |
<div class="size-col">3.67 GB</div> |
190 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
191 |
</div>
|
192 |
<div class="details"> |
193 |
<div class="row"> |
194 |
<h3>Image metadata</h3> |
195 |
<dl>
|
196 |
<dt>Owner</dt> |
197 |
<dd>system</dd> |
198 |
<dt>OS</dt> |
199 |
<dd>Kubuntu</dd> |
200 |
<dt>Kernel</dt> |
201 |
<dd>4.8.2</dd> |
202 |
<dt>Size</dt> |
203 |
<dd>2.51GB</dd> |
204 |
<dt>Users</dt> |
205 |
<dd>user</dd> |
206 |
<dt>Root partition</dt> |
207 |
<dd>1</dd> |
208 |
</dl>
|
209 |
</div>
|
210 |
</div>
|
211 |
</li>
|
212 |
<li class="my-images"> |
213 |
<div class="row"> |
214 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
215 |
<a href="" class="name-col">Windows Server 2012</a> |
216 |
<div class="size-col">13.66 GB</div> |
217 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
218 |
</div>
|
219 |
<div class="details"> |
220 |
<div class="row"> |
221 |
<h3>Image metadata</h3> |
222 |
<dl>
|
223 |
<dt>Owner</dt> |
224 |
<dd>system</dd> |
225 |
<dt>OS</dt> |
226 |
<dd>Kubuntu</dd> |
227 |
<dt>Kernel</dt> |
228 |
<dd>4.8.2</dd> |
229 |
<dt>Size</dt> |
230 |
<dd>2.51GB</dd> |
231 |
<dt>Users</dt> |
232 |
<dd>user</dd> |
233 |
<dt>Root partition</dt> |
234 |
<dd>1</dd> |
235 |
</dl>
|
236 |
</div>
|
237 |
</div>
|
238 |
</li>
|
239 |
<li class="system-images"> |
240 |
<div class="row"> |
241 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
242 |
<a href="" class="name-col">Windows Server 2012</a> |
243 |
<div class="size-col">13.66 GB</div> |
244 |
<div class="btn-col"><a href="" class="wrap-a">details</a></div> |
245 |
</div>
|
246 |
<div class="details"> |
247 |
<div class="row"> |
248 |
<h3>Image metadata</h3> |
249 |
<dl>
|
250 |
<dt>Owner</dt> |
251 |
<dd>system</dd> |
252 |
<dt>OS</dt> |
253 |
<dd>Kubuntu</dd> |
254 |
<dt>Kernel</dt> |
255 |
<dd>4.8.2</dd> |
256 |
<dt>Size</dt> |
257 |
<dd>2.51GB</dd> |
258 |
<dt>Users</dt> |
259 |
<dd>user</dd> |
260 |
<dt>Root partition</dt> |
261 |
<dd>1</dd> |
262 |
</dl>
|
263 |
</div>
|
264 |
</div>
|
265 |
</li>
|
266 |
<li class="system-images"> |
267 |
<div class="row"> |
268 |
<div class="img-col"><img src="images/os-windows.png" alt=""></div> |
269 |
<a href="" class="name-col">Windows Server 2008</a> |
270 |
<div class="size-col">10.79 GB</div> |
271 |
<div class="btn-col"><a href="" class="wrap-a" data-next="el3">details</a></div> |
272 |
</div>
|
273 |
<div class="details"> |
274 |
<div class="row"> |
275 |
<h3>Image metadata</h3> |
276 |
<dl>
|
277 |
<dt>Owner</dt> |
278 |
<dd>system</dd> |
279 |
<dt>OS</dt> |
280 |
<dd>Kubuntu</dd> |
281 |
<dt>Kernel</dt> |
282 |
<dd>4.8.2</dd> |
283 |
<dt>Size</dt> |
284 |
<dd>2.51GB</dd> |
285 |
<dt>Users</dt> |
286 |
<dd>user</dd> |
287 |
<dt>Root partition</dt> |
288 |
<dd>1</dd> |
289 |
</dl>
|
290 |
</div>
|
291 |
</div>
|
292 |
</li>
|
293 |
|
294 |
</ul>
|
295 |
</div>
|
296 |
<div class="step step-2" id="step-2" data-step=2> |
297 |
<div class="row"> |
298 |
<form class="custom"> |
299 |
<select class="medium"> |
300 |
<option class="el5">Basic Project</option> |
301 |
<option>Project 2</option> |
302 |
<option>Project 3</option> |
303 |
</select>
|
304 |
</form>
|
305 |
<ul class="flavor"> |
306 |
<li>
|
307 |
<div class="title"> |
308 |
<span class="snf-chip-outline snf-font"></span> |
309 |
<h2>
|
310 |
CPU<span> (x cores)</span> |
311 |
<em>Choose number of CPU cores</em> |
312 |
</h2>
|
313 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
314 |
</div>
|
315 |
<div class="options-bar"> |
316 |
<div class="bar"> |
317 |
<div class="wrap"> |
318 |
<div class="container"> |
319 |
<!-- width percentages do not correspond to actual mesurements -->
|
320 |
<div class="total" style="width:60%"> |
321 |
<div class="current" style="width:30%"></div> |
322 |
<span>60%</span> |
323 |
</div>
|
324 |
</div>
|
325 |
</div>
|
326 |
</div>
|
327 |
<ul class="options with-flavor"> |
328 |
<li><a href="" class="small current preselected wrap-a" data-help="help text for 1">1</a></li> |
329 |
<li><a href="" class="medium wrap-a" data-help="help text for 2">2</a></li> |
330 |
<li><a href="" class="large disabled wrap-a" data-help="help text for 3">3</a></li> |
331 |
<li><a href="" class="disabled wrap-a" data-help="help text for 4">4</a></li> |
332 |
</ul>
|
333 |
</div>
|
334 |
</li>
|
335 |
<li>
|
336 |
<div class="title"> |
337 |
<span class="snf-ram-outline snf-font"></span> |
338 |
<h2>
|
339 |
Memory Size |
340 |
<span> (MB)</span> |
341 |
<em>Choose memory size</em> |
342 |
</h2>
|
343 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
344 |
</div>
|
345 |
<div class="options-bar"> |
346 |
<div class="bar"> |
347 |
<div class="wrap"> |
348 |
<div class="container"> |
349 |
<!-- width percentages do not correspond to actual mesurements -->
|
350 |
<div class="total" style="width:60%"> |
351 |
<div class="current" style="width:30%"></div> |
352 |
<span>60%</span> |
353 |
</div>
|
354 |
</div>
|
355 |
</div>
|
356 |
</div>
|
357 |
<ul class="options with-flavor"> |
358 |
<li><a href="" class="small current preselected wrap-a">1024</a></li> |
359 |
<li><a href="" class="medium wrap-a">2048</a></li> |
360 |
<li><a href="" class="large wrap-a">4096</a></li> |
361 |
</ul>
|
362 |
</div>
|
363 |
</li>
|
364 |
<li>
|
365 |
<div class="title"> |
366 |
<span class="snf-volume-outline snf-font"></span> |
367 |
<h2>
|
368 |
Disk Size<span> (GB)</span> |
369 |
<em>Choose disk size</em> |
370 |
</h2>
|
371 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
372 |
</div>
|
373 |
<div class="options-bar"> |
374 |
<div class="bar"> |
375 |
<div class="wrap"> |
376 |
<div class="container"> |
377 |
<!-- width percentages do not correspond to actual mesurements -->
|
378 |
<div class="total low" style="width:40%"> |
379 |
<div class="current" style="width:80%"></div> |
380 |
<span>40%</span> |
381 |
</div>
|
382 |
</div>
|
383 |
</div>
|
384 |
</div>
|
385 |
<ul class="options with-flavor"> |
386 |
<li><a href="" class="small current preselected wrap-a">10</a></li> |
387 |
<li><a href="" class="medium wrap-a">20</a></li> |
388 |
<li><a href="" class="large wrap-a">30</a></li> |
389 |
<li><a href="" class="wrap-a">40</a></li> |
390 |
</ul>
|
391 |
</div>
|
392 |
</li>
|
393 |
<li>
|
394 |
<div class="title"> |
395 |
<span class="snf-volume-outline snf-font"></span> |
396 |
<h2>
|
397 |
Storage |
398 |
<em>Select storage type</em> |
399 |
</h2>
|
400 |
<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p> |
401 |
</div>
|
402 |
<div class="options-bar"> |
403 |
<div class="bar"> |
404 |
<div class="wrap disabled-progress-bar"> |
405 |
<div class="container"> |
406 |
<!-- width percentages do not correspond to actual mesurements -->
|
407 |
<div class="total" style="width:100%"> |
408 |
<div class="current" style="width:0%"></div> |
409 |
<span></span> |
410 |
</div>
|
411 |
</div>
|
412 |
</div>
|
413 |
</div>
|
414 |
<ul class="options vm-storage-selection"> |
415 |
<li><a href="" class="current preselected wrap-a">DRBD</a></li> |
416 |
<li><a href="" data-next="el3" class="wrap-a">Archipelago</a></li> |
417 |
</ul>
|
418 |
</div>
|
419 |
</li>
|
420 |
</ul>
|
421 |
</div>
|
422 |
</div>
|
423 |
<div class="step step-3" id="step-3" data-step=3> |
424 |
<div class="advanced-conf-step"> |
425 |
<div class="adv-main row"> |
426 |
<div class="name"> |
427 |
<h2>Machine name</h2> |
428 |
<span class="input"> |
429 |
<input type="text" placeholder="My Ubuntu Server" class="el7"> |
430 |
</span>
|
431 |
</div>
|
432 |
<div class="expand-btn"> |
433 |
<a class="expand-arrow" href=""> |
434 |
Advanced Configuration |
435 |
<span class="snf-arrow-down preselected"></span> |
436 |
</a>
|
437 |
</div>
|
438 |
</div>
|
439 |
<div class="advanced-conf-options"> |
440 |
<div class="ssh-keys-area area"> |
441 |
<div class="row"> |
442 |
<h2>Public SSH keys</h2> |
443 |
<p>Your account contains the following SSH public keys. Select one or more to activate in your new machine. You will then be able to ssh with the corresponding private key without a password."</p> |
444 |
<ul>
|
445 |
<li class="with-checkbox"> |
446 |
<h3>My public key long name one </h3> |
447 |
<a href="" class="check"> |
448 |
<span class="snf-checkbox-unchecked"></span> |
449 |
</a>
|
450 |
</li>
|
451 |
<li class="with-checkbox"> |
452 |
<h3>Other public key </h3> |
453 |
<a href="" class="check"> |
454 |
<span class="snf-checkbox-unchecked"></span> |
455 |
</a>
|
456 |
</li>
|
457 |
<li class="with-checkbox"> |
458 |
<h3>My public key long name one </h3> |
459 |
<a href="" class="check"> |
460 |
<span class="snf-checkbox-unchecked"></span> |
461 |
</a>
|
462 |
</li>
|
463 |
</ul>
|
464 |
<div>
|
465 |
<a href="" class="btn5 wrap-a" data-reveal-id="sshkeys-wizard" title="set data-reveal-id: sshkeys-wizard">manage ssh keys</a> |
466 |
</div>
|
467 |
</div>
|
468 |
</div>
|
469 |
<div class="networks-area area"> |
470 |
<h2 class="row">Networks</h2> |
471 |
<ul>
|
472 |
<li class="with-checkbox row has-more select-net"> |
473 |
<h3 class=""> |
474 |
<span class="net-icons"> |
475 |
<span class="temp-line line1"></span> |
476 |
<span class="snf-www"></span> |
477 |
<span class="snf-network-full"></span> |
478 |
</span>
|
479 |
Public Network |
480 |
</h3>
|
481 |
<a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a> |
482 |
</li>
|
483 |
<li class="more"> |
484 |
<div class="row"> |
485 |
<div class="with-checkbox clearfix"> |
486 |
<h3>192.168.2.3</h3> |
487 |
<a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a> |
488 |
</div>
|
489 |
<div class="with-checkbox clearfix"> |
490 |
<h3>192.168.2.3</h3> |
491 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
492 |
</div>
|
493 |
<div class="with-checkbox clearfix"> |
494 |
<h3>192.168.2.3</h3> |
495 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
496 |
</div>
|
497 |
<div>
|
498 |
<a href="" class="btn5 wrap-a">allocate ip</a> |
499 |
</div>
|
500 |
</div>
|
501 |
</li>
|
502 |
<li class="with-checkbox row select-net"> |
503 |
<h3 class="net-name"> |
504 |
<span class="net-icons"> |
505 |
<span class="temp-line line1"></span> |
506 |
<span class="temp-line line2"></span> |
507 |
<span class="snf-www"></span> |
508 |
<span class="snf-router-outline"></span> |
509 |
<span class="snf-network-full"></span> |
510 |
</span>
|
511 |
Routed Network |
512 |
</h3>
|
513 |
<a href="" class="check"> |
514 |
<span class="snf-checkbox-unchecked"></span> |
515 |
</a>
|
516 |
</li>
|
517 |
<li class="with-checkbox row select-net"> |
518 |
<h3 class="net-name"> |
519 |
<span class="net-icons"> |
520 |
<span class="snf-network-full"></span> |
521 |
</span>
|
522 |
Private Network 1 |
523 |
</h3>
|
524 |
<a href="" class="check"> |
525 |
<span class="snf-checkbox-unchecked"></span> |
526 |
</a>
|
527 |
</li>
|
528 |
<li class="with-checkbox row select-net"> |
529 |
<h3 class="net-name"> |
530 |
<span class="net-icons"> |
531 |
<span class="snf-network-full"></span> |
532 |
</span>
|
533 |
Private Network 2 |
534 |
</h3>
|
535 |
<a href="" class="check"> |
536 |
<span class="snf-checkbox-unchecked"></span> |
537 |
</a>
|
538 |
</li>
|
539 |
</ul>
|
540 |
</div>
|
541 |
<div class="tags-area area"> |
542 |
<div class="row"> |
543 |
<h2>Tags</h2> |
544 |
<p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p> |
545 |
<ul>
|
546 |
<li>
|
547 |
<h3>My tags</h3> |
548 |
<span>select</span> |
549 |
</li>
|
550 |
<li class="with-checkbox"> |
551 |
<h3>
|
552 |
<span class="tag-demo tag4"></span> |
553 |
Operating system |
554 |
</h3>
|
555 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
556 |
</li>
|
557 |
<li class="with-checkbox"> |
558 |
<h3>
|
559 |
<span class="tag-demo tag5"></span> |
560 |
Pirate PC1 |
561 |
</h3>
|
562 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
563 |
</li>
|
564 |
<li class="with-checkbox"> |
565 |
<h3>
|
566 |
<span class="tag-demo tag6"></span> |
567 |
Pirate PC1 |
568 |
</h3>
|
569 |
<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a> |
570 |
</li>
|
571 |
</ul>
|
572 |
<div ><a class="btn5 show-add-tag wrap-a" href="" id="show-add-tag">add new Tag</a></div> |
573 |
<div class="snf-color-picker"> |
574 |
<form action="#" method="post"> |
575 |
<div id="picker-1"> |
576 |
<div class="farbtastic"> |
577 |
<div class="color" style="background-color: rgb(255, 0, 21);"></div> |
578 |
<div class="wheel"></div> |
579 |
<div class="overlay"></div> |
580 |
<div class="h-marker marker" style="left: 90px; top: 13px;"></div> |
581 |
<div class="sl-marker marker" style="left: 87px; top: 114px;"></div> |
582 |
</div>
|
583 |
</div>
|
584 |
<div class="form-item"> |
585 |
<input type="text" id="color-1" class="color-preview" name="color" value="#16C1E9" disabled |
586 |
<span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span> |
587 |
</div>
|
588 |
</form>
|
589 |
<div class="btns"> |
590 |
<a class="btn5 wrap-a" href="">OK</a> |
591 |
<a class="btn5 hide-add-tag wrap-a" href="">CANCEL</a> |
592 |
</div>
|
593 |
<a href="" id="hide-add-tag-dummy" style="position:relative;top:50px"> </a> |
594 |
</div>
|
595 |
</div>
|
596 |
</div>
|
597 |
</div>
|
598 |
</div>
|
599 |
<!-- end step 3 --> </div> |
600 |
<div class="step step-4" id="step-4" data-step=4> |
601 |
<div class="summary"> |
602 |
<div class="row"> |
603 |
<div class="wrap"> |
604 |
<dl>
|
605 |
<dt><span class="snf-pc-full snf-font"></span>Machine name</dt> |
606 |
<dd>handsome frank</dd> |
607 |
</dl>
|
608 |
</div>
|
609 |
</div>
|
610 |
<div class="row"> |
611 |
<div class="wrap"> |
612 |
<dl>
|
613 |
<dt>Image</dt> |
614 |
<dd>Fedora</dd> |
615 |
<dt>Name</dt> |
616 |
<dd>Debian Base</dd> |
617 |
<dt>Desciption</dt> |
618 |
<dd>open suse description open suse description open suse description open suse description open suse description</dd> |
619 |
<dt>os</dt> |
620 |
<dd>Debian</dd> |
621 |
<dt>Size</dt> |
622 |
<dd>10.4GB</dd> |
623 |
<dt>GUI</dt> |
624 |
<dd>No GUI</dd> |
625 |
<dt>Kernel</dt> |
626 |
<dd>2.3.4</dd> |
627 |
</dl>
|
628 |
</div>
|
629 |
</div>
|
630 |
<div class="row"> |
631 |
<div class="wrap"> |
632 |
<h2>Flavor</h2> |
633 |
<dl>
|
634 |
<dt><span class="snf-chip-outline snf-font"></span>CPUs</dt> |
635 |
<dd>4x</dd> |
636 |
<dt><span class="snf-ram-outline snf-font"></span>Memory</dt> |
637 |
<dd>512 MB</dd> |
638 |
<dt><span class="snf-volume-outline snf-font"></span>Disk</dt> |
639 |
<dd>4GB</dd> |
640 |
<dt><span class="snf-volume-outline snf-font"></span>Storage Type</dt> |
641 |
<dd>DRBD</dd> |
642 |
</dl>
|
643 |
</div>
|
644 |
</div>
|
645 |
<div class="row"> |
646 |
<div class="wrap"> |
647 |
<dl>
|
648 |
<dt>Machine Tags</dt> |
649 |
<dd>Database server</dd> |
650 |
<dt>SSH Keys</dt> |
651 |
<dd>
|
652 |
my public key 1<br>
|
653 |
my public key 3<br>
|
654 |
</dd>
|
655 |
<dt>IPs</dt> |
656 |
<dd>192.168.1.3<br>192.168.1.3</dd> |
657 |
<dt>Private networks</dt> |
658 |
<dd>No private networks selected</dd> |
659 |
</dl>
|
660 |
</div>
|
661 |
</div>
|
662 |
</div>
|
663 |
</div>
|
664 |
</div>
|
665 |
</div>
|
666 |
<div class="bottom"> |
667 |
<div class="row"> |
668 |
<a href="" class="nav prev el3"><span>CANCEL</span></a> |
669 |
<a href="" class="nav next" data-step="1" data-next="el2"><span>NEXT</span></a> |
670 |
</div>
|
671 |
</div>
|
672 |
</div>
|
673 |
</section>
|
674 |
<section class="overlay-area-reveal"> |
675 |
<div id="start-confirm" class="reveal-modal medium"> |
676 |
<p class="message-forimg">Are you sure you want to turn on your machine?</p> |
677 |
<p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p> |
678 |
<a class="close-reveal-modal" title="close window">x</a> |
679 |
</div>
|
680 |
<div id="reboot-confirm" class="reveal-modal medium"> |
681 |
<p class="message-forimg">Are you sure you want to reboot your machine?</p> |
682 |
<p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p> |
683 |
<a class="close-reveal-modal" title="close window">x</a> |
684 |
</div>
|
685 |
<div id="shutdown-confirm" class="reveal-modal medium"> |
686 |
<p class="message-forimg">Are you sure you want to shutdown your machine?</p> |
687 |
<p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p> |
688 |
<a class="close-reveal-modal" title="close window">x</a> |
689 |
</div>
|
690 |
<div id="destroy-vm-confirm" class="reveal-modal medium"> |
691 |
<p class="message-forimg">Are you sure you want to destroy your machine?</p> |
692 |
<p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p> |
693 |
<a class="close-reveal-modal" title="close window">x</a> |
694 |
</div>
|
695 |
<div id="vm-connect" class="reveal-modal medium"> |
696 |
<p>A direct connection to this machine can be established using the <a href=​"http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell" target=​"_blank">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p> |
697 |
<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p> |
698 |
|
699 |
<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p> |
700 |
<a class="close-reveal-modal" title="close window">x</a> |
701 |
</div>
|
702 |
<div id="attach-volume" class="reveal-modal medium list-availables"> |
703 |
<span>Available volumes:</span> |
704 |
<ul>
|
705 |
<li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-volume-full"></span><span class="name">volume name</span><span class="numeric-data">10 GB</span><span>[Archipelago]</span></li> |
706 |
<li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-volume-full"></span><span class="name">volume name</span><span class="numeric-data">25 GB</span><span>[DRBD]</span></li> |
707 |
</ul>
|
708 |
<p class="buttons"> |
709 |
<a href="" class="btn1 wrap-a ok">OK</a> |
710 |
<a href="" class="btn1 wrap-a cancel">Cancel</a> |
711 |
</p>
|
712 |
</div>
|
713 |
<div id="detach-volume" class="reveal-modal medium list-availables remove"> |
714 |
<p>Are you sure you want to detach this volume from your machine</p> |
715 |
<p class="buttons"> |
716 |
<a href="" class="btn1 wrap-a ok">OK</a> |
717 |
<a href="" class="btn1 wrap-a cancel">Cancel</a> |
718 |
</p>
|
719 |
<a class="close-reveal-modal" title="close window">x</a> |
720 |
</div>
|
721 |
<div id="connect-to-network" class="reveal-modal medium list-availables"> |
722 |
<span>Available networks:</span> |
723 |
<ul>
|
724 |
<li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-network-full"></span><span class="name">network name</span><span>other data</span></li> |
725 |
<li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-network-full"></span><span class="name">network name</span><span>connected machines: 10</span></li> |
726 |
</ul>
|
727 |
<p class="buttons"> |
728 |
<a href="" class="btn1 wrap-a ok">OK</a> |
729 |
<a href="" class="btn1 wrap-a ok">Cancel</a> |
730 |
</p>
|
731 |
</div>
|
732 |
<div id="disconnect-from-network" class="reveal-modal medium list-availables remove"> |
733 |
<p>Are you sure you want to disconnect this IP from your machine?</p> |
734 |
<p class="buttons"> |
735 |
<a href="" class="btn1 wrap-a ok">OK</a> |
736 |
<a href="" class="btn1 wrap-a cancel">Cancel</a> |
737 |
</p>
|
738 |
<a class="close-reveal-modal" title="close window">x</a> |
739 |
</div>
|
740 |
</section>
|
741 |
<section class="actions-bar clearfix"> |
742 |
<h2><a href="vm_list.html">Virtual Machines</a> > My Awesome Network</h2> |
743 |
<div class="rt-actions"> |
744 |
<a href="" class="single current" title="single view"></a> |
745 |
<a href="vm_list.html" class="grid" title="grid view"><span class="snf-gridview"></span></a> |
746 |
<a href="vm_list.html" class="list" title="list view"><span class="snf-listview "></span></a> |
747 |
</div>
|
748 |
<div class="filter-menu"> |
749 |
<a class="filter" href="">Filter</a> |
750 |
<ul class="options"> |
751 |
<li><a href=""> set an option</a></li> |
752 |
<li><a href=""> set an option</a></li> |
753 |
<li><a href=""> set an option</a></li> |
754 |
<li><a href=""> set an option</a></li> |
755 |
</ul>
|
756 |
</div>
|
757 |
<div id="hd-search" class="hd-search"> |
758 |
<form>
|
759 |
<span class="hd-icon-search snf-search"></span> |
760 |
<input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> |
761 |
</form>
|
762 |
</div>
|
763 |
</section>
|
764 |
<div class="main row"> |
765 |
<div class="vm details running"> |
766 |
<a href="" class="toggle-lt-bar">...</a> |
767 |
<div class="lt-bar"> |
768 |
<div class="scroll-wrap scroll-pane-arrows "> |
769 |
<ul class="items-list "> |
770 |
<li data-status="add-new" class="add-new" data-overlay-id="vm-wizard"> |
771 |
<div class="container" > |
772 |
<div class="check"></div> |
773 |
<div class="img-wrap"> |
774 |
<span class="snf-pc-full snf-font"></span> |
775 |
<span class="os symbol">+</span> |
776 |
</div>
|
777 |
<h4>New Machine</h4> |
778 |
</div>
|
779 |
</li>
|
780 |
<li data-status="rebooting" class="rebooting"> |
781 |
<a href="" class="btn5 temp">animation</a> |
782 |
<div class="more"> |
783 |
<div class="clearfix"> |
784 |
<div class="col lt"> |
785 |
<ul>
|
786 |
<li><a href="" class="start">Start</a></li> |
787 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
788 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
789 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
790 |
<li><a href="">Option i</a></li> |
791 |
</ul>
|
792 |
</div>
|
793 |
<div class="col rt"> |
794 |
<ul>
|
795 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
796 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
797 |
</ul>
|
798 |
</div>
|
799 |
</div>
|
800 |
<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div> |
801 |
</div>
|
802 |
<div class="container"> |
803 |
<div class="check"> |
804 |
<span class="snf-checkbox-unchecked"></span> |
805 |
</div>
|
806 |
<div class="img-wrap"> |
807 |
<span class="snf-pc-full snf-font"></span> |
808 |
<span class="os kubuntu">kubuntu</span> |
809 |
</div>
|
810 |
<h4>vm name 1 really large name vm name vm 1 really large name vm</h4> |
811 |
<div class="actions"> |
812 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
813 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
814 |
</div>
|
815 |
<div class= "status"> |
816 |
<span class="state">REBOOTING</span> |
817 |
</div>
|
818 |
<div class="tags"> |
819 |
<a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1"> </a> |
820 |
<a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2"> </a> |
821 |
</div>
|
822 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
823 |
</div>
|
824 |
</li>
|
825 |
<li data-status="starting" class="starting"> |
826 |
<div class="more"> |
827 |
<div class="clearfix"> |
828 |
<div class="col lt"> |
829 |
<ul>
|
830 |
<li><a href="" class="start">Start</a></li> |
831 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
832 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
833 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
834 |
<li><a href="">Option i</a></li> |
835 |
</ul>
|
836 |
</div>
|
837 |
<div class="col rt"> |
838 |
<ul>
|
839 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
840 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
841 |
</ul>
|
842 |
</div>
|
843 |
</div>
|
844 |
<div class="name">vm name 1 </div> |
845 |
</div>
|
846 |
<div class="container"> |
847 |
<div class="check"> |
848 |
<span class="snf-checkbox-unchecked"></span> |
849 |
</div>
|
850 |
<div class="img-wrap"> |
851 |
<span class="snf-pc-full snf-font"></span> |
852 |
<span class="os kubuntu">kubuntu</span> |
853 |
</div>
|
854 |
<h4>vm name 1 really large name vm name vm 1 really large name vm</h4> |
855 |
<div class="actions"> |
856 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
857 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
858 |
</div>
|
859 |
<div class= "status"> |
860 |
<span class="state">STARTING</span> |
861 |
</div>
|
862 |
<div class="tags"> |
863 |
</div>
|
864 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
865 |
</div>
|
866 |
</li>
|
867 |
<li data-status="shutting" class="shutting"> |
868 |
<div class="more"> |
869 |
<div class="clearfix"> |
870 |
<div class="col lt"> |
871 |
<ul>
|
872 |
<li><a href="" class="start">Start</a></li> |
873 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
874 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
875 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
876 |
<li><a href="">Option i</a></li> |
877 |
</ul>
|
878 |
</div>
|
879 |
<div class="col rt"> |
880 |
<ul>
|
881 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
882 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
883 |
</ul>
|
884 |
</div>
|
885 |
</div>
|
886 |
<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div> |
887 |
</div>
|
888 |
<div class="container"> |
889 |
<div class="check"> |
890 |
<span class="snf-checkbox-unchecked"></span> |
891 |
</div>
|
892 |
<div class="img-wrap"> |
893 |
<div class="img running"> |
894 |
<span class="snf-pc-full snf-font"></span> |
895 |
<span class="os kubuntu">kubuntu</span> |
896 |
</div>
|
897 |
</div>
|
898 |
<h4>short name</h4> |
899 |
<div class="actions"> |
900 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
901 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
902 |
</div>
|
903 |
<div class= "status"> |
904 |
<span class="state">SHUTTING DOWN</span> |
905 |
</div>
|
906 |
<div class="tags"> |
907 |
<a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1"> </a> |
908 |
<a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2"> </a> |
909 |
</div>
|
910 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
911 |
</div>
|
912 |
</li>
|
913 |
<li data-status="running" class="running"> |
914 |
<div class="more"> |
915 |
<div class="clearfix"> |
916 |
<div class="col lt"> |
917 |
<ul>
|
918 |
<li><a href="" class="start">Start</a></li> |
919 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
920 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
921 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
922 |
<li><a href="">Option i</a></li> |
923 |
</ul>
|
924 |
</div>
|
925 |
<div class="col rt"> |
926 |
<ul>
|
927 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
928 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
929 |
</ul>
|
930 |
</div>
|
931 |
</div>
|
932 |
<div class="name">short name</div> |
933 |
</div>
|
934 |
<div class="container"> |
935 |
<div class="check"> |
936 |
<span class="snf-checkbox-unchecked"></span> |
937 |
</div>
|
938 |
<div class="img-wrap"> |
939 |
<span class="snf-pc-full snf-font"></span> |
940 |
<span class="os kubuntu">kubuntu</span> |
941 |
</div>
|
942 |
<h4>short name</h4> |
943 |
<div class="actions"> |
944 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
945 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
946 |
</div>
|
947 |
|
948 |
<div class= "status"> |
949 |
<span class="state"></span> |
950 |
</div>
|
951 |
<div class="tags"> |
952 |
<a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1"> </a> |
953 |
<a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2"> </a> |
954 |
<a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip2"> </a> |
955 |
</div>
|
956 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
957 |
</div>
|
958 |
</li>
|
959 |
<li data-status="off" class="off"> |
960 |
<div class="more"> |
961 |
<div class="clearfix"> |
962 |
<div class="col lt"> |
963 |
<ul>
|
964 |
<li><a href="" class="start">Start</a></li> |
965 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
966 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
967 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
968 |
<li><a href="">Option i</a></li> |
969 |
</ul>
|
970 |
</div>
|
971 |
<div class="col rt"> |
972 |
<ul>
|
973 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
974 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
975 |
</ul>
|
976 |
</div>
|
977 |
</div>
|
978 |
<div class="name">short name</div> |
979 |
</div>
|
980 |
<div class="container"> |
981 |
<div class="check"> |
982 |
<span class="snf-checkbox-unchecked"></span> |
983 |
</div>
|
984 |
<div class="img-wrap"> |
985 |
<span class="snf-pc-full snf-font"></span> |
986 |
<span class="os fedora">fedora</span> |
987 |
</div>
|
988 |
<h4>short name</h4> |
989 |
<div class="actions"> |
990 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
991 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
992 |
</div>
|
993 |
<div class= "status"> |
994 |
</div>
|
995 |
<div class="tags"> |
996 |
</div>
|
997 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
998 |
</div>
|
999 |
</li>
|
1000 |
<li data-status="error" class="error"> |
1001 |
<div class="more"> |
1002 |
<div class="clearfix"> |
1003 |
<div class="col lt"> |
1004 |
<ul>
|
1005 |
<li><a href="" class="start">Start</a></li> |
1006 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
1007 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
1008 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
1009 |
<li><a href="">Option i</a></li> |
1010 |
</ul>
|
1011 |
</div>
|
1012 |
<div class="col rt"> |
1013 |
<ul>
|
1014 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
1015 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
1016 |
</ul>
|
1017 |
</div>
|
1018 |
</div>
|
1019 |
<div class="name">vm name 1</div> |
1020 |
</div>
|
1021 |
<div class="container"> |
1022 |
<div class="check"> |
1023 |
<span class="snf-checkbox-unchecked"></span> |
1024 |
</div>
|
1025 |
<div class="img-wrap"> |
1026 |
<span class="snf-pc-full snf-font"></span> |
1027 |
<span class="os">unknown</span> |
1028 |
</div>
|
1029 |
<h4>short name</h4> |
1030 |
<div class="actions"> |
1031 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
1032 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
1033 |
</div>
|
1034 |
<div class="tags"> |
1035 |
</div>
|
1036 |
<div class= "status"> |
1037 |
<span class="state">ERROR</span> |
1038 |
<span class="logs">Image customization failed. Did not finish on time.</span> |
1039 |
</div>
|
1040 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
1041 |
</div>
|
1042 |
</li>
|
1043 |
<li data-status="running" class="running"> |
1044 |
<div class="more"> |
1045 |
<div class="clearfix"> |
1046 |
<div class="col lt"> |
1047 |
<ul>
|
1048 |
<li><a href="" class="start">Start</a></li> |
1049 |
<li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li> |
1050 |
<li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li> |
1051 |
<li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li> |
1052 |
<li><a href="">Option i</a></li> |
1053 |
</ul>
|
1054 |
</div>
|
1055 |
<div class="col rt"> |
1056 |
<ul>
|
1057 |
<li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li> |
1058 |
<li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li> |
1059 |
</ul>
|
1060 |
</div>
|
1061 |
</div>
|
1062 |
<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div> |
1063 |
</div>
|
1064 |
<div class="container"> |
1065 |
<div class="check"> |
1066 |
<span class="snf-checkbox-unchecked"></span> |
1067 |
</div>
|
1068 |
<div class="img-wrap"> |
1069 |
<span class="snf-pc-full snf-font"></span> |
1070 |
<span class="os fedora">fedora</span> |
1071 |
</div>
|
1072 |
<h4>vm name 1 really large name vm name vm 1 really large name vm</h4> |
1073 |
<div class="actions"> |
1074 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a> |
1075 |
<a href="vm_details.html" title="view vm details" class="snf-info-outline"></a> |
1076 |
</div>
|
1077 |
<div class= "status"> |
1078 |
</div>
|
1079 |
<div class="tags"> |
1080 |
</div>
|
1081 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
1082 |
</div>
|
1083 |
</li>
|
1084 |
</ul>
|
1085 |
</div>
|
1086 |
</div>
|
1087 |
<section class="top"> |
1088 |
<div class="lt"> |
1089 |
<div class="img-wrap"> |
1090 |
<span class="snf-pc-full"></span> |
1091 |
<span class="os fedora">fedora</span> |
1092 |
</div>
|
1093 |
</div>
|
1094 |
<div class="rt"> |
1095 |
<div class="title"> |
1096 |
<h1>My Opensuse Desktop Server 1<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h1> |
1097 |
</div>
|
1098 |
<div class="actions"> |
1099 |
<ul>
|
1100 |
<li><a href="" data-reveal-id="start-confirm">Start</a></li> |
1101 |
<li><a href="" data-reveal-id="shutdown-confirm">Shutdown</a></li> |
1102 |
<li><a href="" data-reveal-id="reboot-confirm">Reboot</a></li> |
1103 |
<li><a href="" data-reveal-id="destroy-vm-confirm">Destroy</a></li> |
1104 |
</ul>
|
1105 |
</div>
|
1106 |
<div class="tabs"> |
1107 |
<ul>
|
1108 |
<li><a href="#info" class="active"><span class="snf-info-outline"></span></a></li> |
1109 |
<li><a href="#disk-connected"><span class="snf-volume-outline"></span></a></li> |
1110 |
<li><a href="#network-connected"><span class="snf-network-outline snf-font"></span></a></li> |
1111 |
</ul>
|
1112 |
</div>
|
1113 |
</div>
|
1114 |
</section>
|
1115 |
<section class="content info-simple" id="info"> |
1116 |
<section class="info-block"> |
1117 |
<h2>info</h2> |
1118 |
<dl>
|
1119 |
<dt><span class="snf-font snf-pc-full"></span>Name</dt> |
1120 |
<dd>
|
1121 |
<div class="editable"> |
1122 |
<span class="input-txt">My Opensuse Desktop Server 1</span> |
1123 |
<input type="text"> |
1124 |
<span class="editbuttons"> |
1125 |
<a href="#" class="edit"><span class="snf-edit"></span></a> |
1126 |
<a href="#" class="save"><span class="snf-ok-sign"></span></a> |
1127 |
<a href="#" class="cancel"><span class="snf-cancel-circled"></span></a> |
1128 |
</span>
|
1129 |
</div>
|
1130 |
</dd>
|
1131 |
<dt><span class="snf-font snf-dashboard-outline"></span>Assigned Project</dt> |
1132 |
<dd>Basic Project</dd> |
1133 |
<dt><span class="snf-chip-outline snf-font"></span>CPUs</dt> |
1134 |
<dd>4</dd> |
1135 |
<dt><span class="snf-ram-full snf-font"></span>RAM</dt> |
1136 |
<dd>512 MB</dd> |
1137 |
<dt><span class="snf-volume-full snf-font"></span>System Disk Size</dt> |
1138 |
<dd>4GB</dd> |
1139 |
<dt><span class="snf-volume-full snf-font"></span>Storage Type</dt> |
1140 |
<dd>Archipelago</dd> |
1141 |
<dt><span class="snf-image-full snf-font"></span>Image Name</dt> |
1142 |
<dd>Fedora</dd> |
1143 |
<dt><span class="snf-image-full snf-font"></span>Image Size</dt> |
1144 |
<dd>3.68 GB</dd> |
1145 |
<dt><span class="snf-nic-full snf-font"></span>IPv4</dt> |
1146 |
<dd>83.212.96.152</dd> |
1147 |
<dt><span class="snf-nic-full snf-font"></span>IPv4</dt> |
1148 |
<dd>83.212.96.153</dd> |
1149 |
<dt><span class="snf-nic-full snf-font"></span>IPv6</dt> |
1150 |
<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd> |
1151 |
</dl>
|
1152 |
</section>
|
1153 |
<section class="info-block tags"> |
1154 |
<h2>tags</h2> |
1155 |
<div class="tag-data"> |
1156 |
<a href="" class="tag tag1 has-tip" data-tooltip="" title="Tooltip1"> </a> |
1157 |
<span>Tag Name</span> |
1158 |
<a class="delete"><span class="snf-trash-outline"></span></a> |
1159 |
</div>
|
1160 |
<div class="tag-data"> |
1161 |
<a href="" class="tag tag2 has-tip" data-tooltip="" title="Tooltip1"> </a> |
1162 |
<span>Tag Name</span> |
1163 |
<a class="delete"><span class="snf-trash-outline"></span></a> |
1164 |
</div>
|
1165 |
<div class="tag-data"> |
1166 |
<a href="" class="tag tag3 has-tip" data-tooltip="" title="Tooltip1"> </a> |
1167 |
<span>Tag Name</span> |
1168 |
<a class="delete"><span class="snf-trash-outline"></span></a> |
1169 |
</div>
|
1170 |
<div class="buttons"> |
1171 |
<a href="" class="btn1 show-add-tag wrap-a" id="show-add-tag">add new tag</a> |
1172 |
</div>
|
1173 |
<div class="snf-color-picker"> |
1174 |
<h3>Select color:</h3> |
1175 |
<form action="#" method="post"> |
1176 |
<div id="picker-2"> |
1177 |
<div class="farbtastic"> |
1178 |
<div class="color" style="background-color: rgb(255, 0, 21);"></div> |
1179 |
<div class="wheel"></div> |
1180 |
<div class="overlay"></div> |
1181 |
<div class="h-marker marker" style="left: 90px; top: 13px;"></div> |
1182 |
<div class="sl-marker marker" style="left: 87px; top: 114px;"></div> |
1183 |
</div>
|
1184 |
</div>
|
1185 |
<div class="form-item"> |
1186 |
<input type="text" id="color-2" class="color-preview "name="color" value="#16C1E9" disabled |
1187 |
<span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span> |
1188 |
</div>
|
1189 |
</form>
|
1190 |
<div class="btns"> |
1191 |
<a class="btn1 wrap-a" href="">OK</a> |
1192 |
<a class="btn1 hide-add-tag wrap-a" href="">CANCEL</a> |
1193 |
</div>
|
1194 |
</div>
|
1195 |
</section>
|
1196 |
<section class="info-block charts"> |
1197 |
<div>
|
1198 |
<h2>CPU utilization</h2> |
1199 |
<div class="graph_container"> |
1200 |
<img src="images/cpu-ts.png" alt="CPU utilization graph"> |
1201 |
</div>
|
1202 |
</div>
|
1203 |
<div>
|
1204 |
<h2>Network utilization</h2> |
1205 |
<div class="graph_container"> |
1206 |
<img src="images/net-ts.png" alt="network utilization graph"> |
1207 |
</div>
|
1208 |
</div>
|
1209 |
</section>
|
1210 |
</section>
|
1211 |
<section class="content connected network" id="network-connected" style="display:none"> |
1212 |
<section class="item running"> |
1213 |
<div class="what"> |
1214 |
<div class="img-wrap"> |
1215 |
<span class="snf-network-full snf-font"></span> |
1216 |
</div>
|
1217 |
<h4>Public Network</h4> |
1218 |
</div>
|
1219 |
<div class="clearfix"> |
1220 |
<ul class="connections"> |
1221 |
<li>
|
1222 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1223 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1224 |
<div class="data"> |
1225 |
<ul>
|
1226 |
<li>
|
1227 |
<h5 class="ip-data">IPv4</h5> |
1228 |
<p>83.212.96.12</p> |
1229 |
</li>
|
1230 |
</ul>
|
1231 |
</div>
|
1232 |
</li>
|
1233 |
<li>
|
1234 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1235 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1236 |
<div class="data"> |
1237 |
<ul>
|
1238 |
<li>
|
1239 |
<h5 class="ip-data">IPv4</h5> |
1240 |
<p>83.212.96.12</p> |
1241 |
</li>
|
1242 |
</ul>
|
1243 |
</div>
|
1244 |
</li>
|
1245 |
<li>
|
1246 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1247 |
<div class="data"> |
1248 |
<ul>
|
1249 |
<li>
|
1250 |
<h5 class="ip-data">IPv6</h5> |
1251 |
<p>2001:648:2ffc:1112:a80c:eaff:fe34:1234</p> |
1252 |
</li>
|
1253 |
</ul>
|
1254 |
</div>
|
1255 |
</li>
|
1256 |
<div class="firewall" data-firewall="fully"> |
1257 |
<p>Firewall <em>on</em></p> |
1258 |
<div class="more"> |
1259 |
<p class="fully"> |
1260 |
<a href="">Fully protected mode<span class="snf-radio-checked"></span></a> |
1261 |
</p>
|
1262 |
<p class="basic"> |
1263 |
<a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a> |
1264 |
</p>
|
1265 |
<p class="unprotected"> |
1266 |
<a href="">Unprotected mode<span class="snf-radio-unchecked"></span></a> |
1267 |
</p>
|
1268 |
</div>
|
1269 |
</div>
|
1270 |
</ul>
|
1271 |
</div>
|
1272 |
</section>
|
1273 |
<section class="item error"> |
1274 |
<div class="what"> |
1275 |
<div class="img-wrap"> |
1276 |
<span class="snf-network-full snf-font"></span> |
1277 |
</div>
|
1278 |
<h4>My Awesome Network<span class="status">Error</span></h4> |
1279 |
</div>
|
1280 |
<div class="clearfix"> |
1281 |
<ul class="connections"> |
1282 |
<li>
|
1283 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1284 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1285 |
<div class="data"> |
1286 |
<ul>
|
1287 |
<li>
|
1288 |
<h5 class="ip-data">ipv6</h5> |
1289 |
<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p> |
1290 |
</li>
|
1291 |
</ul>
|
1292 |
</div>
|
1293 |
</li>
|
1294 |
<li>
|
1295 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1296 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1297 |
<div class="data"> |
1298 |
<ul>
|
1299 |
<li>
|
1300 |
<h5 class="ip-data">ipv6</h5> |
1301 |
<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p> |
1302 |
</li>
|
1303 |
</ul>
|
1304 |
</div>
|
1305 |
</li>
|
1306 |
<li>
|
1307 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1308 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1309 |
<div class="data"> |
1310 |
<ul>
|
1311 |
<li>
|
1312 |
<h5 class="ip-data">ipv6</h5> |
1313 |
<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p> |
1314 |
</li>
|
1315 |
</ul>
|
1316 |
</div>
|
1317 |
</li>
|
1318 |
</ul>
|
1319 |
|
1320 |
</div>
|
1321 |
</section>
|
1322 |
<section class="item running"> |
1323 |
<div class="what"> |
1324 |
<div class="img-wrap"> |
1325 |
<span class="snf-network-full snf-font"></span> |
1326 |
</div>
|
1327 |
<h4>My Private Network</h4> |
1328 |
</div>
|
1329 |
<div class="clearfix"> |
1330 |
<ul class="connections"> |
1331 |
<li>
|
1332 |
<a href="#" class="act" data-reveal-id="disconnect-from-network"> </a> |
1333 |
<div class="icon"><span class="snf-nic-full"></span></div> |
1334 |
<div class="data"> |
1335 |
<ul>
|
1336 |
<li>
|
1337 |
<h5 class="ip-data">ipv6</h5> |
1338 |
<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p> |
1339 |
</li>
|
1340 |
</ul>
|
1341 |
</div>
|
1342 |
</li>
|
1343 |
</ul>
|
1344 |
|
1345 |
</div>
|
1346 |
</section>
|
1347 |
<section class="connect-new network"> |
1348 |
<div class="img-wrap"> |
1349 |
<a href="" data-reveal-id="connect-to-network"> |
1350 |
<span class="snf-network-full snf-font"></span> |
1351 |
</a>
|
1352 |
</div>
|
1353 |
<p><a href="" data-reveal-id="connect-to-network">Connect to Network</a></p> |
1354 |
</section>
|
1355 |
</section>
|
1356 |
<section class="content connected disk" id="disk-connected" style="display:none"> |
1357 |
<section class="item running"> |
1358 |
<div class="what"> |
1359 |
<div class="img-wrap"> |
1360 |
<span class="snf-volume-full snf-font"></span> |
1361 |
</div>
|
1362 |
<h4>Volume Name</h4> |
1363 |
</div>
|
1364 |
<div class="clearfix"> |
1365 |
<ul class="connections"> |
1366 |
<li>
|
1367 |
<a href="#" class="act" data-reveal-id="detach-volume"> </a> |
1368 |
<div class="icon"></div> |
1369 |
<div class="data"> |
1370 |
<ul>
|
1371 |
<li>
|
1372 |
<h5 class="volume-data">Size</h5> |
1373 |
<p>10 GB</p> |
1374 |
</li>
|
1375 |
<li>
|
1376 |
<h5 class="volume-data">Storage Type</h5> |
1377 |
<p>Archipelago</p> |
1378 |
</li>
|
1379 |
</ul>
|
1380 |
</div>
|
1381 |
</li>
|
1382 |
</ul>
|
1383 |
</div>
|
1384 |
</section>
|
1385 |
<section class="item error"> |
1386 |
<div class="what"> |
1387 |
<div class="img-wrap"> |
1388 |
<span class="snf-volume-full snf-font"></span> |
1389 |
</div>
|
1390 |
<h4>Another Volume<span class="status">Error</span></h4> |
1391 |
</div>
|
1392 |
<div class="clearfix"> |
1393 |
<ul class="connections"> |
1394 |
<li>
|
1395 |
<a href="#" class="act" data-reveal-id="detach-volume"> </a> |
1396 |
<div class="icon"></div> |
1397 |
<div class="data"> |
1398 |
<ul>
|
1399 |
<li>
|
1400 |
<h5 class="volume-data">Size</h5> |
1401 |
<p>20 GB</p> |
1402 |
</li>
|
1403 |
<li>
|
1404 |
<h5 class="volume-data">Storage Type</h5> |
1405 |
<p>Archipelago</p> |
1406 |
</li>
|
1407 |
</ul>
|
1408 |
</div>
|
1409 |
</li>
|
1410 |
</ul>
|
1411 |
|
1412 |
</div>
|
1413 |
</section>
|
1414 |
<section class="connect-new disk"> |
1415 |
<div class="img-wrap"> |
1416 |
<a href="" data-reveal-id="attach-volume"> |
1417 |
<span class="snf-volume-full snf-font"></span> |
1418 |
</a>
|
1419 |
</div>
|
1420 |
<p><a href="" data-reveal-id="attach-volume">Attach Volume</a></p> |
1421 |
</section>
|
1422 |
</section>
|
1423 |
<div class="placeholder"></div> |
1424 |
</div>
|
1425 |
</div>
|
1426 |
</div>
|
1427 |
<script src="javascripts/vendor/jquery.js"></script> |
1428 |
<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script> |
1429 |
<script src="javascripts/underscore-min.js"></script> |
1430 |
<script src="javascripts/foundation/foundation.js"></script> |
1431 |
<script src="javascripts/foundation/foundation.alerts.js"></script> |
1432 |
|
1433 |
<script src="javascripts/foundation/foundation.clearing.js"></script> |
1434 |
|
1435 |
<script src="javascripts/foundation/foundation.cookie.js"></script> |
1436 |
|
1437 |
<script src="javascripts/foundation/foundation.dropdown.js"></script> |
1438 |
|
1439 |
<script src="javascripts/foundation/foundation.forms.js"></script> |
1440 |
|
1441 |
<script src="javascripts/foundation/foundation.joyride.js"></script> |
1442 |
|
1443 |
<script src="javascripts/foundation/foundation.magellan.js"></script> |
1444 |
|
1445 |
<script src="javascripts/foundation/foundation.orbit.js"></script> |
1446 |
|
1447 |
<script src="javascripts/foundation/foundation.placeholder.js"></script> |
1448 |
|
1449 |
<script src="javascripts/foundation/foundation.reveal.js"></script> |
1450 |
|
1451 |
<script src="javascripts/foundation/foundation.section.js"></script> |
1452 |
|
1453 |
<script src="javascripts/foundation/foundation.tooltips.js"></script> |
1454 |
<script src="javascripts/foundation/foundation.topbar.js"></script> |
1455 |
<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script> |
1456 |
<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script> |
1457 |
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script> |
1458 |
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script> |
1459 |
<!-- dropzone.js used for drag and drop files to upload them -->
|
1460 |
<script type="text/javascript" src="javascripts/dropzone.js"></script> |
1461 |
<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script> |
1462 |
<!-- fabrastic.js used for the color picker -->
|
1463 |
<script type="text/javascript" src="javascripts/farbtastic.js"></script> |
1464 |
<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script> |
1465 |
<script src="javascripts/common.js"></script> |
1466 |
|
1467 |
<script type="text/javascript" src="javascripts/wizard.js"></script> |
1468 |
<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script> |
1469 |
<script>
|
1470 |
$(document).foundation();
|
1471 |
</script>
|
1472 |
</body>
|
1473 |
</html>
|