You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@trafficcontrol.apache.org by GitBox <gi...@apache.org> on 2021/01/14 22:04:23 UTC

[GitHub] [trafficcontrol] ocket8888 commented on a change in pull request #5408: TP: converts DS tables to more performant and powerful ag-grid

ocket8888 commented on a change in pull request #5408:
URL: https://github.com/apache/trafficcontrol/pull/5408#discussion_r557719238



##########
File path: 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"><a ng-click="viewServers()">Manage Servers</a></li>

Review comment:
       Anchor tags should be links - if this click handler navigates the user, can you instead use `ng-href` to just put the URL in the DOM? If the click handler does not navigate, then it should be a button instead of an anchor. Using click handlers on anchors causes problems for accessibility.

##########
File path: traffic_portal/app/src/common/modules/table/cdnDeliveryServices/table.cdnDeliveryServices.tpl.html
##########
@@ -20,167 +20,101 @@
 <div class="x_panel">
     <div class="x_title">
         <ol class="breadcrumb pull-left">
-            <li><a ng-click="navigateToPath('/cdns')">CDNs</a></li>
-            <li><a ng-click="navigateToPath('/cdns/' + cdn.id)">{{cdn.name}}</a></li>
+            <li><a href="#!/cdns">CDNs</a></li>
+            <li><a ng-href="#!/cdns/{{cdn.id}}">{{::cdn.name}}</a></li>
             <li class="active">Delivery Services</li>
         </ol>
         <div class="pull-right">
-            <button class="btn btn-default" title="Refresh" ng-click="refresh()"><i class="fa fa-refresh"></i></button>
-            <div 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">
-                    <i class="fa fa-columns"></i>&nbsp;
-                    <span class="caret"></span>
-                </button>
-                <menu ng-click="$event.stopPropagation()" class="column-settings dropdown-menu-right dropdown-menu" uib-dropdown-menu>
-                    <li role="menuitem" ng-repeat="c in columns | orderBy:'name'">
-                        <div class="checkbox">
-                            <label><input type="checkbox" ng-model="c.visible" ng-click="toggleVisibility(c.name)"> {{::c.name}}</label>
-                        </div>
-                    </li>
-                </menu>
+            <div class="form-inline" role="search">
+                <input id="quickSearch" name="quickSearch" type="search" class="form-control text-input" placeholder="Quick search..." ng-model="quickSearch" ng-change="onQuickSearchChanged()" aria-label="Search"/>
+                <div class="input-group text-input">
+                    <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"/>

