From 641f2d18b29d11efbf2bdf3f061fbe7f48383ea0 Mon Sep 17 00:00:00 2001
From: hunterlong <info@socialeck.com>
Date: Wed, 17 Jun 2020 15:35:13 -0700
Subject: [PATCH] UI fixes, i18n updates, notifier example usage

---
 frontend/src/components/Dashboard/Cache.vue   |  5 ++-
 .../Dashboard/DashboardMessages.vue           | 19 ++++++---
 .../Dashboard/DashboardServices.vue           | 15 +++----
 .../components/Dashboard/DashboardUsers.vue   |  2 +-
 .../src/components/Dashboard/ServicesList.vue | 31 +++++++++-----
 .../src/components/Dashboard/ThemeEditor.vue  | 18 ++++++--
 frontend/src/components/Index/Group.vue       |  4 +-
 .../src/components/Service/ServiceInfo.vue    | 22 +++++-----
 frontend/src/forms/Group.vue                  |  8 ++--
 frontend/src/forms/Message.vue                |  6 ++-
 frontend/src/forms/Setup.vue                  | 16 +++----
 frontend/src/forms/User.vue                   |  2 +-
 frontend/src/languages/english.js             | 24 ++++++++---
 frontend/src/pages/Service.vue                | 12 +++---
 notifiers/command.go                          |  2 +-
 notifiers/command_test.go                     |  6 ++-
 notifiers/discord_test.go                     |  6 ++-
 notifiers/email_test.go                       | 10 +++--
 notifiers/mobile_test.go                      |  6 ++-
 notifiers/notifiers.go                        | 42 -------------------
 notifiers/pushover_test.go                    |  6 ++-
 notifiers/slack_test.go                       |  6 ++-
 notifiers/telegram_test.go                    |  6 ++-
 notifiers/twilio_test.go                      |  6 ++-
 notifiers/webhook_test.go                     |  6 ++-
 utils/log.go                                  |  7 ++--
 26 files changed, 160 insertions(+), 133 deletions(-)

diff --git a/frontend/src/components/Dashboard/Cache.vue b/frontend/src/components/Dashboard/Cache.vue
index 8a447121..18a0bc26 100644
--- a/frontend/src/components/Dashboard/Cache.vue
+++ b/frontend/src/components/Dashboard/Cache.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
-        <table class="table">
+        <span v-if="!cache" class="text-muted">There are no cached pages yet!</span>
+        <table v-if="cache" class="table">
             <thead>
             <tr>
                 <th scope="col">URL</th>
@@ -18,7 +19,7 @@
 
             </tbody>
         </table>
-        <button @click.prevent="clearCache" class="btn btn-danger btn-block">Clear Cache</button>
+        <button v-if="cache" @click.prevent="clearCache" class="btn btn-danger btn-block">Clear Cache</button>
     </div>
 </template>
 
diff --git a/frontend/src/components/Dashboard/DashboardMessages.vue b/frontend/src/components/Dashboard/DashboardMessages.vue
index 075746ed..38c5b5c8 100644
--- a/frontend/src/components/Dashboard/DashboardMessages.vue
+++ b/frontend/src/components/Dashboard/DashboardMessages.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="col-12">
     <div class="card contain-card text-black-50 bg-white mb-4">
-      <div class="card-header">Announcements</div>
+      <div class="card-header">{{ $t('top_nav.announcements') }}</div>
       <div class="card-body pt-0">
         <table class="table table-striped">
           <thead>
             <tr>
-                <th scope="col">Title</th>
-                <th scope="col" class="d-none d-md-table-cell">Service</th>
-                <th scope="col" class="d-none d-md-table-cell">Begins</th>
+                <th scope="col">{{ $t('dashboard.title') }}</th>
+                <th scope="col" class="d-none d-md-table-cell">{{ $tc('dashboard.service', 1) }}</th>
+                <th scope="col" class="d-none d-md-table-cell">{{ $t('dashboard.begins') }}</th>
                 <th scope="col"></th>
             </tr>
           </thead>
@@ -21,8 +21,12 @@
               <td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
               <td class="text-right">
                 <div v-if="$store.state.admin" class="btn-group">
-                  <a @click.prevent="editMessage(message, edit)" href="#" class="btn btn-outline-secondary"><i class="fas fa-exclamation-triangle"></i> Edit</a>
-                  <a @click.prevent="deleteMessage(message)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
+                  <button @click.prevent="editMessage(message, edit)" href="#" class="btn btn-sm btn-outline-secondary">
+                      <font-awesome-icon icon="edit" />
+                  </button>
+                  <button @click.prevent="deleteMessage(message)" href="#" class="btn btn-sm btn-danger">
+                      <font-awesome-icon icon="times" />
+                  </button>
                 </div>
               </td>
             </tr>
