From 64be1309296bb34f0692ae8b1fc57046f5cb41b6 Mon Sep 17 00:00:00 2001 From: Smit Patel Date: Thu, 11 Aug 2022 12:04:16 +0530 Subject: [PATCH] PCORE-2161: Adding edit option to created incidents in admin page for external status page (#33) * feat: added edit option for created incident and fixed bugs in dashboard service summary * feat: added loading ui when adding incidents * fix: downtime page log errors * fix: downtime servie name error * fix: minor style change --- frontend/src/API.js | 4 + .../components/Dashboard/DowntimesList.vue | 12 +- .../src/components/Dashboard/Incidents.vue | 135 +++++++++++++----- .../components/Dashboard/ServiceEvents.vue | 2 +- .../src/components/Dashboard/ServiceInfo.vue | 6 +- .../components/Elements/IncidentUpdate.vue | 24 +++- frontend/src/forms/IncidentUpdates.vue | 15 +- frontend/src/languages/english.js | 3 + 8 files changed, 142 insertions(+), 59 deletions(-) diff --git a/frontend/src/API.js b/frontend/src/API.js index c286fd4a..656e0cf9 100644 --- a/frontend/src/API.js +++ b/frontend/src/API.js @@ -148,6 +148,10 @@ class Api { return axios.post('api/services/' + service_id + '/incidents', data).then(response => (response.data)) } + async incident_edit(incident_id, data) { + return axios.patch('api/incidents/' + incident_id, data).then(response => (response.data)) + } + async incident_delete(incident) { return axios.delete('api/incidents/' + incident.id).then(response => (response.data)) } diff --git a/frontend/src/components/Dashboard/DowntimesList.vue b/frontend/src/components/Dashboard/DowntimesList.vue index 03b8f027..8a917ae7 100644 --- a/frontend/src/components/Dashboard/DowntimesList.vue +++ b/frontend/src/components/Dashboard/DowntimesList.vue @@ -53,8 +53,8 @@ :key="downtime.id" > - - {{ downtime.service.name }} + + {{ (downtime.service && downtime.service.name) || 'Deleted service' }} @@ -65,16 +65,14 @@ - + {{ downtime.end ? niceDateWithYear(downtime.end) : 'Ongoing' }} {{ downtime.sub_status }} @@ -87,7 +85,7 @@ -
+
+
+ + +
@@ -15,9 +21,16 @@
-
Create Incident
+
{{incident.id ? `${$t('update')} ${incident.title}` : $t('incident_create')}} + + + +
+
-
+
@@ -34,10 +47,11 @@
-
@@ -54,20 +68,22 @@ import Api from "../../API"; const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/forms/IncidentUpdates') - export default { - name: 'Incidents', - components: {FormIncidentUpdates}, - data() { - return { - serviceID: 0, - incidents: [], - incident: { - title: "", - description: "", - service: 0, - } - } - }, +export default { + name: 'Incidents', + components: {FormIncidentUpdates}, + data() { + return { + serviceID: 0, + incidents: [], + isLoading: false, + incidentId: null, + incident: { + title: "", + description: "", + service: 0, + } + } + }, created() { this.serviceID = Number(this.$route.params.id); @@ -80,13 +96,19 @@ const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/ methods: { - async delete(i) { - this.res = await Api.incident_delete(i) - if (this.res.status === "success") { - this.incidents = this.incidents.filter(obj => obj.id !== i.id); - //await this.loadIncidents() - } - }, + async delete(i) { + this.isLoading = true; + this.incidentId = i.id; + + this.res = await Api.incident_delete(i) + if (this.res.status === "success") { + this.incidents = this.incidents.filter(obj => obj.id !== i.id); + } + + this.isLoading = false; + this.incidentId = null; + }, + async deleteIncident(incident) { const modal = { visible: true, @@ -99,23 +121,62 @@ const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/ this.$store.commit("setModal", modal) }, + async saveMessage() { + if (this.incident.id) { + this.updateIncident(); + } else { + this.createIncident(); + } + }, + async createIncident() { - this.res = await Api.incident_create(this.serviceID, this.incident) - if (this.res.status === "success") { - this.incidents.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates + this.isLoading = true; + + const res = await Api.incident_create(this.serviceID, this.incident) + if (res.status === "success") { + this.incidents.push(res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates //await this.loadIncidents() } // TODO: further error checking here... maybe alert user it failed with modal or so - // reset the form data - this.incident = { - title: "", - description: "", - service: this.serviceID, + this.resetIncident(); + this.isLoading = false; + }, + + async updateIncident() { + const {id, title, description} = this.incident; + + this.isLoading = true; + const res = await Api.incident_edit(id, {title, description}); + if (res.status === "success") { + this.incidents = this.incidents.map(incident => { + if(incident.id === id) { + return res.output + } + + return incident; + }); + + this.resetIncident(); } + + this.isLoading = false; + }, + + editIncident(incident) { + this.incident = incident; }, async loadIncidents() { this.incidents = await Api.incidents_service(this.serviceID) + }, + + resetIncident() { + // reset the form data + this.incident = { + title: "", + description: "", + service: 0, + } } } diff --git a/frontend/src/components/Dashboard/ServiceEvents.vue b/frontend/src/components/Dashboard/ServiceEvents.vue index f325c4b9..eccc2255 100644 --- a/frontend/src/components/Dashboard/ServiceEvents.vue +++ b/frontend/src/components/Dashboard/ServiceEvents.vue @@ -69,7 +69,7 @@ name: "ServiceEvents", return this.$store.getters.serviceMessages(this.service.id) }, success_event() { - if (this.service.online && this.service.messages.length === 0 && this.service.incidents.length === 0) { + if (this.service.online && !this.service.messages && !this.service.incidents) { return true } return false diff --git a/frontend/src/components/Dashboard/ServiceInfo.vue b/frontend/src/components/Dashboard/ServiceInfo.vue index 79d9e3a4..3f6ae317 100644 --- a/frontend/src/components/Dashboard/ServiceInfo.vue +++ b/frontend/src/components/Dashboard/ServiceInfo.vue @@ -1,9 +1,9 @@