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>
|
||||
<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}}
|
||||
<button @click="deleteIncident(incident)" class="btn btn-sm btn-danger float-right">
|
||||
<font-awesome-icon icon="times" /> Delete
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
<span class="font-2 p-2 pl-3">Created: {{niceDate(incident.created_at)}} | Last Update: {{niceDate(incident.updated_at)}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card contain-card text-black-50 bg-white">
|
||||
|
|
@ -44,59 +45,70 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "../../API";
|
||||
import FormIncidentUpdates from "@/forms/IncidentUpdates";
|
||||
import Api from "../../API";
|
||||
import FormIncidentUpdates from "@/forms/IncidentUpdates";
|
||||
|
||||
export default {
|
||||
name: 'Incidents',
|
||||
components: {FormIncidentUpdates},
|
||||
data() {
|
||||
return {
|
||||
service_id: 0,
|
||||
ready: false,
|
||||
incidents: [],
|
||||
incident: {
|
||||
export default {
|
||||
name: 'Incidents',
|
||||
components: {FormIncidentUpdates},
|
||||
data() {
|
||||
return {
|
||||
serviceID: 0,
|
||||
incidents: [],
|
||||
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: "",
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -5,87 +5,103 @@
|
|||
No updates found, create a new Incident Update below.
|
||||
</div>
|
||||
|
||||
<div v-for="(update, i) in updates">
|
||||
<div v-for="update in updates" :key="update.id">
|
||||
<div 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">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
<button @click="delete_update(update)" type="button" class="close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
</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">
|
||||
<button @click.prevent="createIncidentUpdate"
|
||||
:disabled="!incident_update.message"
|
||||
type="submit" class="btn btn-block btn-primary">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<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">
|
||||
<button @click.prevent="createIncidentUpdate"
|
||||
:disabled="!incident_update.message"
|
||||
type="submit" class="btn btn-block btn-primary">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "../API";
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
import Api from "../API";
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
name: 'FormIncidentUpdates',
|
||||
components: {
|
||||
export default {
|
||||
name: 'FormIncidentUpdates',
|
||||
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...
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
props: {
|
||||
incident: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
updates: this.incident.updates,
|
||||
incident_update: {
|
||||
incident: this.incident.id,
|
||||
message: "",
|
||||
type: ""
|
||||
async mounted() {
|
||||
await this.loadUpdates()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
async delete_update(update) {
|
||||
this.res = await Api.incident_update_delete(update)
|
||||
if (this.res.status === "success") {
|
||||
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
|
||||
//await this.loadUpdates()
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue