From 1610754077dc213eacbc6f7c874403aa31af7a22 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Tue, 22 Nov 2022 14:22:59 -0700
Subject: [PATCH 01/11] Add server capability field in http DS form

---
 .../form.deliveryService.HTTP.tpl.html            | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index f884b5c5c8..49360c88b1 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -242,6 +242,21 @@ <h3 ng-if="!open()">Previous Value</h3>
                             </aside>
                         </div>
                     </div>
+                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serverCapability), 'has-feedback': hasError(generalConfig.serverCapability)}">
+                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serverCapability">Server Capability
+                        </label>
+                        <div class="col-md-10 col-sm-10 col-xs-12">
+                            <select id="serverCapability" name="serverCapability" class="form-control" ng-model="deliveryService.serverCapability" ng-options="sc in ::serverCapabilities | orderBy:'serverCapability'">
+                                <option selected value="">None</option>
+                            </select>
+                            <small ng-show="deliveryService.serverCapability"><a href="/#!/server-capabilities/edit?name=' + serverCapability.name" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serverCapability !== dsCurrent.serverCapability">
+                                <h3 ng-if="open()">Current Value</h3>
+                                <h3 ng-if="!open()">Previous Value</h3>
+                                <pre>{{::dsCurrent.serverCapability}}</pre>
+                            </aside>
+                        </div>
+                    </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.topology), 'has-feedback': hasError(generalConfig.topology)}">
                         <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="topology">Topology<div class="helptooltip">
                             <div class="helptext">A topology is used to determine the caching layers and path to a delivery service's origin.</div>

From b5ce5faaf5a5c7c491a088e599fe37e538c64a59 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Mon, 23 Jan 2023 12:11:45 -0700
Subject: [PATCH 02/11] Removed SC page from DS

---
 .../FormDeliveryServiceController.js          |  13 +-
 .../form.deliveryService.DNS.tpl.html         |   1 -
 .../form.deliveryService.HTTP.tpl.html        |  36 ++---
 ...leDeliveryServiceCapabilitiesController.js | 136 +++++++++---------
 ...table.deliveryServiceCapabilities.tpl.html |   4 +-
 .../TableDeliveryServicesController.js        |   5 -
 ...verCapabilityDeliveryServicesController.js |  12 +-
 .../deliveryServices/capabilities/index.js    |   8 +-
 8 files changed, 110 insertions(+), 105 deletions(-)

diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
index d3146230cd..f56bf45fdc 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
@@ -39,7 +39,7 @@
  * @param {import("../../../models/UserModel")} userModel
  * @param {import("../../../api/ServiceCategoryService")} serviceCategoryService
  */
