Checks can now be disabled
This commit is contained in:
parent
6483c516e3
commit
7ed25704e1
11 changed files with 166 additions and 258 deletions
|
|
@ -43,8 +43,6 @@ I rewrote a couple of things today to make sure the script still works.
|
|||
* clone this repo
|
||||
* install Perl dependencies
|
||||
* install PHP composer dependencies: `cd ./web && composer install`
|
||||
* install Javascript dependencies: `cd ./web && npm install`
|
||||
* compile the Javascript sources: `cd ./web && npx mix --production`
|
||||
* create a Database and import the schema from `sql/create.sql`
|
||||
* create your own `.env` file: `cp env.example .env` and adapt it to your needs
|
||||
* create a webserver vhost with document root to the `public` directory
|
||||
|
|
|
|||
|
|
@ -40,19 +40,9 @@ class ApiController extends Controller
|
|||
$group_id = $t->group_id;
|
||||
$group_name = $t->group_name;
|
||||
}
|
||||
|
||||
|
||||
if (isset($tasks[$group_id])) {
|
||||
array_push($tasks[$group_id]['tasks'], $t);
|
||||
}
|
||||
else {
|
||||
$tasks[$group_id] = [
|
||||
'id' => $group_id,
|
||||
'name' => $group_name,
|
||||
'tasks' => [ $t ]
|
||||
];
|
||||
}
|
||||
$tasks[$group_id]['tasks'][$t->id] = $t;
|
||||
}
|
||||
|
||||
return response()->json($tasks);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,6 +85,9 @@ html body table td {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
html body table td img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
html body table td.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
1
public/img/off.svg
Normal file
1
public/img/off.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M6 12C4.89543 12 4 11.1046 4 10C4 8.89543 4.89543 8 6 8C7.10457 8 8 8.89543 8 10C8 11.1046 7.10457 12 6 12Z" fill="#212121"/><path d="M18 10C18 7.79086 16.2091 6 14 6H6C3.79086 6 2 7.79086 2 10C2 12.2091 3.79086 14 6 14H14C16.2091 14 18 12.2091 18 10ZM14 7C15.6569 7 17 8.34315 17 10C17 11.6569 15.6569 13 14 13H6C4.34315 13 3 11.6569 3 10C3 8.34315 4.34315 7 6 7H14Z" fill="#212121"/></svg>
|
||||
|
After Width: | Height: | Size: 517 B |
1
public/img/on.svg
Normal file
1
public/img/on.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" ?><svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 7C4.23858 7 2 9.23858 2 12C2 14.7614 4.23858 17 7 17H17C19.7614 17 22 14.7614 22 12C22 9.23858 19.7614 7 17 7H7ZM16.75 14.5C15.3693 14.5 14.25 13.3807 14.25 12C14.25 10.6193 15.3693 9.5 16.75 9.5C18.1307 9.5 19.25 10.6193 19.25 12C19.25 13.3807 18.1307 14.5 16.75 14.5Z" fill="#212121"/></svg>
|
||||
|
After Width: | Height: | Size: 422 B |
136
public/js/app.js
136
public/js/app.js
File diff suppressed because one or more lines are too long
|
|
@ -40,19 +40,17 @@ const store = new Vuex.Store({
|
|||
mutations: {
|
||||
setTasks(state, tasks) {
|
||||
state.tasks = tasks
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
updateTask(state, update) {
|
||||
//let tasks = state.tasks
|
||||
let tasks = state.tasks
|
||||
|
||||
for (let i in state.tasks[update.group_id]['tasks']) {
|
||||
if (state.tasks[update.group_id]['tasks'][i].id == update.id) {
|
||||
//tasks[update.group_id]['tasks'][i] = update
|
||||
state.tasks[update.group_id]['tasks'][i] = Object.assign({}, state.tasks[update.group_id]['tasks'][i], update)
|
||||
}
|
||||
if (
|
||||
tasks.hasOwnProperty(update.group_id) &&
|
||||
tasks[update.group_id].hasOwnProperty('tasks') &&
|
||||
tasks[update.group_id]['tasks'].hasOwnProperty(update.id)
|
||||
) {
|
||||
tasks[update.group_id]['tasks'][update.id] = update;
|
||||
}
|
||||
console.log(state.tasks)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -105,6 +105,10 @@ html {
|
|||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
<h1>MonitoLite Dashboard</h1>
|
||||
<p class="refreshed-time">Data refreshed: {{ refreshedTime }}</p>
|
||||
<quick-view></quick-view>
|
||||
<group-list></group-list>
|
||||
<task-list></task-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import GroupList from './components/grouplist.vue'
|
||||
import TaskList from './components/tasklist.vue'
|
||||
import QuickView from './components/quickview.vue'
|
||||
|
||||
export default{
|
||||
components: {
|
||||
QuickView,
|
||||
GroupList
|
||||
TaskList
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
<template>
|
||||
<div class="tasks">
|
||||
<div
|
||||
v-for="group in tasks"
|
||||
v-bind:key="group.id"
|
||||
class="task"
|
||||
>
|
||||
<a :name="'group-'+group.id"></a>
|
||||
<h3>
|
||||
Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
|
||||
<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
|
||||
</h3>
|
||||
|
||||
<div class="block-content">
|
||||
<table id="tasks_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">Up?</th>
|
||||
<th width="*">Host</th>
|
||||
<th width="5%">Type</th>
|
||||
<th width="20%">Last checked</th>
|
||||
<th width="13%">Frequency (min)</th>
|
||||
<th width="5%">Active</th>
|
||||
<th width="5%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="task in group.tasks"
|
||||
v-bind:key="task.id"
|
||||
>
|
||||
<td :class="statusText(task.status)">
|
||||
<img :src="'img/'+statusText(task.status)+'.svg'" width="16" alt="Status" />
|
||||
</td>
|
||||
<td>
|
||||
<a :href="task.host" target="_blank">{{ task.host }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<img :src="task.type == 'http' ? 'img/http.svg' : 'img/ping.svg'" width="16" alt="Type of check" :title="'Type: '+task.type" />
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
v-if="task.last_execution"
|
||||
>
|
||||
{{ moment(task.last_execution).fromNow() }}
|
||||
<img src="img/info.svg" alt="Infos" width="16" :title="'Result: '+task.output" />
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
>
|
||||
Never
|
||||
</span>
|
||||
<td>{{ task.frequency / 60 }}</td>
|
||||
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'taskdetails', params: { id: task.id }}">
|
||||
<img src="img/see.svg" alt="Details" width="16" />
|
||||
</router-link>
|
||||
<a
|
||||
v-on:click.prevent="disableTask(task.id, task.active)"
|
||||
href="#"
|
||||
>
|
||||
<img src="img/disable.svg" alt="Disable" width="16" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
computed: {
|
||||
tasks: function() {
|
||||
return this.$store.state.tasks
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusText: function (status) {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'up';
|
||||
break;
|
||||
case 0:
|
||||
return 'down';
|
||||
break;
|
||||
default:
|
||||
return 'unknown';
|
||||
}
|
||||
},
|
||||
disableTask: function(task_id, current_status) {
|
||||
this.$http.post('/api/toggleTaskStatus/'+task_id, {
|
||||
active: + !current_status
|
||||
})
|
||||
.then(response => this.$store.dispatch('updateTask', response.data))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -1,68 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<table id="tasks_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">Up?</th>
|
||||
<th width="*">Host</th>
|
||||
<th width="5%">Type</th>
|
||||
<th width="20%">Last checked</th>
|
||||
<th width="13%">Frequency (min)</th>
|
||||
<th width="5%">Active</th>
|
||||
<th width="5%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="task in tasks"
|
||||
v-bind:key="task.id"
|
||||
>
|
||||
<td :class="statusText(task.status)">
|
||||
<img :src="'img/'+statusText(task.status)+'.svg'" width="16" alt="Status" />
|
||||
</td>
|
||||
<td>
|
||||
<a :href="task.host" target="_blank">{{ task.host }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<img :src="task.type == 'http' ? 'img/http.svg' : 'img/ping.svg'" width="16" alt="Type of check" :title="'Type: '+task.type" />
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
v-if="task.last_execution"
|
||||
<div class="tasks">
|
||||
<div
|
||||
v-for="group in tasks"
|
||||
v-bind:key="group.id"
|
||||
class="task"
|
||||
>
|
||||
<a :name="'group-'+group.id"></a>
|
||||
<h3>
|
||||
Tasks for group <span class="highlight">{{ group.name }} <small>(#{{ group.id }})</small></span>
|
||||
<!-- <p class="context-menu"><img src="img/menu.svg" width="40" /></p> -->
|
||||
</h3>
|
||||
|
||||
<div class="block-content">
|
||||
<table id="tasks_tbl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">Up?</th>
|
||||
<th width="*">Host</th>
|
||||
<th width="5%">Type</th>
|
||||
<th width="20%">Last checked</th>
|
||||
<th width="13%">Frequency (min)</th>
|
||||
<th width="5%">Active</th>
|
||||
<th width="5%">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="task in group.tasks"
|
||||
v-bind:key="task.id"
|
||||
>
|
||||
{{ moment(task.last_execution).fromNow() }}
|
||||
<img src="img/info.svg" alt="Infos" width="16" :title="'Result: '+task.output" />
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
>
|
||||
Never
|
||||
</span>
|
||||
<td>{{ task.frequency / 60 }}</td>
|
||||
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'taskdetails', params: { id: task.id }}">
|
||||
<img src="img/see.svg" alt="Details" width="16" />
|
||||
</router-link>
|
||||
<a
|
||||
v-on:click.prevent="disableTask(task.id, task.active)"
|
||||
href="#"
|
||||
>
|
||||
<img src="img/disable.svg" alt="Disable" width="16" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<td :class="statusText(task.status)">
|
||||
<img :src="'img/'+statusText(task.status)+'.svg'" width="16" alt="Status" />
|
||||
</td>
|
||||
<td>
|
||||
<a :href="task.host" target="_blank">{{ task.host }}</a>
|
||||
</td>
|
||||
<td>
|
||||
<img :src="task.type == 'http' ? 'img/http.svg' : 'img/ping.svg'" width="16" alt="Type of check" :title="'Type: '+task.type" />
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
v-if="task.last_execution"
|
||||
>
|
||||
{{ moment(task.last_execution).fromNow() }}
|
||||
<img src="img/info.svg" alt="Infos" width="16" :title="'Result: '+task.output" />
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
>
|
||||
Never
|
||||
</span>
|
||||
<td>{{ task.frequency / 60 }}</td>
|
||||
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'taskdetails', params: { id: task.id }}">
|
||||
<img src="img/see.svg" alt="Details" width="20" />
|
||||
</router-link>
|
||||
<a
|
||||
v-on:click.prevent="disableTask(task.id, task.active)"
|
||||
href="#"
|
||||
:title="task.active == 1 ? 'Disable task' : 'Enable task'"
|
||||
>
|
||||
<img :src="task.active == 1 ? '/img/on.svg' : '/img/off.svg'" alt="Disable" width="24" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'tasks'
|
||||
],
|
||||
components: {
|
||||
},
|
||||
computed: {
|
||||
tasks: function() {
|
||||
return this.$store.state.tasks
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusText: function (status) {
|
||||
switch (status) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue