2019-12-26 22:10:19 +05:30
|
|
|
<script>
|
2020-11-24 15:15:51 +05:30
|
|
|
/* eslint-disable vue/no-v-html */
|
|
|
|
import { GlTooltip, GlSprintf, GlIcon } from '@gitlab/ui';
|
2019-12-26 22:10:19 +05:30
|
|
|
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
|
|
|
|
import FileIcon from '~/vue_shared/components/file_icon.vue';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
ClipboardButton,
|
|
|
|
FileIcon,
|
2020-11-24 15:15:51 +05:30
|
|
|
GlIcon,
|
2020-07-02 01:45:43 +05:30
|
|
|
GlSprintf,
|
2019-12-26 22:10:19 +05:30
|
|
|
},
|
|
|
|
directives: {
|
|
|
|
GlTooltip,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
lines: {
|
|
|
|
type: Array,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
filePath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
2020-01-01 13:55:28 +05:30
|
|
|
errorFn: {
|
|
|
|
type: String,
|
|
|
|
required: false,
|
|
|
|
default: '',
|
|
|
|
},
|
2019-12-26 22:10:19 +05:30
|
|
|
errorLine: {
|
|
|
|
type: Number,
|
2020-01-01 13:55:28 +05:30
|
|
|
required: false,
|
|
|
|
default: 0,
|
|
|
|
},
|
|
|
|
errorColumn: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 0,
|
2019-12-26 22:10:19 +05:30
|
|
|
},
|
|
|
|
expanded: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isExpanded: this.expanded,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
2020-01-01 13:55:28 +05:30
|
|
|
hasCode() {
|
|
|
|
return Boolean(this.lines.length);
|
2019-12-26 22:10:19 +05:30
|
|
|
},
|
|
|
|
collapseIcon() {
|
|
|
|
return this.isExpanded ? 'chevron-down' : 'chevron-right';
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
isHighlighted(lineNum) {
|
|
|
|
return lineNum === this.errorLine;
|
|
|
|
},
|
|
|
|
toggle() {
|
|
|
|
this.isExpanded = !this.isExpanded;
|
|
|
|
},
|
|
|
|
lineNum(line) {
|
|
|
|
return line[0];
|
|
|
|
},
|
|
|
|
lineCode(line) {
|
|
|
|
return line[1];
|
|
|
|
},
|
|
|
|
},
|
|
|
|
userColorScheme: window.gon.user_color_scheme,
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="file-holder">
|
|
|
|
<div ref="header" class="file-title file-title-flex-parent">
|
2020-01-01 13:55:28 +05:30
|
|
|
<div class="file-header-content d-flex align-content-center">
|
|
|
|
<div v-if="hasCode" class="d-inline-block cursor-pointer" @click="toggle()">
|
2021-02-22 17:27:13 +05:30
|
|
|
<gl-icon :name="collapseIcon" :size="16" class="gl-mr-2" />
|
2019-12-26 22:10:19 +05:30
|
|
|
</div>
|
2020-07-28 23:09:34 +05:30
|
|
|
<file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
|
2020-01-01 13:55:28 +05:30
|
|
|
<strong
|
|
|
|
v-gl-tooltip
|
|
|
|
:title="filePath"
|
2020-03-13 15:44:24 +05:30
|
|
|
class="file-title-name d-inline-block overflow-hidden text-truncate limited-width"
|
2020-01-01 13:55:28 +05:30
|
|
|
data-container="body"
|
|
|
|
>
|
|
|
|
{{ filePath }}
|
|
|
|
</strong>
|
2019-12-26 22:10:19 +05:30
|
|
|
<clipboard-button
|
|
|
|
:title="__('Copy file path')"
|
|
|
|
:text="filePath"
|
2021-01-03 14:25:43 +05:30
|
|
|
category="tertiary"
|
|
|
|
size="small"
|
|
|
|
css-class="gl-mr-1"
|
2019-12-26 22:10:19 +05:30
|
|
|
/>
|
2020-07-02 01:45:43 +05:30
|
|
|
|
|
|
|
<gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">
|
2021-03-08 18:12:59 +05:30
|
|
|
<template #span="{ content }">
|
2020-10-24 23:57:45 +05:30
|
|
|
<span class="gl-text-gray-200">{{ content }} </span>
|
2020-07-02 01:45:43 +05:30
|
|
|
</template>
|
|
|
|
<template #errorFn>
|
|
|
|
<strong>{{ errorFn }} </strong>
|
|
|
|
</template>
|
|
|
|
</gl-sprintf>
|
|
|
|
|
|
|
|
<gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')">
|
2021-03-08 18:12:59 +05:30
|
|
|
<template #span="{ content }">
|
2020-10-24 23:57:45 +05:30
|
|
|
<span class="gl-text-gray-200">{{ content }} </span>
|
2020-07-02 01:45:43 +05:30
|
|
|
</template>
|
|
|
|
<template #errorLine>
|
|
|
|
<strong>{{ errorLine }}</strong>
|
|
|
|
</template>
|
|
|
|
<template #errorColumn>
|
|
|
|
<strong v-if="errorColumn">:{{ errorColumn }}</strong>
|
|
|
|
</template>
|
|
|
|
</gl-sprintf>
|
2019-12-26 22:10:19 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<table v-if="isExpanded" :class="$options.userColorScheme" class="code js-syntax-highlight">
|
|
|
|
<tbody>
|
|
|
|
<template v-for="(line, index) in lines">
|
|
|
|
<tr :key="`stacktrace-line-${index}`" class="line_holder">
|
|
|
|
<td class="diff-line-num" :class="{ old: isHighlighted(lineNum(line)) }">
|
|
|
|
{{ lineNum(line) }}
|
|
|
|
</td>
|
|
|
|
<td
|
|
|
|
class="line_content"
|
|
|
|
:class="{ old: isHighlighted(lineNum(line)) }"
|
|
|
|
v-html="lineCode(line)"
|
|
|
|
></td>
|
|
|
|
</tr>
|
|
|
|
</template>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</template>
|