mirror of https://github.com/statping/statping
Merge pull request #523 from fabiopbx/bugfix-522
correct display of incident updates on delete, fixes #522. Includes #514pull/536/head
Hunter Long
GitHub
commit
4d490ffa20
|
|
@ -1,16 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div v-for="(incident, i) in incidents" class="card contain-card text-black-50 bg-white mb-4">
|
|
||||||
|
<div v-for="incident in incidents" :key="incident.id" class="card contain-card text-black-50 bg-white mb-4">
|
||||||
<div class="card-header">Incident: {{incident.title}}
|
<div class="card-header">Incident: {{incident.title}}
|
||||||
<button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
|
<button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
|
||||||
<font-awesome-icon icon="times" /> Delete
|
<font-awesome-icon icon="times" /> Delete
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormIncidentUpdates :incident="incident"/>
|
<FormIncidentUpdates :incident="incident"/>
|
||||||
|
|
||||||
<span class="font-2 p-2 pl-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
|
<span class="font-2 p-2 pl-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="card contain-card text-black-50 bg-white">
|
<div class="card contain-card text-black-50 bg-white">
|
||||||
|
|
@ -44,59 +45,70 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Api from "../../API";
|
import Api from "../../API";
|
||||||
import FormIncidentUpdates from "@/forms/IncidentUpdates";
|
import FormIncidentUpdates from "@/forms/IncidentUpdates";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Incidents',
|
name: 'Incidents',
|
||||||
components: {FormIncidentUpdates},
|
components: {FormIncidentUpdates},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
service_id: 0,
|
serviceID: 0,
|
||||||
ready: false,
|
incidents: [],
|
||||||
incidents: [],
|
incident: {
|
||||||
incident: {
|
title: "",
|
||||||
|
description: "",
|
||||||
|
service: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.serviceID = Number(this.$route.params.id);
|
||||||
|
this.incident.service = Number(this.$route.params.id);
|
||||||
|
},
|
||||||
|
|
||||||
|
async mounted() {
|
||||||
|
await this.loadIncidents()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
async deleteIncident(incident) {
|
||||||
|
let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
|
||||||
|
if (c) {
|
||||||
|
this.res = await Api.incident_delete(incident)
|
||||||
|
if (this.res.status === "success") {
|
||||||
|
this.incidents = this.incidents.filter(obj => obj.id !== incident.id); // 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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
//await this.loadIncidents()
|
||||||
|
} // TODO: further error checking here... maybe alert user it failed with modal or so
|
||||||
|
|
||||||
|
// reset the form data
|
||||||
|
this.incident = {
|
||||||
title: "",
|
title: "",
|
||||||
description: "",
|
description: "",
|
||||||
service: 0,
|
service: this.serviceID,
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadIncidents() {
|
||||||
|
this.incidents = await Api.incidents_service(this.serviceID)
|
||||||
}
|
}
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
theID() {
|
|
||||||
return this.$route.params.id
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async mounted() {
|
|
||||||
await this.loadIncidents()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getIncidents() {
|
|
||||||
return await Api.incidents_service(this.theID)
|
|
||||||
},
|
|
||||||
async deleteIncident(incident) {
|
|
||||||
let c = confirm(`Are you sure you want to delete '${incident.title}'?`)
|
|
||||||
if (c) {
|
|
||||||
await Api.incident_delete(incident)
|
|
||||||
await this.loadIncidents()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async loadIncidents() {
|
|
||||||
this.incidents = await Api.incidents_service(this.service_id)
|
|
||||||
},
|
|
||||||
async createIncident() {
|
|
||||||
await Api.incident_create(this.theID, this.incident)
|
|
||||||
await this.loadIncidents()
|
|
||||||
this.incident = {
|
|
||||||
title: "",
|
|
||||||
description: "",
|
|
||||||
service: this.service_id,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -5,87 +5,103 @@
|
||||||
No updates found, create a new Incident Update below.
|
No updates found, create a new Incident Update below.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-for="(update, i) in updates">
|
<div v-for="update in updates" :key="update.id">
|
||||||
<div class="alert alert-light" role="alert">
|
<div class="alert alert-light" role="alert">
|
||||||
<span class="badge badge-pill badge-info text-uppercase">{{update.type}}</span>
|
<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="float-right font-2">{{ago(update.created_at)}} ago</span>
|
||||||
<span class="d-block mt-2">{{update.message}}
|
<span class="d-block mt-2">{{update.message}}
|
||||||
<button @click="delete_update(update)" type="button" class="close">
|
<button @click="delete_update(update)" type="button" class="close">
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form class="row" @submit.prevent="createIncidentUpdate">
|
|
||||||
<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">
|
<form class="row" @submit.prevent="createIncidentUpdate">
|
||||||
<button @click.prevent="createIncidentUpdate"
|
<div class="col-3">
|
||||||
:disabled="!incident_update.message"
|
<select v-model="incident_update.type" class="form-control">
|
||||||
type="submit" class="btn btn-block btn-primary">
|
<option value="Investigating">Investigating</option>
|
||||||
Add
|
<option value="Update">Update</option>
|
||||||
</button>
|
<option value="Unknown">Unknown</option>
|
||||||
</div>
|
<option value="Resolved">Resolved</option>
|
||||||
</form>
|
</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">
|
||||||
|
<button @click.prevent="createIncidentUpdate"
|
||||||
|
:disabled="!incident_update.message"
|
||||||
|
type="submit" class="btn btn-block btn-primary">
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Api from "../API";
|
import Api from "../API";
|
||||||
import flatPickr from 'vue-flatpickr-component';
|
import flatPickr from 'vue-flatpickr-component';
|
||||||
import 'flatpickr/dist/flatpickr.css';
|
import 'flatpickr/dist/flatpickr.css';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'FormIncidentUpdates',
|
name: 'FormIncidentUpdates',
|
||||||
components: {
|
components: {},
|
||||||
|
props: {
|
||||||
|
incident: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
updates: [],
|
||||||
|
incident_update: {
|
||||||
|
incident: this.incident.id,
|
||||||
|
message: "",
|
||||||
|
type: "Investigating" // TODO: default to something.. theres is no error checking for blank submission...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
},
|
async mounted() {
|
||||||
props: {
|
await this.loadUpdates()
|
||||||
incident: {
|
},
|
||||||
type: Object,
|
|
||||||
required: true
|
methods: {
|
||||||
}
|
|
||||||
},
|
async delete_update(update) {
|
||||||
data () {
|
this.res = await Api.incident_update_delete(update)
|
||||||
return {
|
if (this.res.status === "success") {
|
||||||
updates: this.incident.updates,
|
this.updates = this.updates.filter(obj => obj.id !== update.id); // this is better in terms of not having to querry the db to get a fresh copy of all updates
|
||||||
incident_update: {
|
//await this.loadUpdates()
|
||||||
incident: this.incident.id,
|
}
|
||||||
message: "",
|
},
|
||||||
type: ""
|
|
||||||
|
async createIncidentUpdate() {
|
||||||
|
this.res = await Api.incident_update_create(this.incident_update)
|
||||||
|
if (this.res.status === "success") {
|
||||||
|
this.updates.push(this.res.output) // this is better in terms of not having to querry the db to get a fresh copy of all updates
|
||||||
|
//await this.loadUpdates()
|
||||||
|
} // TODO: further error checking here... maybe alert user it failed with modal or so
|
||||||
|
|
||||||
|
// reset the form data
|
||||||
|
this.incident_update = {
|
||||||
|
incident: this.incident.id,
|
||||||
|
message: "",
|
||||||
|
type: "Investigating"
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadUpdates() {
|
||||||
|
this.updates = await Api.incident_updates(this.incident)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
beforeRouteUpdate (to, from, next) {
|
|
||||||
|
|
||||||
},
|
|
||||||
async mounted() {
|
|
||||||
await this.loadUpdates()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async delete_update(update) {
|
|
||||||
await Api.incident_update_delete(update)
|
|
||||||
await this.loadUpdates()
|
|
||||||
},
|
|
||||||
async createIncidentUpdate() {
|
|
||||||
await Api.incident_update_create(this.incident_update)
|
|
||||||
await this.loadUpdates()
|
|
||||||
},
|
|
||||||
async loadUpdates() {
|
|
||||||
this.updates = await Api.incident_updates(this.incident)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue