diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-24 21:09:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-24 21:09:31 +0300 |
commit | 1d041b2968384605660d49c96a3fcd7a6c51875d (patch) | |
tree | 90ebe0d46183ea57be38273f36b93b2a2adcccf1 /app/assets/javascripts/performance_bar | |
parent | 036de5f31f136a7482f9e2b1d1e98a9c4b45ea80 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/performance_bar')
3 files changed, 100 insertions, 20 deletions
diff --git a/app/assets/javascripts/performance_bar/components/detailed_metric.vue b/app/assets/javascripts/performance_bar/components/detailed_metric.vue index 9bf77239a6b..57569340aa5 100644 --- a/app/assets/javascripts/performance_bar/components/detailed_metric.vue +++ b/app/assets/javascripts/performance_bar/components/detailed_metric.vue @@ -1,5 +1,8 @@ <script> -import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlButton, GlModal, GlModalDirective, GlSegmentedControl } from '@gitlab/ui'; + +import { s__ } from '~/locale'; +import { sortOrders, sortOrderOptions } from '../constants'; import RequestWarning from './request_warning.vue'; export default { @@ -7,6 +10,7 @@ export default { RequestWarning, GlButton, GlModal, + GlSegmentedControl, }, directives: { 'gl-modal': GlModalDirective, @@ -39,6 +43,7 @@ export default { data() { return { openedBacktraces: [], + sortOrder: sortOrders.DURATION, }; }, computed: { @@ -48,13 +53,37 @@ export default { metricDetails() { return this.currentRequest.details[this.metric]; }, + metricDetailsSummary() { + return { + [s__('Total')]: this.metricDetails.calls, + [s__('PerformanceBar|Total duration')]: this.metricDetails.duration, + ...(this.metricDetails.summary || {}), + }; + }, metricDetailsLabel() { - return this.metricDetails.duration - ? `${this.metricDetails.duration} / ${this.metricDetails.calls}` - : this.metricDetails.calls; + if (this.metricDetails.duration && this.metricDetails.calls) { + return `${this.metricDetails.duration} / ${this.metricDetails.calls}`; + } else if (this.metricDetails.calls) { + return this.metricDetails.calls; + } + + return '0'; + }, + displaySortOrder() { + return ( + this.metricDetails.details.length !== 0 && + this.metricDetails.details.every((item) => item.start) + ); }, detailsList() { - return this.metricDetails.details; + return this.metricDetails.details.map((item, index) => ({ ...item, id: index })); + }, + sortedList() { + if (this.sortOrder === sortOrders.CHRONOLOGICAL) { + return this.detailsList.slice().sort(this.sortDetailChronologically); + } + + return this.detailsList.slice().sort(this.sortDetailByDuration); }, warnings() { return this.metricDetails.warnings || []; @@ -82,7 +111,17 @@ export default { itemHasOpenedBacktrace(toggledIndex) { return this.openedBacktraces.find((openedIndex) => openedIndex === toggledIndex) >= 0; }, + changeSortOrder(order) { + this.sortOrder = order; + }, + sortDetailByDuration(a, b) { + return a.duration < b.duration ? 1 : -1; + }, + sortDetailChronologically(a, b) { + return a.start < b.start ? -1 : 1; + }, }, + sortOrderOptions, }; </script> <template> @@ -93,18 +132,41 @@ export default { data-qa-selector="detailed_metric_content" > <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link"> - <span class="gl-text-blue-300 gl-font-weight-bold">{{ metricDetailsLabel }}</span> + <span + class="gl-text-blue-300 gl-font-weight-bold" + data-testid="performance-bar-details-label" + > + {{ metricDetailsLabel }} + </span> </gl-button> <gl-modal :modal-id="modalId" :title="header" size="lg" footer-class="d-none" scrollable> + <div class="gl-display-flex gl-align-items-center gl-justify-content-space-between"> + <div class="gl-display-flex gl-align-items-center" data-testid="performance-bar-summary"> + <div v-for="(value, name) in metricDetailsSummary" :key="name" class="gl-pr-8"> + <div v-if="value" data-testid="performance-bar-summary-item"> + <div>{{ name }}</div> + <div class="gl-font-size-h1 gl-font-weight-bold">{{ value }}</div> + </div> + </div> + </div> + <gl-segmented-control + v-if="displaySortOrder" + data-testid="performance-bar-sort-order" + :options="$options.sortOrderOptions" + :checked="sortOrder" + @input="changeSortOrder" + /> + </div> + <hr /> <table class="table gl-table"> - <template v-if="detailsList.length"> - <tr v-for="(item, index) in detailsList" :key="index"> - <td> + <template v-if="sortedList.length"> + <tr v-for="item in sortedList" :key="item.id"> + <td data-testid="performance-item-duration"> <span v-if="item.duration">{{ sprintf(__('%{duration}ms'), { duration: item.duration }) }}</span> </td> - <td> + <td data-testid="performance-item-content"> <div> <div v-for="(key, keyIndex) in keys" @@ -121,12 +183,12 @@ export default { variant="default" icon="ellipsis_h" size="small" - :selected="itemHasOpenedBacktrace(index)" + :selected="itemHasOpenedBacktrace(item.id)" :aria-label="__('Toggle backtrace')" - @click="toggleBacktrace(index)" + @click="toggleBacktrace(item.id)" /> </div> - <pre v-if="itemHasOpenedBacktrace(index)" class="backtrace-row mt-2">{{ + <pre v-if="itemHasOpenedBacktrace(item.id)" class="backtrace-row gl-mt-3">{{ item.backtrace }}</pre> </div> @@ -135,7 +197,7 @@ export default { </template> <template v-else> <tr> - <td> + <td data-testid="performance-bar-empty-detail-notice"> {{ sprintf(__('No %{header} for this request.'), { header: header.toLowerCase() }) }} </td> </tr> 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 6b446eb6073..4f79d99a49b 100644 --- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue +++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue @@ -40,7 +40,7 @@ export default { metric: 'active-record', title: 'pg', header: s__('PerformanceBar|SQL queries'), - keys: ['sql', 'cached', 'db_role'], + keys: ['sql', 'cached', 'transaction', 'db_role'], }, { metric: 'bullet', @@ -69,6 +69,7 @@ export default { }, { metric: 'external-http', + title: 'external', header: s__('PerformanceBar|External Http calls'), keys: ['label', 'code', 'proxy', 'error'], }, @@ -157,15 +158,17 @@ export default { class="view" > <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{ - s__('PerformanceBar|trace') + s__('PerformanceBar|Trace') }}</a> </div> - <add-request v-on="$listeners" /> <div v-if="currentRequest.details" id="peek-download" class="view"> <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{ s__('PerformanceBar|Download') }}</a> </div> + <a v-if="statsUrl" class="gl-text-blue-300 view" :href="statsUrl">{{ + s__('PerformanceBar|Stats') + }}</a> <request-selector v-if="currentRequest" :current-request="currentRequest" @@ -173,9 +176,7 @@ export default { class="ml-auto" @change-current-request="changeCurrentRequest" /> - <div v-if="statsUrl" id="peek-stats" class="view"> - <a class="gl-text-blue-300" :href="statsUrl">{{ s__('PerformanceBar|Stats') }}</a> - </div> + <add-request v-on="$listeners" /> </div> </div> </template> diff --git a/app/assets/javascripts/performance_bar/constants.js b/app/assets/javascripts/performance_bar/constants.js new file mode 100644 index 00000000000..9659383edd9 --- /dev/null +++ b/app/assets/javascripts/performance_bar/constants.js @@ -0,0 +1,17 @@ +import { s__ } from '~/locale'; + +export const sortOrders = { + DURATION: 'duration', + CHRONOLOGICAL: 'chronological', +}; + +export const sortOrderOptions = [ + { + value: sortOrders.DURATION, + text: s__('PerformanceBar|Sort by duration'), + }, + { + value: sortOrders.CHRONOLOGICAL, + text: s__('PerformanceBar|Sort chronologically'), + }, +]; |