Skip to content

Commit 6f1860b

Browse files
CarmishAlbertRossJoh
Carmish
and
AlbertRossJoh
authored
Feature/sort endpoint table (#468)
* added sorting to tables --------- Co-authored-by: AlbertRossJoh <[email protected]>
1 parent 6d08ef5 commit 6f1860b

File tree

3 files changed

+193
-73
lines changed

3 files changed

+193
-73
lines changed

‎flask_monitoringdashboard/frontend/js/controllers/OverviewController.js‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ export function OverviewController($scope, $http, $location, menuService, endpoi
66
$scope.dashboard_version = '';
77
$scope.isHits = true;
88

9+
$scope.sortBy = 'name';
10+
$scope.isDesc = true;
11+
912
$scope.table = [];
1013
$scope.selectedItem = 2;
1114

@@ -28,23 +31,56 @@ export function OverviewController($scope, $http, $location, menuService, endpoi
2831
$scope.table = response.data;
2932
});
3033

31-
function getItemsForPage(pageNumber) {
32-
const start = Number(pageNumber) * $scope.pageSize;
33-
const end = (Number(pageNumber) + 1) * Number($scope.pageSize);
34+
function ascendingOrder(a, b){
35+
if ($scope.sortBy === 'last-accessed') {
36+
return Date.parse(a[$scope.sortBy]) < Date.parse(b[$scope.sortBy]) || a[$scope.sortBy] === null; //null if endpoint was never accessed
37+
}
38+
return a[$scope.sortBy] < b[$scope.sortBy];
39+
}
40+
41+
function descendingOrder(a, b){
42+
return ascendingOrder(b, a);
43+
}
44+
45+
function sortItems(items){
46+
return $scope.isDesc ? items.sort(descendingOrder) : items.sort(ascendingOrder)
47+
}
3448

49+
function getItemsForPage(pageNumber) {
50+
const start = pageNumber * Number($scope.pageSize);
51+
const end = (pageNumber + 1) * Number($scope.pageSize);
52+
3553
let items = $scope.table
36-
.filter(item => item.name.includes($scope.searchQuery))
54+
.filter(item => item.name.includes($scope.searchQuery));
55+
3756
if ($scope.slectedBlueprint) {
38-
items = items.filter(item => item.blueprint===$scope.slectedBlueprint)
57+
items = items.filter(item => item.blueprint===$scope.slectedBlueprint);
3958
}
59+
60+
return sortItems(items).slice(start, end);
61+
}
4062

41-
return items.slice(start, end);
63+
$scope.changeSortingOrder = function (column) {
64+
if (column !== $scope.sortBy){
65+
$scope.isDesc = true;
66+
$scope.sortBy = column;
67+
return;
68+
}
69+
$scope.isDesc = !$scope.isDesc;
4270
}
4371

4472
$scope.getFilteredItems = function () {
4573
return getItemsForPage($scope.currentPage);
4674
}
4775

76+
$scope.getSortArrowClassName = function (column) {
77+
return {
78+
'rotate-up': !$scope.isDesc && $scope.sortBy === column,
79+
'rotate-down': $scope.isDesc && $scope.sortBy === column,
80+
'text-gray': $scope.sortBy !== column
81+
}
82+
}
83+
4884
$scope.canGoBack = function () {
4985
return $scope.currentPage > 0;
5086
}

‎flask_monitoringdashboard/frontend/sass/custom.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -561,4 +561,18 @@ textarea#customReason:focus {
561561
.container {
562562
max-width: 1600px !important;
563563
}
564-
}
564+
}
565+
566+
.rotate-up {
567+
transform: rotate(0deg);
568+
transition: transform 0.3s ease;
569+
}
570+
571+
.rotate-down {
572+
transform: rotate(180deg);
573+
transition: transform 0.3s ease;
574+
}
575+
576+
.text-gray {
577+
color: gray;
578+
}

‎flask_monitoringdashboard/static/pages/overview.html‎

