networks.html 12.6 KB
Newer Older
1
2
3
4
5
6
7
{% load i18n %}

<!-- add new network overlay -->
<div id="networks-create-content" class="overlay-content hidden">
    <div class="create-form">
        <p class="info"></p>
        <form>
8
          <div class="col-fields bordered clearfix">
9
            <div class="form-field">
10
11
                <label for="network-create-name">Network name:</label>
                <input type="text" class="network-create-name" name="network-create-name" id="network-create-name" />
12
            </div>
13
14
15
16
17
18
19
20
            <div class="form-field right-field">
                <label for="network-create-type">Network type:</label>
              <select id="network-create-type">
              </select>
            </div>
          </div>
          <div class="col-fields clearfix bordered">
            <div class="form-field fixpos">
21
                <label for="network-create-dhcp">Assign IP addresses automatically:</label>
22
23
24
                <input type="checkbox" class="use-dhcp" name="network-create-dhcp"
                  id="network-create-dhcp" checked />
                  <p class="description noborder 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
31
            </p>
            </div>
32
33
34
35
36
37
38
39
40
41
42
43
            <div id="network-create-dhcp-fields">
              <div class="form-field fixpos">
                <label for="network-type">Network subnet:</label>
                <select id="network-create-subnet">
                  <option selected class="auto" value="auto">Auto</option>
                  <option value="custom" class="manual">Manual...</option>
                </select>
              </div>
              <div class="form-field">
                <label class="hidden" for="network-custom-subnet">Custom subnet:</label>
                <input type="text" id="network-create-subnet-custom"/>
              </div>
44
45
            </div>
          </div>
46
            <div class="form-actions plain clearfix">
47
                <span class="form-action create">create network</span>
48
49
50
51
52
53
54
            </div>
        </form>
    </div>
    
    <div class="ajax-submit"></div>
</div>

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

70
71
72
73
74

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

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

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

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

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

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

    <div class="items-list clearfix">
      <div class="items-sublist public"></div>
      <div class="items-sublist private"></div>
250
    </div>
251
  </div>
252
</div>
253
254
255
256
257
258
259
260
261
262
263
264
265
266

<div id="networks-select-floating-ip-tpl" class="hidden">
  <div class="select-item floating-ip clearfix">
    <div class="checkbox">
      <input type="checkbox" data-rv-data-id="model.id" />
    </div>
    <div class="name" data-rv-text="model.floating_ip_address"></div>
  </div>
</div>

<div id="networks-select-floating-ips-tpl" class="hidden">
  <div class="collection">
    <div class="items-list floating-ips clearfix">
    </div>
267
    <div class="create model-item select-item floating-ip clearfix">
268
269
270
271
      <span class="empty-list hidden" style="padding-left:0;">
        {% trans "No ip addresses available" %} 
      </span>
      <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
276
277
278
279
280
281
282
  </div>
</div>

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

<div id="networks-select-private-item-tpl" class="hidden">
  <div class="select-item private-network clearfix">
    <div class="checkbox"><input type="checkbox" data-rv-data-id="model.id"></div>
    <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
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
    <div class="cidr"><span class="" data-rv-text="model.subnet.cidr"></span></div>
  </div>
</div>

<div id="networks-select-public-tpl" class="hidden">
  <div class="collection">
    <div class="items-list">
    </div>
  </div>
</div>

<div id="networks-select-private-tpl" class="hidden">
  <div class="collection">
    <div class="items-list">
    </div>
  </div>
</div>

<div id="networks-select-view-tpl" class="hidden list-cont">
  <h4>{% trans "Available networks" %}</h4>
  <p class="desc">Select the networks you want your machine to get connected to.</p>
  <div class="network-select">
    <div class="public-list" 
      data-rv-collection-view="model.public_collection|NetworkSelectPublicNetworks">
    </div>
    <div class="private-list" 
      data-rv-collection-view="model.private_collection|NetworkSelectPrivateNetworks">
    </div>
  </div>
</div>