1<loader loading="loading"></loader>
2<div id="configuration-network">
3  <div class="row column">
4    <h1>BMC network settings</h1>
5  </div>
6  <form class="net-config__form" role="form" action="">
7    <section class="row column">
8      <div class="column small-12 page-header">
9        <h2 class="inline">Common settings</h2>
10      </div>
11      <fieldset>
12        <div class="column small-12 large-3">
13          <label for="net-config__mac">Hostname</label>
14          <input id="net-config__mac" type="text" ng-model="hostname"/>
15        </div>
16        <div class="column small-12 large-3">
17          <label for="netinterface-select">Network interface</label>
18          <div id="netinterface-select" class="dropdown__wrapper">
19            <button type="button" class="dropdown__button" ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
20            <ul class="dropdown__list inline" ng-show="networkDevice">
21              <li ng-repeat="interface_id in network.interface_ids">
22                <button type="button" ng-click="selectInterface(interface_id);">{{interface_id}}</button>
23              </li>
24            </ul>
25          </div>
26        </div>
27        <div class="column small-12 large-3">
28          <label for="net-config__host">MAC address</label>
29          <input id="net-config__host" type="text" ng-model="interface.MACAddress"/>
30        </div>
31        <div class="column small-12 large-3">
32          <label for="net-config__domain">Default Gateway</label>
33          <input id="net-config__domain" type="text" ng-model="defaultGateway"/>
34        </div>
35      </fieldset>
36    </section>
37    <section class="row column">
38      <div class="column small-12 page-header">
39        <h2 class="inline">IPV4 settings</h2>
40      </div>
41      <fieldset>
42        <div class="row column">
43          <label class="control-radio" for="dhcp-address">Obtain an IP address automatically using DHCP
44            <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled" ng-value="true">
45            <span class="control__indicator control__indicator-on"></span>
46          </label>
47        </div>
48        <div class="row column">
49          <label class="control-radio" for="static-ip-address">Assign a static IP address
50            <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled" ng-value="false"/>
51            <span class="control__indicator control__indicator-on"></span>
52          </label>
53        </div>
54        <div class="row column network-config__ipv4-wrap">
55          <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
56            <div class="column small-12 large-3">
57              <label>IPV4 address</label>
58              <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
59            </div>
60            <div class="column small-12 large-3">
61              <label>Gateway</label>
62              <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
63            </div>
64            <!-- This netmask prefix length max only works with IPV4 -->
65            <div class="column small-12 large-6">
66              <label>Netmask Prefix Length</label>
67              <input id="ipv4-prefix-{{$index+1}}" class="column small-6" ng-change="ipv4.updatePrefix = true" type="number" min="1" max="32" step="1" ng-disabled="interface.DHCPEnabled"  ng-model="ipv4.PrefixLength"/>
68              <button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
69            </div>
70          </fieldset>
71          <div class="row column">
72            <div class="column small-12">
73              <button type="button" class="btn-primary inline" ng-click="addIpv4Field()">Add IPV4 address</button>
74            </div>
75          </div>
76        </div>
77      </fieldset>
78    </section>
79    <section class="row column">
80      <div class="column small-12 page-header">
81        <h2 class="inline">DNS settings</h2>
82      </div>
83      <fieldset>
84        <!-- Call Nameservers "DNS Servers" on the GUI -->
85        <fieldset class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
86          <div class="column small-12">
87            <label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
88            <input id="net-config__prime-dns{{$index+1}}" class="network-input column small-6 large-4 inline" type="text" ng-model="dns" ng-blur="interface.Nameservers[$index] = dns" set-focus-on-new-input/>
89            <button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
90          </div>
91        </fieldset>
92        <div class="row column">
93          <div class="column small-12">
94            <button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add DNS server</button>
95          </div>
96        </div>
97      </fieldset>
98      <div class="network-config__submit-wrapper">
99        <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
100        <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
101      </div>
102    </section>
103  </form>
104</div>
105<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}">
106  <div class="modal__tftp-unreachable" role="document">
107    <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
108    <div class="page-header ">
109      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
110      <h3 class="modal-title inline">Change network settings</h3>
111    </div>
112    <div class="modal__content">
113      <p>Changing network settings may cause the system to become unavailable (e.g. changing the BMC IP address).
114        Proceed with caution and make note of any new settings that may affect connectivity.</p>
115    </div>
116    <div class="modal__button-wrapper">
117      <button class="inline btn-secondary" ng-click="confirmSettings=false;">Cancel</button>
118      <button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
119    </div>
120  </div>
121</section>
122