Add description to monitor

* Add description to monitor model
* Add description field to database
* Add english and spanish translation for description
* Closes: #482

db/patch-add-description-monitor.sql

@@ -0,0 +1,7 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+
+ALTER TABLE monitor
+    ADD description TEXT default null;
+
+COMMIT;

server/database.js

@@ -53,6 +53,7 @@ class Database {
         "patch-2fa-invalidate-used-token.sql": true,
         "patch-notification_sent_history.sql": true,
         "patch-monitor-basic-auth.sql": true,
+        "patch-add-description-monitor.sql": true,
     }
 
     /**

server/model/monitor.js

@@ -31,6 +31,7 @@ class Monitor extends BeanModel {
         return {
             id: this.id,
             name: this.name,
+            description: this.description,
         };
     }
 
@@ -54,6 +55,7 @@ class Monitor extends BeanModel {
         return {
             id: this.id,
             name: this.name,
+            description: this.description,
             url: this.url,
             method: this.method,
             body: this.body,

server/server.js

@@ -568,6 +568,7 @@ exports.entryPage = "dashboard";
                 }
 
                 bean.name = monitor.name;
+                bean.description = monitor.description;
                 bean.type = monitor.type;
                 bean.url = monitor.url;
                 bean.method = monitor.method;
@@ -1134,6 +1135,7 @@ exports.entryPage = "dashboard";
                             let monitor = {
                                 // Define the new variable from earlier here
                                 name: monitorListData[i].name,
+                                description: monitorListData[i].description,
                                 type: monitorListData[i].type,
                                 url: monitorListData[i].url,
                                 method: monitorListData[i].method || "GET",

src/components/MonitorList.vue

@@ -23,6 +23,9 @@
                         <div class="info">
                             <Uptime :monitor="item" type="24" :pill="true" />
                             {{ item.name }}
+                            <span :title="item.description">
+                                <font-awesome-icon icon="info-circle" />
+                            </span>
                         </div>
                         <div class="tags">
                             <Tag v-for="tag in item.tags" :key="tag" :item="tag" :size="'sm'" />

src/icon.js

@@ -33,6 +33,7 @@ import {
     faFile,
     faAward,
     faLink,
+    faInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -65,6 +66,7 @@ library.add(
     faFile,
     faAward,
     faLink,
+    faInfoCircle,
 );
 
 export { FontAwesomeIcon };

src/languages/en.js

@@ -46,6 +46,7 @@ export default {
     Unknown: "Unknown",
     Pause: "Pause",
     Name: "Name",
+    Description: "Description",
     Status: "Status",
     DateTime: "DateTime",
     Message: "Message",

src/languages/es-ES.js

@@ -34,6 +34,7 @@ export default {
     Unknown: "Desconocido",
     Pause: "Pausar",
     Name: "Nombre",
+    Description: "Descripción",
     Status: "Estado",
     DateTime: "Fecha y Hora",
     Message: "Mensaje",

src/pages/Details.vue

@@ -2,6 +2,7 @@
     <transition name="slide-fade" appear>
         <div v-if="monitor">
             <h1> {{ monitor.name }}</h1>
+            <p>{{ monitor.description }}</p>
             <div class="tags">
                 <Tag v-for="tag in monitor.tags" :key="tag.id" :item="tag" :size="'sm'" />
             </div>

src/pages/EditMonitor.vue

@@ -41,6 +41,12 @@
                                 <input id="name" v-model="monitor.name" type="text" class="form-control" required>
                             </div>
 
+                            <!-- Description -->
+                            <div class="my-3">
+                                <label for="description" class="form-label">{{ $t("Description") }}</label>
+                                <input id="description" v-model="monitor.description" type="text" class="form-control">
+                            </div>
+
                             <!-- URL -->
                             <div v-if="monitor.type === 'http' || monitor.type === 'keyword' " class="my-3">
                                 <label for="url" class="form-label">{{ $t("URL") }}</label>