Statistics
| Branch: | Tag: | Revision:

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

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

    
61
<!-- vm select -->
62
<div id="network-vms-select-content" class="overlay-content hidden">
63
    <div class="description">
64
        <p>{% trans "Select machines to add" %}</p>
65
    </div>
66
    <div class="clearfix vms-list">
67
        <ul class="options-list three">
68
        </ul>
69
    </div>
70
    <div class="form-actions clearfix">
71
        <span class="form-action create">{% trans "connect machines" %}</span>
72
        <span class="form-action assign">{% trans "connect machine" %}</span>
73
    </div>
74
</div>
75

    
76

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

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

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

    
255
<div id="networks-list-view" class="collection-list-view">
256
  <div class="collection">
257

    
258
    <div id="create-network" class="create-button">
259
      <a href="#">{% trans "New Network +" %}</a>
260
    </div>
261

    
262
    <div class="empty-list hidden">
263
      <p>{% trans "The list is empty" %}</p>
264
    </div>
265

    
266
    <div class="items-list clearfix">
267
      <div class="items-sublist public"></div>
268
      <div class="items-sublist private"></div>
269
    </div>
270
  </div>
271
</div>
272

    
273
<div id="networks-select-floating-ip-tpl" class="hidden">
274
  <div class="select-item floating-ip clearfix">
275
    <div class="checkbox">
276
      <input type="checkbox" data-rv-data-id="model.id" />
277
    </div>
278
    <div class="name" data-rv-text="model.floating_ip_address"></div>
279
  </div>
280
</div>
281

    
282
<div id="networks-select-floating-ips-tpl" class="hidden">
283
  <div class="collection">
284
    <div class="items-list floating-ips clearfix">
285
    </div>
286
    <div class="create model-item select-item floating-ip clearfix">
287
      <span class="empty-list hidden" style="padding-left:0;">
288
        {% trans "No ip addresses available" %} 
289
      </span>
290
      <a href="#">create new...</a>
291
      <span class="loading">creating...</span>
292
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
293
    </div>
294
  </div>
295
</div>
296

    
297
<div id="networks-select-public-item-tpl" class="hidden">
298
  <div class="select-item clearfix">
299
    <div class="checkbox">
300
      <input type="checkbox" data-rv-data-id="model.id" />
301
    </div>
302
    <div class="ico">
303
      <img data-rv-src="model.is_public|get_network_icon" />
304
    </div>
305
    <div class="name">
306
      <span class="" data-rv-text="model.name"></span>
307
      <span class="no-available hidden">{% trans "No IPs available" %}</span>
308
      <span class="available hidden"></span>
309
    </div>
310
  </div>
311
  <div data-rv-show="model.is_public" class="floating-ips">
312
    <div
313
      data-rv-collection-view="model.available_floating_ips|NetworkSelectFloatingIpsView,resolve_floating_ip_view_params">
314
    </div>
315
  </div>
316
</div>
317

    
318
<div id="networks-select-private-item-tpl" class="hidden">
319
  <div class="select-item private-network clearfix">
320
    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>
321
    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>
322
    <div class="name"><span class="" data-rv-text="model.name|truncate 45"></span></div>
323
    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>
324
  </div>
325
</div>
326

    
327
<div id="networks-select-public-tpl" class="hidden">
328
  <div class="collection">
329
    <div class="items-list">
330
    </div>
331
  </div>
332
</div>
333

    
334
<div id="networks-select-private-tpl" class="hidden">
335
  <div class="collection">
336
    <div class="items-list">
337
    </div>
338
  </div>
339
</div>
340

    
341
<div id="networks-select-view-tpl" class="hidden list-cont">
342
  <h4>{% trans "Available networks" %}</h4>
343
  <p class="desc">Select the networks you want your machine to get connected to.</p>
344
  <div class="network-select">
345
    <div class="public-list" 
346
      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">
347
    </div>
348
    <div class="private-list" 
349
      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">
350
    </div>
351
  </div>
352
</div>