You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@trafficcontrol.apache.org by ma...@apache.org on 2020/03/20 21:58:27 UTC

[trafficcontrol] branch master updated: TP: refactor to simplify UI code to require server IPv4 OR IPv6 address (#4497)

This is an automated email from the ASF dual-hosted git repository.

mattjackson pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git


The following commit(s) were added to refs/heads/master by this push:
     new 4b67a3e  TP: refactor to simplify UI code to require server IPv4 OR IPv6 address (#4497)
4b67a3e is described below

commit 4b67a3ed5381151fe61dd4f949105fca313e463d
Author: Jeremy Mitchell <mi...@users.noreply.github.com>
AuthorDate: Fri Mar 20 15:58:18 2020 -0600

    TP: refactor to simplify UI code to require server IPv4 OR IPv6 address (#4497)
    
    * cleans up UI code required to ensure an IPv4 OR an IPv6 address is defined
    
    * require at least 1 service address
    
    Co-authored-by: mjacks258 <ma...@comcast.com>
---
 lib/go-tc/constants.go                             |  1 +
 traffic_ops/traffic_ops_golang/server/servers.go   |  4 +++
 traffic_portal/app/src/common/api/ServerService.js | 12 -------
 .../modules/form/server/FormServerController.js    | 38 ----------------------
 .../modules/form/server/form.server.tpl.html       | 34 +++++++++----------
 .../app/src/common/service/utils/FormUtils.js      | 20 ------------
 .../app/src/modules/private/servers/new/index.js   |  4 ++-
 7 files changed, 25 insertions(+), 88 deletions(-)

diff --git a/lib/go-tc/constants.go b/lib/go-tc/constants.go
index a2a79f6..fd4551f 100644
--- a/lib/go-tc/constants.go
+++ b/lib/go-tc/constants.go
@@ -41,6 +41,7 @@ const TenantUserNotAuthError = ErrorConstant("user not authorized for requested
 const TenantDSUserNotAuthError = ErrorConstant("user not authorized for requested delivery service tenant")
 const NeedsAtLeastOneIPError = ErrorConstant("both IP and IP6 addresses are empty")
 const EmptyAddressCannotBeAServiceAddressError = ErrorConstant("an empty IP or IPv6 address cannot be marked as a service address")
+const NeedsAtLeastOneServiceAddressError = ErrorConstant("at least one address must be marked as a service address")
 
 // AlertLevel is used for specifying or comparing different levels of alerts.
 type AlertLevel int
diff --git a/traffic_ops/traffic_ops_golang/server/servers.go b/traffic_ops/traffic_ops_golang/server/servers.go
index 6798928..3ba2000 100644
--- a/traffic_ops/traffic_ops_golang/server/servers.go
+++ b/traffic_ops/traffic_ops_golang/server/servers.go
@@ -108,6 +108,10 @@ func (s *TOServer) Validate() error {
 		errs = append(errs, tc.EmptyAddressCannotBeAServiceAddressError)
 	}
 
+	if !*s.IPIsService && !*s.IP6IsService {
+		errs = append(errs, tc.NeedsAtLeastOneServiceAddressError)
+	}
+
 	validateErrs := validation.Errors{
 		"cachegroupId":   validation.Validate(s.CachegroupID, validation.NotNil),
 		"cdnId":          validation.Validate(s.CDNID, validation.NotNil),
diff --git a/traffic_portal/app/src/common/api/ServerService.js b/traffic_portal/app/src/common/api/ServerService.js
index b16ed9f..ce689dd 100644
--- a/traffic_portal/app/src/common/api/ServerService.js
+++ b/traffic_portal/app/src/common/api/ServerService.js
@@ -42,12 +42,6 @@ var ServerService = function($http, locationUtils, messageModel, ENV) {
     };
 
     this.createServer = function(server) {
-        if (!server.ip6Address) {
-            server.ip6IsService = false;
-        }
-        if (!server.ipAddress) {
-            server.ipIsService = false;
-        }
         return $http.post(ENV.api['root'] + 'servers', server).then(
             function(result) {
                 messageModel.setMessages([ { level: 'success', text: 'Server created' } ], true);
@@ -63,12 +57,6 @@ var ServerService = function($http, locationUtils, messageModel, ENV) {
 
     // todo: change to use query param when it is supported
     this.updateServer = function(server) {
-        if (!server.ip6Address) {
-            server.ip6IsService = false;
-        }
-        if (!server.ipAddress) {
-            server.ipIsService = false;
-        }
         return $http.put(ENV.api['root'] + 'servers/' + server.id, server).then(
             function(result) {
                 messageModel.setMessages([ { level: 'success', text: 'Server updated' } ], false);
diff --git a/traffic_portal/app/src/common/modules/form/server/FormServerController.js b/traffic_portal/app/src/common/modules/form/server/FormServerController.js
index 2ecc14b..2a394f6 100644
--- a/traffic_portal/app/src/common/modules/form/server/FormServerController.js
+++ b/traffic_portal/app/src/common/modules/form/server/FormServerController.js
@@ -80,9 +80,6 @@ var FormServerController = function(server, $scope, $location, $state, $uibModal
 
     $scope.server = server;
 
-    $scope.server.ip6IsService = $scope.server.ip6IsService === undefined ? true : $scope.server.ip6IsService;
-    $scope.server.ipIsService = $scope.server.ipIsService === undefined ? true: $scope.server.ipIsService;
-
     $scope.falseTrue = [
         { value: true, label: 'true' },
         { value: false, label: 'false' }
@@ -94,7 +91,6 @@ var FormServerController = function(server, $scope, $location, $state, $uibModal
 
     $scope.isOrigin = serverUtils.isOrigin;
 
-
     $scope.openCharts = serverUtils.openCharts;
 
     $scope.showChartsButton = propertiesModel.properties.servers.charts.show;
@@ -161,40 +157,6 @@ var FormServerController = function(server, $scope, $location, $state, $uibModal
 
     $scope.hasPropertyError = formUtils.hasPropertyError;
 
-    $scope.oneInputHasPropertyError = formUtils.oneInputHasPropertyError;
-
-    $scope.elementId = '';
-
-    $scope.toggleIpAddressRequired = function(elementId) {
-        var elementToChange = elementId === 'ipAddress' ? 'ip6Address' : 'ipAddress';
-
-        if (document.getElementById(elementId).value === '') {
-            document.getElementById(elementToChange).required = true;
-        } else {
-            document.getElementById(elementToChange).required = false;
-        }
-    };
-
-    $scope.toggleIpGatewayRequired = function(elementId) {
-        var elementToChange = elementId === 'ipGateway' ? 'ip6Gateway' : 'ipGateway';
-
-        if (document.getElementById(elementId).value === '') {
-            document.getElementById(elementToChange).required = true;
-        } else {
-            document.getElementById(elementToChange).required = false;
-        }
-    };
-
-    $scope.hasIPv4 = function() {
-        return document.getElementById('ipAddress').value !== '';
-    };
-    $scope.hasIPv6 = function() {
-        return document.getElementById('ip6Address').value !== '';
-    };
-    $scope.IpAddressesBothBlank = function() {
-        return document.getElementById('ipAddress').value === '' && document.getElementById('ip6Address').value === '';
-    };
-
     var init = function () {
         getPhysLocations();
         getCacheGroups();
diff --git a/traffic_portal/app/src/common/modules/form/server/form.server.tpl.html b/traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
index ede6ac6..993dfbb 100644
--- a/traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/server/form.server.tpl.html
@@ -133,25 +133,25 @@ under the License.
                     <span ng-show="hasError(serverForm.interfaceName)" class="form-control-feedback"><i class="fa fa-times"></i></span>
                 </div>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ipAddress) && hasError(serverForm.ip6Address), 'has-feedback': hasError(serverForm.ipAddress) && hasError(serverForm.ip6Address)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">Network IP *
+            <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 name="ipAddress" id="ipAddress" type="text" class="form-control" ng-model="server.ipAddress" ng-maxlength="45" ng-pattern="ipRegex()" ng-change="toggleIpAddressRequired('ipAddress')" ng-required="IpAddressesBothBlank()" autofocus>
-                    <small class="input-error" ng-show="oneInputHasPropertyError('required', serverForm.ip6Address, serverForm.ipAddress)">At Least One IP Address Is Required</small>
-					<small ng-if="server.ipAddress && server.ipAddress !== ''"><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</small>
-					<small class="input-error" ng-show="hasPropertyError(serverForm.ipAddress, 'maxlength')">Too Long</small>
+                    <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) && hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+                    <span ng-show="hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
                 </div>
             </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 *</label>
+                <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="IpAddressesBothBlank() || hasIPv4()" autofocus>
+                    <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>
@@ -159,9 +159,9 @@ under the License.
                 </div>
             </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 *</label>
+                <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-change="toggleIpGatewayRequired('ipGateway')" ng-required="IpAddressesBothBlank() || hasIPv4()" autofocus>
+                    <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>
@@ -187,18 +187,18 @@ under the License.
                     <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>
             </div>
-            <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Address) && hasError(serverForm.ipAddress), 'has-feedback': hasError(serverForm.ip6Address) && hasError(serverForm.ipAddress)}">
-				<label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12">IPv6 Address *
+            <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="ip6Address" id="ip6Address" type="text" class="form-control" ng-model="server.ip6Address" ng-maxlength="50" ng-change="toggleIpAddressRequired('ip6Address');" ng-required="IpAddressesBothBlank()" autofocus>
-					<small class="input-error" ng-show="oneInputHasPropertyError('required', serverForm.ip6Address, serverForm.ipAddress)">At Least One IP Address Is Required</small>
-					<small ng-if="server.ip6Address && server.ip6Address !== ''"><input id="ip6IsService" type="checkbox" ng-model="server.ip6IsService" name="ip6IsService" title="This IP Address will be used for ATS to serve traffic" checked>  Is Service Address</small>
+                    <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) && hasError(serverForm.ipAddress)" class="form-control-feedback"><i class="fa fa-times"></i></span>
+                    <span ng-show="hasError(serverForm.ip6Address)" class="form-control-feedback"><i class="fa fa-times"></i></span>
                 </div>
             </div>
             <div class="form-group" ng-class="{'has-error': hasError(serverForm.ip6Gateway), 'has-feedback': hasError(serverForm.ip6Gateway)}">
diff --git a/traffic_portal/app/src/common/service/utils/FormUtils.js b/traffic_portal/app/src/common/service/utils/FormUtils.js
index 6c089fd..ea87638 100644
--- a/traffic_portal/app/src/common/service/utils/FormUtils.js
+++ b/traffic_portal/app/src/common/service/utils/FormUtils.js
@@ -23,30 +23,10 @@ var FormUtils = function() {
         return input && !input.$focused && input.$invalid;
     };
 
-    this.oneInputHasError = function(input1, input2) {
-        var input = [input1, input2];
-        for(var i = 0; i < input.length; i++) {
-            if (!this.hasError(input[i])) {
-                return false;
-            }
-        }
-        return true;
-    };
-
     this.hasPropertyError = function(input, property) {
         return input && !input.$focused && input.$error[property];
     };
 
-    this.oneInputHasPropertyError = function(property, input1, input2) {
-        var input = [input1, input2];
-        for(var i = 0; i < input.length; i++) {
-            if (!this.hasPropertyError(input[i], property)) {
-                return false;
-            }
-        }
-        return true;
-    };
-
 };
 
 FormUtils.$inject = [];
diff --git a/traffic_portal/app/src/modules/private/servers/new/index.js b/traffic_portal/app/src/modules/private/servers/new/index.js
index 5bb9f91..99263be 100644
--- a/traffic_portal/app/src/modules/private/servers/new/index.js
+++ b/traffic_portal/app/src/modules/private/servers/new/index.js
@@ -31,7 +31,9 @@ module.exports = angular.module('trafficPortal.private.servers.new', [])
                                 return {
                                     updPending: false,
                                     tcpPort: 80,
-                                    httpsPort: 443
+                                    httpsPort: 443,
+                                    ipIsService: false,
+                                    ip6IsService: false
                                 };
                             }
                         }