@@ -48,6 +52,9 @@
     }
   },
   methods: {
+    goto(to) {
+      this.$router.push(to)
+    },
     editChange(v) {
       this.message = {}
       this.edit = v
diff --git a/frontend/src/components/Dashboard/DashboardServices.vue b/frontend/src/components/Dashboard/DashboardServices.vue
index 37c4a4d0..ce5cdc51 100644
--- a/frontend/src/components/Dashboard/DashboardServices.vue
+++ b/frontend/src/components/Dashboard/DashboardServices.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="col-12">
         <div class="card contain-card text-black-50 bg-white mb-4">
-            <div class="card-header">Services
+            <div class="card-header">{{ $t('top_nav.services') }}
                 <router-link v-if="$store.state.admin" to="/dashboard/create_service" class="btn btn-sm btn-outline-success float-right">
                     <font-awesome-icon icon="plus"/>  Create
                 </router-link>
@@ -12,14 +12,14 @@
         </div>
 
         <div class="card contain-card text-black-50 bg-white mb-4">
-            <div class="card-header">Groups</div>
+            <div class="card-header">{{ $t('top_nav.groups') }}</div>
             <div class="card-body pt-0">
         <table class="table">
             <thead>
             <tr>
-                <th scope="col">Name</th>
-                <th scope="col">Services</th>
-                <th scope="col">Visibility</th>
+                <th scope="col">{{ $t('dashboard.name') }}</th>
+                <th scope="col">{{ $tc('dashboard.service', 2) }}</th>
+                <th scope="col">{{ $t('dashboard.visibility') }}</th>
                 <th scope="col"></th>
             </tr>
             </thead>
@@ -31,8 +31,9 @@
                 </td>
                 <td>{{$store.getters.servicesInGroup(group.id).length}}</td>
                 <td>
-                    <span v-if="group.public" class="badge badge-primary text-uppercase">{{ $t('public') }}</span>
-                    <span v-if="!group.public" class="badge badge-secondary text-uppercase">{{ $t('private') }}</span>
+                    <span class="badge text-uppercase" :class="{'badge-primary': group.public, 'badge-secondary': !group.public}">
+                        {{group.public ? $t('public') : $t('private')}}
+                    </span>
                 </td>
                 <td class="text-right">
                     <div v-if="$store.state.admin" class="btn-group">
diff --git a/frontend/src/components/Dashboard/DashboardUsers.vue b/frontend/src/components/Dashboard/DashboardUsers.vue
index 85383273..05a5e94c 100644
--- a/frontend/src/components/Dashboard/DashboardUsers.vue
+++ b/frontend/src/components/Dashboard/DashboardUsers.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="col-12">
         <div class="card contain-card text-black-50 bg-white mb-4">
-            <div class="card-header">Users</div>
+            <div class="card-header">{{ $t('top_nav.users') }}</div>
             <div class="card-body pt-0">
         <table class="table table-striped">
             <thead>
diff --git a/frontend/src/components/Dashboard/ServicesList.vue b/frontend/src/components/Dashboard/ServicesList.vue
index 4216dd57..78cc0635 100644
--- a/frontend/src/components/Dashboard/ServicesList.vue
+++ b/frontend/src/components/Dashboard/ServicesList.vue
@@ -16,7 +16,7 @@
                     </span> {{service.name}}
                 </td>
                 <td class="d-none d-md-table-cell">
-                    <span class="badge" :class="{'badge-primary': service.public, 'badge-secondary': !service.public}">
+                    <span class="badge text-uppercase" :class="{'badge-primary': service.public, 'badge-secondary': !service.public}">
                         {{service.public ? $t('public') : $t('private')}}
                     </span>
                 </td>
@@ -27,15 +27,16 @@
                 </td>
                 <td class="text-right">
                     <div class="btn-group">
-                        <router-link v-if="$store.state.admin" :to="{path: `/dashboard/edit_service/${service.id}`, params: {service: service} }" class="btn btn-outline-secondary">
-                            <i class="fas fa-chart-area"></i> Edit
-                        </router-link>
-                        <router-link :to="{path: serviceLink(service), params: {service: service} }" class="btn btn-outline-secondary">
-                            <i class="fas fa-chart-area"></i> View
-                        </router-link>
-                        <a v-if="$store.state.admin" @click.prevent="deleteService(service)" href="#" class="btn btn-danger">
-                            <font-awesome-icon icon="times" />
-                        </a>
+                        <button v-if="$store.state.admin" @click.prevent="goto({path: `/dashboard/edit_service/${service.id}`, params: {service: service} })" class="btn btn-sm btn-outline-secondary">
+                            <font-awesome-icon icon="edit" />
+                        </button>
+                        <button @click.prevent="goto({path: serviceLink(service), params: {service: service} })" class="btn btn-sm btn-outline-secondary">
+                            <font-awesome-icon icon="chart-area" />
+                        </button>
+                        <button v-if="$store.state.admin" @click.prevent="deleteService(service)" href="#" class="btn btn-sm btn-danger">
+                            <font-awesome-icon v-if="!loading" icon="times" />
+                            <font-awesome-icon v-if="loading" icon="circle-notch" spin/>
+                        </button>
                     </div>
                 </td>
             </tr>
@@ -54,6 +55,11 @@ export default {
         ToggleSwitch,
           draggable
     },
+      data() {
+        return {
+          loading: false,
+        }
+      },
     computed: {
         servicesList: {
             get () {
@@ -65,6 +71,9 @@ export default {
         }
     },
       methods: {
+        goto(to) {
+          this.$router.push(to)
+        },
           async updateOrder(value) {
               let data = [];
               value.forEach((s, k) => {
@@ -76,8 +85,10 @@ export default {
           async deleteService(s) {
               let c = confirm(`Are you sure you want to delete '${s.name}'?`)
               if (c) {
+                this.loading = true
                   await Api.service_delete(s.id)
                   await this.update()
+                this.loading = false
               }
           },
           serviceGroup(s) {
diff --git a/frontend/src/components/Dashboard/ThemeEditor.vue b/frontend/src/components/Dashboard/ThemeEditor.vue
index a88337cf..baae1fde 100644
--- a/frontend/src/components/Dashboard/ThemeEditor.vue
+++ b/frontend/src/components/Dashboard/ThemeEditor.vue
@@ -1,13 +1,20 @@
 <template>
     <div>
+        <div v-if="error" class="alert alert-danger mt-3" style="white-space: pre-line;">
+            {{error}}
+        </div>
+
             <div v-if="loaded && !directory" class="jumbotron jumbotron-fluid">
                 <div class="text-center col-12">
                     <h1 class="display-5">Enable Local Assets</h1>
                     <span class="lead">Customize your status page design by enabling local assets. This will create a 'assets' directory containing all CSS.<p>
-                        <button id="enable_assets" @click.prevent="createAssets" :disabled="pending" href="#" class="btn btn-primary mt-3">Enable Local Assets</button>
+                        <button id="enable_assets" @click.prevent="createAssets" :disabled="pending" href="#" class="btn btn-primary mt-3">
+                            <font-awesome-icon v-if="pending" icon="circle-notch" class="mr-2" spin/>{{pending ? "Creating Assets" : "Enable Local Assets"}}
+                        </button>
                     </p></span>
                 </div>
         </div>
+
     <form v-observe-visibility="visible" v-if="loaded && directory" @submit.prevent="saveAssets" :disabled="pending">
         <h3>Variables</h3>
         <codemirror v-show="loaded" v-model="vars" ref="vars" :options="cmOptions" class="codemirrorInput"/>
@@ -18,8 +25,6 @@
         <h3 class="mt-3">Mobile Overwrites</h3>
         <codemirror v-show="loaded" v-model="mobile" ref="mobile" :options="cmOptions" class="codemirrorInput"/>
 
-        <div v-if="error" class="alert alert-danger mt-3" style="white-space: pre-line;">{{error}}</div>
-
         <button id="save_assets" @submit.prevent="saveAssets" type="submit" class="btn btn-primary btn-block mt-2" :disabled="pending">{{pending ? "Saving..." : "Save Style"}}</button>
         <button id="delete_assets" v-if="directory" @click.prevent="deleteAssets" href="#" class="btn btn-danger btn-block confirm-btn" :disabled="pending">Delete Local Assets</button>
 
@@ -115,7 +120,12 @@
           async saveAssets() {
               this.pending = true
               const data = {base: this.base, variables: this.vars, mobile: this.mobile}
-              const resp = await Api.theme_save(data)
+            let resp
+            try {
+              resp = await Api.theme_save(data)
+            } catch(e) {
+              resp = {status: 'error', error: e.response.data.error}
+            }
               if (resp.error) {
                   this.error = resp.error
                   this.pending = false
diff --git a/frontend/src/components/Index/Group.vue b/frontend/src/components/Index/Group.vue
index a483831b..63042fa4 100644
--- a/frontend/src/components/Index/Group.vue
+++ b/frontend/src/components/Index/Group.vue
@@ -5,7 +5,9 @@
 
             <a v-for="(service, index) in $store.getters.servicesInGroup(group.id)" v-bind:key="index" class="service_li list-group-item list-group-item-action">
                 <router-link class="no-decoration font-3" :to="serviceLink(service)">{{service.name}}</router-link>
-                <span class="badge float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">{{service.online ? "ONLINE" : "OFFLINE"}}</span>
+                <span class="badge text-uppercase float-right" :class="{'bg-success': service.online, 'bg-danger': !service.online }">
+                    {{service.online ? $t('online') : $t('offline')}}
+                </span>
 
                 <GroupServiceFailures :service="service"/>
 
diff --git a/frontend/src/components/Service/ServiceInfo.vue b/frontend/src/components/Service/ServiceInfo.vue
index 0da750f0..9b8226c5 100644
--- a/frontend/src/components/Service/ServiceInfo.vue
+++ b/frontend/src/components/Service/ServiceInfo.vue
@@ -3,9 +3,9 @@
         <div class="card-title px-4 pt-3">
             <h4 v-observe-visibility="setVisible">
                 <router-link :to="serviceLink(service)">{{service.name}}</router-link>
-                <span class="badge float-right" :class="{'badge-success': service.online, 'badge-danger': !service.online}">
-                        {{service.online ? "ONLINE" : "OFFLINE"}}
-                    </span>
+                <span class="badge float-right text-uppercase" :class="{'badge-success': service.online, 'badge-danger': !service.online}">
+                    {{service.online ? $t('online') : $t('offline')}}
+                </span>
             </h4>
         </div>
 
@@ -68,22 +68,24 @@
             <div class="row">
 
                 <div class="col-12 col-md-3 mb-2 mb-md-0">
-                    <router-link :to="{path: `/dashboard/service/${service.id}/incidents`, params: {id: service.id} }" class="btn btn-block btn-white incident">
-                        Incidents
+                    <router-link :to="{path: `/dashboard/service/${service.id}/incidents`, params: {id: service.id} }" class="btn btn-block btn-white text-capitalize incident">
+                        {{$tc('incident', 2)}}
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0">
-                    <router-link :to="{path: `/dashboard/service/${service.id}/checkins`, params: {id: service.id} }" class="btn btn-block btn-white checkins">
-                        Checkins
+                    <router-link :to="{path: `/dashboard/service/${service.id}/checkins`, params: {id: service.id} }" class="btn btn-block btn-white text-capitalize checkins">
+                        {{$tc('checkin', 2)}}
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0">
-                    <router-link :to="{path: `/dashboard/service/${service.id}/failures`, params: {id: service.id} }" class="btn btn-block btn-white failures">
-                        Failures <span class="badge badge-danger float-right mt-1">{{service.stats.failures}}</span>
+                    <router-link :to="{path: `/dashboard/service/${service.id}/failures`, params: {id: service.id} }" class="btn btn-block btn-white text-capitalize failures">
+                        {{$tc('failure', 2)}} <span class="badge badge-danger float-right mt-1">{{service.stats.failures}}</span>
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0 mt-0 mt-md-1">
-                    <span class="text-black-50 float-md-right">{{service.online_7_days}} % Uptime</span>
+                    <span class="text-black-50 float-md-right">
+                        {{$t('uptime', [service.online_7_days])}}
+                    </span>
                 </div>
 
             </div>
diff --git a/frontend/src/forms/Group.vue b/frontend/src/forms/Group.vue
index ca0e57fe..249fe150 100644
--- a/frontend/src/forms/Group.vue
+++ b/frontend/src/forms/Group.vue
@@ -2,19 +2,21 @@
     <div class="card contain-card text-black-50 bg-white mb-3">
         <div class="card-header">{{group.id ? `Update ${group.name}` : "Create Group"}}
             <transition name="slide-fade">
-                <button @click="removeEdit" v-if="group.id" class="btn float-right btn-danger btn-sm">Close</button>
+                <button @click="removeEdit" v-if="group.id" class="btn float-right btn-danger btn-sm">
+                    {{ $t('close') }}
+                </button>
             </transition></div>
         <div class="card-body">
 
     <form @submit.prevent="saveGroup">
         <div class="form-group row">
-            <label for="title" class="col-sm-4 col-form-label">Group Name</label>
+            <label for="title" class="col-sm-4 col-form-label">{{ $t('dashboard.group') }} {{ $t('dashboard.name') }}</label>
             <div class="col-sm-8">
                 <input v-model="group.name" type="text" class="form-control" id="title" placeholder="Group Name" required>
             </div>
         </div>
         <div class="form-group row">
-            <label for="switch-group-public" class="col-sm-4 col-form-label">Public Group</label>
+            <label for="switch-group-public" class="col-sm-4 col-form-label text-capitalize">{{ $t('public') }} {{ $t('dashboard.group') }}</label>
             <div class="col-md-8 col-xs-12 mt-1">
             <span @click="group.public = !!group.public" class="switch float-left">
                 <input v-model="group.public" type="checkbox" class="switch" id="switch-group-public" :checked="group.public">
diff --git a/frontend/src/forms/Message.vue b/frontend/src/forms/Message.vue
index f9d79beb..32f794cd 100644
--- a/frontend/src/forms/Message.vue
+++ b/frontend/src/forms/Message.vue
@@ -3,13 +3,15 @@
     <div class="card contain-card text-black-50 bg-white mb-5">
       <div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
         <transition name="slide-fade">
-          <button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>
+          <button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">
+              {{ $t('close') }}
+          </button>
         </transition>
       </div>
       <div class="card-body">
         <form @submit="saveMessage">
           <div class="form-group row">
-            <label class="col-sm-4 col-form-label">Title</label>
+            <label class="col-sm-4 col-form-label">{{ $t('dashboard.title') }}</label>
             <div class="col-sm-8">
               <input v-model="message.title" type="text" name="title" class="form-control" id="title" placeholder="Announcement Title" required>
             </div>
diff --git a/frontend/src/forms/Setup.vue b/frontend/src/forms/Setup.vue
index b96784ac..8f5fc45c 100644
--- a/frontend/src/forms/Setup.vue
+++ b/frontend/src/forms/Setup.vue
@@ -49,7 +49,7 @@
                             <input @keyup="canSubmit" v-model="setup.db_password" id="db_password" type="password" class="form-control" placeholder="password123">
                         </div>
                         <div v-if="setup.db_connection !== 'sqlite'" class="form-group">
-                            <label for="db_database" class="text-capitalize">{{ $t('database') }}</label>
+                            <label for="db_database" class="text-capitalize">{{ $t('setup.database') }}</label>
                             <input @keyup="canSubmit" v-model="setup.db_database" id="db_database" type="text" class="form-control" placeholder="Database name">
                         </div>
 
@@ -125,7 +125,7 @@
                     </div>
 
                     <button @click.prevent="saveSetup" v-bind:disabled="disabled || loading" type="submit" class="btn btn-primary btn-block" :class="{'btn-primary': !loading, 'btn-default': loading}">
-                       {{loading ? "Loading..." : "Save Settings"}}
+                        <font-awesome-icon v-if="loading" icon="circle-notch" class="mr-2" spin/>{{loading ? "Loading..." : "Save Settings"}}
                     </button>
                 </div>
             </form>
@@ -176,6 +176,7 @@
     }
   },
   mounted() {
+    this.changeLanguages()
     this.setup.domain = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":"+window.location.port : "")
   },
   methods: {
@@ -203,13 +204,12 @@
       },
     async saveSetup() {
       this.loading = true
-      const s = this.setup
-      if (s.password !== s.confirm_password) {
-        alert('Passwords do not match!')
-        this.loading = false
-        return
+      let resp
+      try {
+        resp = await Api.setup_save(this.setup)
+      } catch(e) {
+        resp = {status: 'error', error: e.response.data.error}
       }
-      const resp = await Api.setup_save(s)
       if (resp.status === 'error') {
         this.error = resp.error
         this.loading = false
diff --git a/frontend/src/forms/User.vue b/frontend/src/forms/User.vue
index 599b5f7a..bdd4efc4 100644
--- a/frontend/src/forms/User.vue
+++ b/frontend/src/forms/User.vue
@@ -32,7 +32,7 @@
             </div>
         </div>
         <div class="form-group row">
-            <label class="col-sm-4 col-form-label">Confirm Password</label>
+            <label class="col-sm-4 col-form-label">{{ $t('close') }}</label>
             <div class="col-sm-8">
                 <input v-model="user.confirm_password" type="password" id="password_confirm" class="form-control" placeholder="Confirm Password" required>
             </div>
diff --git a/frontend/src/languages/english.js b/frontend/src/languages/english.js
index df23c6cb..404ad6dc 100644
--- a/frontend/src/languages/english.js
+++ b/frontend/src/languages/english.js
@@ -3,6 +3,7 @@ const english = {
     dashboard: "Dashboard",
     services: "Services",
     users: "Users",
+    groups: "Groups",
     announcements: "Announcements",
     settings: "Settings",
     logs: "Logs",
@@ -27,6 +28,12 @@ const english = {
     total_services: "Total Services",
     failures_24_hours: "Failures last 24 Hours",
     online_services: "Online Services",
+    service: 'Service | Services',
+    group: 'Group',
+    title: 'Title',
+    begins: 'Begins',
+    name: 'Name',
+    visibility: 'Visibility'
   },
   settings: {
     name: "Project Name",
@@ -53,9 +60,11 @@ const english = {
   public: 'Public',
   private: 'Private',
   admin: 'Admin',
-  user: 'User',
   offline: 'offline',
-  incident: 'incident',
+  failure: 'failure | failures',
+  incident: 'incident | incidents',
+  checkin: 'checkin | checkins',
+  user: 'User | Users',
   group: 'Group',
   message: 'message',
   edit: 'Edit',
@@ -63,9 +72,14 @@ const english = {
   sample_data: 'Sample Data',
   today: 'Today',
   last_login: 'Last Login',
-  day: 'day',
-  hour: 'hour',
-  uptime: '{0} Uptime',
+  uptime: '{0}% Uptime',
+  close: 'Close',
+  second: 'second | seconds',
+  minute: 'minute | minutes',
+  hour: 'hour | hours',
+  day: 'day | days',
+  week: 'week | weeks',
+  month: 'month | months',
 }
 
 export default english
diff --git a/frontend/src/pages/Service.vue b/frontend/src/pages/Service.vue
index 93fc675a..3ca4a122 100644
--- a/frontend/src/pages/Service.vue
+++ b/frontend/src/pages/Service.vue
@@ -3,22 +3,20 @@
 
         <div class="col-12 mb-4">
 
-            <span class="mt-3 mb-3 text-white d-md-none btn d-block d-md-none" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
-                {{service.online ? "ONLINE" : "OFFLINE"}}
+            <span class="mt-3 mb-3 text-white d-md-none btn d-block d-md-none text-uppercase" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
+                {{service.online ? $t('online') : $t('offline')}}
             </span>
 
             <h4 class="mt-2">
                 <router-link to="/" class="text-black-50 text-decoration-none">{{core.name}}</router-link> - <span class="text-muted">{{service.name}}</span>
-                <span class="badge float-right d-none d-md-block" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
-                    {{service.online ? "ONLINE" : "OFFLINE"}}
+                <span class="badge float-right d-none d-md-block text-uppercase" :class="{'bg-success': service.online, 'bg-danger': !service.online}">
+                    {{service.online ? $t('online') : $t('offline')}}
                 </span>
             </h4>
 
             <ServiceTopStats :service="service"/>
 
-            <div>
-                <MessageBlock v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/>
-            </div>
+            <MessageBlock v-for="message in messagesInRange" v-bind:key="message.id" :message="message"/>
 
             <div class="row mt-5 mb-4">
                 <div class="col-12 col-md-5 font-2 mb-3 mb-md-0">
diff --git a/notifiers/command.go b/notifiers/command.go
index b922eed2..9c3cbfc5 100644
--- a/notifiers/command.go
+++ b/notifiers/command.go
@@ -64,7 +64,7 @@ func (c *commandLine) OnFailure(s *services.Service, f *failures.Failure) (strin
 
 // OnTest for commandLine triggers when this notifier has been saved
 func (c *commandLine) OnTest() (string, error) {
-	tmpl := ReplaceVars(c.Var1, services.Example(true), exampleFailure)
+	tmpl := ReplaceVars(c.Var1, services.Example(true), failures.Example())
 	in, out, err := runCommand(c.Host, tmpl)
 	utils.Log.Infoln(in)
 	utils.Log.Infoln(out)
diff --git a/notifiers/command_test.go b/notifiers/command_test.go
index 5633617d..4827e73f 100644
--- a/notifiers/command_test.go
+++ b/notifiers/command_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -39,12 +41,12 @@ func TestCommandNotifier(t *testing.T) {
 	})
 
 	t.Run("Command OnFailure", func(t *testing.T) {
-		_, err := Command.OnFailure(exampleService, exampleFailure)
+		_, err := Command.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("Command OnSuccess", func(t *testing.T) {
-		_, err := Command.OnSuccess(exampleService)
+		_, err := Command.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/discord_test.go b/notifiers/discord_test.go
index 16ae2be1..e1648ddc 100644
--- a/notifiers/discord_test.go
+++ b/notifiers/discord_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -46,12 +48,12 @@ func TestDiscordNotifier(t *testing.T) {
 	})
 
 	t.Run("discord OnFailure", func(t *testing.T) {
-		_, err := Discorder.OnFailure(exampleService, exampleFailure)
+		_, err := Discorder.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("discord OnSuccess", func(t *testing.T) {
-		_, err := Discorder.OnSuccess(exampleService)
+		_, err := Discorder.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/email_test.go b/notifiers/email_test.go
index fbbd425b..8c00cd3d 100644
--- a/notifiers/email_test.go
+++ b/notifiers/email_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -62,21 +64,21 @@ func TestEmailNotifier(t *testing.T) {
 	})
 
 	t.Run("email OnFailure", func(t *testing.T) {
-		_, err := email.OnFailure(exampleService, exampleFailure)
+		_, err := email.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("email OnSuccess", func(t *testing.T) {
-		_, err := email.OnSuccess(exampleService)
+		_, err := email.OnSuccess(services.Example(false))
 		assert.Nil(t, err)
 	})
 
 	t.Run("email Check Back Online", func(t *testing.T) {
-		assert.True(t, exampleService.Online)
+		assert.True(t, services.Example(true).Online)
 	})
 
 	t.Run("email OnSuccess Again", func(t *testing.T) {
-		_, err := email.OnSuccess(exampleService)
+		_, err := email.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/mobile_test.go b/notifiers/mobile_test.go
index c96ba6fd..ac358327 100644
--- a/notifiers/mobile_test.go
+++ b/notifiers/mobile_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -51,12 +53,12 @@ func TestMobileNotifier(t *testing.T) {
 	})
 
 	t.Run("Mobile OnFailure", func(t *testing.T) {
-		_, err := Mobile.OnFailure(exampleService, exampleFailure)
+		_, err := Mobile.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("Mobile OnSuccess", func(t *testing.T) {
-		_, err := Mobile.OnSuccess(exampleService)
+		_, err := Mobile.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/notifiers.go b/notifiers/notifiers.go
index a58535ff..9910a420 100644
--- a/notifiers/notifiers.go
+++ b/notifiers/notifiers.go
@@ -4,7 +4,6 @@ import (
 	"bytes"
 	"github.com/statping/statping/types/core"
 	"github.com/statping/statping/types/failures"
-	"github.com/statping/statping/types/null"
 	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"html/template"
@@ -12,7 +11,6 @@ import (
 )
 
 var log = utils.Log.WithField("type", "notifier")
-var exampleService = services.Example(true)
 
 type replacer struct {
 	Core    *core.Core
@@ -63,46 +61,6 @@ func ReplaceVars(input string, s *services.Service, f *failures.Failure) string
 	return ReplaceTemplate(input, replacer{Service: s, Failure: f, Core: core.App})
 }
 
-var ExampleService = &services.Service{
-	Id:                  1,
-	Name:                "Statping",
-	Domain:              "https://statping.com",
-	Expected:            null.NewNullString("a better response"),
-	ExpectedStatus:      200,
-	Interval:            60,
-	Type:                "http",
-	Method:              "get",
-	Timeout:             10,
-	Order:               2,
-	VerifySSL:           null.NewNullBool(true),
-	Public:              null.NewNullBool(true),
-	GroupId:             0,
-	Permalink:           null.NewNullString("statping"),
-	Online:              true,
-	Latency:             324399,
-	PingTime:            18399,
-	Online24Hours:       99.2,
-	Online7Days:         99.8,
-	AvgResponse:         300233,
-	FailuresLast24Hours: 4,
-	Checkpoint:          utils.Now().Add(-10 * time.Minute),
-	SleepDuration:       55,
-	LastResponse:        "returning from a response",
-	AllowNotifications:  null.NewNullBool(true),
-	UserNotified:        false,
-	UpdateNotify:        null.NewNullBool(true),
-	SuccessNotified:     false,
-	LastStatusCode:      200,
-	LastLookupTime:      5233,
-	LastLatency:         270233,
-	LastCheck:           utils.Now().Add(-15 * time.Second),
-	LastOnline:          utils.Now().Add(-15 * time.Second),
-	LastOffline:         utils.Now().Add(-10 * time.Minute),
-	SecondsOnline:       4500,
-	SecondsOffline:      300,
-	Redirect:            null.NewNullBool(true),
-}
-
 var exampleFailure = &failures.Failure{
 	Id:        1,
 	Issue:     "HTTP returned a 500 status code",
diff --git a/notifiers/pushover_test.go b/notifiers/pushover_test.go
index 0d00a8c6..58a52ddd 100644
--- a/notifiers/pushover_test.go
+++ b/notifiers/pushover_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -49,12 +51,12 @@ func TestPushoverNotifier(t *testing.T) {
 	})
 
 	t.Run("Pushover OnFailure", func(t *testing.T) {
-		_, err := Pushover.OnFailure(exampleService, exampleFailure)
+		_, err := Pushover.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("Pushover OnSuccess", func(t *testing.T) {
-		_, err := Pushover.OnSuccess(exampleService)
+		_, err := Pushover.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/slack_test.go b/notifiers/slack_test.go
index f6f5f8ca..ea21a093 100644
--- a/notifiers/slack_test.go
+++ b/notifiers/slack_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -47,12 +49,12 @@ func TestSlackNotifier(t *testing.T) {
 	})
 
 	t.Run("slack OnFailure", func(t *testing.T) {
-		_, err := slacker.OnFailure(exampleService, exampleFailure)
+		_, err := slacker.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("slack OnSuccess", func(t *testing.T) {
-		_, err := slacker.OnSuccess(exampleService)
+		_, err := slacker.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/telegram_test.go b/notifiers/telegram_test.go
index 0a028fb6..571dbd0b 100644
--- a/notifiers/telegram_test.go
+++ b/notifiers/telegram_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -53,12 +55,12 @@ func TestTelegramNotifier(t *testing.T) {
 	})
 
 	t.Run("Telegram OnFailure", func(t *testing.T) {
-		_, err := Telegram.OnFailure(exampleService, exampleFailure)
+		_, err := Telegram.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("Telegram OnSuccess", func(t *testing.T) {
-		_, err := Telegram.OnSuccess(exampleService)
+		_, err := Telegram.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/twilio_test.go b/notifiers/twilio_test.go
index 76e21071..d12a8bfe 100644
--- a/notifiers/twilio_test.go
+++ b/notifiers/twilio_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -53,12 +55,12 @@ func TestTwilioNotifier(t *testing.T) {
 	})
 
 	t.Run("Twilio OnFailure", func(t *testing.T) {
-		_, err := Twilio.OnFailure(exampleService, exampleFailure)
+		_, err := Twilio.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("Twilio OnSuccess", func(t *testing.T) {
-		_, err := Twilio.OnSuccess(exampleService)
+		_, err := Twilio.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/notifiers/webhook_test.go b/notifiers/webhook_test.go
index d8a5edb4..eb5fcbfa 100644
--- a/notifiers/webhook_test.go
+++ b/notifiers/webhook_test.go
@@ -2,8 +2,10 @@ package notifiers
 
 import (
 	"github.com/statping/statping/database"
+	"github.com/statping/statping/types/failures"
 	"github.com/statping/statping/types/notifications"
 	"github.com/statping/statping/types/null"
+	"github.com/statping/statping/types/services"
 	"github.com/statping/statping/utils"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
@@ -45,12 +47,12 @@ func TestWebhookNotifier(t *testing.T) {
 	})
 
 	t.Run("webhooker OnFailure", func(t *testing.T) {
-		_, err := Webhook.OnFailure(exampleService, exampleFailure)
+		_, err := Webhook.OnFailure(services.Example(false), failures.Example())
 		assert.Nil(t, err)
 	})
 
 	t.Run("webhooker OnSuccess", func(t *testing.T) {
-		_, err := Webhook.OnSuccess(exampleService)
+		_, err := Webhook.OnSuccess(services.Example(true))
 		assert.Nil(t, err)
 	})
 
diff --git a/utils/log.go b/utils/log.go
index add3ccbf..a6aaf5ea 100644
--- a/utils/log.go
+++ b/utils/log.go
@@ -42,9 +42,10 @@ func SentryInit(v *string, allow bool) {
 	allowReports := Params.GetBool("ALLOW_REPORTS")
 	if allowReports || allow || goEnv == "test" {
 		if err := sentry.Init(sentry.ClientOptions{
-			Dsn:         errorReporter,
-			Environment: goEnv,
-			Release:     version,
+			Dsn:              errorReporter,
+			Environment:      goEnv,
+			Release:          version,
+			AttachStacktrace: true,
 		}); err != nil {
 			Log.Errorln(err)
 		}