mirror of https://github.com/statping/statping
implemented edit/create/delete
smit95tpatel
parent
dd325cefc3
commit
67a953a982
|
|
@ -396,6 +396,18 @@ class Api {
|
|||
async downtime (id) {
|
||||
return axios.get(`api/downtimes/${id}`).then((response) => response.data);
|
||||
}
|
||||
|
||||
async downtime_create (data) {
|
||||
return axios.post('/api/downtimes', data).then((response) => response.data);
|
||||
}
|
||||
|
||||
async downtime_update ({ id, data }) {
|
||||
return axios.patch(`/api/downtimes/${id}`, data).then((response) => response.data);
|
||||
}
|
||||
|
||||
async downtime_delete (id) {
|
||||
return axios.delete(`/api/downtimes/${id}`).then((response) => response.data);
|
||||
}
|
||||
}
|
||||
const api = new Api();
|
||||
export default api;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<DowntimesList />
|
||||
<DowntimesList :get-downtimes="getDowntimes" />
|
||||
<Pagination
|
||||
v-if="downtimes.length !== 0"
|
||||
:get-next-downtimes="getNextDowntimes"
|
||||
|
|
@ -85,7 +85,7 @@ export default {
|
|||
this.getDowntimes(this.params);
|
||||
},
|
||||
methods: {
|
||||
getDowntimes: async function (params) {
|
||||
getDowntimes: async function (params = this.params) {
|
||||
this.isLoading = true;
|
||||
await this.$store.dispatch({ type: 'getDowntimes', payload: params });
|
||||
this.isLoading = false;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
v-if="downtimes.length === 0"
|
||||
class="alert alert-dark d-block mt-3 mb-0"
|
||||
>
|
||||
You currently don't have any services!
|
||||
You currently don't have any downtimes for this services!
|
||||
</div>
|
||||
|
||||
<table
|
||||
|
|
@ -54,8 +54,7 @@
|
|||
>
|
||||
<td>
|
||||
<span>
|
||||
<!-- {{ serviceById(downtime.service_id).name }} -->
|
||||
{{ downtime.service_id }}
|
||||
{{ downtime.service.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
|
|
@ -93,22 +92,22 @@
|
|||
v-if="$store.state.admin"
|
||||
:disabled="isLoading"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
@click.prevent="goto({path: `/dashboard/edit_service/${service.id}`, params: {service: service} })"
|
||||
@click.prevent="goto(`/dashboard/edit_downtime/${downtime.id}`)"
|
||||
>
|
||||
<FontAwesomeIcon icon="edit" />
|
||||
</button>
|
||||
<button
|
||||
v-if="$store.state.admin"
|
||||
:disabled="isLoading"
|
||||
:disabled="downtimeDeleteId === downtime.id && isLoading"
|
||||
class="btn btn-sm btn-danger"
|
||||
@click.prevent="deleteService(service)"
|
||||
@click.prevent="handleDowntimeDelete(downtime)"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
v-if="!isLoading"
|
||||
icon="times"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
v-if="isLoading"
|
||||
v-if="downtimeDeleteId === downtime.id && isLoading"
|
||||
icon="circle-notch"
|
||||
spin
|
||||
/>
|
||||
|
|
@ -123,17 +122,51 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters, mapState } from 'vuex';
|
||||
import Api from '../../API';
|
||||
|
||||
export default {
|
||||
name: 'DashboardDowntimeList',
|
||||
props: {
|
||||
getDowntimes: {
|
||||
type: Function,
|
||||
default: function () {}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
downtimeDeleteId: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'downtimes' ]),
|
||||
...mapGetters([ 'serviceById' ])
|
||||
},
|
||||
methods: {
|
||||
goto: function (to) {
|
||||
this.$router.push(to);
|
||||
},
|
||||
setIsLoading ({ id, isLoading }) {
|
||||
this.downtimeDeleteId = id;
|
||||
this.isLoading = isLoading;
|
||||
},
|
||||
delete: async function (id) {
|
||||
this.setIsLoading({ id, isLoading: true });
|
||||
await Api.downtime_delete(id);
|
||||
this.setIsLoading({ id: null, isLoading: false });
|
||||
|
||||
this.getDowntimes();
|
||||
},
|
||||
handleDowntimeDelete: async function (downtime) {
|
||||
const modal = {
|
||||
visible: true,
|
||||
title: 'Delete Service',
|
||||
body: `Are you sure you want to delete the downtime for service ${downtime.service.name}?`,
|
||||
btnColor: 'btn-danger',
|
||||
btnText: 'Delete Service',
|
||||
func: () => this.delete(downtime.id),
|
||||
};
|
||||
this.$store.commit('setModal', modal);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,7 +18,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<FormDowntime />
|
||||
<FormDowntime
|
||||
v-else
|
||||
:edit-downtime="editDowntime"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,9 +37,9 @@ export default {
|
|||
FormDowntime
|
||||
},
|
||||
data: function () {
|
||||
return { isLoading: false, downtime: null };
|
||||
return { isLoading: false, editDowntime: null };
|
||||
},
|
||||
created () {
|
||||
mounted () {
|
||||
this.getDowntime();
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -47,10 +50,10 @@ export default {
|
|||
}
|
||||
|
||||
this.isLoading = true;
|
||||
const { output } = await Api.getDowntime(id);
|
||||
const { output } = await Api.downtime(id);
|
||||
this.isLoading = false;
|
||||
|
||||
this.downtime = output;
|
||||
|
||||
this.editDowntime = output;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,261 @@
|
|||
<template>
|
||||
<form @submit.prevent="() => {}">
|
||||
<form>
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t("downtime_info") }}
|
||||
</div>
|
||||
<div class="card-body" />
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{
|
||||
$t("service_name")
|
||||
}}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<select
|
||||
v-model="downtime.serviceId"
|
||||
name="service"
|
||||
class="form-control"
|
||||
required
|
||||
:disabled="$route.params.id"
|
||||
>
|
||||
<option
|
||||
v-for="(service) in services"
|
||||
:key="service.id"
|
||||
:value="service.id"
|
||||
>
|
||||
{{ service.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted"
|
||||
>
|
||||
Select Servive you want to have downtime for
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{
|
||||
$t("downtime_status")
|
||||
}}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<select
|
||||
v-model="downtime.subStatus"
|
||||
name="service"
|
||||
class="form-control"
|
||||
required
|
||||
>
|
||||
<option
|
||||
value="degraded"
|
||||
>
|
||||
Degraded
|
||||
</option>
|
||||
<option value="down">
|
||||
Down
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted"
|
||||
>
|
||||
Choose status you want to give to the Servive
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{
|
||||
$t("downtime_date_range")
|
||||
}}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="start"
|
||||
v-model="downtime.start"
|
||||
type="text"
|
||||
name="start"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Start Date"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="end"
|
||||
v-model="downtime.end"
|
||||
type="text"
|
||||
name="end"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select End Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted"
|
||||
>
|
||||
Enter the Start and End date for which your service will be down/degraded
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">
|
||||
{{
|
||||
$t("failures")
|
||||
}}
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input
|
||||
v-model.number="downtime.failures"
|
||||
type="number"
|
||||
name="check_interval"
|
||||
class="form-control"
|
||||
min="0"
|
||||
required
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
>
|
||||
{{ errors.failures }}
|
||||
</small>
|
||||
<small
|
||||
class="form-text text-muted"
|
||||
>
|
||||
Select the number of failures you want for your service
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-12">
|
||||
<button
|
||||
:disabled="isLoading || !isCreateDowntimeBtnEnabled()"
|
||||
type="submit"
|
||||
class="btn btn-success btn-block"
|
||||
@click.prevent="saveDowntime"
|
||||
>
|
||||
{{ $route.params.id ? $t("downtime_update") : $t("downtime_create") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Api from '../API';
|
||||
import FlatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
name: 'FormDowntime',
|
||||
components: {
|
||||
FlatPickr,
|
||||
},
|
||||
props: {
|
||||
editDowntime: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
errors: {},
|
||||
downtime: {
|
||||
serviceId: '',
|
||||
subStatus: 'degraded',
|
||||
failures: 20,
|
||||
start: new Date(),
|
||||
end: new Date(),
|
||||
},
|
||||
config: {
|
||||
altFormat: 'D, J M Y, \\at h:iK',
|
||||
altInput: true,
|
||||
enableTime: true,
|
||||
dateFormat: 'Z',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
services : function (state) {
|
||||
const { id } = this.$route.params;
|
||||
|
||||
if (!id && state.services.length > 0) {
|
||||
this.downtime.serviceId = state.services[0].id;
|
||||
}
|
||||
|
||||
return state.services;
|
||||
}
|
||||
}),
|
||||
},
|
||||
mounted: function () {
|
||||
const { service_id, sub_status, failures, start, end } = this.editDowntime;
|
||||
|
||||
this.downtime = {
|
||||
start,
|
||||
end,
|
||||
failures,
|
||||
serviceId: service_id,
|
||||
subStatus: sub_status
|
||||
};
|
||||
|
||||
},
|
||||
methods: {
|
||||
isCreateDowntimeBtnEnabled: function () {
|
||||
const { serviceId, subStatus, failures, start, end } = this.downtime;
|
||||
|
||||
return serviceId && subStatus && failures && start && end;
|
||||
},
|
||||
checkFormErrors: function (value) {
|
||||
const errors = {};
|
||||
|
||||
// Check for valid positive numbers
|
||||
if (!(/^\d+$/.test(value.failures))) {
|
||||
errors.failures = 'Enter Valid Positve Number without decimal point';
|
||||
}
|
||||
|
||||
return errors;
|
||||
},
|
||||
saveDowntime: async function () {
|
||||
const errors = this.checkFormErrors(this.downtime);
|
||||
const id = this.$route.params.id;
|
||||
|
||||
// Check of invalid input.
|
||||
if (Object.keys(errors).length > 0) {
|
||||
this.errors = Object.assign({}, errors);
|
||||
return;
|
||||
}
|
||||
|
||||
const { serviceId, subStatus } = this.downtime;
|
||||
|
||||
const downtime = {
|
||||
...this.downtime,
|
||||
...(!id && { 'service_id': serviceId }),
|
||||
'sub_status': subStatus,
|
||||
};
|
||||
|
||||
this.isLoading=true;
|
||||
if (id) {
|
||||
await Api.downtime_update({ id, data: downtime });
|
||||
} else {
|
||||
await Api.downtime_create(downtime);
|
||||
}
|
||||
this.isLoading=false;
|
||||
|
||||
this.$router.push('/dashboard/downtimes');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label class="col-form-label">
|
||||
Downtime Date Range
|
||||
{{ $t('downtime_date_range') }}
|
||||
</label>
|
||||
<div class="form-row">
|
||||
<div class="col-sm-6">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
placeholder="Select Start Date"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
placeholder="Select End Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -136,7 +136,6 @@ export default {
|
|||
config: {
|
||||
altFormat: 'D, J M Y',
|
||||
altInput: true,
|
||||
allowInput: true,
|
||||
dateFormat: 'Z',
|
||||
maxDate: new Date()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ const english = {
|
|||
services: 'Services',
|
||||
downtimes: 'Downtimes',
|
||||
downtime_info: 'Downtime Info',
|
||||
downtime_status: 'Downtime Status',
|
||||
downtime_date_range: 'Downtime Date Range',
|
||||
downtime_create: 'Create Downtime',
|
||||
downtime_update: 'Update Downtime',
|
||||
filters: 'Filters',
|
||||
service: 'Service',
|
||||
clear: 'Clear',
|
||||
|
|
|
|||
|
|
@ -153,6 +153,13 @@ const routes = [
|
|||
requiresAuth: true,
|
||||
title: 'Statping - Create Downtime',
|
||||
}
|
||||
},{
|
||||
path: 'edit_downtime/:id',
|
||||
component: EditDowntime,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'Statping - Update Downtime',
|
||||
}
|
||||
},{
|
||||
path: 'messages',
|
||||
component: DashboardMessages,
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export default new Vuex.Store({
|
|||
},
|
||||
async getDowntimes (context, { payload }) {
|
||||
const { output } = await Api.downtimes(payload);
|
||||
context.commit('setDowntimes', output);
|
||||
context.commit('setDowntimes', output ?? []);
|
||||
},
|
||||
async loadCore (context) {
|
||||
const [ core, token ] = await Promise.all([ Api.core(), Api.token() ]);
|
||||
|
|
|
|||
Loading…
Reference in New Issue