diff options
Diffstat (limited to 'kamon-status/src/components/StatusCard.vue')
-rw-r--r-- | kamon-status/src/components/StatusCard.vue | 105 |
1 files changed, 59 insertions, 46 deletions
diff --git a/kamon-status/src/components/StatusCard.vue b/kamon-status/src/components/StatusCard.vue index 193744df..7293940e 100644 --- a/kamon-status/src/components/StatusCard.vue +++ b/kamon-status/src/components/StatusCard.vue @@ -1,71 +1,84 @@ <template> - <div class="row"> - <div class="col-12"> - <card> - <div class="row py-2 no-gutters"> - <div class="col-12 col-md-3 py-2 px-3"> - <div class="text-uppercase text-label pb-1">Instrumentation</div> - <h5>{{instrumentationStatusMessage}}</h5> - </div> - <div class="col-12 col-md-3 py-2 px-3"> - <div class="text-uppercase text-label pb-1">Reporters</div> - <h5>{{ activeReporters.length }} Started</h5> - </div> - <div class="col-12 col-md-3 py-2 px-3"> - <div class="text-uppercase text-label pb-1">Metrics</div> - <h5>{{metricsStatusMessage}}</h5> - </div> + <card> + <div class="row status-card"> + <div class="col-auto"> + <div class="status-indicator-wrap text-center text-uppercase" :style="indicatorStyle"> + <slot name="status-indicator"> + <div class="status-indicator h-100 pt-3"> + <i class="fas fa-fw" :class="indicatorIcon"></i> + <div> + {{ indicatorText }} + </div> + </div> + </slot> </div> - </card> + </div> + <div class="col"> + <slot name="default"> + + </slot> + </div> </div> - </div> + </card> </template> - <script lang="ts"> -import { Component, Vue, Prop } from 'vue-property-decorator' -import {Option, none, some} from 'ts-option' -import Card from '../components/Card.vue' -import {StatusApi, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric, Instrumentation} from '../api/StatusApi' +import { Component, Prop, Vue } from 'vue-property-decorator' +import Card from './Card.vue' @Component({ components: { card: Card - }, + } }) -export default class Overview extends Vue { - @Prop() private moduleRegistry: Option<ModuleRegistry> = none - @Prop() private metricRegistry: Option<MetricRegistry> = none - @Prop() private instrumentation: Option<Instrumentation> = none +export default class StatusCard extends Vue { + @Prop({ default: 'white' }) private indicatorColor!: string + @Prop({ default: '#989898' }) private indicatorBackgroundColor!: string + @Prop({ default: 'fa-question' }) private indicatorIcon!: string + @Prop({ default: 'Unknown' }) private indicatorText!: string - get reporterModules(): Module[] { - return this.moduleRegistry - .map(moduleRegistry => moduleRegistry.modules.filter(this.isReporter)) - .getOrElse([]) + get indicatorStyle() { + return { + color: this.indicatorColor, + backgroundColor: this.indicatorBackgroundColor + } } +} - get activeReporters(): Module[] { - return this.reporterModules.filter(this.isStarted) - } +</script> + +<style lang="scss"> + +$indicator-size: 6rem; +.status-card { + min-height: $indicator-size; - get trackedMetrics(): Option<number> { - return this.metricRegistry.map(metricRegistry => metricRegistry.metrics.length) + .status-indicator-wrap { + height: 100%; + min-width: $indicator-size; + min-height: $indicator-size; } - get instrumentationStatusMessage(): string { - return this.instrumentation.map(i => (i.isActive ? 'Active' : 'Disabled') as string).getOrElse('Unknown') + .status-indicator { + line-height: 2rem; + font-size: 0.9rem; + font-weight: 600; + + i { + font-size: 2.5rem; + } } - get metricsStatusMessage(): string { - return this.trackedMetrics.map(mc => mc + ' Tracked').getOrElse('Unknown') + .critical { + background-color: #dadada; } - private isReporter(module: Module): boolean { - return [ModuleKind.Combined, ModuleKind.Span, ModuleKind.Metric].indexOf(module.kind) > 0 + .healthy { + background-color: #7ade94; } - private isStarted(module: Module): boolean { - return module.isStarted + .suggested { + background-color: #5fd7cc; } } -</script> +</style> |