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

Improving quickview

Browse source
This commit is contained in:
Axel 2021-12-19 14:46:08 +01:00
parent d34a4ff21f
commit ea673e0083
4 changed files with 71 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/DB.php
View file

@ -41,7 +41,7 @@ class DB {
public function get_all_tasks($status = null) { public function get_all_tasks($status = null) {
if (is_null($status)) { if (is_null($status)) {
$query = ' $query = '
SELECT DISTINCT t.id, t.host, t.type, t.params, t.frequency, t.creation_date, t.last_execution, t.active, t.group_id, h.status, g.name as group_name SELECT DISTINCT t.id, t.host, t.type, t.params, t.frequency, t.creation_date, t.last_execution, t.active, t.group_id, h.status, h.output, g.name as group_name
FROM `tasks` as t FROM `tasks` as t
LEFT JOIN `tasks_history` as h ON (h.task_id = t.id) LEFT JOIN `tasks_history` as h ON (h.task_id = t.id)
LEFT JOIN `groups` as g ON (g.id = t.group_id) LEFT JOIN `groups` as g ON (g.id = t.group_id)

24
web/css/styles.css
View file

@ -92,24 +92,25 @@ td {
.new-group { .new-group {
margin: .2rem; margin: .1rem;
display: inline-block; display: inline-block;
border: 1px solid rgba(7, 7, 7, 0.432); border-radius: .4rem;
padding: 1px; overflow: hidden;
cursor: pointer;
} }
.quick-view .square { .quick-view .square {
width: 1rem; height: 100%;
min-width: 1rem; margin: 0;
max-width: 1rem;
height: 1rem;
min-height: 1rem;
max-height: 1rem;
margin: 0.1rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
float: left; float: left;
line-height: 1.2rem;
min-width: 1.4rem;
}
.quick-view .square:not(:first-of-type) {
border-left: 1px solid white;
} }
.spacer { .spacer {
@ -132,7 +133,6 @@ td {
} }
.highlight { .highlight {
background-color: #000; background-color: #000;
padding: 0px 1rem; padding: 0px 1rem;

BIN
web/img/info.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 448 B

103
web/index.php
View file

@ -7,7 +7,7 @@
<title>MonitoLite - Network monitoring tool</title> <title>MonitoLite - Network monitoring tool</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript" type="module" src="js/scripts.js"></script>
<link type="text/css" rel="stylesheet" href="css/styles.css" /> <link type="text/css" rel="stylesheet" href="css/styles.css" />
</head> </head>
@ -21,60 +21,73 @@
v-for="group in tasks" v-for="group in tasks"
v-bind:key="group.id" v-bind:key="group.id"
class="new-group" class="new-group"
:title="group.name" :title="'Group: '+group.name"
> >
<a <p
v-for="task in group.tasks" v-for="task in group.tasks"
v-bind:key="task.id" v-bind:key="task.id"
:href="'#task-'+task.id" :href="'#task-'+task.id"
:class="statusText(task.status)"
class="square"
> >
<p :class="statusText(task.status)" class="square"> &nbsp;
<!--<img :src="'/img/'+statusText(task.status)+'.png'" width="16" alt="">--> </p>
</p>
</a>
</div> </div>
<p class="spacer">&nbsp;</p> <p class="spacer">&nbsp;</p>
</div> </div>
<div <div class="tasks">
v-for="group in tasks" <div
v-bind:key="group.group_id" v-for="group in tasks"
class="task" v-bind:key="group.group_id"
> class="task"
<h3>Tasks for group <span class="highlight">{{ group.name }}</span> <small>(#{{ group.id }})</small> </h3> >
<table id="tasks_tbl"> <h3>Tasks for group <span class="highlight">{{ group.name }}</span> <small>(#{{ group.id }})</small> </h3>
<thead> <table id="tasks_tbl">
<tr> <thead>
<th width="5%">Up?</th> <tr>
<th width="*">Host</th> <th width="5%">Up?</th>
<th width="5%">Type</th> <th width="*">Host</th>
<th width="20%">Last execution</th> <th width="5%">Type</th>
<th width="20%">Frequency (min)</th> <th width="20%">Last execution</th>
<th width="5%">Active</th$query> <th width="20%">Frequency (min)</th>
</tr> <th width="5%">Active</th$query>
</thead> </tr>
<tbody> </thead>
<tr <tbody>
v-for="task in group.tasks" <tr
v-bind:key="task.id" v-for="task in group.tasks"
> v-bind:key="task.id"
<td :class="statusText(task.status)"> >
<img :src="'img/'+statusText(task.status)+'.png'" width="16" alt="Status" /> <td :class="statusText(task.status)">
<a :name="'task-'+task.id"></a> <img :src="'img/'+statusText(task.status)+'.png'" width="16" alt="Status" />
</td> <a :name="'task-'+task.id"></a>
<td :class="statusText(task.status)"> </td>
<a :href="task.host" target="_blank">{{ task.host }}</a> <td :class="statusText(task.status)">
</td> <a :href="task.host" target="_blank">{{ task.host }}</a>
<td> </td>
<img :src="task.type == 'http' ? 'img/http.png' : 'img/ping.png'" width="16" alt="Type of check" :title="'Type: '+task.type" /> <td>
</td> <img :src="task.type == 'http' ? 'img/http.png' : 'img/ping.png'" width="16" alt="Type of check" :title="'Type: '+task.type" />
<td>{{ task.last_execution ?? 'never' }}</td> </td>
<td>{{ task.frequency }}</td> <td>
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td> <span
</tr> v-if="task.last_execution"
</tbody> >
</table> {{ task.last_execution }}
<img src="img/info.png" alt="Infos" width="16" :title="'Result: '+task.output" />
</span>
<span
v-else
>
Never
</span>
<td>{{ task.frequency }}</td>
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>