-var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serviceCategoryService) {
+var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serverCapabilityService, serviceCategoryService) {
 
 	/**
 	 * This is used to cache TLS version settings when the checkbox is toggled.
@@ -197,6 +197,14 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 		tenantUtils.addLevels($scope.tenants);
 	}
 
+	/**
+	 * Updates the server Capabilities on the $scope.
+	 * @returns {Promise<void>}
+	 */
+	async function getServerCapabilities() {
+		$scope.serverCapabilities = await serverCapabilityService.getServerCapabilities();
+	}
+
 	/**
 	 * Updates the Service Categories on the $scope.
 	 * @returns {Promise<void>}
@@ -469,6 +477,7 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 	getCDNs();
 	getProfiles();
 	getTenants();
+	getServerCapabilities();
 	getServiceCategories();
 	getSteeringTargets();
 	if (!deliveryService.consistentHashQueryParams || deliveryService.consistentHashQueryParams.length < 1) {
@@ -488,5 +497,5 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 	}
 };
 
-FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serviceCategoryService"];
+FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serverCapabilityService", "serviceCategoryService"];
 module.exports = FormDeliveryServiceController;
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
index 54d77850d1..29678728ed 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
@@ -61,7 +61,6 @@
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/jobs">Manage Invalidation Requests</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/origins">Manage Origins</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/regexes">Manage Regexes</a></li>
-                    <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/required-server-capabilities">Manage Required Server Capabilities</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/servers">Manage Servers</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/static-dns-entries">Manage Static DNS Entries</a></li>
                 </ul>
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index 49360c88b1..d8a601fcf8 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -61,7 +61,6 @@
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/jobs">Manage Invalidation Requests</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/origins">Manage Origins</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/regexes">Manage Regexes</a></li>
-                    <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/required-server-capabilities">Manage Required Server Capabilities</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/servers">Manage Servers</a></li>
                     <li role="menuitem"><a ng-href="/#!/delivery-services/{{deliveryService.id}}/static-dns-entries">Manage Static DNS Entries</a></li>
                 </ul>
@@ -242,21 +241,6 @@ <h3 ng-if="!open()">Previous Value</h3>
                             </aside>
                         </div>
                     </div>
-                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serverCapability), 'has-feedback': hasError(generalConfig.serverCapability)}">
-                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serverCapability">Server Capability
-                        </label>
-                        <div class="col-md-10 col-sm-10 col-xs-12">
-                            <select id="serverCapability" name="serverCapability" class="form-control" ng-model="deliveryService.serverCapability" ng-options="sc in ::serverCapabilities | orderBy:'serverCapability'">
-                                <option selected value="">None</option>
-                            </select>
-                            <small ng-show="deliveryService.serverCapability"><a href="/#!/server-capabilities/edit?name=' + serverCapability.name" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serverCapability !== dsCurrent.serverCapability">
-                                <h3 ng-if="open()">Current Value</h3>
-                                <h3 ng-if="!open()">Previous Value</h3>
-                                <pre>{{::dsCurrent.serverCapability}}</pre>
-                            </aside>
-                        </div>
-                    </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.topology), 'has-feedback': hasError(generalConfig.topology)}">
                         <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="topology">Topology<div class="helptooltip">
                             <div class="helptext">A topology is used to determine the caching layers and path to a delivery service's origin.</div>
@@ -358,6 +342,24 @@ <h3 ng-if="!open()">Previous Value</h3>
                             </div>
                         </div>
                     </div>
+                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serverCapability), 'has-feedback': hasError(generalConfig.serverCapability)}">
+                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serverCapability">Server Capability
+                            <div class="helptooltip">
+                                <div class="helptext">Required server capability(ies) associated with a delivery  service</div>
+                            </div>
+                        </label>
+                        <div class="col-md-10 col-sm-10 col-xs-12">
+                            <select id="serverCapability" name="serverCapability" class="form-control" ng-model="deliveryService.serverCapability" ng-options="sc in ::serverCapabilities | orderBy:'serverCapability'">
+                                <option selected value="">None</option>
+                            </select>
+                            <small ng-show="deliveryService.serverCapability"><a href="/#!/server-capabilities/edit?name=' + serverCapability.name" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serverCapability !== dsCurrent.serverCapability">
+                                <h3 ng-if="open()">Current Value</h3>
+                                <h3 ng-if="!open()">Previous Value</h3>
+                                <pre>{{::dsCurrent.serverCapability}}</pre>
+                            </aside>
+                        </div>
+                    </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serviceCategory), 'has-feedback': hasError(generalConfig.serviceCategory)}">
                         <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serviceCategory">Service Category<div class="helptooltip">
                                 <div class="helptext">The type of content being delivered. Some examples are linear and vod.</div>
@@ -365,7 +367,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                         </label>
                         <div class="col-md-10 col-sm-10 col-xs-12">
                             <select id="serviceCategory" name="serviceCategory" class="form-control" ng-model="deliveryService.serviceCategory" ng-options="serviceCategory.name as serviceCategory.name for serviceCategory in serviceCategories">
-                                <option value="">Select...</option>
+                                <option selected value="">Select...</option>
                             </select>
                             <small ng-show="deliveryService.serviceCategory"><a href="/#!/service-categories/edit?name={{deliveryService.serviceCategory}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
                             <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serviceCategory != dsCurrent.serviceCategory">
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
index 01f02661cd..531fd56a3a 100644
--- a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
+++ b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
@@ -39,76 +39,76 @@ var TableDeliveryServiceCapabilitiesController = function(deliveryService, requi
 	$scope.requiredCapabilities = requiredCapabilities;
 
 	$scope.contextMenuItems = [
-		{
-			text: 'Remove Required Server Capability',
-			click: function ($itemScope) {
-				$scope.confirmRemoveCapability($itemScope.rq.requiredCapability);
-			}
-		}
+		// {
+		// 	text: 'Remove Required Server Capability',
+		// 	click: function ($itemScope) {
+		// 		$scope.confirmRemoveCapability($itemScope.rq.requiredCapability);
+		// 	}
+		// }
 	];
 
-	$scope.addDeliveryServiceCapability = function() {
-		const params = {
-			title: 'Add Required Server Capability',
-			message: "Please select a server capability required by this delivery service",
-			key: "name"
-		};
-		const modalInstance = $uibModal.open({
-			templateUrl: 'common/modules/dialog/select/dialog.select.tpl.html',
-			controller: 'DialogSelectController',
-			size: 'md',
-			resolve: {
-				params: function () {
-					return params;
-				},
-				collection: function(serverCapabilityService) {
-					return serverCapabilityService.getServerCapabilities();
-				}
-			}
-		});
-		modalInstance.result.then(function(serverCapability) {
-			deliveryServiceService.addServerCapability(deliveryService.id, serverCapability.name)
-				.then(
-					function(result) {
-						messageModel.setMessages(result.alerts, false);
-						$scope.refresh(); // refresh the table
-					}
-				);
-		});
-	};
-
-	$scope.confirmRemoveCapability = function(requiredCapability, $event) {
-		if ($event) {
-			$event.stopPropagation(); // this kills the click event so it doesn't trigger anything else
-		}
-		const params = {
-			title: 'Remove Required Server Capability from Delivery Service?',
-			message: 'Are you sure you want to remove the ' + requiredCapability + ' server capability requirement from this delivery service?'
-		};
-		const modalInstance = $uibModal.open({
-			templateUrl: 'common/modules/dialog/confirm/dialog.confirm.tpl.html',
-			controller: 'DialogConfirmController',
-			size: 'md',
-			resolve: {
-				params: function () {
-					return params;
-				}
-			}
-		});
-		modalInstance.result.then(function() {
-			deliveryServiceService.removeServerCapability(deliveryService.id, requiredCapability)
-				.then(
-					function(result) {
-						messageModel.setMessages(result.alerts, false);
-						$scope.refresh(); // refresh the table
-					}
-				);
-		});
-	};
-
-	$scope.editServerCapability = function(capabilityName) {
-		locationUtils.navigateToPath('/server-capabilities/edit?name=' + capabilityName);
-	};
+	// $scope.addDeliveryServiceCapability = function() {
+	// 	const params = {
+	// 		title: 'Add Required Server Capability',
+	// 		message: "Please select a server capability required by this delivery service",
+	// 		key: "name"
+	// 	};
+	// 	const modalInstance = $uibModal.open({
+	// 		templateUrl: 'common/modules/dialog/select/dialog.select.tpl.html',
+	// 		controller: 'DialogSelectController',
+	// 		size: 'md',
+	// 		resolve: {
+	// 			params: function () {
+	// 				return params;
+	// 			},
+	// 			collection: function(serverCapabilityService) {
+	// 				return serverCapabilityService.getServerCapabilities();
+	// 			}
+	// 		}
+	// 	});
+	// 	modalInstance.result.then(function(serverCapability) {
+	// 		deliveryServiceService.addServerCapability(deliveryService.id, serverCapability.name)
+	// 			.then(
+	// 				function(result) {
+	// 					messageModel.setMessages(result.alerts, false);
+	// 					$scope.refresh(); // refresh the table
+	// 				}
+	// 			);
+	// 	});
+	// };
+    //
+	// $scope.confirmRemoveCapability = function(requiredCapability, $event) {
+	// 	if ($event) {
+	// 		$event.stopPropagation(); // this kills the click event so it doesn't trigger anything else
+	// 	}
+	// 	const params = {
+	// 		title: 'Remove Required Server Capability from Delivery Service?',
+	// 		message: 'Are you sure you want to remove the ' + requiredCapability + ' server capability requirement from this delivery service?'
+	// 	};
+	// 	const modalInstance = $uibModal.open({
+	// 		templateUrl: 'common/modules/dialog/confirm/dialog.confirm.tpl.html',
+	// 		controller: 'DialogConfirmController',
+	// 		size: 'md',
+	// 		resolve: {
+	// 			params: function () {
+	// 				return params;
+	// 			}
+	// 		}
+	// 	});
+	// 	modalInstance.result.then(function() {
+	// 		deliveryServiceService.removeServerCapability(deliveryService.id, requiredCapability)
+	// 			.then(
+	// 				function(result) {
+	// 					messageModel.setMessages(result.alerts, false);
+	// 					$scope.refresh(); // refresh the table
+	// 				}
+	// 			);
+	// 	});
+	// };
+    //
+	// $scope.editServerCapability = function(capabilityName) {
+	// 	locationUtils.navigateToPath('/server-capabilities/edit?name=' + capabilityName);
+	// };
 
 	$scope.refresh = function() {
 		$state.reload(); // reloads all the resolves for the view
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
index 81f3579095..96a4543f62 100644
--- a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
+++ b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
@@ -16,7 +16,7 @@
 specific language governing permissions and limitations
 under the License.
 -->
-
+<!--
 <div class="x_panel">
     <div class="x_title">
         <ol class="breadcrumb pull-left">
@@ -50,4 +50,4 @@
         </table>
     </div>
 </div>
-
+-->
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js b/traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
index 4513f8d9ea..7493cea334 100644
--- a/traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
+++ b/traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
@@ -711,11 +711,6 @@ function TableDeliveryServicesController(tableName, deliveryServices, steeringTa
 			text: "Manage Regexes",
 			type: 2
 		},
-		{
-			getHref: ds => `#!/delivery-services/${ds.id}/required-server-capabilities?dsType=${ds.type}`,
-			text: "Manage Required Server Capabilities",
-			type: 2
-		},
 		{
 			getHref: ds => `#!/delivery-services/${ds.id}/servers?dsType=${ds.type}`,
 			text: "Manage Servers",
diff --git a/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js b/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
index 05b459ddc7..d84c227d62 100644
--- a/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
+++ b/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
@@ -62,12 +62,12 @@ var TableServerCapabilityDeliveryServicesController = function(serverCapability,
 				$scope.editDeliveryService($itemScope.ds);
 			}
 		},
-		{
-			text: 'Manage Required Server Capabilities',
-			click: function ($itemScope) {
-				locationUtils.navigateToPath('/delivery-services/' + $itemScope.ds.deliveryServiceID + '/required-server-capabilities');
-			}
-		}
+		// {
+		// 	text: 'Manage Required Server Capabilities',
+		// 	click: function ($itemScope) {
+		// 		locationUtils.navigateToPath('/delivery-services/' + $itemScope.ds.deliveryServiceID + '/required-server-capabilities');
+		// 	}
+		// }
 	];
 
 	$scope.navigateToPath = (path, unsavedChanges) => locationUtils.navigateToPath(path, unsavedChanges);
diff --git a/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js b/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js
index f24eb19970..43f55c910d 100644
--- a/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js
+++ b/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js
@@ -30,13 +30,13 @@ module.exports = angular.module('trafficPortal.private.deliveryServices.capabili
 							deliveryService: function($stateParams, deliveryServiceService) {
 								return deliveryServiceService.getDeliveryService($stateParams.deliveryServiceId);
 							},
-							requiredCapabilities: function($stateParams, deliveryServiceService) {
-								return deliveryServiceService.getServerCapabilities($stateParams.deliveryServiceId);
-							}
+							// requiredCapabilities: function($stateParams, deliveryServiceService) {
+							// 	return deliveryServiceService.getServerCapabilities($stateParams.deliveryServiceId);
+							// }
 						}
 					}
 				}
 			})
 		;
 		$urlRouterProvider.otherwise('/');
-	});
+	});
\ No newline at end of file

From 67ef0133019a697d8f0b7c2f924978442fee6bec Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Wed, 25 Jan 2023 10:36:09 -0700
Subject: [PATCH 03/11] got capabilities feature working for DS

---
 .../app/src/common/modules/form/_form.scss    |  8 +++++
 .../FormDeliveryServiceController.js          | 12 ++++----
 .../edit/FormEditDeliveryServiceController.js |  2 ++
 .../form.deliveryService.DNS.tpl.html         | 22 ++++++++++++++
 .../form.deliveryService.HTTP.tpl.html        | 30 +++++++++++--------
 .../new/FormNewDeliveryServiceController.js   |  2 ++
 6 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/traffic_portal/app/src/common/modules/form/_form.scss b/traffic_portal/app/src/common/modules/form/_form.scss
index 40acad9407..9201ddec10 100644
--- a/traffic_portal/app/src/common/modules/form/_form.scss
+++ b/traffic_portal/app/src/common/modules/form/_form.scss
@@ -370,3 +370,11 @@ input:checked + .slider::before {
 		text-shadow: none;
 	}
 }
+
+.checkbox-scroll-container {
+	max-height: 3.5em;
+	overflow-y: auto;
+	display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    padding-left: 16px;
+}
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
index f56bf45fdc..ab32f44b2d 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
@@ -39,7 +39,7 @@
  * @param {import("../../../models/UserModel")} userModel
  * @param {import("../../../api/ServiceCategoryService")} serviceCategoryService
  */
-var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serverCapabilityService, serviceCategoryService) {
+var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serverCapabilityService, locationUtils, serviceCategoryService) {
 
 	/**
 	 * This is used to cache TLS version settings when the checkbox is toggled.
@@ -197,12 +197,14 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 		tenantUtils.addLevels($scope.tenants);
 	}
 
+	$scope.selectedCapabilities = {};
 	/**
 	 * Updates the server Capabilities on the $scope.
 	 * @returns {Promise<void>}
 	 */
-	async function getServerCapabilities() {
-		$scope.serverCapabilities = await serverCapabilityService.getServerCapabilities();
+	async function getRequiredCapabilities() {
+		$scope.requiredCapabilities = await serverCapabilityService.getServerCapabilities();
+		$scope.selectedCapabilities = Object.fromEntries($scope.requiredCapabilities.map(dsc => [dsc.name, $scope.deliveryService.requiredCapabilities.includes(dsc.name)]))
 	}
 
 	/**
@@ -477,7 +479,7 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 	getCDNs();
 	getProfiles();
 	getTenants();
-	getServerCapabilities();
+	getRequiredCapabilities();
 	getServiceCategories();
 	getSteeringTargets();
 	if (!deliveryService.consistentHashQueryParams || deliveryService.consistentHashQueryParams.length < 1) {
@@ -497,5 +499,5 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 	}
 };
 
-FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serverCapabilityService", "serviceCategoryService"];
+FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serverCapabilityService", "locationUtils", "serviceCategoryService"];
 module.exports = FormDeliveryServiceController;
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/edit/FormEditDeliveryServiceController.js b/traffic_portal/app/src/common/modules/form/deliveryService/edit/FormEditDeliveryServiceController.js
index 4aea4903e7..87ecae043d 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/edit/FormEditDeliveryServiceController.js
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/edit/FormEditDeliveryServiceController.js
@@ -265,6 +265,8 @@ var FormEditDeliveryServiceController = function(deliveryService, origin, topolo
 	 * @returns
 	 */
 	$scope.save = async function(deliveryService) {
+		deliveryService.requiredCapabilities = Object.entries($scope.selectedCapabilities).filter(sc => (sc[1])).map(sc => sc[0])
+
 		if (
 			deliveryService.sslKeyVersion !== null &&
 			deliveryService.sslKeyVersion !== 0 &&
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
index 29678728ed..53c15f3672 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
@@ -342,6 +342,28 @@ <h3 ng-if="!open()">Previous Value</h3>
                             </div>
                         </div>
                     </div>
+                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.requiredCapabilities), 'has-feedback': hasError(generalConfig.requiredCapabilities)}">
+                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="capability">Required Capability
+                            <div class="helptooltip">
+                                <div class="helptext">Required capability(ies) associated with a delivery  service</div>
+                            </div>
+                        </label>
+                        <div class="col-md-10 col-sm-10 col-xs-12 checkbox-scroll-container" style="...">
+                            <div ng-repeat="capability in requiredCapabilities">
+                                <input
+                                        type="checkbox"
+                                        id="capability"
+                                        name="capability"
+                                        style="..."
+                                        ng-model="selectedCapabilities[capability.name]"
+                                        ng-checked="selectedCapabilities[capability.name]"
+                                />
+                                <label>
+                                    <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serviceCategory), 'has-feedback': hasError(generalConfig.serviceCategory)}">
                         <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serviceCategory">Service Category<div class="helptooltip">
                                 <div class="helptext">The type of content being delivered. Some examples are linear and vod.</div>
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index d8a601fcf8..e048060556 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -342,22 +342,26 @@ <h3 ng-if="!open()">Previous Value</h3>
                             </div>
                         </div>
                     </div>
