diff options
5 files changed, 34 insertions, 16 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..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 |