[TPv1] Added a new route and logic for assigning multiple server capabilities to a server

CHANGELOG.md

@@ -5,18 +5,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## [unreleased]
 ### Added
-- [#6033](https://github.com/apache/trafficcontrol/issues/6033) Added ability to assign multiple server capabilities to a server.
+- [#6033](https://github.com/apache/trafficcontrol/issues/6033) [Traffic Ops, Traffic Portal] Added ability to assign multiple server capabilities to a server.
 - [Traffic Monitor] Added logging for `ipv4Availability` and `ipv6Availability` in TM.
 
 ### Fixed
 - Traffic Stats: Reuse InfluxDB client handle to prevent potential connection leaks
+- [#7021](https://github.com/apache/trafficcontrol/issues/7021) Fixed cache config for Delivery Services with IP Origins
 
 ### Changed
 - Traffic Portal now obscures sensitive text in Delivery Service "Raw Remap" fields, private SSL keys, "Header Rewrite" rules, and ILO interface passwords by default.
 
-### Fixed
-- [#7021](https://github.com/apache/trafficcontrol/issues/7021) Fixed cache config for Delivery Services with IP Origins
-
 ## [7.0.0] - 2022-07-19
 ### Added
 - [Traffic Portal] Added Layered Profile feature to /servers/

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

@@ -68,6 +68,19 @@ var ServerCapabilityService = function($http, ENV, locationUtils, messageModel)
 		);
 	};
 
+	this.assignSCsServer = function(serverId, serverCapabilities) {
+		return $http.put(ENV.api.unstable + 'multiple_server_capabilities',{ serverId: serverId, serverCapabilities: serverCapabilities, replace: true } ).then(
+			function(result) {
+				messageModel.setMessages(result.data.alerts, false);
+				return result;
+			},
+			function(err) {
+				messageModel.setMessages(err.data.alerts, false);
+				throw err;
+			}
+		);
+	};
+
 	this.updateServerCapability = function(currentName, serverCapability) {
 		return $http.put(ENV.api.unstable + 'server_capabilities', serverCapability, {params: {"name": currentName}}).then(
 			function(result) {

traffic_portal/app/src/common/modules/table/serverServerCapabilities/TableAssignServerSCsController.js

@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/** @typedef { import('../../../../common/modules/table/agGrid/CommonGridController').CGC } CGC */
+
+var TableAssignServerSCsController = function(server, serverCapabilities, assignedSCs, $scope, $uibModalInstance) {
+
+    $scope.selectedSCs = [];
+
+    $scope.server = server;
+
+    /** @type CGC.ColumnDefinition */
+    $scope.columns = [
+        {
+            headerName: "Server Capability",
+            field: "name",
+            checkboxSelection: true,
+            headerCheckboxSelection: true,
+        }
+    ];
+
+    $scope.serverCapabilities = serverCapabilities.map(SCs => {
+        let isAssigned = assignedSCs.find(assignedSCs => assignedSCs.serverCapability === SCs.name);
+        if (isAssigned) {
+            SCs['selected'] = true;
+        }
+        return SCs;
+    });
+
+    $scope.submit = function() {
+        const selectedSCNames = this.selectedSCs.map(sc => sc["name"]);
+        $uibModalInstance.close(selectedSCNames);
+    };
+
+    $scope.cancel = function () {
+        $uibModalInstance.dismiss('cancel');
+    };
+
+    /** @type CGC.GridSettings */
+    $scope.gridOptions = {
+        selectRows: true,
+        selectionProperty: "selected"
+    };
+};
+
+TableAssignServerSCsController.$inject = ['server', 'serverCapabilities', 'assignedSCs', '$scope', '$uibModalInstance'];
+module.exports = TableAssignServerSCsController;
+

traffic_portal/app/src/common/modules/table/serverServerCapabilities/TableServerServerCapabilitiesController.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-var TableServerServerCapabilitiesController = function(server, serverCapabilities, $scope, $state, $uibModal, locationUtils, serverUtils, serverService, messageModel) {
+var TableServerServerCapabilitiesController = function(server, serverCapabilities, $scope, $state, $uibModal, locationUtils, serverUtils, serverService, messageModel, serverCapabilityService) {
 
 	$scope.server = server[0];
 
@@ -32,6 +32,35 @@ var TableServerServerCapabilitiesController = function(server, serverCapabilitie
 		}
 	];
 
+	$scope.selectSCs = function () {
+		var modalInstance = $uibModal.open({
+			templateUrl: 'common/modules/table/serverServerCapabilities/table.assignServerSCs.tpl.html',
+			controller: 'TableAssignServerSCsController',
+			size: 'md',
+			resolve: {
+				server: function() {
+					return server;
+				},
+				serverCapabilities: function(serverCapabilityService) {
+					return serverCapabilityService.getServerCapabilities();
+				},
+				assignedSCs: function() {
+					return serverCapabilities
+				}
+			}
+		});
+		modalInstance.result.then(function(selectedSCs) {
+			serverCapabilityService.assignSCsServer(server[0].id, selectedSCs)
+				.then(
+					function() {
+						$scope.refresh();
+					}
+				);
+		}, function () {
+			// do nothing
+		});
+	};
+
 	$scope.addServerCapability = function() {
 		const params = {
 			title: 'Add Server Capability',
@@ -116,5 +145,5 @@ var TableServerServerCapabilitiesController = function(server, serverCapabilitie
 	$scope.isCache = serverUtils.isCache;
 };
 
-TableServerServerCapabilitiesController.$inject = ['server', 'serverCapabilities', '$scope', '$state', '$uibModal', 'locationUtils', 'serverUtils', 'serverService', 'messageModel'];
+TableServerServerCapabilitiesController.$inject = ['server', 'serverCapabilities', '$scope', '$state', '$uibModal', 'locationUtils', 'serverUtils', 'serverService', 'messageModel', 'serverCapabilityService'];
 module.exports = TableServerServerCapabilitiesController;

traffic_portal/app/src/common/modules/table/serverServerCapabilities/index.js

@@ -18,4 +18,5 @@
  */
 
 module.exports = angular.module('trafficPortal.table.serverServerCapabilities', [])
-	.controller('TableServerServerCapabilitiesController', require('./TableServerServerCapabilitiesController'));
+	.controller('TableServerServerCapabilitiesController', require('./TableServerServerCapabilitiesController'))
+	.controller('TableAssignServerSCsController', require('./TableAssignServerSCsController'));

traffic_portal/app/src/common/modules/table/serverServerCapabilities/table.assignServerSCs.tpl.html

@@ -0,0 +1,32 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<div class="modal-header">
+    <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+    <h3 class="modal-title">Assign Server Capabilities to {{::server[0].hostName}}</h3>
+</div>
+<div class="modal-body">
+    <common-grid-controller table-name="serverSCsUnassigned" options="gridOptions"
+                            data="serverCapabilities" columns="columns" selected-data="selectedSCs"></common-grid-controller>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-link" ng-click="cancel()">cancel</button>
+    <button class="btn btn-primary" ng-click="submit()">Submit</button>
+</div>
+

traffic_portal/app/src/common/modules/table/serverServerCapabilities/table.serverServerCapabilities.tpl.html

@@ -25,7 +25,8 @@
             <li class="active">Capabilities</li>
         </ol>
         <div class="pull-right">
-            <button ng-if="isCache(server)" type="button" name="addCapabilityBtn" class="btn btn-primary" title="Add Server Capability" ng-click="addServerCapability()"><i class="fa fa-plus"></i></button>
+            <button ng-if="isCache(server)" type="button" name="assignMultipleCapabilityBtn" class="btn btn-primary" title="Assign Multiple Capabilities" ng-click="selectSCs()">Assign Multiple Capabilities</i></button>
+            <button ng-if="isCache(server)" type="button" name="addCapabilityBtn" class="btn btn-primary" title="Add a Server Capability" ng-click="addServerCapability()"><i class="fa fa-plus"></i></button>
             <button type="button" class="btn btn-default" title="Refresh" ng-click="refresh()"><i class="fa fa-refresh"></i></button>
         </div>
         <div class="clearfix"></div>

traffic_portal/app/src/scripts/config.js

@@ -23,4 +23,4 @@
 
 angular.module('config', [])
 
-.constant('ENV', { api: { unstable:'/api/4.0/', stable: "/api/3.1/" } });
+.constant('ENV', { api: { unstable:'/api/4.1/', stable: "/api/4.0/" } });