Starting task details

app/Console/Commands/SyncCustomers.php

@@ -1,15 +1,14 @@
 <?php
 
+namespace App\Console\Commands;
 
 /**
+ * R E A D    T H I S :
  * THIS COMMAND IS FOR MY OWN NEEDS ONLY
  * IT SYNCS ALL THE TASKS FROM A DISTANT API
  * IT IS PROBABLY WORTHLESS FOR YOU
  */
 
-
-namespace App\Console\Commands;
-
 use Illuminate\Console\Command;
 
 class SyncCustomers extends Command

app/Http/Controllers/ApiController.php

@@ -71,30 +71,23 @@ class ApiController extends Controller
 
 	public function getTaskDetails($id) {
 
-		$task = Task
-			::leftJoin('groups', 'groups.id', 'tasks.group_id')
-			->leftJoinSub(
-				DB::table('task_history')
-					->select('id', DB::raw('MAX(created_at) as created_at'), 'output', 'status', 'task_id')
-					->groupBy('id')
-					->groupBy('output')
-					->groupBy('status')
-					->groupBy('task_id')
-					->groupBy('created_at')
-				, 'task_history', function($join) {
-				$join
-					->on('task_history.task_id', '=', 'tasks.id')
-				;
-			})
-			->select(
-				'tasks.id', 'tasks.host', 'tasks.status', 'tasks.type', 'tasks.params', 'tasks.frequency', 'tasks.created_at', 'tasks.executed_at', 'tasks.active', 'tasks.group_id',
-				'task_history.output',
-				'groups.name as group_name')
-			->findOrFail($id)
+		$task = Task::with(['group', 'history'])
+			->find($id)
 		;
 
 		if (! is_null($task)) {
-			return response()->json($task);
+			$limit = 100;
+
+			return response()->json(array_merge($task->toArray(), [
+				$task,
+				'id'		=> $task->id,
+				'host'		=> $task->host,
+				'status'	=> $task->status,
+				'type'		=> $task->type,
+				'history' 	=> $task->history()->limit($limit)->orderBy('created_at', 'DESC')->get(),
+				'group'		=> $task->group,
+				'limit'		=> $limit
+			]));
 		}
 	}
 

resources/views/app.vue

@@ -38,6 +38,10 @@
                 this.refreshed_time = this.moment();
             }
         },
+        beforeRouteLeave(to, from, next) {
+            clearTimeout(this.refresh);
+            next();
+        },
         mounted: function() {
             this.getTasks()
             this.refresh = window.setInterval(() => {

resources/views/taskdetails.vue

@@ -1,9 +1,47 @@
 <template>
-	<div class="container">
-		<h3>
-			Task {{ task.id }}
-			<!-- <p class="context-menu"><img src="/img/menu.svg" width="40" /></p> -->
-		</h3>
+	<div>
+		<div class="container"
+			v-if="task"
+		>
+			<h1>
+				Task #{{ task.id }}
+				<!-- <p class="context-menu"><img src="/img/menu.svg" width="40" /></p> -->
+			</h1>
+
+
+			<h3>History log</h3>
+			<p>Showing the latest {{ task.limit }} history records</p>
+
+			<table id="tasks_tbl">
+					<thead>
+						<tr>
+							<th width="20%">Date</th>
+							<th width="*">Output</th>
+							<th width="10%">Status</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="history in task.history"
+							v-bind:key="history.id"
+							:class="task.active == 0 ? 'inactive' : ''"
+						>
+							<td>{{ moment(history.created_at).format('YYYY-MM-DD HH:mm:ss') }}</td>
+							<td>
+								<span v-if="history.output">
+									{{ history.output }}
+								</span>
+								<span v-else>
+									<i>No output</i>
+								</span>
+							</td>
+							<td :class="statusText(task.status)">
+								<img :src="'/img/'+statusText(history.status)+'.svg'" width="16" alt="Status" />
+							</td>
+						</tr>
+					</tbody>
+				</table>
+		</div>
 	</div>
 </template>
 
@@ -15,9 +53,22 @@
 				task: null
 			}
 		},
+		methods: {
+			statusText: function (status) {
+				switch (status) {
+					case 1:
+						return 'up';
+					break;
+					case 0:
+						return 'down';
+					break;
+					default:
+						return 'unknown';
+				}
+			}
+		},
 		mounted: function() {
 			let task_id = this.$route.params.id ?? null
-			console.log(task_id)
 
 			if (task_id != null) {
 				this.$http.get('/api/getTask/'+task_id)