Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ 3fe0830a

History | View | Annotate | Download (14.9 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>Synnefo | VM list</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/app.css" />
13
    <link rel="stylesheet" href="stylesheets/styles.css" />
14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
17

    
18
</head>
19
<body>
20
        <div class="dummy-navigation">
21
                <a href="" class="close">X</a>
22
                <a href="index.html">Homepage</a><br>
23
                <a href="" class="our" data-our="questions">Show/Hide questions</a><br>
24
                <a href="" class="our" data-our="suggestions">Show/Hide suggestions</a><br>
25
                <a href="" class="our" data-our="problems">Show/Hide problems</a><br>
26
        </div>
27
        <div class="row-full">
28
                <header class="header">
29
                        
30
                        <div class="logo">
31
                                <a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
32
                        </div>
33
                        
34
                        <nav class="top-nav icons-nav">
35
                                
36
                                <ul>
37
                                        <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage"><img src="images/menu-icon-storage.png" alt="vm"></a></li>
38
                                        <li><a href="vm_list.html" data-tooltip ="has-tip" title="Machines"><img src="images/menu-icon-compute.png" alt="vm"></a></li>
39
                                        
40
                                        <li><a href="" data-tooltip ="has-tip" title="Disks"><img src="images/menu-icon-disks.png" alt="vm"></a></li>
41
                                        <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><img src="images/menu-icon-networks.png" alt="vm"></a></li>
42
                                </ul>
43
                                 
44
                        </nav>
45
                        
46
                        <div class="login">
47
                                <a href="">test@grnet.gr</a>
48
                        </div>
49
                        <div class="actions clearfix">
50
                                
51
                                <div class="lt-actions">
52
                                        <div class="new-btn"><a href="vm_create_a.html"><span>+</span> NEW MACHINE </a></div>
53
                                </div>
54
                                <div class="main-actions">
55
                                        <ul>
56
                                                <li class="running"><a href="" class="active">Reboot</a></li>
57
                                                <li class="running"><a href="" class="active">Shutdown</a></li>
58
                                                <li class="running single"><a href="" class="active">Console</a></li>
59
                                                <li class="both"><a href="" class="active">Destroy</a></li>
60
                                                <li class="stopped"><a href="">Start</a></li>
61
                                        </ul>
62
                                </div>
63
                        </div>
64
                </header>
65
                <div class="info top-info alert">
66
                        <div class="wrap">
67
                                <p>ALERT!</p>
68

    
69
                                <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
70
                        </div>
71
                        <a href="#" class="close" title="hide message">close</a>
72
                </div>
73

    
74
        </div>
75
        <div class="row-full wrapper">
76
                <div class="lt-sidebar vms scroll-pane">
77

    
78
                        <!-- sidebar -->
79
                        <ul class="items-list">
80
                                <li>
81
                                        <div class="img running">
82
                                                VM running
83
                                                <span class="os kubuntu">kubuntu</span>
84
                                        </div>
85
                                        <p class="visible-info">
86
                                                <span>IPv4 83.212.97.127</span>
87
                                                <span>vm name</span>
88
                                        </p>
89
                                </li>
90
                                <li class="current">
91
                                        <div class="img running">
92
                                                VM running
93
                                                <span class="os windows">os</span>
94
                                        </div>
95
                                        <p class="visible-info">
96
                                                <span>IPv4 83.212.97.127</span>
97
                                                <span>vm name</span>
98
                                        </p>
99
                                </li>
100
                                <li>
101
                                        <div class="img running">
102
                                                VM running
103
                                                <span class="os windows">os</span>
104
                                        </div>
105
                                        <p class="visible-info">
106
                                                <span>IPv4 83.212.97.127</span>
107
                                                <span>vm name</span>
108
                                        </p>
109
                                </li>
110
                                <li>
111
                                        <div class="img running">
112
                                                VM running
113
                                                <span class="os windows">os</span>
114
                                        </div>
115
                                        <p class="visible-info">
116
                                                <span>IPv4 83.212.97.127</span>
117
                                                <span>vm name</span>
118
                                        </p>
119
                                </li>
120
                                <li>
121
                                        <div class="img running">
122
                                                VM running
123
                                                <span class="os windows">os</span>
124
                                        </div>
125
                                        <p class="visible-info">
126
                                                <span>IPv4 83.212.97.127</span>
127
                                                <span>vm name</span>
128
                                        </p>
129
                                </li><li>
130
                                        <div class="img running">
131
                                                VM running
132
                                                <span class="os windows">os</span>
133
                                        </div>
134
                                        <p class="visible-info">
135
                                                <span>IPv4 83.212.97.127</span>
136
                                                <span>vm name</span>
137
                                        </p>
138
                                </li>
139
                                <li>
140
                                        <div class="img running">
141
                                                VM running
142
                                                <span class="os windows">os</span>
143
                                        </div>
144
                                        <p class="visible-info">
145
                                                <span>IPv4 83.212.97.127</span>
146
                                                <span>vm name</span>
147
                                        </p>
148
                                </li>
149

    
150
                                <li class="current">
151
                                        <div class="img running">
152
                                                VM running
153
                                                <span class="os fedora">os</span>
154
                                        </div>
155
                                        <p class="visible-info">
156
                                                <span>IPv4 83.212.97.127</span>
157
                                                <span>vm name</span>
158
                                        </p>
159
                                </li>
160
                                <li>
161
                                        <div class="img stopped">
162
                                                VM running
163
                                                <span class="os kubuntu">os</span>
164
                                        </div>
165
                                        <p class="visible-info">
166
                                                <span>IPv4 83.212.97.127</span>
167
                                                <span>vm name</span>
168
                                        </p>
169
                                </li>
170
                                <li>
171
                                        <div class="img running">
172
                                                VM running
173
                                                <span class="os windows">os</span>
174
                                        </div>
175
                                        <p class="visible-info">
176
                                                <span>IPv4 83.212.97.127</span>
177
                                                <span>vm name</span>
178
                                        </p>
179
                                </li>
180
                                <li>
181
                                        <div class="img running">
182
                                                VM running
183
                                                <span class="os kubuntu">os</span>
184
                                        </div>
185
                                        <p class="visible-info">
186
                                                <span>IPv4 83.212.97.127</span>
187
                                                <span>vm name</span>
188
                                        </p>
189
                                </li>
190
                                <li>
191
                                        <div class="img running">
192
                                                VM running
193
                                                <span class="os">os</span>
194
                                        </div>
195
                                        <p class="visible-info">
196
                                                <span>IPv4 83.212.97.127</span>
197
                                                <span>vm name</span>
198
                                        </p>
199
                                </li>
200
                                <li>
201
                                        <div class="img running">
202
                                                VM running
203
                                                <span class="os windows">os</span>
204
                                        </div>
205
                                        <p class="visible-info">
206
                                                <span>IPv4 83.212.97.127</span>
207
                                                <span>vm name</span>
208
                                        </p>
209
                                </li>
210
                        </ul>
211
                </div>
212

    
213
                <!-- detailed view of vm -->
214

    
215
                <!-- main image of vm -->
216
                <div class="main details vm">
217

    
218
                        <a href="vm_list.html" class="close" title="back to vm list"><span class="snf-font">c</span></a>
219
                        <div class="top border-bottom-style1">
220
                                <div class="img running">
221
                                        VM running
222
                                        <span class="os windows">os</span>
223
                                </div>
224
                                <div class="actions">
225
                                        <ul>
226
                                                <li><a href="#" data-reveal-id="vm-connect">connect</a></li>
227
                                                
228
                                        </ul>
229
                                </div>
230
                        </div>
231

    
232
                        <!--sections with details of vm -->
233
                        <section class="border-bottom-style1 info">
234
                                <dl>
235
                                        <dt>Name</dt>
236
                                        <dd class="editable">
237
                                                <span class="input-txt">vm name</span>
238
                                                <input type="text">
239
                                                <div class="editbuttons">
240
                                                        <a href="#" class="edit"><span class="snf-font">q</span></a>
241
                                                        <a href="#" class="save"><span class="snf-font">l</span></a>
242
                                                        <a href="#" class="cancel"><span class="snf-font">n</span></a>
243
                                                </div>
244
                                        </dd>
245
                                        <dt>Status</dt>
246
                                        <dd>running</dd>
247
                                        <dt>OS</dt>
248
                                        <dd ><img class="txt_size" src="images/os-windows.png"> Windows</dd>
249
                                        <dt>IPv4</dt>
250
                                        <dd>83.212.97.127</dd>
251
                                </dl>
252
                        </section>
253
                        <section class="wrap border-bottom-style1 info">
254
                                <div class="tba">
255
                                        <div class="section_header">
256
                                                disks
257
                                        </div>
258
                                        <div class="right_side">
259
                                                <div class="middle_side">
260
                                                        <div class="row">
261
                                                                <div class="info_simple big small small">
262
                                                                        30GB info info info
263
                                                                </div>
264
                                                                <div class="action_links">
265
                                                                        <span><a href="">view</a></span>
266
                                                                        <span><a href="">disconnect</a></span>
267
                                                                </div>
268
                                                        </div>
269
                                                        <div class="row">
270
                                                                <div class="info_simple big small">
271
                                                                        30GB info info info
272
                                                                </div>
273
                                                                <div class="action_links">
274
                                                                        <span><a href="">view</a></span>
275
                                                                        <span><a href="">disconnect</a></span>
276
                                                                </div>
277
                                                        </div>
278
                                                        <div class="row">
279
                                                                <div class="info_simple big small">
280
                                                                        30GB info info info
281
                                                                </div>
282
                                                                <div class="action_links">
283
                                                                        <span><a href="">view</a></span>
284
                                                                        <span><a href="">disconnect</a></span>
285
                                                                </div>
286
                                                        </div>
287
                                                </div>
288
                                                <div class="btn_pinkb">
289
                                                        <a href="">
290
                                                                add disk
291
                                                                <img src="images/menu-icon-disks.png">
292
                                                        </a>
293
                                                </div>
294
                                        </div>
295
                                </div>
296
                        
297
                        </section>
298
                        
299
                        <section class="wrap border-bottom-style1 info">
300
                                <div class="tba">
301
                                        <div class="section_header">
302
                                                networks
303
                                        </div>
304
                                        <div class="right_side">
305
                                                <div class="middle_side">
306
                                                        <div class="row">
307
                                                                <div class="info_simple big small">
308
                                                                network 1
309
                                                                </div>
310
                                                                <div class="action_links">
311
                                                                        <span><a href="">view</a></span>
312
                                                                        <span><a href="">disconnect</a></span>
313
                                                                </div>
314
                                                        </div>
315
                                                        <div class="row">
316
                                                                <div class="info_simple big small">
317
                                                                network 2
318
                                                                </div>
319
                                                                <div class="action_links">
320
                                                                        <span><a href="">view</a></span>
321
                                                                        <span><a href="">disconnect</a></span>
322
                                                                </div>
323
                                                        </div>
324
                                                        <div class="row">
325
                                                                <div class="info_simple big small">
326
                                                                network 3
327
                                                        </div>
328
                                                                <div class="action_links">
329
                                                                        <span><a href="">view</a></span>
330
                                                                        <span><a href="">disconnect</a></span>
331
                                                                </div>
332
                                                        </div>
333
                                                        <div class="btn_pinkb">
334
                                                                <a href="">
335
                                                                        add network
336
                                                                        <img src="images/menu-icon-networks.png">
337
                                                                </a>
338
                                                        </div>
339
                                                </div>
340
                                        </div>
341
                                </div>
342
                        </section>
343

    
344
                        <section class="wrap border-bottom-style1 info">
345
                                <div class="tba">
346
                                        <div class="section_header">
347
                                                info
348
                                        </div>
349
                                        <div class="right_side">
350
                                                <div class="middle_side">
351
                                                        <div class="row">
352
                                                                <span class="info_simple big small">
353
                                                                CPUs
354
                                                                </span>
355
                                                                <span class="info_simple big small">
356
                                                                4
357
                                                                </span>                                                                
358
                                                        </div>
359
                                                        <div class="row">
360
                                                                <span class="info_simple big small">
361
                                                                RAM
362
                                                                </span>
363
                                                                <span class="info_simple big small">
364
                                                                2048MB
365
                                                                </span>                                                                
366
                                                        </div>
367
                                                        <div class="row">
368
                                                                <span class="info_simple big small">
369
                                                                System Disk
370
                                                                </span>
371
                                                                <span class="info_simple big small">
372
                                                                20GB
373
                                                                </span>                                                                
374
                                                        </div>
375
                                                        <div class="row">
376
                                                                <span class="info_simple big small">
377
                                                                Image
378
                                                                </span>
379
                                                                <span class="info_simple big small">
380
                                                                (deleted image)
381
                                                                </span>                                                                
382
                                                        </div>
383
                                                        <div class="row">
384
                                                                <span class="info_simple big small">
385
                                                                Image Size
386
                                                                </span>
387
                                                                <span class="info_simple big small">
388
                                                                (none)
389
                                                                </span>                                                                
390
                                                        </div>
391
                                                        <div class="row">
392
                                                                <span class="info_simple big small">
393
                                                                IPv4
394
                                                                </span>
395
                                                                <span class="info_simple big small">
396
                                                                83.212.97.127
397
                                                                </span>                                                                
398
                                                        </div>
399
                                                        <div class="row">
400
                                                                <span class="info_simple big small">
401
                                                                IPv6
402
                                                                </span>
403
                                                                <span class="info_simple big small">
404
                                                                2001:648:2ffc:1112:a80c:eaff:fe15:baee
405
                                                                </span>                                                                
406
                                                        </div>
407
                                                </div>
408
                                        </div>
409
                                </div>
410
                        </section>
411

    
412

    
413

    
414
                                <section class="wrap border-bottom-style1 info">
415
                                <div class="tba">
416
                                        <div class="section_header">
417
                                                tags
418
                                        </div>
419
                                        <div class="right_side">
420
                                                <div class="middle_side">
421
                                                        <div class="row">
422
                                                                <span class="info_simple big small">
423
                                                                Owner
424
                                                                </span>
425
                                                                <span class="info_simple big small">
426
                                                                Kick ass dude
427
                                                                </span>                                                                
428
                                                        </div>
429
                                                        <div class="row">
430
                                                                <span class="info_simple big small">
431
                                                                Role
432
                                                                </span>
433
                                                                <span class="info_simple big small">
434
                                                                Nothing
435
                                                                </span>                                                                
436
                                                        </div>
437
                                                        <div class="row">
438
                                                                <span class="info_simple big small">
439
                                                                OS
440
                                                                </span>
441
                                                                <span class="info_simple big small">
442
                                                                Windows
443
                                                                </span>                                                                
444
                                                        </div>
445
                                                        <div class="row">
446
                                                                <span class="info_simple big small">
447
                                                                <br><a class="black" href="">+ Add new tag</a>
448
                                                                </span>
449
                                                        </div>
450
                                                </div>
451
                                        </div>
452
                                </div>
453
                        </section>
454
                        <section class="info">
455
                                <div class="row">
456
                                        <span class="section_header">
457
                                                CPU utilization
458
                                        </span>
459
                                        <div class="graph_container">
460
                                                <img src="images/cpu-ts.png">
461
                                        </div>                
462
                                </div>
463
                                <div class="row">
464
                                        <span class="section_header">
465
                                                network utilization
466
                                        </span>
467
                                        <div class="graph_container">
468
                                                <img src="images/net-ts.png">
469
                                        </div>                
470
                                </div>
471
                        </section>
472
                </div>
473
        </div>
474
        <div class="extras">
475
                <span data-tooltip ="has-tip  suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
476
                <span data-tooltip ="has-tip  questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
477
                <span data-tooltip ="has-tip  problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
478
        </div>
479
 <div id="vm-connect" class="reveal-modal medium">
480
                  <p>A direct connection to this machine can be established using the <a target="_blank" href="http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
481
                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</spam></p>
482

    
483
                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
484
                  <a class="close-reveal-modal" title="close window">&#215;</a>
485
        </div>
486
  <script src="javascripts/vendor/jquery.js"></script>
487
  <script src="javascripts/foundation/foundation.js"></script>
488
        
489
        <script src="javascripts/foundation/foundation.alerts.js"></script>
490
        
491
        <script src="javascripts/foundation/foundation.clearing.js"></script>
492
        
493
        <script src="javascripts/foundation/foundation.cookie.js"></script>
494
        
495
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
496
        
497
        <script src="javascripts/foundation/foundation.forms.js"></script>
498
        
499
        <script src="javascripts/foundation/foundation.joyride.js"></script>
500
        
501
        <script src="javascripts/foundation/foundation.magellan.js"></script>
502
        
503
        <script src="javascripts/foundation/foundation.orbit.js"></script>
504
        
505
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
506
        
507
        <script src="javascripts/foundation/foundation.reveal.js"></script>
508
        
509
        <script src="javascripts/foundation/foundation.section.js"></script>
510
        
511
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
512
        
513
        <script src="javascripts/foundation/foundation.topbar.js"></script>
514
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
515
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
516
        
517
        <script src="javascripts/common.js"></script>
518
        
519
  
520
  <script>
521
    $(document).foundation();
522
  </script>
523
</body>
524
</html>