diff options
Diffstat (limited to 'kamon-status/src/components/ModuleStatus.vue')
-rw-r--r-- | kamon-status/src/components/ModuleStatus.vue | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/kamon-status/src/components/ModuleStatus.vue b/kamon-status/src/components/ModuleStatus.vue deleted file mode 100644 index fff3373e..00000000 --- a/kamon-status/src/components/ModuleStatus.vue +++ /dev/null @@ -1,76 +0,0 @@ -<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-3"> - <h5 class="mb-0">{{ moduleStatus.name }}</h5> - <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> |