1<loader loading="loading"></loader>
2<div id="configuration-snmp" class="page">
3  <h1 class="page-title">SNMP settings</h1>
4  <section class="section">
5    <p class="section-content">
6      Set the Simple Network Management Protocol (SNMP) with a host name or IP
7      address and a port.
8    </p>
9  </section>
10  <section class="section">
11    <div class="section-header">
12      <h2 class="section-title">Managers</h2>
13    </div>
14    <div class="section-content">
15      <p class="manager_group empty" ng-if="managers.length < 1">
16        No managers have been added yet.
17      </p>
18    </div>
19    <form id="snmp__form" name="snmp__form" novalidate>
20      <div class="section-content">
21        <div
22          class="row manager_group"
23          ng-form="manager_group"
24          ng-repeat="manager in managers track by $index">
25          <div class="small-12 medium-5 large-4 form__field snmp-field">
26            <label
27              for="snmp-manager{{ $index + 1 }}-address"
28              class="content-label">
29              Host name or IP Address
30            </label>
31            <input
32              id="snmp-manager{{ $index + 1 }}-address"
33              name="snmp-manager{{ $index + 1 }}-address"
34              type="text"
35              ng-change="manager.updateAddress=true"
36              ng-model="manager.address"
37              required/>
38            <div
39              ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error"
40              class="form-error"
41              ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
42              <p ng-message="required" role="alert">Field is required</p>
43            </div>
44          </div>
45          <div class="small-9 medium-5 large-4 form__field snmp-field">
46            <label for="snmp-manager{{ $index + 1 }}-port" class="content-label">Port</label>
47            <input
48              id="snmp-manager{{ $index + 1 }}-port"
49              name="snmp-manager{{ $index + 1 }}-port"
50              type="number"
51              min="0"
52              max="65535"
53              step="1"
54              ng-change="manager.updatePort=true"
55              ng-model="manager.port"
56              required/>
57            <div
58              ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error"
59              class="form-error"
60              ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
61              <p ng-message="required" role="alert">Value must be between 0 - 65,535</p>
62            </div>
63          </div>
64          <div class="small-3 medium-2 large-4 snmp-field">
65            <button
66              class="btn btn-tertiary trash_button"
67              type="button"
68              ng-click="removeSNMPManager($index)"
69              aria-label="Remove">
70              <icon file="icon-trashcan.svg" aria-hidden="true"></icon>
71            </button>
72          </div>
73        </div>
74      </div>
75      <div class="section-content">
76        <button
77          class="btn btn-tertiary btn-add-manager"
78          type="button"
79          ng-click="submitted=false; addNewSNMPManager();">
80          <icon file="icon-plus.svg" aria-hidden="true"></icon>Add manager
81        </button>
82      </div>
83      <div class="form__actions">
84        <button
85          type="submit"
86          class="btn btn-primary"
87          ng-click="submitted=true;  snmp__form.$valid && setSNMP();">
88          Save settings
89        </button>
90        <button type="button" class="btn btn-secondary" ng-click="refresh()">
91          Cancel
92        </button>
93      </div>
94    </form>
95  </section>
96</div>
97