webinno/monitolite
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixing details

Browse source
This commit is contained in:
Axel 2021-12-23 17:46:02 +01:00
parent 387d910e44
commit bbc1afbddc
5 changed files with 126 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
app/Http/Controllers/ApiController.php
View file

@ -70,18 +70,22 @@ class ApiController extends Controller
return response()->json($tasks); return response()->json($tasks);
} }
public function getTaskDetails(Request $request, $id) {
public function getTaskGraph(Request $request, $id) {
$days = ($request->input('days', 15) - 1); $days = ($request->input('days', 15) - 1);
$task = Task::with(['group'])
->find($id)
;
if (! is_null($task)) {
// First, we get the first date of the stats // First, we get the first date of the stats
// In this case, one month ago // In this case, one month ago
$date = $last_days = Carbon::now()->subDays($days); $date = $last_days = Carbon::now()->subDays($days);
// Then we get all history for the past month // Then we get all history for the past month
$results = TaskHistory::orderBy('created_at', 'asc') $history = $task
->history()
->orderBy('created_at', 'asc')
->where('created_at', '>', $last_days->toDateString()) ->where('created_at', '>', $last_days->toDateString())
->where('task_id', '=', $id)
->selectRaw('date(created_at) as date, status') ->selectRaw('date(created_at) as date, status')
->get() ->get()
; ;
@ -97,9 +101,9 @@ class ApiController extends Controller
} }
while ($date->lt(Carbon::now())); while ($date->lt(Carbon::now()));
// Finally we populate the data // Then we populate the stats data
if (! is_null($results)) { if (! is_null($history)) {
foreach ($results as $r) { foreach ($history as $r) {
if (empty($stats[$r->date])) { if (empty($stats[$r->date])) {
$stats[$r->date] = [ $stats[$r->date] = [
'up' => 0, 'up' => 0,
@ -115,60 +119,25 @@ class ApiController extends Controller
} }
} }
} }
return response()->json($stats);
}
// Then we populate the history data
public function getTaskDetails(Request $request, $id) { if (! is_null($history)) {
$days = ($request->input('days', 15) - 1);
$task = Task::with(['group', 'history'])
->find($id)
;
if (! is_null($task)) {
$results = $task
->history()
->orderBy('created_at', 'desc')
->where('created_at', '>', \Carbon\Carbon::now()->subDay($days)->toDateString())
->selectRaw('date(created_at) as `date`, created_at, status, output')
->get()
;
if (! is_null($results)) {
$prev = null; $prev = null;
$history = $averages = [];
foreach ($results as $h) { foreach ($history as $k => $h) {
if ($h->status != $prev) { // We only take tasks when status has changed between them
array_push($history, $h); if ($h->status == $prev) {
unset($history[$k]);
} }
$prev = $h->status; $prev = $h->status;
if (empty($averages[$h->date])) {
$averages[$h->date] = [
'sum' => 0,
'count' => 0
];
}
if ($h->status == 1) {
$averages[$h->date]['sum'] ++;
}
$averages[$h->date]['count'] ++;
} }
} }
return response()->json(array_merge($task->toArray(), [ return response()->json([
$task, 'task' => $task,
'id' => $task->id, 'stats' => $stats,
'host' => $task->host, 'history' => $history
'status' => $task->status, ]);
'type' => $task->type,
'history' => $history,
'averages' => $averages,
'group' => $task->group
]));
} }
} }

6
public/js/app.js
View file

File diff suppressed because one or more lines are too long

3
resources/views/app.vue
View file

