diff options
author | Ivan Topolnjak <ivantopo@gmail.com> | 2019-03-18 13:44:50 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-03-18 13:44:50 +0100 |
commit | 8efb3b408a876a3dfdac79580773279125cb4135 (patch) | |
tree | 96fd746fc13f4ffb914d8e59c4ea074513877556 /kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue | |
parent | e311df4b3a272f4f160857f718a96ec316a2fc06 (diff) | |
parent | ec83a72879378bc9eedea24f828e4d30fed95e92 (diff) | |
download | Kamon-8efb3b408a876a3dfdac79580773279125cb4135.tar.gz Kamon-8efb3b408a876a3dfdac79580773279125cb4135.tar.bz2 Kamon-8efb3b408a876a3dfdac79580773279125cb4135.zip |
Merge pull request #569 from ivantopo/status-page
Status page
Diffstat (limited to 'kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue')
-rw-r--r-- | kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue b/kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue new file mode 100644 index 00000000..18e2b038 --- /dev/null +++ b/kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue @@ -0,0 +1,52 @@ +<template> + <status-card :indicator-text="runStatus.message" :indicator-icon="runStatus.icon" :indicator-background-color="runStatus.color"> + <div slot="default" class="py-3 pl-4"> + <h5 class="mb-0 mr-3 d-inline-block">{{ module.name }}</h5> + <div class="tag-container d-inline-block" v-if="!isSuggestion"> + <span class="tag">{{ module.kind }}</span> + <span class="tag">{{ discoveryStatus }}</span> + </div> + + <div class="text-label"> + {{ module.description }} + </div> + </div> + </status-card> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import {Module} from '../api/StatusApi' +import StatusCard from './StatusCard.vue' + + +@Component({ + components: { + 'status-card': StatusCard + } +}) +export default class ModuleStatusCard extends Vue { + @Prop({ default: false }) private isSuggestion!: boolean + @Prop() private module!: Module + + get discoveryStatus(): string { + return this.module.programmaticallyRegistered ? 'manual' : 'automatic' + } + + get runStatus(): { message: string, color: string, icon: string } { + if (this.isSuggestion) { + return { message: 'suggested', color: '#5fd7cc', icon: 'fa-plug' } + } else if (!this.module.enabled) { + return { message: 'disabled', color: '#ff9898', icon: 'fa-stop-circle' } + } else { + return this.module.started ? + { message: 'active', color: '#7ade94', icon: 'fa-check' } : + { message: 'available', color: '#bbbbbb', icon: 'fa-check' } + } + } +} +</script> + +<style lang="scss"> + +</style> |