mirror of https://github.com/statping/statping
intergrated filter for downtimes
smit95tpatel
parent
095a2721e8
commit
f60d3431cf
|
|
@ -1,8 +1,14 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<div class="card contain-card mb-4">
|
||||
<div class="card-header">
|
||||
{{ $t('downtimes') }}
|
||||
<div class="row">
|
||||
<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
|
||||
v-if="$store.state.admin"
|
||||
to="/dashboard/create_service"
|
||||
|
|
@ -10,28 +16,31 @@
|
|||
>
|
||||
<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
|
||||
:get-next-downtimes="getNextDowntimes"
|
||||
:get-prev-downtimes="getPrevDowntimes"
|
||||
:skip="params.skip"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,27 +49,35 @@
|
|||
|
||||
<script>
|
||||
import DowntimesList from './DowntimesList.vue';
|
||||
import { mapState } from 'vuex';
|
||||
import DowntimesFilterForm from '../../forms/DowntimeFilters.vue';
|
||||
import Pagination from '../Elements/Pagination.vue';
|
||||
|
||||
export const initialParams = {
|
||||
serviceId: '',
|
||||
start: '',
|
||||
end: '',
|
||||
skip: 0,
|
||||
count: 10,
|
||||
subStatus: ''
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'DashboardDowntimes',
|
||||
components: {
|
||||
DowntimesList,
|
||||
Pagination
|
||||
Pagination,
|
||||
DowntimesFilterForm
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
params: {
|
||||
serviceId: null,
|
||||
start: null,
|
||||
end: null,
|
||||
skip: 0,
|
||||
count: 10,
|
||||
subStatus: ''
|
||||
}
|
||||
params: { ...initialParams }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'downtimes' ])
|
||||
},
|
||||
async mounted () {
|
||||
this.getDowntimes(this.params);
|
||||
},
|
||||
|
|
@ -75,7 +92,14 @@ export default {
|
|||
this.getDowntimes(this.params);
|
||||
},
|
||||
getPrevDowntimes: function () {
|
||||
this.params = { ...this.params, skip: this.params.skip + 1 };
|
||||
this.params = { ...this.params, skip: this.params.skip - 1 };
|
||||
this.getDowntimes(this.params);
|
||||
},
|
||||
handleClearFilters: function () {
|
||||
this.params = { ...initialParams };
|
||||
},
|
||||
handleFilterSearch: function () {
|
||||
this.params = { ...this.params, skip: 0 };
|
||||
this.getDowntimes(this.params);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,16 +53,8 @@
|
|||
:key="downtime.id"
|
||||
>
|
||||
<td>
|
||||
<span
|
||||
v-if="$store.state.admin"
|
||||
class="drag_icon d-none d-md-inline"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon="bars"
|
||||
class="mr-3"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<!-- {{ serviceById(downtime.service_id).name }} -->
|
||||
{{ downtime.service_id }}
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -70,14 +62,14 @@
|
|||
<span
|
||||
class=""
|
||||
>
|
||||
{{ niceDate(downtime.start) }}
|
||||
{{ niceDateWithYear(downtime.start) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<span
|
||||
class=""
|
||||
>
|
||||
{{ niceDate(downtime.end) }}
|
||||
{{ niceDateWithYear(downtime.end) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
|
|
@ -130,7 +122,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapGetters, mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
|
|
@ -139,7 +131,8 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'downtimes' ])
|
||||
...mapState([ 'downtimes' ]),
|
||||
...mapGetters([ 'serviceById' ])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
<button
|
||||
class="btn btn-outline-secondary page-link"
|
||||
aria-label="Next"
|
||||
:disabled="downtimes.length < count"
|
||||
@click="getNextDowntimes"
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
|
|
@ -28,8 +29,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
count:{
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
getNextDowntimes: {
|
||||
type: Function,
|
||||
default: function () {}
|
||||
|
|
@ -42,6 +49,10 @@ export default {
|
|||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'downtimes' ])
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<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"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import FlatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
import { initialParams } from '../components/Dashboard/DashboardDowntimes.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FlatPickr
|
||||
},
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: initialParams
|
||||
},
|
||||
handleClearFilters: {
|
||||
type: Function,
|
||||
default: function () {}
|
||||
},
|
||||
handleFilterSearch: {
|
||||
type: Function,
|
||||
default: function () {}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
config: {
|
||||
altFormat: 'D, J M Y',
|
||||
altInput: true,
|
||||
allowInput: true,
|
||||
dateFormat: 'Z',
|
||||
maxDate: new Date()
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([ 'services' ])
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -6,7 +6,10 @@ const english = {
|
|||
actions: 'Actions',
|
||||
services: 'Services',
|
||||
downtimes: 'Downtimes',
|
||||
filters: 'Filters',
|
||||
service: 'Service',
|
||||
clear: 'Clear',
|
||||
search: 'Search',
|
||||
failures: 'Failures',
|
||||
users: 'Users',
|
||||
login: 'Login',
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ export default Vue.mixin({
|
|||
niceDate (val) {
|
||||
return format(parseISO(val), 'EEE, MMM do h:mma');
|
||||
},
|
||||
niceDateWithYear (val) {
|
||||
return format(parseISO(val), 'EEE, do MMM yyyy \'at\' h:mma');
|
||||
},
|
||||
parseISO (v) {
|
||||
return parseISO(v);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue