diff options
Diffstat (limited to 'kamon-status/src/components/StatusCard.vue')
-rw-r--r-- | kamon-status/src/components/StatusCard.vue | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/kamon-status/src/components/StatusCard.vue b/kamon-status/src/components/StatusCard.vue new file mode 100644 index 00000000..05047a19 --- /dev/null +++ b/kamon-status/src/components/StatusCard.vue @@ -0,0 +1,79 @@ +<template> + <div class="outer"> + <div class="py-2 px-3 heading text-uppercase"> + {{ statusInfo.heading }} + </div> + <hr> + <div class="px-3 py-2"> + <div class="message" :class="messageStatusClass"> + {{ statusInfo.message }} + </div> + <div class="caption"> + {{ statusInfo.caption }} + </div> + </div> + </div> +</template> + +<script lang="ts"> +import { Component, Prop, Vue } from 'vue-property-decorator' +import axios from 'axios' + +export enum Status { + Healthy, + Critical, + Unknown +} + +export interface StatusInfo { + heading: string + message: string + caption?: string + status: Status +} + +@Component +export default class StatusCard extends Vue { + @Prop() private statusInfo!: StatusInfo + + get messageStatusClass(): string[] { + if(this.statusInfo != null && this.statusInfo.status != Status.Unknown) { + return this.statusInfo.status == Status.Healthy ? ['healthy'] : ['critical'] + } else { + return [] + } + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped lang="scss"> +.outer { + background-color: white; + box-shadow: 0 2px 9px 1px rgba(0, 0, 0, 0.1); + + .heading { + font-size: 0.9rem; + color: #a5a5a5; + } + + .message { + color: #868686; + font-weight: 600; + font-size: 1.5rem; + } + + .caption { + color: #a5a5a5; + } + + .critical { + color: #ff6e6b; + } +} + +hr { + margin: 1px; + border-color: #f3f3f3; +} +</style> |