diff options
Diffstat (limited to 'app/assets/javascripts/performance_bar')
6 files changed, 29 insertions, 20 deletions
diff --git a/app/assets/javascripts/performance_bar/components/add_request.vue b/app/assets/javascripts/performance_bar/components/add_request.vue index 54bca8a1b67..d48a5acb85c 100644 --- a/app/assets/javascripts/performance_bar/components/add_request.vue +++ b/app/assets/javascripts/performance_bar/components/add_request.vue @@ -27,7 +27,7 @@ export default { <div id="peek-view-add-request" class="view"> <form class="form-inline" @submit.prevent> <button - class="btn-blank btn-link bold" + class="btn-blank btn-link bold gl-text-blue-300" type="button" :title="__(`Add request manually`)" @click="toggleInput" diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 930c5e50511..de4bbb36141 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlIcon, GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import RequestWarning from './request_warning.vue'; export default { @@ -7,7 +7,6 @@ export default { RequestWarning, GlButton, GlModal, - GlIcon, }, directives: { 'gl-modal': GlModalDirective, @@ -94,10 +93,10 @@ export default { data-qa-selector="detailed_metric_content" > <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link"> - {{ metricDetailsLabel }} + <span class="gl-text-blue-300 gl-font-weight-bold">{{ metricDetailsLabel }}</span> </gl-button> - <gl-modal :modal-id="modalId" :title="header" size="lg" modal-class="gl-mt-7" scrollable> - <table class="table"> + <gl-modal :modal-id="modalId" :title="header" size="lg" footer-class="d-none" scrollable> + <table class="table gl-table"> <template v-if="detailsList.length"> <tr v-for="(item, index) in detailsList" :key="index"> <td> @@ -116,14 +115,16 @@ export default { {{ item[key] }} <gl-button v-if="keyIndex == 0 && item.backtrace" - class="gl-ml-3" + class="gl-ml-3 button-ellipsis-horizontal" data-testid="backtrace-expand-btn" - type="button" + category="primary" + variant="default" + icon="ellipsis_h" + size="small" + :selected="itemHasOpenedBacktrace(index)" :aria-label="__('Toggle backtrace')" @click="toggleBacktrace(index)" - > - <gl-icon :size="12" name="ellipsis_h" /> - </gl-button> + /> </div> <pre v-if="itemHasOpenedBacktrace(index)" class="backtrace-row mt-2">{{ item.backtrace 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 e38771785b7..85789cd1fdf 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -2,10 +2,10 @@ /* eslint-disable vue/no-v-html */ import { glEmojiTag } from '~/emoji'; +import { s__ } from '~/locale'; import AddRequest from './add_request.vue'; import DetailedMetric from './detailed_metric.vue'; import RequestSelector from './request_selector.vue'; -import { s__ } from '~/locale'; export default { components: { @@ -64,6 +64,11 @@ export default { keys: ['request', 'body'], }, { + metric: 'external-http', + header: s__('PerformanceBar|External Http calls'), + keys: ['label', 'code', 'proxy', 'error'], + }, + { metric: 'total', header: s__('PerformanceBar|Frontend resources'), keys: ['name', 'size'], @@ -120,7 +125,7 @@ export default { <div id="js-peek" :class="env"> <div v-if="currentRequest" - class="d-flex container-fluid container-limited" + class="d-flex container-fluid container-limited justify-content-center" data-qa-selector="performance_bar" > <div id="peek-view-host" class="view"> @@ -147,11 +152,15 @@ export default { id="peek-view-trace" class="view" > - <a :href="currentRequest.details.tracing.tracing_url">{{ s__('PerformanceBar|trace') }}</a> + <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{ + s__('PerformanceBar|trace') + }}</a> </div> <add-request v-on="$listeners" /> <div v-if="currentRequest.details" id="peek-download" class="view"> - <a :download="downloadName" :href="downloadPath">{{ s__('PerformanceBar|Download') }}</a> + <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{ + s__('PerformanceBar|Download') + }}</a> </div> <request-selector v-if="currentRequest" diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js index 0d5c294ea56..522e34753e9 100644 --- a/app/assets/javascripts/performance_bar/index.js +++ b/app/assets/javascripts/performance_bar/index.js @@ -1,13 +1,12 @@ /* eslint-disable @gitlab/require-i18n-strings */ import Vue from 'vue'; -import Translate from '~/vue_shared/translate'; import axios from '~/lib/utils/axios_utils'; +import Translate from '~/vue_shared/translate'; +import initPerformanceBarLog from './performance_bar_log'; import PerformanceBarService from './services/performance_bar_service'; import PerformanceBarStore from './stores/performance_bar_store'; -import initPerformanceBarLog from './performance_bar_log'; - Vue.use(Translate); const initPerformanceBar = (el) => { diff --git a/app/assets/javascripts/performance_bar/performance_bar_log.js b/app/assets/javascripts/performance_bar/performance_bar_log.js index c61b0cb32e8..aad99e2604e 100644 --- a/app/assets/javascripts/performance_bar/performance_bar_log.js +++ b/app/assets/javascripts/performance_bar/performance_bar_log.js @@ -43,7 +43,7 @@ const logUserTimingMetrics = () => { const initPerformanceBarLog = () => { console.log( `%c ${String.fromCodePoint(0x1f98a)} GitLab performance bar`, - 'width:100%;background-color: #292961; color: #FFFFFF; font-size:24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; padding: 10px;display:block;padding-right: 100px;', + 'width:100%; background-color: #292961; color: #FFFFFF; padding: 10px; display:block;', ); initVitalsLog(); diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js index 38255b3a37d..a614342c858 100644 --- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js +++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js @@ -1,5 +1,5 @@ -import axios from '../../lib/utils/axios_utils'; import { parseBoolean } from '~/lib/utils/common_utils'; +import axios from '../../lib/utils/axios_utils'; export default class PerformanceBarService { static interceptor = null; |