(status page) Add missing api key state

Add a special state for Kamon APM reporter that guides the user in case
their API key is not configured or is invalid.

Update Typescript and underscore to allow for modern dev practices.

Author: the-overengineer

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,12 @@
         </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)"
+      />
       <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 +36,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 +56,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 +92,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() {
+    window.open('https://apm.kamon.io?envinfo=show')
+  }
 }
 </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"/>
       </v-col>
 
       <v-col cols="12" class="js-instrumentation">
@@ -107,6 +107,10 @@ export default class Overview extends Vue {
     return this.settings.map(s => s.environment)
   }
 
+  get config(): Option<any> {
+    return this.settings.map(s => s.config)
+  }
+
   public mounted() {
     this.refreshData()
   }