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/EnvironmentCard.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/EnvironmentCard.vue')
-rw-r--r-- | kamon-status-page/src/main/vue/src/components/EnvironmentCard.vue | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/kamon-status-page/src/main/vue/src/components/EnvironmentCard.vue b/kamon-status-page/src/main/vue/src/components/EnvironmentCard.vue new file mode 100644 index 00000000..98dc3f9f --- /dev/null +++ b/kamon-status-page/src/main/vue/src/components/EnvironmentCard.vue @@ -0,0 +1,66 @@ +<template> + <status-section title="Environment"> + <card> + <div class="row py-2 no-gutters"> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">Service</div> + <h6>{{ service }}</h6> + </div> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">Host</div> + <h6>{{ host }}</h6> + </div> + <div class="col-auto py-2 px-3"> + <div class="text-uppercase text-label pb-1">instance</div> + <h6>{{instance}}</h6> + </div> + <div class="col-12 col-md-3 py-2 px-3"> + <div class="text-uppercase text-label pb-1">tags</div> + <div class="tag-container" v-if="Object.keys(environmentTags).length > 0"> + <span class="tag" v-for="tag in Object.keys(environmentTags)" :key="tag"> + {{ tag }}=<span class="tag-value">{{ environmentTags[tag] }}</span> + </span> + </div> + <div v-else> + <h6>None</h6> + </div> + </div> + </div> + </card> + </status-section> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import {Environment} from '../api/StatusApi' +import Card from './Card.vue' +import StatusSection from '../components/StatusSection.vue' +import {Option, none} from 'ts-option' + + +@Component({ + components: { + 'card': Card, + 'status-section': StatusSection + } +}) +export default class EnvironmentCard extends Vue { + @Prop() private environment: Option<Environment> = none + + get instance(): string { + return this.environment.map(e => e.instance).getOrElse('Unknown') + } + + get host(): string { + return this.environment.map(e => e.host).getOrElse('Unknown') + } + + get service(): string { + return this.environment.map(e => e.service).getOrElse('Unknown') + } + + get environmentTags(): { [key: string]: string } { + return this.environment.map(e => e.tags).getOrElse({}) + } +} +</script>
\ No newline at end of file |