-                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serverCapability), 'has-feedback': hasError(generalConfig.serverCapability)}">
-                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="serverCapability">Server Capability
+                    <div class="form-group" ng-class="{'has-error': hasError(generalConfig.requiredCapabilities), 'has-feedback': hasError(generalConfig.requiredCapabilities)}">
+                        <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="capability">Required Capability
                             <div class="helptooltip">
-                                <div class="helptext">Required server capability(ies) associated with a delivery  service</div>
+                                <div class="helptext">Required capability(ies) associated with a delivery  service</div>
                             </div>
                         </label>
-                        <div class="col-md-10 col-sm-10 col-xs-12">
-                            <select id="serverCapability" name="serverCapability" class="form-control" ng-model="deliveryService.serverCapability" ng-options="sc in ::serverCapabilities | orderBy:'serverCapability'">
-                                <option selected value="">None</option>
-                            </select>
-                            <small ng-show="deliveryService.serverCapability"><a href="/#!/server-capabilities/edit?name=' + serverCapability.name" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
-                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serverCapability !== dsCurrent.serverCapability">
-                                <h3 ng-if="open()">Current Value</h3>
-                                <h3 ng-if="!open()">Previous Value</h3>
-                                <pre>{{::dsCurrent.serverCapability}}</pre>
-                            </aside>
+                        <div class="col-md-10 col-sm-10 col-xs-12 checkbox-scroll-container" style="...">
+                            <div ng-repeat="capability in requiredCapabilities">
+                                <input
+                                        type="checkbox"
+                                        id="capability"
+                                        name="capability"
+                                        style="..."
+                                        ng-model="selectedCapabilities[capability.name]"
+                                        ng-checked="selectedCapabilities[capability.name]"
+                                />
+                               <label>
+                                   <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
+                               </label>
+                            </div>
                         </div>
                     </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serviceCategory), 'has-feedback': hasError(generalConfig.serviceCategory)}">
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/new/FormNewDeliveryServiceController.js b/traffic_portal/app/src/common/modules/form/deliveryService/new/FormNewDeliveryServiceController.js
index 8247083cf9..6eab528e87 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/new/FormNewDeliveryServiceController.js
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/new/FormNewDeliveryServiceController.js
@@ -155,6 +155,8 @@ var FormNewDeliveryServiceController = function(deliveryService, origin, topolog
 	 * @returns {Promise<void>}
 	 */
 	$scope.save = async function(deliveryService) {
+		deliveryService.requiredCapabilities = Object.entries($scope.selectedCapabilities).filter(sc => (sc[1])).map(sc => sc[0])
+
 		if (!$scope.restrictTLS) {
 			deliveryService.tlsVersions = null;
 		}

From af621daef541aa986b0486ebc17401c84eb3aff8 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Wed, 25 Jan 2023 11:37:58 -0700
Subject: [PATCH 04/11] Removed DS-Capability table and private controller

---
 traffic_portal/app/src/app.js                 |   2 -
 ...leDeliveryServiceCapabilitiesController.js | 137 ------------------
 .../deliveryServiceCapabilities/index.js      |  21 ---
 ...table.deliveryServiceCapabilities.tpl.html |  53 -------
 ...verCapabilityDeliveryServicesController.js |   6 -
 .../deliveryServices/capabilities/index.js    |  42 ------
 6 files changed, 261 deletions(-)
 delete mode 100644 traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
 delete mode 100644 traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/index.js
 delete mode 100644 traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
 delete mode 100644 traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js

diff --git a/traffic_portal/app/src/app.js b/traffic_portal/app/src/app.js
index 386f77a3bd..92bf0ddec0 100644
--- a/traffic_portal/app/src/app.js
+++ b/traffic_portal/app/src/app.js
@@ -102,7 +102,6 @@ var trafficPortal = angular.module('trafficPortal', [
         require('./modules/private/deliveryServiceRequests/edit').name,
         require('./modules/private/deliveryServiceRequests/list').name,
         require('./modules/private/deliveryServices').name,
-        require('./modules/private/deliveryServices/capabilities').name,
         require('./modules/private/deliveryServices/clone').name,
         require('./modules/private/deliveryServices/charts').name,
         require('./modules/private/deliveryServices/charts/view').name,
@@ -373,7 +372,6 @@ var trafficPortal = angular.module('trafficPortal', [
         require('./common/modules/table/cdniConfigRequests').name,
         require('./common/modules/table/coordinates').name,
         require('./common/modules/table/deliveryServices').name,
-        require('./common/modules/table/deliveryServiceCapabilities').name,
         require('./common/modules/table/deliveryServiceJobs').name,
         require('./common/modules/table/deliveryServiceOrigins').name,
         require('./common/modules/table/deliveryServiceRegexes').name,
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
deleted file mode 100644
index 531fd56a3a..0000000000
--- a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/TableDeliveryServiceCapabilitiesController.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * 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("jquery")} */
-
-/**
- * The controller for the table that lists the server capabilities required by a
- * Delivery Service.
- *
- * @param {import("../../../api/DeliveryServiceService").DeliveryService & {id: number}} deliveryService
- * @param {string[]} requiredCapabilities
- * @param {*} $scope
- * @param {*} $state
- * @param {{open: ({}) => {result: Promise<*>}}} $uibModal
- * @param {import("../../../service/utils/LocationUtils")} locationUtils
- * @param {import("../../../api/DeliveryServiceService")} deliveryServiceService
- * @param {import("../../../models/MessageModel")} messageModel
- */
-var TableDeliveryServiceCapabilitiesController = function(deliveryService, requiredCapabilities, $scope, $state, $uibModal, locationUtils, deliveryServiceService, messageModel) {
-
-	$scope.deliveryService = deliveryService;
-
-	$scope.requiredCapabilities = requiredCapabilities;
-
-	$scope.contextMenuItems = [
-		// {
-		// 	text: 'Remove Required Server Capability',
-		// 	click: function ($itemScope) {
-		// 		$scope.confirmRemoveCapability($itemScope.rq.requiredCapability);
-		// 	}
-		// }
-	];
-
-	// $scope.addDeliveryServiceCapability = function() {
-	// 	const params = {
-	// 		title: 'Add Required Server Capability',
-	// 		message: "Please select a server capability required by this delivery service",
-	// 		key: "name"
-	// 	};
-	// 	const modalInstance = $uibModal.open({
-	// 		templateUrl: 'common/modules/dialog/select/dialog.select.tpl.html',
-	// 		controller: 'DialogSelectController',
-	// 		size: 'md',
-	// 		resolve: {
-	// 			params: function () {
-	// 				return params;
-	// 			},
-	// 			collection: function(serverCapabilityService) {
-	// 				return serverCapabilityService.getServerCapabilities();
-	// 			}
-	// 		}
-	// 	});
-	// 	modalInstance.result.then(function(serverCapability) {
-	// 		deliveryServiceService.addServerCapability(deliveryService.id, serverCapability.name)
-	// 			.then(
-	// 				function(result) {
-	// 					messageModel.setMessages(result.alerts, false);
-	// 					$scope.refresh(); // refresh the table
-	// 				}
-	// 			);
-	// 	});
-	// };
-    //
-	// $scope.confirmRemoveCapability = function(requiredCapability, $event) {
-	// 	if ($event) {
-	// 		$event.stopPropagation(); // this kills the click event so it doesn't trigger anything else
-	// 	}
-	// 	const params = {
-	// 		title: 'Remove Required Server Capability from Delivery Service?',
-	// 		message: 'Are you sure you want to remove the ' + requiredCapability + ' server capability requirement from this delivery service?'
-	// 	};
-	// 	const modalInstance = $uibModal.open({
-	// 		templateUrl: 'common/modules/dialog/confirm/dialog.confirm.tpl.html',
-	// 		controller: 'DialogConfirmController',
-	// 		size: 'md',
-	// 		resolve: {
-	// 			params: function () {
-	// 				return params;
-	// 			}
-	// 		}
-	// 	});
-	// 	modalInstance.result.then(function() {
-	// 		deliveryServiceService.removeServerCapability(deliveryService.id, requiredCapability)
-	// 			.then(
-	// 				function(result) {
-	// 					messageModel.setMessages(result.alerts, false);
-	// 					$scope.refresh(); // refresh the table
-	// 				}
-	// 			);
-	// 	});
-	// };
-    //
-	// $scope.editServerCapability = function(capabilityName) {
-	// 	locationUtils.navigateToPath('/server-capabilities/edit?name=' + capabilityName);
-	// };
-
-	$scope.refresh = function() {
-		$state.reload(); // reloads all the resolves for the view
-	};
-
-	$scope.navigateToPath = (path, unsavedChanges) => locationUtils.navigateToPath(path, unsavedChanges);
-
-	angular.element(document).ready(function () {
-		// Datatable types don't exist in the project, and they should all be
-		// replaced with AG-Grid anyway.
-		// @ts-ignore
-		$('#deliveryServiceCapabilitiesTable').dataTable({
-			"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
-			"iDisplayLength": 25,
-			"columnDefs": [
-				{ "width": "5%", "targets": 1 },
-				{ 'orderable': false, 'targets': 1 }
-			],
-			"aaSorting": []
-		});
-	});
-
-};
-
-TableDeliveryServiceCapabilitiesController.$inject = ['deliveryService', 'requiredCapabilities', '$scope', '$state', '$uibModal', 'locationUtils', 'deliveryServiceService', 'messageModel'];
-module.exports = TableDeliveryServiceCapabilitiesController;
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/index.js b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/index.js
deleted file mode 100644
index c8f3b84aef..0000000000
--- a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * 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.
- */
-
-module.exports = angular.module('trafficPortal.table.deliveryServiceCapabilities', [])
-	.controller('TableDeliveryServiceCapabilitiesController', require('./TableDeliveryServiceCapabilitiesController'));
diff --git a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html b/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
deleted file mode 100644
index 96a4543f62..0000000000
--- a/traffic_portal/app/src/common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<!--
-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="x_panel">
-    <div class="x_title">
-        <ol class="breadcrumb pull-left">
-            <li><a ng-click="navigateToPath('/delivery-services')">Delivery Services</a></li>
-            <li><a name="dsLink" ng-click="navigateToPath('/delivery-services/' + deliveryService.id + '?dsType=' + deliveryService.type)">{{::deliveryService.xmlId}}</a></li>
-            <li class="active">Required Server Capabilities</li>
-        </ol>
-        <div class="pull-right">
-            <button type="button" name="addCapabilityBtn" class="btn btn-primary" title="Add Required Server Capability" ng-click="addDeliveryServiceCapability()"><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>
-    </div>
-    <div class="x_content">
-        <br>
-        <table id="deliveryServiceCapabilitiesTable" class="table responsive-utilities jambo_table">
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-click="editServerCapability(rq.requiredCapability)" ng-repeat="rq in ::requiredCapabilities" context-menu="contextMenuItems">
-                <td name="name" data-search="^{{::rq.requiredCapability}}$">{{::rq.requiredCapability}}</td>
-                <td style="text-align: right;">
-                    <a class="link action-link" title="Remove Required Server Capability" ng-click="confirmRemoveCapability(rq.requiredCapability, $event)"><i class="fa fa-sm fa-chain-broken"></i></a>
-                </td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-</div>
--->
diff --git a/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js b/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
index d84c227d62..c806b729ef 100644
--- a/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
+++ b/traffic_portal/app/src/common/modules/table/serverCapabilityDeliveryServices/TableServerCapabilityDeliveryServicesController.js
@@ -62,12 +62,6 @@ var TableServerCapabilityDeliveryServicesController = function(serverCapability,
 				$scope.editDeliveryService($itemScope.ds);
 			}
 		},
-		// {
-		// 	text: 'Manage Required Server Capabilities',
-		// 	click: function ($itemScope) {
-		// 		locationUtils.navigateToPath('/delivery-services/' + $itemScope.ds.deliveryServiceID + '/required-server-capabilities');
-		// 	}
-		// }
 	];
 
 	$scope.navigateToPath = (path, unsavedChanges) => locationUtils.navigateToPath(path, unsavedChanges);
diff --git a/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js b/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js
deleted file mode 100644
index 43f55c910d..0000000000
--- a/traffic_portal/app/src/modules/private/deliveryServices/capabilities/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * 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.
- */
-
-module.exports = angular.module('trafficPortal.private.deliveryServices.capabilities', [])
-	.config(function($stateProvider, $urlRouterProvider) {
-		$stateProvider
-			.state('trafficPortal.private.deliveryServices.capabilities', {
-				url: '/{deliveryServiceId}/required-server-capabilities?dsType',
-				views: {
-					deliveryServicesContent: {
-						templateUrl: 'common/modules/table/deliveryServiceCapabilities/table.deliveryServiceCapabilities.tpl.html',
-						controller: 'TableDeliveryServiceCapabilitiesController',
-						resolve: {
-							deliveryService: function($stateParams, deliveryServiceService) {
-								return deliveryServiceService.getDeliveryService($stateParams.deliveryServiceId);
-							},
-							// requiredCapabilities: function($stateParams, deliveryServiceService) {
-							// 	return deliveryServiceService.getServerCapabilities($stateParams.deliveryServiceId);
-							// }
-						}
-					}
-				}
-			})
-		;
-		$urlRouterProvider.otherwise('/');
-	});
\ No newline at end of file

From f67ea7c2a39b31427b814d42f243f203d7914825 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Wed, 25 Jan 2023 16:41:55 -0700
Subject: [PATCH 05/11] Added DSR for capability. updated TP tests for DS

---
 .../form.deliveryService.DNS.tpl.html         | 32 ++++++++------
 .../form.deliveryService.HTTP.tpl.html        | 32 ++++++++------
 .../test/integration/Data/deliveryservices.ts | 42 +++++--------------
 .../PageObjects/DeliveryServicePage.po.ts     | 25 +++--------
 .../specs/DeliveryServices.spec.ts            |  7 ----
 5 files changed, 54 insertions(+), 84 deletions(-)

diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
index 53c15f3672..4068d6b289 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
@@ -348,20 +348,26 @@ <h3 ng-if="!open()">Previous Value</h3>
                                 <div class="helptext">Required capability(ies) associated with a delivery  service</div>
                             </div>
                         </label>
-                        <div class="col-md-10 col-sm-10 col-xs-12 checkbox-scroll-container" style="...">
-                            <div ng-repeat="capability in requiredCapabilities">
-                                <input
-                                        type="checkbox"
-                                        id="capability"
-                                        name="capability"
-                                        style="..."
-                                        ng-model="selectedCapabilities[capability.name]"
-                                        ng-checked="selectedCapabilities[capability.name]"
-                                />
-                                <label>
-                                    <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
-                                </label>
+                        <div class="col-md-10 col-sm-10 col-xs-12">
+                            <div class="checkbox-scroll-container">
+                                <div ng-repeat="capability in requiredCapabilities">
+                                    <input
+                                            type="checkbox"
+                                            id="capability"
+                                            name="capability"
+                                            ng-model="selectedCapabilities[capability.name]"
+                                            ng-checked="selectedCapabilities[capability.name]"
+                                    />
+                                    <label>
+                                        <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
+                                    </label>
+                                </div>
                             </div>
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">
+                                <h3 ng-if="open()">Current Value</h3>
+                                <h3 ng-if="!open()">Previous Value</h3>
+                                <pre>{{::dsCurrent.requiredCapabilities}}</pre>
+                            </aside>
                         </div>
                     </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serviceCategory), 'has-feedback': hasError(generalConfig.serviceCategory)}">
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index e048060556..3c6f4377f9 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -348,20 +348,26 @@ <h3 ng-if="!open()">Previous Value</h3>
                                 <div class="helptext">Required capability(ies) associated with a delivery  service</div>
                             </div>
                         </label>
-                        <div class="col-md-10 col-sm-10 col-xs-12 checkbox-scroll-container" style="...">
-                            <div ng-repeat="capability in requiredCapabilities">
-                                <input
-                                        type="checkbox"
-                                        id="capability"
-                                        name="capability"
-                                        style="..."
-                                        ng-model="selectedCapabilities[capability.name]"
-                                        ng-checked="selectedCapabilities[capability.name]"
-                                />
-                               <label>
-                                   <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
-                               </label>
+                        <div class="col-md-10 col-sm-10 col-xs-12">
+                            <div class="checkbox-scroll-container">
+                                <div ng-repeat="capability in requiredCapabilities">
+                                    <input
+                                            type="checkbox"
+                                            id="capability"
+                                            name="capability"
+                                            ng-model="selectedCapabilities[capability.name]"
+                                            ng-checked="selectedCapabilities[capability.name]"
+                                    />
+                                   <label>
+                                       <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
+                                   </label>
+                                </div>
                             </div>
+                            <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">
+                                <h3 ng-if="open()">Current Value</h3>
+                                <h3 ng-if="!open()">Previous Value</h3>
+                                <pre>{{::dsCurrent.requiredCapabilities}}</pre>
+                            </aside>
                         </div>
                     </div>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.serviceCategory), 'has-feedback': hasError(generalConfig.serviceCategory)}">
