TP: converts DS tables to more performant and powerful ag-grid

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 ### Added
 - Traffic Portal: [#5394](https://github.com/apache/trafficcontrol/issues/5394) - Converts the tenant table to a tenant tree for usability
 - Traffic Portal: [#5360](https://github.com/apache/trafficcontrol/issues/5360) - Adds the ability to clone a topology
+- Traffic Portal: upgraded delivery service UI tables to use more powerful/performant ag-grid component
 - Traffic Ops: added a feature so that the user can specify `maxRequestHeaderBytes` on a per delivery service basis
 - Traffic Router: log warnings when requests to Traffic Monitor return a 503 status code
 - [#5344](https://github.com/apache/trafficcontrol/issues/5344) - Add a page that addresses migrating from Traffic Ops API v1 for each endpoint

docs/source/admin/traffic_portal/usingtrafficportal.rst

@@ -191,7 +191,7 @@ A table showing the results of the periodic :ref:`to-check-ext` that are run. Th
 
 Services
 ========
-:guilabel:`Services` groups the functionality to modify :term:`Delivery Services` - for those users with the necessary permissions - or make Delivery Service Requests for such changes - for users without necessary permissions.
+:guilabel:`Services` groups the functionality to modify :term:`Delivery Services` - for those users with the necessary permissions - or make Delivery Service Requests for such changes - for users without necessary permissions. Delivery Services can also be grouped by :term:`Service Category`.
 
 
 .. figure:: ./images/tp_menu_services.png

traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.DNS.tpl.html

@@ -59,7 +59,7 @@
                     <li role="menuitem"><a ng-click="viewOrigins()">Manage Origins</a></li>
                     <li role="menuitem"><a ng-click="viewRegexes()">Manage Regexes</a></li>
                     <li role="menuitem"><a ng-click="viewCapabilities()">Manage Required Server Capabilities</a></li>
-                    <li role="menuitem"><a ng-click="viewServers()">Manage Servers</a></li>
+                    <li name="manageServersMenuItem" role="menuitem"><button class="menu-item-button" type="button" ng-click="viewServers()">Manage Servers</button></li>
                     <li role="menuitem"><a ng-click="viewStaticDnsEntries()">Manage Static DNS Entries</a></li>
                 </ul>
             </div>

traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.HTTP.tpl.html

@@ -59,7 +59,7 @@
                     <li role="menuitem"><a ng-click="viewOrigins()">Manage Origins</a></li>
                     <li role="menuitem"><a ng-click="viewRegexes()">Manage Regexes</a></li>
                     <li role="menuitem"><a ng-click="viewCapabilities()">Manage Required Server Capabilities</a></li>
-                    <li role="menuitem"><a ng-click="viewServers()">Manage Servers</a></li>
+                    <li name="manageServersMenuItem" role="menuitem"><button class="menu-item-button" type="button" ng-click="viewServers()">Manage Servers</button></li>
                     <li role="menuitem"><a ng-click="viewStaticDnsEntries()">Manage Static DNS Entries</a></li>
                 </ul>
             </div>

traffic_portal/app/src/common/modules/form/deliveryService/form.deliveryService.anyMap.tpl.html

@@ -51,7 +51,7 @@
                     <hr class="divider"/>
                     <li role="menuitem"><a ng-click="viewCharts()">View Charts</a></li>
                     <hr class="divider"/>
-                    <li role="menuitem"><a ng-click="viewServers()">Manage Servers</a></li>
+                    <li name="manageServersMenuItem" role="menuitem"><button class="menu-item-button" type="button" ng-click="viewServers()">Manage Servers</button></li>
                 </ul>
             </div>
         </div>

traffic_portal/app/src/common/modules/form/tenant/form.tenant.tpl.html

@@ -24,9 +24,9 @@
             <li class="active">{{tenantName}}</li>
         </ol>
         <div class="pull-right" role="group" ng-show="!settings.isNew">
-            <button class="btn btn-default" title="View Users" ng-click="viewUsers()">View Users</button>
+            <button class="btn btn-primary" title="View Users" ng-click="viewUsers()">View Users</button>
             <div class="btn-group" role="group" uib-dropdown is-open="more.isopen">
-                <button name="moreBtn" type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
+                <button name="moreBtn" type="button" class="btn btn-primary dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
                     View Delivery Services&nbsp;
                     <span class="caret"></span>
                 </button>

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

@@ -31,7 +31,7 @@
                     <span class="input-group-addon">
                         <label for="pageSize">Page size</label>
                     </span>
-                    <input id="pageSize" name="pageSize" type="number" class="form-control" placeholder="100" ng-model="pageSize" ng-change="onPageSizeChanged()" aria-label="Page Size"/>
+                    <input id="pageSize" name="pageSize" type="number" min="1" class="form-control" placeholder="100" ng-model="pageSize" ng-change="onPageSizeChanged()" aria-label="Page Size"/>
                 </div>
                 <div id="toggleColumns" class="btn-group" role="group" title="Select Table Columns" uib-dropdown is-open="columnSettings.isopen">
                     <button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">

traffic_portal/app/src/common/modules/table/cdnDeliveryServices/TableCDNDeliveryServicesController.js

@@ -17,39 +17,13 @@
  * under the License.
  */
 
-var TableCDNDeliveryServicesController = function(cdn, deliveryServices, $controller, $scope) {
+var TableCDNDeliveryServicesController = function(cdn, deliveryServices, filter, $controller, $scope) {
 
 	// extends the TableDeliveryServicesController to inherit common methods
-	angular.extend(this, $controller('TableDeliveryServicesController', { deliveryServices: deliveryServices, $scope: $scope }));
-
-	let cdnDeliveryServicesTable;
+	angular.extend(this, $controller('TableDeliveryServicesController', { tableName: 'cdnDS', deliveryServices: deliveryServices, filter: filter, $scope: $scope }));
 
 	$scope.cdn = cdn;
-
-	$scope.toggleVisibility = function(colName) {
-		const col = cdnDeliveryServicesTable.column(colName + ':name');
-		col.visible(!col.visible());
-		cdnDeliveryServicesTable.rows().invalidate().draw();
-	};
-
-	angular.element(document).ready(function () {
-		cdnDeliveryServicesTable = $('#cdnDeliveryServicesTable').DataTable({
-			"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
-			"iDisplayLength": 25,
-			"aaSorting": [],
-			"columns": $scope.columns,
-			"initComplete": function(settings, json) {
-				try {
-					// need to create the show/hide column checkboxes and bind to the current visibility
-					$scope.columns = JSON.parse(localStorage.getItem('DataTables_cdnDeliveryServicesTable_/')).columns;
-				} catch (e) {
-					console.error("Failure to retrieve required column info from localStorage (key=DataTables_cdnDeliveryServicesTable_/):", e);
-				}
-			}
-		});
-	});
-
 };
 
-TableCDNDeliveryServicesController.$inject = ['cdn', 'deliveryServices', '$controller', '$scope'];
+TableCDNDeliveryServicesController.$inject = ['cdn', 'deliveryServices', 'filter', '$controller', '$scope'];
 module.exports = TableCDNDeliveryServicesController;