Fixing details
This commit is contained in:
parent
387d910e44
commit
bbc1afbddc
5 changed files with 126 additions and 151 deletions
|
|
@ -70,105 +70,74 @@ class ApiController extends Controller
|
|||
return response()->json($tasks);
|
||||
}
|
||||
|
||||
|
||||
public function getTaskGraph(Request $request, $id) {
|
||||
$days = ($request->input('days', 15) - 1);
|
||||
|
||||
// First, we get the first date of the stats
|
||||
// In this case, one month ago
|
||||
$date = $last_days = Carbon::now()->subDays($days);
|
||||
|
||||
// Then we get all history for the past month
|
||||
$results = TaskHistory::orderBy('created_at', 'asc')
|
||||
->where('created_at', '>', $last_days->toDateString())
|
||||
->where('task_id', '=', $id)
|
||||
->selectRaw('date(created_at) as date, status')
|
||||
->get()
|
||||
;
|
||||
|
||||
// Then we start building an array for the entire month
|
||||
$stats = [];
|
||||
do {
|
||||
$stats[$date->toDateString()] = [
|
||||
'up' => 0,
|
||||
'down' => 0
|
||||
];
|
||||
$date = $date->addDay();
|
||||
}
|
||||
while ($date->lt(Carbon::now()));
|
||||
|
||||
// Finally we populate the data
|
||||
if (! is_null($results)) {
|
||||
foreach ($results as $r) {
|
||||
if (empty($stats[$r->date])) {
|
||||
$stats[$r->date] = [
|
||||
'up' => 0,
|
||||
'down' => 0
|
||||
];
|
||||
}
|
||||
|
||||
if ($r->status == 1) {
|
||||
++$stats[$r->date]['up'];
|
||||
}
|
||||
else {
|
||||
++$stats[$r->date]['down'];
|
||||
}
|
||||
}
|
||||
}
|
||||
return response()->json($stats);
|
||||
}
|
||||
|
||||
|
||||
public function getTaskDetails(Request $request, $id) {
|
||||
$days = ($request->input('days', 15) - 1);
|
||||
|
||||
$task = Task::with(['group', 'history'])
|
||||
$task = Task::with(['group'])
|
||||
->find($id)
|
||||
;
|
||||
|
||||
if (! is_null($task)) {
|
||||
|
||||
$results = $task
|
||||
// First, we get the first date of the stats
|
||||
// In this case, one month ago
|
||||
$date = $last_days = Carbon::now()->subDays($days);
|
||||
// Then we get all history for the past month
|
||||
$history = $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')
|
||||
->orderBy('created_at', 'asc')
|
||||
->where('created_at', '>', $last_days->toDateString())
|
||||
->selectRaw('date(created_at) as date, status')
|
||||
->get()
|
||||
;
|
||||
|
||||
if (! is_null($results)) {
|
||||
$prev = null;
|
||||
$history = $averages = [];
|
||||
// Then we start building an array for the entire month
|
||||
$stats = [];
|
||||
do {
|
||||
$stats[$date->toDateString()] = [
|
||||
'up' => 0,
|
||||
'down' => 0
|
||||
];
|
||||
$date = $date->addDay();
|
||||
}
|
||||
while ($date->lt(Carbon::now()));
|
||||
|
||||
foreach ($results as $h) {
|
||||
if ($h->status != $prev) {
|
||||
array_push($history, $h);
|
||||
}
|
||||
$prev = $h->status;
|
||||
|
||||
if (empty($averages[$h->date])) {
|
||||
$averages[$h->date] = [
|
||||
'sum' => 0,
|
||||
'count' => 0
|
||||
// Then we populate the stats data
|
||||
if (! is_null($history)) {
|
||||
foreach ($history as $r) {
|
||||
if (empty($stats[$r->date])) {
|
||||
$stats[$r->date] = [
|
||||
'up' => 0,
|
||||
'down' => 0
|
||||
];
|
||||
}
|
||||
if ($h->status == 1) {
|
||||
$averages[$h->date]['sum'] ++;
|
||||
|
||||
if ($r->status == 1) {
|
||||
++$stats[$r->date]['up'];
|
||||
}
|
||||
else {
|
||||
++$stats[$r->date]['down'];
|
||||
}
|
||||
$averages[$h->date]['count'] ++;
|
||||
}
|
||||
}
|
||||
|
||||
return response()->json(array_merge($task->toArray(), [
|
||||
$task,
|
||||
'id' => $task->id,
|
||||
'host' => $task->host,
|
||||
'status' => $task->status,
|
||||
'type' => $task->type,
|
||||
'history' => $history,
|
||||
'averages' => $averages,
|
||||
'group' => $task->group
|
||||
]));
|
||||
// Then we populate the history data
|
||||
if (! is_null($history)) {
|
||||
$prev = null;
|
||||
|
||||
foreach ($history as $k => $h) {
|
||||
// We only take tasks when status has changed between them
|
||||
if ($h->status == $prev) {
|
||||
unset($history[$k]);
|
||||
}
|
||||
$prev = $h->status;
|
||||
}
|
||||
}
|
||||
|
||||
return response()->json([
|
||||
'task' => $task,
|
||||
'stats' => $stats,
|
||||
'history' => $history
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -19,7 +19,8 @@
|
|||
},
|
||||
data: function() {
|
||||
return {
|
||||
refreshed_time: null
|
||||
refreshed_time: null,
|
||||
refresh: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container"
|
||||
v-if="task"
|
||||
v-if="task.id != null"
|
||||
>
|
||||
<h1>
|
||||
Task #{{ task.id }}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
Show:
|
||||
<select
|
||||
v-model="chart.days"
|
||||
@change="refreshGraph"
|
||||
@change="refreshTask"
|
||||
>
|
||||
<option value="7">7 days</option>
|
||||
<option value="15">15 days</option>
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="task.history.length > 0" class="round">
|
||||
<div class="round">
|
||||
<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>
|
||||
<table id="tasks_tbl">
|
||||
<thead>
|
||||
|
|
@ -39,28 +39,28 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="history in task.history"
|
||||
v-for="h in history"
|
||||
v-bind:key="history.id"
|
||||
>
|
||||
<td>{{ moment(history.date).format('YYYY-MM-DD') }}</td>
|
||||
<td>{{ moment(history.created_at).format('HH:mm:ss') }}</td>
|
||||
<td>{{ moment(h.created_at).format('YYYY-MM-DD') }}</td>
|
||||
<td>{{ moment(h.created_at).format('HH:mm:ss') }}</td>
|
||||
<td>
|
||||
<span v-if="history.output">
|
||||
{{ history.output }}
|
||||
<span v-if="h.output">
|
||||
{{ h.output }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<i>No output</i>
|
||||
</span>
|
||||
</td>
|
||||
<td :class="statusText(history.status)">
|
||||
<img :src="'/img/'+statusText(history.status)+'.svg'" width="16" alt="Status" />
|
||||
<td :class="statusText(h.status)">
|
||||
<img :src="'/img/'+statusText(h.status)+'.svg'" width="16" alt="Status" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p v-else><center>No history to display here</center></p>
|
||||
</div>
|
||||
<p v-else>No history to display here</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -70,7 +70,11 @@
|
|||
export default{
|
||||
data: function() {
|
||||
return {
|
||||
task: null,
|
||||
task: {
|
||||
id: null
|
||||
},
|
||||
history: null,
|
||||
refresh: null,
|
||||
|
||||
chart: {
|
||||
render: false,
|
||||
|
|
@ -121,66 +125,68 @@
|
|||
return 'unknown';
|
||||
}
|
||||
},
|
||||
refreshGraph: function() {
|
||||
this.$http.post('/api/getTaskGraph/'+this.task.id, {
|
||||
refreshTask: function() {
|
||||
this.$http.post('/api/getTask/'+this.task.id, {
|
||||
days: this.chart.days
|
||||
})
|
||||
.then(response => {
|
||||
let xaxis = [];
|
||||
let new_data_a = [];
|
||||
let new_data_b = [];
|
||||
console.log(response.data)
|
||||
|
||||
for (let date in response.data) {
|
||||
xaxis.push(date)
|
||||
new_data_a.push(response.data[date]['up'])
|
||||
new_data_b.push(response.data[date]['down'])
|
||||
}
|
||||
|
||||
this.chartOptions = {
|
||||
xaxis: {
|
||||
categories: xaxis,
|
||||
labels: {
|
||||
show: true,
|
||||
rotate: -45,
|
||||
rotateAlways: true,
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 300,
|
||||
stacked: true,
|
||||
stackType: '100%'
|
||||
},
|
||||
}
|
||||
this.series = [{
|
||||
name: 'UP',
|
||||
data: new_data_a,
|
||||
color: '#00955c'
|
||||
},
|
||||
{
|
||||
name: 'DOWN',
|
||||
data: new_data_b,
|
||||
color: '#ef3232'
|
||||
}]
|
||||
|
||||
this.chart.render = true
|
||||
this.task = response.data.task
|
||||
this.history = response.data.history
|
||||
this.refreshGraph(response.data.stats)
|
||||
})
|
||||
}
|
||||
},
|
||||
refreshGraph: function(stats) {
|
||||
let xaxis = [];
|
||||
let new_data_a = [];
|
||||
let new_data_b = [];
|
||||
|
||||
for (let date in stats) {
|
||||
xaxis.push(date)
|
||||
new_data_a.push(stats[date]['up'])
|
||||
new_data_b.push(stats[date]['down'])
|
||||
}
|
||||
|
||||
this.chartOptions = {
|
||||
xaxis: {
|
||||
categories: xaxis,
|
||||
labels: {
|
||||
show: true,
|
||||
rotate: -45,
|
||||
rotateAlways: true,
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 300,
|
||||
stacked: true,
|
||||
stackType: '100%'
|
||||
},
|
||||
}
|
||||
this.series = [{
|
||||
name: 'UP',
|
||||
data: new_data_a,
|
||||
color: '#00955c'
|
||||
},
|
||||
{
|
||||
name: 'DOWN',
|
||||
data: new_data_b,
|
||||
color: '#ef3232'
|
||||
}]
|
||||
|
||||
this.chart.render = true
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
let task_id = this.$route.params.id ?? null
|
||||
this.task.id = this.$route.params.id ?? null
|
||||
|
||||
if (task_id != null) {
|
||||
this.$http.post('/api/getTask/'+task_id, {
|
||||
days: this.chart.days
|
||||
})
|
||||
.then(response => this.task = response.data)
|
||||
.then(() => {
|
||||
this.refreshGraph()
|
||||
})
|
||||
if (this.task.id != null) {
|
||||
this.refreshTask()
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeRouteLeave(to, from, next) {
|
||||
clearTimeout(this.refresh);
|
||||
next();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
$router->group(['prefix' => 'api/'], function () use ($router) {
|
||||
$router->get('getTasks/', ['uses' => 'ApiController@getTasks']);
|
||||
$router->post('getTask/{id}', ['uses' => 'ApiController@getTaskDetails']);
|
||||
$router->post('getTaskGraph/{id}', ['uses' => 'ApiController@getTaskGraph']);
|
||||
$router->patch('toggleTaskStatus/{id}', ['uses' => 'ApiController@toggleTaskStatus']);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue