mirror of
https://github.com/Luzifer/mondash.git
synced 2024-11-12 17:32:42 +00:00
Apply new linter settings
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
parent
7bc70423c6
commit
f969a6916d
GPG key ID:
DC2729FDD34BE99E
4 changed files with 131 additions and 68 deletions
139
src/app.vue
139
src/app.vue
|
|
@ -1,59 +1,107 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<b-navbar toggleable="lg" type="light" variant="light">
|
||||
<b-navbar-brand href="welcome">MonDash</b-navbar-brand>
|
||||
<b-navbar
|
||||
toggleable="lg"
|
||||
type="light"
|
||||
variant="light"
|
||||
>
|
||||
<b-navbar-brand href="welcome">
|
||||
MonDash
|
||||
</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
<b-navbar-toggle target="nav-collapse" />
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-collapse
|
||||
id="nav-collapse"
|
||||
is-nav
|
||||
>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item href="http://docs.mondash.apiary.io/" target="_blank">API Docs</b-nav-item>
|
||||
<b-nav-item
|
||||
href="http://docs.mondash.apiary.io/"
|
||||
target="_blank"
|
||||
>
|
||||
API Docs
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<b-nav-item @click="show_filters = !show_filters">Toggle Filters</b-nav-item>
|
||||
<b-nav-item href="/create">Get your own dashboard</b-nav-item>
|
||||
<b-nav-item @click="show_filters = !show_filters">
|
||||
Toggle Filters
|
||||
</b-nav-item>
|
||||
<b-nav-item href="/create">
|
||||
Get your own dashboard
|
||||
</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
</b-navbar>
|
||||
|
||||
<b-container class="mt-4">
|
||||
|
||||
<b-row v-if="dash_id == 'welcome'">
|
||||
<b-col>
|
||||
<b-jumbotron header="Welcome to MonDash!" class="text-center">
|
||||
<p>You're currently seeing a demo dashboard updated with random numbers below. To get started read the <a href="http://docs.mondash.apiary.io/" target="_blank">API documentation</a> and create your own dashboard by clicking the button in the upper right hand corner…
|
||||
<p>If you have any questions about this project don't hesitate to ask <a href="https://ahlers.me/" target="_blank">Knut</a>.</p>
|
||||
<b-jumbotron
|
||||
header="Welcome to MonDash!"
|
||||
class="text-center"
|
||||
>
|
||||
<p>
|
||||
You're currently seeing a demo dashboard updated with random numbers below. To get started read the <a
|
||||
href="http://docs.mondash.apiary.io/"
|
||||
target="_blank"
|
||||
>API documentation</a> and create your own dashboard by clicking the button in the upper right hand corner…
|
||||
</p><p>
|
||||
If you have any questions about this project don't hesitate to ask <a
|
||||
href="https://ahlers.me/"
|
||||
target="_blank"
|
||||
>Knut</a>.
|
||||
</p>
|
||||
</b-jumbotron>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row v-else-if="api_key && !metrics" class="justify-content-md-center">
|
||||
<b-col cols="12" md="6" class="text-center">
|
||||
<b-row
|
||||
v-else-if="api_key && !metrics"
|
||||
class="justify-content-md-center"
|
||||
>
|
||||
<b-col
|
||||
cols="12"
|
||||
md="6"
|
||||
class="text-center"
|
||||
>
|
||||
<p>Welcome to your new dashboard. Your API-key is:</p>
|
||||
|
||||
<code>{{ api_key }}</code>
|
||||
|
||||
<p>
|
||||
After you sent your first metric you can reach your dashboard here:<br>
|
||||
<a :href="location">{{ location }}</a>
|
||||
After you sent your first metric you can reach your dashboard here:<br>
|
||||
<a :href="location">{{ location }}</a>
|
||||
</p>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row v-if="show_filters" class="mb-4">
|
||||
<b-row
|
||||
v-if="show_filters"
|
||||
class="mb-4"
|
||||
>
|
||||
<b-col>
|
||||
<b-card bg-variant="primary" text-variant="white">
|
||||
<b-card
|
||||
bg-variant="primary"
|
||||
text-variant="white"
|
||||
>
|
||||
<b-row>
|
||||
<b-col cols="8">
|
||||
<b-form-group label="Filter by text:">
|
||||
<b-form-input v-model="filter_text" placeholder="Filter metrics by title / description"></b-form-input>
|
||||
<b-form-input
|
||||
v-model="filter_text"
|
||||
placeholder="Filter metrics by title / description"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="4">
|
||||
<b-form-group label="Filter by status:">
|
||||
<b-form-select v-model="level_filter" :options="level_filters"></b-form-select>
|
||||
<b-form-select
|
||||
v-model="level_filter"
|
||||
:options="level_filters"
|
||||
/>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
|
@ -61,8 +109,11 @@
|
|||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<metric v-for="metric in filtered_metrics" :metric="metric" :key="metric.id"></metric>
|
||||
|
||||
<metric
|
||||
v-for="metric in filtered_metrics"
|
||||
:key="metric.id"
|
||||
:metric="metric"
|
||||
/>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -73,11 +124,27 @@ import axios from 'axios'
|
|||
import metric from './metric.vue'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
metric,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
api_key: null,
|
||||
filter_text: '',
|
||||
level_filter: 3,
|
||||
level_filters: [
|
||||
{ value: 3, text: 'Unknown, OK, Warning, Critical' },
|
||||
{ value: 0, text: 'OK, Warning, Critical' },
|
||||
{ value: 1, text: 'Warning, Critical' },
|
||||
{ value: 2, text: 'Critical' },
|
||||
],
|
||||
metrics: [],
|
||||
show_filters: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dash_id() {
|
||||
return window.location.pathname.substr(1)
|
||||
|
|
@ -118,20 +185,12 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
api_key: null,
|
||||
filter_text: '',
|
||||
level_filter: 3,
|
||||
level_filters: [
|
||||
{ value: 3, text: 'Unknown, OK, Warning, Critical' },
|
||||
{ value: 0, text: 'OK, Warning, Critical' },
|
||||
{ value: 1, text: 'Warning, Critical' },
|
||||
{ value: 2, text: 'Critical' },
|
||||
],
|
||||
metrics: [],
|
||||
show_filters: false,
|
||||
}
|
||||
watch: {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateDashboardData()
|
||||
window.setInterval(() => this.updateDashboardData(), 10000)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -145,13 +204,5 @@ export default {
|
|||
.catch(err => console.error(err))
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateDashboardData()
|
||||
window.setInterval(() => this.updateDashboardData(), 10000)
|
||||
},
|
||||
|
||||
watch: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="ct-double-octave" ref="container"></div>
|
||||
<div
|
||||
ref="container"
|
||||
class="ct-double-octave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,8 +10,19 @@ import chartist from 'chartist'
|
|||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'graph',
|
||||
props: ['metric'],
|
||||
name: 'Graph',
|
||||
props: {
|
||||
metric: {
|
||||
required: true,
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
data() {
|
||||
|
|
@ -29,23 +43,14 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.chart = chartist.Line(this.$refs.container, this.data)
|
||||
},
|
||||
|
||||
watch: {
|
||||
metric() {
|
||||
this.chart.update(this.data)
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.chart = chartist.Line(this.$refs.container, this.data)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
<template>
|
||||
<b-progress class="w-100" :max="10000">
|
||||
<b-progress
|
||||
class="w-100"
|
||||
:max="10000"
|
||||
>
|
||||
<b-progress-bar
|
||||
v-for="seg in metric.history_bar"
|
||||
:key="seg.start"
|
||||
v-b-tooltip.hover
|
||||
:value="seg.percentage * 10000"
|
||||
:variant="variantFromStatus(seg.status)"
|
||||
:title="`${moment(seg.start).format('lll')}\n${moment(seg.end).format('lll')}`"
|
||||
v-b-tooltip.hover
|
||||
v-for="seg in metric.history_bar"
|
||||
>
|
||||
</b-progress-bar>
|
||||
/>
|
||||
</b-progress>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,8 +18,13 @@
|
|||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'history-bar',
|
||||
props: ['metric'],
|
||||
name: 'HistoryBar',
|
||||
props: {
|
||||
metric: {
|
||||
required: true,
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
moment,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import 'chartist/dist/chartist.min.css'
|
|||
Vue.use(BootstrapVue)
|
||||
|
||||
new Vue({
|
||||
components: { app },
|
||||
el: '#app',
|
||||
components: { app },
|
||||
render: c => c('app'),
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue