134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
<script>
|
|
import { GlIcon } from '@gitlab/ui';
|
|
import RequestWarning from './request_warning.vue';
|
|
|
|
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
|
|
|
|
export default {
|
|
components: {
|
|
RequestWarning,
|
|
GlModal: DeprecatedModal2,
|
|
GlIcon,
|
|
},
|
|
props: {
|
|
currentRequest: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
metric: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: false,
|
|
default() {
|
|
return this.metric;
|
|
},
|
|
},
|
|
header: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
keys: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
metricDetails() {
|
|
return this.currentRequest.details[this.metric];
|
|
},
|
|
metricDetailsLabel() {
|
|
return this.metricDetails.duration
|
|
? `${this.metricDetails.duration} / ${this.metricDetails.calls}`
|
|
: this.metricDetails.calls;
|
|
},
|
|
detailsList() {
|
|
return this.metricDetails.details;
|
|
},
|
|
warnings() {
|
|
return this.metricDetails.warnings || [];
|
|
},
|
|
htmlId() {
|
|
if (this.currentRequest) {
|
|
return `performance-bar-warning-${this.currentRequest.id}-${this.metric}`;
|
|
}
|
|
|
|
return '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div
|
|
v-if="currentRequest.details && metricDetails"
|
|
:id="`peek-view-${metric}`"
|
|
class="view"
|
|
data-qa-selector="detailed_metric_content"
|
|
>
|
|
<button
|
|
:data-target="`#modal-peek-${metric}-details`"
|
|
class="btn-blank btn-link bold"
|
|
type="button"
|
|
data-toggle="modal"
|
|
>
|
|
{{ metricDetailsLabel }}
|
|
</button>
|
|
<gl-modal
|
|
:id="`modal-peek-${metric}-details`"
|
|
:header-title-text="header"
|
|
modal-size="xl"
|
|
class="performance-bar-modal"
|
|
>
|
|
<table class="table">
|
|
<template v-if="detailsList.length">
|
|
<tr v-for="(item, index) in detailsList" :key="index">
|
|
<td>
|
|
<span v-if="item.duration">{{
|
|
sprintf(__('%{duration}ms'), { duration: item.duration })
|
|
}}</span>
|
|
</td>
|
|
<td>
|
|
<div class="js-toggle-container">
|
|
<div
|
|
v-for="(key, keyIndex) in keys"
|
|
:key="key"
|
|
class="break-word"
|
|
:class="{ 'mb-3 bold': keyIndex == 0 }"
|
|
>
|
|
{{ item[key] }}
|
|
<button
|
|
v-if="keyIndex == 0 && item.backtrace"
|
|
class="text-expander js-toggle-button"
|
|
type="button"
|
|
:aria-label="__('Toggle backtrace')"
|
|
>
|
|
<gl-icon :size="12" name="ellipsis_h" />
|
|
</button>
|
|
</div>
|
|
<pre v-if="item.backtrace" class="backtrace-row js-toggle-content mt-2">{{
|
|
item.backtrace
|
|
}}</pre>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr>
|
|
<td>
|
|
{{ sprintf(__('No %{header} for this request.'), { header: header.toLowerCase() }) }}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
|
|
<template #footer>
|
|
<div></div>
|
|
</template>
|
|
</gl-modal>
|
|
{{ title }}
|
|
<request-warning :html-id="htmlId" :warnings="warnings" />
|
|
</div>
|
|
</template>
|