diff options
Diffstat (limited to 'kamon-status/src/views/Overview.vue')
| -rw-r--r-- | kamon-status/src/views/Overview.vue | 102 |
1 files changed, 23 insertions, 79 deletions
diff --git a/kamon-status/src/views/Overview.vue b/kamon-status/src/views/Overview.vue index 75b39eb0..830f5110 100644 --- a/kamon-status/src/views/Overview.vue +++ b/kamon-status/src/views/Overview.vue @@ -5,69 +5,18 @@ <h3>Status</h3> </div> <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> - </div> - </card> + <status-card :module-registry="moduleRegistry" :metric-registry="metricRegistry" :instrumentation="instrumentation"/> </div> <div class="col-12 pt-4 pb-2"> <h3>Environment</h3> </div> <div class="col-12"> - <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> + <environment-card :environment="environment"/> </div> - <div class="col-12 pt-4 pb-2"> - <h3>Reporters</h3> - </div> - <div class="col-12 py-1" v-for="reporter in reporterModules" :key="reporter.name"> - <module-status :moduleStatus="reporter" /> - </div> - - <div class="col-12 pt-4 pb-2" v-if="plainModules.length > 0"> - <h2>Modules</h2> - </div> - <div class="col-12 py-1" v-for="module in plainModules" :key="module.name"> - <module-status :moduleStatus="module" /> + <div class="col-12"> + <module-list :modules="modules"/> </div> <div class="col-12 pt-4 pb-2" v-if="metrics.length > 0"> @@ -83,22 +32,25 @@ <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import {Option, none, some} from 'ts-option' -import ModuleStatus from '../components/ModuleStatus.vue' -import Card from '../components/Card.vue' +import ModuleList from '../components/ModuleList.vue' import MetricList from '../components/MetricList.vue' -import {StatusApi, Settings, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric, Instrumentation} from '../api/StatusApi' +import EnvironmentCard from '../components/EnvironmentCard.vue' +import StatusCard from '../components/StatusCard.vue' +import {StatusApi, Settings, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric, + Instrumentation, Environment} from '../api/StatusApi' @Component({ components: { - 'card': Card, - 'module-status': ModuleStatus, - 'metric-list': MetricList + 'status-card': StatusCard, + 'module-list': ModuleList, + 'metric-list': MetricList, + 'environment-card': EnvironmentCard }, }) export default class Overview extends Vue { private settings: Option<Settings> = none private moduleRegistry: Option<ModuleRegistry> = none - private metricsRegistry: Option<MetricRegistry> = none + private metricRegistry: Option<MetricRegistry> = none private instrumentation: Option<Instrumentation> = none get reporterModules(): Module[] { @@ -118,7 +70,7 @@ export default class Overview extends Vue { } get trackedMetrics(): Option<number> { - return this.metricsRegistry.map(metricRegistry => metricRegistry.metrics.length) + return this.metricRegistry.map(metricRegistry => metricRegistry.metrics.length) } get instrumentationStatusMessage(): string { @@ -130,36 +82,28 @@ export default class Overview extends Vue { } get metrics(): Metric[] { - return this.metricsRegistry + return this.metricRegistry .map(mr => mr.metrics) .getOrElse([]) } - get instance(): string { - return this.settings.map(s => s.environment.instance).getOrElse('Unknown') - } - - get host(): string { - return this.settings.map(s => s.environment.host).getOrElse('Unknown') - } - - get service(): string { - return this.settings.map(s => s.environment.service).getOrElse('Unknown') + get modules(): Module[] { + return this.moduleRegistry + .map(mr => mr.modules) + .getOrElse([]) } - get environmentTags(): { [key: string]: string } { - return this.settings.map(s => s.environment.tags).getOrElse({}) + get environment(): Option<Environment> { + return this.settings.map(s => s.environment) } - - public mounted() { this.refreshData() } private refreshData(): void { StatusApi.settings().then(settings => { this.settings = some(settings) }) - StatusApi.metricRegistryStatus().then(metricsRegistry => { this.metricsRegistry = some(metricsRegistry) }) + StatusApi.metricRegistryStatus().then(metricRegistry => { this.metricRegistry = some(metricRegistry) }) StatusApi.moduleRegistryStatus().then(moduleRegistry => {this.moduleRegistry = some(moduleRegistry) }) StatusApi.instrumentationStatus().then(instrumentation => {this.instrumentation = some(instrumentation) }) } |