Commit 9b4b79ff authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'performance-bar-position-fix' into 'master'

Fix performance bar spacing

See merge request gitlab-org/gitlab-ce!17912
parents e86b2b23 4d1bae70
......@@ -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">
......
......@@ -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>
......@@ -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
......
......@@ -5,6 +5,8 @@ export default {
.getElementById('peek-view-performance-bar')
.cloneNode(true);
upstreamPerformanceBar.classList.remove('hidden');
this.$refs.wrapper.appendChild(upstreamPerformanceBar);
},
};
......
......@@ -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,
},
......
......@@ -43,12 +43,6 @@
}
}
.wrapper {
width: 80%;
height: $performance-bar-height;
margin: 0 auto;
}
// UI Elements
.bucket {
background: $perf-bar-bucket-bg;
......
......@@ -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
......@@ -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);
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment