diff options
4 files changed, 27 insertions, 35 deletions
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; |