[status page] checkpoint
This commit is contained in:
parent
35aca46b68
commit
9da2a01a74
|
@ -73,6 +73,7 @@
|
|||
"vue": "^3.2.8",
|
||||
"vue-chart-3": "^0.5.7",
|
||||
"vue-confirm-dialog": "^1.0.2",
|
||||
"vue-contenteditable": "^3.0.4",
|
||||
"vue-i18n": "^9.1.7",
|
||||
"vue-multiselect": "^3.0.0-alpha.2",
|
||||
"vue-qrcode": "^1.0.0",
|
||||
|
|
|
@ -350,3 +350,21 @@ h2 {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #122f21;
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #055160;
|
||||
background-color: #cff4fc;
|
||||
border-color: #cff4fc;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #842029;
|
||||
background-color: #f8d7da;
|
||||
border-color: #f8d7da;
|
||||
}
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
group="same-group"
|
||||
:disabled="!editMode"
|
||||
:animation="100"
|
||||
item-key="id"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="item">
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { library } from "@fortawesome/fontawesome-svg-core"
|
||||
import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash, faCheckCircle, faStream, faSave } from "@fortawesome/free-solid-svg-icons"
|
||||
import { faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash, faCheckCircle, faStream, faSave, faExclamationCircle } from "@fortawesome/free-solid-svg-icons"
|
||||
//import { fa } from '@fortawesome/free-regular-svg-icons'
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
|
||||
|
||||
// Add Free Font Awesome Icons here
|
||||
// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
|
||||
library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash, faCheckCircle, faStream, faSave);
|
||||
library.add(faCog, faEdit, faPlus, faPause, faPlay, faTachometerAlt, faTrash, faList, faArrowAltCircleUp, faEye, faEyeSlash, faCheckCircle, faStream, faSave, faExclamationCircle);
|
||||
|
||||
export { FontAwesomeIcon }
|
||||
|
|
|
@ -3,5 +3,18 @@ export default {
|
|||
return {
|
||||
publicGroupList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
publicMonitorList() {
|
||||
let result = {};
|
||||
|
||||
for (let group of this.publicGroupList) {
|
||||
for (let monitor of group.monitorList) {
|
||||
result[monitor.id] = monitor;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
{{ $t("Save") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-danger me-2" @click="">
|
||||
<button class="btn btn-danger me-2" @click="discard">
|
||||
<font-awesome-icon icon="save" />
|
||||
{{ $t("Discard") }}
|
||||
</button>
|
||||
|
@ -32,7 +32,21 @@
|
|||
</div>
|
||||
|
||||
<div class="shadow-box list p-4 overall-status mt-4">
|
||||
<font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
|
||||
<div v-if="false">
|
||||
<font-awesome-icon icon="check-circle" class="ok" />
|
||||
All Systems Operational
|
||||
</div>
|
||||
<div>
|
||||
<font-awesome-icon icon="exclamation-circle" class="warning" />
|
||||
Partially Degraded Service
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shadow-box alert alert-success mt-4 p-4" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showEditFeature" class="row mt-4" style="height: 43px;">
|
||||
|
@ -84,17 +98,19 @@ export default {
|
|||
enableEditMode: false,
|
||||
hasToken: false,
|
||||
config: {},
|
||||
monitorList: {},
|
||||
selectedMonitor: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
/**
|
||||
* If the monitor is added to public list, which will not be in this list.
|
||||
*/
|
||||
allMonitorList() {
|
||||
let result = [];
|
||||
|
||||
for (let id in this.$root.monitorList) {
|
||||
if (this.$root.monitorList[id] && ! (id in this.monitorList)) {
|
||||
if (this.$root.monitorList[id] && ! (id in this.$root.publicMonitorList)) {
|
||||
let monitor = this.$root.monitorList[id];
|
||||
result.push(monitor);
|
||||
}
|
||||
|
@ -154,6 +170,10 @@ export default {
|
|||
name: "Untitled Group",
|
||||
monitorList: [],
|
||||
})
|
||||
},
|
||||
|
||||
discard() {
|
||||
location.reload();
|
||||
}
|
||||
},
|
||||
}
|
||||
|
@ -164,11 +184,15 @@ export default {
|
|||
|
||||
.overall-status {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
font-size: 25px;
|
||||
|
||||
.ok {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
Loading…
Reference in New Issue