diff --git a/traffic_portal/test/integration/Data/deliveryservices.ts b/traffic_portal/test/integration/Data/deliveryservices.ts
index 4514acb7ed..60e2dcc934 100644
--- a/traffic_portal/test/integration/Data/deliveryservices.ts
+++ b/traffic_portal/test/integration/Data/deliveryservices.ts
@@ -126,6 +126,16 @@ export const deliveryservices = {
 				}
 			]
 		},
+		{
+			action: "CreateServerCapabilities",
+			route: "/server_capabilities",
+			method: "post",
+			data: [
+				{
+					name: "DSTestCap"
+				}
+			]
+		},
 		{
 			action: "CreateDeliveryServices",
 			route: "/deliveryservices",
@@ -151,6 +161,7 @@ export const deliveryservices = {
 					rangeRequestHandling: 0,
 					regional: false,
 					regionalGeoBlocking: false,
+					requiredCapabilities: ["DSTestCap"],
 					tenantId: 0,
 					typeId: 1,
 					xmlId: "dstestro1",
@@ -171,16 +182,6 @@ export const deliveryservices = {
 				}
 			]
 		},
-		{
-			action: "CreateServerCapabilities",
-			route: "/server_capabilities",
-			method: "post",
-			data: [
-				{
-					name: "DSTestCap"
-				}
-			]
-		},
 		{
 			action: "CreateDivisions",
 			route: "/divisions",
@@ -357,13 +358,6 @@ export const deliveryservices = {
 					validationMessage: "server assignments complete"
 				}
 			],
