diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-03-22 09:26:34 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-03-22 09:26:34 +0000 |
commit | 9b4b79fffe3b93c2479c31873073d6a7f93baf5a (patch) | |
tree | d7b4d174dca89267facc5d5817d0d16380e3802a | |
parent | e86b2b23d005207a57999e3139a6610a483d2f46 (diff) | |
parent | 4d1bae708dbb072508acde250870e7a9cc6e0862 (diff) | |
download | gitlab-ce-9b4b79fffe3b93c2479c31873073d6a7f93baf5a.tar.gz |
Merge branch 'performance-bar-position-fix' into 'master'
Fix performance bar spacing
See merge request gitlab-org/gitlab-ce!17912
8 files changed, 61 insertions, 59 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 145465f4ee9..d4881f07972 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -27,12 +27,21 @@ export default { required: true, }, }, + computed: { + metricDetails() { + return this.currentRequest.details[this.metric]; + }, + detailsList() { + return this.metricDetails[this.details]; + }, + }, }; </script> <template> <div :id="`peek-view-${metric}`" class="view" + v-if="currentRequest.details" > <button :data-target="`#modal-peek-${metric}-details`" @@ -40,34 +49,39 @@ 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" > - <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..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" - 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/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/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; 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 diff --git a/spec/javascripts/performance_bar/components/detailed_metric_spec.js b/spec/javascripts/performance_bar/components/detailed_metric_spec.js index eee0210a2a9..c4611dc7662 100644 --- a/spec/javascripts/performance_bar/components/detailed_metric_spec.js +++ b/spec/javascripts/performance_bar/components/detailed_metric_spec.js @@ -20,16 +20,8 @@ describe('detailedMetric', () => { }); }); - it('does not display details', () => { - expect(vm.$el.innerText).not.toContain('/'); - }); - - it('does not display the modal', () => { - expect(vm.$el.querySelector('.performance-bar-modal')).toBeNull(); - }); - - it('displays the metric name', () => { - expect(vm.$el.innerText).toContain('gitaly'); + it('does not render the element', () => { + expect(vm.$el.innerHTML).toEqual(undefined); }); }); |