Review comment:
       I think this should probably have `min=1` on it.

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true
+        },
+        {
+            headerName: "Info URL",
+            field: "infoUrl",
+            hide: true
+        },
+        {
+            headerName: "Initial Dispersion",
+            field: "initialDispersion",
+            hide: true
+        },
+        {
+            headerName: "Inner Header Rewrite Rules",
+            field: "innerHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "IPv6 Routing",
+            field: "ipv6RoutingEnabled",
+            hide: true
+        },
+        {
+            headerName: "Last Header Rewrite Rules",
+            field: "lastHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "Last Updated",
+            field: "lastUpdated",
+            hide: true,
+            filter: "agDateColumnFilter",
+            valueFormatter: dateCellFormatter
+        },
+        {
+            headerName: "Long Desc 1",
+            field: "longDesc",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 2",
+            field: "longDesc1",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 3",
+            field: "longDesc2",
+            hide: true
+        },
+        {
+            headerName: "Max DNS Answers",
+            field: "maxDnsAnswers",
+            hide: true
+        },
+        {
+            headerName: "Max Origin Connections",
+            field: "maxOriginConnections",
+            hide: true
+        },
+        {
+            headerName: "Max Request Header Bytes",
+            field: "maxRequestHeaderBytes",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true

Review comment:
       This is a number so it should use the `agNumberColumnFilter` filter.

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true
+        },
+        {
+            headerName: "Info URL",
+            field: "infoUrl",
+            hide: true
+        },
+        {
+            headerName: "Initial Dispersion",
+            field: "initialDispersion",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true
+        },
+        {
+            headerName: "Info URL",
+            field: "infoUrl",
+            hide: true
+        },
+        {
+            headerName: "Initial Dispersion",
+            field: "initialDispersion",
+            hide: true
+        },
+        {
+            headerName: "Inner Header Rewrite Rules",
+            field: "innerHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "IPv6 Routing",
+            field: "ipv6RoutingEnabled",
+            hide: true
+        },
+        {
+            headerName: "Last Header Rewrite Rules",
+            field: "lastHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "Last Updated",
+            field: "lastUpdated",
+            hide: true,
+            filter: "agDateColumnFilter",
+            valueFormatter: dateCellFormatter
+        },
+        {
+            headerName: "Long Desc 1",
+            field: "longDesc",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 2",
+            field: "longDesc1",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 3",
+            field: "longDesc2",
+            hide: true
+        },
+        {
+            headerName: "Max DNS Answers",
+            field: "maxDnsAnswers",
+            hide: true
+        },
+        {
+            headerName: "Max Origin Connections",
+            field: "maxOriginConnections",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true
+        },
+        {
+            headerName: "Info URL",
+            field: "infoUrl",
+            hide: true
+        },
+        {
+            headerName: "Initial Dispersion",
+            field: "initialDispersion",
+            hide: true
+        },
+        {
+            headerName: "Inner Header Rewrite Rules",
+            field: "innerHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "IPv6 Routing",
+            field: "ipv6RoutingEnabled",
+            hide: true
+        },
+        {
+            headerName: "Last Header Rewrite Rules",
+            field: "lastHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "Last Updated",
+            field: "lastUpdated",
+            hide: true,
+            filter: "agDateColumnFilter",
+            valueFormatter: dateCellFormatter
+        },
+        {
+            headerName: "Long Desc 1",
+            field: "longDesc",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 2",
+            field: "longDesc1",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 3",
+            field: "longDesc2",
+            hide: true
+        },
+        {
+            headerName: "Max DNS Answers",
+            field: "maxDnsAnswers",
+            hide: true

Review comment:
       same as above RE: filter

##########
File path: traffic_portal/app/src/common/modules/table/deliveryServices/TableDeliveryServicesController.js
##########
@@ -17,30 +17,385 @@
  * under the License.
  */
 
-var TableDeliveryServicesController = function(deliveryServices, $anchorScroll, $scope, $state, $location, $uibModal, $window, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
-
-    let deliveryServicesTable;
-
-    var protocols = deliveryServiceUtils.protocols;
-
-    var qstrings = deliveryServiceUtils.qstrings;
-
-    var geoProviders = deliveryServiceUtils.geoProviders;
-
-    var geoLimits = deliveryServiceUtils.geoLimits;
-
-    var rrhs = deliveryServiceUtils.rrhs;
+var TableDeliveryServicesController = function(tableName, deliveryServices, filter, $anchorScroll, $document, $scope, $state, $location, $uibModal, deliveryServiceService, deliveryServiceRequestService, dateUtils, deliveryServiceUtils, locationUtils, messageModel, propertiesModel, userModel) {
+
+    /**
+     * Gets value to display a default tooltip.
+     */
+    function defaultTooltip(params) {
+        return params.value;
+    }
+
+    /**
+     * Formats the contents of a 'lastUpdated' column cell as "relative to now".
+     */
+    function dateCellFormatter(params) {
+        return params.value ? dateUtils.getRelativeTime(params.value) : params.value;
+    }
+
+    /** The columns of the ag-grid table */
+    const columns = [
+        {
+            headerName: "Active",
+            field: "active",
+            hide: false
+        },
+        {
+            headerName: "Anonymous Blocking",
+            field: "anonymousBlockingEnabled",
+            hide: true
+        },
+        {
+            headerName: "CDN",
+            field: "cdnName",
+            hide: false
+        },
+        {
+            headerName: "Check Path",
+            field: "checkPath",
+            hide: true
+        },
+        {
+            headerName: "Consistent Hash Query Params",
+            field: "consistentHashQueryParams",
+            hide: true,
+            valueFormatter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            },
+            tooltipValueGetter: function(params) {
+                return params.data.consistentHashQueryParams.join(', ');
+            }
+        },
+        {
+            headerName: "Consistent Hash Regex",
+            field: "consistentHashRegex",
+            hide: true
+        },
+        {
+            headerName: "Deep Caching Type",
+            field: "deepCachingType",
+            hide: true
+        },
+        {
+            headerName: "Display Name",
+            field: "displayName",
+            hide: false
+        },
+        {
+            headerName: "DNS Bypass CNAME",
+            field: "dnsBypassCname",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IP",
+            field: "dnsBypassIp",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass IPv6",
+            field: "dnsBypassIp6",
+            hide: true
+        },
+        {
+            headerName: "DNS Bypass TTL",
+            field: "dnsBypassTtl",
+            hide: true
+        },
+        {
+            headerName: "DNS TTL",
+            field: "ccrDnsTtl",
+            hide: true
+        },
+        {
+            headerName: "DSCP",
+            field: "dscp",
+            hide: false
+        },
+        {
+            headerName: "ECS Enabled",
+            field: "ecsEnabled",
+            hide: true
+        },
+        {
+            headerName: "Edge Header Rewrite Rules",
+            field: "edgeHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "First Header Rewrite Rules",
+            field: "firstHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "FQ Pacing Rate",
+            field: "fqPacingRate",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit",
+            field: "geoLimit",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoLimits[params.data.geoLimit];
+            }
+        },
+        {
+            headerName: "Geo Limit Countries",
+            field: "geoLimitCountries",
+            hide: true
+        },
+        {
+            headerName: "Geo Limit Redirect URL",
+            field: "geoLimitRedirectURL",
+            hide: true
+        },
+        {
+            headerName: "Geolocation Provider",
+            field: "geoProvider",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.geoProviders[params.data.geoProvider];
+            }
+        },
+        {
+            headerName: "Geo Miss Latitude",
+            field: "missLat",
+            hide: true
+        },
+        {
+            headerName: "Geo Miss Longitude",
+            field: "missLong",
+            hide: true
+        },
+        {
+            headerName: "Global Max Mbps",
+            field: "globalMaxMbps",
+            hide: true
+        },
+        {
+            headerName: "Global Max TPS",
+            field: "globalMaxTps",
+            hide: true
+        },
+        {
+            headerName: "HTTP Bypass FQDN",
+            field: "httpBypassFqdn",
+            hide: true
+        },
+        {
+            headerName: "ID",
+            field: "id",
+            hide: true
+        },
+        {
+            headerName: "Info URL",
+            field: "infoUrl",
+            hide: true
+        },
+        {
+            headerName: "Initial Dispersion",
+            field: "initialDispersion",
+            hide: true
+        },
+        {
+            headerName: "Inner Header Rewrite Rules",
+            field: "innerHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "IPv6 Routing",
+            field: "ipv6RoutingEnabled",
+            hide: true
+        },
+        {
+            headerName: "Last Header Rewrite Rules",
+            field: "lastHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "Last Updated",
+            field: "lastUpdated",
+            hide: true,
+            filter: "agDateColumnFilter",
+            valueFormatter: dateCellFormatter
+        },
+        {
+            headerName: "Long Desc 1",
+            field: "longDesc",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 2",
+            field: "longDesc1",
+            hide: true
+        },
+        {
+            headerName: "Long Desc 3",
+            field: "longDesc2",
+            hide: true
+        },
+        {
+            headerName: "Max DNS Answers",
+            field: "maxDnsAnswers",
+            hide: true
+        },
+        {
+            headerName: "Max Origin Connections",
+            field: "maxOriginConnections",
+            hide: true
+        },
+        {
+            headerName: "Max Request Header Bytes",
+            field: "maxRequestHeaderBytes",
+            hide: true
+        },
+        {
+            headerName: "Mid Header Rewrite Rules",
+            field: "midHeaderRewrite",
+            hide: true
+        },
+        {
+            headerName: "Multi-Site Origin",
+            field: "multiSiteOrigin",
+            hide: true
+        },
+        {
+            headerName: "Origin Shield",
+            field: "originShield",
+            hide: true
+        },
+        {
+            headerName: "Origin FQDN",
+            field: "orgServerFqdn",
+            hide: false
+        },
+        {
+            headerName: "Profile",
+            field: "profileName",
+            hide: true
+        },
+        {
+            headerName: "Protocol",
+            field: "protocol",
+            hide: false,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.protocols[params.data.protocol];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.protocols[params.data.protocol];
+            }
+        },
+        {
+            headerName: "Qstring Handling",
+            field: "qstringIgnore",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.qstrings[params.data.qstringIgnore];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.qstrings[params.data.qstringIgnore];
+            }
+        },
+        {
+            headerName: "Range Request Handling",
+            field: "rangeRequestHandling",
+            hide: true,
+            valueFormatter: function(params) {
+                return deliveryServiceUtils.rrhs[params.data.rangeRequestHandling];
+            },
+            tooltipValueGetter: function(params) {
+                return deliveryServiceUtils.rrhs[params.data.rangeRequestHandling];
+            }
+        },
+        {
+            headerName: "Regex Remap Expression",
+            field: "regexRemap",
+            hide: true
+        },
+        {
+            headerName: "Regional Geoblocking",
+            field: "regionalGeoBlocking",
+            hide: true
+        },
+        {
+            headerName: "Raw Remap Text",
+            field: "remapText",
+            hide: true
+        },
+        {
+            headerName: "Routing Name",
+            field: "routingName",
+            hide: true
+        },
+        {
+            headerName: "Service Category",
+            field: "serviceCategory",
+            hide: true
+        },
+        {
+            headerName: "Signed",
+            field: "signed",
+            hide: true
+        },
+        {
+            headerName: "Signing Algorithm",
+            field: "signingAlgorithm",
+            hide: true
+        },
+        {
+            headerName: "Range Slice Block Size",
+            field: "rangeSliceBlockSize",
+            hide: true

Review comment:
       same as above RE: filter




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org