153 lines
4.1 KiB
Vue
153 lines
4.1 KiB
Vue
<script>
|
|
import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
|
|
import RequestWarning from './request_warning.vue';
|
|
|
|
export default {
|
|
components: {
|
|
RequestWarning,
|
|
GlButton,
|
|
GlModal,
|
|
},
|
|
directives: {
|
|
'gl-modal': GlModalDirective,
|
|
},
|
|
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,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
openedBacktraces: [],
|
|
};
|
|
},
|
|
computed: {
|
|
modalId() {
|
|
return `modal-peek-${this.metric}-details`;
|
|
},
|
|
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 '';
|
|
},
|
|
},
|
|
methods: {
|
|
toggleBacktrace(toggledIndex) {
|
|
const toggledOpenedIndex = this.openedBacktraces.indexOf(toggledIndex);
|
|
|
|
if (toggledOpenedIndex === -1) {
|
|
this.openedBacktraces = [...this.openedBacktraces, toggledIndex];
|
|
} else {
|
|
this.openedBacktraces = this.openedBacktraces.filter(
|
|
(openedIndex) => openedIndex !== toggledIndex,
|
|
);
|
|
}
|
|
},
|
|
itemHasOpenedBacktrace(toggledIndex) {
|
|
return this.openedBacktraces.find((openedIndex) => openedIndex === toggledIndex) >= 0;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div
|
|
v-if="currentRequest.details && metricDetails"
|
|
:id="`peek-view-${metric}`"
|
|
class="gl-display-flex gl-align-items-center view"
|
|
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>
|
|
</gl-button>
|
|
<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>
|
|
<span v-if="item.duration">{{
|
|
sprintf(__('%{duration}ms'), { duration: item.duration })
|
|
}}</span>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<div
|
|
v-for="(key, keyIndex) in keys"
|
|
:key="key"
|
|
class="break-word"
|
|
:class="{ 'mb-3 bold': keyIndex == 0 }"
|
|
>
|
|
{{ item[key] }}
|
|
<gl-button
|
|
v-if="keyIndex == 0 && item.backtrace"
|
|
class="gl-ml-3 button-ellipsis-horizontal"
|
|
data-testid="backtrace-expand-btn"
|
|
category="primary"
|
|
variant="default"
|
|
icon="ellipsis_h"
|
|
size="small"
|
|
:selected="itemHasOpenedBacktrace(index)"
|
|
:aria-label="__('Toggle backtrace')"
|
|
@click="toggleBacktrace(index)"
|
|
/>
|
|
</div>
|
|
<pre v-if="itemHasOpenedBacktrace(index)" class="backtrace-row 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 #modal-footer>
|
|
<div></div>
|
|
</template>
|
|
</gl-modal>
|
|
{{ title }}
|
|
<request-warning :html-id="htmlId" :warnings="warnings" />
|
|
</div>
|
|
</template>
|