diff options
Diffstat (limited to 'kamon-status/src/components/ModuleStatus.vue')
-rw-r--r-- | kamon-status/src/components/ModuleStatus.vue | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/kamon-status/src/components/ModuleStatus.vue b/kamon-status/src/components/ModuleStatus.vue new file mode 100644 index 00000000..a92cf46f --- /dev/null +++ b/kamon-status/src/components/ModuleStatus.vue @@ -0,0 +1,76 @@ +<template> + <card> + <div class="row"> + <div class="col-12"> + <div class="py-2 px-3 text-uppercase text-label"> + {{ moduleStatus.kind }} + </div> + <hr> + </div> + <div class="col"> + <div class="px-3 py-2"> + <h4>{{ moduleStatus.name }}</h4> + <div class="text-label"> + {{ moduleStatus.description }} + </div> + </div> + </div> + <div class="col-auto"> + <div class="status-indicator text-center" :class="runStatus.class">{{ runStatus.message }}</div> + <div class="status-indicator text-center">{{ discoveryStatus.message }}</div> + </div> + </div> + </card> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import {Module} from '../api/StatusApi' +import Card from './Card.vue' + + +@Component({ + components: { + card: Card + } +}) +export default class ModuleStatus extends Vue { + @Prop() private moduleStatus!: Module + + get discoveryStatus(): { message: string, class: string } { + return this.moduleStatus.isProgrammaticallyRegistered ? + { message: 'manual', class: '' } : + { message: 'automatic', class: '' } + } + + get runStatus(): { message: string, class: string } { + return this.moduleStatus.isStarted ? + { message: 'started', class: 'healthy' } : + { message: 'disabled', class: 'critical' } + } +} +</script> + +<style scoped lang="scss"> +.status-indicator { + font-size: 0.9rem; + border-radius: 0.3rem; + color: white; + margin: 0.5rem 1rem; + padding: 0.1rem 1rem; + background-color: #cccccc; +} + +.critical { + background-color: #ff6e6b; +} + +.healthy { + background-color: #6ada87; +} + +hr { + margin: 1px; + border-color: #f3f3f3; +} +</style> |