wizard.hbs

{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}
<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
  <dl id="vnet_create_tabs" class="tabs sunstone-info-tabs text-center" data-tabs>
    <dd class="tabs-title is-active">
      <a href="#{{createGeneralTab}}"> <i class="fas fa-globe"></i>
        <br>{{tr "General"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#{{createBridgeTab}}"> <i class="fas fa-cog"></i>
        <br>{{tr "Conf"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#{{createARTab}}">
        <i class="fas fa-align-justify"></i>
        <br>{{tr "Addresses"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#{{createSecurityTab}}">
        <i class="fas fa-shield-alt"></i>
        <br>{{tr "Security"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#{{createQoSTab}}">
        <i class="fas fa-wrench"></i>
        <br>{{tr "QoS"}}</a>
    </dd>
    <dd class="tabs-title">
      <a href="#{{createContextTab}}">
        <i class="fas fa-folder"></i>
        <br>{{tr "Context"}}</a>
    </dd>
  </dl>
  <div id="vnet_create_tabs_content" class="tabs-content" data-tabs-content="vnet_create_tabs">
    <div class="tabs-panel is-active" id="{{createGeneralTab}}">
      <div class="row">
        <div class="medium-6 columns">
          <label for="name" >
            {{tr "Name"}}
          </label>
          <input type="text" wizard_field="NAME" required name="name" id="name"/>
        </div>
        <div class="medium-6 columns" id="vnet_cluster_div" hidden>
          <label for="cluster">{{tr "Cluster"}}</label>
          <div id="vnet_cluster_id" name="vnet_cluster_id"></div>
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="DESCRIPTION" >
            {{tr "Description"}}
          </label>
          <textarea type="text" wizard_field="DESCRIPTION" id="DESCRIPTION" name="DESCRIPTION"/>
        </div>
      </div>
      <div class="row">
        <div class="medium-12 columns" id="vnet_cluster_table_div" hidden>
          <label for="cluster">{{tr "Clusters"}}</label>
          {{{clustersTableHTML}}}
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="{{createBridgeTab}}">
      <div class="row">
        <div class="medium-6 columns">
          <label for="bridge">
            {{tr "Bridge"}}
            <span class="tip">
              {{tr "Name of the physical bridge in the nodes to attach VM NICs"}}
            </span>
          </label>
          <input type="text" wizard_field="BRIDGE" name="bridge" id="bridge" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="network_mode">
            {{tr "Network mode"}}
          </label>
          <select wizard_field="VN_MAD" name="network_mode" id="network_mode">
            <option value="bridge" data-form="bridge">{{tr "Bridged"}}</option>
            <option value="fw" data-form="fw">{{tr "Bridged & Security Groups"}}</option>
            <option value="802.1Q" data-form="802.1Q">{{tr "802.1Q"}}</option>
            <option value="vxlan" data-form="vxlan">{{tr "VXLAN"}}</option>
            <option value="ovswitch" data-form="ovswitch">{{tr "Open vSwitch"}}</option>
            <option value="ovswitch_vxlan" data-form="ovswitch_vxlan">{{tr "Open vSwitch - VXLAN"}}</option>
            <option value="vcenter" data-form="vcenter">{{tr "vCenter"}}</option>
            <option value="vcenter" data-form="nsx">{{tr "NSX"}}</option>
            <option value="custom" data-form="custom">{{tr "Custom"}}</option>
          </select>
        </div>
        <div class="row columns">
          <div class="mode_param nsx large-12 columns nsx-form">
            <div class="row">
              <div class="small-12 columns">
                <label for="">
                  {{tr "Host"}}
                </label>
                <select wizard_field="VCENTER_PORTGROUP_TYPE" name="nsx-type" id="nsx-type"></select>
              </div>
            </div>
            <!--hide-->
            <div class="row hide">
              <div class="small-12 columns">
                <label for="">
                  {{tr "Host Instance"}}
                </label>
                <input type="text" wizard_field="VCENTER_INSTANCE_ID" name="nsx-instance-id" id="nsx-instance-id">
              </div>
            </div>
            <!--hide-->
            <div class="row hide">
              <div class="small-12 columns">
                <label for="">
                  {{tr "Host ID"}}
                </label>
                <input type="text" wizard_field="VCENTER_ONE_HOST_ID" name="nsx-host-id" id="nsx-host-id"></select>
              </div>
            </div>
            <div class="row">
              <div class="small-12 columns">
                <label for="">
                  {{tr "Transport"}}
                </label>
                <select wizard_field="NSX_TZ_ID" name="nsx-transport" id="nsx-transport">
                  <option value="">--</option>
                </select>
              </div>
            </div>
            <div class="row" id="nsx-fields"></div>
          </div>
        </div>
        <div class="large-3 medium-6 columns mode_param vcenter custom" id="div_vn_mad">
          <label for="vn_mad">
            {{tr "Network Driver (VN_MAD)"}}
          </label>
          <input type="text" wizard_field="VN_MAD" name="vn_mad" id="vn_mad" />
        </div>
        <div class="large-12 columns">
          <div class="network_mode_description" value="bridge">
            {{tr "Bridged, virtual machine traffic is directly bridged. The Linux bridge is created in the nodes as needed. No traffic filtering is made."}}
          </div>
          <div class="network_mode_description" value="fw">
            {{tr "Bridged & Security Groups, bridged network with Security Group rules."}}
          </div>
          <div class="network_mode_description" value="802.1Q">
            {{tr "802.1Q, restrict network access through VLAN tagging. Security Group rules are applied."}}
          </div>
          <div class="network_mode_description" value="vxlan">
            {{tr "VXLAN, creates a L2 network overlay, each VLAN has associated a multicast address in the 239.0.0.0/8 range. Security Group rules are applied."}}
          </div>
          <div class="network_mode_description" value="ovswitch">
            {{tr "Open vSwitch, restrict network access with Open vSwitch Virtual Switch. Security Groups are not applied."}}
          </div>
          <div class="network_mode_description" value="ovswitch_vxlan">
            {{tr "Open vSwitch on VXLAN L2 network overlay. Security Groups are not applied."}}
          </div>
          <div class="network_mode_description" value="vcenter">
            {{tr "vSphere standard switches or distributed switches with port groups. Security Groups are not applied."}}
          </div>
          <div class="network_mode_description" value="custom">
            {{tr "Custom, use a custom virtual network driver."}}
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="large-6 columns mode_param 8021Q vxlan fw ovswitch ovswitch_vxlan custom">
          <label for="mac_spoofing">
            <input type="checkbox" wizard_field="FILTER_MAC_SPOOFING" value="YES" name="mac_spoofing" id="mac_spoofing" />
            {{tr "MAC spoofing filter"}}
          </label>
        </div>
      </div>
      <div class="row">
        <div class="large-6 columns mode_param 8021Q vxlan fw ovswitch ovswitch_vxlan custom">
          <label for="ip_spoofing">
            <input type="checkbox" wizard_field="FILTER_IP_SPOOFING" value="YES" name="ip_spoofing" id="ip_spoofing" />
            {{tr "IP spoofing filter"}}
            </span>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="medium-3 columns left mode_param 8021Q vxlan ovswitch ovswitch_vxlan vcenter custom">
          <label>
            {{tr "VLAN ID"}}
            <select id="automatic_vlan_id" wizard_field="AUTOMATIC_VLAN_ID">
              <option value="YES">{{tr "Automatic VLAN ID"}}</option>
              <option value="NO">{{tr "No VLAN network"}}</option>
              <option value="">{{tr "Manual VLAN ID"}}</option>
            </select>
            <input id="manual_id" type="number" wizard_field="VLAN_ID"/>
          </label>
        </div>
        <div class="medium-3 columns left mode_param bridge fw 8021Q vxlan ovswitch ovswitch_vxlan custom">
          <label for="phydev">
            {{tr "Physical device"}}
            <span class="tip">
              {{tr "Node NIC to send/receive virtual network traffic"}}
            </span>
          </label>
          <input type="text" wizard_field="PHYDEV" name="phydev" id="phydev" />
        </div>
        <div class="medium-3 columns left mode_param vcenter">
          <label for="phydev">
            {{tr "Physical device"}}
            <span class="tip">
              {{tr "Physical NIC names for uplinks. Use comma to separate values (e.g vmnic1,vmnic2)"}}
            </span>
          </label>
          <input type="text" wizard_field="PHYDEV" name="phydev" id="phydev" />
        </div>
        <div class="medium-3 columns left mode_param 8021Q vxlan ovswitch_vxlan vcenter custom">
          <label for="mtu">
            {{tr "MTU of the interface"}}
          </label>
          <input type="text" wizard_field="MTU" name="mtu" id="mtu" />
        </div>
        <div class="medium-3 columns left mode_param ovswitch_vxlan">
          <label>
            {{tr "Outer VLAN ID"}}
            <span class="tip">
              {{tr "First level (outer, service) VLAN ID"}}
            </span>
            <select wizard_field="AUTOMATIC_OUTER_VLAN_ID">
              <option value="YES">{{tr "Automatic Outer VLAN ID"}}</option>
              <option value="">{{tr "Manual Outer VLAN ID"}}</option>
            </select>
            <input type="text" wizard_field="OUTER_VLAN_ID" name="outer_vlan_id" id="outer_vlan_id" />
          </label>
        </div>
      </div>
      <div class="row">
        <div class="medium-3 columns left mode_param vcenter">
          <label for="vcenter_switch_name">
            {{tr "Switch name"}}
          </label>
          <input type="text" wizard_field="VCENTER_SWITCH_NAME" name="vcenter_switch_name" id="vcenter_switch_name" maxlength="32" />
        </div>
        <div class="medium-3 columns left mode_param vcenter">
          <label>
            {{tr "Number of ports"}}
          </label>
          <input type="number" wizard_field="VCENTER_SWITCH_NPORTS" name="vcenter_switch_nports" id="vcenter_switch_nports" />
        </div>
        <div class="medium-3 columns left mode_param vcenter">
          <label>
            {{tr "Port group type"}}
            <select wizard_field="VCENTER_PORTGROUP_TYPE">
              <option value="Port Group">{{tr "Port group"}}</option>
              <option value="Distributed Port Group">{{tr "Distributed Port Group"}}</option>
            </select>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns left mode_param vcenter">
          <label for="vcenter_cluster_id">{{tr "OpenNebula's Host ID"}}</label>
          <div id="vcenter_cluster_id" name="vcenter_cluster_id"></div>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="{{createARTab}}">
      <div class="row collapse" id="{{createARTab}}Create">
        <div class="medium-2 columns">
          <ul class="tabs vertical" id="vnet_wizard_ar_tabs" data-tabs></ul>
          <div class="text-center">
            <button type="button" class="button small tabs-add" id="vnet_wizard_ar_btn" style="margin-top: 5%">
              <i class="fas fa-lg fa-plus-circle"></i>
            </button>
          </div>
        </div>
        <div class="medium-10 columns">
          <div class="tabs-content vertical" id="vnet_wizard_ar_tabs_content" data-tabs-content="vnet_wizard_ar_tabs"></div>
        </div>
      </div>
      <div class="row" id="{{createARTab}}Update">
        <div class="large-12 columns">
          <p>
            {{tr "Address Ranges need to be managed in the individual Virtual Network panel"}}
          </p>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="{{createSecurityTab}}">
      {{{securityGroupsTableHTML}}}
      <div class="row" id="default_sg_warning">
        <div class="large-12 columns">
          <span class="radius warning label">
            <i class="fas fa-exclamation-triangle"/> {{tr "The default Security Group 0 is automatically added to new Virtual Networks"}}
          </span>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="{{createQoSTab}}">
      <fieldset>
        <legend>{{tr "Inbound traffic"}}</legend>
        <div class="row">
          <div class="medium-4 columns">
            <label>
              {{tr "Average bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="INBOUND_AVG_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="INBOUND_PEAK_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak burst (KBytes)"}}
              <input type="number" wizard_field="INBOUND_PEAK_KB"/>
            </label>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <legend>{{tr "Outbound traffic"}}</legend>
        <div class="row">
          <div class="medium-4 columns">
            <label>
              {{tr "Average bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="OUTBOUND_AVG_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak bandwidth (KBytes/s)"}}
              <input type="number" wizard_field="OUTBOUND_PEAK_BW"/>
            </label>
          </div>
          <div class="medium-4 columns">
            <label>
              {{tr "Peak burst (KBytes)"}}
              <input type="number" wizard_field="OUTBOUND_PEAK_KB"/>
            </label>
          </div>
        </div>
      </fieldset>
      <div class="row">
        <div class="large-12 columns">
          <span class="radius secondary label">
            <i class="fas fa-info-circle"/> {{tr "These values apply to each VM interface individually, they are not global values for the Virtual Network"}}
          </span>
        </div>
      </div>
    </div>
    <div class="tabs-panel" id="{{createContextTab}}">
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_address">
            {{tr "Network address"}}
          </label>
          <input type="text" wizard_field="NETWORK_ADDRESS" name="net_address" id="net_address" />
        </div>
        <div class="medium-6 columns">
          <label for="net_mask">
            {{tr "Network mask"}}
          </label>
          <input type="text" wizard_field="NETWORK_MASK" name="net_mask" id="net_mask" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_gateway">
            {{tr "Gateway"}}
          </label>
          <input type="text" wizard_field="GATEWAY" name="net_gateway" id="net_gateway" />
        </div>
        <div class="medium-6 columns">
          <label for="net_gateway6">
            {{tr "IPv6 Gateway"}}
          </label>
          <input type="text" wizard_field="GATEWAY6" name="net_gateway6" id="net_gateway6" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="net_dns">
            {{tr "DNS"}}
          </label>
          <input type="text" wizard_field="DNS" name="net_dns" id="net_dns" />
        </div>
        <div class="medium-6 columns">
          <label for="net_mtu">
            {{tr "MTU of the Guest interfaces"}}
          </label>
          <input type="text" wizard_field="GUEST_MTU" name="net_mtu" id="net_mtu" />
        </div>
      </div>
      <div class="row">
        <div class="medium-6 columns">
          <label for="method">
            {{tr "Method"}}
          </label>
          <select wizard_field="METHOD" name="method" id="method">
            <option value="">none (Use default)</option> {{!-- This option is the same than static --}}
            <option value="static">static (Based on context)</option>
            <option value="dhcp">dhcp (DHCPv4)</option>
            <option value="skip">skip (Do not configure IPv4)</option>
          </select>
        </div>
        <div class="medium-6 columns">
          <label for="ipv6_method">
            {{tr "IPv6 Method"}}
          </label>
          <select wizard_field="IP6_METHOD" name="ipv6_method" id="ipv6_method">
            <option value="">none (Use default)</option> {{!-- This option is the same than static --}}
            <option value="static">static (Based on context)</option>
            <option value="auto">auto (SLAAC)</option>
            <option value="dhcp">dhcp (SLAAC and DHCPv6)</option>
            <option value="disable">disable (Do not use IPv6)</option>
            <option value="skip">skip (Do not configure IPv6)</option>
          </select>
        </div>
      </div>
      <fieldset>
        <legend>{{tr "Custom attributes"}}</legend>
        {{{customTagsHTML}}}
      </fieldset>
    </div>
  </div>
</form>