Improving quickview
This commit is contained in:
parent
d34a4ff21f
commit
ea673e0083
4 changed files with 71 additions and 58 deletions
|
|
@ -41,7 +41,7 @@ class DB {
|
|||
public function get_all_tasks($status = null) {
|
||||
if (is_null($status)) {
|
||||
$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
|
||||
LEFT JOIN `tasks_history` as h ON (h.task_id = t.id)
|
||||
LEFT JOIN `groups` as g ON (g.id = t.group_id)
|
||||
|
|
|
|||
|
|
@ -92,24 +92,25 @@ td {
|
|||
|
||||
|
||||
.new-group {
|
||||
margin: .2rem;
|
||||
margin: .1rem;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(7, 7, 7, 0.432);
|
||||
padding: 1px;
|
||||
|
||||
border-radius: .4rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quick-view .square {
|
||||
width: 1rem;
|
||||
min-width: 1rem;
|
||||
max-width: 1rem;
|
||||
height: 1rem;
|
||||
min-height: 1rem;
|
||||
max-height: 1rem;
|
||||
margin: 0.1rem;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
line-height: 1.2rem;
|
||||
min-width: 1.4rem;
|
||||
}
|
||||
|
||||
.quick-view .square:not(:first-of-type) {
|
||||
border-left: 1px solid white;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
|
|
@ -132,7 +133,6 @@ td {
|
|||
}
|
||||
|
||||
|
||||
|
||||
.highlight {
|
||||
background-color: #000;
|
||||
padding: 0px 1rem;
|
||||
|
|
|
|||
BIN
web/img/info.png
Normal file
BIN
web/img/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 448 B |
103
web/index.php
103
web/index.php
|
|
@ -7,7 +7,7 @@
|
|||
<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/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" />
|
||||
</head>
|
||||
|
||||
|
|
@ -21,60 +21,73 @@
|
|||
v-for="group in tasks"
|
||||
v-bind:key="group.id"
|
||||
class="new-group"
|
||||
:title="group.name"
|
||||
:title="'Group: '+group.name"
|
||||
>
|
||||
<a
|
||||
<p
|
||||
v-for="task in group.tasks"
|
||||
v-bind:key="task.id"
|
||||
:href="'#task-'+task.id"
|
||||
:class="statusText(task.status)"
|
||||
class="square"
|
||||
>
|
||||
<p :class="statusText(task.status)" class="square">
|
||||
<!--<img :src="'/img/'+statusText(task.status)+'.png'" width="16" alt="">-->
|
||||
</p>
|
||||
</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<p class="spacer"> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-for="group in tasks"
|
||||
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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">Up?</th>
|
||||
<th width="*">Host</th>
|
||||
<th width="5%">Type</th>
|
||||
<th width="20%">Last execution</th>
|
||||
<th width="20%">Frequency (min)</th>
|
||||
<th width="5%">Active</th$query>
|
||||
</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)+'.png'" width="16" alt="Status" />
|
||||
<a :name="'task-'+task.id"></a>
|
||||
</td>
|
||||
<td :class="statusText(task.status)">
|
||||
<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>{{ task.last_execution ?? 'never' }}</td>
|
||||
<td>{{ task.frequency }}</td>
|
||||
<td>{{ task.active == 1 ? 'Yes' : 'No' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="tasks">
|
||||
<div
|
||||
v-for="group in tasks"
|
||||
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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="5%">Up?</th>
|
||||
<th width="*">Host</th>
|
||||
<th width="5%">Type</th>
|
||||
<th width="20%">Last execution</th>
|
||||
<th width="20%">Frequency (min)</th>
|
||||
<th width="5%">Active</th$query>
|
||||
</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)+'.png'" width="16" alt="Status" />
|
||||
<a :name="'task-'+task.id"></a>
|
||||
</td>
|
||||
<td :class="statusText(task.status)">
|
||||
<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>
|
||||
<span
|
||||
v-if="task.last_execution"
|
||||
>
|
||||
{{ 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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue