Merge pull request #969 from the-overengineer/feat/ls-kamon-apm-reporter-unconfigured-state

(status page) Add missing api key state

Author: SimunKaracic

core/kamon-status-page/src/main/vue/package-lock.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "ts-option": "1.1.5",
-    "underscore": "1.9.1",
+    "underscore": "^1.9.1",
     "vue": "2.6.10",
     "vue-class-component": "7.0.2",
     "vue-property-decorator": "8.1.0",
@@ -19,15 +19,15 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "5.8.1",
-    "@types/underscore": "1.8.14",
+    "@types/underscore": "^1.8.14",
     "@vue/cli-plugin-typescript": "3.6.0",
     "@vue/cli-service": "3.6.0",
     "fstream": ">=1.0.12",
     "node-sass": "4.11.0",
     "sass": "^1.32.0",
     "sass-loader": "^7.1.0",
     "tar": ">=2.2.2",
-    "typescript": "3.4.5",
+    "typescript": "3.9.7",
     "vue-cli-plugin-vuetify": "~2.1.0",
     "vue-template-compiler": "2.6.10",
     "vuetify-loader": "^1.7.0"

core/kamon-status-page/src/main/vue/package.json

@@ -16,7 +16,13 @@
         </div>
       </template>
 
-      <module-status-card v-for="reporter in reporterModules" :key="reporter.name" :module="reporter" />
+      <module-status-card
+        v-for="reporter in reporterModules"
+        :key="reporter.name"
+        :module="reporter"
+        :is-missing-key="isMisconfiguredApmModule(reporter)"
+        @show:api-key="$emit('show:api-key')"
+      />
       <div v-if="!hasApmModule" class="apm-suggestion">
         <a href="https://kamon.io/apm/?utm_source=kamon&utm_medium=status-page&utm_campaign=kamon-status" target="_blank">
           <module-status-card :isSuggestion="true" :module="apmModuleSuggestion" />
@@ -31,11 +37,17 @@
 </template>
 
 <script lang="ts">
+import { Option } from 'ts-option'
 import { Component, Prop, Vue } from 'vue-property-decorator'
+
 import {Module, ModuleKind} from '../api/StatusApi'
 import ModuleStatusCard from './ModuleStatusCard.vue'
 import StatusSection from './StatusSection.vue'
 
+const VALID_API_KEY_PATTERN = /^[a-zA-Z0-9]{26}$/
+const KNOWN_APM_CLASSES = [
+  'kamon.apm.KamonApm'
+]
 
 @Component({
   components: {
@@ -45,6 +57,8 @@ import StatusSection from './StatusSection.vue'
 })
 export default class ModuleList extends Vue {
   @Prop() private modules!: Module[]
+  @Prop({ required: true }) private config!: Option<any>
+
   private apmModuleSuggestion: Module = {
     name: 'Kamon APM Reporter',
     description: 'See your metrics and trace data for free with a Starter account.',
@@ -79,15 +93,29 @@ export default class ModuleList extends Vue {
   }
 
   get hasApmModule(): boolean {
-    const knownApmClasses = [
-      'kamon.apm.KamonApm'
-    ]
+    return this.modules.some(m => KNOWN_APM_CLASSES.includes(m.clazz))
+  }
+
+  get missingApmApiKey(): boolean {
+    if (this.config.isEmpty) {
+      return false
+    }
 
-    return this.modules.some(m => knownApmClasses.includes(m.clazz))
+    if (!this.hasApmModule) {
+      return false
+    }
+
+    const apiKey = this.config.get?.kamon?.apm?.['api-key']
+
+    return apiKey == null || !VALID_API_KEY_PATTERN.test(apiKey)
   }
 
   private isReporter(module: Module): boolean {
     return [ModuleKind.Combined, ModuleKind.Span, ModuleKind.Metric].includes(module.kind)
   }
+
+  private isMisconfiguredApmModule(m: Module) {
+    return KNOWN_APM_CLASSES.includes(m.clazz) && this.missingApmApiKey
+  }
 }
 </script>

core/kamon-status-page/src/main/vue/src/components/ModuleList.vue

@@ -4,19 +4,24 @@
     :indicator-icon="runStatus.icon"
     :indicator-background-color="runStatus.color"
     :indicator-color="runStatus.indicatorColor"
-    :content-class="{ 'suggestion-card': isSuggestion }"
+    :content-class="{ 'suggestion-card': isSuggestion, 'misconfigured-card': isMissingKey }"
   >
     <template #default>
       <div>
         <div class="text-label dark1--text">
           {{module.name}}
         </div>
         <div class="text-sublabel mt-1 dark3--text">
-          {{module.description}}
+          <span v-if="isMissingKey">
+            Setting <strong>kamon.apm.api-key</strong> in <strong>application.conf</strong> invalid or missing
+          </span>
+          <span v-else>
+            {{module.description}}
+          </span>
         </div>
       </div>
     </template>
-    <template #status v-if="!isSuggestion">
+    <template #status v-if="!isSuggestion && !isMissingKey">
       <div
         class="module-status text-indicator px-2 py-1 rounded"
         :class="chipClasses"
@@ -29,6 +34,11 @@
         Connect APM
       </v-btn>
     </template>
+    <template #action v-else-if="isMissingKey">
+      <v-btn depressed color="warning" class="px-4 font-weight-bold" @click="showApmApiKey">
+        Configure API Key
+      </v-btn>
+    </template>
   </status-card>
 </template>
 
@@ -47,14 +57,17 @@ const isInstrumentationModule = (m: any): m is InstrumentationModule =>
 })
 export default class ModuleStatusCard extends Vue {
   @Prop({ default: false }) private isSuggestion!: boolean
+  @Prop({ default: false }) private isMissingKey!: boolean
   @Prop() private module!: Module | InstrumentationModule
 
   get started(): boolean {
     return isInstrumentationModule(this.module) ? this.module.active : this.module.started
   }
 
   get status(): string {
-    if (this.started) {
+    if (this.isMissingKey) {
+      return 'Not Configured'
+    } else if (this.started) {
       return 'Enabled'
     } else if (this.module.enabled) {
       return 'Present'
@@ -68,6 +81,8 @@ export default class ModuleStatusCard extends Vue {
       return { message: 'suggested', color: 'primary', icon: 'fa-plug', indicatorColor: 'white' }
     } else if (!this.module.enabled) {
       return { message: 'disabled', color: 'error', icon: 'fa-stop-circle', indicatorColor: 'white' }
+    } else if (this.isMissingKey) {
+      return { message: 'not configured', color: 'warning', icon: 'fa-plug', indicatorColor: 'white'}
     } else {
       return this.started ?
         { message: 'active', color: 'primary', icon: 'fa-check', indicatorColor: 'white' } :
@@ -84,6 +99,10 @@ export default class ModuleStatusCard extends Vue {
       return 'red4 error--text'
     }
   }
+
+  public showApmApiKey() {
+    this.$emit('show:api-key')
+  }
 }
 </script>
 
@@ -92,4 +111,9 @@ export default class ModuleStatusCard extends Vue {
   border: 1px solid #3BC882 !important;
   background-color: #E3FFF1 !important;
 }
+
+.misconfigured-card {
+  border: 1px solid #FFCC00 !important;
+  background-color: #FFF8E5 !important;
+}
 </style>

core/kamon-status-page/src/main/vue/src/components/ModuleStatusCard.vue

@@ -16,7 +16,7 @@
       </v-col>
 
       <v-col cols="12" class="js-reporters">
-        <module-list :modules="modules"/>
+        <module-list :config="config" :modules="modules" @show:api-key="showApmApiKey" />
       </v-col>
 
       <v-col cols="12" class="js-instrumentation">
@@ -107,6 +107,32 @@ export default class Overview extends Vue {
     return this.settings.map(s => s.environment)
   }
 
+  get config(): Option<any> {
+    return this.settings.map(s => s.config)
+  }
+
+  get redirectInfo() {
+    const serviceName = this.config.map(c => c?.kamon?.environment?.service).orNull
+    const usedInstrumentation = this.instrumentationModules.filter(m => m.enabled && m.active)
+    const framework = (() => {
+      if (usedInstrumentation.some(i => i.name.toLocaleLowerCase().includes('play'))) {
+        return 'play'
+      } else if (usedInstrumentation.some(i => i.name.toLocaleLowerCase().includes('akka'))) {
+        return 'akka'
+      } else if (usedInstrumentation.some(i => i.name.toLocaleLowerCase().includes('spring'))) {
+        return 'spring'
+      } else {
+        return 'plain'
+      }
+    })()
+    const query = new URLSearchParams()
+
+    query.set('continueOnboarding', 'true')
+    query.set('framework', framework)
+    query.set('serviceName', serviceName)
+    return `https://apm.kamon.io?${query.toString()}`
+  }
+
   public mounted() {
     this.refreshData()
   }
@@ -123,6 +149,10 @@ export default class Overview extends Vue {
     this.$vuetify.goTo('.js-metrics', { offset: 80 })
   }
 
+  private showApmApiKey() {
+    window.open(this.redirectInfo)
+  }
+
   private refreshData(): void {
     StatusApi.settings().then(settings => { this.settings = some(settings) })
     StatusApi.metricRegistryStatus().then(metricRegistry => { this.metricRegistry = some(metricRegistry) })