-			assignRequiredCapabilities: [
-				{
-					rcName: "DSTestCap",
-					xmlID: "tpdservice2",
-					validationMessage: "This endpoint is deprecated, please use the deliveryservices endpoint instead"
-				}
-			],
 			remove: [
 				{
 					name: "tpdservice1",
@@ -408,13 +402,6 @@ export const deliveryservices = {
 					validationMessage: "missing required Permissions: SERVER:UPDATE, DELIVERY-SERVICE:UPDATE"
 				}
 			],
-			assignRequiredCapabilities: [
-				{
-					rcName: "DSTestCap",
-					xmlID: "dstestro1",
-					validationMessage: "missing required Permissions: DELIVERY-SERVICE:UPDATE"
-				}
-			],
 			remove: [
 				{
 					name: "dstestro1",
@@ -465,13 +452,6 @@ export const deliveryservices = {
 					validationMessage: "server assignments complete"
 				}
 			],
-			assignRequiredCapabilities: [
-				{
-					rcName: "DSTestCap",
-					xmlID: "optpdservice2",
-					validationMessage: "This endpoint is deprecated, please use the deliveryservices endpoint instead"
-				}
-			],
 			remove: [
 				{
 					name: "optpdservice1",
diff --git a/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts b/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
index 63b1cec444..d2be20d738 100644
--- a/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
+++ b/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
@@ -76,8 +76,12 @@ export class DeliveryServicePage extends BasePage {
 			break;
 
 			case "DNS":
+				ps.push(element(by.name("capability")).click());
 			case "HTTP":
-				ps.push(element(by.name("orgServerFqdn")).sendKeys("http://origin.infra.ciab.test"));
+				ps.push(
+					element(by.name("orgServerFqdn")).sendKeys("http://origin.infra.ciab.test"),
+					element(by.name("capability")).click()
+				);
 			case "STEERING":
 				ps.push(element(by.name("protocol")).sendKeys("HTTP"));
 			break;
@@ -168,23 +172,4 @@ export class DeliveryServicePage extends BasePage {
 		await this.ClickSubmit();
 		return this.GetOutputMessage();
 	}
-
-	/**
-	 * Assigns the Capability with the given name as a requirement of the
-	 * Delivery Service. Note that the browser must already be on a Delivery
-	 * Service edit view for this to work, as this method neither navigates to
-	 * it nor back to the table view afterward!
-	 *
-	 * @param name The name of the Capability to be required.
-	 * @returns The text shown in the first Alert pane found after attempting
-	 * the assignment.
-	 */
-	public async AssignRequiredCapabilitiesToDS(name: string): Promise<string>{
-		await this.btnMore.click();
-		await element(by.linkText("Manage Required Server Capabilities")).click();
-		await element(by.name("addCapabilityBtn")).click();
-		await element(by.name("selectFormDropdown")).sendKeys(name);
-		await this.ClickSubmit();
-		return this.GetOutputMessage();
-	}
 }
diff --git a/traffic_portal/test/integration/specs/DeliveryServices.spec.ts b/traffic_portal/test/integration/specs/DeliveryServices.spec.ts
index a7c8efb39b..20fd8c39cb 100644
--- a/traffic_portal/test/integration/specs/DeliveryServices.spec.ts
+++ b/traffic_portal/test/integration/specs/DeliveryServices.spec.ts
@@ -74,13 +74,6 @@ describe("Delivery Services", () => {
 				});
 			}
 
-			for (const {rcName, validationMessage, xmlID} of data.assignRequiredCapabilities) {
-				it("assign required capabilities to delivery service", async () => {
-					await deliveryservicesPage.SearchDeliveryService(xmlID);
-					expect(await deliveryservicesPage.AssignRequiredCapabilitiesToDS(rcName)).toBe(validationMessage);
-				});
-			}
-
 			for (const {name, validationMessage} of data.remove) {
 				it("deletes a Delivery Service", async () => {
 					await deliveryservicesPage.SearchDeliveryService(name);

From 05f7ddfd6f9bebebf7e90e879896ed493474cbcd Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Wed, 25 Jan 2023 16:57:35 -0700
Subject: [PATCH 06/11] Updated changelog and added import to a controller.

---
 CHANGELOG.md                                                 | 1 +
 .../form/deliveryService/FormDeliveryServiceController.js    | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 720c4d0872..9ce1e4d024 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 
 ## [unreleased]
 ### Added
+- [#7314](https://github.com/apache/trafficcontrol/pull/7314) *Traffic Portal* Added capability feature to Delivery Service Form (HTTP, DNS)
 - [#7295](https://github.com/apache/trafficcontrol/pull/7295) *Traffic Portal* Added description and priority order for Layered Profile on server form.
 - [#6234](https://github.com/apache/trafficcontrol/issues/6234) *Traffic Ops, Traffic Portal* Added description field to Server Capabilities
 - [#6033](https://github.com/apache/trafficcontrol/issues/6033) *Traffic Ops, Traffic Portal* Added ability to assign multiple servers per capability.
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
index ab32f44b2d..8f23f9ce75 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/FormDeliveryServiceController.js
@@ -37,9 +37,10 @@
  * @param {import("../../../api/TenantService")} tenantService
  * @param {import("../../../models/PropertiesModel")} propertiesModel
  * @param {import("../../../models/UserModel")} userModel
+ * @param {import("../../../api/ServerCapabilityService")} serverCapabilityService
  * @param {import("../../../api/ServiceCategoryService")} serviceCategoryService
  */
-var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serverCapabilityService, locationUtils, serviceCategoryService) {
+var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin, topologies, type, types, $scope, formUtils, tenantUtils, deliveryServiceUtils, deliveryServiceService, cdnService, profileService, tenantService, propertiesModel, userModel, serverCapabilityService, serviceCategoryService) {
 
 	/**
 	 * This is used to cache TLS version settings when the checkbox is toggled.
@@ -499,5 +500,5 @@ var FormDeliveryServiceController = function(deliveryService, dsCurrent, origin,
 	}
 };
 
-FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serverCapabilityService", "locationUtils", "serviceCategoryService"];
+FormDeliveryServiceController.$inject = ["deliveryService", "dsCurrent", "origin", "topologies", "type", "types", "$scope", "formUtils", "tenantUtils", "deliveryServiceUtils", "deliveryServiceService", "cdnService", "profileService", "tenantService", "propertiesModel", "userModel", "serverCapabilityService", "serviceCategoryService"];
 module.exports = FormDeliveryServiceController;

From 8c5ace0f49d224b8a7bf386be5b6006ab962808b Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Thu, 26 Jan 2023 09:57:53 -0700
Subject: [PATCH 07/11] Removed padding since added a new div block.

---
 traffic_portal/app/src/common/modules/form/_form.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/traffic_portal/app/src/common/modules/form/_form.scss b/traffic_portal/app/src/common/modules/form/_form.scss
index 9201ddec10..488f3968f1 100644
--- a/traffic_portal/app/src/common/modules/form/_form.scss
+++ b/traffic_portal/app/src/common/modules/form/_form.scss
@@ -376,5 +376,4 @@ input:checked + .slider::before {
 	overflow-y: auto;
 	display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    padding-left: 16px;
 }

From 3dd129f5499c24cdaa0e7b60265213eefc858f41 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Mon, 30 Jan 2023 10:36:54 -0700
Subject: [PATCH 08/11] Updated based on review comments.

---
 .../app/src/common/modules/form/_form.scss     | 11 +++++++++--
 .../form.deliveryService.DNS.tpl.html          | 16 +++++++---------
 .../form.deliveryService.HTTP.tpl.html         | 18 ++++++++----------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/traffic_portal/app/src/common/modules/form/_form.scss b/traffic_portal/app/src/common/modules/form/_form.scss
index 488f3968f1..e6956cc703 100644
--- a/traffic_portal/app/src/common/modules/form/_form.scss
+++ b/traffic_portal/app/src/common/modules/form/_form.scss
@@ -374,6 +374,13 @@ input:checked + .slider::before {
 .checkbox-scroll-container {
 	max-height: 3.5em;
 	overflow-y: auto;
-	display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-content: space-between;
+
+	div {
+		min-width: 5em;
+		width: fit-content;
+	}
 }
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
index 4068d6b289..343a2f6dfa 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
@@ -350,17 +350,15 @@ <h3 ng-if="!open()">Previous Value</h3>
                         </label>
                         <div class="col-md-10 col-sm-10 col-xs-12">
                             <div class="checkbox-scroll-container">
-                                <div ng-repeat="capability in requiredCapabilities">
+                                <div ng-repeat="capability in requiredCapabilities track by $index">
                                     <input
-                                            type="checkbox"
-                                            id="capability"
-                                            name="capability"
-                                            ng-model="selectedCapabilities[capability.name]"
-                                            ng-checked="selectedCapabilities[capability.name]"
+                                        type="checkbox"
+                                        id="capability-{{$index}}"
+                                        name="capability-{{$index}}"
+                                        ng-model="selectedCapabilities[capability.name]"
+                                        ng-checked="selectedCapabilities[capability.name]"
                                     />
-                                    <label>
-                                        <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
-                                    </label>
+                                    <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
                                 </div>
                             </div>
                             <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index 3c6f4377f9..706fcd8d60 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -345,22 +345,20 @@ <h3 ng-if="!open()">Previous Value</h3>
                     <div class="form-group" ng-class="{'has-error': hasError(generalConfig.requiredCapabilities), 'has-feedback': hasError(generalConfig.requiredCapabilities)}">
                         <label class="has-tooltip control-label col-md-2 col-sm-2 col-xs-12" for="capability">Required Capability
                             <div class="helptooltip">
-                                <div class="helptext">Required capability(ies) associated with a delivery  service</div>
+                                <div class="helptext">Required capability(ies) associated with this Delivery Service</div>
                             </div>
                         </label>
                         <div class="col-md-10 col-sm-10 col-xs-12">
                             <div class="checkbox-scroll-container">
-                                <div ng-repeat="capability in requiredCapabilities">
+                                <div ng-repeat="capability in requiredCapabilities track by $index">
                                     <input
-                                            type="checkbox"
-                                            id="capability"
-                                            name="capability"
-                                            ng-model="selectedCapabilities[capability.name]"
-                                            ng-checked="selectedCapabilities[capability.name]"
+                                        type="checkbox"
+                                        id="capability-{{$index}}"
+                                        name="capability-{{$index}}"
+                                        ng-model="selectedCapabilities[capability.name]"
+                                        ng-checked="selectedCapabilities[capability.name]"
                                     />
-                                   <label>
-                                       <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank"> {{capability.name}}</a>
-                                   </label>
+                                   <a ng-href="/#!/server-capabilities/edit?name={{capability.name}}" target="_blank">{{capability.name}}</a>
                                 </div>
                             </div>
                             <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.requiredCapabilities !== dsCurrent.requiredCapabilities">

From 6b25250b3495988278c43973259a0d70ad03f543 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Mon, 30 Jan 2023 10:39:32 -0700
Subject: [PATCH 09/11] Reverting service category html change.

---
 .../form/deliveryService/form.deliveryService.HTTP.tpl.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index 706fcd8d60..b77b501b5e 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -375,7 +375,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                         </label>
                         <div class="col-md-10 col-sm-10 col-xs-12">
                             <select id="serviceCategory" name="serviceCategory" class="form-control" ng-model="deliveryService.serviceCategory" ng-options="serviceCategory.name as serviceCategory.name for serviceCategory in serviceCategories">
-                                <option selected value="">Select...</option>
+                                <option value="">Select...</option>
                             </select>
                             <small ng-show="deliveryService.serviceCategory"><a href="/#!/service-categories/edit?name={{deliveryService.serviceCategory}}" target="_blank">View Details&nbsp;&nbsp;<i class="fa fs-xs fa-external-link"></i></a></small>
                             <aside class="current-value" ng-if="settings.isRequest" ng-show="deliveryService.serviceCategory != dsCurrent.serviceCategory">

From f4f985829aae811290418611723fc51f6a069023 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Mon, 30 Jan 2023 14:38:49 -0700
Subject: [PATCH 10/11] Added aria-label

---
 .../form/deliveryService/form.deliveryService.DNS.tpl.html       | 1 +
 .../form/deliveryService/form.deliveryService.HTTP.tpl.html      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
index 343a2f6dfa..8a0b3b9afd 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html
@@ -352,6 +352,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                             <div class="checkbox-scroll-container">
                                 <div ng-repeat="capability in requiredCapabilities track by $index">
                                     <input
+                                        aria-label="{{capability.name}}"
                                         type="checkbox"
                                         id="capability-{{$index}}"
                                         name="capability-{{$index}}"
diff --git a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
index b77b501b5e..0bc2ec1f79 100644
--- a/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
+++ b/traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html
@@ -352,6 +352,7 @@ <h3 ng-if="!open()">Previous Value</h3>
                             <div class="checkbox-scroll-container">
                                 <div ng-repeat="capability in requiredCapabilities track by $index">
                                     <input
+                                        aria-label="{{capability.name}}"
                                         type="checkbox"
                                         id="capability-{{$index}}"
                                         name="capability-{{$index}}"

From 041b9a279d6168c6dd1b9137054e7fcc4b891a75 Mon Sep 17 00:00:00 2001
From: Rima Shah <rima_shah@comcast.com>
Date: Tue, 31 Jan 2023 15:34:05 -0700
Subject: [PATCH 11/11] Updated test case after changing the input name

---
 .../test/integration/PageObjects/DeliveryServicePage.po.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts b/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
index d2be20d738..b326f1af46 100644
--- a/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
+++ b/traffic_portal/test/integration/PageObjects/DeliveryServicePage.po.ts
@@ -76,11 +76,11 @@ export class DeliveryServicePage extends BasePage {
 			break;
 
 			case "DNS":
-				ps.push(element(by.name("capability")).click());
+				ps.push(element(by.name("capability-0")).click());
 			case "HTTP":
 				ps.push(
 					element(by.name("orgServerFqdn")).sendKeys("http://origin.infra.ciab.test"),
-					element(by.name("capability")).click()
+					element(by.name("capability-0")).click()
 				);
 			case "STEERING":
 				ps.push(element(by.name("protocol")).sendKeys("HTTP"));