diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar/components')
3 files changed, 23 insertions, 17 deletions
diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue index d48a5acb85c..9ac6b0e6403 100644 --- a/app/assets/javascripts/performance_bar/components/add_request.vue +++ b/app/assets/javascripts/performance_bar/components/add_request.vue @@ -1,7 +1,12 @@ -import { __ } from '~/locale'; - <script> +import { GlForm, GlFormInput, GlButton } from '@gitlab/ui'; + export default { + components: { + GlForm, + GlButton, + GlFormInput, + }, data() { return { inputEnabled: false, @@ -24,25 +29,26 @@ export default { }; </script> <template> - <div id="peek-view-add-request" class="view"> - <form class="form-inline" @submit.prevent> - <button - class="btn-blank btn-link bold gl-text-blue-300" - type="button" - :title="__(`Add request manually`)" + <div id="peek-view-add-request" class="view gl-display-flex"> + <gl-form class="gl-display-flex gl-align-items-center" @submit.prevent> + <gl-button + class="gl-text-blue-300! gl-mr-2" + category="tertiary" + variant="link" + icon="plus" + size="small" + :title="__('Add request manually')" @click="toggleInput" - > - + - </button> - <input + /> + <gl-form-input v-if="inputEnabled" v-model="urlOrRequestId" type="text" :placeholder="__(`URL or request ID`)" - class="form-control form-control-sm d-inline-block ml-1" + class="gl-ml-2" @keyup.enter="addRequest" @keyup.esc="clearForm" /> - </form> + </gl-form> </div> </template> 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 0f744e858f2..1da4a8fea73 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -121,7 +121,7 @@ export default { return window.URL.createObjectURL(blob); }, downloadName() { - const fileName = this.requests[0].truncatedUrl; + const fileName = this.requests[0].displayName; return `${fileName}_perf_bar_${Date.now()}.json`; }, memoryReportPath() { @@ -150,7 +150,7 @@ export default { <div id="js-peek" :class="env"> <div v-if="currentRequest" - class="d-flex container-fluid container-limited justify-content-center" + class="d-flex container-fluid container-limited justify-content-center gl-align-items-center" data-qa-selector="performance_bar" > <div id="peek-view-host" class="view"> diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue index ffc22c2113d..f2177e102ec 100644 --- a/app/assets/javascripts/performance_bar/components/request_selector.vue +++ b/app/assets/javascripts/performance_bar/components/request_selector.vue @@ -31,7 +31,7 @@ export default { :value="request.id" data-qa-selector="request_dropdown_option" > - {{ request.truncatedUrl }} + {{ request.displayName }} </option> </select> </div> |