show instrumentation modules in the status page

13 files changed, 328 insertions, 184 deletions

diff --git a/kamon-core/src/main/scala/kamon/module/ModuleRegistry.scala b/kamon-core/src/main/scala/kamon/module/ModuleRegistry.scala
index 18921b03..81b94f29 100644
--- a/kamon-core/src/main/scala/kamon/module/ModuleRegistry.scala
+++ b/kamon-core/src/main/scala/kamon/module/ModuleRegistry.scala
@@ -335,23 +335,22 @@ class ModuleRegistry(classLoading: ClassLoading, configuration: Configuration, c
     */
   private[kamon] def status(): Status.ModuleRegistry = {
     val automaticallyAddedModules = readModuleSettings(configuration.config()).map(moduleSettings => {
-      _registeredModules.get(moduleSettings.name)
-        .map(moduleEntry =>
-          // The module is on the classpath and started.
-          Status.Module(moduleEntry.name, moduleEntry.settings.description, moduleEntry.settings.clazz.getCanonicalName,
-            moduleEntry.settings.kind, false, true)
-
-        ).getOrElse(
-          // The module is on the classpath but has not been started.
-          Status.Module(moduleSettings.name, moduleSettings.description, moduleSettings.clazz.getCanonicalName,
-            moduleSettings.kind, false, false)
-        )
+      val isActive = _registeredModules.get(moduleSettings.name).nonEmpty
+
+      Status.Module(
+        moduleSettings.name,
+        moduleSettings.description,
+        moduleSettings.clazz.getCanonicalName,
+        moduleSettings.kind,
+        isProgrammaticallyRegistered = false,
+        moduleSettings.enabled,
+        isActive)
     })
 
     val programmaticallyAddedModules = _registeredModules
       .filter { case (_, entry) => entry.programmaticallyAdded }
       .map { case (name, entry) => Status.Module(name, entry.settings.description, entry.settings.clazz.getCanonicalName,
-        entry.settings.kind, true, true) }
+        entry.settings.kind, true, true, true) }
 
     val allModules = automaticallyAddedModules ++ programmaticallyAddedModules
     Status.ModuleRegistry(allModules)
diff --git a/kamon-core/src/main/scala/kamon/status/JsonMarshalling.scala b/kamon-core/src/main/scala/kamon/status/JsonMarshalling.scala
index a84d016a..3fb2df1e 100644
--- a/kamon-core/src/main/scala/kamon/status/JsonMarshalling.scala
+++ b/kamon-core/src/main/scala/kamon/status/JsonMarshalling.scala
@@ -40,7 +40,8 @@ object JsonMarshalling {
           .value("clazz", m.clazz)
           .value("kind", moduleKindString(m.kind))
           .value("isProgrammaticallyRegistered", m.isProgrammaticallyRegistered)
-          .value("isStarted", m.isStarted)
+          .value("enabled", m.isEnabled)
+          .value("started", m.isStarted)
           .end()
       })
 
diff --git a/kamon-core/src/main/scala/kamon/status/Status.scala b/kamon-core/src/main/scala/kamon/status/Status.scala
index dd5d475f..9b323922 100644
--- a/kamon-core/src/main/scala/kamon/status/Status.scala
+++ b/kamon-core/src/main/scala/kamon/status/Status.scala
@@ -73,6 +73,7 @@ object Status {
     clazz: String,
     kind: ModuleKind,
     isProgrammaticallyRegistered: Boolean,
+    isEnabled: Boolean,
     isStarted: Boolean
   )
 
diff --git a/kamon-status/src/App.vue b/kamon-status/src/App.vue
index ebb432c9..fd612828 100644
--- a/kamon-status/src/App.vue
+++ b/kamon-status/src/App.vue
@@ -4,7 +4,7 @@
       <div class="container h-100">
         <div class="row h-100 justify-content-between">
           <div class="col-auto h-100">
-            <img class="py-3 h-100 img-fluid" src="./assets/logo.svg" alt="">
+            <img class="logo h-100 img-fluid" src="./assets/logo.svg" alt="">
           </div>
         </div>
       </div>
@@ -17,7 +17,7 @@
 
 <style lang="scss">
 
-$header-height: 70px;
+$header-height: 85px;
 
 .header {
   height: $header-height;
@@ -39,5 +39,9 @@ $header-height: 70px;
       }
     }
   }
+
+  .logo {
+    padding: 1rem 0rem;
+  }
 }
 </style>
