Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ 73486bc5

History | View | Annotate | Download (32.1 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_fill"></span></a></li>
24
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network"></span></a></li>
25
                                <li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
26
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage"><span class="snf-Pithos"></span></a></li>
27
                                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-images"></span></a></li>
28
                                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot"></span></a></li>
29
                                <li><a href="" data-tooltip ="has-tip" title="More"><span class="snf-plus"></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="font-icon snf-radio-unchecked"></span><span class="font-icon snf-HDD-full"></span><span class="name">volume name</span><span class="numeric-data">10 GB</span><span>[Archipelago]</span></li>
85
                                        <li><span class="font-icon snf-radio-unchecked"></span><span class="font-icon snf-HDD-full"></span><span class="name">another 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="connect-to-network" class="reveal-modal medium list-availables">
93
                                <span>Available networks:</span>
94
                                <ul>
95
                                        <li><span class="font-icon snf-radio-unchecked"></span><span class="font-icon snf-network_full"></span><span class="name">network name</span><span>other data</span></li>
96
                                        <li><span class="font-icon snf-radio-unchecked"></span><span class="font-icon snf-network_full"></span><span class="name">another network name</span><span>connected machines: 10</span></li>
97
                                </ul>
98
                                <p class="buttons">
99
                                        <a href="" class="btn1">OK</a>
100
                                        <a href="" class="btn1">Cancel</a>
101
                                </p>
102
                        </div>
103
                </section>
104
                <section class="actions-bar clearfix">
105
                        <h2><a href="vm_list.html">Virtual Machines</a> > My Awesome Network</h2>
106
                        <div class="view-type">
107
                                <a href="" class="grid" title="grid view"><span class="snf-gridview"></span></a>
108
                                <a href="" class="list" title="list view"><span class="snf-listview "></span></a>
109
                                <a href="" class="single current" title="single view"></a>
110
                        </div>
111
                        <div class="filter-menu">
112
                                <a class="filter" href="">Filter</a>
113
                                <ul class="options">
114
                                        <li><a href=""> set an option</a></li>
115
                                        <li><a href=""> set an option</a></li>
116
                                        <li><a href=""> set an option</a></li>
117
                                        <li><a href=""> set an option</a></li>
118
                                </ul>
119
                        </div>
120
                        <div id="hd-search" class="hd-search">
121
                            <form>
122
                                        <span class="hd-icon-search snf-search"></span>
123
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
124
                            </form>
125
                        </div>
126
                </section>
127
                <div class="main row">
128
                        <div class="vm details running">
129
                                <a href="" class="toggle-lt-bar">...</a>
130
                                <div class="lt-bar">
131
                                        <div class="scroll-wrap">
132
                                                <ul class="items-list">
133
                                                        <li data-status="rebooting" class="rebooting">
134
                                                                <a href="" class="btn5 temp">animation</a>
135
                                                                <div class="more">
136
                                                                        <div class="clearfix">
137
                                                                                <div class="col lt">
138
                                                                                        <ul>
139
                                                                                                <li><a href="" class="start">Start</a></li>
140
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
141
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
142
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
143
                                                                                                 <li><a href="">Option i</a></li>
144
                                                                                        </ul>
145
                                                                                </div>
146
                                                                                <div class="col rt">
147
                                                                                        <ul>
148
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
149
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
150
                                                                                        </ul>
151
                                                                                </div>
152
                                                                        </div>
153
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
154
                                                                </div>
155
                                                                <div class="container">
156
                                                                        <div class="check">
157
                                                                                <span class="snf-checkbox-unchecked"></span>
158
                                                                        </div>
159
                                                                        <div class="img-wrap">
160
                                                                                <span class="snf-PC_fill"></span>
161
                                                                                <span class="os kubuntu">kubuntu</span>
162
                                                                        </div>
163
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
164
                                                                        <div class="actions">
165
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
166
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
167
                                                                        </div>
168
                                                                        <div class= "status">
169
                                                                                <span class="state">REBOOTING</span>
170
                                                                        </div>
171
                                                                        <div class="tags">
172
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
173
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
174
                                                                        </div>
175
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
176
                                                                </div>
177
                                                        </li>
178
                                                        <li data-status="starting" class="starting">
179
                                                                <div class="more">
180
                                                                        <div class="clearfix">
181
                                                                                <div class="col lt">
182
                                                                                        <ul>
183
                                                                                                <li><a href=""   class="start">Start</a></li>
184
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
185
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
186
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
187
                                                                                                 <li><a href="">Option i</a></li>
188
                                                                                        </ul>
189
                                                                                </div>
190
                                                                                <div class="col rt">
191
                                                                                        <ul>
192
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
193
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
194
                                                                                        </ul>
195
                                                                                </div>
196
                                                                        </div>
197
                                                                        <div class="name">vm name 1 </div>
198
                                                                </div>
199
                                                                <div class="container">
200
                                                                        <div class="check">
201
                                                                                <span class="snf-checkbox-unchecked"></span>
202
                                                                        </div>
203
                                                                        <div class="img-wrap">
204
                                                                                <span class="snf-PC_fill"></span>
205
                                                                                <span class="os kubuntu">kubuntu</span>
206
                                                                        </div>
207
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
208
                                                                        <div class="actions">
209
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
210
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
211
                                                                        </div>
212
                                                                        <div class= "status">
213
                                                                                <span class="state">STARTING</span>
214
                                                                        </div>
215
                                                                        <div class="tags">
216
                                                                        </div>
217
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
218
                                                                </div>
219
                                                        </li>
220
                                                        <li  data-status="shutting" class="shutting">
221
                                                                <div class="more">
222
                                                                        <div class="clearfix">
223
                                                                                <div class="col lt">
224
                                                                                        <ul>
225
                                                                                                <li><a href=""   class="start">Start</a></li>
226
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
227
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
228
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
229
                                                                                                 <li><a href="">Option i</a></li>
230
                                                                                        </ul>
231
                                                                                </div>
232
                                                                                <div class="col rt">
233
                                                                                        <ul>
234
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
235
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
236
                                                                                        </ul>
237
                                                                                </div>
238
                                                                        </div>
239
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
240
                                                                </div>
241
                                                                <div class="container">
242
                                                                        <div class="check">
243
                                                                                <span class="snf-checkbox-unchecked"></span>
244
                                                                        </div>
245
                                                                        <div class="img-wrap">
246
                                                                                <div class="img running">
247
                                                                                        <span class="snf-PC_fill"></span>
248
                                                                                        <span class="os kubuntu">kubuntu</span>
249
                                                                                </div>
250
                                                                        </div>
251
                                                                        <h4>short name</h4>
252
                                                                        <div class="actions">
253
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
254
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
255
                                                                        </div>
256
                                                                        <div class= "status">
257
                                                                                <span class="state">SHUTTING DOWN</span>
258
                                                                        </div>
259
                                                                        <div class="tags">
260
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
261
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
262
                                                                        </div>
263
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
264
                                                                </div>
265
                                                        </li>
266
                                                         <li data-status="running" class="running">
267
                                                                <div class="more">
268
                                                                        <div class="clearfix">
269
                                                                                <div class="col lt">
270
                                                                                        <ul>
271
                                                                                                <li><a href=""   class="start">Start</a></li>
272
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
273
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
274
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
275
                                                                                                 <li><a href="">Option i</a></li>
276
                                                                                        </ul>
277
                                                                                </div>
278
                                                                                <div class="col rt">
279
                                                                                        <ul>
280
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
281
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
282
                                                                                        </ul>
283
                                                                                </div>
284
                                                                        </div>
285
                                                                        <div class="name">short name</div>
286
                                                                </div>
287
                                                                <div class="container">
288
                                                                        <div class="check">
289
                                                                                <span class="snf-checkbox-unchecked"></span>
290
                                                                        </div>
291
                                                                        <div class="img-wrap">
292
                                                                                <span class="snf-PC_fill"></span>
293
                                                                                <span class="os kubuntu">kubuntu</span>
294
                                                                        </div>
295
                                                                        <h4>short name</h4>
296
                                                                        <div class="actions">
297
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
298
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
299
                                                                        </div>
300

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

    
673
                                                </div>
674
                                        </section>
675
                                        <section class="item running">
676
                                                <div class="what">
677
                                                        <div class="img-wrap">
678
                                                                <span class="snf-network_full"></span>
679
                                                        </div>
680
                                                        <h4>My Private Network</h4>
681
                                                </div>
682
                                                <div class="clearfix">
683
                                                        <ul class="connections">
684
                                                                <li>
685
                                                                        <a href="#" class="act">act</a>
686
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
687
                                                                        <div class="data">
688
                                                                                <ul>
689
                                                                                        <li>
690
                                                                                                <h5 class="ip-data">ipv6</h5>
691
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
692
                                                                                        </li>
693
                                                                                </ul>
694
                                                                        </div>
695
                                                                </li>
696
                                                        </ul>
697

    
698
                                                </div>
699
                                        </section>
700
                                        <section class="connect-new network">
701
                                                <div class="img-wrap">
702
                                                        <a href="" data-reveal-id="connect-to-network">
703
                                                                <span class="snf-network_full"></span>
704
                                                        </a>
705
                                                </div>
706
                                                <p><a href="" data-reveal-id="connect-to-network">Connect to Network</a></p>
707
                                        </section>
708
                                </section>
709
                                <section class="content connected disk" id="disk-connected" style="display:none">
710
                                        <section class="item running">
711
                                                <div class="what">
712
                                                        <div class="img-wrap">
713
                                                                <span class="snf-HDD-full font-icon"></span>
714
                                                        </div>
715
                                                        <h4>Volume Name</h4>
716
                                                </div>
717
                                                <div class="clearfix">
718
                                                        <ul class="connections">
719
                                                                <li>
720
                                                                        <a href="#" class="act">act</a>
721
                                                                        <div class="icon"></div>
722
                                                                        <div class="data">
723
                                                                                <ul>
724
                                                                                        <li>
725
                                                                                                <h5 class="volume-data">Size</h5>
726
                                                                                                <p>10 GB</p>
727
                                                                                        </li>
728
                                                                                        <li>
729
                                                                                                <h5 class="volume-data">Storage Type</h5>
730
                                                                                                <p>Archipelago</p>
731
                                                                                        </li>
732
                                                                                </ul>
733
                                                                        </div>
734
                                                                </li>
735
                                                        </ul>
736
                                                </div>
737
                                        </section>
738
                                        <section class="item error">
739
                                                <div class="what">
740
                                                        <div class="img-wrap">
741
                                                                <span class="snf-HDD-full font-icon"></span>
742
                                                        </div>
743
                                                        <h4>Another Volume<span class="status">Error</span></h4>
744
                                                </div>
745
                                                <div class="clearfix">
746
                                                        <ul class="connections">
747
                                                                <li>
748
                                                                        <a href="#" class="act">act</a>
749
                                                                        <div class="icon"></div>
750
                                                                        <div class="data">
751
                                                                                <ul>
752
                                                                                        <li>
753
                                                                                                <h5 class="volume-data">Size</h5>
754
                                                                                                <p>20 GB</p>
755
                                                                                        </li>
756
                                                                                        <li>
757
                                                                                                <h5 class="volume-data">Storage Type</h5>
758
                                                                                                <p>Archipelago</p>
759
                                                                                        </li>
760
                                                                                </ul>
761
                                                                        </div>
762
                                                                </li>
763
                                                        </ul>
764

    
765
                                                </div>
766
                                        </section>
767
                                        <section class="connect-new disk">
768
                                                <div class="img-wrap">
769
                                                        <a href="" data-reveal-id="attach-volume">
770
                                                                <span class="snf-HDD-full font-icon"></span>
771
                                                        </a>
772
                                                </div>
773
                                                <p><a href="" data-reveal-id="attach-volume">Attach Volume</a></p>
774
                                        </section>
775
                                </section>
776
                                <div class="placeholder"></div>
777
                        </div>
778
                </div>
779
        </div>
780
  <script src="javascripts/vendor/jquery.js"></script>
781
  <script src="javascripts/foundation/foundation.js"></script>
782
        
783
        <script src="javascripts/foundation/foundation.alerts.js"></script>
784
        
785
        <script src="javascripts/foundation/foundation.clearing.js"></script>
786
        
787
        <script src="javascripts/foundation/foundation.cookie.js"></script>
788
        
789
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
790
        
791
        <script src="javascripts/foundation/foundation.forms.js"></script>
792
        
793
        <script src="javascripts/foundation/foundation.joyride.js"></script>
794
        
795
        <script src="javascripts/foundation/foundation.magellan.js"></script>
796
        
797
        <script src="javascripts/foundation/foundation.orbit.js"></script>
798
        
799
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
800
        
801
        <script src="javascripts/foundation/foundation.reveal.js"></script>
802
        
803
        <script src="javascripts/foundation/foundation.section.js"></script>
804
        
805
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
806
        
807
        <script src="javascripts/foundation/foundation.topbar.js"></script>
808
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
809
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
810
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
811
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
812
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
813
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>        
814
        <script src="javascripts/common.js"></script>
815
        
816
  
817
  <script>
818
    $(document).foundation();
819
  </script>
820
</body>
821
</html>