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