From 934d633d4d693b808db4c6afa524f7b7f51595ff Mon Sep 17 00:00:00 2001
From: Juan Cruz Vincenti <juancruzvincenti@gmail.com>
Date: Thu, 11 Nov 2021 20:06:32 -0300
Subject: [PATCH] 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 | 7 +++++++
 server/database.js                   | 1 +
 server/model/monitor.js              | 2 ++
 server/server.js                     | 2 ++
 src/components/MonitorList.vue       | 3 +++
 src/icon.js                          | 2 ++
 src/languages/en.js                  | 1 +
 src/languages/es-ES.js               | 1 +
 src/pages/Details.vue                | 1 +
 src/pages/EditMonitor.vue            | 6 ++++++
 10 files changed, 26 insertions(+)
 create mode 100644 db/patch-add-description-monitor.sql

diff --git a/db/patch-add-description-monitor.sql b/db/patch-add-description-monitor.sql
new file mode 100644
index 000000000..da1aa55bc
--- /dev/null
+++ b/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;
diff --git a/server/database.js b/server/database.js
index afcace705..55f08a0c7 100644
--- a/server/database.js
+++ b/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,
     }
 
     /**
diff --git a/server/model/monitor.js b/server/model/monitor.js
index 6aa614b74..50f11e879 100644
--- a/server/model/monitor.js
+++ b/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,
diff --git a/server/server.js b/server/server.js
index 868bbd5ef..794f67b42 100644
--- a/server/server.js
+++ b/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",
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index ef51e89cd..29d14d1f9 100644
--- a/src/components/MonitorList.vue
+++ b/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'" />
diff --git a/src/icon.js b/src/icon.js
index e78992f20..55e662917 100644
--- a/src/icon.js
+++ b/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 };
diff --git a/src/languages/en.js b/src/languages/en.js
index fee80a760..d238bb666 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -46,6 +46,7 @@ export default {
     Unknown: "Unknown",
     Pause: "Pause",
     Name: "Name",
+    Description: "Description",
     Status: "Status",
     DateTime: "DateTime",
     Message: "Message",
diff --git a/src/languages/es-ES.js b/src/languages/es-ES.js
index d772db060..fe04d86a0 100644
--- a/src/languages/es-ES.js
+++ b/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",
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index d40561fe0..12e86df4a 100644
--- a/src/pages/Details.vue
+++ b/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>
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 4a0d0408b..a0e68676b 100644
--- a/src/pages/EditMonitor.vue
+++ b/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>