xref: /openbmc/phosphor-webui/app/configuration/controllers/network-controller.html (revision d0dbe3b3)

<loader loading="loading"></loader>
<div id="configuration-network">
  <div class="row column">
    <h1>BMC network settings</h1>
  </div>
  <form class="net-config__form" role="form" action="">
    <section class="row column">
      <div class="column small-12 page-header">
        <h2 class="inline">Common settings</h2>
      </div>
      <fieldset>
        <div class="column small-12 large-3">
          <label for="net-config__mac">Hostname</label>
          <input id="net-config__mac" type="text" ng-model="hostname"/>
        </div>
        <div class="column small-12 large-3">
          <label for="netinterface-select">Network interface</label>
          <div id="netinterface-select" class="dropdown__wrapper">
            <button type="button" class="dropdown__button" ng-click="networkDevice = !networkDevice">{{selectedInterface}}</button>
            <ul class="dropdown__list inline" ng-show="networkDevice">
              <li ng-repeat="interface_id in network.interface_ids">
                <button type="button" ng-click="selectInterface(interface_id);">{{interface_id}}</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="column small-12 large-3">
          <label for="net-config__host">MAC address</label>
          <input id="net-config__host" type="text" ng-model="interface.MACAddress"/>
        </div>
        <div class="column small-12 large-3">
          <label for="net-config__domain">Default Gateway</label>
          <input id="net-config__domain" type="text" ng-model="defaultGateway"/>
        </div>
      </fieldset>
    </section>
    <section class="row column">
      <div class="column small-12 page-header">
        <h2 class="inline">IPV4 settings</h2>
      </div>
      <fieldset>
        <div class="row column">
          <label class="control-radio" for="dhcp-address">Obtain an IP address automatically using DHCP
            <input type="radio" name="ip-address" id="dhcp-address" ng-checked="true" ng-model="interface.DHCPEnabled" ng-value="true">
            <span class="control__indicator control__indicator-on"></span>
          </label>
        </div>
        <div class="row column">
          <label class="control-radio" for="static-ip-address">Assign a static IP address
            <input type="radio" name="ip-address" id="static-ip-address" ng-model="interface.DHCPEnabled" ng-value="false"/>
            <span class="control__indicator control__indicator-on"></span>
          </label>
        </div>
        <div class="row column network-config__ipv4-wrap">
          <fieldset class="net-config__static-ip-wrap" ng-repeat="ipv4 in interface.ipv4.values track by $index">
            <div class="column small-12 large-3">
              <label>IPV4 address</label>
              <input id="ipv4-address-{{$index+1}}" ng-change="ipv4.updateAddress = true" type="text" ng-disabled="interface.DHCPEnabled" ng-model="ipv4.Address"/>
            </div>
            <div class="column small-12 large-3">
              <label>Gateway</label>
              <input id="ipv4-gateway-{{$index+1}}" ng-change="ipv4.updateGateway = true" type="text" ng-disabled="interface.DHCPEnabled" value="" ng-model="ipv4.Gateway"/>
            </div>
            <!-- This netmask prefix length max only works with IPV4 -->
            <div class="column small-12 large-6">
              <label>Netmask Prefix Length</label>
              <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"/>
              <button class="network-config_remove-button inline" ng-click="removeIpv4Address($index)">Remove</button>
            </div>
          </fieldset>
          <div class="row column">
            <div class="column small-12">
              <button type="button" class="btn-primary inline" ng-click="addIpv4Field()">Add IPV4 address</button>
            </div>
          </div>
        </div>
      </fieldset>
    </section>
    <section class="row column">
      <div class="column small-12 page-header">
        <h2 class="inline">DNS settings</h2>
      </div>
      <fieldset>
        <!-- Call Nameservers "DNS Servers" on the GUI -->
        <fieldset class="net-config__static-ip-wrap" ng-repeat="dns in interface.Nameservers track by $index">
          <div class="column small-12">
            <label for="net-config__prime-dns{{$index+1}}">DNS Server {{$index+1}}</label>
            <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/>
            <button class="network-config_remove-button inline" ng-click="removeDNSField($index)">Remove</button>
          </div>
        </fieldset>
        <div class="row column">
          <div class="column small-12">
            <button type="button" class="btn-primary inline dns_add" ng-click="addDNSField()">Add DNS server</button>
          </div>
        </div>
      </fieldset>
      <div class="network-config__submit-wrapper">
        <button type="button" class="btn-primary inline" ng-click="confirmSettings=true;">Save settings</button>
        <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
      </div>
    </section>
  </form>
</div>
<div class="modal-overlay" tabindex="-1" ng-class="{'active': confirmSettings}"></div>
<section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}">
  <div class="modal__tftp-unreachable" role="document">
    <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
    <div class="page-header ">
      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
      <h3 class="modal-title inline">Change network settings</h3>
    </div>
    <div class="modal__content">
      <p>Changing network settings may cause the system to become unavailable (e.g. changing the BMC IP address).
        Proceed with caution and make note of any new settings that may affect connectivity.</p>
    </div>
    <div class="modal__button-wrapper">
      <button class="inline btn-secondary" ng-click="confirmSettings=false;">Cancel</button>
      <button class="inline btn-primary" ng-click="setNetworkSettings()">Continue</button>
    </div>
  </div>
</section>