From 22d6ad7550a897e5a60249f3a5944883f1386fc1 Mon Sep 17 00:00:00 2001
From: Sean McGivern <sean@gitlab.com>
Date: Tue, 9 Oct 2018 12:13:28 +0100
Subject: [PATCH] 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.
---
 .../components/performance_bar_app.vue            | 15 ++++++++++++++-
 app/assets/stylesheets/framework/variables.scss   |  1 +
 app/assets/stylesheets/performance_bar.scss       |  4 ++++
 ...ow-canary-no-canary-in-the-performance-bar.yml |  5 +++++
 lib/peek/views/host.rb                            |  5 ++++-
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/52421-show-canary-no-canary-in-the-performance-bar.yml

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>
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b7a95f604b8..0fde6e18cc7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -605,6 +605,7 @@ $perf-bar-development: #4c1210;
 $perf-bar-bucket-bg: #111;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
+$perf-bar-canary-text: $orange-400;
 
 /*
 Issuable warning
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 59fdbf31fe9..9c01a2f8bda 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -68,6 +68,10 @@
     }
   }
 
+  .current-host.canary {
+    color: $perf-bar-canary-text;
+  }
+
   strong {
     color: $white-light;
   }
diff --git a/changelogs/unreleased/52421-show-canary-no-canary-in-the-performance-bar.yml b/changelogs/unreleased/52421-show-canary-no-canary-in-the-performance-bar.yml
new file mode 100644
index 00000000000..20e32a2e987
--- /dev/null
+++ b/changelogs/unreleased/52421-show-canary-no-canary-in-the-performance-bar.yml
@@ -0,0 +1,5 @@
+---
+title: Show canary status in the performance bar
+merge_request: 22222
+author:
+type: changed
diff --git a/lib/peek/views/host.rb b/lib/peek/views/host.rb
index 43c8a35c7ea..4fc70fbcebc 100644
--- a/lib/peek/views/host.rb
+++ b/lib/peek/views/host.rb
@@ -2,7 +2,10 @@ module Peek
   module Views
     class Host < View
       def results
-        { hostname: Gitlab::Environment.hostname }
+        {
+          hostname: Gitlab::Environment.hostname,
+          canary: Gitlab::Utils.to_boolean(ENV['CANARY'])
+        }
       end
     end
   end
-- 
GitLab