[status page] checkpoint

package.json

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

src/assets/app.scss

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

src/components/GroupList.vue

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

src/icon.js

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

src/mixins/public.js

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

src/pages/StatusPage.vue

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