Merge branch 'pravi/gitlab-ce-remove-vendored-peek' into 'master'

Remove `peek-performance_bar` from the performance bar

See merge request gitlab-org/gitlab-ce!18597

Gemfile

@@ -283,7 +283,6 @@ gem 'batch-loader', '~> 1.2.1'
 gem 'peek', '~> 1.0.1'
 gem 'peek-gc', '~> 0.0.2'
 gem 'peek-mysql2', '~> 1.1.0', group: :mysql
-gem 'peek-performance_bar', '~> 1.3.0'
 gem 'peek-pg', '~> 1.3.0', group: :postgres
 gem 'peek-rblineprof', '~> 0.2.0'
 gem 'peek-redis', '~> 1.2.0'

Gemfile.lock

@@ -603,8 +603,6 @@ GEM
       atomic (>= 1.0.0)
       mysql2
       peek
-    peek-performance_bar (1.3.1)
-      peek (>= 0.1.0)
     peek-pg (1.3.0)
       concurrent-ruby
       concurrent-ruby-ext
@@ -1130,7 +1128,6 @@ DEPENDENCIES
   peek (~> 1.0.1)
   peek-gc (~> 0.0.2)
   peek-mysql2 (~> 1.1.0)
-  peek-performance_bar (~> 1.3.0)
   peek-pg (~> 1.3.0)
   peek-rblineprof (~> 0.2.0)
   peek-redis (~> 1.2.0)

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

@@ -5,7 +5,6 @@ import PerformanceBarService from '../services/performance_bar_service';
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
 import simpleMetric from './simple_metric.vue';
-import upstreamPerformanceBar from './upstream_performance_bar.vue';
 
 import Flash from '../../flash';
 
