Tp interface servers

traffic_portal/app/src/common/api/ServerService.js

@@ -30,26 +30,12 @@ var ServerService = function($http, locationUtils, messageModel, ENV) {
         )
     };
 
-    this.getServer = function(id) {
-        return $http.get(ENV.api['root'] + 'servers', {params: {id: id}}).then(
-            function (result) {
-                return result.data.response[0];
-            },
-            function (err) {
-                throw err;
-            }
-        )
-    };
-
     this.createServer = function(server) {
         return $http.post(ENV.api['root'] + 'servers', server).then(
             function(result) {
-                messageModel.setMessages([ { level: 'success', text: 'Server created' } ], true);
-                locationUtils.navigateToPath('/servers');
                 return result;
             },
             function(err) {
-                messageModel.setMessages(err.data.alerts, false);
                 throw err;
             }
         );
@@ -59,11 +45,9 @@ var ServerService = function($http, locationUtils, messageModel, ENV) {
     this.updateServer = function(server) {
         return $http.put(ENV.api['root'] + 'servers/' + server.id, server).then(
             function(result) {
-                messageModel.setMessages([ { level: 'success', text: 'Server updated' } ], false);
                 return result;
             },
             function(err) {
-                messageModel.setMessages(err.data.alerts, false);
                 throw err;
             }
         );

traffic_portal/app/src/common/modules/form/_form.scss

@@ -40,6 +40,63 @@
 	}
 }
 
+/* Shim for forms without bootstrap */
+.has-error {
+	color: #a94442;
+
+	input, select, textarea {
+		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+	}
+}
+
+.bordered-item {
+	border-bottom: 1px solid gray;
+	padding-bottom: 5px;
+	margin-bottom: 5px;
+}
+
+button.right-button {
+	float: right;
+}
+
+.form-control-columns {
+	display: grid;
+	grid-template-columns: 16.66666667% auto;
+	grid-row-gap: 15px;
+
+	label {
+		text-align: right;
+		padding-right: 2em;
+		line-height: 2.4;
+	}
+
+	fieldset {
+		grid-column: 2;
+
+		div, li {
+			display: grid;
+			grid-template-columns: auto 1fr;
+		}
+
+		div {
+			grid-column-gap: 20px;
+		}
+
+		li {
+			grid-column-gap: 10px;
+		}
+
+		small.input-error {
+			grid-column: 2;
+		}
+
+		input[type="checkbox"] {
+			align-self: center;
+			justify-self: start;
+		}
+	}
+}
+
 .btn-link.request-status {
 	font-size: 20px;
 	color: #cd1323;
@@ -79,6 +136,7 @@ form label.has-tooltip {
 			width: max-content;
 			max-width: inherit;
 			cursor: auto;
+			line-height: 1.428;
 		}
 	}
 

traffic_portal/app/src/common/modules/form/server/FormServerController.js

@@ -19,6 +19,10 @@
 
 var FormServerController = function(server, $scope, $location, $state, $uibModal, formUtils, locationUtils, serverUtils, serverService, cacheGroupService, cdnService, physLocationService, profileService, typeService, messageModel, propertiesModel) {
 
+    $scope.IPPattern = serverUtils.IPPattern;
+    $scope.IPWithCIDRPattern = serverUtils.IPWithCIDRPattern;
+    $scope.IPv4Pattern = serverUtils.IPv4Pattern;
+
     var getPhysLocations = function() {
         physLocationService.getPhysLocations()
             .then(function(result) {
@@ -73,11 +77,6 @@ var FormServerController = function(server, $scope, $location, $state, $uibModal
         $state.reload(); // reloads all the resolves for the view
     };
 
-    // supposedly matches IPv4 and IPv6 formats. but actually need one that matches each. todo.
-    $scope.validations = {
-        ipRegex: new RegExp(/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$|^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/)
-    };
-
     $scope.server = server;
 
     $scope.falseTrue = [
@@ -95,6 +94,47 @@ var FormServerController = function(server, $scope, $location, $state, $uibModal
 
     $scope.showChartsButton = propertiesModel.properties.servers.charts.show;
 
+    $scope.addIP = function(interface) {
+        $scope.serverForm.$setDirty();
+        const newIP = {
+            address: "",
+            gateway: null,
+            serviceAddress: false
+        };
+
+        if (!interface.ipAddresses) {
+            interface.ipAddresses = [newIP];
+        } else {
+            interface.ipAddresses.push(newIP);
+        }
+    }
+
+    $scope.deleteIP = function(interface, ip) {
+        $scope.serverForm.$setDirty();
+        interface.ipAddresses.splice(interface.ipAddresses.indexOf(ip), 1);
+    }
+
+    $scope.addInterface = function() {
+        $scope.serverForm.$setDirty();
+        const newInf = {
+            mtu: 1500,
+            maxBandwidth: null,
+            monitor: false,
+            ipAddresses: []
+        };
+
+        if (!$scope.server.interfaces) {
+           $scope.server.interfaces = [newInf];
+        } else {
+           $scope.server.interfaces.push(newInf);
+        }
+    }
+
+    $scope.deleteInterface = function(interface) {
+        $scope.serverForm.$setDirty();
+        $scope.server.interfaces.splice($scope.server.interfaces.indexOf(interface, 1));
+    }
+
     $scope.onCDNChange = function() {
         $scope.server.profileId = null; // the cdn of the server changed, so we need to blank out the selected server profile (if any)
         getProfiles($scope.server.cdnId); // and get a new list of profiles (for the selected cdn)

traffic_portal/app/src/common/modules/form/server/edit/FormEditServerController.js

@@ -17,10 +17,10 @@
  * under the License.
  */
 
-var FormEditServerController = function(server, $scope, $controller, $uibModal, locationUtils, serverService, statusService, messageModel) {
+var FormEditServerController = function(server, $anchorScroll, $scope, $controller, $uibModal, locationUtils, serverService, statusService, messageModel) {
 
     // extends the FormServerController to inherit common methods
-    angular.extend(this, $controller('FormServerController', { server: server, $scope: $scope }));
+    angular.extend(this, $controller('FormServerController', { server: server[0], $scope: $scope }));
 
     var getStatuses = function() {
         statusService.getStatuses()
@@ -37,7 +37,7 @@ var FormEditServerController = function(server, $scope, $controller, $uibModal,
             });
     };
 
-    $scope.serverName = angular.copy(server.hostName);
+    $scope.serverName = server[0].hostName;
 
     $scope.settings = {
         isNew: false,
@@ -46,9 +46,20 @@ var FormEditServerController = function(server, $scope, $controller, $uibModal,
 
     $scope.save = function(server) {
         serverService.updateServer(server).
-            then(function() {
-                $scope.refresh();
-            });
+            then(
+                function(result) {
+                    $scope.refresh();
+                    messageModel.setMessages(result.data.alerts, false);
+                },
+                function(fault) {
+                    messageModel.setMessages(fault.data.alerts, false);
+                }
+            )
+            .finally(
+                function() {
+                    $anchorScroll(); // scrolls window to top for message
+                }
+            );
     };
 
     $scope.confirmDelete = function(server) {
@@ -80,5 +91,5 @@ var FormEditServerController = function(server, $scope, $controller, $uibModal,
 
 };
 
-FormEditServerController.$inject = ['server', '$scope', '$controller', '$uibModal', 'locationUtils', 'serverService', 'statusService', 'messageModel'];
+FormEditServerController.$inject = ['server', '$anchorScroll', '$scope', '$controller', '$uibModal', 'locationUtils', 'serverService', 'statusService', 'messageModel'];
 module.exports = FormEditServerController;