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

vue

pull/429/head
hunterlong 2020-02-02 20:52:47 -08:00
parent 3fbf5b99f3
commit f4e2adc29c
9 changed files with 106 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/Index/MessageBlock.vue
View File

@ -1,17 +1,25 @@
<template>
<div class="alert alert-primary" role="alert">
<h3>Login as Admin!</h3>
<span class="mb-3">This is the Demo Statping instance, the database gets reset every 30 minutes. Login as "admin" password is "admin".</span>
<h3>{{message.title}}</h3>
<span class="mb-3">{{message.description}}</span>
<div class="d-block mt-2 mb-4">
<span class="float-left small">Starts on Tuesday January 8, 2019 at 08:00PM</span>
<span class="float-right small">Ends on Thursday May 12, 2022 at 07:00PM</span>
<span class="float-left small">
Starts on {{parseTime(message.start_on)}}
</span>
<span class="float-right small">
Ends on {{parseTime(message.end_on)}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'MessageBlock'
name: 'MessageBlock',
props: {
message: {
type: Object
}
}
}
</script>

9
frontend/src/forms/Service.vue
View File

@ -146,18 +146,11 @@
</div>
</div>
<div class="form-group row">
<div class="col-6">
<div class="col-12">
<button @click.prevent="saveService" type="submit" class="btn btn-success btn-block">Create Service</button>
</div>
<div class="col-6">
<button @click.prevent="saveService" class="btn btn-secondary btn-block">Test</button>
</div>
</div>
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
{{JSON.stringify(service)}}
</form>
</template>

17
frontend/src/mixin.js
View File

