Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / templates / partials / networks.html @ bfb11987

History | View | Annotate | Download (12.6 kB)

1
{% load i18n %}
2

    
3
<!-- add new network overlay -->
4
<div id="networks-create-content" class="overlay-content hidden">
5
    <div class="create-form">
6
        <p class="info"></p>
7
        <form>
8
          <div class="col-fields bordered clearfix">
9
            <div class="form-field">
10
                <label for="network-create-name">Network name:</label>
11
                <input type="text" class="network-create-name" name="network-create-name" id="network-create-name" />
12
            </div>
13
            <div class="form-field right-field">
14
                <label for="network-create-type">Network type:</label>
15
              <select id="network-create-type">
16
              </select>
17
            </div>
18
          </div>
19
          <div class="col-fields clearfix bordered">
20
            <div class="form-field fixpos">
21
                <label for="network-create-dhcp">Assign IP addresses automatically:</label>
22
                <input type="checkbox" class="use-dhcp" name="network-create-dhcp"
23
                  id="network-create-dhcp" checked 
24
                  <p ="description  fields-desc">
25
                  If you enable DHCP on the private network,
26
                  connected virtual machines will automatically be assigned
27
                  an IP address based on the given subnet. You may disable this option
28
                  if you want to assign IP addresses to the connected
29
                  virtual machines manually. 
30
            </p>
31
            </div>
32
            <div id="network-create-dhcp-fields">
33
              <div class="form-field fixpos">
34
                <label for="network-type">Network subnet:</label>
35
                <select id="network-create-subnet">
36
                  <option selected ="auto" value="auto">Auto</option>
37
                  <option value="custom" class="manual">Manual...</option>
38
                </select>
39
              </div>
40
              <div class="form-field">
41
                <label class="hidden" for="network-custom-subnet">Custom subnet:</label>
42
                <input type="text" id="network-create-subnet-custom"/>
43
              </div>
44
            </div>
45
          </div>
46
            <div class="form-actions plain clearfix">
47
                <span class="form-action create">create network</span>
48
            </div>
49
        </form>
50
    </div>
51
    
52
    <div class="ajax-submit"></div>
53
</div>
54

    
55
<!-- vm select -->
56
<div id="network-vms-select-content" class="overlay-content hidden">
57
    <div class="description">
58
        <p>{% trans "Select machines to add" %}</p>
59
    </div>
60
    <div class="clearfix vms-list">
61
        <ul class="options-list three">
62
        </ul>
63
        <div class="empty-message">{% trans "No available machines to connect" %}</div>
64
    </div>
65
    <div class="form-actions clearfix">
66
        <span class="form-action create">{% trans "connect machines" %}</span>
67
        <span class="form-action assign">{% trans "connect machine" %}</span>
68
    </div>
69
</div>
70

    
71

    
72
<div id="network-port-collection-view-tpl" class="collection-list-view hidden">
73
  <div class="collection">
74
    <div class="empty-list item-list hidden nested">
75
      <div class="border">
76
        <i class="add icon-action connect"
77
           data-rv-on-click="view.show_connect_vms_overlay">+</i>
78
      </div>
79
      <div class="border2"></div>
80
    </div>
81
    <div class="items-list clearfix">
82
    </div>
83
  </div>
84
</div>
85

    
86
<div id="network-port-view-tpl" class="hidden model-item"
87
  data-rv-class-actionpending="model.actions.pending">
88
  <div class="outer">
89
    <div class="border">
90
      <i data-rv-show="model.can_disconnect" 
91
         class="remove icon-action" 
92
         data-rv-on-click="view.set_disconnect_confirm">X</i>
93
      </div>
94
    <div class="border2"></div>
95
    <div class="inner clearfix main-content">
96
      <img class="model-logo" data-rv-src="model.vm.status|vm_logo_url" />
97
      <h5 class="title" data-rv-text="model.vm.name|truncate 35"></h5>
98
      <div class="state state-indicator">
99
        <div class="action-indicator"></div>
100
      </div>
101
      <ul class="ip-addresses">
102
        <li data-rv-each-item="model.fixed_ips">
103
          <span data-rv-text="item:ip_address|ip_type" class="type"></span>
104
          <span data-rv-text="item:ip_address" class="ip">IP</span>
105
        </li>
106
      </ul>
