Skip to content

Commit 7e2cbfb

Browse files
mo-esmpmo-esmp
committed
Add paging to log table.
1 parent a55333c commit 7e2cbfb

File tree

5 files changed

+132
-78
lines changed

5 files changed

+132
-78
lines changed

‎src/Serilog.Ui.Web/Controllers/LogsController.cs‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,21 @@ public LogsController(IDataProvider dataProvider)
1818
_dataProvider = dataProvider;
1919
}
2020

21-
public async Task<IActionResult> Index(int page = 1, int count = 20)
21+
public async Task<IActionResult> Index(int page = 1, int count = 10)
2222
{
23+
if (page < 1)
24+
page = 1;
25+
26+
if (count > 100)
27+
count = 100;
28+
2329
var (logs, logCount) = await _dataProvider.FetchDataAsync(page, count);
2430
var viewModel = new LogViewModel
2531
{
2632
LogCount = logCount,
27-
Logs = logs
33+
Logs = logs,
34+
Page = page,
35+
Count = count
2836
};
2937

3038
GetResources();

‎src/Serilog.Ui.Web/ViewModel/LogViewModel.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ public class LogViewModel
88
public int LogCount { get; set; }
99

1010
public IEnumerable<LogModel> Logs { get; set; }
11+
12+
public int Page { get; set; }
13+
14+
public int Count { get; set; }
1115
}
1216
}

‎src/Serilog.Ui.Web/Views/Logs/Index.cshtml‎

Lines changed: 57 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,62 @@
1-
@using Microsoft.AspNetCore.Http
2-
@model LogViewModel
1+
@model LogViewModel
32
@{
43
ViewData["Title"] = "Log List";
54
Layout = "~/Views/Shared/_LogLayout.cshtml";
65
var levelClass = string.Empty;
7-
var totalPages = Model.LogCount / 20;
86
}
97
<h1>Log List</h1>
10-
11-
<div class="row">
12-
<div class="col-sm-12 col-md-6">
13-
<div class="table-select">
14-
<label>
15-
Show
16-
<select name="dtBasicExample_length" class="custom-select custom-select-sm form-control form-control-sm">
17-
<option value="10">10</option>
18-
<option value="25">25</option>
19-
<option value="50">50</option>
20-
<option value="100">100</option>
21-
</select> entries
22-
</label>
8+
<form method="get" asp-action="Index">
9+
<div class="row">
10+
<div class="col-sm-12 col-md-6">
11+
<div class="table-select">
12+
<label>
13+
Show
14+
<select name="count" class="form-control form-control-sm">
15+
<option value="10">10</option>
16+
<option value="25">25</option>
17+
<option value="50">50</option>
18+
<option value="100">100</option>
19+
</select>
20+
entries
21+
</label>
22+
</div>
2323
</div>
24-
</div>
25-
<div class="col-sm-12 col-md-6">
26-
<div class="table-filter">
27-
<label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="dtBasicExample"></label>
24+
<div class="col-sm-12 col-md-6">
25+
<div class="table-filter">
26+
<label>Search:<input type="search" class="form-control form-control-sm" placeholder=""></label>
27+
</div>
2828
</div>
2929
</div>
30-
</div>
3130

32-
<table class="table" id="log-table">
33-
<thead class="thead-dark">
34-
<tr>
35-
<th scope="col">#</th>
36-
<th scope="col">Level</th>
37-
<th scope="col" style="width: 100px">Date</th>
38-
<th scope="col">Message</th>
39-
<th scope="col">Exception</th>
40-
<th scope="col">Properties</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
@foreach (var log in Model.Logs)
45-
{
31+
<table class="table" id="log-table">
32+
<thead class="thead-dark">
33+
<tr>
34+
<th scope="col">#</th>
35+
<th scope="col">Level</th>
36+
<th scope="col" style="width: 100px">Date</th>
37+
<th scope="col">Message</th>
38+
<th scope="col">Exception</th>
39+
<th scope="col">Properties</th>
40+
</tr>
41+
</thead>
42+
<tbody>
43+
@foreach (var log in Model.Logs)
44+
{
4645
switch (log.Level)
4746
{
48-
case "Verbose":
49-
case "Debug":
50-
levelClass = "bg-success";
51-
break;
52-
case "Information":
53-
levelClass = "bg-primary";
54-
break;
55-
case "Warning":
56-
levelClass = "bg-warning";
57-
break;
58-
case "Error":
59-
levelClass = "bg-danger";
60-
break;
47+
case "Verbose":
48+
case "Debug":
49+
levelClass = "bg-success";
50+
break;
51+
case "Information":
52+
levelClass = "bg-primary";
53+
break;
54+
case "Warning":
55+
levelClass = "bg-warning";
56+
break;
57+
case "Error":
58+
levelClass = "bg-danger";
59+
break;
6160
}
6261

6362
<tr>
@@ -70,33 +69,15 @@
7069
<td class="text-center">@log.Exception</td>
7170
<td class="text-center"><a href="#" title="Click to view">View</a></td>
7271
</tr>
73-
}
74-
</tbody>
75-
</table>
76-
<div class="row">
77-
<div class="col-sm-12 col-md-5">
78-
<div class="table-paging-info">Showing 41 to 50 of @Model.LogCount entries</div>
79-
</div>
80-
<div class="col-sm-12 col-md-7">
81-
<div class="table-pagination">
82-
<ul class="pagination">
83-
<li class="paginate_button page-item previous" id="dtBasicExample_previous">
84-
<a href="#" aria-controls="dtBasicExample" data-dt-idx="0" tabindex="0" class="page-link">Previous</a>
85-
</li>
86-
<li class="paginate_button page-item ">
87-
<a href="#" aria-controls="dtBasicExample" data-dt-idx="1" tabindex="0" class="page-link">1</a>
88-
</li>
89-
<li class="paginate_button page-item ">
90-
<a href="#" aria-controls="dtBasicExample" data-dt-idx="2" tabindex="0" class="page-link">2</a>
91-
</li>
92-
<li class="paginate_button page-item ">
93-
<a href="#" aria-controls="dtBasicExample" data-dt-idx="3" tabindex="0" class="page-link">3</a>
94-
</li>
95-
<li class="paginate_button page-item "><a href="#" aria-controls="dtBasicExample" data-dt-idx="4" tabindex="0" class="page-link">4</a></li>
96-
<li class="paginate_button page-item active"><a href="#" aria-controls="dtBasicExample" data-dt-idx="5" tabindex="0" class="page-link">5</a></li>
97-
<li class="paginate_button page-item "><a href="#" aria-controls="dtBasicExample" data-dt-idx="6" tabindex="0" class="page-link">6</a></li>
98-
<li class="paginate_button page-item next" id="dtBasicExample_next"><a href="#" aria-controls="dtBasicExample" data-dt-idx="7" tabindex="0" class="page-link">Next</a></li>
99-
</ul>
72+
}
73+
</tbody>
74+
</table>
75+
<div class="row">
76+
<div class="col-sm-12 col-md-5">
77+
<div class="table-paging-info">Showing 41 to 50 of @Model.LogCount entries</div>
78+
</div>
79+
<div class="col-sm-12 col-md-7">
80+
<partial name="_Paging" model="Model" />
10081
</div>
10182
</div>
102-
</div>
83+
</form>

‎src/Serilog.Ui.Web/Views/Logs/_Paging.cshtml‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@model LogViewModel
2+
@{
3+
var totalPages = Model.LogCount / Model.Count;
4+
totalPages += Model.LogCount % Model.Count != 0 ? 1 : 0;
5+
var pageDisplayCount = totalPages;
6+
var hasMore = false;
7+
if (totalPages > 5)
8+
{
9+
pageDisplayCount = 5;
10+
if (totalPages - Model.Page > 2)
11+
{
12+
hasMore = true;
13+
}
14+
15+
}
16+
}
17+
18+
<div class="table-pagination">
19+
<input type="hidden" id="page" name="page" />
20+
<ul class="pagination">
21+
@if (Model.Page != 1)
22+
{
23+
var value = Model.Page - 1;
24+
<li class="page-item previous">
25+
<a href="#" data-val="@value" tabindex="@value" class="page-link">Previous</a>
26+
</li>
27+
}
28+
@for (var i = 1; i <= pageDisplayCount; i++)
29+
{
30+
if (Model.Page == i)
31+
{
32+
<li class="page-item active">
33+
<span class="page-link disabled">
34+
@i
35+
<span class="sr-only">(current)</span>
36+
</span>
37+
</li>
38+
}
39+
else
40+
{
41+
<li>
42+
<a href="#" data-val="@i" tabindex="@i" class="page-link">@i</a>
43+
</li>
44+
}
45+
}
46+
@if (hasMore)
47+
{
48+
var value = Model.Page + 1;
49+
<li class="page-item ">&nbsp;...&nbsp;</li>
50+
<li class="page-item next">
51+
<a href="#" data-val="@value" tabindex="@value" class="page-link">Next</a>
52+
</li>
53+
}
54+
</ul>
55+
</div>

‎src/Serilog.Ui.Web/wwwroot/js/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,10 @@
1212
$('#sidebarCollapse').on('click', function () {
1313
$('#sidebar').toggleClass('active');
1414
});
15+
16+
$('.page-link').on('click', function (e) {
17+
e.preventDefault();
18+
$('#page').val($(this).attr("data-val"));
19+
$('form').submit()
20+
});
1521
})(jQuery);

0 commit comments

Comments
 (0)