@ -5,9 +5,26 @@ export default Vue.mixin({
now() {
return Math.round(new Date().getTime() / 1000)
},
current() {
return new Date()
},
ago(seconds) {
return this.now() - seconds
},
niceDate(val) {
return this.parseTime(val).format('LLLL')
},
parseTime(val) {
return this.$moment(val, "YYYY-MM-DDTHH:mm:ssZ", true).local()
},
toUnix(val) {
return this.$moment(val).utc().format('MM-DD-YYYY')
},
isBetween(t1, t2) {
const now = this.$moment(t1).utc().valueOf()
const sub = this.$moment(t2).utc().valueOf()
return (now - sub) > 0
},
hour(){ return 3600 },
day() { return 3600 * 24 },
serviceLink(service) {

24
frontend/src/pages/Help.vue
View File

@ -1,32 +1,8 @@
<template>
<div class="col-12 bg-white p-4">
Help
</div>
</template>
<script>
export default {
name: 'Help',
components: {
},
data () {
return {
}
},
created() {
},
mounted() {
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

10
frontend/src/pages/Index.vue
View File

@ -7,8 +7,8 @@
<Group :group=group />
</div>
<div class="col-12">
<MessageBlock/>
<div v-for="(message, index) in $store.getters.messages" v-bind:key="index" v-if="inRange(message) && message.service === 0">
<MessageBlock :message="message"/>
</div>
<div class="col-12 full-col-12">
@ -47,7 +47,11 @@ export default {
},
methods: {
inRange(message) {
const start = this.isBetween(new Date(), message.start_on)
const end = this.isBetween(message.end_on, new Date())
return start && end
},
}
}
</script>

35
frontend/src/pages/Service.vue
View File

@ -28,12 +28,16 @@
</div>
</div>
<div v-for="(message, index) in messages" v-if="messageInRange(message)">
<MessageBlock :message="message"/>
</div>
<div class="service-chart-container">
<apexchart width="100%" height="215" type="area" :options="chartOptions" :series="series"></apexchart>
<apexchart width="100%" height="420" type="area" :options="chartOptions" :series="series"></apexchart>
</div>
<div class="service-chart-heatmap">
<div id="service_heatmap"></div>
<apexchart width="100%" height="215" type="heatmap" :options="chartOptions" :series="series"></apexchart>
</div>
<form id="service_date_form" class="col-12 mt-2 mb-3">
@ -104,17 +108,18 @@
<script>
import Api from "../components/API"
import MessageBlock from '../components/Index/MessageBlock';
import Checkin from "../forms/Checkin";
const axisOptions = {
labels: {
show: false
show: true
},
crosshairs: {
show: false
},
lines: {
show: false
show: true
},
tooltip: {
enabled: false
@ -133,6 +138,7 @@
export default {
name: 'Service',
components: {
MessageBlock,
Checkin
},
data () {
@ -143,6 +149,7 @@ export default {
authenticated: false,
ready: false,
data: null,
messages: [],
failures: [],
chartOptions: {
chart: {
@ -171,7 +178,7 @@ export default {
top: 0,
right: 0,
bottom: 0,
left: -10,
left: 0,
}
},
xaxis: {
@ -221,19 +228,25 @@ export default {
}
},
async created() {
this.id = this.$route.params.id
await this.$store.dispatch('loadRequired')
},
async mounted() {
const id = this.$route.params.id
let service;
if (this.isInt(this.id)) {
service = this.$store.getters.serviceById(this.id)
if (this.isInt(id)) {
service = await Api.service(id)
} else {
service = this.$store.getters.serviceByPermalink(this.id)
}
await this.getService(service)
this.messages = this.$store.getters.serviceMessages(service.id)
},
mounted() {
},
methods: {
messageInRange(message) {
const start = this.isBetween(new Date(), message.start_on)
const end = this.isBetween(message.end_on, new Date())
return start && end
},
async getService(s) {
this.service = await Api.service(s.id)
await this.chartHits()

1
frontend/src/routes.js
View File

@ -89,7 +89,6 @@ router.beforeEach((to, from, next) => {
return
}
next()
return
} else {
next()
}

67
frontend/src/store.js
View File

@ -41,7 +41,7 @@ export default new Vuex.Store({
integrations: state => state.integrations,
servicesInOrder: state => state.services.sort((a, b) => a.order_id - b.order_id),
groupsInOrder: state => state.groups.sort((a, b) => a.order_id - b.order_id),
groupsInOrder: state => state.groups.sort((a, b) => a.order_id - b.order_id),
groupsClean: state => state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id),
serviceById: (state) => (id) => {
@ -53,6 +53,9 @@ export default new Vuex.Store({
servicesInGroup: (state) => (id) => {
return state.services.filter(s => s.group_id === id).sort((a, b) => a.order_id - b.order_id)
},
serviceMessages: (state) => (id) => {
return state.messages.filter(s => s.service === id)
},
onlineServices: (state) => (online) => {
return state.services.filter(s => s.online === online)
},
@ -60,7 +63,7 @@ export default new Vuex.Store({
return state.groups.find(g => g.id === id)
},
cleanGroups: (state) => () => {
return state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id)
return state.groups.filter(g => g.name !== '').sort((a, b) => a.order_id - b.order_id)
},
userById: (state) => (id) => {
return state.users.find(u => u.id === id)
@ -70,57 +73,57 @@ export default new Vuex.Store({
},
},
mutations: {
setHasAllData(state, bool) {
setHasAllData (state, bool) {
state.hasAllData = bool
},
setHasPublicData(state, bool) {
setHasPublicData (state, bool) {
state.hasPublicData = bool
},
setCore(state, core) {
setCore (state, core) {
state.core = core
},
setToken(state, token) {
setToken (state, token) {
state.token = token
},
setServices(state, services) {
setServices (state, services) {
state.services = services
},
setGroups(state, groups) {
setGroups (state, groups) {
state.groups = groups
},
setMessages(state, messages) {
setMessages (state, messages) {
state.messages = messages
},
setUsers(state, users) {
setUsers (state, users) {
state.users = users
},
setNotifiers(state, notifiers) {
setNotifiers (state, notifiers) {
state.notifiers = notifiers
},
setIntegrations(state, integrations) {
setIntegrations (state, integrations) {
state.integrations = integrations
}
},
actions: {
async loadRequired(context) {
const core = await Api.core()
context.commit("setCore", core);
const services = await Api.services()
context.commit("setServices", services);
const groups = await Api.groups()
context.commit("setGroups", groups);
const messages = await Api.messages()
context.commit("setMessages", messages)
context.commit("setHasPublicData", true)
},
async loadAdmin(context) {
await context.dispatch('loadRequired')
const notifiers = await Api.notifiers()
context.commit("setNotifiers", notifiers);
const users = await Api.users()
context.commit("setUsers", users);
const integrations = await Api.integrations()
context.commit("setIntegrations", integrations);
}
async loadRequired (context) {
const core = await Api.core()
context.commit("setCore", core);
const services = await Api.services()
context.commit("setServices", services);
const groups = await Api.groups()
context.commit("setGroups", groups);
const messages = await Api.messages()
context.commit("setMessages", messages)
context.commit("setHasPublicData", true)
},
async loadAdmin (context) {
await context.dispatch('loadRequired')
const notifiers = await Api.notifiers()
context.commit("setNotifiers", notifiers);
const users = await Api.users()
context.commit("setUsers", users);
const integrations = await Api.integrations()
context.commit("setIntegrations", integrations);
}
}
});

18
source/generate_wiki.go
View File

@ -57,7 +57,7 @@ func main() {
utils.DeleteDirectory("./statping.wiki")
utils.DeleteDirectory("./logs")
f, err := os.Create("wiki.go")
f, err := os.Create("../frontend/src/pages/Help.vue")
die(err)
defer f.Close()
@ -80,12 +80,12 @@ func die(err error) {
}
}
var packageTemplate = template.Must(template.New("").Parse(`// Code generated by go generate; DO NOT EDIT.
// This file was generated by robots at
// {{ .Timestamp }}
//
// This contains the most recently Markdown source for the Statping Wiki.
package source
var packageTemplate = template.Must(template.New("").Parse(`<template>
<div class="col-12 bg-white p-4" v-html={{printf "%q" .Compiled}}></div>
</template>
// CompiledWiki contains all of the Statping Wiki pages from the Github Wiki repo.
var CompiledWiki = []byte({{printf "%q" .Compiled}})`))
<script>
export default {
name: 'Help',
}
</script>`))