Adds a link to performance bar stats in Kibana

Adds a link to peek stats Kibana dashboard, this link is displayed
only for performance bar on .com or development environment.

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -30,6 +30,10 @@ export default {
       type: String,
       required: true,
     },
+    statsUrl: {
+      type: String,
+      required: true,
+    },
   },
   detailedMetrics: [
     {
@@ -169,6 +173,9 @@ export default {
         class="ml-auto"
         @change-current-request="changeCurrentRequest"
       />
+      <div v-if="statsUrl" id="peek-stats" class="view">
+        <a class="gl-text-blue-300" :href="statsUrl">{{ s__('PerformanceBar|Stats') }}</a>
+      </div>
     </div>
   </div>
 </template>

app/assets/javascripts/performance_bar/index.js

@@ -30,6 +30,7 @@ const initPerformanceBar = (el) => {
         requestId: performanceBarData.requestId,
         peekUrl: performanceBarData.peekUrl,
         profileUrl: performanceBarData.profileUrl,
+        statsUrl: performanceBarData.statsUrl,
       };
     },
     mounted() {
@@ -120,6 +121,7 @@ const initPerformanceBar = (el) => {
           requestId: this.requestId,
           peekUrl: this.peekUrl,
           profileUrl: this.profileUrl,
+          statsUrl: this.statsUrl,
         },
         on: {
           'add-request': this.addRequestManually,

app/views/peek/_bar.html.haml

@@ -2,5 +2,6 @@
 
 #js-peek{ data: { env: Peek.env,
          request_id: peek_request_id,
+         stats_url: ENV.fetch('GITLAB_PERFORMANCE_BAR_STATS_URL', ''),
          peek_url: "#{peek_routes_path}/results" },
          class: Peek.env }

doc/administration/monitoring/performance/performance_bar.md

@@ -6,6 +6,8 @@ info: To determine the technical writer assigned to the Stage/Group associated w
 
 # Performance Bar **(FREE SELF)**
 
+> The **Stats** field [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/271551) in GitLab SaaS 13.9.
+
 You can display the GitLab Performance Bar to see statistics for the performance
 of a page. When activated, it looks as follows:
 
@@ -53,6 +55,8 @@ From left to right, it displays:
 - **Request Selector**: a select box displayed on the right-hand side of the
   Performance Bar which enables you to view these metrics for any requests made while
   the current page was open. Only the first two requests per unique URL are captured.
+- **Stats** (optional): if the `GITLAB_PERFORMANCE_BAR_STATS_URL` environment variable is set,
+  this URL is displayed in the bar. In GitLab 13.9 and later, used only in GitLab SaaS.
 
 ## Request warnings
 

lib/gitlab/performance_bar/redis_adapter_when_peek_enabled.rb

@@ -17,7 +17,7 @@ module Gitlab
       # to a structured log
       # rubocop:disable Gitlab/ModuleWithInstanceVariables
       def enqueue_stats_job(request_id)
-        return unless gather_stats?
+        return unless Feature.enabled?(:performance_bar_stats)
 
         @client.sadd(GitlabPerformanceBarStatsWorker::STATS_KEY, request_id)
 
@@ -43,12 +43,6 @@ module Gitlab
         )
       end
       # rubocop:enable Gitlab/ModuleWithInstanceVariables
-
-      def gather_stats?
-        return unless Feature.enabled?(:performance_bar_stats)
-
-        Gitlab.com? || Gitlab.staging? || !Rails.env.production?
-      end
     end
   end
 end

locale/gitlab.pot

@@ -21465,6 +21465,9 @@ msgstr ""
 msgid "PerformanceBar|SQL queries"
 msgstr ""
 
+msgid "PerformanceBar|Stats"
+msgstr ""
+
 msgid "PerformanceBar|trace"
 msgstr ""
 

spec/features/user_can_display_performance_bar_spec.rb

@@ -49,6 +49,10 @@ RSpec.describe 'User can display performance bar', :js do
 
   let(:group) { create(:group) }
 
+  before do
+    allow(GitlabPerformanceBarStatsWorker).to receive(:perform_in)
+  end
+
   context 'when user is logged-out' do
     before do
       visit root_path
@@ -97,6 +101,28 @@ RSpec.describe 'User can display performance bar', :js do
 
       it_behaves_like 'performance bar is enabled by default in development'
       it_behaves_like 'performance bar can be displayed'
+
+      it 'does not show Stats link by default' do
+        find('body').native.send_keys('pb')
+        wait_for_requests
+
+        expect(page).not_to have_link('Stats')
+      end
+
+      context 'when GITLAB_PERFORMANCE_BAR_STATS_URL environment variable is set' do
+        let(:stats_url) { 'https://log.gprd.gitlab.net/app/dashboards#/view/' }
+
+        before do
+          stub_env('GITLAB_PERFORMANCE_BAR_STATS_URL', stats_url)
+        end
+
+        it 'shows Stats link' do
+          find('body').native.send_keys('pb')
+          wait_for_requests
+
+          expect(page).to have_link('Stats', href: stats_url)
+        end
+      end
     end
   end
 end

spec/frontend/performance_bar/components/performance_bar_app_spec.js

@@ -9,6 +9,7 @@ describe('performance bar app', () => {
       store,
       env: 'development',
       requestId: '123',
+      statsUrl: 'https://log.gprd.gitlab.net/app/dashboards#/view/',
       peekUrl: '/-/peek/results',
       profileUrl: '?lineprofiler=true',
     },

spec/frontend/performance_bar/index_spec.js

@@ -19,6 +19,7 @@ describe('performance bar wrapper', () => {
     peekWrapper.setAttribute('data-env', 'development');
     peekWrapper.setAttribute('data-request-id', '123');
     peekWrapper.setAttribute('data-peek-url', '/-/peek/results');
+    peekWrapper.setAttribute('data-stats-url', 'https://log.gprd.gitlab.net/app/dashboards#/view/');
     peekWrapper.setAttribute('data-profile-url', '?lineprofiler=true');
 
     mock = new MockAdapter(axios);