github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

refactored code for naming convention and fixed some style

pull/1097/head
smit95tpatel 2021-12-15 17:20:24 +05:30
parent f60d3431cf
commit dd325cefc3
11 changed files with 221 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -2,5 +2,6 @@
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll.eslint": true "source.fixAll.eslint": true
}, },
"editor.defaultFormatter": null "editor.defaultFormatter": null,
"eslint.validate": ["javascript"]
} }

6
frontend/src/API.js
View File

@ -387,11 +387,15 @@ class Api {
await axios.all([ all ]); 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', { return axios.get('api/downtimes', {
params: { service_id: serviceId, start, end, skip, count, sub_status: subStatus } params: { service_id: serviceId, start, end, skip, count, sub_status: subStatus }
}).then((response) => response.data); }).then((response) => response.data);
} }
async downtime (id) {
return axios.get(`api/downtimes/${id}`).then((response) => response.data);
}
} }
const api = new Api(); const api = new Api();
export default api; export default api;

73
frontend/src/components/Dashboard/DashboardDowntimes.vue
View File

@ -1,46 +1,49 @@
<template> <template>
<div class="row"> <div class="col-12">
<DowntimesFilterForm <DowntimesFilterForm
:handle-clear-filters="handleClearFilters" :handle-clear-filters="handleClearFilters"
:params="params" :params="params"
:handle-filter-search="handleFilterSearch" :handle-filter-search="handleFilterSearch"
/> />
<div class="col-12">
<div class="card contain-card mb-4"> <div class="card contain-card mb-4">
<div class="card-header"> <div class="card-header">
{{ $t('downtimes') }} {{ $t('downtimes') }}
<!-- <router-link <router-link
v-if="$store.state.admin" v-if="$store.state.admin"
to="/dashboard/create_service" to="/dashboard/create_downtime"
class="btn btn-sm btn-success float-right" class="btn btn-sm btn-success float-right"
> >
<FontAwesomeIcon icon="plus" /> {{ $t('create') }} <FontAwesomeIcon icon="plus" /> {{ $t('create') }}
</router-link> --> </router-link>
</div> </div>
<div class="card-body pt-0"> <div class="card-body pt-0">
<div <div
v-if="isLoading" v-if="isLoading"
class="loader d-flex align-items-center justify-content-center" class="mt-5"
> >
<div <div class="col-12 text-center">
class="spinner-border" <FontAwesomeIcon
role="status" icon="circle-notch"
> size="3x"
<span class="sr-only"> spin
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"
/> />
</div> </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> </div>
</div> </div>
@ -104,10 +107,4 @@ export default {
} }
} }
}; };
</script> </script>
<style scoped>
.loader {
min-height: 100px;
}
</style>

1
frontend/src/components/Dashboard/DowntimesList.vue
View File

@ -125,6 +125,7 @@
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
export default { export default {
name: 'DashboardDowntimeList',
data: function () { data: function () {
return { return {
isLoading: false, isLoading: false,

57
frontend/src/components/Dashboard/EditDowntime.vue Normal file
View File

@ -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>

1
frontend/src/components/Elements/Pagination.vue
View File

@ -32,6 +32,7 @@
import { mapState } from 'vuex'; import { mapState } from 'vuex';
export default { export default {
name: 'DasboardDowntimePagination',
props: { props: {
count:{ count:{
type: Number, type: Number,

10
frontend/src/forms/Downtime.vue Normal file
View File

@ -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>

199
frontend/src/forms/DowntimeFilters.vue
View File

@ -1,109 +1,107 @@
<template> <template>
<div class="col-12"> <div class="card contain-card mb-4">
<div class="card contain-card mb-4"> <div class="card-header">
<div class="card-header"> {{ $t('filters') }}
{{ $t('filters') }} </div>
</div> <div class="card-body">
<div class="card-body"> <form>
<form> <div class="form-row">
<div class="form-row"> <div class="form-group col-md-3">
<div class="form-group col-md-2"> <label class="col-form-label">
<label class="col-form-label"> {{ $t('service') }}
{{ $t('service') }} </label>
</label> <select
<select v-model="params.serviceId"
v-model="params.serviceId" name="service"
name="service" class="form-control"
class="form-control" >
<option value="">
Select Service
</option>
<option
v-for="service in services"
:key="service.id"
:value="service.id"
> >
<option value=""> {{ service.name }}
Select Service </option>
</option> </select>
<option </div>
v-for="service in services" <div class="form-group col-md-4">
:key="service.id" <label class="col-form-label">
:value="service.id" Downtime Date Range
> </label>
{{ service.name }} <div class="form-row">
</option> <div class="col-sm-6">
</select> <FlatPickr
</div> id="start"
<div class="form-group col-md-6"> v-model="params.start"
<label class="col-form-label"> type="text"
Downtime Date Range name="start"
</label> class="form-control form-control-plaintext"
<div class="form-row"> value=""
<div class="col-sm-6"> :config="config"
<FlatPickr placeholder="Select Date"
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>
</div> </div>
</div> <div class="col-sm-6">
<div class="form-group col-md-2"> <FlatPickr
<label class="col-form-label"> id="end"
{{ $t('status') }} v-model="params.end"
</label> type="text"
<select name="end"
v-model="params.subStatus" class="form-control form-control-plaintext"
name="status" value=""
class="form-control" :config="config"
> placeholder="Select Date"
<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> </div>
</div> </div>
</div> </div>
</form> <div class="form-group col-md-2">
</div> <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>
</div> </div>
</template> </template>
@ -115,6 +113,7 @@ import 'flatpickr/dist/flatpickr.css';
import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue'; import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
export default { export default {
name: 'DashboardDowntimeFilters',
components: { components: {
FlatPickr FlatPickr
}, },

1
frontend/src/languages/english.js
View File

@ -6,6 +6,7 @@ const english = {
actions: 'Actions', actions: 'Actions',
services: 'Services', services: 'Services',
downtimes: 'Downtimes', downtimes: 'Downtimes',
downtime_info: 'Downtime Info',
filters: 'Filters', filters: 'Filters',
service: 'Service', service: 'Service',
clear: 'Clear', clear: 'Clear',

10
frontend/src/routes.js
View File

@ -16,7 +16,8 @@ const Checkins = () => import(/* webpackChunkName: "dashboard" */ '@/components/
const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures'); const Failures = () => import(/* webpackChunkName: "dashboard" */ '@/components/Dashboard/Failures');
const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound'); const NotFound = () => import(/* webpackChunkName: "index" */ '@/pages/NotFound');
const Importer = () => import(/* webpackChunkName: "index" */ '@/components/Dashboard/Importer'); 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 VueRouter from 'vue-router';
import Api from './API'; import Api from './API';
@ -145,6 +146,13 @@ const routes = [
requiresAuth: true, requiresAuth: true,
title: 'Statping - Downtimes', title: 'Statping - Downtimes',
} }
},{
path: 'create_downtime',
component: EditDowntime,
meta: {
requiresAuth: true,
title: 'Statping - Create Downtime',
}
},{ },{
path: 'messages', path: 'messages',
component: DashboardMessages, component: DashboardMessages,

2
frontend/src/store.js
View File

@ -163,7 +163,7 @@ export default new Vuex.Store({
context.commit('setServices', services); context.commit('setServices', services);
}, },
async getDowntimes (context, { payload }) { async getDowntimes (context, { payload }) {
const { output } = await Api.getDowntimes(payload); const { output } = await Api.downtimes(payload);
context.commit('setDowntimes', output); context.commit('setDowntimes', output);
}, },
async loadCore (context) { async loadCore (context) {