Fixing details

app/Http/Controllers/ApiController.php

@@ -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)) {
-
+			// First, we get the first date of the stats
-			$results = $task
+			// 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')
+				->orderBy('created_at', 'asc')
-				->where('created_at', '>', \Carbon\Carbon::now()->subDay($days)->toDateString())
+				->where('created_at', '>', $last_days->toDateString())
-				->selectRaw('date(created_at) as `date`, created_at, status, output')
+				->selectRaw('date(created_at) as date, status')
 				->get()
 			;
 
-			if (! is_null($results)) {
+			// Then we start building an array for the entire month
-				$prev = null;
+			$stats = [];
-				$history = $averages = [];
+			do {
+				$stats[$date->toDateString()] = [
+					'up'	=> 0,
+					'down'	=> 0
+				];
+				$date = $date->addDay();
+			}
+			while ($date->lt(Carbon::now()));
 
-				foreach ($results as $h) {
+			// Then we populate the stats data
-					if ($h->status != $prev) {
+			if (! is_null($history)) {
-						array_push($history, $h);
+				foreach ($history as $r) {
-					}
+					if (empty($stats[$r->date])) {
-					$prev = $h->status;
+						$stats[$r->date] = [
-
+							'up'	=> 0,
-					if (empty($averages[$h->date])) {
+							'down'	=> 0
-						$averages[$h->date] = [
-							'sum'	=> 0,
-							'count'	=> 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(), [
+			// Then we populate the history data
-				$task,
+			if (! is_null($history)) {
-				'id'		=> $task->id,
+				$prev = null;
-				'host'		=> $task->host,
+
-				'status'	=> $task->status,
+				foreach ($history as $k => $h) {
-				'type'		=> $task->type,
+					// We only take tasks when status has changed between them
-				'history' 	=> $history,
+					if ($h->status == $prev) {
-				'averages'	=> $averages,
+						unset($history[$k]);
-				'group'		=> $task->group
+					}
-			]));
+					$prev = $h->status;
+				}
+			}
+
+			return response()->json([
+				'task'		=> $task,
+				'stats'		=> $stats,
+				'history'	=> $history
+			]);
 		}
 	}
 

resources/views/app.vue

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

resources/views/taskdetails.vue

@@ -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(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>
-									<span v-if="history.output">
+									<span v-if="h.output">
-										{{ history.output }}
+										{{ h.output }}
 									</span>
 									<span v-else>
 										<i>No output</i>
 									</span>
 								</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>
 							</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() {
+			refreshTask: function() {
-				this.$http.post('/api/getTaskGraph/'+this.task.id, {
+				this.$http.post('/api/getTask/'+this.task.id, {
 					days: this.chart.days
 				})
 				.then(response => {
-					let xaxis = [];
+					this.task = response.data.task
-					let new_data_a = [];
+					this.history = response.data.history
-					let new_data_b = [];
+					this.refreshGraph(response.data.stats)
-					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
 				})
-			}
+			},
+			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) {
+			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>
 

routes/web.php

@@ -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']);
 });