diff options
Diffstat (limited to 'kamon-status')
| -rw-r--r-- | kamon-status/src/api/StatusApi.ts | 34 | ||||
| -rw-r--r-- | kamon-status/src/components/MetricList.vue | 20 | ||||
| -rw-r--r-- | kamon-status/src/components/ModuleStatus.vue | 4 | ||||
| -rw-r--r-- | kamon-status/src/styles/main.scss | 20 | ||||
| -rw-r--r-- | kamon-status/src/views/Overview.vue | 70 |
5 files changed, 120 insertions, 28 deletions
diff --git a/kamon-status/src/api/StatusApi.ts b/kamon-status/src/api/StatusApi.ts index d00761e5..25d525d2 100644 --- a/kamon-status/src/api/StatusApi.ts +++ b/kamon-status/src/api/StatusApi.ts @@ -44,6 +44,18 @@ export interface MetricRegistry { metrics: Metric[] } +export interface InstrumentationModule { + description: string + isEnabled: boolean + isActive: boolean +} + +export interface Instrumentation { + isActive: boolean + modules: { [key: string]: InstrumentationModule } + errors: { [key: string]: string[]} +} + export class StatusApi { @@ -91,4 +103,26 @@ export class StatusApi { return metricRegistry }) } + + public static instrumentationStatus(): Promise<Instrumentation> { + return axios.get('/status/instrumentation').then(response => { + const instrumentation: Instrumentation = { + isActive: response.data.isActive as boolean, + modules: {}, + errors: {} + } + + const rawModules = response.data.modules + Object.keys(rawModules).forEach(key => { + instrumentation.modules[key] = JSON.parse(rawModules[key]) + }) + + const rawErrors = response.data.errors + Object.keys(rawErrors).forEach(key => { + instrumentation.errors[key] = JSON.parse(rawErrors[key]) + }) + + return instrumentation + }) + } } diff --git a/kamon-status/src/components/MetricList.vue b/kamon-status/src/components/MetricList.vue index 758252e7..b9b6a92a 100644 --- a/kamon-status/src/components/MetricList.vue +++ b/kamon-status/src/components/MetricList.vue @@ -12,7 +12,7 @@ <div class="row no-gutters" v-for="(metric, index) in matchedMetrics" :key="metric.search"> <div class="col-12 px-3 pt-1 pb-3"> <div class="text-uppercase text-label">{{ metric.type }}</div> - <h4>{{ metric.name }}</h4> + <h5>{{ metric.name }}</h5> <div class="tag-container"> <span class="tag" v-for="tag in Object.keys(metric.tags)" :key="tag"> {{ tag }}=<span class="tag-value">{{ metric.tags[tag] }}</span> @@ -75,7 +75,7 @@ export default class MetricList extends Vue { height: 2.5rem; border: none; border-radius: 0.3rem; - background-color: #e8e8e8; + background-color: #efefef; &:focus { outline: none; @@ -93,20 +93,4 @@ export default class MetricList extends Vue { padding-right: 1rem; } } - -.tag-container { - margin: 0rem -0.3rem; -} - -.tag { - background-color: #f4f4f4; - margin: 0.3rem; - padding: 0.1rem 0.5rem; - border-radius: 0.2rem; -} - -.tag-value { - color: #676767; -} - </style> diff --git a/kamon-status/src/components/ModuleStatus.vue b/kamon-status/src/components/ModuleStatus.vue index a92cf46f..fff3373e 100644 --- a/kamon-status/src/components/ModuleStatus.vue +++ b/kamon-status/src/components/ModuleStatus.vue @@ -8,8 +8,8 @@ <hr> </div> <div class="col"> - <div class="px-3 py-2"> - <h4>{{ moduleStatus.name }}</h4> + <div class="px-3 py-3"> + <h5 class="mb-0">{{ moduleStatus.name }}</h5> <div class="text-label"> {{ moduleStatus.description }} </div> diff --git a/kamon-status/src/styles/main.scss b/kamon-status/src/styles/main.scss index cde62b37..271da8af 100644 --- a/kamon-status/src/styles/main.scss +++ b/kamon-status/src/styles/main.scss @@ -13,4 +13,22 @@ h1, h2, h3 { .text-label { color: #b3b3b3; -}
\ No newline at end of file +} + +.tag-container { + margin: 0rem -0.3rem; +} + +.tag { + display: inline-block; + overflow-wrap: anywhere; + background-color: #f4f4f4; + margin: 0.3rem; + padding: 0.1rem 0.5rem; + border-radius: 0.2rem; +} + +.tag-value { + overflow-wrap: anywhere; + color: #676767; +} diff --git a/kamon-status/src/views/Overview.vue b/kamon-status/src/views/Overview.vue index 2d6e8dd7..75b39eb0 100644 --- a/kamon-status/src/views/Overview.vue +++ b/kamon-status/src/views/Overview.vue @@ -8,15 +8,15 @@ <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-2">Instrumentation</div> - <h5>Active</h5> + <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-2">Reporters</div> + <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-2">Metrics</div> + <div class="text-uppercase text-label pb-1">Metrics</div> <h5>{{metricsStatusMessage}}</h5> </div> </div> @@ -24,6 +24,39 @@ </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> + </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"> @@ -53,7 +86,7 @@ import {Option, none, some} from 'ts-option' import ModuleStatus from '../components/ModuleStatus.vue' import Card from '../components/Card.vue' import MetricList from '../components/MetricList.vue' -import {StatusApi, Settings, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric} from '../api/StatusApi' +import {StatusApi, Settings, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric, Instrumentation} from '../api/StatusApi' @Component({ components: { @@ -66,6 +99,7 @@ export default class Overview extends Vue { private settings: Option<Settings> = none private moduleRegistry: Option<ModuleRegistry> = none private metricsRegistry: Option<MetricRegistry> = none + private instrumentation: Option<Instrumentation> = none get reporterModules(): Module[] { return this.moduleRegistry @@ -87,6 +121,10 @@ export default class Overview extends Vue { return this.metricsRegistry.map(metricRegistry => metricRegistry.metrics.length) } + get instrumentationStatusMessage(): string { + return this.instrumentation.map(i => (i.isActive ? 'Active' : 'Disabled') as string).getOrElse('Unknown') + } + get metricsStatusMessage(): string { return this.trackedMetrics.map(mc => mc + ' Tracked').getOrElse('Unknown') } @@ -97,6 +135,23 @@ export default class Overview extends Vue { .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 environmentTags(): { [key: string]: string } { + return this.settings.map(s => s.environment.tags).getOrElse({}) + } + + public mounted() { this.refreshData() @@ -106,11 +161,12 @@ export default class Overview extends Vue { StatusApi.settings().then(settings => { this.settings = some(settings) }) StatusApi.metricRegistryStatus().then(metricsRegistry => { this.metricsRegistry = some(metricsRegistry) }) StatusApi.moduleRegistryStatus().then(moduleRegistry => {this.moduleRegistry = some(moduleRegistry) }) + StatusApi.instrumentationStatus().then(instrumentation => {this.instrumentation = some(instrumentation) }) } private isReporter(module: Module): boolean { - return [ModuleKind.Combined, ModuleKind.Span, ModuleKind.Metric].indexOf(module.kind) > 0 - } + return [ModuleKind.Combined, ModuleKind.Span, ModuleKind.Metric].indexOf(module.kind) > 0 + } private isStarted(module: Module): boolean { return module.isStarted |