Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ 1b2adfd1

History | View | Annotate | Download (32.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&amp;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-full"></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_list.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="More"><span class="snf-plus-outline"></span></a></li>
30
                        </ul>
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="overlay-wrapper">
53
                <section class="overlay-area-reveal">
54
                        <div id="start-confirm" class="reveal-modal medium">
55
                                <p class="message-forimg">Are you sure you want to turn on your machine?</p>
56
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
57
                                <a class="close-reveal-modal" title="close window">X</a>
58
                        </div>
59
                        <div id="reboot-confirm" class="reveal-modal medium">
60
                                <p class="message-forimg">Are you sure you want to reboot your machine?</p>
61
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
62
                                <a class="close-reveal-modal" title="close window">X</a>
63
                        </div>
64
                        <div id="shutdown-confirm" class="reveal-modal medium">
65
                                <p class="message-forimg">Are you sure you want to shutdown your machine?</p>
66
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
67
                                <a class="close-reveal-modal" title="close window">X</a>
68
                        </div>
69
                        <div id="destroy-vm-confirm" class="reveal-modal medium">
70
                                <p class="message-forimg">Are you sure you want to destroy your machine?</p>
71
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
72
                                <a class="close-reveal-modal" title="close window">X</a>
73
                        </div>
74
                        <div id="vm-connect" class="reveal-modal medium">
75
                                <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>
76
                                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
77

    
78
                                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
79
                                <a class="close-reveal-modal" title="close window">&#215;</a>
80
                        </div>
81
                        <div id="attach-volume" class="reveal-modal medium list-availables">
82
                                <span>Available volumes:</span>
83
                                <ul>
84
                                        <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>
85
                                        <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>
86
                                </ul>
87
                                <p class="buttons">
88
                                        <a href="" class="btn1">OK</a>
89
                                        <a href="" class="btn1">Cancel</a>
90
                                </p>
91
                        </div>
92
                        <div id="detach-volume" class="reveal-modal medium list-availables">
93
                                <p>Are you sure you want to detach this volume from your machine</p>
94
                                <p class="buttons">
95
                                        <a href="" class="btn1">OK</a>
96
                                        <a href="" class="btn1">Cancel</a>
97
                                </p>
98
                        </div>
99
                        <div id="connect-to-network" class="reveal-modal medium list-availables">
100
                                <span>Available networks:</span>
101
                                <ul>
102
                                        <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>
103
                                        <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>
104
                                </ul>
105
                                <p class="buttons">
106
                                        <a href="" class="btn1">OK</a>
107
                                        <a href="" class="btn1">Cancel</a>
108
                                </p>
109
                        </div>
110
                        <div id="disconnect-from-network" class="reveal-modal medium list-availables">
111
                                <p>Are you sure you want to disconnect this IP from your machine?</p>
112
                                <p class="buttons">
113
                                        <a href="" class="btn1 disconnect">OK</a>
114
                                        <a href="" class="btn1">Cancel</a>
115
                                </p>
116
                        </div>
117
                </section>
118
                <section class="actions-bar clearfix">
119
                        <h2><a href="vm_list.html">Virtual Machines</a> > My Awesome Network</h2>
120
                        <div class="view-type">
121
                                <a href="vm_list.html" class="grid" title="grid view"><span class="snf-gridview"></span></a>
122
                                <a href="vm_list.html" class="list" title="list view"><span class="snf-listview "></span></a>
123
                                <a href="" class="single current" title="single view"></a>
124
                        </div>
125
                        <div class="filter-menu">
126
                                <a class="filter" href="">Filter</a>
127
                                <ul class="options">
128
                                        <li><a href=""> set an option</a></li>
129
                                        <li><a href=""> set an option</a></li>
130
                                        <li><a href=""> set an option</a></li>
131
                                        <li><a href=""> set an option</a></li>
132
                                </ul>
133
                        </div>
134
                        <div id="hd-search" class="hd-search">
135
                            <form>
136
                                        <span class="hd-icon-search snf-search"></span>
137
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
138
                            </form>
139
                        </div>
140
                </section>
141
                <div class="main row">
142
                        <div class="vm details running">
143
                                <a href="" class="toggle-lt-bar">...</a>
144
                                <div class="lt-bar">
145
                                        <div class="scroll-wrap">
146
                                                <ul class="items-list">
147
                                                        <li data-status="rebooting" class="rebooting">
148
                                                                <a href="" class="btn5 temp">animation</a>
149
                                                                <div class="more">
150
                                                                        <div class="clearfix">
151
                                                                                <div class="col lt">
152
                                                                                        <ul>
153
                                                                                                <li><a href="" class="start">Start</a></li>
154
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
155
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
156
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
157
                                                                                                 <li><a href="">Option i</a></li>
158
                                                                                        </ul>
159
                                                                                </div>
160
                                                                                <div class="col rt">
161
                                                                                        <ul>
162
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
163
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
164
                                                                                        </ul>
165
                                                                                </div>
166
                                                                        </div>
167
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
168
                                                                </div>
169
                                                                <div class="container">
170
                                                                        <div class="check">
171
                                                                                <span class="snf-checkbox-unchecked"></span>
172
                                                                        </div>
173
                                                                        <div class="img-wrap">
174
                                                                                <span class="snf-pc-full"></span>
175
                                                                                <span class="os kubuntu">kubuntu</span>
176
                                                                        </div>
177
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
178
                                                                        <div class="actions">
179
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
180
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
181
                                                                        </div>
182
                                                                        <div class= "status">
183
                                                                                <span class="state">REBOOTING</span>
184
                                                                        </div>
185
                                                                        <div class="tags">
186
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
187
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
188
                                                                        </div>
189
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
190
                                                                </div>
191
                                                        </li>
192
                                                        <li data-status="starting" class="starting">
193
                                                                <div class="more">
194
                                                                        <div class="clearfix">
195
                                                                                <div class="col lt">
196
                                                                                        <ul>
197
                                                                                                <li><a href=""   class="start">Start</a></li>
198
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
199
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
200
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
201
                                                                                                 <li><a href="">Option i</a></li>
202
                                                                                        </ul>
203
                                                                                </div>
204
                                                                                <div class="col rt">
205
                                                                                        <ul>
206
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
207
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
208
                                                                                        </ul>
209
                                                                                </div>
210
                                                                        </div>
211
                                                                        <div class="name">vm name 1 </div>
212
                                                                </div>
213
                                                                <div class="container">
214
                                                                        <div class="check">
215
                                                                                <span class="snf-checkbox-unchecked"></span>
216
                                                                        </div>
217
                                                                        <div class="img-wrap">
218
                                                                                <span class="snf-pc-full"></span>
219
                                                                                <span class="os kubuntu">kubuntu</span>
220
                                                                        </div>
221
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
222
                                                                        <div class="actions">
223
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
224
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
225
                                                                        </div>
226
                                                                        <div class= "status">
227
                                                                                <span class="state">STARTING</span>
228
                                                                        </div>
229
                                                                        <div class="tags">
230
                                                                        </div>
231
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
232
                                                                </div>
233
                                                        </li>
234
                                                        <li  data-status="shutting" class="shutting">
235
                                                                <div class="more">
236
                                                                        <div class="clearfix">
237
                                                                                <div class="col lt">
238
                                                                                        <ul>
239
                                                                                                <li><a href=""   class="start">Start</a></li>
240
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
241
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
242
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
243
                                                                                                 <li><a href="">Option i</a></li>
244
                                                                                        </ul>
245
                                                                                </div>
246
                                                                                <div class="col rt">
247
                                                                                        <ul>
248
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
249
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
250
                                                                                        </ul>
251
                                                                                </div>
252
                                                                        </div>
253
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
254
                                                                </div>
255
                                                                <div class="container">
256
                                                                        <div class="check">
257
                                                                                <span class="snf-checkbox-unchecked"></span>
258
                                                                        </div>
259
                                                                        <div class="img-wrap">
260
                                                                                <div class="img running">
261
                                                                                        <span class="snf-pc-full"></span>
262
                                                                                        <span class="os kubuntu">kubuntu</span>
263
                                                                                </div>
264
                                                                        </div>
265
                                                                        <h4>short name</h4>
266
                                                                        <div class="actions">
267
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
268
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
269
                                                                        </div>
270
                                                                        <div class= "status">
271
                                                                                <span class="state">SHUTTING DOWN</span>
272
                                                                        </div>
273
                                                                        <div class="tags">
274
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
275
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
276
                                                                        </div>
277
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
278
                                                                </div>
279
                                                        </li>
280
                                                         <li data-status="running" class="running">
281
                                                                <div class="more">
282
                                                                        <div class="clearfix">
283
                                                                                <div class="col lt">
284
                                                                                        <ul>
285
                                                                                                <li><a href=""   class="start">Start</a></li>
286
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
287
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
288
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
289
                                                                                                 <li><a href="">Option i</a></li>
290
                                                                                        </ul>
291
                                                                                </div>
292
                                                                                <div class="col rt">
293
                                                                                        <ul>
294
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
295
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
296
                                                                                        </ul>
297
                                                                                </div>
298
                                                                        </div>
299
                                                                        <div class="name">short name</div>
300
                                                                </div>
301
                                                                <div class="container">
302
                                                                        <div class="check">
303
                                                                                <span class="snf-checkbox-unchecked"></span>
304
                                                                        </div>
305
                                                                        <div class="img-wrap">
306
                                                                                <span class="snf-pc-full"></span>
307
                                                                                <span class="os kubuntu">kubuntu</span>
308
                                                                        </div>
309
                                                                        <h4>short name</h4>
310
                                                                        <div class="actions">
311
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
312
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
313
                                                                        </div>
314

    
315
                                                                        <div class= "status">
316
                                                                                <span class="state"></span>
317
                                                                        </div>
318
                                                                        <div class="tags">
319
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
320
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
321
                                                                                <a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
322
                                                                        </div>
323
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
324
                                                                </div>
325
                                                        </li>
326
                                                        <li data-status="off" class="off">
327
                                                                <div class="more">
328
                                                                        <div class="clearfix">
329
                                                                                <div class="col lt">
330
                                                                                        <ul>
331
                                                                                                <li><a href=""   class="start">Start</a></li>
332
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
333
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
334
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
335
                                                                                                 <li><a href="">Option i</a></li>
336
                                                                                        </ul>
337
                                                                                </div>
338
                                                                                <div class="col rt">
339
                                                                                        <ul>
340
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
341
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
342
                                                                                        </ul>
343
                                                                                </div>
344
                                                                        </div>
345
                                                                        <div class="name">short name</div>
346
                                                                </div>
347
                                                                <div class="container">
348
                                                                        <div class="check">
349
                                                                                <span class="snf-checkbox-unchecked"></span>
350
                                                                        </div>
351
                                                                        <div class="img-wrap">
352
                                                                                <span class="snf-pc-full"></span>
353
                                                                                <span class="os fedora">fedora</span>
354
                                                                        </div>
355
                                                                        <h4>short name</h4>
356
                                                                        <div class="actions">
357
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
358
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
359
                                                                        </div>
360
                                                                        <div class= "status">
361
                                                                        </div>
362
                                                                        <div class="tags">
363
                                                                        </div>
364
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
365
                                                                </div>
366
                                                        </li>
367
                                                        <li data-status="error" class="error">
368
                                                                <div class="more">
369
                                                                        <div class="clearfix">
370
                                                                                <div class="col lt">
371
                                                                                        <ul>
372
                                                                                                <li><a href=""   class="start">Start</a></li>
373
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
374
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
375
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
376
                                                                                                 <li><a href="">Option i</a></li>
377
                                                                                        </ul>
378
                                                                                </div>
379
                                                                                <div class="col rt">
380
                                                                                        <ul>
381
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
382
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
383
                                                                                        </ul>
384
                                                                                </div>
385
                                                                        </div>
386
                                                                        <div class="name">vm name 1</div>
387
                                                                </div>
388
                                                                <div class="container">
389
                                                                        <div class="check">
390
                                                                                <span class="snf-checkbox-unchecked"></span>
391
                                                                        </div>
392
                                                                        <div class="img-wrap">
393
                                                                                <span class="snf-pc-full"></span>
394
                                                                                <span class="os">unknown</span>
395
                                                                        </div>
396
                                                                        <h4>short name</h4>
397
                                                                        <div class="actions">
398
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
399
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
400
                                                                        </div>
401
                                                                        <div class="tags">
402
                                                                        </div>
403
                                                                        <div class= "status">
404
                                                                                <span class="state">ERROR</span>
405
                                                                                <span class="logs">Image customization failed. Did not finish on time.</span>
406
                                                                        </div>
407
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
408
                                                                </div>
409
                                                        </li>
410
                                                        <li data-status="running" class="running">
411
                                                                <div class="more">
412
                                                                        <div class="clearfix">
413
                                                                                <div class="col lt">
414
                                                                                        <ul>
415
                                                                                                <li><a href=""   class="start">Start</a></li>
416
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
417
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
418
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
419
                                                                                                 <li><a href="">Option i</a></li>
420
                                                                                        </ul>
421
                                                                                </div>
422
                                                                                <div class="col rt">
423
                                                                                        <ul>
424
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
425
                                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
426
                                                                                        </ul>
427
                                                                                </div>
428
                                                                        </div>
429
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
430
                                                                </div>
431
                                                                <div class="container">
432
                                                                        <div class="check">
433
                                                                                <span class="snf-checkbox-unchecked"></span>
434
                                                                        </div>
435
                                                                        <div class="img-wrap">
436
                                                                                <span class="snf-pc-full"></span>
437
                                                                                <span class="os fedora">fedora</span>
438
                                                                        </div>
439
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
440
                                                                        <div class="actions">
441
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
442
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
443
                                                                        </div>
444
                                                                        <div class= "status">
445
                                                                        </div>
446
                                                                        <div class="tags">
447
                                                                        </div>
448
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
449
                                                                </div>
450
                                                        </li>
451
                                                </ul>
452
                                        </div>
453
                                </div>
454
                                <section class="top">
455
                                        <div class="lt">
456
                                                <div class="img-wrap">
457
                                                        <span class="snf-pc-full"></span>
458
                                                        <span class="os fedora">fedora</span>
459
                                                </div>        
460
                                        </div>
461
                                        <div class="rt">
462
                                                <div class="title">
463
                                                        <h1>My Opensuse Desktop Server 1<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h1>
464
                                                </div>
465
                                                <div class="actions">
466
                                                        <ul>
467
                                                                <li><a href="" data-reveal-id="start-confirm">Start</a></li>
468
                                                                <li><a href="" data-reveal-id="shutdown-confirm">Shutdown</a></li>
469
                                                                <li><a href="" data-reveal-id="reboot-confirm">Reboot</a></li>
470
                                                                <li><a href="" data-reveal-id="destroy-vm-confirm">Destroy</a></li>
471
                                                        </ul>
472
                                                </div>
473
                                                <div class="tabs">
474
                                                        <ul>
475
                                                                <li><a href="#info" class="active"><span class="snf-info-outline"></span></a></li>
476
                                                                <li><a href="#disk-connected"><span class="snf-volume-full"></span></a></li>
477
                                                                <li><a href="#network-connected"><span class="snf-network-full snf-font"></span></a></li>
478
                                                        </ul>
479
                                                </div>
480
                                        </div>
481
                                </section>
482
                                <section class="content info-simple" id="info">
483
                                        <section class="info-block">
484
                                                <h2>info</h2>
485
                                                <dl>
486
                                                        <dt><span class="snf-font"></span>Project</dt>
487
                                                        <dd>Basic Project</dd>
488
                                                        <dt><span class="snf-font snf-pc-full"></span>Name</dt>
489
                                                        <dd>
490
                                                                <div class="editable">
491
                                                                <span class="input-txt">My Opensuse Desktop Server 1</span>
492
                                                                <input type="text">
493
                                                                <span class="editbuttons">
494
                                                                                <a href="#" class="edit"><span class="snf-edit"></span></a>
495
                                                                                <a href="#" class="save"><span class="snf-ok-sign"></span></a>
496
                                                                                <a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>
497
                                                                        </span>
498
                                                            </div>
499
                                                        </dd>
500
                                                        <dt><span class="snf-chip-outline snf-font"></span>CPUs</dt>
501
                                                        <dd>4</dd>
502
                                                        <dt><span class="snf-ram-full snf-font"></span>RAM</dt>
503
                                                        <dd>512 MB</dd>
504
                                                        <dt><span class="snf-volume-full snf-font"></span>System Disk Size</dt>
505
                                                        <dd>4GB</dd>
506
                                                        <dt><span class="snf-volume-full snf-font"></span>Storage Type</dt>
507
                                                        <dd>Archipelago</dd>
508
                                                        <dt><span class="snf-image-outline snf-font"></span>Image Name</dt>
509
                                                        <dd>Fedora</dd>
510
                                                        <dt><span class="snf-image-outline snf-font"></span>Image Size</dt>
511
                                                        <dd>3.68 GB</dd>
512
                                                        <dt><span class="snf-nic-full snf-font"></span>IPv4</dt>
513
                                                        <dd>83.212.96.152</dd>
514
                                                        <dt><span class="snf-nic-full snf-font"></span>IPv4</dt>
515
                                                        <dd>83.212.96.153</dd>
516
                                                        <dt><span class="snf-nic-full snf-font"></span>IPv6</dt>
517
                                                        <dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>
518
                                                </dl>
519
                                        </section>
520
                                        <section class="info-block tags">
521
                                                <h2>tags</h2>
522
                                                <div class="tag-data">
523
                                                        <a href="" class="tag tag1 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
524
                                                        <span>Tag Name</span>
525
                                                        <a class="delete"><span>X</span></a>
526
                                                </div>
527
                                                <div class="tag-data">
528
                                                        <a href="" class="tag tag2 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
529
                                                        <span>Tag Name</span>
530
                                                        <a class="delete"><span>X</span></a>
531
                                                </div>
532
                                                <div class="tag-data">
533
                                                        <a href="" class="tag tag3 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
534
                                                        <span>Tag Name</span>
535
                                                        <a class="delete"><span>X</span></a>
536
                                                </div>
537
                                                <div class="buttons">
538
                                                        <a href="" class="btn1 show-add-tag id="show-add-tag"">add new tag</a>
539
                                                </div>
540
                                                <div class="snf-color-picker">
541
                                                <h3>Select color:</h3>
542
                                                        <form action="#" method="post">
543
                                                                <div id="picker">
544
                                                                        <div class="farbtastic">
545
                                                                                <div class="color" style="background-color: rgb(255, 0, 21);"></div>
546
                                                                                <div class="wheel"></div>
547
                                                                                <div class="overlay"></div>
548
                                                                                <div class="h-marker marker" style="left: 90px; top: 13px;"></div>
549
                                                                                <div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
550
                                                                        </div>
551
                                                                </div>
552
                                                                <div class="form-item">
553
                                                                        <input type="text" id="color" name="color" value="#16C1E9" disabled
554
                                                                        <span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
555
                                                                </div>
556
                                                        </form>
557
                                                        <div class="btns">
558
                                                                <a class="btn1" href="">OK</a>
559
                                                                <a class="btn1 hide-add-tag" href="">CANCEL</a>
560
                                                        </div>
561
                                                </div>
562
                                        </section>
563
                                        <section class="info-block charts">
564
                                                <div>
565
                                                        <h2>CPU utilization</h2>
566
                                                        <div class="graph_container">
567
                                                                <img src="images/cpu-ts.png" alt="CPU utilization graph">
568
                                                        </div>
569
                                                </div>
570
                                                <div>
571
                                                        <h2>Network utilization</h2>
572
                                                        <div class="graph_container">
573
                                                                <img src="images/net-ts.png" alt="network utilization graph">
574
                                                        </div>
575
                                                </div>
576
                                        </section>
577
                                </section>
578
                                <section class="content connected network" id="network-connected" style="display:none">
579
                                        <section class="item running">
580
                                                <div class="what">
581
                                                        <div class="img-wrap">
582
                                                                <span class="snf-network-full snf-font"></span>
583
                                                        </div>
584
                                                        <h4>Public Network</h4>
585
                                                </div>
586
                                                <div class="clearfix">
587
                                                        <ul class="connections">
588
                                                                <li>
589
                                                                        <a href="#" class="act">act</a>
590
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
591
                                                                        <div class="data">
592
                                                                                <ul>
593
                                                                                        <li>
594
                                                                                                <h5 class="ip-data">IPv4</h5>
595
                                                                                                <p>83.212.96.12</p>
596
                                                                                        </li>
597
                                                                                </ul>
598
                                                                        </div>
599
                                                                </li>
600
                                                                <li>
601
                                                                        <a href="#" class="act">act</a>
602
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
603
                                                                        <div class="data">
604
                                                                                <ul>
605
                                                                                        <li>
606
                                                                                                <h5 class="ip-data">IPv4</h5>
607
                                                                                                <p>83.212.96.12</p>
608
                                                                                        </li>
609
                                                                                </ul>
610
                                                                        </div>
611
                                                                </li>
612
                                                                <li>
613
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
614
                                                                        <div class="data">
615
                                                                                <ul>
616
                                                                                        <li>
617
                                                                                                <h5 class="ip-data">IPv6</h5>
618
                                                                                                <p>2001:648:2ffc:1112:a80c:eaff:fe34:1234</p>
619
                                                                                        </li>
620
                                                                                </ul>
621
                                                                        </div>
622
                                                                </li>
623
                                                        </ul>
624
                                                        <div class="firewall" data-firewall="fully">
625
                                                                <p>Firewall <em>on</em></p>
626
                                                                <div class="more">
627
                                                                        <p class="fully">
628
                                                                                <a href="">Fully protected mode<span class="snf-radio-checked"></span><em>on</em></a>
629
                                                                        </p>
630
                                                                        <p class="basic">
631
                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
632
                                                                        </p>
633
                                                                        <p class="unprotected">
634
                                                                                <a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
635
                                                                        </p>
636
                                                                </div>
637
                                                        </div>
638
                                                </div>
639
                                        </section>
640
                                        <section class="item error">
641
                                                <div class="what">
642
                                                        <div class="img-wrap">
643
                                                                <span class="snf-network-full snf-font"></span>
644
                                                        </div>
645
                                                        <h4>My Awesome Network<span class="status">Error</span></h4>
646
                                                </div>
647
                                                <div class="clearfix">
648
                                                        <ul class="connections">
649
                                                                <li>
650
                                                                        <a href="#" class="act">act</a>
651
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
652
                                                                        <div class="data">
653
                                                                                <ul>
654
                                                                                        <li>
655
                                                                                                <h5 class="ip-data">ipv6</h5>
656
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
657
                                                                                        </li>
658
                                                                                </ul>
659
                                                                        </div>
660
                                                                </li>
661
                                                                <li>
662
                                                                        <a href="#" class="act">act</a>
663
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
664
                                                                        <div class="data">
665
                                                                                <ul>
666
                                                                                        <li>
667
                                                                                                <h5 class="ip-data">ipv6</h5>
668
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
669
                                                                                        </li>
670
                                                                                </ul>
671
                                                                        </div>
672
                                                                </li>
673
                                                                <li>
674
                                                                        <a href="#" class="act">act</a>
675
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
676
                                                                        <div class="data">
677
                                                                                <ul>
678
                                                                                        <li>
679
                                                                                                <h5 class="ip-data">ipv6</h5>
680
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
681
                                                                                        </li>
682
                                                                                </ul>
683
                                                                        </div>
684
                                                                </li>
685
                                                        </ul>
686

    
687
                                                </div>
688
                                        </section>
689
                                        <section class="item running">
690
                                                <div class="what">
691
                                                        <div class="img-wrap">
692
                                                                <span class="snf-network-full snf-font"></span>
693
                                                        </div>
694
                                                        <h4>My Private Network</h4>
695
                                                </div>
696
                                                <div class="clearfix">
697
                                                        <ul class="connections">
698
                                                                <li>
699
                                                                        <a href="#" class="act">act</a>
700
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
701
                                                                        <div class="data">
702
                                                                                <ul>
703
                                                                                        <li>
704
                                                                                                <h5 class="ip-data">ipv6</h5>
705
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
706
                                                                                        </li>
707
                                                                                </ul>
708
                                                                        </div>
709
                                                                </li>
710
                                                        </ul>
711

    
712
                                                </div>
713
                                        </section>
714
                                        <section class="connect-new network">
715
                                                <div class="img-wrap">
716
                                                        <a href="" data-reveal-id="connect-to-network">
717
                                                                <span class="snf-network-full snf-font"></span>
718
                                                        </a>
719
                                                </div>
720
                                                <p><a href="" data-reveal-id="connect-to-network">Connect to Network</a></p>
721
                                        </section>
722
                                </section>
723
                                <section class="content connected disk" id="disk-connected" style="display:none">
724
                                        <section class="item running">
725
                                                <div class="what">
726
                                                        <div class="img-wrap">
727
                                                                <span class="snf-volume-full snf-font"></span>
728
                                                        </div>
729
                                                        <h4>Volume Name</h4>
730
                                                </div>
731
                                                <div class="clearfix">
732
                                                        <ul class="connections">
733
                                                                <li>
734
                                                                        <a href="#" class="act">act</a>
735
                                                                        <div class="icon"></div>
736
                                                                        <div class="data">
737
                                                                                <ul>
738
                                                                                        <li>
739
                                                                                                <h5 class="volume-data">Size</h5>
740
                                                                                                <p>10 GB</p>
741
                                                                                        </li>
742
                                                                                        <li>
743
                                                                                                <h5 class="volume-data">Storage Type</h5>
744
                                                                                                <p>Archipelago</p>
745
                                                                                        </li>
746
                                                                                </ul>
747
                                                                        </div>
748
                                                                </li>
749
                                                        </ul>
750
                                                </div>
751
                                        </section>
752
                                        <section class="item error">
753
                                                <div class="what">
754
                                                        <div class="img-wrap">
755
                                                                <span class="snf-volume-full snf-font"></span>
756
                                                        </div>
757
                                                        <h4>Another Volume<span class="status">Error</span></h4>
758
                                                </div>
759
                                                <div class="clearfix">
760
                                                        <ul class="connections">
761
                                                                <li>
762
                                                                        <a href="#" class="act">act</a>
763
                                                                        <div class="icon"></div>
764
                                                                        <div class="data">
765
                                                                                <ul>
766
                                                                                        <li>
767
                                                                                                <h5 class="volume-data">Size</h5>
768
                                                                                                <p>20 GB</p>
769
                                                                                        </li>
770
                                                                                        <li>
771
                                                                                                <h5 class="volume-data">Storage Type</h5>
772
                                                                                                <p>Archipelago</p>
773
                                                                                        </li>
774
                                                                                </ul>
775
                                                                        </div>
776
                                                                </li>
777
                                                        </ul>
778

    
779
                                                </div>
780
                                        </section>
781
                                        <section class="connect-new disk">
782
                                                <div class="img-wrap">
783
                                                        <a href="" data-reveal-id="attach-volume">
784
                                                                <span class="snf-volume-full snf-font"></span>
785
                                                        </a>
786
                                                </div>
787
                                                <p><a href="" data-reveal-id="attach-volume">Attach Volume</a></p>
788
                                        </section>
789
                                </section>
790
                                <div class="placeholder"></div>
791
                        </div>
792
                </div>
793
        </div>
794
  <script src="javascripts/vendor/jquery.js"></script>
795
  <script src="javascripts/foundation/foundation.js"></script>
796
        
797
        <script src="javascripts/foundation/foundation.alerts.js"></script>
798
        
799
        <script src="javascripts/foundation/foundation.clearing.js"></script>
800
        
801
        <script src="javascripts/foundation/foundation.cookie.js"></script>
802
        
803
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
804
        
805
        <script src="javascripts/foundation/foundation.forms.js"></script>
806
        
807
        <script src="javascripts/foundation/foundation.joyride.js"></script>
808
        
809
        <script src="javascripts/foundation/foundation.magellan.js"></script>
810
        
811
        <script src="javascripts/foundation/foundation.orbit.js"></script>
812
        
813
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
814
        
815
        <script src="javascripts/foundation/foundation.reveal.js"></script>
816
        
817
        <script src="javascripts/foundation/foundation.section.js"></script>
818
        
819
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
820
        
821
        <script src="javascripts/foundation/foundation.topbar.js"></script>
822
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
823
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
824
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
825
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
826
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
827
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>        
828
        <script src="javascripts/common.js"></script>
829
        
830
  
831
  <script>
832
    $(document).foundation();
833
  </script>
834
</body>
835
</html>