mirror of https://github.com/statping/statping
updates
Hunter Long
parent
4706035fcb
commit
01cb463b88
|
|
@ -12,6 +12,10 @@ class Api {
|
|||
return axios.get('/api').then(response => (response.data))
|
||||
}
|
||||
|
||||
async core_save (obj) {
|
||||
return axios.post('/api', obj).then(response => (response.data))
|
||||
}
|
||||
|
||||
async services () {
|
||||
return axios.get('/api/services').then(response => (response.data))
|
||||
}
|
||||
|
|
@ -20,6 +24,10 @@ class Api {
|
|||
return axios.get('/api/services/'+id).then(response => (response.data))
|
||||
}
|
||||
|
||||
async service_hits (id, start, end, group) {
|
||||
return axios.get('/api/services/'+id+'/data?start=' + start + '&end=' + end + '&group=' + group).then(response => (response.data))
|
||||
}
|
||||
|
||||
async service_delete (id) {
|
||||
return axios.delete('/api/services/'+id).then(response => (response.data))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div id="service_1"></div>
|
||||
<ServiceChart service="service"/>
|
||||
</div>
|
||||
|
||||
<div class="row lower_canvas full-col-12 text-white">
|
||||
|
|
@ -44,8 +44,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import ServiceChart from "./ServiceChart";
|
||||
|
||||
export default {
|
||||
name: 'ServiceBlock',
|
||||
components: {ServiceChart},
|
||||
props: {
|
||||
service: Object
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div>{{data}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "../../components/API"
|
||||
|
||||
export default {
|
||||
name: 'ServiceChart',
|
||||
props: {
|
||||
service: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.chartHits()
|
||||
},
|
||||
methods: {
|
||||
async chartHits() {
|
||||
this.data = await Api.service_hits(this.props.service.id, 0, 99999999999, "minute")
|
||||
this.series = [this.data]
|
||||
this.ready = true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ready: true,
|
||||
data: null,
|
||||
chartOptions: {
|
||||
chart: {
|
||||
id: 'vuechart-example',
|
||||
},
|
||||
xaxis: {
|
||||
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: 'Vue Chart',
|
||||
data: [30, 40, 45, 50, 49, 60, 70, 81]
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const max = 90;
|
||||
const min = 20;
|
||||
const newData = this.series[0].data.map(() => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
})
|
||||
// In the same way, update the series option
|
||||
this.series = [{
|
||||
data: newData
|
||||
}]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form @submit="saveSettings" method="POST">
|
||||
<form @submit="saveSettings">
|
||||
<div class="form-group">
|
||||
<label>Project Name</label>
|
||||
<input v-model="core.name" type="text" class="form-control" placeholder="Great Uptime">
|
||||
|
|
@ -19,10 +19,10 @@
|
|||
<label class="d-inline d-sm-none">Enable CDN</label>
|
||||
<label class="d-none d-sm-block">Enable CDN</label>
|
||||
<span class="switch">
|
||||
<input v-model="core.using_cdn" type="checkbox" class="switch" v-bind:disabled="core.using_cdn">
|
||||
<label class="mt-2 mt-sm-0"></label>
|
||||
<input @change="core.using_cdn = !core.using_cdn" type="checkbox" name="admin" class="switch" id="switch-normal">
|
||||
<label for="switch-normal"></label>
|
||||
<input type="hidden" name="admin" id="switch-normal-value">
|
||||
</span>
|
||||
<input v-model="core.using_cdn" type="hidden" name="enable_cdn" id="switch-normal-value" value="false">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -112,8 +112,11 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
saveSettings () {
|
||||
|
||||
async saveSettings (e) {
|
||||
e.preventDefault()
|
||||
await Api.core_save(this.core)
|
||||
const core = await Api.core()
|
||||
this.$store.commit('setCore', core)
|
||||
},
|
||||
async renewApiKeys () {
|
||||
let r = confirm("Are you sure you want to reset the API keys?");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<span class="switch">
|
||||
<input @change="toggle" type="checkbox" :name="name" class="switch" id="switch-normal" :value="value">
|
||||
<label for="switch-normal">{{label}}</label>
|
||||
<input type="hidden" :name="name" id="switch-normal-value" :value="value">
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'InputSwitch',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggle() {
|
||||
this.$emit('input', {
|
||||
value: !this.props.value
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<form class="ajax_form command">
|
||||
<h4 class="text-capitalize">{{notifier.title}}</h4>
|
||||
<p class="small text-muted" v-html="notifier.description"></p>
|
||||
|
||||
<div v-for="(form, index) in notifier.form" v-bind:key="index" class="form-group">
|
||||
<label class="text-capitalize">{{form.title}}</label>
|
||||
|
||||
<input v-if="form.type === 'text' || 'number' || 'password'" v-model="notifier[notifier.field]" :type="form.type" class="form-control" :placeholder="form.placeholder" >
|
||||
|
||||
<small class="form-text text-muted" v-html="form.small_text"></small>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-9 col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Limit</div>
|
||||
</div>
|
||||
<input type="number" class="form-control" name="limits" min="1" max="60" id="limits_per_hour_command" value="3" placeholder="7">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">Per Minute</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3 col-sm-2 mt-1">
|
||||
<span class="switch">
|
||||
<input @change="notifier.enabled = !notifier.enabled" type="checkbox" name="enabled-option" class="switch" v-bind:id="`switch-${notifier.method}`" >
|
||||
<label v-bind:for="`switch-${notifier.method}`"></label>
|
||||
<input type="hidden" name="enabled" v-bind:id="`switch-${notifier.method}`">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
|
||||
<button type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check-circle"></i> Save</button>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12">
|
||||
<button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right"><i class="fa fa-vial"></i> Test Notifier</button>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 mt-2">
|
||||
<div class="alert alert-danger d-none" id="command-error" role="alert">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{notifier.method}} has an error!
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success d-none" id="command-success" role="alert">
|
||||
<i class="fa fa-smile-beam"></i> The {{notifier.method}} notifier is working correctly!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="d-block small text-center mt-3 mb-5">
|
||||
<span class="text-capitalize">{{notifier.title}}</span> Notifier created by <a :href="notifier.author_url" target="_blank">{{notifier.author}}</a>
|
||||
</span>
|
||||
|
||||
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "../components/API";
|
||||
|
||||
export default {
|
||||
name: 'Notifier',
|
||||
props: {
|
||||
notifier: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
notifier: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
async saveGroup(e) {
|
||||
e.preventDefault();
|
||||
const data = {name: this.group.name, public: this.group.public}
|
||||
await Api.group_create(data)
|
||||
const groups = await Api.groups()
|
||||
this.$store.commit('setGroups', groups)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<span class="switch">
|
||||
<input type="checkbox" name="admin" class="switch" id="switch-normal">
|
||||
<input @change="user.admin = !user.admin" type="checkbox" name="admin" class="switch" id="switch-normal">
|
||||
<label for="switch-normal">Administrator</label>
|
||||
<input v-model="user.admin" type="hidden" name="admin" id="switch-normal-value" value="false">
|
||||
<input type="hidden" name="admin" id="switch-normal-value">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Api from "../components/API";
|
||||
import Api from "../components/API";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: 'FormUser',
|
||||
props: {
|
||||
|
||||
|
|
@ -62,9 +62,13 @@ export default {
|
|||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
saveUser () {
|
||||
computed() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
saveUser (e) {
|
||||
e.preventDefault();
|
||||
alert(JSON.stringify(this.user))
|
||||
},
|
||||
async saveGroup(e) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueApexCharts from 'vue-apexcharts'
|
||||
|
||||
import App from '@/App.vue'
|
||||
import store from '@/store'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fas } from '@fortawesome/fontawesome-free-solid';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import {library} from '@fortawesome/fontawesome-svg-core'
|
||||
import {fas} from '@fortawesome/fontawesome-free-solid';
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||
|
||||
library.add(fas)
|
||||
|
||||
Vue.component('apexchart', VueApexCharts)
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -137,65 +137,7 @@
|
|||
|
||||
<div v-for="(notifier, index) in $store.getters.notifiers" v-bind:key="index" class="tab-pane fade" v-bind:class="{active: liClass(`v-pills-${notifier.method.toLowerCase()}-tab`), show: liClass(`v-pills-${notifier.method.toLowerCase()}-tab`)}" v-bind:id="`v-pills-${notifier.method.toLowerCase()}-tab`" role="tabpanel" v-bind:aria-labelledby="`v-pills-${notifier.method.toLowerCase()}-tab`">
|
||||
|
||||
<form class="ajax_form command">
|
||||
<h4 class="text-capitalize">{{notifier.title}}</h4>
|
||||
<p class="small text-muted" v-html="notifier.description"></p>
|
||||
|
||||
<div v-for="(form, index) in notifier.form" v-bind:key="index" class="form-group">
|
||||
<label class="text-capitalize">{{form.title}}</label>
|
||||
|
||||
<input v-if="form.type === 'text' || 'number' || 'password'" v-model="notifier[notifier.field]" :type="form.type" class="form-control" :placeholder="form.placeholder" >
|
||||
|
||||
<small class="form-text text-muted" v-html="form.small_text"></small>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-9 col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Limit</div>
|
||||
</div>
|
||||
<input type="number" class="form-control" name="limits" min="1" max="60" id="limits_per_hour_command" value="3" placeholder="7">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text">Per Minute</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3 col-sm-2 mt-1">
|
||||
<span class="switch">
|
||||
<input type="checkbox" name="enabled-option" class="switch" id="switch-Command" >
|
||||
<label v-bind:for="`switch-${notifier.method}`"></label>
|
||||
<input type="hidden" name="enabled" v-bind:id="`switch-${notifier.method}`" value="false">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-4 mb-2 mb-sm-0 mt-2 mt-sm-0">
|
||||
<button type="submit" class="btn btn-primary btn-block text-capitalize"><i class="fa fa-check-circle"></i> Save</button>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12">
|
||||
<button class="test_notifier btn btn-secondary btn-block text-capitalize col-12 float-right"><i class="fa fa-vial"></i> Test Notifier</button>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-12 mt-2">
|
||||
<div class="alert alert-danger d-none" id="command-error" role="alert">
|
||||
<i class="fa fa-exclamation-triangle"></i> {{notifier.method}} has an error!
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success d-none" id="command-success" role="alert">
|
||||
<i class="fa fa-smile-beam"></i> The {{notifier.method}} notifier is working correctly!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="d-block small text-center mt-3 mb-5">
|
||||
<span class="text-capitalize">{{notifier.title}}</span> Notifier created by <a :href="notifier.author_url" target="_blank">{{notifier.author}}</a>
|
||||
</span>
|
||||
|
||||
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
|
||||
</form>
|
||||
<Notifier :notifier="notifier"/>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -336,10 +278,12 @@
|
|||
|
||||
<script>
|
||||
import CoreSettings from '../forms/CoreSettings';
|
||||
import Notifier from "../forms/Notifier";
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: {
|
||||
Notifier,
|
||||
CoreSettings
|
||||
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue