Revision e55b8703 ui/templates/instances.html
| b/ui/templates/instances.html | ||
|---|---|---|
| 1 |
<div id="instances" class="seperator"></div> |
|
| 2 |
|
|
| 1 | 3 |
<a id="create" rel="#wizard" href="#">Create New +</a> |
| 2 | 4 |
|
| 5 |
<div id="view-select"> |
|
| 6 |
<a id="standard" class="current" href="/">#</a> |
|
| 7 |
| |
|
| 8 |
<a id="list" href="/instances/list">=</a> |
|
| 9 |
</div> |
|
| 10 |
|
|
| 3 | 11 |
<div id="instancesview" class="standard"> |
| 4 |
<a id="list" href="/instances/list">list view</a> |
|
| 12 |
|
|
| 5 | 13 |
<div class="running"> |
| 6 | 14 |
{% for node in nodes %}
|
| 7 |
{% if node.state == '3' %}
|
|
| 15 |
{% if node.state == '3' %}
|
|
| 8 | 16 |
<div class="instance running"> |
| 9 | 17 |
<div class="actions"> |
| 10 |
<a href="#" class="action">reboot</a>
|
|
| 11 |
<a href="#" class="action">shutdown</a>
|
|
| 18 |
<a href="#" class="action">Reboot</a>
|
|
| 19 |
<a href="#" class="action">Shutdown</a>
|
|
| 12 | 20 |
<a href="#" class="more">more …</a> |
| 13 | 21 |
</div> |
| 14 | 22 |
<div class="state"> |
| ... | ... | |
| 17 | 25 |
<div class="indicator" /> |
| 18 | 26 |
<div class="indicator" /> |
| 19 | 27 |
<div class="indicator" /> |
| 20 |
<div class="uptime">24 days uptime</div> |
|
| 21 | 28 |
</div> |
| 22 |
<img src="static/server.png" />
|
|
| 29 |
<img src="static/pc.png" />
|
|
| 23 | 30 |
<img class="os" src={{ node.thumb }} />
|
| 24 | 31 |
<a href="#" class="name"> |
| 25 |
<h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
|
|
| 32 |
<h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
|
|
| 26 | 33 |
</a> |
| 27 | 34 |
<a href="#" class="ip"> |
| 28 |
<h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5>
|
|
| 29 |
</a> |
|
| 30 |
<a href="#" class="storage"> |
|
| 31 |
<h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5> |
|
| 35 |
<h5>IP: <span>{{ node.public_ip }}</span></h5>
|
|
| 32 | 36 |
</a> |
| 33 |
</div> |
|
| 37 |
<br /> |
|
| 38 |
<h5 class="storage"> |
|
| 39 |
Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days |
|
| 40 |
</h5> |
|
| 34 | 41 |
</div> |
| 35 | 42 |
{% endif %}
|
| 36 | 43 |
{% endfor %}
|
| 37 | 44 |
</div> |
| 38 |
<div class="seperator"></div> |
|
| 45 |
<div id="mini" class="seperator"></div>
|
|
| 39 | 46 |
<div class="terminated"> |
| 40 | 47 |
{% for node in nodes %}
|
| 41 |
{% if node.state == '0' %}
|
|
| 48 |
{% if node.state == '0' %}
|
|
| 42 | 49 |
<div class="instance terminated"> |
| 43 | 50 |
<div class="actions"> |
| 44 |
<a href="#" class="action">start</a>
|
|
| 45 |
<a href="#" class="action">destroy</a>
|
|
| 51 |
<a href="#" class="action">Start</a>
|
|
| 52 |
<a href="#" class="action">Destroy</a>
|
|
| 46 | 53 |
<a href="#" class="more">more …</a> |
| 47 | 54 |
</div> |
| 48 | 55 |
<div class="state"> |
| 49 |
<div>Stopped</div>
|
|
| 56 |
<div>Terminated</div>
|
|
| 50 | 57 |
<div class="indicator" /> |
| 51 | 58 |
<div class="indicator" /> |
| 52 | 59 |
<div class="indicator" /> |
| 53 | 60 |
<div class="indicator" /> |
| 54 | 61 |
</div> |
| 55 |
<img src="static/server.png" />
|
|
| 62 |
<img src="static/pc.png" />
|
|
| 56 | 63 |
<img class="os" src={{ node.thumb }} />
|
| 57 | 64 |
<a href="#" class="name"> |
| 58 |
<h3><span>{{ node.name }}</span><span class="rename">rename</span></h3>
|
|
| 65 |
<h5>Hostname: <span>{{ node.name }}</span><span class="rename"></span></h5>
|
|
| 59 | 66 |
</a> |
| 60 | 67 |
<a href="#" class="ip"> |
| 61 |
<h5><span>{{ node.public_ip }}</span><span class="configure">configure networking</span></h5>
|
|
| 68 |
<h5>IP: <span>{{ node.public_ip }}</span></h5>
|
|
| 62 | 69 |
</a> |
| 63 |
<a href="#" class="storage">
|
|
| 64 |
<h5>34GB of total storage in 3 volumes <span class="configure">configure storage</span></h5>
|
|
| 65 |
</a>
|
|
| 66 |
</div>
|
|
| 70 |
<br />
|
|
| 71 |
<h5 class="storage">
|
|
| 72 |
Show: <a href="#">disks</a> | <a href="#">networks</a> | <a href="#">group</a> | uptime: 24 days
|
|
| 73 |
</h5>
|
|
| 67 | 74 |
</div> |
| 68 | 75 |
{% endif %}
|
| 69 |
{% endfor %}
|
|
| 76 |
{% endfor %}
|
|
| 70 | 77 |
</div> |
| 71 | 78 |
</div> |
| 72 | 79 |
|
| 80 |
<div id="instances" class="seperator"></div> |
|
| 81 |
|
|
| 73 | 82 |
<!-- the form --> |
| 74 | 83 |
<form action="#"> |
| 75 | 84 |
<!-- scrollable root element --> |
| 76 | 85 |
<div class="modal" id="wizard"> |
| 77 | 86 |
<!-- status bar --> |
| 78 | 87 |
<ul id="status"> |
| 79 |
<li class="active"><strong>1.</strong> Select image</li>
|
|
| 80 |
<li><strong>2.</strong> Instance type</li>
|
|
| 88 |
<li class="active"><strong>1.</strong> Image</li>
|
|
| 89 |
<li><strong>2.</strong> Instance</li> |
|
| 81 | 90 |
<li><strong>3.</strong> Review</li> |
| 82 | 91 |
</ul> |
| 83 | 92 |
<!-- scrollable items --> |
| 84 | 93 |
<div class="items"> |
| 85 | 94 |
<!-- pages --> |
| 86 | 95 |
<div class="page"> |
| 87 |
<h2> |
|
| 88 |
<strong>Step 1: </strong> Select image |
|
| 89 |
<em>Select an OS image to boot from</em> |
|
| 90 |
</h2> |
|
| 96 |
<h2>Select an OS</h2> |
|
| 91 | 97 |
<ul class="tabs"> |
| 92 | 98 |
<li><a href="#">standard</a></li> |
| 93 | 99 |
<li><a href="#">custom</a></li> |
| ... | ... | |
| 102 | 108 |
<a><div class="image"> |
| 103 | 109 |
<img src={{ image.logo }} class="image-logo"/>
|
| 104 | 110 |
<strong>{{ image.title }}</strong>
|
| 105 |
<input class="radio" type="radio" name="image-id" id={{ image.id }} />
|
|
| 111 |
<input class="radio" type="radio" {% if forloop.first %}checked="checked"{% endif %} name="image-id" id={{ image.id }} />
|
|
| 106 | 112 |
<br /> |
| 107 | 113 |
<span class="description">{{ image.description }}</span>
|
| 108 | 114 |
<span class="size">{{ image.size }}MB</span>
|
| 115 |
|
|
| 109 | 116 |
</div></a> |
| 110 | 117 |
</label> |
| 111 | 118 |
</li> |
| ... | ... | |
| 136 | 143 |
<button type="button" class="next right">Next »</button> |
| 137 | 144 |
</div> |
| 138 | 145 |
<div class="page"> |
| 139 |
<h2> |
|
| 140 |
<strong>Step 2: </strong> Instance type <b></b> |
|
| 141 |
<em>Select CPU cores, RAM and storage space for your instance</em> |
|
| 142 |
</h2> |
|
| 146 |
<h2>Select CPU, RAM and storage</h2> |
|
| 143 | 147 |
<ul> |
| 144 | 148 |
<li> |
| 145 | 149 |
<div class="instance-type"> |
| ... | ... | |
| 181 | 185 |
</li> |
| 182 | 186 |
<li> |
| 183 | 187 |
<div class="cost"> |
| 184 |
Cost per hour for this VM: 20 credits | Credits currently in account: 10.000
|
|
| 188 |
Cost per hour: 20 credits | Credits currently in account: 10.000 |
|
| 185 | 189 |
</div> |
| 186 | 190 |
</li> |
| 187 | 191 |
</ul> |
| ... | ... | |
| 189 | 193 |
<button type="button" class="next right">Next »</button> |
| 190 | 194 |
</div> |
| 191 | 195 |
<div class="page"> |
| 192 |
<h2> |
|
| 193 |
<strong>Step 3: </strong> Review <b></b> |
|
| 194 |
<em>Confirm the settings below and create your new instance</em> |
|
| 195 |
</h2> |
|
| 196 |
<h2>Confirm your settings</h2> |
|
| 196 | 197 |
<ul> |
| 197 | 198 |
<li class="required"> |
| 198 | 199 |
<label> |
| 199 |
<strong>Instance name</strong><span>*</span>
|
|
| 200 |
<strong>Instance name</strong> |
|
| 200 | 201 |
<input type="text" class="text" name="instance_name" value="My Ubuntu 10.04 x86_64 server"/> |
| 201 | 202 |
</label> |
| 202 | 203 |
</li> |
| ... | ... | |
| 237 | 238 |
|
| 238 | 239 |
$("#list").click(function(event){
|
| 239 | 240 |
$("div#instancesview").load($("#list").attr("href"));
|
| 241 |
$("a#standard")[0].className += ' activelink'
|
|
| 242 |
this.style.color = '#5f8dd3'; |
|
| 240 | 243 |
return false; |
| 241 | 244 |
}); |
| 242 | 245 |
|
Also available in: Unified diff