[status page] checkpoint

This commit is contained in:
LouisLam 2021-09-14 14:12:27 +08:00
parent 35aca46b68
commit 9da2a01a74
6 changed files with 64 additions and 7 deletions

View file

@ -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",

View file

@ -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;
}

View file

@ -22,6 +22,7 @@
group="same-group"
:disabled="!editMode"
:animation="100"
item-key="id"
>
<template #item="{ element }">
<div class="item">

View file

@ -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 }

View file

@ -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;
}
}
}

View file

@ -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 {