Skip to content
This repository was archived by the owner on Apr 16, 2024. It is now read-only.

Commit 0c1e5a1

Browse files
MulkaveMulkave
committed
implement logs UI view
1 parent 97cb181 commit 0c1e5a1

File tree

7 files changed

+185
-6
lines changed

7 files changed

+185
-6
lines changed

‎composer.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"require": {
2020
"symfony/console": "^2.7|^3.1",
2121
"symfony/process": "^2.7|^3.1",
22-
"symfony/finder": "^2.7|^3.1"
22+
"symfony/finder": "^2.7|^3.1",
23+
"stevebauman/log-reader": "^1.1"
2324
}
2425
}

‎resources/assets/css/stylesheet.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#lucid-add-button {
22
position: absolute;
3-
right: 3%;
3+
right: 2%;
44
bottom: 15%;
55
z-index: 6;
66
}
@@ -24,6 +24,11 @@
2424
min-width: 210px;
2525
}
2626

27+
.lucid-logs-stack {
28+
text-align: left !important;
29+
max-width: 100px;
30+
}
31+
2732
/* invert the colours */
2833
.invert {
2934
-webkit-filter: invert(100%);
@@ -34,6 +39,18 @@
3439
text-align: center;
3540
}
3641

42+
.text-colour-error {
43+
color: red;
44+
}
45+
46+
.text-colour-info {
47+
color: lightblue;
48+
}
49+
50+
.text-colour-warning {
51+
color: orange;
52+
}
53+
3754
.lucid-progress-indicator {
3855
position: absolute;
3956
z-index: 6;

‎resources/assets/js/logs.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
new Vue({
2+
el: '#console',
3+
4+
data: {
5+
page: 1,
6+
level: 'all',
7+
levelIcon: 'filter_list',
8+
logs: []
9+
},
10+
11+
methods: {
12+
loadLogs: function(level) {
13+
var query = '';
14+
if (level && level !== 'all') {
15+
query = '&level='+level;
16+
this.level = level;
17+
this.levelIcon = level;
18+
} else {
19+
this.level = 'all';
20+
this.levelIcon = 'filter_list';
21+
}
22+
23+
Vue.http.get('logs?page='+this.page+query).then(
24+
// success
25+
function(response) {
26+
console.log('logs', response.json());
27+
// this.$set('logs', response.json().data);
28+
this.logs = response.json().data;
29+
}.bind(this),
30+
// error
31+
function (response) {
32+
console.error(response.status());
33+
}
34+
);
35+
},
36+
37+
chooseFilterLevel: function(level) {
38+
this.loadLogs(level);
39+
},
40+
41+
markRead: function(entry, key) {
42+
Vue.http.put('logs/'+entry.id+'/read').then(
43+
// success
44+
function(response) {
45+
console.log(response);
46+
// delete from list
47+
Vue.delete(this.logs, key);
48+
}.bind(this),
49+
// error
50+
function (response) {
51+
console.error(response.status);
52+
}
53+
);
54+
},
55+
56+
toggleStack: function(key) {
57+
// this.logs[key].showStack = !this.logs[key].showStack;
58+
Vue.set(this.logs[key], 'showStack', !this.logs[key].showStack);
59+
}
60+
},
61+
62+
filters: {
63+
header: function(string) {
64+
return string.substr(string.indexOf(': ', string) + 2, string.length);
65+
},
66+
67+
truncate: function(string, value) {
68+
if (string.length <= value) {
69+
return string;
70+
}
71+
72+
return string.substring(0, value) + '...';
73+
}
74+
},
75+
76+
ready: function() {
77+
console.log('logs ready');
78+
this.loadLogs();
79+
},
80+
});

‎resources/views/components/footer.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77

88
<div class="mdl-mini-footer__right-section">
9-
<div class="mdl-logo"><img class="invert" src="/vendor/lucid/images/lucid-icon.png" width=30></div>
9+
<div class="mdl-logo"><img class="invert" src="/vendor/lucid/images/lucid-icon.png" width="35"></div>
1010
<ul class="mdl-mini-footer__link-list">
1111
<li><a href="#">About</a></li>
1212
<li><a href="#">License</a></li>

‎resources/views/logs.blade.php

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,73 @@
44

55
<div class="page-content">
66
<div class="mdl-grid">
7-
<div class="dl-cell mdl-cell--12-col text-center">
8-
Logs will show up here
7+
<div class="mdl-layout-spacer"></div>
8+
<div class="dl-cell mdl-cell--11-col">
9+
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width" style="word-wrap: break-word; max-width: 200px;">
10+
<thead>
11+
<tr>
12+
<th class="mdl-data-table__cell--non-numeric">Level</th>
13+
<th colspan=2 class="mdl-data-table__cell--non-numeric full-width">
14+
<button id="lucid-logs-filter" class="mdl-button mdl-js-button mdl-button--icon">
15+
<i class="material-icons">@{{levelIcon}}</i>
16+
</button>
17+
18+
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
19+
for="lucid-logs-filter">
20+
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider" @click="chooseFilterLevel('all')">All</li>
21+
<li class="mdl-menu__item" @click="chooseFilterLevel('error')">Errors</li>
22+
<li class="mdl-menu__item" @click="chooseFilterLevel('warning')">Warnings</li>
23+
<li class="mdl-menu__item" @click="chooseFilterLevel('info')">Info</li>
24+
</ul>
25+
26+
</th>
27+
</tr>
28+
</thead>
29+
<thead>
30+
<tr>
31+
<th class="mdl-data-table__cell--non-numeric">Type</th>
32+
<th class="mdl-data-table__cell--non-numeric">Error</th>
33+
<th class="mdl-data-table__cell--non-numeric">Time</th>
34+
<th class="mdl-data-table__cell--non-numeric">Stack</th>
35+
<th class="mdl-data-table__cell--non-numeric">Read</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
<template v-for="(key, entry) in logs">
40+
<tr>
41+
<td class="mdl-data-table__cell--non-numeric">
42+
<i :class="['material-icons', 'text-colour-'+entry.level]">@{{entry.level}}</i>
43+
</td>
44+
<td class="mdl-data-table__cell--non-numeric lucid-log-slack">
45+
<b>@{{entry.header | header | trim | truncate 155}}</b>
46+
</td>
47+
<td class="mdl-data-table__cell--non-numeric">@{{entry.date}}</td>
48+
<td class="mdl-data-table__cell--non-numeric">
49+
<a href="#" @click="toggleStack(key)"><i class="material-icons">list</i></a>
50+
</td>
51+
<td class="mdl-data-table__cell--non-numeric">
52+
<a href="#" @click="markRead(entry, key)"><i class="material-icons">check_circle</i></a>
53+
</td>
54+
</tr>
55+
<tr v-if="entry.showStack">
56+
<td colspan="5" class="lucid-logs-stack">
57+
<pre>@{{entry.header}}</pre>
58+
<hr>
59+
<pre>@{{entry.stack}}</pre>
60+
</td>
61+
</tr>
62+
</template>
63+
</tbody>
64+
</table>
965
</div>
66+
<div class="mdl-layout-spacer"></div>
67+
<div class="mdl-layout-spacer"></div>
68+
<div class="mdl-layout-spacer"></div>
69+
<div class="mdl-layout-spacer"></div>
1070
</div>
1171
</div>
1272
@stop
73+
74+
@section('scripts')
75+
<script type="text/javascript" src="/vendor/lucid/js/logs.js"></script>
76+
@stop

‎src/Http/routes.php

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,22 @@
7474

7575
return app(Lucid\Console\Generators\FeatureGenerator::class)->generate($title, $service, $jobs)->toArray();
7676
});
77+
78+
Route::get('/logs', function() {
79+
$reader = app(Stevebauman\LogReader\LogReader::class);
80+
81+
if (request()->has('level')) {
82+
$reader->level(request()->input('level'));
83+
}
84+
85+
return $reader->orderBy('date')
86+
->paginate(25);
87+
});
88+
89+
Route::put('/logs/{id}/read', function($id) {
90+
app(Stevebauman\LogReader\LogReader::class)->find($id)->markRead();
91+
});
92+
7793
});
7894

7995
class Controller

‎src/LucidServiceProvider.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
namespace Lucid\Console;
1313

1414
use Illuminate\Support\ServiceProvider;
15+
use Stevebauman\LogReader\LogReaderServiceProvider;
1516

1617
/**
1718
* @author Abed Halawi <[email protected]>
@@ -43,6 +44,6 @@ public function boot()
4344
*/
4445
public function register()
4546
{
46-
47+
$this->app->register(LogReaderServiceProvider::class);
4748
}
4849
}

0 commit comments

Comments
 (0)