UX

frontend/src/API.js

@@ -56,6 +56,10 @@ class Api {
     return axios.get('api/services/' + id + '/failures?start=' + start + '&end=' + end + '&limit=' + limit+ '&offset=' + offset).then(response => (response.data))
   }
 
+  async service_failures_delete(service) {
+    return axios.delete('api/services/' + service.id + '/failures').then(response => (response.data))
+  }
+
   async service_delete(id) {
     return axios.delete('api/services/' + id).then(response => (response.data))
   }
@@ -105,9 +109,13 @@ class Api {
     return axios.post('api/incidents/'+incident.id+'/updates', data).then(response => (response.data))
   }
 
-    async incident_update_create(incident, data) {
+  async incident_update_create(update) {
-        return axios.post('api/incidents/'+incident.id+'/updates', data).then(response => (response.data))
+    return axios.post('api/incidents/'+update.incident+'/updates', update).then(response => (response.data))
-    }
+  }
+
+  async incident_update_delete(update) {
+    return axios.post('api/incidents/'+incident.id+'/updates', data).then(response => (response.data))
+  }
 
     async incidents_service(service) {
         return axios.get('api/services/'+service.id+'/incidents').then(response => (response.data))

frontend/src/assets/scss/base.scss

@@ -14,6 +14,16 @@ HTML,BODY {
   transition: height 0.3s ease;
 }
 
+.copy-btn {
+  background-color: white;
+  margin: 6px;
+  height: 26px;
+  font-size: 10pt;
+  padding: 3px 7px;
+  border: 1px solid #a7a7a7;
+  border-radius: 4px;
+}
+
 .slider-info {
   font-size: 9pt;
   font-weight: bold;

frontend/src/components/Service/Analytics.vue

@@ -47,9 +47,6 @@
         let todayAmount = this.addAmounts(todayTime)
         let yesterday = this.addAmounts(fetched)
 
-        window.console.log(todayAmount)
-        window.console.log(yesterday)
-
       },
       addAmounts(data) {
         let total = 0

frontend/src/components/Service/ServiceInfo.vue

@@ -47,16 +47,21 @@
                     <div class="col-4">
                         <button @click.prevent="Tab('incident')" class="btn btn-block btn-outline-secondary incident" :class="{'text-white btn-secondary': openTab==='incident'}" >Incidents</button>
                     </div>
-                    <div class="col-4">
+                <div class="col-4">
-                        <button @click.prevent="Tab('failures')" class="btn btn-block btn-outline-secondary failures" :disabled="service.stats.failures === 0" :class="{'text-white btn-secondary': openTab==='failures'}">
+                    <button @click.prevent="Tab('checkin')" class="btn btn-block btn-outline-secondary checkin" :class="{'text-white btn-secondary': openTab==='checkin'}" >Checkins</button>
-                            Failures <span class="badge badge-danger float-right mt-1">{{service.stats.failures}}</span></button>
+                </div>
-                    </div>
+                <div class="col-4">
+                    <button @click.prevent="Tab('failures')" class="btn btn-block btn-outline-secondary failures" :disabled="service.stats.failures === 0" :class="{'text-white btn-secondary': openTab==='failures'}">
+                        Failures <span class="badge badge-danger float-right mt-1">{{service.stats.failures}}</span></button>
+                </div>
 
                 <div v-if="openTab === 'incident'" class="col-12 mt-4">
                     <FormIncident :service="service" />
                 </div>
 
                 <div v-if="openTab === 'failures'" class="col-12 mt-4">
+                    <button @click.prevent="deleteFailures" class="btn btn-block btn-outline-secondary delete_failures" :disabled="service.stats.failures === 0">Delete Failures</button>
+
                     <ServiceFailures :service="service"/>
                 </div>
 
@@ -115,6 +120,13 @@
           this.loaded = true
       },
       methods: {
+        async deleteFailures() {
+          const c = confirm('Are you sure you want to delete all failures?')
+          if (c) {
+            await Api.service_failures_delete(this.service)
+            this.service = await Api.service(this.service.id)
+          }
+        },
           Tab(name) {
               if (this.openTab === name) {
                   this.openTab = ''
@@ -123,7 +135,6 @@
               this.openTab=name;
           },
         sinceYesterday(data) {
-            window.console.log(data)
           let total = 0
           data.forEach((f) => {
             total += parseInt(f.y)

frontend/src/components/Service/StatsGen.vue

@@ -52,9 +52,6 @@
           let todayAmount = this.addAmounts(todayTime)
           let yesterday = this.addAmounts(fetched)
 
-          window.console.log(todayAmount)
-          window.console.log(yesterday)
-
         },
         addAmounts(data) {
           let total = 0

frontend/src/forms/Incident.vue

@@ -7,13 +7,22 @@
                 <font-awesome-icon icon="times" />  Delete
             </button>
         </div>
+                <div class="card-body bg-light pt-3">
 
+                    <div v-for="(update, i) in incident.updates" class="alert alert-light" role="alert">
+                        <span class="badge badge-pill badge-info text-uppercase">{{update.type}}</span>
+                        <span class="float-right font-2">{{ago(update.created_at)}} ago</span>
 
+                        <span class="d-block mt-2">{{update.message}}
+                        <button @click="delete_update(update)" type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        </span>
+                    </div>
 
-
-                <div class="card-body bg-light pt-1">
                     <FormIncidentUpdates :incident="incident"/>
-                    <span class="font-2">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
+
+                    <span class="font-2 mt-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
                 </div>
     </div>
 
@@ -82,6 +91,10 @@
           await this.loadIncidents()
       },
       methods: {
+        async delete_update(update) {
+          await Api.incident_update_delete(update)
+          this.incidents = await Api.incidents_service(this.service)
+        },
             async loadIncidents() {
               this.incidents = await Api.incidents_service(this.service)
             },

frontend/src/forms/IncidentUpdates.vue

@@ -1,57 +1,26 @@
 <template>
-<div>
+    <form class="row" @submit.prevent="createIncidentUpdate">
-
-    <div v-for="(update, i) in updates" class="col-12 bg-active card pt-2 pb-2 mt-3 pl-3 pr-3">
-        <span class="font-4">
-            <font-awesome-icon v-if="update.type === 'Resolved'" icon="check-circle" class="mr-2"/>
-            <font-awesome-icon v-if="update.type === 'Update'" icon="asterisk" class="mr-2"/>
-            <font-awesome-icon v-if="update.type === 'Investigating'" icon="lightbulb" class="mr-2"/>
-            <font-awesome-icon v-if="update.type === 'Unknown'" icon="question" class="mr-2"/>
-
-            {{update.type}}
-        </span>
-        <span class="font-3 mt-3">{{update.message}}</span>
-    </div>
-
-        <div class="col-12 bg-active card pt-2 pb-2 mt-3 pl-3 pr-3">
-
-            <form @submit.prevent="createIncidentUpdate">
-
-            <div class="form-group row">
-                <label class="col-sm-4 col-form-label">Update Type</label>
-                <div class="col-sm-8">
-                    <select v-model="incident_update.type" class="form-control">
-                        <option value="Investigating">Investigating</option>
-                        <option value="Update">Update</option>
-                        <option value="Unknown">Unknown</option>
-                        <option value="Resolved">Resolved</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="form-group row">
-                <label class="col-sm-4 col-form-label">New Update</label>
-                <div class="col-sm-8">
-                    <textarea v-model="incident_update.message" rows="5" name="description" class="form-control" id="description" required></textarea>
-                </div>
-            </div>
-
-            <div class="form-group row">
-                <div class="col-sm-12">
-                    <button @click.prevent="createIncidentUpdate"
-                            :disabled="!incident.title || !incident.description"
-                            type="submit" class="btn btn-block btn-primary">
-                        Add Update
-                    </button>
-                </div>
-            </div>
-
-            </form>
 
+        <div class="col-3">
+            <select v-model="incident_update.type" class="form-control">
+                <option value="Investigating">Investigating</option>
+                <option value="Update">Update</option>
+                <option value="Unknown">Unknown</option>
+                <option value="Resolved">Resolved</option>
+            </select>
+        </div>
+        <div class="col-7">
+            <input v-model="incident_update.message" rows="5" name="description" class="form-control" id="message" required>
         </div>
 
-
+        <div class="col-2">
-</div>
+            <button @click.prevent="createIncidentUpdate"
+                    :disabled="!incident_update.message"
+                    type="submit" class="btn btn-block btn-primary">
+                Add
+            </button>
+        </div>
+    </form>
 </template>
 
 <script>
@@ -87,13 +56,8 @@
               this.updates = await Api.incident_updates(this.incident)
             },
           async createIncidentUpdate() {
-              await Api.incident_update_create(this.incident, this.incident_update)
+              await Api.incident_update_create(this.incident_update)
                 await this.loadUpdates()
-                this.incident_update = {
-                  incident: this.incident.id,
-                  message: "",
-                  type: ""
-                }
           }
   }
 }

notifiers/telegram.go

@@ -42,10 +42,10 @@ var Telegram = &telegram{&notifications.Notification{
 		Required:    true,
 	}, {
 		Type:        "text",
-		Title:       "Channel or User ID",
+		Title:       "Channel or User",
-		Placeholder: "789325392",
+		Placeholder: "@statping_channel",
-		SmallText:   "Insert your Telegram Channel ID or User ID here.",
+		SmallText:   "Insert your Telegram Channel or User here.",
-		DbField:     "Var1",
+		DbField:     "var1",
 		Required:    true,
 	}}},
 }

notifiers/telegram_test.go

@@ -25,7 +25,6 @@ func init() {
 }
 
 func TestTelegramNotifier(t *testing.T) {
-	t.Skip()
 	db, err := database.OpenTester()
 	require.Nil(t, err)
 	db.AutoMigrate(&notifications.Notification{})