Show if the host is a canary host in the perf bar

If the request came from a canary host, show this in the performance bar
by:

1. Adding a bird emoji.
2. Colouring the hostname yellow.

1 files changed, 14 insertions, 1 deletions

diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 1522e2227e4..300d453c174 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,5 +1,6 @@
 <script>
 import $ from 'jquery';
+import { glEmojiTag } from '~/emoji';
 
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
@@ -64,6 +65,16 @@ export default {
     lineProfileModal() {
       return $('#modal-peek-line-profile');
     },
+    hasHost() {
+      return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
+    },
+    birdEmoji() {
+      if (this.hasHost && this.currentRequest.details.host.canary) {
+        return glEmojiTag('baby_chick');
+      }
+
+      return '';
+    },
   },
   mounted() {
     this.currentRequest = this.requestId;
@@ -93,9 +104,11 @@ export default {
         class="view"
       >
         <span
-          v-if="currentRequest.details"
+          v-if="hasHost"
           class="current-host"
+          :class="{ 'canary' : currentRequest.details.host.canary }"
         >
+          <span v-html="birdEmoji"></span>
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>