Revision 1fda8642 snf-cyclades-app/synnefo/ui/new_ui/ui/vm_details.html

b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_details.html
50 50 
		<a href="#" class="close" title="hide message">close</a>
51 51 
	</div>
52 52 
	<div class="overlay-wrapper">
53 
		<div id="start-confirm" class="reveal-modal medium">
54 
			<p class="message-forimg">Are you sure you want to turn on your machine?</p>
55 
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
56 
			<a class="close-reveal-modal" title="close window">X</a>
57 
		</div>
58 
		<div id="reboot-confirm" class="reveal-modal medium">
59 
			<p class="message-forimg">Are you sure you want to reboot your machine?</p>
60 
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
61 
			<a class="close-reveal-modal" title="close window">X</a>
62 
		</div>
63 
		<div id="shutdown-confirm" class="reveal-modal medium">
64 
			<p class="message-forimg">Are you sure you want to shutdown your machine?</p>
65 
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
66 
			<a class="close-reveal-modal" title="close window">X</a>
67 
		</div>
68 
		<div id="destroy-vm-confirm" class="reveal-modal medium">
69 
			<p class="message-forimg">Are you sure you want to destroy your machine?</p>
70 
			<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
71 
			<a class="close-reveal-modal" title="close window">X</a>
72 
		</div>
73 
	 	<div id="vm-connect" class="reveal-modal medium">
74 
	  		<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>
75 
			<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
76 

  		





  
  77
  
    
			<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>


  		





  
  78
  
    
	  		<a class="close-reveal-modal" title="close window">&#215;</a>


  		





  
  79
  
    
		</div>


  		





  53
  80
  
    
		<section class="actions-bar clearfix">


  		





  54
  81
  
    
			<h2><a href="vm_list.html">Virtual Machines</a> > My Awesome machine</h2>


  		





  55
  82
  
    
			<div class="view-type">


  		





  ......




  73
  100
  
    
			</div>


  		





  74
  101
  
    
		</section>


  		





  75
  102
  
    
		<div class="main row">


  		





  76
  
  
    
			<div class="details running">


  		





  
  103
  
    
			<div class="vm details running">


  		





  77
  104
  
    
				<section class="top">


  		





  78
  105
  
    
					<div class="lt">


  		





  79
  106
  
    
						<div class="img-wrap">


  		





  ......




  87
  114
  
    
						</div>


  		





  88
  115
  
    
						<div class="actions">


  		





  89
  116
  
    
							<ul>


  		





  90
  
  
    
								<li><a href="">Start</a></li>


  		





  91
  
  
    
								<li><a href="">Shutdown</a></li>


  		





  92
  
  
    
								<li><a href="">Reboot</a></li>


  		





  93
  
  
    
								<li><a href="">Destroy</a></li>


  		





  
  117
  
    
								<li><a href="" data-reveal-id="start-confirm">Start</a></li>


  		





  
  118
  
    
								<li><a href="" data-reveal-id="shutdown-confirm">Shutdown</a></li>


  		





  
  119
  
    
								<li><a href="" data-reveal-id="reboot-confirm">Reboot</a></li>


  		





  
  120
  
    
								<li><a href="" data-reveal-id="destroy-vm-confirm">Destroy</a></li>


  		





  94
  121
  
    
							</ul>


  		





  95
  122
  
    
						</div>


  		





  96
  123
  
    
						<div class="tabs">


  		





  97
  124
  
    
							<ul>


  		





  98
  
  
    
								<li><a href="" class="current"><span class="snf-info_outline"></span></a></li>


  		





  99
  
  
    
								<li><a href=""><span class="snf-HDD"></span></a></li>


  		





  100
  
  
    
								<li><a href=""><span class="snf-network_full"></span></a></li>


  		





  
  125
  
    
								<li><a href="#info" class="active"><span class="snf-info_outline"></span></a></li>


  		





  
  126
  
    
								<li><a href="#disk-connected"><span class="snf-HDD"></span></a></li>


  		





  
  127
  
    
								<li><a href="#network-connected"><span class="snf-network_full"></span></a></li>


  		





  101
  128
  
    
							</ul>


  		





  102
  129
  
    
						</div>


  		





  103
  130
  
    
					</div>


  		





  104
  131
  
    
				</section>


  		





  105
  
  
    
				<section class="content info-simple">


  		





  
  132
  
    
				<section class="content info-simple" id="info">


  		





  106
  133
  
    
					<section class="info-block">


  		





  107
  134
  
    
						<h2>info</h2>


  		





  108
  135
  
    
						<dl>


  		





  ......




  126
  153
  
    
							<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>


  		





  127
  154
  
    
						</dl>


  		





  128
  155
  
    
					</section>


  		





  129
  
  
    
				<section class="info-block tags">


  		





  
  156
  
    
					<section class="info-block tags">


  		





  130
  157
  
    
						<h2>tags</h2>


  		





  131
  158
  
    
						<div class="editable">


  		





  132
  159
  
    
							<a href="" class="tag tag1 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>


  		





  ......




  186
  213
  
    
								<a class="btn1 hide-add-tag" href="">CANCEL</a>


  		





  187
  214
  
    
							</div>


  		





  188
  215
  
    
						</div>


  		





  
  216
  
    
					</section>


  		





  
  217
  
    
					<section class="info-block charts">


  		





  
  218
  
    
						<div>


  		





  
  219
  
    
							<h2>CPU utilization</h2>


  		





  
  220
  
    
							<div class="graph_container">


  		





  
  221
  
    
								<img src="images/cpu-ts.png" alt="CPU utilization graph">


  		





  
  222
  
    
							</div>


  		





  
  223
  
    
						</div>


  		





  
  224
  
    
						<div>


  		





  
  225
  
    
							<h2>Network utilization</h2>


  		





  
  226
  
    
							<div class="graph_container">


  		





  
  227
  
    
								<img src="images/net-ts.png" alt="network utilization graph">


  		





  
  228
  
    
							</div>


  		





  
  229
  
    
						</div>


  		





  
  230
  
    
					</section>


  		





  189
  231
  
    
				</section>


  		





  190
  
  
    
				<section class="info-block charts">


  		





  191
  
  
    
					<div>


  		





  192
  
  
    
						<h2>CPU utilization</h2>


  		





  193
  
  
    
						<div class="graph_container">


  		





  194
  
  
    
							<img src="images/cpu-ts.png" alt="CPU utilization graph">


  		





  195
  
  
    
						</div>		


  		





  196
  
  
    
					</div>


  		





  197
  
  
    
					<div>


  		





  198
  
  
    
						<h2>Network utilization</h2>


  		





  199
  
  
    
						<div class="graph_container">


  		





  200
  
  
    
							<img src="images/net-ts.png" alt="network utilization graph">


  		





  201
  
  
    
						</div>		


  		





  202
  
  
    
					</div>


  		





  203
  
  
    
				</section>


  		





  
  232
  
    
				<section class="content connected" id="network-connected" style="display:block">


  		





  
  233
  
    
					<section class="item error">


  		





  
  234
  
    
						<div class="what">


  		





  
  235
  
    
							<div class="img-wrap">


  		





  
  236
  
    
								<span class="snf-PC_fill"></span>


  		





  
  237
  
    
								<span class="os fedora">fedora</span>


  		





  
  238
  
    
							</div>


  		





  
  239
  
    
							<h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>


  		





  
  240
  
    
						</div>


  		





  
  241
  
    
						<div class="clearfix">


  		





  
  242
  
    
							<ul class="connections">


  		





  
  243
  
    
								<li>


  		





  
  244
  
    
									<a href="#" class="act">act</a>


  		





  
  245
  
    
									<div class="icon"><span class="snf-info_outline"></span></div>


  		





  
  246
  
    
									<div class="data">


  		





  
  247
  
    
										<ul>


  		





  
  248
  
    
											<li>


  		





  
  249
  
    
												<h5>ipv6</h5>


  		





  
  250
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>


  		





  
  251
  
    
											</li>


  		





  
  252
  
    
											<li>


  		





  
  253
  
    
												<h5>ipv6</h5>


  		





  
  254
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee</p>


  		





  
  255
  
    
											</li>


  		





  
  256
  
    
										</ul>


  		





  
  257
  
    
									</div>


  		





  
  258
  
    
								</li>


  		





  
  259
  
    
							</ul>


  		





  
  260
  
    
							<div class="firewall" data-firewall="fully">


  		





  
  261
  
    
								<p>Firewall <em>on</em></p>


  		





  
  262
  
    
								<div class="more">


  		





  
  263
  
    
									<p class="fully">


  		





  
  264
  
    
										<a href="">Fully protected mode<span class="snf-radio-checked"></span><em>on</em></a>


  		





  
  265
  
    
									</p>


  		





  
  266
  
    
									<p class="basic">


  		





  
  267
  
    
										<a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>


  		





  
  268
  
    
									</p>


  		





  
  269
  
    
									<p class="unprotected">


  		





  
  270
  
    
										<a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>


  		





  
  271
  
    
									</p>


  		





  
  272
  
    
								</div>


  		





  
  273
  
    
							</div>


  		





  
  274
  
    
						</div>


  		





  
  275
  
    
					</section>


  		





  
  276
  
    
					<section class="item running">


  		





  
  277
  
    
						<div class="what">


  		





  
  278
  
    
							<div class="img-wrap">


  		





  
  279
  
    
								<span class="snf-network_full"></span>


  		





  
  280
  
    
							</div>


  		





  
  281
  
    
							<h4>My Awesome Network</h4>


  		





  
  282
  
    
						</div>


  		





  
  283
  
    
						<div class="clearfix">


  		





  
  284
  
    
							<ul class="connections">


  		





  
  285
  
    
								<li>


  		





  
  286
  
    
									<a href="#" class="act">act</a>


  		





  
  287
  
    
									<div class="icon"><span class="snf-info_outline"></span></div>


  		





  
  288
  
    
									<div class="data">


  		





  
  289
  
    
										<ul>


  		





  
  290
  
    
											<li>


  		





  
  291
  
    
												<h5>ipv6</h5>


  		





  
  292
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>


  		





  
  293
  
    
											</li>


  		





  
  294
  
    
											<li>


  		





  
  295
  
    
												<h5>ipv4</h5>


  		





  
  296
  
    
												<p>001:648:2ffc</p>


  		





  
  297
  
    
											</li>


  		





  
  298
  
    
										</ul>


  		





  
  299
  
    
									</div>


  		





  
  300
  
    
								</li>


  		





  
  301
  
    
								<li>


  		





  
  302
  
    
									<a href="#" class="act">act</a>


  		





  
  303
  
    
									<div class="icon"><span class="snf-info_outline"></span></div>


  		





  
  304
  
    
									<div class="data">


  		





  
  305
  
    
										<ul>


  		





  
  306
  
    
											<li>


  		





  
  307
  
    
												<h5>ipv6</h5>


  		





  
  308
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>


  		





  
  309
  
    
											</li>


  		





  
  310
  
    
										</ul>


  		





  
  311
  
    
									</div>


  		





  
  312
  
    
								</li>


  		





  
  313
  
    
								<li>


  		





  
  314
  
    
									<a href="#" class="act">act</a>


  		





  
  315
  
    
									<div class="icon"><span class="snf-info_outline"></span></div>


  		





  
  316
  
    
									<div class="data">


  		





  
  317
  
    
										<ul>


  		





  
  318
  
    
											<li>


  		





  
  319
  
    
												<h5>ipv6</h5>


  		





  
  320
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>


  		





  
  321
  
    
											</li>


  		





  
  322
  
    
											<li>


  		





  
  323
  
    
												<h5>ipv6</h5>


  		





  
  324
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee</p>


  		





  
  325
  
    
											</li>


  		





  
  326
  
    
										</ul>


  		





  
  327
  
    
									</div>


  		





  
  328
  
    
								</li>


  		





  
  329
  
    
							</ul>


  		





  
  330
  
    
							<div class="firewall" data-firewall="basic">


  		





  
  331
  
    
								<p>Firewall <em>on</em></p>


  		





  
  332
  
    
								<div class="more">


  		





  
  333
  
    
									<p class="fully">


  		





  
  334
  
    
										<a href="">Fully protected mode<span class="snf-radio-unchecked"></span><em>on</em></a>


  		





  
  335
  
    
									</p>


  		





  
  336
  
    
									<p class="basic">


  		





  
  337
  
    
										<a href="">Basically protected mode<span class="snf-radio-checked"></span><em>off</em></a>


  		





  
  338
  
    
									</p>


  		





  
  339
  
    
									<p class="unprotected">


  		





  
  340
  
    
										<a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>


  		





  
  341
  
    
									</p>


  		





  
  342
  
    
								</div>


  		





  
  343
  
    
							</div>


  		





  
  344
  
    
						</div>


  		





  
  345
  
    
					</section>


  		





  
  346
  
    
					<section class="item running">


  		





  
  347
  
    
						<div class="what">


  		





  
  348
  
    
							<div class="img-wrap">


  		





  
  349
  
    
								<span class="snf-PC_fill"></span>


  		





  
  350
  
    
								<span class="os fedora">fedora</span>


  		





  
  351
  
    
							</div>


  		





  
  352
  
    
							<h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>


  		





  
  353
  
    
						</div>


  		





  
  354
  
    
						<div class="clearfix">


  		





  
  355
  
    
							<ul class="connections">


  		





  
  356
  
    
								<li>


  		





  
  357
  
    
									<a href="#" class="act">act</a>


  		





  
  358
  
    
									<div class="icon"><span class="snf-info_outline"></span></div>


  		





  
  359
  
    
									<div class="data">


  		





  
  360
  
    
										<ul>


  		





  
  361
  
    
											<li>


  		





  
  362
  
    
												<h5>ipv6</h5>


  		





  
  363
  
    
												<p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>


  		





  
  364
  
    
											</li>


  		





  
  365
  
    
										</ul>


  		





  
  366
  
    
									</div>


  		





  
  367
  
    
								</li>


  		





  
  368
  
    
							</ul>


  		





  
  369
  
    
							<div class="firewall" data-firewall="unprotected">


  		





  
  370
  
    
								<p>Firewall <em>on</em></p>


  		





  
  371
  
    
								<div class="more">


  		





  
  372
  
    
									<p class="fully">


  		





  
  373
  
    
										<a href="">Fully protected mode<span class="snf-radio-unchecked"></span><em>on</em></a>


  		





  
  374
  
    
									</p>


  		





  
  375
  
    
									<p class="basic">


  		





  
  376
  
    
										<a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>


  		





  
  377
  
    
									</p>


  		





  
  378
  
    
									<p class="unprotected">


  		





  
  379
  
    
										<a href="">Unprotected mode<span class="snf-radio-checked"></span><em>off</em></a>


  		





  
  380
  
    
									</p>


  		





  
  381
  
    
								</div>


  		





  
  382
  
    
							</div>


  		





  
  383
  
    
						</div>


  		





  
  384
  
    
					</section>


  		





  
  385
  
    
					<section class="connect-new">


  		





  
  386
  
    
						<div class="img-wrap">


  		





  
  387
  
    
							<a href="">


  		





  
  388
  
    
								<span class="snf-PC_fill"></span>


  		





  
  389
  
    
								<span class="symbol">+</span>


  		





  
  390
  
    
							</a>


  		





  
  391
  
    
						</div>


  		





  
  392
  
    
						<p><a href="">Connect Machine</a></p>


  		





  
  393
  
    
					</section>


  		





  204
  394
  
    
				</section>


  		





  
  395
  
    
				<div class="placeholder"></div>


  		





  205
  396
  
    
			</div>


  		





  206
  397
  
    
		</div>


  		





  207
  
  
    

  		





  208
  
  
    
	</div>


  		





  209
  
  
    
 	<div id="vm-connect" class="reveal-modal medium">


  		





  210
  
  
    
  		<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>


  		





  211
  
  
    
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>


  		





  212
  
  
    

  		





  213
  
  
    
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>


  		





  214
  
  
    
  		<a class="close-reveal-modal" title="close window">&#215;</a>


  		





  215
  398
  
    
	</div>


  		





  216
  399
  
    
  <script src="javascripts/vendor/jquery.js"></script>


  		





  217
  400
  
    
  <script src="javascripts/foundation/foundation.js"></script>


  		












Also available in:
  Unified diff