Lines changed: 136 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -18,71 +18,141 @@
1818
<div class="card-header"><h4>Dashboard Overview<h4></div>
1919
<div class="card-body">
2020
<div class="spinner" ng-controller="FormController"
21-
ng-show="table.length === 0">
22-
<div class="rect1"></div>
23-
<div class="rect2"></div>
24-
<div class="rect3"></div>
25-
<div class="rect4"></div>
26-
<div class="rect5"></div>
27-
</div>
28-
29-
<ul class="pagination">
30-
<li class="page-item" ng-class="{'active': isHits}"><a class="page-link"
31-
ng-click="toggleHits()">Number
32-
of hits</a></li>
33-
<li class="page-item" ng-class="{'active': !isHits}"><a class="page-link"
34-
ng-click="toggleHits()">Median
35-
request duration (ms)</a></li>
36-
</ul>
37-
38-
<div class="row" style="margin-bottom: 7px">
39-
<div class="col-md-3 col-sm-12">
40-
Show
41-
<select style="width: 60px; display: inline-block;"
42-
class='form-control form-control-sm' name="ddwa"
43-
ng-model="pageSize">
44-
<option value="10">10</option>
45-
<option value="25">25</option>
46-
<option value="50">50</option>
47-
<option value="100">100</option>
48-
</select>
49-
entries
50-
</div>
51-
52-
<div class="col-md-6 col-sm-12">
53-
Blueprint:
54-
<select style='width: 180px; display: inline-block;' ng-model="slectedBlueprint"
55-
class="form-control form-control-sm">
56-
<option ng-repeat="blueprint in blueprints track by $index"
57-
value="{{ blueprint }}">
58-
{{ blueprint }}
59-
</option>
60-
</select>
61-
</div>
62-
63-
<div class="col-md-3 col-sm-12" style="text-align: right">
64-
Search:
65-
<input ng-model="searchQuery"
66-
style="display: inline-block; width: 180px"
67-
class="form-control form-control-sm">
68-
</div>
69-
</div>
70-
71-
<div class="row">
72-
<div class="col-md-12">
73-
<table class="table table-hover table-bordered table-sm">
74-
<thead>
75-
<tr>
76-
<th></th>
77-
<th>Endpoint</th>
78-
<th ng-show="isHits">Today</th>
79-
<th ng-show="isHits">Last 7 days</th>
80-
<th ng-show="isHits">Overall</th>
81-
<th ng-show="isHits==false">Today</th>
82-
<th ng-show="isHits==false">Last 7 days</th>
83-
<th ng-show="isHits==false">Overall</th>
84-
<th>Last requested</th>
85-
<th>Monitoring-level<sup>*</sup></th>
21+
ng-show="table.length === 0">
22+
<div class="rect1"></div>
23+
<div class="rect2"></div>
24+
<div class="rect3"></div>
25+
<div class="rect4"></div>
26+
<div class="rect5"></div>
27+
</div>
28+
29+
<ul class="pagination">
30+
<li class="page-item" ng-class="{'active': isHits}"><a class="page-link"
31+
ng-click="toggleHits()">Number
32+
of hits</a></li>
33+
<li class="page-item" ng-class="{'active': !isHits}"><a class="page-link"
34+
ng-click="toggleHits()">Median
35+
request duration (ms)</a></li>
36+
</ul>
37+
38+
<div class="row" style="margin-bottom: 7px">
39+
<div class="col-md-3 col-sm-12">
40+
Show
41+
<select style="width: 60px; display: inline-block;"
42+
class='form-control form-control-sm' name="ddwa"
43+
ng-model="pageSize">
44+
<option value="10">10</option>
45+
<option value="25">25</option>
46+
<option value="50">50</option>
47+
<option value="100">100</option>
48+
</select>
49+
entries
50+
</div>
51+
52+
<div class="col-md-6 col-sm-12">
53+
Blueprint:
54+
<select style='width: 180px; display: inline-block;' ng-model="slectedBlueprint"
55+
class="form-control form-control-sm">
56+
<option ng-repeat="blueprint in blueprints track by $index"
57+
value="{{ blueprint }}">
58+
{{ blueprint }}
59+
</option>
60+
</select>
61+
</div>
62+
63+
<div class="col-md-3 col-sm-12" style="text-align: right">
64+
Search:
65+
<input ng-model="searchQuery"
66+
style="display: inline-block; width: 180px"
67+
class="form-control form-control-sm">
68+
</div>
69+
</div>
70+
71+
<div class="row">
72+
<div class="col-md-12">
73+
<table class="table table-hover table-bordered table-sm">
74+
<thead>
75+
<tr>
76+
<th></th>
77+
<th
78+
ng-click="changeSortingOrder('name')"
79+
style="cursor: pointer">
80+
<div class="d-flex justify-content-between">
81+
Endpoint
82+
<span ng-class="getSortArrowClassName('name')">&uarr;</span>
83+
</div>
84+
</th>
85+
<th
86+
ng-show="isHits"
87+
style="cursor: pointer"
88+
ng-click="changeSortingOrder('hits-today')">
89+
<div class="d-flex justify-content-between">
90+
Today
91+
<span ng-class="getSortArrowClassName('hits-today')">&uarr;</span>
92+
</div>
93+
</th>
94+
<th
95+
ng-show="isHits"
96+
style="cursor: pointer"
97+
ng-click="changeSortingOrder('hits-week')">
98+
<div class="d-flex justify-content-between">
99+
Last 7 days
100+
<span ng-class="getSortArrowClassName('hits-week')">&uarr;</span>
101+
</div>
102+
</th>
103+
<th
104+
ng-show="isHits"
105+
style="cursor: pointer"
106+
ng-click="changeSortingOrder('hits-overall')">
107+
<div class="d-flex justify-content-between">
108+
Overall
109+
<span ng-class="getSortArrowClassName('hits-overall')">&uarr;</span>
110+
</div>
111+
</th>
112+
<th
113+
style="cursor: pointer"
114+
ng-click="changeSortingOrder('hits-today')"
115+
ng-show="isHits===false">
116+
<div class="d-flex justify-content-between">
117+
Today
118+
<span ng-class="getSortArrowClassName('hits-today')">&uarr;</span>
119+
</div>
120+
121+
</th>
122+
<th
123+
ng-show="isHits===false"
124+
style="cursor: pointer"
125+
ng-click="changeSortingOrder('hits-week')">
126+
<div class="d-flex justify-content-between">
127+
Last 7 days
128+
<span ng-class="getSortArrowClassName('hits-week')">&uarr;</span>
129+
</div>
130+
</th>
131+
<th
132+
ng-show="isHits===false"
133+
style="cursor: pointer"
134+
ng-click="changeSortingOrder('hits-overall')">
135+
<div class="d-flex justify-content-between">
136+
Overall
137+
<span ng-class="getSortArrowClassName('hits-overall')">&uarr;</span>
138+
</div>
139+
</th>
140+
<th
141+
style="cursor: pointer"
142+
ng-click="changeSortingOrder('last-accessed')">
143+
<div class="d-flex justify-content-between">
144+
Last requested
145+
<span ng-class="getSortArrowClassName('last-accessed')">&uarr;</span>
146+
</div>
147+
</th>
148+
<th
149+
style="cursor: pointer"
150+
ng-click="changeSortingOrder('monitor')">
151+
<div class="d-flex justify-content-between">
152+
<div> Monitoring-level<sup>*</sup></div>
153+
<span ng-class="getSortArrowClassName('monitor')">&uarr;</span>
154+
</div>
155+
</th>
86156
</tr>
87157
</thead>
88158

@@ -172,4 +242,4 @@
172242
per line of code</b> from all requests.</p>
173243
</div>
174244
</div>
175-
</div>
245+
</div>

0 commit comments

Comments
 (0)