removed check for host

changed wrapper to container with correct widths

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
+      {{ metricDetails.duration }}
-        v-if="currentRequest.details"
+      /
-        class="bold"
+      {{ metricDetails.calls }}
-      >
-        {{ currentRequest.details[metric].duration }}
-        /
-        {{ currentRequest.details[metric].calls }}
-      </span>
     </button>
     <gl-modal
-      v-if="currentRequest.details"
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
       class="performance-bar-modal"

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"
+      v-if="currentRequest"
-      class="view prepend-left-5"
+      class="container-fluid container-limited"
     >
-      <span
+      <div
-        v-if="currentRequest && currentRequest.details && currentRequest.details.host"
+        id="peek-view-host"
-        class="current-host"
+        class="view"
       >
-        {{ currentRequest.details.host.hostname }}
+        <span
-      </span>
+          v-if="currentRequest.details"
-    </div>
+          class="current-host"
-    <div
+        >
-      v-if="currentRequest"
+          {{ currentRequest.details.host.hostname }}
-      class="wrapper"
+        </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>

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

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;