diff options
author | Ivan Topolnjak <ivantopo@gmail.com> | 2019-03-11 22:21:06 +0100 |
---|---|---|
committer | Ivan Topolnjak <ivantopo@gmail.com> | 2019-03-15 11:36:11 +0100 |
commit | ec83a72879378bc9eedea24f828e4d30fed95e92 (patch) | |
tree | 96fd746fc13f4ffb914d8e59c4ea074513877556 /kamon-status-page/src/main/vue/src/components/OverviewCard.vue | |
parent | 5df3351de8a885e2eb2b52f75817347a599b2327 (diff) | |
download | Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.tar.gz Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.tar.bz2 Kamon-ec83a72879378bc9eedea24f828e4d30fed95e92.zip |
separate the status-page project from the status API
Diffstat (limited to 'kamon-status-page/src/main/vue/src/components/OverviewCard.vue')
-rw-r--r-- | kamon-status-page/src/main/vue/src/components/OverviewCard.vue | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/kamon-status-page/src/main/vue/src/components/OverviewCard.vue b/kamon-status-page/src/main/vue/src/components/OverviewCard.vue new file mode 100644 index 00000000..6746d761 --- /dev/null +++ b/kamon-status-page/src/main/vue/src/components/OverviewCard.vue @@ -0,0 +1,71 @@ +<template> + <status-section title="Overview"> + <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> + </div> + </card> + </status-section> +</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 StatusSection from '../components/StatusSection.vue' +import {StatusApi, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric, Instrumentation} from '../api/StatusApi' + +@Component({ + components: { + 'card': Card, + 'status-section': StatusSection + }, +}) +export default class OverviewCard extends Vue { + @Prop() private moduleRegistry: Option<ModuleRegistry> = none + @Prop() private metricRegistry: Option<MetricRegistry> = none + @Prop() private instrumentation: Option<Instrumentation> = none + + get reporterModules(): Module[] { + return this.moduleRegistry + .map(moduleRegistry => moduleRegistry.modules.filter(this.isReporter)) + .getOrElse([]) + } + + get activeReporters(): Module[] { + return this.reporterModules.filter(this.isStarted) + } + + get trackedMetrics(): Option<number> { + return this.metricRegistry.map(metricRegistry => metricRegistry.metrics.length) + } + + get instrumentationStatusMessage(): string { + return this.instrumentation.map(i => (i.active ? 'Active' : 'Disabled') as string).getOrElse('Unknown') + } + + get metricsStatusMessage(): string { + return this.trackedMetrics.map(mc => mc + ' Series').getOrElse('Unknown') + } + + private isReporter(module: Module): boolean { + return [ModuleKind.Combined, ModuleKind.Span, ModuleKind.Metric].indexOf(module.kind) > 0 + } + + private isStarted(module: Module): boolean { + return module.started + } +} +</script> |