[GitHub] [trafficcontrol] ocket8888 opened a new pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 opened a new pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747


   Depends on #4700 


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r440403649



##########
File path: traffic_portal/app/src/common/modules/table/cacheGroupServers/TableCacheGroupServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService) {
+var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService, serverUtils) {

Review comment:
       why? i don't see serverUtils being used in this file.

##########
File path: traffic_portal/app/src/common/modules/table/statusServers/TableStatusServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableStatusServersController = function(status, servers, $controller, $scope) {
+var TableStatusServersController = function(status, servers, $controller, $scope, serverUtils) {

Review comment:
       same

##########
File path: traffic_portal/app/src/common/modules/table/cdnServers/TableCDNServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableCDNServersController = function(cdn, servers, $controller, $scope) {
+var TableCDNServersController = function(cdn, servers, $controller, $scope, serverUtils) {

Review comment:
       same about serverUtils

##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       when you add your first interface, the it's unclear what to put in the first box
   
   ![image](https://user-images.githubusercontent.com/251272/84705103-1edb8400-af18-11ea-8527-210371a6baea.png)
   

##########
File path: traffic_portal/app/src/common/modules/table/profileServers/TableProfileServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableProfileServersController = function(profile, servers, $controller, $scope) {
+var TableProfileServersController = function(profile, servers, $controller, $scope, serverUtils) {

Review comment:
       same

##########
File path: traffic_portal/app/src/common/modules/table/typeServers/TableTypeServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableTypeServersController = function(type, servers, $controller, $scope) {
+var TableTypeServersController = function(type, servers, $controller, $scope, serverUtils) {

Review comment:
       same

##########
File path: traffic_portal/app/src/common/modules/table/physLocationServers/TablePhysLocationServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TablePhysLocationServersController = function(physLocation, servers, $controller, $scope) {
+var TablePhysLocationServersController = function(physLocation, servers, $controller, $scope, serverUtils) {

Review comment:
       same




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649008585


   https://github.com/ocket8888/trafficcontrol/pull/37


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443761179



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       placeholder would be fine. i just think it will confuse people. maybe placeholder: name (i.e. eth0, bond0, etc)

##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       placeholder would be fine. i just think it will confuse people. maybe placeholder: `name (i.e. eth0, bond0, etc)`




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648257391


   I created a PR for you if you want to show the success/error message in a more friendly way
   
   https://github.com/ocket8888/trafficcontrol/pull/36


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 merged pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 merged pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648210909


   If you put your buttons in the legend, i think the icons work pretty well instead of the words. looks cleaner
   
   ![image](https://user-images.githubusercontent.com/251272/85418389-f6faaa80-b52d-11ea-838a-f4c735fc4672.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649000720


   > _"I can create one w/o a service address."_
   
   No you can't. You can try, but it's not possible.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648999508


   I added the `42` to an existing interface and the Update button did not enable:
   
   ![image](https://user-images.githubusercontent.com/251272/85614822-91cfb380-b618-11ea-97b5-991cbb0e0c67.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-647804115


   > also, i'm getting this error when trying to create a server:
   > 
   > `shared-libs.js:65171 TypeError: Cannot read property 'cdnId' of undefined`
   
   fixed


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-650835293


   > > > _"I can create one w/o a service address."_
   > > 
   > > 
   > > No you can't. You can try, but it's not possible.
   > 
   > No, I did. It was possible. :)
   
   ok, this is fixed now with #4828 


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-651488844


   retest this please


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r439510340



##########
File path: traffic_portal/app/src/common/modules/table/cacheGroupServers/TableCacheGroupServersController.js
##########
@@ -17,11 +17,13 @@
  * under the License.
  */
 
-var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService) {
+var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService, serverUtils) {
 
 	// extends the TableServersController to inherit common methods
 	angular.extend(this, $controller('TableServersController', { servers: servers, $scope: $scope }));
 
+	$scope.serverNetInfo = new Map(servers.map(function(s){return [s.id, serverUtils.toLegacyIPInfo(s.interfaces)];}));

Review comment:
       you should be able to just put this in the `TableServersController` which is the parent controller to all of these controllers rather than duplicating it across all server controllers.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649014521


   Yes you can... That's a problem with the API though. The test for that is giving a false positive. I'm working on it.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r444339195



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       maybe the placeholder was a bad idea because now it looks like text and the `update` or `create` button is disabled unless i change it....but if i want it to be `eth0` it looks like it's already filled in. maybe a better placeholder would be `interface-name`?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r444297934



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       oh, i understand what is going on
   
   ![image](https://user-images.githubusercontent.com/251272/85420763-e13ab480-b530-11ea-9feb-b7e44014bcc3.png)
   
   eth0 is a placeholder. it looks like regular text so i was trying to double click it to select it all to replace it...




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r440443464



##########
File path: traffic_portal/app/src/common/modules/table/cacheGroupServers/TableCacheGroupServersController.js
##########
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService) {
+var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService, serverUtils) {

Review comment:
       That's a hold-over from when the map was duplicated in those files.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-647721730


   also, i'm getting this error when trying to create a server:
   
   ```shared-libs.js:65171 TypeError: Cannot read property 'cdnId' of undefined```


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649004442


   also, getting this error when trying to update status on a server:
   
   ![image](https://user-images.githubusercontent.com/251272/85615721-ec1d4400-b619-11ea-85a7-09d9ff1959e3.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443862120



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       placeholders are only supposed to be example values that would be valid in the input if you typed them in. So I added a placeholder, lemme know if you think that works.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-647720624


   I like the way you've nested the interfaces on the form, but i'm still have a hard time visually lining up the buttons with the proper nested box and the interface buttons are interfering with the main buttons of the form as well (update/delete). 
   
   ![image](https://user-images.githubusercontent.com/251272/85326125-fd374b00-b489-11ea-8029-682772c825c2.png)
   
   what about moving a button or a link into the legend like such:
   
   ![image](https://user-images.githubusercontent.com/251272/85325700-4935c000-b489-11ea-897a-b20310a360a9.png)
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648303574


   Buttons are back to +/-


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443818097



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       my-directive?




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649004442


   also, getting this error when trying to update status on a server:
   
   ![image](https://user-images.githubusercontent.com/251272/85615881-2c7cc200-b61a-11ea-8724-77f42e409499.png)
   
   ![image](https://user-images.githubusercontent.com/251272/85615721-ec1d4400-b619-11ea-85a7-09d9ff1959e3.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443818659



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       this text input acts weird for me. does it for you? i can only put my cursor at the start of the text.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r444376571



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       That could work.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-650380701


   > also, getting this error when trying to update status on a server:
   > 
   > ![image](https://user-images.githubusercontent.com/251272/85615881-2c7cc200-b61a-11ea-8724-77f42e409499.png)
   > 
   > ![image](https://user-images.githubusercontent.com/251272/85615721-ec1d4400-b619-11ea-85a7-09d9ff1959e3.png)
   
   @ocket8888 did you look at this one?


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443863565



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       directive is gone, can't reproduce not being allowed to put your cursor wherever you want




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r439511075



##########
File path: traffic_portal/app/src/common/modules/table/cacheGroupServers/TableCacheGroupServersController.js
##########
@@ -17,11 +17,13 @@
  * under the License.
  */
 
-var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService) {
+var TableCacheGroupsServersController = function(cacheGroup, servers, $controller, $scope, $state, $uibModal, cacheGroupService, serverUtils) {
 
 	// extends the TableServersController to inherit common methods
 	angular.extend(this, $controller('TableServersController', { servers: servers, $scope: $scope }));
 
+	$scope.serverNetInfo = new Map(servers.map(function(s){return [s.id, serverUtils.toLegacyIPInfo(s.interfaces)];}));

Review comment:
       also, i was unable to find this column in 
   
   ![image](https://user-images.githubusercontent.com/251272/84523048-e9733400-ac94-11ea-9a33-f7fb314e17dd.png)
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r440444394



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       What should I do about that? Add a placeholder or a label? I thought using the name as the full legend was pretty neat, looked a little weird with "Name: " in front of everything.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-647720624


   I like the way you've nested the interfaces on the form, but i'm still have a hard time visually lining up the buttons with the proper nested box and the buttons are interfering with the main buttons of the form as well (update/delete). 
   
   ![image](https://user-images.githubusercontent.com/251272/85326125-fd374b00-b489-11ea-8029-682772c825c2.png)
   
   what about moving a button or a link into the legend like such:
   
   ![image](https://user-images.githubusercontent.com/251272/85325700-4935c000-b489-11ea-897a-b20310a360a9.png)
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648210909


   If you put your buttons in the legend, i think the icon buttons (like you had originally) work pretty well instead of the words. looks cleaner
   
   ![image](https://user-images.githubusercontent.com/251272/85418389-f6faaa80-b52d-11ea-838a-f4c735fc4672.png)
   
   for example:
   
   ```
   <legend>Interfaces<a title="add a new interface" class="btn btn-primary btn-xs pull-right" ng-click="addInterface()"><i class="fa fa-plus"></i></a></legend>
   ```
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r440441066



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       when you add your first interface, it's unclear what to put in the first box
   
   ![image](https://user-images.githubusercontent.com/251272/84705103-1edb8400-af18-11ea-8527-210371a6baea.png)
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649010432


   > [ocket8888#37](https://github.com/ocket8888/trafficcontrol/pull/37)
   
   sorry, missed one. look in TableServerConfigFilesController as well.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-647720624


   I like the way you've nested the interfaces on the form, but i'm still have a hard time lining up the buttons with the proper nested box and the buttons are interfering with the main buttons of the form as well (update/delete). 
   
   ![image](https://user-images.githubusercontent.com/251272/85326125-fd374b00-b489-11ea-8029-682772c825c2.png)
   
   what about moving a button or a link into the legend like such:
   
   ![image](https://user-images.githubusercontent.com/251272/85325700-4935c000-b489-11ea-897a-b20310a360a9.png)
   
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443827162



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       idk what "my-directive" is or why it's in there. I'll get rid of it.
   as far as "acting weird," no, I don't think I have, but I'll look at it.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-649003732


   > > _"I can create one w/o a service address."_
   > 
   > No you can't. You can try, but it's not possible.
   
   No, I did. It was possible. :)


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648997959


   @ocket8888 - doesn't every cache require at least one service address? I can create one w/o a service address.
   
   ![image](https://user-images.githubusercontent.com/251272/85614435-1e2da680-b618-11ea-86ce-810331b5899d.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-650379646


   https://github.com/ocket8888/trafficcontrol/pull/38


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-644411129


   I'm not seeing any errors on the server create page. Tried Chrome and Firefox.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-650380701


   > also, getting this error when trying to update status on a server:
   > 
   > ![image](https://user-images.githubusercontent.com/251272/85615881-2c7cc200-b61a-11ea-8724-77f42e409499.png)
   > 
   > ![image](https://user-images.githubusercontent.com/251272/85615721-ec1d4400-b619-11ea-85a7-09d9ff1959e3.png)
   
   @ocket8888 did you look at this one?
   
   actually, just apply this @ocket8888  - https://github.com/mitchell852/trafficcontrol/commit/e0f33ad0d7fecc8fe677b8d4883e166e76ce4088 - i tried to PR your PR but it got all screwed up.


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443761179



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces</legend>

Review comment:
       placeholder would be fine. i just think it will confuse people. maybe placeholder: name (i.e. eth0)




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-642319131


   Done


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] mitchell852 edited a comment on pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

mitchell852 edited a comment on pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#issuecomment-648210909


   If you put your buttons in the legend, i think the icons work pretty well instead of the words. looks cleaner
   
   ![image](https://user-images.githubusercontent.com/251272/85418389-f6faaa80-b52d-11ea-838a-f4c735fc4672.png)
   
   for example:
   
   ```
   <legend>Interfaces<a title="add a new interface" class="btn btn-primary btn-xs pull-right" ng-click="addInterface()"><i class="fa fa-plus"></i></a></legend>
   ```
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #4747: Tp interface servers

[GitBox <gi...@apache.org>]

ocket8888 commented on a change in pull request #4747:
URL: https://github.com/apache/trafficcontrol/pull/4747#discussion_r443827162



##########
File path: traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
##########
@@ -43,285 +42,245 @@
         </div>
         <div class="clearfix"></div>
     </div>
-    <div class="x_content">
+    <div>
         <br>
-        <form name="serverForm" class="form-horizontal form-label-left" novalidate>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Status *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
-                </div>
-            </div>
-            <div class="form-group" ng-show="server.offlineReason.length > 0">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Offline Reason</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" ng-maxlength="256" ng-readonly="true">
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Update Pending *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Hostname *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="hostName" type="text" class="form-control" ng-model="server.hostName" ng-maxlength="100" ng-pattern="/^([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Domain name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="domainName" type="text" class="form-control" ng-model="server.domainName" ng-maxlength="100" ng-pattern="/^\S*$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">CDN *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
-                    <small ng-show="server.cdnId"><a href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Cache Group *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
-                    <small ng-show="server.cachegroupId"><a href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
-            </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
-                <label for="type" class="control-label col-md-2 col-sm-2 col-xs-12">Type *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
-                    <small ng-show="server.typeId"><a href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+        <form name="serverForm" class="form-control-columns">
+
+            <label for="status">Status *</label>
+            <div>
+                <select id="status" name="status" class="form-control" ng-model="server.statusId" ng-options="status.id as status.name for status in statuses" ng-disabled="!settings.isNew"></select>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Profile *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
-                    <small ng-show="server.profileId"><a href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label ng-if="server.offlineReason.length > 0" for="offlineReason">Offline Reason</label>
+            <div ng-if="server.offlineReason.length > 0">
+                <input id="offlineReason" name="offlineReason" type="text" class="form-control" ng-model="server.offlineReason" maxlength="256" readonly>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceName), 'has-feedback': hasError(serverForm.interfaceName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Interface Name *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceName" type="text" class="form-control" ng-model="server.interfaceName" ng-maxlength="45" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="updPending">Update Pending *</label>
+            <div>
+                <input id="updPending" name="updPending" type="text" class="form-control" ng-model="server.updPending" ng-disabled="true">
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP <span ng-show="!server.ip6Address">*</span>
-					<div class="helptooltip">
-						<div class="helptext">The IPv4 address of the Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input id="ipIsService" ng-model="server.ipIsService" type="checkbox" name="ipIsService" title="This IP Address will be used for ATS to serve traffic">  Is Service Address
-                    <input name="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="!server.ip6Address" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'required')">Network IP or IPv6 Address Is Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="hostName" ng-class="{'has-error': hasError(serverForm.hostName)}">Hostname *</label>
+            <div ng-class="{'has-error': hasError(serverForm.hostName), 'has-feedback': hasError(serverForm.hostName)}">
+                <input id="hostName" name="hostName" type="text" class="form-control" ng-model="server.hostName" maxlength="100" pattern="([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])" required>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.hostName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.hostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipNetmask), 'has-feedback': hasError(serverForm.ipNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Subnet <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipNetmask" type="text" class="form-control" ng-model="server.ipNetmask" ng-maxlength="45" ng-pattern="validations.ipRegex" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="domainName" ng-class="{'has-error': hasError(serverForm.domainName)}">Domain name *</label>
+            <div ng-class="{'has-error': hasError(serverForm.domainName), 'has-feedback': hasError(serverForm.domainName)}">
+                <input id="domainName" name="domainName" type="text" class="form-control" ng-model="server.domainName" maxlength="100" pattern="^\S*" required/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'required')">Required</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.domainName, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.domainName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipGateway), 'has-feedback': hasError(serverForm.ipGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network Gateway <span ng-show="server.ipAddress">*</span></label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ipGateway" id="ipGateway" type="text" class="form-control" ng-model="server.ipGateway" ng-maxlength="45" ng-pattern="ipRegex()" ng-required="server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ipGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.ipGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cdn" ng-class="{'has-error': hasError(serverForm.cdn)}">CDN *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cdn), 'has-feedback': hasError(serverForm.cdn)}">
+                <select name="cdn" id="cdn" class="form-control" ng-change="onCDNChange()" ng-model="server.cdnId" ng-options="cdn.id as cdn.name for cdn in cdns" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cdn, 'required')">Required</small>
+                <small ng-show="server.cdnId"><a ng-href="/#!/cdns/{{server.cdnId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.interfaceMtu), 'has-feedback': hasError(serverForm.interfaceMtu)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Network MTU *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="interfaceMtu" type="number" class="form-control" placeholder="eg. 1500 or 9000" ng-model="server.interfaceMtu" ng-pattern="/^\d+$/" required autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'required')">Required</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.interfaceMtu, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.interfaceMtu)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="cachegroup" ng-class="{'has-error': hasError(serverForm.cachegroup)}">Cache Group *</label>
+            <div ng-class="{'has-error': hasError(serverForm.cachegroup), 'has-feedback': hasError(serverForm.cachegroup)}">
+                <select id="cachegroup" name="cachegroup" class="form-control" ng-model="server.cachegroupId" ng-options="cachegroup.id as cachegroup.name for cachegroup in cacheGroups" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.cachegroup, 'required')">Required</small>
+                <small ng-show="server.cachegroupId"><a ng-href="/#!/cache-groups/{{server.cachegroupId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Phys Location *</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <select name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
-                        <option value="">Select...</option>
-                    </select>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
-                    <small ng-show="server.physLocationId"><a href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                </div>
+
+            <label for="type" ng-class="{'has-error': hasError(serverForm.type)}">Type *</label>
+            <div ng-class="{'has-error': hasError(serverForm.type), 'has-feedback': hasError(serverForm.type)}">
+                <select id="type" name="type" class="form-control" ng-model="server.typeId" ng-options="type.id as type.name for type in types" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.type, 'required')">Required</small>
+                <small ng-show="server.typeId"><a ng-href="/#!/types/{{server.typeId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address <span ng-show="!server.ipAddress">*</span>
-					<div class="helptooltip">
-						<div class="helptext">An IPv6 address and subnet mask of Interface Name.  If the Is Service Address box is checked, then this address will be included in the Traffic Router config and traffic will be routed to this address. At least one Network IP or IPv6 Address must be provided.</div>
-					</div>
-				</label>
-				<div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6IsService" type="checkbox" ng-model="server.ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address
-                    <input name="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-required="!server.ipAddress" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'required')">Network IP or IPv6 Address Is Required</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ip6Address, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="profile" ng-class="{'has-error': hasError(serverForm.profile)}">Profile *</label>
+            <div ng-class="{'has-error': hasError(serverForm.profile), 'has-feedback': hasError(serverForm.profile)}">
+                <select id="profile" name="profile" class="form-control" ng-model="server.profileId" ng-options="profile.id as profile.name for profile in profiles" required>
+                    <option hidden selected disabled value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.profile, 'required')">Required</small>
+                <small ng-show="server.profileId"><a ng-href="/#!/profiles/{{server.profileId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">IPv6 Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="ip6Gateway"  id="ip6Gateway" type="text" class="form-control" ng-model="server.ip6Gateway" ng-maxlength="50" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.ip6Gateway, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.ip6Gateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="physLocation" ng-class="{'has-error': hasError(serverForm.physLocation)}">Physical Location *</label>
+            <div ng-class="{'has-error': hasError(serverForm.physLocation), 'has-feedback': hasError(serverForm.physLocation)}">
+                <select id="physLocation" name="physLocation" class="form-control" ng-model="server.physLocationId" ng-options="physLocation.id as physLocation.name for physLocation in physLocations" required>
+                    <option value="">Select...</option>
+                </select>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.physLocation, 'required')">Required</small>
+                <small ng-show="server.physLocationId"><a ng-href="/#!/phys-locations/{{server.physLocationId}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">TCP Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.tcpPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="tcpPort" ng-class="{'has-error': hasError(serverForm.tcpPort)}">TCP Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.tcpPort), 'has-feedback': hasError(serverForm.tcpPort)}">
+                <input id="tcpPort" name="tcpPort" type="number" class="form-control" ng-model="server.tcpPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.tcpPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">HTTPS Port</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" ng-pattern="/^\d+$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'pattern')">Whole Number</small>
-                    <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="httpsPort" ng-class="{'has-error': hasError(serverForm.httpsPort)}">HTTPS Port</label>
+            <div ng-class="{'has-error': hasError(serverForm.httpsPort), 'has-feedback': hasError(serverForm.httpsPort)}">
+                <input id="httpsPort" name="httpsPort" type="number" class="form-control" ng-model="server.httpsPort" min="0" max="65535"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.httpsPort, 'min') || hasPropertyError(serverForm.httpsPort, 'max')">Invalid port number (must be whole number less than 65536)</small>
+                <span ng-show="hasError(serverForm.httpsPort)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Rack / Elevation</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="rack" type="text" class="form-control" ng-model="server.rack" ng-maxlength="64" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="rack" ng-class="{'has-error': hasError(serverForm.rack)}">Rack / Elevation</label>
+            <div ng-class="{'has-error': hasError(serverForm.rack), 'has-feedback': hasError(serverForm.rack)}">
+                <input id="rack" name="rack" type="text" class="form-control" ng-model="server.rack" maxlength="64">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.rack, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.rack)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-maxlength="50" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpAddress" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpAddress)}">Management IP Address<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpAddress), 'has-feedback': hasError(serverForm.mgmtIpAddress)}">
+                <input id="mgmtIpAddress" name="mgmtIpAddress" type="text" class="form-control" ng-model="server.mgmtIpAddress" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern">
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpNetmask" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask)}">Management IP Netmask<div class="helptooltip">
+                <div class="helptext">
+                    This is an IPv4 subnet mask for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpNetmask), 'has-feedback': hasError(serverForm.mgmtIpNetmask)}">
+                <input id="mgmtIpNetmask" name="mgmtIpNetmask" type="text" class="form-control" ng-model="server.mgmtIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Management IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+
+            <label for="mgmtIpGateway" class="has-tooltip" ng-class="{'has-error': hasError(serverForm.mgmtIpGateway)}">Management IP Gateway<div class="helptooltip">
+                <div class="helptext">
+                    This is an IP address for the server's management interface.
+                    <aside class="warning">
+                        <h6>Deprecated</h6>
+                        <p>Management interfaces are deprecated and will be removed in the future. Please move all such information into the "Interfaces" section.</p>
+                    </aside>
                 </div>
+            </div></label>
+            <div ng-class="{'has-error': hasError(serverForm.mgmtIpGateway), 'has-feedback': hasError(serverForm.mgmtIpGateway)}">
+                <input id="mgmtIpGateway" name="mgmtIpGateway" type="text" class="form-control" ng-model="server.mgmtIpGateway" ng-pattern="server.mgmtIpNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.mgmtIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.mgmtIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Address</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpAddress" ng-class="{'has-error': hasError(serverForm.iloIpAddress)}">ILO IP Address</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpAddress), 'has-feedback': hasError(serverForm.iloIpAddress)}">
+                <input id="iloIpAddress" name="iloIpAddress" type="text" class="form-control" ng-model="server.iloIpAddress" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpAddress, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Netmask</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpNetmask" ng-class="{'has-error': hasError(serverForm.iloIpNetmask)}">ILO IP Netmask</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpNetmask), 'has-feedback': hasError(serverForm.iloIpNetmask)}">
+                <input id="iloIpNetmask" name="iloIpNetmask" type="text" class="form-control" ng-model="server.iloIpNetmask" ng-pattern="IPv4Pattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpNetmask, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpNetmask)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO IP Gateway</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-maxlength="45" ng-pattern="ipRegex()" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
-                    <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label for="iloIpGateway" ng-class="{'has-error': hasError(serverForm.iloIpGateway)}">ILO IP Gateway</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloIpGateway), 'has-feedback': hasError(serverForm.iloIpGateway)}">
+                <input id="iloIpGateway" name="iloIpGateway" type="text" class="form-control" ng-model="server.iloIpGateway" ng-pattern="server.iloIPNetmask ? IPv4Pattern : IPPattern"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloIpGateway, 'pattern')">Invalid</small>
+                <span ng-show="hasError(serverForm.iloIpGateway)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Username</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" ng-maxlength="45" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloUsername)}">ILO Username</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloUsername), 'has-feedback': hasError(serverForm.iloUsername)}">
+                <input name="iloUsername" type="text" class="form-control" ng-model="server.iloUsername" maxlength="45" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloUsername, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.iloUsername)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">ILO Password</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" ng-maxlength="45" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.iloPassword)}">ILO Password</label>
+            <div ng-class="{'has-error': hasError(serverForm.iloPassword), 'has-feedback': hasError(serverForm.iloPassword)}">
+                <input name="iloPassword" type="text" class="form-control" ng-model="server.iloPassword" maxlength="45"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.iloPassword, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.iloPassword)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Hostname</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" ng-maxlength="256" ng-pattern="/^\S*$/" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
-                    <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerHostName)}">Router Hostname</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerHostName), 'has-feedback': hasError(serverForm.routerHostName)}">
+                <input name="routerHostName" type="text" class="form-control" ng-model="server.routerHostName" maxlength="256" pattern="\S*"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'maxlength')">Too Long</small>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerHostName, 'pattern')">No Spaces</small>
+                <span ng-show="hasError(serverForm.routerHostName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
-                <label class="control-label col-md-2 col-sm-2 col-xs-12">Router Port Name</label>
-                <div class="col-md-10 col-sm-10 col-xs-12">
-                    <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" ng-maxlength="256" autofocus>
-                    <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
-                    <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
-                </div>
+
+            <label ng-class="{'has-error': hasError(serverForm.routerPortName)}">Router Port Name</label>
+            <div ng-class="{'has-error': hasError(serverForm.routerPortName), 'has-feedback': hasError(serverForm.routerPortName)}">
+                <input name="routerPortName" type="text" class="form-control" ng-model="server.routerPortName" maxlength="256"/>
+                <small class="input-error" ng-show="hasPropertyError(serverForm.routerPortName, 'maxlength')">Too Long</small>
+                <span ng-show="hasError(serverForm.routerPortName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
             </div>
-            <div class="modal-footer">
+
+            <fieldset>
+                <legend>Interfaces<button class="btn btn-success right-button" type="button" title="add a new interface" ng-click="addInterface()">Add Interface</button></legend>
+                <fieldset ng-repeat="inf in server.interfaces">
+                    <legend>
+                        <input my-directive type="text" ng-model="inf.name" required aria-label="Interface name" id="{{inf.name}}-name" name="{{inf.name}}-name" ng-class="{'has-error': hasError(serverForm[inf.name+'-name'])}" placeholder="eth0"/>

Review comment:
       idk what "my-directive" is or why it's in there. I'll get rid of it.
   as far as "acting weird," no, I don't think I have noticed that, but I'll look at it.




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org