mirror of https://github.com/statping/statping
refactored code for naming convention and fixed some style
smit95tpatel
parent
f60d3431cf
commit
dd325cefc3
|
|
@ -2,5 +2,6 @@
|
|||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"editor.defaultFormatter": null
|
||||
"editor.defaultFormatter": null,
|
||||
"eslint.validate": ["javascript"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -387,11 +387,15 @@ class Api {
|
|||
await axios.all([ all ]);
|
||||
}
|
||||
|
||||
async getDowntimes ({ serviceId, start, end, skip, count, subStatus }) {
|
||||
async downtimes ({ serviceId, start, end, skip, count, subStatus }) {
|
||||
return axios.get('api/downtimes', {
|
||||
params: { service_id: serviceId, start, end, skip, count, sub_status: subStatus }
|
||||
}).then((response) => response.data);
|
||||
}
|
||||
|
||||
async downtime (id) {
|
||||
return axios.get(`api/downtimes/${id}`).then((response) => response.data);
|
||||
}
|
||||
}
|
||||
const api = new Api();
|
||||
export default api;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,49 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DowntimesFilterForm
|
||||
:handle-clear-filters="handleClearFilters"
|
||||
:params="params"
|
||||
:handle-filter-search="handleFilterSearch"
|
||||
/>
|
||||
<div class="col-12">
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t('downtimes') }}
|
||||
<!-- <router-link
|
||||
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t('downtimes') }}
|
||||
<router-link
|
||||
v-if="$store.state.admin"
|
||||
to="/dashboard/create_service"
|
||||
to="/dashboard/create_downtime"
|
||||
class="btn btn-sm btn-success float-right"
|
||||
>
|
||||
<FontAwesomeIcon icon="plus" /> {{ $t('create') }}
|
||||
</router-link> -->
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="loader d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="spinner-border"
|
||||
role="status"
|
||||
>
|
||||
<span class="sr-only">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<DowntimesList />
|
||||
<Pagination
|
||||
v-if="downtimes.length !== 0"
|
||||
:get-next-downtimes="getNextDowntimes"
|
||||
:get-prev-downtimes="getPrevDowntimes"
|
||||
:skip="params.skip"
|
||||
:count="params.count"
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="mt-5"
|
||||
>
|
||||
<div class="col-12 text-center">
|
||||
<FontAwesomeIcon
|
||||
icon="circle-notch"
|
||||
size="3x"
|
||||
spin
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-3 mb-3">
|
||||
<span class="text-muted">
|
||||
Loading Downtimes
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<DowntimesList />
|
||||
<Pagination
|
||||
v-if="downtimes.length !== 0"
|
||||
:get-next-downtimes="getNextDowntimes"
|
||||
:get-prev-downtimes="getPrevDowntimes"
|
||||
:skip="params.skip"
|
||||
:count="params.count"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -104,10 +107,4 @@ export default {
|
|||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loader {
|
||||
min-height: 100px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -125,6 +125,7 @@
|
|||
import { mapGetters, mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'DashboardDowntimeList',
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="row mt-5"
|
||||
>
|
||||
<div class="col-12 text-center">
|
||||
<FontAwesomeIcon
|
||||
icon="circle-notch"
|
||||
size="3x"
|
||||
spin
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 text-center mt-3 mb-3">
|
||||
<span class="text-muted">
|
||||
Loading Downtime
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormDowntime />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from '../../API';
|
||||
|
||||
const FormDowntime = () =>
|
||||
import(/* webpackChunkName: "dashboard" */ '../../forms/Downtime.vue');
|
||||
|
||||
export default {
|
||||
name: 'EditDowntime',
|
||||
components: {
|
||||
FormDowntime
|
||||
},
|
||||
data: function () {
|
||||
return { isLoading: false, downtime: null };
|
||||
},
|
||||
created () {
|
||||
this.getDowntime();
|
||||
},
|
||||
methods: {
|
||||
getDowntime: async function () {
|
||||
const id = this.$route.params.id;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
const { output } = await Api.getDowntime(id);
|
||||
this.isLoading = false;
|
||||
|
||||
this.downtime = output;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'DasboardDowntimePagination',
|
||||
props: {
|
||||
count:{
|
||||
type: Number,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<form @submit.prevent="() => {}">
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t("downtime_info") }}
|
||||
</div>
|
||||
<div class="card-body" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -1,109 +1,107 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t('filters') }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-2">
|
||||
<label class="col-form-label">
|
||||
{{ $t('service') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="params.serviceId"
|
||||
name="service"
|
||||
class="form-control"
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t('filters') }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-3">
|
||||
<label class="col-form-label">
|
||||
{{ $t('service') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="params.serviceId"
|
||||
name="service"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">
|
||||
Select Service
|
||||
</option>
|
||||
<option
|
||||
v-for="service in services"
|
||||
:key="service.id"
|
||||
:value="service.id"
|
||||
>
|
||||
<option value="">
|
||||
Select Service
|
||||
</option>
|
||||
<option
|
||||
v-for="service in services"
|
||||
:key="service.id"
|
||||
:value="service.id"
|
||||
>
|
||||
{{ service.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label class="col-form-label">
|
||||
Downtime Date Range
|
||||
</label>
|
||||
<div class="form-row">
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="start"
|
||||
v-model="params.start"
|
||||
type="text"
|
||||
name="start"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="end"
|
||||
v-model="params.end"
|
||||
type="text"
|
||||
name="end"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
/>
|
||||
</div>
|
||||
{{ service.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label class="col-form-label">
|
||||
Downtime Date Range
|
||||
</label>
|
||||
<div class="form-row">
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="start"
|
||||
v-model="params.start"
|
||||
type="text"
|
||||
name="start"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label class="col-form-label">
|
||||
{{ $t('status') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="params.subStatus"
|
||||
name="status"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">
|
||||
Select Status
|
||||
</option>
|
||||
<option value="degraded">
|
||||
Degraded
|
||||
</option>
|
||||
<option value="down">
|
||||
Down
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-2 d-flex align-items-end">
|
||||
<div
|
||||
class="ml-auto"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary mr-1"
|
||||
@click.prevent="handleFilterSearch"
|
||||
>
|
||||
{{ $t('search') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
@click.prevent="handleClearFilters"
|
||||
>
|
||||
{{ $t('clear') }}
|
||||
</button>
|
||||
<div class="col-sm-6">
|
||||
<FlatPickr
|
||||
id="end"
|
||||
v-model="params.end"
|
||||
type="text"
|
||||
name="end"
|
||||
class="form-control form-control-plaintext"
|
||||
value=""
|
||||
:config="config"
|
||||
placeholder="Select Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<label class="col-form-label">
|
||||
{{ $t('status') }}
|
||||
</label>
|
||||
<select
|
||||
v-model="params.subStatus"
|
||||
name="status"
|
||||
class="form-control"
|
||||
>
|
||||
<option value="">
|
||||
Select Status
|
||||
</option>
|
||||
<option value="degraded">
|
||||
Degraded
|
||||
</option>
|
||||
<option value="down">
|
||||
Down
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3 d-flex align-items-end">
|
||||
<div
|
||||
class="ml-auto"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary mr-1"
|
||||
@click.prevent="handleFilterSearch"
|
||||
>
|
||||
{{ $t('search') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
@click.prevent="handleClearFilters"
|
||||
>
|
||||
{{ $t('clear') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -115,6 +113,7 @@ import 'flatpickr/dist/flatpickr.css';
|
|||
import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
|
||||
|
||||
export default {
|
||||
name: 'DashboardDowntimeFilters',
|
||||
components: {
|
||||
FlatPickr
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ const english = {
|
|||
actions: 'Actions',
|
||||
services: 'Services',
|
||||
downtimes: 'Downtimes',
|
||||
downtime_info: 'Downtime Info',
|
||||
filters: 'Filters',
|
||||
service: 'Service',
|
||||
clear: 'Clear',
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ const Checkins = () => import(/* webpackChunkName: "dashboard" */ '@/components/
|
|||
const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures');
|
||||
const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound');
|
||||
const Importer = () => import(/* webpackChunkName: "index" */ '@/components/Dashboard/Importer');
|
||||
const DashboardDowntimes = () => import(/* webpackChunkName: "downtimes" */ '@/components/Dashboard/DashboardDowntimes');
|
||||
const DashboardDowntimes = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/DashboardDowntimes');
|
||||
const EditDowntime = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/EditDowntime');
|
||||
|
||||
import VueRouter from 'vue-router';
|
||||
import Api from './API';
|
||||
|
|
@ -145,6 +146,13 @@ const routes = [
|
|||
requiresAuth: true,
|
||||
title: 'Statping - Downtimes',
|
||||
}
|
||||
},{
|
||||
path: 'create_downtime',
|
||||
component: EditDowntime,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
title: 'Statping - Create Downtime',
|
||||
}
|
||||
},{
|
||||
path: 'messages',
|
||||
component: DashboardMessages,
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ export default new Vuex.Store({
|
|||
context.commit('setServices', services);
|
||||
},
|
||||
async getDowntimes (context, { payload }) {
|
||||
const { output } = await Api.getDowntimes(payload);
|
||||
const { output } = await Api.downtimes(payload);
|
||||
context.commit('setDowntimes', output);
|
||||
},
|
||||
async loadCore (context) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue