Revision f0498685 snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/network_details.html | ||
|---|---|---|
| 6 | 6 |
<head> |
| 7 | 7 |
<meta charset="utf-8" /> |
| 8 | 8 |
<meta name="viewport" content="width=device-width" /> |
| 9 |
<title>Synnefo | Network details</title>
|
|
| 9 |
<title>Network details</title> |
|
| 10 | 10 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'> |
| 11 | 11 |
<link rel="stylesheet" href="stylesheets/normalize.css" /> |
| 12 | 12 |
<link rel="stylesheet" href="stylesheets/app.css" /> |
| ... | ... | |
| 38 | 38 |
</div> |
| 39 | 39 |
</div> |
| 40 | 40 |
<div class="logo"> |
| 41 |
<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
|
|
| 41 |
<a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
|
|
| 42 | 42 |
</div> |
| 43 | 43 |
</header> |
| 44 | 44 |
<div class="overlay-wrapper"> |
| 45 | 45 |
<section class="actions-bar clearfix"> |
| 46 | 46 |
<h2><a href="vm_list.html">Networks</a> > My Awesome network</h2> |
| 47 | 47 |
<div class="view-type"> |
| 48 |
<a href="" class="list" title="list view"><span class="snf-singleview current"></span></a> |
|
| 49 |
<a href="" class="grid" title="grid view"><span class="snf-gridview"></span></a> |
|
| 48 | 50 |
<a href="" class="list" title="list view"><span class="snf-listview "></span></a> |
| 49 |
<a href="" class="grid" title="grid view"><span class="snf-gridview current"></span></a> |
|
| 50 | 51 |
</div> |
| 51 | 52 |
<div class="filter-menu"> |
| 52 | 53 |
<a class="filter" href="">Filter</a> |
| ... | ... | |
| 66 | 67 |
</section> |
| 67 | 68 |
<div class="main row"> |
| 68 | 69 |
<div class="network details running"> |
| 70 |
<a href="" class="toggle-lt-bar">...</a> |
|
| 71 |
<div class="lt-bar"> |
|
| 72 |
<div class="scroll-wrap"> |
|
| 73 |
<ul class="items-list"> |
|
| 74 |
<li data-status="running" class="running"> |
|
| 75 |
<div class="more"> |
|
| 76 |
</div> |
|
| 77 |
<div class="container"> |
|
| 78 |
<div class="check"> |
|
| 79 |
<span class="snf-checkbox-unchecked"></span> |
|
| 80 |
</div> |
|
| 81 |
<div class="img-wrap"> |
|
| 82 |
<span class="snf-network_full font-icon"></span> |
|
| 83 |
</div> |
|
| 84 |
<h4>vm name 1 really large name vm name vm 1 really large name vm</h4> |
|
| 85 |
<div class="actions"> |
|
| 86 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a> |
|
| 87 |
<a href="vm_details.html" title="view vm details" class="snf-info_outline"></a> |
|
| 88 |
</div> |
|
| 89 |
<div class= "status"> |
|
| 90 |
<span class="state"></span> |
|
| 91 |
</div> |
|
| 92 |
<div class="tags"> |
|
| 93 |
<a href="" class="tag tag1 has-tip" data-tooltip title="Tooltip1"> </a> |
|
| 94 |
<a href="" class="tag tag2 has-tip" data-tooltip title="Tooltip2"> </a> |
|
| 95 |
</div> |
|
| 96 |
<div class="info"></div> |
|
| 97 |
</div> |
|
| 98 |
</li> |
|
| 99 |
<li data-status="error" class="error"> |
|
| 100 |
<div class="more"> |
|
| 101 |
</div> |
|
| 102 |
<div class="container"> |
|
| 103 |
<div class="check"> |
|
| 104 |
<span class="snf-checkbox-unchecked"></span> |
|
| 105 |
</div> |
|
| 106 |
<div class="img-wrap"> |
|
| 107 |
<span class="snf-network_full font-icon"></span> |
|
| 108 |
</div> |
|
| 109 |
<h4>Private Network</h4> |
|
| 110 |
<div class="actions"> |
|
| 111 |
<a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a> |
|
| 112 |
<a href="vm_details.html" title="view vm details" class="snf-info_outline"></a> |
|
| 113 |
</div> |
|
| 114 |
<div class= "status"> |
|
| 115 |
<span class="state">Error</span> |
|
| 116 |
</div> |
|
| 117 |
<div class="tags"> |
|
| 118 |
</div> |
|
| 119 |
<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div> |
|
| 120 |
</div> |
|
| 121 |
</li> |
|
| 122 |
|
|
| 123 |
</ul> |
|
| 124 |
</div> |
|
| 125 |
</div> |
|
| 69 | 126 |
<section class="top"> |
| 70 | 127 |
<div class="lt"> |
| 71 | 128 |
<div class="img-wrap"> |
| ... | ... | |
| 74 | 131 |
</div> |
| 75 | 132 |
<div class="rt"> |
| 76 | 133 |
<div class="title"> |
| 77 |
<h1>Internet access 001:648:2ffc:1112:a80c:eaff:fe15:baee</h1>
|
|
| 134 |
<h1>Public Network</h1>
|
|
| 78 | 135 |
</div> |
| 79 | 136 |
<div class="actions"> |
| 80 | 137 |
<ul> |
| 81 |
<li><a href="">Start</a></li>
|
|
| 82 |
<li><a href="">Shutdown</a></li>
|
|
| 138 |
<li><a href="">Add Machine</a></li>
|
|
| 139 |
<li><a href="">Destroy</a></li>
|
|
| 83 | 140 |
</ul> |
| 84 | 141 |
</div> |
| 85 | 142 |
<div class="tabs"> |
| ... | ... | |
| 94 | 151 |
<section class="info-block"> |
| 95 | 152 |
<h2>info</h2> |
| 96 | 153 |
<dl> |
| 97 |
<dt><span class="snf-cpu icon"></span>CPUs</dt> |
|
| 154 |
<dt><span class="font-icon"></span>Project</dt> |
|
| 155 |
<dd>Basic Project</dd> |
|
| 156 |
<dt><span class="font-icon"></span>Name</dt> |
|
| 157 |
<dd>Public Network</dd> |
|
| 158 |
<dt><span class="snf-PC_fill font-icon"></span>Connected Machines</dt> |
|
| 98 | 159 |
<dd>4</dd> |
| 99 |
<dt><span class="snf-ram icon"></span>RAM</dt> |
|
| 100 |
<dd>512 MB</dd> |
|
| 101 |
<dt><span class="snf-HDD icon"></span>System Disk Size</dt> |
|
| 102 |
<dd>4GB</dd> |
|
| 103 |
<dt><span class="snf-HDD icon"></span>Storage Type</dt> |
|
| 104 |
<dd>Archipelago</dd> |
|
| 105 |
<dt><span class="snf-images icon"></span>Image Name</dt> |
|
| 106 |
<dd>Fedora</dd> |
|
| 107 |
<dt><span class="snf-images icon"></span>Image Size</dt> |
|
| 108 |
<dd>3.68 GB</dd> |
|
| 109 |
<dt><span class="snf-ram icon"></span>IPv4</dt> |
|
| 110 |
<dd>83.212.96.152</dd> |
|
| 111 |
<dt><span class="snf-ram icon"></span>IPv4</dt> |
|
| 112 |
<dd>83.212.96.153</dd> |
|
| 113 |
<dt><span class="snf-ram icon"></span>IPv6</dt> |
|
| 114 |
<dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd> |
|
| 115 | 160 |
</dl> |
| 116 | 161 |
</section> |
| 117 | 162 |
</section> |
| ... | ... | |
| 128 | 173 |
<ul class="connections"> |
| 129 | 174 |
<li> |
| 130 | 175 |
<a href="#" class="act"> </a> |
| 131 |
<div class="icon"><span class="snf-info_outline"></span></div>
|
|
| 176 |
<div class="icon"><span class="snf-nic-full"></span></div>
|
|
| 132 | 177 |
<div class="data"> |
| 133 | 178 |
<ul> |
| 134 | 179 |
<li> |
| ... | ... | |
| 171 | 216 |
<ul class="connections"> |
| 172 | 217 |
<li> |
| 173 | 218 |
<a href="#" class="act"> </a> |
| 174 |
<div class="icon"><span class="snf-info_outline"></span></div>
|
|
| 219 |
<div class="icon"><span class="snf-nic-full"></span></div>
|
|
| 175 | 220 |
<div class="data"> |
| 176 | 221 |
<ul> |
| 177 | 222 |
<li> |
| ... | ... | |
| 187 | 232 |
</li> |
| 188 | 233 |
<li> |
| 189 | 234 |
<a href="#" class="act"> </a> |
| 190 |
<div class="icon"><span class="snf-info_outline"></span></div>
|
|
| 235 |
<div class="icon"><span class="snf-nic-full"></span></div>
|
|
| 191 | 236 |
<div class="data"> |
| 192 | 237 |
<ul> |
| 193 | 238 |
<li> |
| ... | ... | |
| 199 | 244 |
</li> |
| 200 | 245 |
<li> |
| 201 | 246 |
<a href="#" class="act"> </a> |
| 202 |
<div class="icon"><span class="snf-info_outline"></span></div>
|
|
| 247 |
<div class="icon"><span class="snf-nic-full"></span></div>
|
|
| 203 | 248 |
<div class="data"> |
| 204 | 249 |
<ul> |
| 205 | 250 |
<li> |
| ... | ... | |
| 242 | 287 |
<ul class="connections"> |
| 243 | 288 |
<li> |
| 244 | 289 |
<a href="#" class="act"> </a> |
| 245 |
<div class="icon"><span class="snf-info_outline"></span></div>
|
|
| 290 |
<div class="icon"><span class="snf-nic-full"></span></div>
|
|
| 246 | 291 |
<div class="data"> |
| 247 | 292 |
<ul> |
| 248 | 293 |
<li> |
Also available in: Unified diff