baalajimaestro/traefik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add a service sticky details vue component

Browse source
This commit is contained in:
Jean-Baptiste Doumenjou 2019-10-09 17:34:05 +02:00 committed by Traefiker Bot
parent f2656e62dc
commit 7e4e5ec6e4
2 changed files with 84 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
webui/src/components/_commons/PanelServiceDetails.vue
View file

@ -54,37 +54,8 @@
</div>
</q-card-section>
<q-separator v-if="data.weighted && data.weighted.sticky" />
<q-card-section v-if="data.weighted && data.weighted.sticky" >
<div class="row items-start no-wrap">
<div class="text-subtitle1">Sticky: Cookie</div>
</div>
</q-card-section>
<q-card-section v-if="data.weighted && data.weighted.sticky" >
<div class="row items-start no-wrap">
<div class="col" v-if="data.weighted.sticky.cookie && data.weighted.sticky.cookie.name">
<div class="text-subtitle2">NAME</div>
<q-chip
dense
class="app-chip app-chip-entry-points">
{{ data.weighted.sticky.cookie.name }}
</q-chip>
</div>
</div>
</q-card-section>
<q-card-section v-if="data.weighted && data.weighted.sticky" >
<div class="row items-start no-wrap">
<div class="col">
<div class="text-subtitle2">SECURE</div>
<boolean-state :value="data.weighted.sticky.cookie.secure"/>
</div>
<div class="col">
<div class="text-subtitle2">HTTP Only</div>
<boolean-state :value="data.weighted.sticky.cookie.httpOnly"/>
</div>
</div>
</q-card-section>
<q-separator v-if="sticky" />
<StickyServiceDetails v-if="sticky" :sticky="sticky" :dense="dense"/>
</q-scroll-area>
</q-card>
</template>
@ -92,17 +63,30 @@
<script>
import AvatarState from './AvatarState'
import BooleanState from './BooleanState'
import StickyServiceDetails from './StickyServiceDetails'
export default {
name: 'PanelServiceDetails',
props: ['data', 'dense'],
components: {
BooleanState,
AvatarState
AvatarState,
StickyServiceDetails
},
computed: {
isDense () {
return this.dense !== undefined
},
sticky () {
if (this.data.weighted && this.data.weighted.sticky) {
return this.data.weighted.sticky
}
if (this.data.loadBalancer && this.data.loadBalancer.sticky) {
return this.data.loadBalancer.sticky
}
return null
}
},
filters: {

68
webui/src/components/_commons/StickyServiceDetails.vue Normal file
View file

@ -0,0 +1,68 @@
<template>
<div>
<q-card-section>
<div class="row items-start no-wrap">
<div class="text-subtitle1">Sticky: Cookie </div>
</div>
</q-card-section>
<q-card-section>
<div class="row items-start no-wrap">
<div class="col" v-if="sticky.cookie && sticky.cookie.name">
<div class="text-subtitle2">NAME</div>
<q-chip
dense
class="app-chip app-chip-entry-points">
{{ sticky.cookie.name }}
</q-chip>
</div>
</div>
</q-card-section>
<q-card-section>
<div class="row items-start no-wrap">
<div class="col">
<div class="text-subtitle2">SECURE</div>
<boolean-state :value="sticky.cookie.secure"/>
</div>
<div class="col">
<div class="text-subtitle2">HTTP Only</div>
<boolean-state :value="sticky.cookie.httpOnly"/>
</div>
</div>
</q-card-section>
</div>
</template>
<script>
import BooleanState from './BooleanState'
export default {
name: 'StickyServiceDetails',
components: {
BooleanState
},
props: ['sticky', 'dense']
}
</script>
<style scoped lang="scss">
@import "../../css/sass/variables";
.q-card__section {
padding: 24px;
+ .q-card__section {
padding-top: 0;
}
}
.text-subtitle2 {
font-size: 11px;
color: $app-text-grey;
line-height: 16px;
margin-bottom: 4px;
text-align: left;
letter-spacing: 2px;
font-weight: 600;
text-transform: uppercase;
}
</style>