Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.3 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" 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" 
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"></h5>
97
      <h5 class="subtitle" data-rv-text="model.mac_address"></h5>
98
      <div data-rv-show="model.network.is_public" class="firewall">
99
        <img data-rv-show="model.in_progress" 
100
             src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 
101
             class="progress-indicator" />
102
        <img data-rv-show="model.firewall_running" 
103
             src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 
104
             class="progress-indicator" />
105
        <div class="toggler-wrap clearfix">
106
          <div class="cont-toggler firewall-toggle">
107
            <span class="label machines-label">Firewall
108
            (<span class="firewall-on">On</span>)
109
            </span>
110
          </div>
111
        </div>
112
        <div class="firewall-content clearfix" 
113
             data-rv-class-dummy="model.firewall_status|update_firewall">
114
          <input type="radio" class="checkboxes" value="DISABLED"
115
                 checked="checked" 
116
                 data-rv-name="model.id|prefix firewall-" />
117
          <span class="checkbox-legends current">Unprotected mode</span>
118
          <br />
119
          <input type="radio" class="checkboxes" 
120
                 value="ENABLED" 
121
                 data-rv-name="model.id|prefix firewall-" />
122
          <span class="checkbox-legends">Fully protecte mode (Firewall on)</span>
123
          <br />
124
          <input type="radio" class="checkboxes" 
125
                 data-rv-name="model.id|prefix firewall-"
126
                 value="PROTECTED" />
127
          <span class="checkbox-legends">Basically protected mode (Firewall on)</span>
128
          <br />
129
          <button data-rv-on-click="view.set_firewall" type="submit" class="firewall-apply hidden">Apply</button> 
130
        </div>
131
      </div>
132
      <ul class="ip-addresses">
133
        <li data-rv-each-item="model.fixed_ips">
134
          <span data-rv-text="item:ip_address">IP</span>
135
        </li>
136
      </ul>
137
      <div class="actions-content">
138
        <div class="action-container isactive" 
139
          data-rv-on-click="view.show_vm_details">
140
             <a>Details</a>
141
        </div>
142
        <div class="action-container disconnect warn" 
143
           data-rv-class-isactive="model.can_disconnect"
144
           data-rv-class-selected="model.actions.disconnect|intEq 1"
145
           data-rv-on-click="view.set_disconnect_confirm">
146
          <a>Disconnect</a>
147
          <div class="confirm-single clearfix">
148
            <span class="yes" 
149
              data-rv-on-click="view.disconnect_port">
150
              {% trans "Confirm" %}
151
            </span>
152
            <span class="no" data-rv-on-click="view.unset_disconnect_confirm">X</span>
153
          </div>
154
        </div>
155
      </div>
156
    </div>
157
  </div>
158
</div>
159

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

    
229
<div id="networks-list-view" class="collection-list-view">
230
  <div class="collection">
231

    
232
    <div id="create-network" class="create-button">
233
      <a href="#">{% trans "New network +" %}</a>
234
    </div>
235

    
236
    <div class="empty-list hidden">
237
      <p>{% trans "The list is empty" %}</p>
238
    </div>
239

    
240
    <div class="items-list clearfix">
241
      <div class="items-sublist public"></div>
242
      <div class="items-sublist private"></div>
243
    </div>
244
  </div>
245
</div>
246

    
247
<div id="networks-select-floating-ip-tpl" class="hidden">
248
  <div class="select-item floating-ip clearfix">
249
    <div class="checkbox">
250
      <input type="checkbox" data-rv-data-id="model.id" />
251
    </div>
252
    <div class="name" data-rv-text="model.floating_ip_address"></div>
253
  </div>
254
</div>
255

    
256
<div id="networks-select-floating-ips-tpl" class="hidden">
257
  <div class="collection">
258
    <div class="items-list floating-ips clearfix">
259
    </div>
260
    <div class="create model-item select-item floating-ip clearfix">
261
      <span class="empty-list hidden" style="padding-left:0;">
262
        {% trans "No ip addresses available" %} 
263
      </span>
264
      <a href="#">create new...</a>
265
      <span class="loading">creating...</span>
266
      <span class="no-available hidden">{% trans "IP's limit reached." %}</span>
267
    </div>
268
  </div>
269
</div>
270

    
271
<div id="networks-select-public-item-tpl" class="hidden">
272
  <div class="select-item clearfix">
273
    <div class="checkbox">
274
      <input type="checkbox" data-rv-data-id="model.id" />
275
    </div>
276
    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>
277
    <div class="name">
278
      <span class="" data-rv-text="model.name"></span>
279
      <span class="no-available hidden">{% trans "IP address limit reached." %}</span>
280
      <span class="available hidden"></span>
281
    </div>
282
  </div>
283
  <div data-rv-show="model.is_public" class="floating-ips">
284
    <div data-rv-collection-view="model.available_floating_ips|NetworkSelectFloatingIpsView">
285
    </div>
286
  </div>
287
</div>
288

    
289
<div id="networks-select-private-item-tpl" class="hidden">
290
  <div class="select-item private-network clearfix">
291
    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>
292
    <div class="ico"><img data-rv-src="model.is_public|get_network_icon" /></div>
293
    <div class="name"><span class="" data-rv-text="model.name"></span></div>
294
    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>
295
  </div>
296
</div>
297

    
298
<div id="networks-select-public-tpl" class="hidden">
299
  <div class="collection">
300
    <div class="items-list">
301
    </div>
302
  </div>
303
</div>
304

    
305
<div id="networks-select-private-tpl" class="hidden">
306
  <div class="collection">
307
    <div class="items-list">
308
    </div>
309
  </div>
310
</div>
311

    
312
<div id="networks-select-view-tpl" class="hidden list-cont">
313
  <h4>{% trans "Available networks" %}</h4>
314
  <p class="desc">Select the networks you want your machine to get connected to.</p>
315
  <div class="network-select">
316
    <div class="public-list" 
317
      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">
318
    </div>
319
    <div class="private-list" 
320
      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">
321
    </div>
322
  </div>
323
</div>