Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.8 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>
64
    <div class="form-actions clearfix">
65
        <span class="form-action create">{% trans "connect machines" %}</span>
66
        <span class="form-action assign">{% trans "connect machine" %}</span>
67
    </div>
68
</div>
69

    
70

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

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

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

    
244
<div id="networks-list-view" class="collection-list-view">
245
  <div class="collection">
246

    
247
    <div id="create-network" class="create-button">
248
      <a href="#">{% trans "New Network +" %}</a>
249
    </div>
250

    
251
    <div class="empty-list hidden">
252
      <p>{% trans "The list is empty" %}</p>
253
    </div>
254

    
255
    <div class="items-list clearfix">
256
      <div class="items-sublist public"></div>
257
      <div class="items-sublist private"></div>
258
    </div>
259
  </div>
260
</div>
261

    
262
<div id="networks-select-floating-ip-tpl" class="hidden">
263
  <div class="select-item floating-ip clearfix">
264
    <div class="checkbox">
265
      <input type="checkbox" data-rv-data-id="model.id" />
266
    </div>
267
    <div class="name" data-rv-text="model.floating_ip_address"></div>
268
  </div>
269
</div>
270

    
271
<div id="networks-select-floating-ips-tpl" class="hidden">
272
  <div class="collection">
273
    <div class="items-list floating-ips clearfix">
274
    </div>
275
    <div class="create model-item select-item floating-ip clearfix">
276
      <span class="empty-list hidden" style="padding-left:0;">
277
        {% trans "No ip addresses available" %} 
278
      </span>
279
      <a href="#">create new...</a>
280
      <span class="loading">creating...</span>
281
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
282
    </div>
283
  </div>
284
</div>
285

    
286
<div id="networks-select-public-item-tpl" class="hidden">
287
  <div class="select-item clearfix">
288
    <div class="checkbox">
289
      <input type="checkbox" data-rv-data-id="model.id" />
290
    </div>
291
    <div class="ico">
292
      <img data-rv-src="model.is_public|get_network_icon" />
293
    </div>
294
    <div class="name">
295
      <span class="" data-rv-text="model.name"></span>
296
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
297
      <span class="available hidden"></span>
298
    </div>
299
  </div>
300
  <div data-rv-show="model.is_public" class="floating-ips">
301
    <div data-rv-collection-view="model.available_floating_ips|NetworkSelectFloatingIpsView">
302
    </div>
303
  </div>
304
</div>
305

    
306
<div id="networks-select-private-item-tpl" class="hidden">
307
  <div class="select-item private-network clearfix">
308
    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>
309
    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>
310
    <div class="name"><span class="" data-rv-text="model.name|truncate 45"></span></div>
311
    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>
312
  </div>
313
</div>
314

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

    
322
<div id="networks-select-private-tpl" class="hidden">
323
  <div class="collection">
324
    <div class="items-list">
325
    </div>
326
  </div>
327
</div>
328

    
329
<div id="networks-select-view-tpl" class="hidden list-cont">
330
  <h4>{% trans "Available networks" %}</h4>
331
  <p class="desc">Select the networks you want your machine to get connected to.</p>
332
  <div class="network-select">
333
    <div class="public-list" 
334
      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">
335
    </div>
336
    <div class="private-list" 
337
      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">
338
    </div>
339
  </div>
340
</div>