@@ -14,7 +13,6 @@ export default {
     detailedMetric,
     requestSelector,
     simpleMetric,
-    upstreamPerformanceBar,
   },
   props: {
     store: {
@@ -128,9 +126,6 @@ export default {
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>
-      <upstream-performance-bar
-        v-if="initialRequest && currentRequest.details"
-      />
       <detailed-metric
         v-for="metric in $options.detailedMetrics"
         :key="metric.metric"

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

@@ -1,20 +0,0 @@
-<script>
-export default {
-  mounted() {
-    const upstreamPerformanceBar = document
-      .getElementById('peek-view-performance-bar')
-      .cloneNode(true);
-
-    upstreamPerformanceBar.classList.remove('hidden');
-
-    this.$refs.wrapper.appendChild(upstreamPerformanceBar);
-  },
-};
-</script>
-<template>
-  <div
-    id="peek-view-performance-bar-vue"
-    class="view"
-    ref="wrapper"
-  ></div>
-</template>

app/assets/javascripts/performance_bar/index.js

@@ -1,5 +1,3 @@
-import 'vendor/peek.performance_bar';
-
 import Vue from 'vue';
 import performanceBarApp from './components/performance_bar_app.vue';
 import PerformanceBarStore from './stores/performance_bar_store';

app/assets/stylesheets/performance_bar.scss

@@ -1,5 +1,4 @@
 @import 'framework/variables';
-@import 'peek/views/performance_bar';
 @import 'peek/views/rblineprof';
 
 #js-peek {

app/views/peek/_bar.html.haml

@@ -5,8 +5,3 @@
          peek_url: peek_routes.results_url,
          profile_url: url_for(params.merge(lineprofiler: 'true')) },
          class: Peek.env }
-
-#peek-view-performance-bar.hidden
-  = render_server_response_time
-  %span#serverstats
-  %ul.performance-bar

config/initializers/peek.rb

@@ -1,7 +1,6 @@
 Rails.application.config.peek.adapter = :redis, { client: ::Redis.new(Gitlab::Redis::Cache.params) }
 
 Peek.into Peek::Views::Host
-Peek.into Peek::Views::PerformanceBar
 
 if Gitlab::Database.mysql?
   require 'peek-mysql2'

vendor/assets/javascripts/peek.performance_bar.js

@@ -1,182 +0,0 @@
-var PerformanceBar, ajaxStart, renderPerformanceBar, updateStatus;
-
-PerformanceBar = (function() {
-  PerformanceBar.prototype.appInfo = null;
-
-  PerformanceBar.prototype.width = null;
-
-  PerformanceBar.formatTime = function(value) {
-    if (value >= 1000) {
-      return ((value / 1000).toFixed(3)) + "s";
-    } else {
-      return (value.toFixed(0)) + "ms";
-    }
-  };
-
-  function PerformanceBar(options) {
-    var k, v;
-    if (options == null) {
-      options = {};
-    }
-    this.el = $('#peek-view-performance-bar .performance-bar');
-    for (k in options) {
-      v = options[k];
-      this[k] = v;
-    }
-    if (this.width == null) {
-      this.width = this.el.width();
-    }
-    if (this.timing == null) {
-      this.timing = window.performance.timing;
-    }
-  }
-
-  PerformanceBar.prototype.render = function(serverTime) {
-    var networkTime, perfNetworkTime;
-    if (serverTime == null) {
-      serverTime = 0;
-    }
-    this.el.empty();
-    this.addBar('frontend', '#90d35b', 'domLoading', 'domInteractive');
-    perfNetworkTime = this.timing.responseEnd - this.timing.requestStart;
-    if (serverTime && serverTime <= perfNetworkTime) {
-      networkTime = perfNetworkTime - serverTime;
-      this.addBar('latency / receiving', '#f1faff', this.timing.requestStart + serverTime, this.timing.requestStart + serverTime + networkTime);
-      this.addBar('app', '#90afcf', this.timing.requestStart, this.timing.requestStart + serverTime, this.appInfo);
-    } else {
-      this.addBar('backend', '#c1d7ee', 'requestStart', 'responseEnd');
-    }
-    this.addBar('tcp / ssl', '#45688e', 'connectStart', 'connectEnd');
-    this.addBar('redirect', '#0c365e', 'redirectStart', 'redirectEnd');
-    this.addBar('dns', '#082541', 'domainLookupStart', 'domainLookupEnd');
-    return this.el;
-  };
-
-  PerformanceBar.prototype.isLoaded = function() {
-    return this.timing.domInteractive;
-  };
-
-  PerformanceBar.prototype.start = function() {
-    return this.timing.navigationStart;
-  };
-
-  PerformanceBar.prototype.end = function() {
-    return this.timing.domInteractive;
-  };
-
-  PerformanceBar.prototype.total = function() {
-    return this.end() - this.start();
-  };
-
-  PerformanceBar.prototype.addBar = function(name, color, start, end, info) {
-    var bar, left, offset, time, title, width;
-    if (typeof start === 'string') {
-      start = this.timing[start];
-    }
-    if (typeof end === 'string') {
-      end = this.timing[end];
-    }
-    if (!((start != null) && (end != null))) {
-      return;
-    }
-    time = end - start;
-    offset = start - this.start();
-    left = this.mapH(offset);
-    width = this.mapH(time);
-    title = name + ": " + (PerformanceBar.formatTime(time));
-    bar = $('<li></li>', {
-      'data-title': title,
-      'data-toggle': 'tooltip',
-      'data-container': 'body'
-    });
-    bar.css({
-      width: width + "px",
-      left: left + "px",
-      background: color
-    });
-    return this.el.append(bar);
-  };
-
-  PerformanceBar.prototype.mapH = function(offset) {
-    return offset * (this.width / this.total());
-  };
-
-  return PerformanceBar;
-
-})();
-
-renderPerformanceBar = function() {
-  var bar, resp, span, time;
-  resp = $('#peek-server_response_time');
-  time = Math.round(resp.data('time') * 1000);
-  bar = new PerformanceBar;
-  bar.render(time);
-  span = $('<span>', {
-    'data-toggle': 'tooltip',
-    'data-title': 'Total navigation time for this page.',
-    'data-container': 'body'
-  }).text(PerformanceBar.formatTime(bar.total()));
-  return updateStatus(span);
-};
-
-updateStatus = function(html) {
-  return $('#serverstats').html(html);
-};
-
-ajaxStart = null;
-
-$(document).on('pjax:start page:fetch turbolinks:request-start', function(event) {
-  return ajaxStart = event.timeStamp;
-});
-
-$(document).on('pjax:end page:load turbolinks:load', function(event, xhr) {
-  var ajaxEnd, serverTime, total;
-  if (ajaxStart == null) {
-    return;
-  }
-  ajaxEnd = event.timeStamp;
-  total = ajaxEnd - ajaxStart;
-  serverTime = xhr ? parseInt(xhr.getResponseHeader('X-Runtime')) : 0;
-  return setTimeout(function() {
-    var bar, now, span, tech;
-    now = new Date().getTime();
-    bar = new PerformanceBar({
-      timing: {
-        requestStart: ajaxStart,
-        responseEnd: ajaxEnd,
-        domLoading: ajaxEnd,
-        domInteractive: now
-      },
-      isLoaded: function() {
-        return true;
-      },
-      start: function() {
-        return ajaxStart;
-      },
-      end: function() {
-        return now;
-      }
-    });
-    bar.render(serverTime);
-    if ($.fn.pjax != null) {
-      tech = 'PJAX';
-    } else {
-      tech = 'Turbolinks';
-    }
-    span = $('<span>', {
-      'data-toggle': 'tooltip',
-      'data-title': tech + " navigation time",
-      'data-container': 'body'
-    }).text(PerformanceBar.formatTime(total));
-    updateStatus(span);
-    return ajaxStart = null;
-  }, 0);
-});
-
-$(function() {
-  if (window.performance) {
-    return renderPerformanceBar();
-  } else {
-    return $('#peek-view-performance-bar').remove();
-  }
-});