This is an automated email from the ASF dual-hosted git repository.
ocket8888 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
The following commit(s) were added to refs/heads/master by this push:
new a9af24a TP: adds ability to perform a quick search, override default
pagination size and clear column filters to servers table (#4891)
a9af24a is described below
commit a9af24ac4ba3555540b4be269ce105fae857a344
Author: Jeremy Mitchell <[email protected]>
AuthorDate: Mon Aug 3 13:30:38 2020 -0600
TP: adds ability to perform a quick search, override default pagination
size and clear column filters to servers table (#4891)
* adds a quick search to the servers table as well as a way to remove
column filters
* adds the ability to define page size
* updates search and page size and binds to default page size of 100
* fixing some css
* moves 'create server' under the more button
* removes refresh button (as that is what the browser is for) and puts the
clear filter item under the More menu.
* saves quick search and page size in localstorage
* removed document.getelementbyid as ng-model is being used already
* updates create server test
* adds changelog entry
* removes buttons from inputs
* converts anchors to buttons
* increases min-width of dropdown menu
* adds accessibility labels to table inputs
* adds a step to the page size number input
* only sets page size from local storage if the value is greater than 0.
otherwise, use default (100)
* adds name attributes to table inputs
* adds a default tooltip to help when column values are truncated in the
view
* adds tooltip to gridOptions.defaultColDef
* fixes styling on search and page size inputs
* gets rid of step
* fixes some styling and adds back label
* minor tweaks
---
CHANGELOG.md | 1 +
.../app/src/common/modules/table/_table.scss | 24 ++++++
.../table/servers/TableServersController.js | 88 ++++++++++++++++------
.../modules/table/servers/table.servers.tpl.html | 61 +++++++++------
traffic_portal/app/src/styles/main.scss | 16 +++-
traffic_portal/test/end_to_end/servers/pageData.js | 1 +
.../test/end_to_end/servers/servers-spec.js | 3 +-
7 files changed, 142 insertions(+), 52 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ad25fe..929c5af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ The format is based on [Keep a
Changelog](http://keepachangelog.com/en/1.0.0/).
- Updated /servers/details to use multiple interfaces in API v3
- Added [Edge Traffic
Routing](https://traffic-control-cdn.readthedocs.io/en/latest/admin/traffic_router.html#edge-traffic-routing)
feature which allows Traffic Router to localize more DNS record types than
just the routing name for DNS delivery services
- Added the ability to speedily build development RPMs from any OS without
needing Docker
+- Added the ability to perform a quick search, override default pagination
size and clear column filters on the Traffic Portal servers table.
- Astats csv support - astats will now respond to `Accept: text/csv` and
return a csv formatted stats list
- Updated /deliveryservices/{{ID}}/servers to use multiple interfaces in API v3
- Updated /deliveryservices/{{ID}}/servers/eligible to use multiple interfaces
in API v3
diff --git a/traffic_portal/app/src/common/modules/table/_table.scss
b/traffic_portal/app/src/common/modules/table/_table.scss
index c73bb1a..d9f4980 100644
--- a/traffic_portal/app/src/common/modules/table/_table.scss
+++ b/traffic_portal/app/src/common/modules/table/_table.scss
@@ -101,7 +101,31 @@ td span {
max-height: 300px;
padding: 10px 20px;
overflow-y: auto;
+
+ .checkbox {
+ position: relative;
+ display: block;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ label {
+ min-height: 20px;
+ padding-left: 20px;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+
+ input[type="checkbox"] {
+ position: absolute;
+ margin-left: -20px;
+ }
+
+ }
+
+ }
+
}
+
table.dataTable.params tbody td {
word-break: break-word;
vertical-align: top;
diff --git
a/traffic_portal/app/src/common/modules/table/servers/TableServersController.js
b/traffic_portal/app/src/common/modules/table/servers/TableServersController.js
index 707d38f..27e3485 100644
---
a/traffic_portal/app/src/common/modules/table/servers/TableServersController.js
+++
b/traffic_portal/app/src/common/modules/table/servers/TableServersController.js
@@ -41,7 +41,7 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
} else {
this.eGui.classList.add("fa-check");
}
- }
+ };
UpdateCellRenderer.prototype.getGui = function() {return this.eGui;};
/**
@@ -52,7 +52,14 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
if (!params.value || !serverUtils.isOffline(params.value)) {
return;
}
- return params.data.offlineReason;
+ return params.value + ': ' + params.data.offlineReason;
+ }
+
+ /**
+ * Gets value to display a default tooltip.
+ */
+ function defaultTooltip(params) {
+ return params.value;
}
/**
@@ -70,22 +77,22 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "Cache Group",
field: "cachegroup",
- hide: false,
+ hide: false
},
{
headerName: "CDN",
field: "cdnName",
- hide: false,
+ hide: false
},
{
headerName: "Domain",
field: "domainName",
- hide: false,
+ hide: false
},
{
headerName: "Host",
field: "hostName",
- hide: false,
+ hide: false
},
{
headerName: "HTTPS Port",
@@ -121,27 +128,27 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "ILO IP Netmask",
field: "iloIpNetmask",
- hide: true,
+ hide: true
},
{
headerName: "ILO Username",
field: "iloUsername",
- hide: true,
+ hide: true
},
{
headerName: "Interface Name",
field: "interfaceName",
- hide: true,
+ hide: true
},
{
headerName: "IPv6 Address",
field: "ip6Address",
- hide: false,
+ hide: false
},
{
headerName: "IPv6 Gateway",
field: "ip6Gateway",
- hide: true,
+ hide: true
},
{
headerName: "Last Updated",
@@ -153,7 +160,7 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "Mgmt IP Address",
field: "mgmtIpAddress",
- hide: true,
+ hide: true
},
{
headerName: "Mgmt IP Gateway",
@@ -196,27 +203,27 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "Network Subnet",
field: "ipNetmask",
- hide: true,
+ hide: true
},
{
headerName: "Offline Reason",
field: "offlineReason",
- hide: true,
+ hide: true
},
{
headerName: "Phys Location",
field: "physLocation",
- hide: true,
+ hide: true
},
{
headerName: "Profile",
field: "profile",
- hide: false,
+ hide: false
},
{
headerName: "Rack",
field: "rack",
- hide: true,
+ hide: true
},
{
headerName: "Reval Pending",
@@ -228,12 +235,12 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "Router Hostname",
field: "routerHostName",
- hide: true,
+ hide: true
},
{
headerName: "Router Port Name",
field: "routerPortName",
- hide: true,
+ hide: true
},
{
headerName: "Status",
@@ -244,12 +251,12 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
{
headerName: "TCP Port",
field: "tcpPort",
- hide: true,
+ hide: true
},
{
headerName: "Type",
field: "type",
- hide: false,
+ hide: false
},
{
headerName: "Update Pending",
@@ -280,6 +287,10 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
id: -1
};
+ $scope.quickSearch = '';
+
+ $scope.pageSize = 100;
+
/** Options, configuration, data and callbacks for the ag-grid table. */
$scope.gridOptions = {
components: {
@@ -295,10 +306,12 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
$scope.$apply();
},
sortable: true,
- resizable: true
+ resizable: true,
+ tooltip: defaultTooltip
},
rowData: servers,
pagination: true,
+ paginationPageSize: $scope.pageSize,
rowBuffer: 0,
onColumnResized: function(params) {
localStorage.setItem("servers_table_columns",
JSON.stringify($scope.gridOptions.columnApi.getColumnState()));
@@ -553,6 +566,20 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
}
};
+ $scope.onQuickSearchChanged = function() {
+ $scope.gridOptions.api.setQuickFilter($scope.quickSearch);
+ localStorage.setItem("servers_quick_search",
$scope.quickSearch);
+ };
+
+ $scope.onPageSizeChanged = function() {
+ const value = Number($scope.pageSize);
+ $scope.gridOptions.api.paginationSetPageSize(value);
+ localStorage.setItem("servers_page_size", value);
+ };
+
+ $scope.clearColFilters = function() {
+ $scope.gridOptions.api.setFilterModel(null);
+ };
/**** Initialization code, including loading user columns from
localstorage ****/
angular.element(document).ready(function () {
@@ -588,6 +615,23 @@ var TableServersController = function(servers, $scope,
$state, $uibModal, $windo
console.error("Failure to load stored sort state:", e);
}
+ try {
+ $scope.quickSearch =
localStorage.getItem("servers_quick_search");
+
$scope.gridOptions.api.setQuickFilter($scope.quickSearch);
+ } catch (e) {
+ console.error("Failure to load stored quick search:",
e);
+ }
+
+ try {
+ const ps = localStorage.getItem("servers_page_size");
+ if (ps && ps > 0) {
+ $scope.pageSize = Number(ps);
+
$scope.gridOptions.api.paginationSetPageSize($scope.pageSize);
+ }
+ } catch (e) {
+ console.error("Failure to load stored page size:", e);
+ }
+
$scope.gridOptions.api.addEventListener("sortChanged",
function() {
localStorage.setItem("servers_table_sort",
JSON.stringify($scope.gridOptions.api.getSortModel()));
});
diff --git
a/traffic_portal/app/src/common/modules/table/servers/table.servers.tpl.html
b/traffic_portal/app/src/common/modules/table/servers/table.servers.tpl.html
index 4d36373..bb7753f 100644
--- a/traffic_portal/app/src/common/modules/table/servers/table.servers.tpl.html
+++ b/traffic_portal/app/src/common/modules/table/servers/table.servers.tpl.html
@@ -23,31 +23,42 @@ under the License.
<li class="active">Servers</li>
</ol>
<div class="pull-right">
- <a class="btn btn-primary" name="createServersButton"
title="Create Server" href="#!/servers/new"><i class="fa fa-plus"></i></a>
- <button class="btn btn-default" title="Refresh"
ng-click="refresh()"><i class="fa fa-refresh"></i></button>
- <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">
- <i class="fa fa-columns"></i>
- <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
gridOptions.columnApi.getAllColumns() | orderBy:'colDef.headerName'">
- <div class="checkbox">
- <label><input type="checkbox"
ng-checked="c.isVisible()"
ng-click="toggleVisibility(c.colId)">{{::c.colDef.headerName}}</label>
- </div>
- </li>
- </menu>
- </div>
- <div class="btn-group" role="group" uib-dropdown
is-open="more.isopen">
- <button type="button" class="btn btn-default dropdown-toggle"
uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
- More
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu-right dropdown-menu"
uib-dropdown-menu>
- <li role="menuitem"><a
ng-click="confirmCDNQueueServerUpdates(null)">Queue CDN Server Updates</a></li>
- <li role="menuitem"><a
ng-click="confirmCDNClearServerUpdates(null)">Clear CDN Server Updates</a></li>
- <li role="menuitem"><button class="menu-item-button"
type="button" ng-click="exportCSV()">Export CSV</button></li>
- </ul>
+ <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"/>
+ </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">
+ <i class="fa fa-columns"></i>
+ <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
gridOptions.columnApi.getAllColumns() | orderBy:'colDef.headerName'">
+ <div class="checkbox">
+ <label><input type="checkbox"
ng-checked="c.isVisible()"
ng-click="toggleVisibility(c.colId)">{{::c.colDef.headerName}}</label>
+ </div>
+ </li>
+ </menu>
+ </div>
+ <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">
+ More
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu-right dropdown-menu"
uib-dropdown-menu>
+ <li role="menuitem"><a name="createServerMenuItem"
href="#!/servers/new">Create New Server</a></li>
+ <li class="divider"></li>
+ <li role="menuitem"><button class="menu-item-button"
type="button" ng-click="confirmCDNQueueServerUpdates(null)">Queue Server
Updates</button></li>
+ <li role="menuitem"><button class="menu-item-button"
type="button" ng-click="confirmCDNClearServerUpdates(null)">Clear Server
Updates</button></li>
+ <li class="divider"></li>
+ <li role="menuitem"><button class="menu-item-button"
type="button" ng-click="clearColFilters()">Clear Column Filters</button></li>
+ <li role="menuitem"><button class="menu-item-button"
type="button" ng-click="exportCSV()">Export CSV</button></li>
+ </ul>
+ </div>
</div>
</div>
<div class="clearfix"></div>
diff --git a/traffic_portal/app/src/styles/main.scss
b/traffic_portal/app/src/styles/main.scss
index c4d678b..6f10a5f 100644
--- a/traffic_portal/app/src/styles/main.scss
+++ b/traffic_portal/app/src/styles/main.scss
@@ -92,6 +92,7 @@ body.nav-sm .container.body .main-content {
}
.dropdown-menu-right {
+ min-width: 200px;
left: auto !important; // Reset the default from `.dropdown-menu`
right: 0 !important;
}
@@ -121,12 +122,19 @@ body.nav-sm .container.body .main-content {
font-size: 24px;
}
- button {
- margin: 8px 6px 4px 0;
+ .input-group-addon > label {
+ color: gray;
+ font-weight: normal;
+ margin-bottom: 0;
}
- .btn-group {
- margin-top: -4px;
+ .text-input {
+ margin: 5px 6px 4px 0;
+
+ #pageSize {
+ width: 85px;
+ }
+
}
}
diff --git a/traffic_portal/test/end_to_end/servers/pageData.js
b/traffic_portal/test/end_to_end/servers/pageData.js
index 8276e5b..8a4d045 100644
--- a/traffic_portal/test/end_to_end/servers/pageData.js
+++ b/traffic_portal/test/end_to_end/servers/pageData.js
@@ -19,6 +19,7 @@
module.exports = function(){
this.moreBtn=element(by.name('moreBtn'));
+ this.createServerMenuItem=element(by.name('createServerMenuItem'));
this.viewCapabilitiesMenuItem=element(by.css('a[ng-click*=viewCapabilities]'));
this.addCapabilityBtn=element(by.name('addCapabilityBtn'));
this.selectFormDropdown=element(by.name('selectFormDropdown'));
diff --git a/traffic_portal/test/end_to_end/servers/servers-spec.js
b/traffic_portal/test/end_to_end/servers/servers-spec.js
index fca5bca..218d4bb 100644
--- a/traffic_portal/test/end_to_end/servers/servers-spec.js
+++ b/traffic_portal/test/end_to_end/servers/servers-spec.js
@@ -41,7 +41,8 @@ describe('Traffic Portal Servers Test Suite', function() {
it('should open new Servers form page', function() {
console.log('Clicking on Create new server ' +
mockVals.hostName);
-
browser.driver.findElement(by.name('createServersButton')).click();
+ pageData.moreBtn.click();
+ pageData.createServerMenuItem.click();
expect(browser.getCurrentUrl().then(commonFunctions.urlPath)).toEqual(commonFunctions.urlPath(browser.baseUrl)+"#!/servers/new");
});
