Synnefo

{% load i18n %}

<!-- add new network overlay -->

<div id="networks-create-content" class="overlay-content hidden">

    <div class="create-form">

        <p class="info"></p>

        <form>

          <div class="col-fields bordered clearfix">

            <div class="form-field">

                <label for="network-create-name">Network name:</label>

                <input type="text" class="network-create-name" name="network-create-name" id="network-create-name" />

            </div>

            <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">

                <label for="network-create-dhcp">Assign IP addresses automatically:</label>

                <input type="checkbox" class="use-dhcp" name="network-create-dhcp"

                  id="network-create-dhcp" checked 

                  <p ="description  fields-desc">

                  If you enable DHCP on the private network,

                  connected virtual machines will automatically be assigned

                  an IP address based on the given subnet. You may disable this option

                  if you want to assign IP addresses to the connected

                  virtual machines manually. 

            </p>

            </div>

            <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 ="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>

            </div>

          </div>

            <div class="form-actions plain clearfix">

                <span class="form-action create">create network</span>

            </div>

        </form>

    </div>

    <div class="ajax-submit"></div>

</div>

<!-- 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>

    </div>

</div>

<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">

        <i class="add icon-action connect"

           data-rv-on-click="view.show_connect_vms_overlay">+</i>

      </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">

      <i data-rv-show="model.can_disconnect" 

         class="remove icon-action" 

         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" />

      <h5 class="title" data-rv-text="model.vm.name|truncate 35"></h5>

      <div class="state state-indicator">

        <div class="action-indicator"></div>

      </div>

      <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>

      <div class="firewall">

      <img data-rv-show="model.in_progress" 

           src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 

           class="progress-indicator" />

      <img data-rv-show="model.vm.in_progress" 

           src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" 

           class="progress-indicator" />

       </div>

      <div data-rv-show="model.network.is_public" class="firewall">

        <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>

        </div>

        <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-" />

          <span class="checkbox-legends">Fully protected mode (Firewall on)</span>

          <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>

        </div>

      </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">

        <img class="logo" data-rv-src="model.is_public|get_network_icon" />

        <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">

                Connections (<span

                  data-rv-text="model.ports|collection_size">0</span>)  

              </span>

              <span class="network-progress-indicator">

                <img src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif" />

              </span>

            </div>

          </div>

          <div class="ports nested-model-list"

            data-rv-class-is-public="model.is_public">

            <div 

              data-rv-collection-view="model.ports|NetworkPortCollectionView">

            </div>

          </div>

        </div>

        <div class="entry-right">

            <div data-rv-class="model.ext_status|status_cls" class="status">

            <div class="status-title">

              <span data-rv-text="model.cidr|status_display">STATUS</span>

              <span data-rv-show="model.in_progress">...</span>

            </div>

            <div class="state state-indicator">

              <div class="action-indicator"></div>

            </div>

            <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>

            </div>

            <div data-rv-show="model.status|in_progress" class="status-progress"></div>

          </div>

        </div>

      </div>

    </div>

    <div class="actions-content">

      <div class="action-container connect" 

           data-rv-class-isactive="model.can_connect"

           data-rv-on-click="view.show_connect_vms_overlay">

           <a>{% trans "Connect machine" %}</a>

      </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">

         <a>{% trans "Destroy" %}</a>

        <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>

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

  <div class="collection">

    <div id="create-network" class="create-button">

      <a href="#">{% trans "New Network +" %}</a>

    </div>

    <div class="empty-list hidden">

      <p>{% trans "The list is empty" %}</p>

    </div>

    <div class="items-list clearfix">

      <div class="items-sublist public"></div>

      <div class="items-sublist private"></div>

    </div>

  </div>

</div>

<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>

    <div class="create model-item select-item floating-ip clearfix">

      <span class="empty-list hidden" style="padding-left:0;">

        {% trans "No ip addresses available" %} 

      </span>

      <a href="#">create new...</a>

      <span class="loading">creating...</span>

      <span class="no-available hidden">{% trans "No IPs available" %}</span>

    </div>

  </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>

    <div class="ico">

      <img data-rv-src="model.is_public|get_network_icon" />

    </div>

    <div class="name">

      <span class="" data-rv-text="model.name"></span>

      <span class="no-available hidden">{% trans "No IPs available" %}</span>

      <span class="available hidden"></span>

    </div>

  </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>

    <div class="name"><span class="" data-rv-text="model.name|truncate 45"></span></div>

    <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>