Merge current v2.11 into v3.0
This commit is contained in:
mmatur
commit
05be441027
156 changed files with 5826 additions and 8436 deletions
|
|
@ -1,58 +1,98 @@
|
|||
<template>
|
||||
<q-card flat bordered>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col">
|
||||
<div class="text-h6 text-weight-bold">{{getName}}</div>
|
||||
<div class="text-h6 text-weight-bold">
|
||||
{{ getName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn :to="getUrl" color="accent" dense flat icon-right="eva-arrow-forward-outline" no-caps label="Explore" size="md" class="text-weight-bold"/>
|
||||
<q-btn
|
||||
:to="getUrl"
|
||||
color="accent"
|
||||
dense
|
||||
flat
|
||||
icon-right="eva-arrow-forward-outline"
|
||||
no-caps
|
||||
label="Explore"
|
||||
size="md"
|
||||
class="text-weight-bold"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row items-center q-col-gutter-md">
|
||||
<div class="col-12 col-sm-6">
|
||||
<ChartDoughnut
|
||||
:chartdata="getChartdata()"
|
||||
:options="options"/>
|
||||
<Doughnut
|
||||
:data="getChartdata()"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-list>
|
||||
<q-item class="label-state">
|
||||
<q-item-section avatar>
|
||||
<avatar-state state="positive"/>
|
||||
<avatar-state state="positive" />
|
||||
</q-item-section>
|
||||
<q-item-section class="label-state-text">
|
||||
<q-item-label>Success</q-item-label>
|
||||
<q-item-label caption lines="1">{{getSuccess(true)}}%</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
>
|
||||
{{ getSuccess(true) }}%
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side class="label-state-side">
|
||||
{{getSuccess()}}
|
||||
<q-item-section
|
||||
side
|
||||
class="label-state-side"
|
||||
>
|
||||
{{ getSuccess() }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="label-state">
|
||||
<q-item-section avatar>
|
||||
<avatar-state state="warning"/>
|
||||
<avatar-state state="warning" />
|
||||
</q-item-section>
|
||||
<q-item-section class="label-state-text">
|
||||
<q-item-label>Warnings</q-item-label>
|
||||
<q-item-label caption lines="1">{{getWarnings(true)}}%</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
>
|
||||
{{ getWarnings(true) }}%
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side class="label-state-side">
|
||||
{{getWarnings()}}
|
||||
<q-item-section
|
||||
side
|
||||
class="label-state-side"
|
||||
>
|
||||
{{ getWarnings() }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="label-state">
|
||||
<q-item-section avatar>
|
||||
<avatar-state state="negative"/>
|
||||
<avatar-state state="negative" />
|
||||
</q-item-section>
|
||||
<q-item-section class="label-state-text">
|
||||
<q-item-label>Errors</q-item-label>
|
||||
<q-item-label caption lines="1">{{getErrors(true)}}%</q-item-label>
|
||||
<q-item-label
|
||||
caption
|
||||
lines="1"
|
||||
>
|
||||
{{ getErrors(true) }}%
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side class="label-state-side">
|
||||
{{getErrors()}}
|
||||
<q-item-section
|
||||
side
|
||||
class="label-state-side"
|
||||
>
|
||||
{{ getErrors() }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -63,23 +103,33 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import Helps from '../../_helpers/Helps'
|
||||
import ChartDoughnut from '../_commons/ChartDoughnut'
|
||||
import AvatarState from '../_commons/AvatarState'
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import AvatarState from '../_commons/AvatarState.vue'
|
||||
|
||||
export default {
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PanelChart',
|
||||
props: ['name', 'data', 'type'],
|
||||
components: {
|
||||
ChartDoughnut,
|
||||
Doughnut,
|
||||
AvatarState
|
||||
},
|
||||
props: {
|
||||
name: String,
|
||||
data: Object,
|
||||
type: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
duration: 1000
|
||||
|
|
@ -171,7 +221,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,26 +1,40 @@
|
|||
<template>
|
||||
<q-card flat bordered v-bind:class="['panel-entry', {'panel-entry-detail':type === 'detail'}, {'panel-entry-focus':focus}, {'panel-entry-ex-size':exSize}]">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
:class="['panel-entry', {'panel-entry-detail':type === 'detail'}, {'panel-entry-focus':focus}, {'panel-entry-ex-size':exSize}]"
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col">
|
||||
<div class="text-subtitle2">{{name}}</div>
|
||||
<div class="text-subtitle2">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="text-h3 text-center text-weight-bold ellipsis">
|
||||
<span>{{address}}</span>
|
||||
<q-tooltip>{{address}}</q-tooltip>
|
||||
<span>{{ address }}</span>
|
||||
<q-tooltip>{{ address }}</q-tooltip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PanelEntry',
|
||||
props: ['address', 'name', 'type', 'focus', 'exSize']
|
||||
}
|
||||
props: {
|
||||
address: String,
|
||||
name: String,
|
||||
type: String,
|
||||
focus: Boolean,
|
||||
exSize: Number
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,17 +1,24 @@
|
|||
<template>
|
||||
<q-card flat bordered v-bind:class="['panel-feature']">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
:class="['panel-feature']"
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col">
|
||||
<div class="text-subtitle2">{{featureKey}}</div>
|
||||
<div class="text-subtitle2">
|
||||
{{ featureKey }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="text-h3 text-center text-weight-bold">
|
||||
<q-chip
|
||||
v-bind:class="['feature-chip', {'feature-chip-string':isString}, {'feature-chip-boolean':isBoolean}, {'feature-chip-boolean-true':isTrue}]">
|
||||
{{getVal}}
|
||||
:class="['feature-chip', {'feature-chip-string':isString}, {'feature-chip-boolean':isBoolean}, {'feature-chip-boolean-true':isTrue}]"
|
||||
>
|
||||
{{ getVal }}
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<q-card flat bordered>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="row items-center no-wrap">
|
||||
<div class="col text-center">
|
||||
|
|
@ -11,16 +14,23 @@
|
|||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="text-h6 text-center text-weight-bold">
|
||||
{{getName}}
|
||||
{{ getName }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'PanelProvider',
|
||||
props: ['name'],
|
||||
props: {
|
||||
name: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getName () {
|
||||
return this.name
|
||||
|
|
@ -32,19 +42,19 @@ export default {
|
|||
return 'providers/plugin.svg'
|
||||
}
|
||||
if (name.startsWith('consul-')) {
|
||||
return `providers/consul.svg`
|
||||
return 'providers/consul.svg'
|
||||
}
|
||||
if (name.startsWith('consulcatalog-')) {
|
||||
return `providers/consulcatalog.svg`
|
||||
return 'providers/consulcatalog.svg'
|
||||
}
|
||||
if (name.startsWith('nomad-')) {
|
||||
return `providers/nomad.svg`
|
||||
return 'providers/nomad.svg'
|
||||
}
|
||||
|
||||
return `providers/${name}.svg`
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue