From ab53f7aa136762e90c2addca7d930b134a42567c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 21 Mar 2018 16:28:07 +0000
Subject: Fix performance bar spacing

---
 .../performance_bar/components/detailed_metric.vue | 40 +++++++++++++++-------
 .../components/performance_bar_app.vue             |  2 +-
 .../components/upstream_performance_bar.vue        |  2 ++
 app/assets/javascripts/performance_bar/index.js    |  4 +--
 app/views/peek/_bar.html.haml                      |  2 +-
 5 files changed, 34 insertions(+), 16 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 145465f4ee9..719282e69c1 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -27,6 +27,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    detailsList() {
+      return this.currentRequest.details[this.metric][this.details];
+    },
+  },
 };
 </script>
 <template>
@@ -55,19 +60,30 @@ export default {
       :header-title-text="header"
       class="performance-bar-modal"
     >
-      <table class="table">
-        <tr
-          v-for="(item, index) in currentRequest.details[metric][details]"
-          :key="index"
-        >
-          <td><strong>{{ item.duration }}ms</strong></td>
-          <td
-            v-for="key in keys"
-            :key="key"
+      <table
+        class="table"
+      >
+        <template v-if="detailsList.length">
+          <tr
+            v-for="(item, index) in detailsList"
+            :key="index"
           >
-            {{ item[key] }}
-          </td>
-        </tr>
+            <td><strong>{{ item.duration }}ms</strong></td>
+            <td
+              v-for="key in keys"
+              :key="key"
+            >
+              {{ item[key] }}
+            </td>
+          </tr>
+        </template>
+        <template v-else>
+          <tr>
+            <td>
+              No {{ header.toLowerCase() }} for this request.
+            </td>
+          </tr>
+        </template>
       </table>
 
       <div slot="footer">
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 88345cf2ad9..837711cb874 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -124,7 +124,7 @@ export default {
       class="view prepend-left-5"
     >
       <span
-        v-if="currentRequest && currentRequest.details"
+        v-if="currentRequest && currentRequest.details && currentRequest.details.host"
         class="current-host"
       >
         {{ currentRequest.details.host.hostname }}
diff --git a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue b/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
index d438b1ec27b..2b5915f381f 100644
--- a/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
+++ b/app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue
@@ -5,6 +5,8 @@ export default {
       .getElementById('peek-view-performance-bar')
       .cloneNode(true);
 
+    upstreamPerformanceBar.classList.remove('hidden');
+
     this.$refs.wrapper.appendChild(upstreamPerformanceBar);
   },
 };
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index fca488120f6..a0ddf36a672 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -4,9 +4,9 @@ import Vue from 'vue';
 import performanceBarApp from './components/performance_bar_app.vue';
 import PerformanceBarStore from './stores/performance_bar_store';
 
-export default () =>
+export default ({ container }) =>
   new Vue({
-    el: '#js-peek',
+    el: container,
     components: {
       performanceBarApp,
     },
diff --git a/app/views/peek/_bar.html.haml b/app/views/peek/_bar.html.haml
index 14dafa197b5..b4d86e1601c 100644
--- a/app/views/peek/_bar.html.haml
+++ b/app/views/peek/_bar.html.haml
@@ -6,7 +6,7 @@
          profile_url: url_for(params.merge(lineprofiler: 'true')) },
          class: Peek.env }
 
-#peek-view-performance-bar
+#peek-view-performance-bar.hidden
   = render_server_response_time
   %span#serverstats
   %ul.performance-bar
-- 
cgit v1.2.3


From 7d651ad1de8a6b150164a5f94938e2f79f875f93 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 21 Mar 2018 16:49:57 +0000
Subject: removed check for host changed wrapper to container with correct
 widths

---
 .../performance_bar/components/detailed_metric.vue | 18 +++++------
 .../components/performance_bar_app.vue             | 36 +++++++++++-----------
 .../components/request_selector.vue                |  2 +-
 app/assets/stylesheets/performance_bar.scss        |  6 ----
 4 files changed, 27 insertions(+), 35 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
index 719282e69c1..d4881f07972 100644
--- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue
+++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue
@@ -28,8 +28,11 @@ export default {
     },
   },
   computed: {
+    metricDetails() {
+      return this.currentRequest.details[this.metric];
+    },
     detailsList() {
-      return this.currentRequest.details[this.metric][this.details];
+      return this.metricDetails[this.details];
     },
   },
 };
@@ -38,6 +41,7 @@ export default {
   <div
     :id="`peek-view-${metric}`"
     class="view"
+    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
@@ -45,17 +49,11 @@ export default {
       type="button"
       data-toggle="modal"
     >
-      <span
-        v-if="currentRequest.details"
-        class="bold"
-      >
-        {{ currentRequest.details[metric].duration }}
-        /
-        {{ currentRequest.details[metric].calls }}
-      </span>
+      {{ metricDetails.duration }}
+      /
+      {{ metricDetails.calls }}
     </button>
     <gl-modal
-      v-if="currentRequest.details"
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
       class="performance-bar-modal"
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 837711cb874..2fd1715ee79 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -113,27 +113,21 @@ export default {
     id="js-peek"
     :class="env"
   >
-    <request-selector
-      v-if="currentRequest"
-      :current-request="currentRequest"
-      :requests="requests"
-      @change-current-request="changeCurrentRequest"
-    />
-    <div
-      id="peek-view-host"
-      class="view prepend-left-5"
-    >
-      <span
-        v-if="currentRequest && currentRequest.details && currentRequest.details.host"
-        class="current-host"
-      >
-        {{ currentRequest.details.host.hostname }}
-      </span>
-    </div>
     <div
       v-if="currentRequest"
-      class="wrapper"
+      class="container-fluid container-limited"
     >
+      <div
+        id="peek-view-host"
+        class="view"
+      >
+        <span
+          v-if="currentRequest.details"
+          class="current-host"
+        >
+          {{ currentRequest.details.host.hostname }}
+        </span>
+      </div>
       <upstream-performance-bar
         v-if="initialRequest && currentRequest.details"
       />
@@ -186,6 +180,12 @@ export default {
           gc
         </span>
       </div>
+      <request-selector
+        v-if="currentRequest"
+        :current-request="currentRequest"
+        :requests="requests"
+        @change-current-request="changeCurrentRequest"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index 2f360ea6f6c..3ed07a4a47d 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     id="peek-request-selector"
-    class="append-right-5 pull-right"
+    class="pull-right"
   >
     <select v-model="currentRequestId">
       <option
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index d06148a7bf8..5d1a9489aad 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -43,12 +43,6 @@
     }
   }
 
-  .wrapper {
-    width: 80%;
-    height: $performance-bar-height;
-    margin: 0 auto;
-  }
-
   // UI Elements
   .bucket {
     background: $perf-bar-bucket-bg;
-- 
cgit v1.2.3