2021-11-03 16:40:31 +00:00
|
|
|
<template>
|
2022-06-16 17:24:27 +00:00
|
|
|
<div v-if="build" class="flex flex-col pt-10 md:pt-0">
|
2022-01-16 17:42:10 +00:00
|
|
|
<div
|
|
|
|
class="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-gray-600 dark:bg-dark-gray-800 text-gray-50"
|
|
|
|
@click="$emit('update:proc-id', null)"
|
|
|
|
>
|
|
|
|
<span>{{ proc?.name }}</span>
|
|
|
|
<Icon name="close" class="ml-auto" />
|
|
|
|
</div>
|
|
|
|
|
2022-07-17 19:51:10 +00:00
|
|
|
<div
|
|
|
|
class="flex flex-grow flex-col bg-gray-300 dark:bg-dark-gray-700 md:m-2 md:mt-0 md:rounded-md overflow-hidden"
|
|
|
|
@mouseover="showActions = true"
|
|
|
|
@mouseleave="showActions = false"
|
|
|
|
>
|
|
|
|
<div v-show="showActions" class="absolute top-0 right-0 z-50 mt-2 mr-4 hidden md:flex">
|
|
|
|
<Button
|
|
|
|
v-if="proc?.end_time !== undefined"
|
|
|
|
:is-loading="downloadInProgress"
|
|
|
|
:title="$t('repo.build.actions.log_download')"
|
|
|
|
start-icon="download"
|
|
|
|
@click="download"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2022-08-08 13:29:52 +00:00
|
|
|
<div
|
2022-08-10 07:53:55 +00:00
|
|
|
v-show="hasLogs && loadedLogs"
|
2022-08-08 13:29:52 +00:00
|
|
|
ref="consoleElement"
|
2022-08-09 12:13:32 +00:00
|
|
|
class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] auto-rows-min flex-grow p-2 gap-x-2 overflow-x-hidden overflow-y-auto"
|
2022-08-08 13:29:52 +00:00
|
|
|
>
|
|
|
|
<div v-for="line in log" :key="line.index" class="contents font-mono">
|
|
|
|
<span class="text-gray-500 whitespace-nowrap select-none text-right">{{ line.index + 1 }}</span>
|
|
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
|
|
<span class="align-top text-color whitespace-pre-wrap break-words" v-html="line.text" />
|
|
|
|
<span class="text-gray-500 whitespace-nowrap select-none text-right">{{ formatTime(line.time) }}</span>
|
|
|
|
</div>
|
2022-05-11 11:40:44 +00:00
|
|
|
</div>
|
2022-06-16 17:24:27 +00:00
|
|
|
|
2022-06-17 00:00:31 +00:00
|
|
|
<div class="m-auto text-xl text-color">
|
2022-06-16 17:24:27 +00:00
|
|
|
<span v-if="proc?.error" class="text-red-400">{{ proc.error }}</span>
|
|
|
|
<span v-else-if="proc?.state === 'skipped'" class="text-red-400">{{ $t('repo.build.actions.canceled') }}</span>
|
|
|
|
<span v-else-if="!proc?.start_time">{{ $t('repo.build.step_not_started') }}</span>
|
|
|
|
<div v-else-if="!loadedLogs">{{ $t('repo.build.loading') }}</div>
|
2022-05-11 11:40:44 +00:00
|
|
|
</div>
|
2022-01-16 17:42:10 +00:00
|
|
|
|
2022-06-16 17:24:27 +00:00
|
|
|
<div
|
|
|
|
v-if="proc?.end_time !== undefined"
|
2022-08-08 13:29:52 +00:00
|
|
|
:class="proc.exit_code == 0 ? 'dark:text-lime-400 text-lime-700' : 'dark:text-red-400 text-red-600'"
|
|
|
|
class="w-full bg-gray-200 dark:bg-dark-gray-800 text-md p-4"
|
2021-11-03 16:40:31 +00:00
|
|
|
>
|
2022-06-16 17:24:27 +00:00
|
|
|
{{ $t('repo.build.exit_code', { exitCode: proc.exit_code }) }}
|
|
|
|
</div>
|
2021-11-03 16:40:31 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2022-08-08 13:29:52 +00:00
|
|
|
import '~/style/console.css';
|
|
|
|
|
|
|
|
import AnsiUp from 'ansi_up';
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
import { computed, defineComponent, inject, nextTick, onMounted, PropType, Ref, ref, toRef, watch } from 'vue';
|
2022-07-17 19:51:10 +00:00
|
|
|
import { useI18n } from 'vue-i18n';
|
2021-11-03 16:40:31 +00:00
|
|
|
|
2022-07-17 19:51:10 +00:00
|
|
|
import Button from '~/components/atomic/Button.vue';
|
2022-01-16 17:42:10 +00:00
|
|
|
import Icon from '~/components/atomic/Icon.vue';
|
2022-06-16 17:24:27 +00:00
|
|
|
import useApiClient from '~/compositions/useApiClient';
|
2022-07-17 19:51:10 +00:00
|
|
|
import useNotifications from '~/compositions/useNotifications';
|
2021-11-03 16:40:31 +00:00
|
|
|
import { Build, Repo } from '~/lib/api/types';
|
2022-06-16 17:24:27 +00:00
|
|
|
import { findProc, isProcFinished, isProcRunning } from '~/utils/helpers';
|
2021-11-03 16:40:31 +00:00
|
|
|
|
2022-08-08 13:29:52 +00:00
|
|
|
type LogLine = {
|
|
|
|
index: number;
|
|
|
|
text: string;
|
|
|
|
time?: number;
|
|
|
|
};
|
|
|
|
|
2021-11-03 16:40:31 +00:00
|
|
|
export default defineComponent({
|
2022-01-09 01:21:30 +00:00
|
|
|
name: 'BuildLog',
|
2021-11-03 16:40:31 +00:00
|
|
|
|
2022-07-17 19:51:10 +00:00
|
|
|
components: { Icon, Button },
|
2021-11-03 16:40:31 +00:00
|
|
|
|
|
|
|
props: {
|
|
|
|
build: {
|
|
|
|
type: Object as PropType<Build>,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
|
|
|
|
// used by toRef
|
|
|
|
// eslint-disable-next-line vue/no-unused-properties
|
|
|
|
procId: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-01-16 17:42:10 +00:00
|
|
|
emits: {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
'update:proc-id': (procId: number | null) => true,
|
|
|
|
},
|
|
|
|
|
2021-11-03 16:40:31 +00:00
|
|
|
setup(props) {
|
2022-07-17 19:51:10 +00:00
|
|
|
const notifications = useNotifications();
|
|
|
|
const i18n = useI18n();
|
2021-11-03 16:40:31 +00:00
|
|
|
const build = toRef(props, 'build');
|
|
|
|
const procId = toRef(props, 'procId');
|
|
|
|
const repo = inject<Ref<Repo>>('repo');
|
2022-06-16 17:24:27 +00:00
|
|
|
const apiClient = useApiClient();
|
2021-11-03 16:40:31 +00:00
|
|
|
|
2022-06-16 17:24:27 +00:00
|
|
|
const loadedProcSlug = ref<string>();
|
|
|
|
const procSlug = computed(() => `${repo?.value.owner} - ${repo?.value.name} - ${build.value.id} - ${procId.value}`);
|
2021-11-03 16:40:31 +00:00
|
|
|
const proc = computed(() => build.value && findProc(build.value.procs || [], procId.value));
|
2022-06-16 17:24:27 +00:00
|
|
|
const stream = ref<EventSource>();
|
2022-08-08 13:29:52 +00:00
|
|
|
const log = ref<LogLine[]>();
|
|
|
|
const consoleElement = ref<Element>();
|
|
|
|
|
|
|
|
const loadedLogs = computed(() => !!log.value);
|
2022-08-10 07:53:55 +00:00
|
|
|
const hasLogs = computed(
|
|
|
|
() =>
|
|
|
|
// we do not have logs for skipped jobs
|
|
|
|
repo?.value && build.value && proc.value && proc.value.state !== 'skipped' && proc.value.state !== 'killed',
|
|
|
|
);
|
2022-08-08 13:29:52 +00:00
|
|
|
const autoScroll = ref(true); // TODO: allow enable / disable
|
2022-07-17 19:51:10 +00:00
|
|
|
const showActions = ref(false);
|
|
|
|
const downloadInProgress = ref(false);
|
2022-08-08 13:29:52 +00:00
|
|
|
const ansiUp = ref(new AnsiUp());
|
|
|
|
ansiUp.value.use_classes = true;
|
|
|
|
const logBuffer = ref<LogLine[]>([]);
|
|
|
|
|
|
|
|
const maxLineCount = 500; // TODO: think about way to support lazy-loading more than last 300 logs (#776)
|
|
|
|
|
|
|
|
function formatTime(time?: number): string {
|
|
|
|
return time === undefined ? '' : `${time}s`;
|
|
|
|
}
|
|
|
|
|
|
|
|
function writeLog(line: LogLine) {
|
|
|
|
logBuffer.value.push({
|
|
|
|
index: line.index ?? 0,
|
|
|
|
text: ansiUp.value.ansi_to_html(line.text),
|
|
|
|
time: line.time ?? 0,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function scrollDown() {
|
|
|
|
nextTick(() => {
|
|
|
|
if (!consoleElement.value) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
consoleElement.value.scrollTop = consoleElement.value.scrollHeight;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
const flushLogs = debounce((scroll: boolean) => {
|
|
|
|
let buffer = logBuffer.value.slice(-maxLineCount);
|
|
|
|
logBuffer.value = [];
|
|
|
|
|
|
|
|
if (buffer.length === 0) {
|
2022-08-10 07:53:55 +00:00
|
|
|
if (!log.value) {
|
|
|
|
log.value = [];
|
|
|
|
}
|
2022-08-08 13:29:52 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// append old logs lines
|
|
|
|
if (buffer.length < maxLineCount && log.value) {
|
|
|
|
buffer = [...log.value.slice(-(maxLineCount - buffer.length)), ...buffer];
|
|
|
|
}
|
|
|
|
|
|
|
|
// deduplicate repeating times
|
|
|
|
buffer = buffer.reduce(
|
|
|
|
(acc, line) => ({
|
|
|
|
lastTime: line.time ?? 0,
|
|
|
|
lines: [
|
|
|
|
...acc.lines,
|
|
|
|
{
|
|
|
|
...line,
|
|
|
|
time: acc.lastTime === line.time ? undefined : line.time,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
}),
|
|
|
|
{ lastTime: -1, lines: [] as LogLine[] },
|
|
|
|
).lines;
|
|
|
|
|
|
|
|
log.value = buffer;
|
|
|
|
|
|
|
|
if (scroll && autoScroll.value) {
|
|
|
|
scrollDown();
|
|
|
|
}
|
|
|
|
}, 500);
|
2022-07-17 19:51:10 +00:00
|
|
|
|
|
|
|
async function download() {
|
|
|
|
if (!repo?.value || !build.value || !proc.value) {
|
2022-08-08 13:29:52 +00:00
|
|
|
throw new Error('The repository, build or proc was undefined');
|
2022-07-17 19:51:10 +00:00
|
|
|
}
|
|
|
|
let logs;
|
|
|
|
try {
|
|
|
|
downloadInProgress.value = true;
|
|
|
|
logs = await apiClient.getLogs(repo.value.owner, repo.value.name, build.value.number, proc.value.pid);
|
|
|
|
} catch (e) {
|
|
|
|
notifications.notifyError(e, i18n.t('repo.build.log_download_error'));
|
|
|
|
return;
|
|
|
|
} finally {
|
|
|
|
downloadInProgress.value = false;
|
|
|
|
}
|
|
|
|
const fileURL = window.URL.createObjectURL(
|
|
|
|
new Blob([logs.map((line) => line.out).join('')], {
|
|
|
|
type: 'text/plain',
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
const fileLink = document.createElement('a');
|
|
|
|
|
|
|
|
fileLink.href = fileURL;
|
|
|
|
fileLink.setAttribute(
|
|
|
|
'download',
|
|
|
|
`${repo.value.owner}-${repo.value.name}-${build.value.number}-${proc.value.name}.log`,
|
|
|
|
);
|
|
|
|
document.body.appendChild(fileLink);
|
|
|
|
|
|
|
|
fileLink.click();
|
|
|
|
document.body.removeChild(fileLink);
|
|
|
|
window.URL.revokeObjectURL(fileURL);
|
|
|
|
}
|
2022-06-16 17:24:27 +00:00
|
|
|
|
|
|
|
async function loadLogs() {
|
|
|
|
if (loadedProcSlug.value === procSlug.value) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
loadedProcSlug.value = procSlug.value;
|
2022-08-10 07:53:55 +00:00
|
|
|
log.value = undefined;
|
2022-08-08 13:29:52 +00:00
|
|
|
logBuffer.value = [];
|
|
|
|
ansiUp.value = new AnsiUp();
|
|
|
|
ansiUp.value.use_classes = true;
|
2021-11-03 16:40:31 +00:00
|
|
|
|
|
|
|
if (!repo) {
|
|
|
|
throw new Error('Unexpected: "repo" should be provided at this place');
|
|
|
|
}
|
|
|
|
|
2022-06-16 17:24:27 +00:00
|
|
|
if (stream.value) {
|
|
|
|
stream.value.close();
|
|
|
|
}
|
|
|
|
|
2022-08-10 07:53:55 +00:00
|
|
|
if (!hasLogs.value || !proc.value) {
|
2021-11-03 16:40:31 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2022-06-16 17:24:27 +00:00
|
|
|
if (isProcFinished(proc.value)) {
|
|
|
|
const logs = await apiClient.getLogs(repo.value.owner, repo.value.name, build.value.number, proc.value.pid);
|
2022-08-10 07:53:55 +00:00
|
|
|
logs?.forEach((line) => writeLog({ index: line.pos, text: line.out, time: line.time }));
|
2022-08-08 13:29:52 +00:00
|
|
|
flushLogs(false);
|
2022-06-16 17:24:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (isProcRunning(proc.value)) {
|
|
|
|
// load stream of parent process (which receives all child processes logs)
|
|
|
|
// TODO: change stream to only send data of single child process
|
|
|
|
stream.value = apiClient.streamLogs(
|
|
|
|
repo.value.owner,
|
|
|
|
repo.value.name,
|
|
|
|
build.value.number,
|
|
|
|
proc.value.ppid,
|
2022-08-08 13:29:52 +00:00
|
|
|
(line) => {
|
|
|
|
if (line?.proc !== proc.value?.name) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
writeLog({ index: line.pos, text: line.out, time: line.time });
|
|
|
|
flushLogs(true);
|
2022-06-16 17:24:27 +00:00
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
loadLogs();
|
2021-11-03 16:40:31 +00:00
|
|
|
});
|
|
|
|
|
2022-06-16 17:24:27 +00:00
|
|
|
watch(procSlug, () => {
|
|
|
|
loadLogs();
|
2021-11-03 16:40:31 +00:00
|
|
|
});
|
|
|
|
|
2022-08-08 13:29:52 +00:00
|
|
|
watch(proc, (oldProc, newProc) => {
|
|
|
|
if (oldProc && oldProc.name === newProc?.name && oldProc?.end_time !== newProc?.end_time) {
|
|
|
|
if (autoScroll.value) {
|
|
|
|
scrollDown();
|
2022-06-16 17:24:27 +00:00
|
|
|
}
|
2022-06-25 17:52:37 +00:00
|
|
|
}
|
2021-11-03 16:40:31 +00:00
|
|
|
});
|
|
|
|
|
2022-08-10 07:53:55 +00:00
|
|
|
return { consoleElement, proc, log, loadedLogs, hasLogs, formatTime, showActions, download, downloadInProgress };
|
2021-11-03 16:40:31 +00:00
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|