107
      <div data-rv-show="model.network.is_public" class="firewall">
108
        <img data-rv-show="model.in_progress" 
109
             src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 
110
             class="progress-indicator" />
111
        <img data-rv-show="model.firewall_running" 
112
             src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 
113
             class="progress-indicator" />
114
        <div class="toggler-wrap clearfix">
115
          <div class="cont-toggler firewall-toggle">
116
            <span class="label machines-label">Firewall
117
            (<span class="firewall-on">On</span>)
118
            </span>
119
          </div>
120
        </div>
121
        <div class="firewall-content clearfix" 
122
             data-rv-class-dummy="model.firewall_status|update_firewall">
123
          <input type="radio" class="checkboxes" value="DISABLED"
124
                 checked="checked" 
125
                 data-rv-name="model.id|prefix firewall-" />
126
          <span class="checkbox-legends current">Unprotected mode</span>
127
          <br />
128
          <input type="radio" class="checkboxes" 
129
                 value="ENABLED" 
130
                 data-rv-name="model.id|prefix firewall-" />
131
          <span class="checkbox-legends">Fully protected mode (Firewall on)</span>
132
          <br />
133
          <input type="radio" class="checkboxes" 
134
                 data-rv-name="model.id|prefix firewall-"
135
                 value="PROTECTED" />
136
          <span class="checkbox-legends">Basically protected mode (Firewall on)</span>
137
          <br />
138
          <button data-rv-on-click="view.set_firewall" type="submit" class="firewall-apply hidden">Apply</button> 
139
        </div>
140
      </div>
141
      <div class="actions-content">
142
        <div class="action-container isactive" 
143
          data-rv-on-click="view.show_vm_details">
144
             <a>Details</a>
145
        </div>
146
        <div class="action-container disconnect warn" 
147
           data-rv-class-isactive="model.can_disconnect"
148
           data-rv-class-selected="model.actions.disconnect|intEq 1"
149
           data-rv-on-click="view.set_disconnect_confirm">
150
          <a>Disconnect</a>
151
          <div class="confirm-single clearfix">
152
            <span class="yes" 
153
              data-rv-on-click="view.disconnect_port">
154
              {% trans "Confirm" %}
155
            </span>
156
            <span class="no" data-rv-on-click="view.unset_disconnect_confirm">X</span>
157
          </div>
158
        </div>
159
      </div>
160
    </div>
161
  </div>
162
</div>
163

    
164
<div id="network-view-tpl" 
165
  data-rv-class-actionpending="model.actions.pending"
166
  data-rv-class-clearfix="model.id"
167
  class="hidden model-item model-view with-actions">
168
  <div class="clearfix">
169
    <div class="main-content clearfix">
170
      <div class="main-content-inner clearfix">
171
        <img class="logo" data-rv-src="model.is_public|get_network_icon" />
172
        <div class="entry">
173
          <div data-rv-show="model" 
174
               data-rv-model-view="model|ModelRenameView"></div>
175
          <div class="toggler-wrap clearfix network-ports-toggler">
176
            <div class="cont-toggler">
177
              <span class="label machines-label">
178
                Connections (<span
179
                  data-rv-text="model.ports|collection_size">0</span>)  
180
              </span>
181
                <!--| Interfaces (<span data-rv-text="model.ports|collection_size">0</span>)-->
182
              <span class="network-progress-indicator">
183
                <img src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" />
184
              </span>
185
            </div>
186
          </div>
187
          <div class="ports nested-model-list">
188
            <div 
189
              data-rv-collection-view="model.ports|NetworkPortCollectionView">
190
            </div>
191
          </div>
192
        </div>
193
        <div class="entry-right">
194
            <div data-rv-class="model.ext_status|status_cls" class="status">
195
            <div class="status-title">
196
              <span data-rv-text="model.cidr|status_display">STATUS</span>
197
              <span data-rv-show="model.in_progress">...</span>
198
            </div>
199
            <div class="state state-indicator">
200
              <div class="action-indicator"></div>
201
            </div>
202
            <div class="status-indicator clearfix">
203
              <div class="indicator indicator1"></div>
204
              <div class="indicator indicator2"></div>
205
              <div class="indicator indicator3"></div>
206
              <div class="indicator indicator4"></div>
207
            </div>