diff --git a/kamon-status/src/api/StatusApi.ts b/kamon-status/src/api/StatusApi.ts
index 3add6161..a077a48b 100644
--- a/kamon-status/src/api/StatusApi.ts
+++ b/kamon-status/src/api/StatusApi.ts
@@ -27,7 +27,8 @@ export interface Module {
   clazz: string
   kind: ModuleKind
   isProgrammaticallyRegistered: boolean
-  isStarted: boolean
+  enabled: boolean
+  started: boolean
 }
 
 export interface Metric {
@@ -46,14 +47,15 @@ export interface MetricRegistry {
 }
 
 export interface InstrumentationModule {
+  name: string
   description: string
-  isEnabled: boolean
-  isActive: boolean
+  enabled: boolean
+  active: boolean
 }
 
 export interface Instrumentation {
   isActive: boolean
-  modules: { [key: string]: InstrumentationModule }
+  modules: InstrumentationModule[]
   errors: { [key: string]: string[]}
 }
 
@@ -109,13 +111,17 @@ export class StatusApi {
     return axios.get('/status/instrumentation').then(response => {
       const instrumentation: Instrumentation = {
         isActive: response.data.isActive as boolean,
-        modules: {},
+        modules: [],
         errors: {}
       }
 
       const rawModules = response.data.modules
       Object.keys(rawModules).forEach(key => {
-        instrumentation.modules[key] = JSON.parse(rawModules[key])
+        const rawModule = JSON.parse(rawModules[key])
+        instrumentation.modules.push({
+          name: key,
+          ...rawModule
+        })
       })
 
       const rawErrors = response.data.errors
diff --git a/kamon-status/src/components/InstrumentationModuleList.vue b/kamon-status/src/components/InstrumentationModuleList.vue
new file mode 100644
index 00000000..224f6716
--- /dev/null
+++ b/kamon-status/src/components/InstrumentationModuleList.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="row">
+    <div class="col-12 pt-4 pb-2" v-if="modules.length > 0">
+      <h2>Instrumentation Modules</h2>
+    </div>
+    <div class="col-12 py-1" v-for="module in sortedModules" :key="module.name">
+      <instrumentation-module-status-card :module="module"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import {InstrumentationModule} from '../api/StatusApi'
+import InstrumentationModuleStatusCard from './InstrumentationModuleStatusCard.vue'
+
+
+@Component({
+  components: {
+    'instrumentation-module-status-card': InstrumentationModuleStatusCard
+  }
+})
+export default class ModuleList extends Vue {
+  @Prop() private modules!: InstrumentationModule[]
+
+  get sortedModules(): InstrumentationModule[] {
+    return this.modules.sort((left, right) => {
+      if (left.active === right.active) {
+        return left.name.localeCompare(right.name)
+      } else {
+        return left.active ? -1 : 1
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.apm-suggestion {
+  .kind-label {
+    background-color: #d0f3f0;
+  }
+}
+</style>
diff --git a/kamon-status/src/components/InstrumentationModuleStatusCard.vue b/kamon-status/src/components/InstrumentationModuleStatusCard.vue
new file mode 100644
index 00000000..6fb1206f
--- /dev/null
+++ b/kamon-status/src/components/InstrumentationModuleStatusCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <status-card :indicator-text="runStatus.message" :indicator-icon="runStatus.icon" :indicator-background-color="runStatus.color">
+    <div slot="default" class="py-3">
+      <h5 class="mb-0">{{ module.name }}</h5>
+      <div class="text-label">
+        {{ module.description }}
+      </div>
+    </div>
+  </status-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import {InstrumentationModule} from '../api/StatusApi'
+import StatusCard from './StatusCard.vue'
+
+
+@Component({
+  components: {
+    'status-card': StatusCard
+  }
+})
+export default class InstrumentationModuleStatusCard extends Vue {
+  @Prop() private module!: InstrumentationModule
+
+  get runStatus(): { message: string, color: string, icon: string } {
+    if (!this.module.enabled) {
+      return { message: 'disabled', color: '#ff9898', icon: 'fa-stop-circle' }
+    } else {
+      return this.module.active ?
+        { message: 'active', color: '#7ade94', icon: 'fa-check' } :
+        { message: 'available', color: '#bbbbbb', icon: 'fa-stop-circle' }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/kamon-status/src/components/ModuleCard.vue b/kamon-status/src/components/ModuleCard.vue
deleted file mode 100644
index ea3a0c68..00000000
--- a/kamon-status/src/components/ModuleCard.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <card>
-    <div class="row module-card">
-      <div class="col-auto">
-        <div class="status-indicator h-100 text-center pt-3" :class="runStatus.class">
-          <i class="fas fa-fw" :class="runStatus.icon"></i>
-          <div>
-            {{ runStatus.message }}
-          </div>
-        </div>
-      </div>
-      <div class="col">
-        <div class="py-3">
-          <h5 class="mb-0">{{ moduleStatus.name }} </h5>
-          <div class="text-label">
-            {{ moduleStatus.description }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </card>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import {Module} from '../api/StatusApi'
-import Card from './Card.vue'
-
-
-@Component({
-  components: {
-    card: Card
-  }
-})
-export default class ModuleCard extends Vue {
-  @Prop({ default: true }) private showStatusIndicators!: boolean
-  @Prop({ default: false }) private isSuggestion!: boolean
-  @Prop() private moduleStatus!: Module
-
-  get discoveryStatus(): { message: string, class: string } {
-    return this.moduleStatus.isProgrammaticallyRegistered ?
-      { message: 'manual', class: '' } :
-      { message: 'automatic', class: '' }
-  }
-
-  get runStatus(): { message: string, class: string, icon: string } {
-    if (this.isSuggestion) {
-      return { message: 'suggested', class: 'suggested', icon: 'fa-plug' }
-    } else {
-      return this.moduleStatus.isStarted ?
-        { message: 'started', class: 'healthy', icon: 'fa-check' } :
-        { message: 'disabled', class: 'critical', icon: 'fa-power-off' }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-
-$indicator-size: 6rem;
-.module-card {
-  min-height: $indicator-size;
-
-  .status-indicator {
-    text-transform: uppercase;
-    min-width: $indicator-size;
-    min-height: $indicator-size;
-    line-height: 2rem;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: white;
-    background-color: #cccccc;
-
-    i {
-      font-size: 2.5rem;
-    }
-  }
-
-  .critical {
-    background-color: #dadada;
-  }
-
-  .healthy {
-    background-color: #7ade94;
-  }
-
-  .suggested {
-    background-color: #5fd7cc;
-  }
-}
-</style>
diff --git a/kamon-status/src/components/ModuleList.vue b/kamon-status/src/components/ModuleList.vue
index 746ccf16..eddc05d0 100644
--- a/kamon-status/src/components/ModuleList.vue
+++ b/kamon-status/src/components/ModuleList.vue
@@ -4,20 +4,19 @@
       <h3>Reporters</h3>
     </div>
     <div class="col-12 py-1" v-for="reporter in reporterModules" :key="reporter.name">
-      <module-card :moduleStatus="reporter" />
+      <module-status-card :module="reporter" />
     </div>
     <div v-if="!hasApmModule" class="col-12 py-1 apm-suggestion">
       <a href="https://kamon.io/" target="_blank">
-        <module-card :is-suggestion="true" :show-status-indicators="false" :moduleStatus="apmModuleSuggestion" />
+        <module-status-card :is-suggestion="true" :module="apmModuleSuggestion" />
       </a>
     </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-card :moduleStatus="module"/>
+      <module-status-card :module="module"/>
     </div>
   </div>
 </template>
@@ -25,12 +24,12 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import {Module, ModuleKind} from '../api/StatusApi'
-import ModuleCard from './ModuleCard.vue'
+import ModuleStatusCard from './ModuleStatusCard.vue'
 
 
 @Component({
   components: {
-    'module-card': ModuleCard
+    'module-status-card': ModuleStatusCard
   }
 })
 export default class ModuleList extends Vue {
@@ -40,16 +39,17 @@ export default class ModuleList extends Vue {
     description: 'See your metrics and trace data for free with a Starter account.',
     kind: ModuleKind.Combined,
     isProgrammaticallyRegistered: false,
-    isStarted: false,
+    enabled: false,
+    started: false,
     clazz: ''
   }
 
   get sortedModules(): Module[] {
     return this.modules.sort((left, right) => {
-      if (left.isStarted === right.isStarted) {
+      if (left.started === right.started) {
         return left.name.localeCompare(right.name)
       } else {
-        return left.isStarted ? -1 : 1
+        return left.started ? -1 : 1
       }
     })
   }
@@ -76,15 +76,7 @@ export default class ModuleList extends Vue {
   }
 
   private isStarted(module: Module): boolean {
-    return module.isStarted
-  }
-}
-</script>
-
-<style lang="scss">
-.apm-suggestion {
-  .kind-label {
-    background-color: #d0f3f0;
+    return module.started
   }
 }
-</style>
+</script>
\ No newline at end of file
diff --git a/kamon-status/src/components/ModuleStatusCard.vue b/kamon-status/src/components/ModuleStatusCard.vue
new file mode 100644
index 00000000..825fce40
--- /dev/null
+++ b/kamon-status/src/components/ModuleStatusCard.vue
@@ -0,0 +1,52 @@
+<template>
+  <status-card :indicator-text="runStatus.message" :indicator-icon="runStatus.icon" :indicator-background-color="runStatus.color">
+    <div slot="default" class="py-3">
+      <h5 class="mb-0 mr-3 d-inline-block">{{ module.name }}</h5>
+      <div class="tag-container d-inline-block" v-if="!isSuggestion">
+        <span class="tag">{{ module.kind }}</span>
+        <span class="tag">{{ discoveryStatus }}</span>
+      </div>
+
+      <div class="text-label">
+        {{ module.description }}
+      </div>
+    </div>
+  </status-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import {Module} from '../api/StatusApi'
+import StatusCard from './StatusCard.vue'
+
+
+@Component({
+  components: {
+    'status-card': StatusCard
+  }
+})
+export default class ModuleStatusCard extends Vue {
+  @Prop({ default: false }) private isSuggestion!: boolean
+  @Prop() private module!: Module
+
+  get discoveryStatus(): string {
+    return this.module.isProgrammaticallyRegistered ? 'manual' : 'automatic'
+  }
+
+  get runStatus(): { message: string, color: string, icon: string } {
+    if (this.isSuggestion) {
+      return { message: 'suggested', color: '#5fd7cc', icon: 'fa-plug' }
+    } else if(!this.module.enabled) {
+      return { message: 'disabled', color: '#ff9898', icon: 'fa-stop-circle' }
+    } else {
+      return this.module.started ?
+        { message: 'active', color: '#7ade94', icon: 'fa-check' } :
+        { message: 'available', color: '#bbbbbb', icon: 'fa-check' }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
diff --git a/kamon-status/src/components/OverviewCard.vue b/kamon-status/src/components/OverviewCard.vue
new file mode 100644
index 00000000..a1805596
--- /dev/null
+++ b/kamon-status/src/components/OverviewCard.vue
@@ -0,0 +1,71 @@
+<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>
+        </div>
+      </card>
+    </div>
+  </div>
+</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'
+
+@Component({
+  components: {
+    card: Card
+  },
+})
+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.isActive ? 'Active' : 'Disabled') as string).getOrElse('Unknown')
+  }
+
+  get metricsStatusMessage(): string {
+    return this.trackedMetrics.map(mc => mc + ' Tracked').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>
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>
diff --git a/kamon-status/src/views/Overview.vue b/kamon-status/src/views/Overview.vue
index 830f5110..ae79f0c6 100644
--- a/kamon-status/src/views/Overview.vue
+++ b/kamon-status/src/views/Overview.vue
@@ -2,10 +2,10 @@
   <div class="container">
     <div class="row">
       <div class="col-12 pt-4 pb-2">
-        <h3>Status</h3>
+        <h3>Overview</h3>
       </div>
       <div class="col-12">
-        <status-card :module-registry="moduleRegistry" :metric-registry="metricRegistry" :instrumentation="instrumentation"/>
+        <overview-card :module-registry="moduleRegistry" :metric-registry="metricRegistry" :instrumentation="instrumentation"/>
       </div>
 
       <div class="col-12 pt-4 pb-2">
@@ -22,9 +22,13 @@
       <div class="col-12 pt-4 pb-2" v-if="metrics.length > 0">
         <h2>Metrics</h2>
       </div>
-      <div class="col-12 mb-5">
+      <div class="col-12">
         <metric-list :metrics="metrics"/>
       </div>
+      <div class="col-12 mb-5">
+        <instrumentation-module-list :modules="instrumentationModules"/>
+      </div>
+
     </div>
   </div>
 </template>
@@ -33,16 +37,18 @@
 import { Component, Vue } from 'vue-property-decorator'
 import {Option, none, some} from 'ts-option'
 import ModuleList from '../components/ModuleList.vue'
+import InstrumentationModuleList from '../components/InstrumentationModuleList.vue'
 import MetricList from '../components/MetricList.vue'
 import EnvironmentCard from '../components/EnvironmentCard.vue'
-import StatusCard from '../components/StatusCard.vue'
+import OverviewCard from '../components/OverviewCard.vue'
 import {StatusApi, Settings, ModuleRegistry, ModuleKind, MetricRegistry, Module, Metric,
-  Instrumentation, Environment} from '../api/StatusApi'
+  Instrumentation, Environment, InstrumentationModule} from '../api/StatusApi'
 
 @Component({
   components: {
-    'status-card': StatusCard,
+    'overview-card': OverviewCard,
     'module-list': ModuleList,
+    'instrumentation-module-list': InstrumentationModuleList,
     'metric-list': MetricList,
     'environment-card': EnvironmentCard
   },
@@ -93,6 +99,12 @@ export default class Overview extends Vue {
       .getOrElse([])
   }
 
+  get instrumentationModules(): InstrumentationModule[] {
+    return this.instrumentation
+      .map(i => i.modules)
+      .getOrElse([])
+  }
+
   get environment(): Option<Environment> {
     return this.settings.map(s => s.environment)
   }
@@ -113,7 +125,7 @@ export default class Overview extends Vue {
   }
 
   private isStarted(module: Module): boolean {
-    return module.isStarted
+    return module.started
   }
 }
 </script>