Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ 27a54f35

History | View | Annotate | Download (13.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>Synnefo | 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/app.css" />
13
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
14
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
17
</head>
18
<body>
19
        <header class="header">
20
                <nav>
21
                        <ul class="icons-nav">
22
                                <li><a href="vm_list.html" data-tooltip ="has-tip " title="Machines"><span class="snf-PC_fill"></span></a></li>
23
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network"></span></a></li>
24
                                <li><a href="" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
25
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
26
                        </ul>
27
                </nav>
28
                <div class="login">
29
                        <a href=""><span class="snf-lock_open"></span></a>
30
                </div>
31
                <div class="logo">
32
                        <a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
33
                </div>
34
        </header>
35
        <div class="info top-info alert">
36
                <div class="wrap">
37
                        <p>ALERT!</p>
38
                        <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
39
                </div>
40
                <a href="#" class="close" title="hide message">close</a>
41
        </div>
42
        <div class="overlay-wrapper">
43
                <section class="actions-bar clearfix">
44
                        <div class="row">
45
                                <div class="new-btn"><a href="" data-overlay-id="#vm-wizard"><span>+</span> NEW MACHINE </a></div>
46
                                <div class="main-actions">
47
                                </div>
48
                        </div>
49
                        <div class="border-dashed"></div>
50
                </section>
51
                <div class="lt-sidebar vms scroll-pane">
52
                        <ul class="items-list">
53
                                <li>
54
                                        <div class="img running">
55
                                                <span class="snf-PC_fill"></span>
56
                                                <span class="os kubuntu">kubuntu</span>
57
                                        </div>
58
                                        <p class="visible-info">
59
                                                <span>IPv4 83.212.97.127</span>
60
                                                <span>vm name</span>
61
                                        </p>
62
                                </li>
63
                                <li class="current">
64
                                        <div class="img running">
65
                                                <span class="snf-PC_fill"></span>
66
                                                <span class="os windows">os</span>
67
                                        </div>
68
                                        <p class="visible-info">
69
                                                <span>IPv4 83.212.97.127</span>
70
                                                <span>vm name</span>
71
                                        </p>
72
                                </li>
73
                                <li>
74
                                        <div class="img running">
75
                                                <span class="snf-PC_fill"></span>
76
                                                <span class="os windows">os</span>
77
                                        </div>
78
                                        <p class="visible-info">
79
                                                <span>IPv4 83.212.97.127</span>
80
                                                <span>vm name</span>
81
                                        </p>
82
                                </li>
83
                                <li>
84
                                        <div class="img running">
85
                                                <span class="snf-PC_fill"></span>
86
                                                <span class="os windows">os</span>
87
                                        </div>
88
                                        <p class="visible-info">
89
                                                <span>IPv4 83.212.97.127</span>
90
                                                <span>vm name</span>
91
                                        </p>
92
                                </li>
93
                                <li>
94
                                        <div class="img running">
95
                                                <span class="snf-PC_fill"></span>
96
                                                <span class="os windows">os</span>
97
                                        </div>
98
                                        <p class="visible-info">
99
                                                <span>IPv4 83.212.97.127</span>
100
                                                <span>vm name</span>
101
                                        </p>
102
                                </li><li>
103
                                        <div class="img running">
104
                                                <span class="snf-PC_fill"></span>
105
                                                <span class="os windows">os</span>
106
                                        </div>
107
                                        <p class="visible-info">
108
                                                <span>IPv4 83.212.97.127</span>
109
                                                <span>vm name</span>
110
                                        </p>
111
                                </li>
112
                                <li>
113
                                        <div class="img running">
114
                                                <span class="snf-PC_fill"></span>
115
                                                <span class="os windows">os</span>
116
                                        </div>
117
                                        <p class="visible-info">
118
                                                <span>IPv4 83.212.97.127</span>
119
                                                <span>vm name</span>
120
                                        </p>
121
                                </li>
122

    
123
                                <li class="current">
124
                                        <div class="img running">
125
                                                <span class="snf-PC_fill"></span>
126
                                                <span class="os fedora">os</span>
127
                                        </div>
128
                                        <p class="visible-info">
129
                                                <span>IPv4 83.212.97.127</span>
130
                                                <span>vm name</span>
131
                                        </p>
132
                                </li>
133
                                <li>
134
                                        <div class="img stopped">
135
                                                <span class="snf-PC_fill"></span>
136
                                                <span class="os kubuntu">os</span>
137
                                        </div>
138
                                        <p class="visible-info">
139
                                                <span>IPv4 83.212.97.127</span>
140
                                                <span>vm name</span>
141
                                        </p>
142
                                </li>
143
                                <li>
144
                                        <div class="img running">
145
                                                <span class="snf-PC_fill"></span>
146
                                                <span class="os windows">os</span>
147
                                        </div>
148
                                        <p class="visible-info">
149
                                                <span>IPv4 83.212.97.127</span>
150
                                                <span>vm name</span>
151
                                        </p>
152
                                </li>
153
                                <li>
154
                                        <div class="img running">
155
                                                <span class="snf-PC_fill"></span>
156
                                                <span class="os kubuntu">os</span>
157
                                        </div>
158
                                        <p class="visible-info">
159
                                                <span>IPv4 83.212.97.127</span>
160
                                                <span>vm name</span>
161
                                        </p>
162
                                </li>
163
                                <li>
164
                                        <div class="img running">
165
                                                <span class="snf-PC_fill"></span>
166
                                                <span class="os">os</span>
167
                                        </div>
168
                                        <p class="visible-info">
169
                                                <span>IPv4 83.212.97.127</span>
170
                                                <span>vm name</span>
171
                                        </p>
172
                                </li>
173
                                <li>
174
                                        <div class="img running">
175
                                                <span class="snf-PC_fill"></span>
176
                                                <span class="os windows">os</span>
177
                                        </div>
178
                                        <p class="visible-info">
179
                                                <span>IPv4 83.212.97.127</span>
180
                                                <span>vm name</span>
181
                                        </p>
182
                                </li>
183
                        </ul>
184
                </div>
185
                <div class="main details vm">
186
                        <a href="vm_list.html" class="close" title="back to vm list"><span class="snf-cancel-circled"></span></a>
187
                        <div class="top border-bottom-style1">
188
                                <div class="img running">
189
                                        <span class="snf-PC_fill"></span>
190
                                        <span class="os windows">os</span>
191
                                </div>
192
                                <div class="actions">
193
                                        <ul>
194
                                                <li><a href="#" data-reveal-id="vm-connect">connect</a></li>
195
                                                
196
                                        </ul>
197
                                </div>
198
                        </div>
199
                        <section class="border-bottom-style1 info">
200
                                <dl>
201
                                        <dt>Name</dt>
202
                                        <dd class="editable">
203
                                                <span class="input-txt">vm name</span>
204
                                                <input type="text">
205
                                                <div class="editbuttons">
206
                                                        <a href="#" class="edit"><span class="snf-edit-1"></span></a>
207
                                                        <a href="#" class="save"><span class="snf-ok-sign"></span></a>
208
                                                        <a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>
209
                                                </div>
210
                                        </dd>
211
                                        <dt>Status</dt>
212
                                        <dd>running</dd>
213
                                        <dt>OS</dt>
214
                                        <dd ><img class="os" src="images/os-windows.png" alt="Windows Image"> Windows</dd>
215
                                        <dt>IPv4</dt>
216
                                        <dd>83.212.97.127</dd>
217
                                </dl>
218
                        </section>
219
                        <section class="border-bottom-style1 info">
220
                                <div class="section_header">
221
                                        disks
222
                                </div>
223
                                <div class="right_side">
224
                                        <div class="middle_side">
225
                                                <p>
226
                                                        <span class="info_simple big small small">30GB info info info</span>
227
                                                        <span class="action_links">
228
                                                                <a href="">view</a>
229
                                                                <a href="">disconnect</a>
230
                                                        </span>
231
                                                </p>
232
                                                <p>
233
                                                        <span class="info_simple big small small">30GB info info info</span>
234
                                                        <span class="action_links">
235
                                                                <a href="">view</a>
236
                                                                <a href="">disconnect</a>
237
                                                        </span>
238
                                                </p>
239
                                                <p>
240
                                                        <span class="info_simple big small small">30GB info info info</span>
241
                                                        <span class="action_links">
242
                                                                <a href="">view</a>
243
                                                                <a href="">disconnect</a>
244
                                                        </span>
245
                                                </p>
246
                                        </div>
247
                                        <div class="btn-img">
248
                                                <a href="">
249
                                                        add disk
250
                                                        <img src="images/menu-icon-disks.png" alt="Disk Image">
251
                                                </a>
252
                                        </div>
253
                                </div>
254
                        </section>
255
                        <section class="border-bottom-style1 info">
256
                                <div class="section_header">
257
                                        networks
258
                                </div>
259
                                <div class="right_side">
260
                                        <div class="middle_side">
261
                                                <p>
262
                                                        <span class="info_simple big small">network 1</span>
263
                                                        <span class="action_links">
264
                                                                <a href="">view</a>
265
                                                                <a href="">disconnect</a>
266
                                                        </span>
267
                                                </p>
268
                                                <p>
269
                                                        <span class="info_simple big small">network 2</span>
270
                                                        <span class="action_links">
271
                                                                <a href="">view</a>
272
                                                                <a href="">disconnect</a>
273
                                                        </span>
274
                                                </p>
275
                                                <p>
276
                                                        <span class="info_simple big small">network 3</span>
277
                                                        <span class="action_links">
278
                                                                <a href="">view</a>
279
                                                                <a href="">disconnect</a>
280
                                                        </span>
281
                                                </p>
282
                                        </div>
283
                                        <div class="btn-img">
284
                                                <a href="">
285
                                                        add network
286
                                                        <img src="images/menu-icon-networks.png" alt="Network Image">
287
                                                </a>
288
                                        </div>
289
                                </div>
290
                        </section>
291
                        <section class="border-bottom-style1 info">
292
                                <div class="section_header">
293
                                        info
294
                                </div>
295
                                <div class="right_side">
296
                                        <div class="middle_side">
297
                                                <p>
298
                                                        <span class="info_simple big small">
299
                                                        CPUs
300
                                                        </span>
301
                                                        <span class="info_simple big small">
302
                                                        4
303
                                                        </span>
304
                                                </p>
305
                                                <p>
306
                                                        <span class="info_simple big small">
307
                                                        RAM
308
                                                        </span>
309
                                                        <span class="info_simple big small">
310
                                                        2048MB
311
                                                        </span>
312
                                                </p>
313
                                                <p>
314
                                                        <span class="info_simple big small">
315
                                                        System Disk
316
                                                        </span>
317
                                                        <span class="info_simple big small">
318
                                                        20GB
319
                                                        </span>
320
                                                </p>
321
                                                <p>
322
                                                        <span class="info_simple big small">
323
                                                        Image
324
                                                        </span>
325
                                                        <span class="info_simple big small">
326
                                                        (deleted image)
327
                                                        </span>
328
                                                </p>
329
                                                <p>
330
                                                        <span class="info_simple big small">
331
                                                        Image Size
332
                                                        </span>
333
                                                        <span class="info_simple big small">
334
                                                        (none)
335
                                                        </span>
336
                                                </p>
337
                                                <p>
338
                                                        <span class="info_simple big small">
339
                                                        IPv4
340
                                                        </span>
341
                                                        <span class="info_simple big small">
342
                                                        83.212.97.127
343
                                                        </span>
344
                                                </p>
345
                                                <p>
346
                                                        <span class="info_simple big small">
347
                                                        IPv6
348
                                                        </span>
349
                                                        <span class="info_simple big small">
350
                                                        2001:648:2ffc:1112:a80c:eaff:fe15:baee
351
                                                        </span>
352
                                                </p>
353
                                        </div>
354
                                </div>
355
                        </section>
356
                        <section class="border-bottom-style1 info">
357
                                <div class="section_header">
358
                                        tags
359
                                </div>
360
                                <div class="right_side">
361
                                        <div class="middle_side">
362
                                                <p>
363
                                                        <span class="info_simple big small">
364
                                                        Owner
365
                                                        </span>
366
                                                        <span class="info_simple big small">
367
                                                        Kick ass dude
368
                                                        </span>
369
                                                </p>
370
                                                <p>
371
                                                        <span class="info_simple big small">
372
                                                        Role
373
                                                        </span>
374
                                                        <span class="info_simple big small">
375
                                                        Nothing
376
                                                        </span>
377
                                                </p>
378
                                                <p>
379
                                                        <span class="info_simple big small">
380
                                                        OS
381
                                                        </span>
382
                                                        <span class="info_simple big small">
383
                                                        Windows
384
                                                        </span>        
385
                                                </p>
386
                                                <p>
387
                                                        <span class="info_simple big small">
388
                                                        <br><a href="">+ Add new tag</a>
389
                                                        </span>
390
                                                </p>
391
                                        </div>
392
                                </div>
393
                        </section>
394
                        <section class="info">
395
                                <div>
396
                                        <span class="section_header">
397
                                                CPU utilization
398
                                        </span>
399
                                        <div class="graph_container">
400
                                                <img src="images/cpu-ts.png" alt="CPU utilization graph">
401
                                        </div>                
402
                                </div>
403
                                <div>
404
                                        <span class="section_header">
405
                                                network utilization
406
                                        </span>
407
                                        <div class="graph_container">
408
                                                <img src="images/net-ts.png" alt="network utilization graph">
409
                                        </div>                
410
                                </div>
411
                        </section>
412
                </div>
413
        </div>
414
         <div id="vm-connect" class="reveal-modal medium">
415
                  <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>
416
                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
417

    
418
                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
419
                  <a class="close-reveal-modal" title="close window">&#215;</a>
420
        </div>
421
  <script src="javascripts/vendor/jquery.js"></script>
422
  <script src="javascripts/foundation/foundation.js"></script>
423
        
424
        <script src="javascripts/foundation/foundation.alerts.js"></script>
425
        
426
        <script src="javascripts/foundation/foundation.clearing.js"></script>
427
        
428
        <script src="javascripts/foundation/foundation.cookie.js"></script>
429
        
430
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
431
        
432
        <script src="javascripts/foundation/foundation.forms.js"></script>
433
        
434
        <script src="javascripts/foundation/foundation.joyride.js"></script>
435
        
436
        <script src="javascripts/foundation/foundation.magellan.js"></script>
437
        
438
        <script src="javascripts/foundation/foundation.orbit.js"></script>
439
        
440
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
441
        
442
        <script src="javascripts/foundation/foundation.reveal.js"></script>
443
        
444
        <script src="javascripts/foundation/foundation.section.js"></script>
445
        
446
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
447
        
448
        <script src="javascripts/foundation/foundation.topbar.js"></script>
449
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
450
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
451
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
452
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
453
        
454
        <script src="javascripts/common.js"></script>
455
        
456
  
457
  <script>
458
    $(document).foundation();
459
  </script>
460
</body>
461
</html>