@ -19,7 +19,8 @@
}, },
data: function() { data: function() {
return { return {
refreshed_time: null refreshed_time: null,
refresh: null
} }
}, },
computed: { computed: {

68
resources/views/taskdetails.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="container" <div class="container"
v-if="task" v-if="task.id != null"
> >
<h1> <h1>
Task #{{ task.id }} Task #{{ task.id }}
@ -11,7 +11,7 @@
Show: Show:
<select <select
v-model="chart.days" v-model="chart.days"
@change="refreshGraph" @change="refreshTask"
> >
<option value="7">7 days</option> <option value="7">7 days</option>
<option value="15">15 days</option> <option value="15">15 days</option>
@ -24,9 +24,9 @@
</div> </div>
</div> </div>
<div v-if="task.history.length > 0" class="round"> <div class="round">
<h3>Last {{ chart.days }} days history log</h3> <h3>Last {{ chart.days }} days history log</h3>
<div class="block-content"> <div class="block-content" v-if="history">
<p><i>Showing only records where status has changed</i></p> <p><i>Showing only records where status has changed</i></p>
<table id="tasks_tbl"> <table id="tasks_tbl">
<thead> <thead>
@ -39,28 +39,28 @@
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="history in task.history" v-for="h in history"
v-bind:key="history.id" v-bind:key="history.id"
> >
<td>{{ moment(history.date).format('YYYY-MM-DD') }}</td> <td>{{ moment(h.created_at).format('YYYY-MM-DD') }}</td>
<td>{{ moment(history.created_at).format('HH:mm:ss') }}</td> <td>{{ moment(h.created_at).format('HH:mm:ss') }}</td>
<td> <td>
<span v-if="history.output"> <span v-if="h.output">
{{ history.output }} {{ h.output }}
</span> </span>
<span v-else> <span v-else>
<i>No output</i> <i>No output</i>
</span> </span>
</td> </td>
<td :class="statusText(history.status)"> <td :class="statusText(h.status)">
<img :src="'/img/'+statusText(history.status)+'.svg'" width="16" alt="Status" /> <img :src="'/img/'+statusText(h.status)+'.svg'" width="16" alt="Status" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<p v-else><center>No history to display here</center></p>
</div> </div>
<p v-else>No history to display here</p>
</div> </div>
</div> </div>
</template> </template>
@ -70,7 +70,11 @@
export default{ export default{
data: function() { data: function() {
return { return {
task: null, task: {
id: null
},
history: null,
refresh: null,
chart: { chart: {
render: false, render: false,
@ -121,20 +125,25 @@
return 'unknown'; return 'unknown';
} }
}, },
refreshGraph: function() { refreshTask: function() {
this.$http.post('/api/getTaskGraph/'+this.task.id, { this.$http.post('/api/getTask/'+this.task.id, {
days: this.chart.days days: this.chart.days
}) })
.then(response => { .then(response => {
this.task = response.data.task
this.history = response.data.history
this.refreshGraph(response.data.stats)
})
},
refreshGraph: function(stats) {
let xaxis = []; let xaxis = [];
let new_data_a = []; let new_data_a = [];
let new_data_b = []; let new_data_b = [];
console.log(response.data)
for (let date in response.data) { for (let date in stats) {
xaxis.push(date) xaxis.push(date)
new_data_a.push(response.data[date]['up']) new_data_a.push(stats[date]['up'])
new_data_b.push(response.data[date]['down']) new_data_b.push(stats[date]['down'])
} }
this.chartOptions = { this.chartOptions = {
@ -165,22 +174,19 @@
}] }]
this.chart.render = true this.chart.render = true
}) },
}
}, },
mounted: function() { mounted: function() {
let task_id = this.$route.params.id ?? null this.task.id = this.$route.params.id ?? null
if (task_id != null) { if (this.task.id != null) {
this.$http.post('/api/getTask/'+task_id, { this.refreshTask()
days: this.chart.days
})
.then(response => this.task = response.data)
.then(() => {
this.refreshGraph()
})
}
} }
},
beforeRouteLeave(to, from, next) {
clearTimeout(this.refresh);
next();
},
} }
</script> </script>

1
routes/web.php
View file

@ -16,7 +16,6 @@
$router->group(['prefix' => 'api/'], function () use ($router) { $router->group(['prefix' => 'api/'], function () use ($router) {
$router->get('getTasks/', ['uses' => 'ApiController@getTasks']); $router->get('getTasks/', ['uses' => 'ApiController@getTasks']);
$router->post('getTask/{id}', ['uses' => 'ApiController@getTaskDetails']); $router->post('getTask/{id}', ['uses' => 'ApiController@getTaskDetails']);
$router->post('getTaskGraph/{id}', ['uses' => 'ApiController@getTaskGraph']);
$router->patch('toggleTaskStatus/{id}', ['uses' => 'ApiController@toggleTaskStatus']); $router->patch('toggleTaskStatus/{id}', ['uses' => 'ApiController@toggleTaskStatus']);
}); });