208
            <div data-rv-show="model.status|in_progress" class="status-progress"></div>
209
          </div>
210
        </div>
211
      </div>
212
    </div>
213
    <div class="actions-content">
214
      <div class="action-container connect" 
215
           data-rv-class-isactive="model.can_connect"
216
           data-rv-on-click="view.show_connect_vms_overlay">
217
           <a>{% trans "Connect machine" %}</a>
218
      </div>
219
      <div class="action-container remove warn" 
220
         data-rv-class-isactive="model.can_remove"
221
         data-rv-class-selected="model.actions.remove|intEq 1"
222
         data-rv-on-click="view.set_remove_confirm">
223
         <a>{% trans "Destroy" %}</a>
224
        <div class="confirm-single clearfix">
225
          <span class="yes" 
226
            data-rv-on-click="view.remove">
227
            {% trans "Confirm" %}
228
          </span>
229
          <span class="no" data-rv-on-click="view.unset_remove_confirm">X</span>
230
        </div>
231
      </div>
232
    </div>
233
  </div>
234
</div>
235

    
236
<div id="networks-list-view" class="collection-list-view">
237
  <div class="collection">
238

    
239
    <div id="create-network" class="create-button">
240
      <a href="#">{% trans "New Network +" %}</a>
241
    </div>
242

    
243
    <div class="empty-list hidden">
244
      <p>{% trans "The list is empty" %}</p>
245
    </div>
246

    
247
    <div class="items-list clearfix">
248
      <div class="items-sublist public"></div>
249
      <div class="items-sublist private"></div>
250
    </div>
251
  </div>
252
</div>
253

    
254
<div id="networks-select-floating-ip-tpl" class="hidden">
255
  <div class="select-item floating-ip clearfix">
256
    <div class="checkbox">
257
      <input type="checkbox" data-rv-data-id="model.id" />
258
    </div>
259
    <div class="name" data-rv-text="model.floating_ip_address"></div>
260
  </div>
261
</div>
262

    
263
<div id="networks-select-floating-ips-tpl" class="hidden">
264
  <div class="collection">
265
    <div class="items-list floating-ips clearfix">
266
    </div>
267
    <div class="create model-item select-item floating-ip clearfix">
268
      <span class="empty-list hidden" style="padding-left:0;">
269
        {% trans "No ip addresses available" %} 
270
      </span>
271
      <a href="#">create new...</a>
272
      <span class="loading">creating...</span>
273
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
274
    </div>
275
  </div>
276
</div>
277

    
278
<div id="networks-select-public-item-tpl" class="hidden">
279
  <div class="select-item clearfix">
280
    <div class="checkbox">
281
      <input type="checkbox" data-rv-data-id="model.id" />
282
    </div>
283
    <div class="ico">
284
      <img data-rv-src="model.is_public|get_network_icon" />
285
    </div>
286
    <div class="name">
287
      <span class="" data-rv-text="model.name"></span>
288
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
289
      <span class="available hidden"></span>
290
    </div>
291
  </div>
292
  <div data-rv-show="model.is_public" class="floating-ips">
293
    <div data-rv-collection-view="model.available_floating_ips|NetworkSelectFloatingIpsView">
294
    </div>
295
  </div>
296
</div>
297

    
298
<div id="networks-select-private-item-tpl" class="hidden">
299
  <div class="select-item private-network clearfix">
300
    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>
301
    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>
302
    <div class="name"><span class="" data-rv-text="model.name|truncate 45"></span></div>
303
    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>
304
  </div>
305
</div>
306

    
307
<div id="networks-select-public-tpl" class="hidden">
308
  <div class="collection">
309
    <div class="items-list">
310
    </div>
311
  </div>
312
</div>
313

    
314
<div id="networks-select-private-tpl" class="hidden">
315
  <div class="collection">
316
    <div class="items-list">
317
    </div>
318
  </div>
319
</div>
320

    
321
<div id="networks-select-view-tpl" class="hidden list-cont">
322
  <h4>{% trans "Available networks" %}</h4>
323
  <p class="desc">Select the networks you want your machine to get connected to.</p>
324
  <div class="network-select">
325
    <div class="public-list" 
326
      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">
327
    </div>
328
    <div class="private-list" 
329
      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">
330
    </div>
331
  </div>
332
</div>