mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-11-25 11:16:11 +01:00
1dfa11551c
When a long line with characters such as dots is returned by a step in an action (e.g. by the output of the Ruby on Rails test runner), it overflows the log container, causing the page to scroll sideways. This PR adds the CSS `overflow-wrap: anywhere;` to the `.job-step-section .job-step-logs .job-log-line .log-msg` selector, which causes such lines to wrap as well (cherry picked from commit 61aaf3440142d225802e3e9ce3db28bcf71f5a7e)
906 lines
28 KiB
Vue
906 lines
28 KiB
Vue
<script>
|
|
import {SvgIcon} from '../svg.js';
|
|
import ActionRunStatus from './ActionRunStatus.vue';
|
|
import {createApp} from 'vue';
|
|
import {toggleElem} from '../utils/dom.js';
|
|
import {formatDatetime} from '../utils/time.js';
|
|
import {renderAnsi} from '../render/ansi.js';
|
|
import {GET, POST, DELETE} from '../modules/fetch.js';
|
|
|
|
const sfc = {
|
|
name: 'RepoActionView',
|
|
components: {
|
|
SvgIcon,
|
|
ActionRunStatus,
|
|
},
|
|
props: {
|
|
runIndex: String,
|
|
jobIndex: String,
|
|
actionsURL: String,
|
|
workflowName: String,
|
|
workflowURL: String,
|
|
locale: Object,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// internal state
|
|
loading: false,
|
|
intervalID: null,
|
|
currentJobStepsStates: [],
|
|
artifacts: [],
|
|
onHoverRerunIndex: -1,
|
|
menuVisible: false,
|
|
isFullScreen: false,
|
|
timeVisible: {
|
|
'log-time-stamp': false,
|
|
'log-time-seconds': false,
|
|
},
|
|
|
|
// provided by backend
|
|
run: {
|
|
link: '',
|
|
title: '',
|
|
status: '',
|
|
canCancel: false,
|
|
canApprove: false,
|
|
canRerun: false,
|
|
done: false,
|
|
jobs: [
|
|
// {
|
|
// id: 0,
|
|
// name: '',
|
|
// status: '',
|
|
// canRerun: false,
|
|
// duration: '',
|
|
// },
|
|
],
|
|
commit: {
|
|
localeCommit: '',
|
|
localePushedBy: '',
|
|
localeWorkflow: '',
|
|
shortSHA: '',
|
|
link: '',
|
|
pusher: {
|
|
displayName: '',
|
|
link: '',
|
|
},
|
|
branch: {
|
|
name: '',
|
|
link: '',
|
|
},
|
|
},
|
|
},
|
|
currentJob: {
|
|
title: '',
|
|
detail: '',
|
|
steps: [
|
|
// {
|
|
// summary: '',
|
|
// duration: '',
|
|
// status: '',
|
|
// }
|
|
],
|
|
},
|
|
};
|
|
},
|
|
|
|
async mounted() {
|
|
// load job data and then auto-reload periodically
|
|
// need to await first loadJob so this.currentJobStepsStates is initialized and can be used in hashChangeListener
|
|
await this.loadJob();
|
|
this.intervalID = setInterval(this.loadJob, 1000);
|
|
document.body.addEventListener('click', this.closeDropdown);
|
|
this.hashChangeListener();
|
|
window.addEventListener('hashchange', this.hashChangeListener);
|
|
},
|
|
|
|
beforeUnmount() {
|
|
document.body.removeEventListener('click', this.closeDropdown);
|
|
window.removeEventListener('hashchange', this.hashChangeListener);
|
|
},
|
|
|
|
unmounted() {
|
|
// clear the interval timer when the component is unmounted
|
|
// even our page is rendered once, not spa style
|
|
if (this.intervalID) {
|
|
clearInterval(this.intervalID);
|
|
this.intervalID = null;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// show/hide the step logs for a step
|
|
toggleStepLogs(idx) {
|
|
this.currentJobStepsStates[idx].expanded = !this.currentJobStepsStates[idx].expanded;
|
|
if (this.currentJobStepsStates[idx].expanded) {
|
|
this.loadJob(); // try to load the data immediately instead of waiting for next timer interval
|
|
}
|
|
},
|
|
// cancel a run
|
|
cancelRun() {
|
|
POST(`${this.run.link}/cancel`);
|
|
},
|
|
// approve a run
|
|
approveRun() {
|
|
POST(`${this.run.link}/approve`);
|
|
},
|
|
// show/hide the step logs for a group
|
|
toggleGroupLogs(event) {
|
|
const line = event.target.parentElement;
|
|
const list = line.nextSibling;
|
|
if (event.newState === 'open') {
|
|
list.classList.remove('hidden');
|
|
} else {
|
|
list.classList.add('hidden');
|
|
}
|
|
},
|
|
|
|
createLogLine(line, startTime, stepIndex, group) {
|
|
const div = document.createElement('div');
|
|
div.classList.add('job-log-line');
|
|
div.setAttribute('id', `jobstep-${stepIndex}-${line.index}`);
|
|
div._jobLogTime = line.timestamp;
|
|
|
|
const lineNumber = document.createElement('a');
|
|
lineNumber.classList.add('line-num', 'muted');
|
|
lineNumber.textContent = line.index;
|
|
lineNumber.setAttribute('href', `#jobstep-${stepIndex}-${line.index}`);
|
|
div.append(lineNumber);
|
|
|
|
// for "Show timestamps"
|
|
const logTimeStamp = document.createElement('span');
|
|
logTimeStamp.className = 'log-time-stamp';
|
|
const date = new Date(parseFloat(line.timestamp * 1000));
|
|
const timeStamp = formatDatetime(date);
|
|
logTimeStamp.textContent = timeStamp;
|
|
toggleElem(logTimeStamp, this.timeVisible['log-time-stamp']);
|
|
// for "Show seconds"
|
|
const logTimeSeconds = document.createElement('span');
|
|
logTimeSeconds.className = 'log-time-seconds';
|
|
const seconds = Math.floor(parseFloat(line.timestamp) - parseFloat(startTime));
|
|
logTimeSeconds.textContent = `${seconds}s`;
|
|
toggleElem(logTimeSeconds, this.timeVisible['log-time-seconds']);
|
|
|
|
let logMessage = document.createElement('span');
|
|
logMessage.innerHTML = renderAnsi(line.message);
|
|
if (group.isHeader) {
|
|
const details = document.createElement('details');
|
|
details.addEventListener('toggle', this.toggleGroupLogs);
|
|
const summary = document.createElement('summary');
|
|
summary.append(logMessage);
|
|
details.append(summary);
|
|
logMessage = details;
|
|
}
|
|
logMessage.className = 'log-msg';
|
|
logMessage.style.paddingLeft = `${group.depth}em`;
|
|
|
|
div.append(logTimeStamp);
|
|
div.append(logMessage);
|
|
div.append(logTimeSeconds);
|
|
|
|
return div;
|
|
},
|
|
|
|
appendLogs(stepIndex, logLines, startTime) {
|
|
const groupStack = [];
|
|
const container = this.$refs.logs[stepIndex];
|
|
for (const line of logLines) {
|
|
const el = groupStack.length > 0 ? groupStack[groupStack.length - 1] : container;
|
|
const group = {
|
|
depth: groupStack.length,
|
|
isHeader: false,
|
|
};
|
|
if (line.message.startsWith('##[group]')) {
|
|
group.isHeader = true;
|
|
|
|
const logLine = this.createLogLine(
|
|
{
|
|
...line,
|
|
message: line.message.substring(9),
|
|
},
|
|
startTime, stepIndex, group,
|
|
);
|
|
logLine.setAttribute('data-group', group.index);
|
|
el.append(logLine);
|
|
|
|
const list = document.createElement('div');
|
|
list.classList.add('job-log-list');
|
|
list.classList.add('hidden');
|
|
list.setAttribute('data-group', group.index);
|
|
groupStack.push(list);
|
|
el.append(list);
|
|
} else if (line.message.startsWith('##[endgroup]')) {
|
|
groupStack.pop();
|
|
} else {
|
|
el.append(this.createLogLine(line, startTime, stepIndex, group));
|
|
}
|
|
}
|
|
},
|
|
|
|
async fetchArtifacts() {
|
|
const resp = await GET(`${this.actionsURL}/runs/${this.runIndex}/artifacts`);
|
|
return await resp.json();
|
|
},
|
|
|
|
async deleteArtifact(name) {
|
|
if (!window.confirm(this.locale.confirmDeleteArtifact.replace('%s', name))) return;
|
|
await DELETE(`${this.run.link}/artifacts/${name}`);
|
|
await this.loadJob();
|
|
},
|
|
|
|
async fetchJob() {
|
|
const logCursors = this.currentJobStepsStates.map((it, idx) => {
|
|
// cursor is used to indicate the last position of the logs
|
|
// it's only used by backend, frontend just reads it and passes it back, it and can be any type.
|
|
// for example: make cursor=null means the first time to fetch logs, cursor=eof means no more logs, etc
|
|
return {step: idx, cursor: it.cursor, expanded: it.expanded};
|
|
});
|
|
const resp = await POST(`${this.actionsURL}/runs/${this.runIndex}/jobs/${this.jobIndex}`, {
|
|
data: {logCursors},
|
|
});
|
|
return await resp.json();
|
|
},
|
|
|
|
async loadJob() {
|
|
if (this.loading) return;
|
|
try {
|
|
this.loading = true;
|
|
|
|
let job, artifacts;
|
|
try {
|
|
[job, artifacts] = await Promise.all([
|
|
this.fetchJob(),
|
|
this.fetchArtifacts(), // refresh artifacts if upload-artifact step done
|
|
]);
|
|
} catch (err) {
|
|
if (err instanceof TypeError) return; // avoid network error while unloading page
|
|
throw err;
|
|
}
|
|
|
|
this.artifacts = artifacts['artifacts'] || [];
|
|
|
|
// save the state to Vue data, then the UI will be updated
|
|
this.run = job.state.run;
|
|
this.currentJob = job.state.currentJob;
|
|
|
|
// sync the currentJobStepsStates to store the job step states
|
|
for (let i = 0; i < this.currentJob.steps.length; i++) {
|
|
if (!this.currentJobStepsStates[i]) {
|
|
// initial states for job steps
|
|
this.currentJobStepsStates[i] = {cursor: null, expanded: false};
|
|
}
|
|
}
|
|
// append logs to the UI
|
|
for (const logs of job.logs.stepsLog) {
|
|
// save the cursor, it will be passed to backend next time
|
|
this.currentJobStepsStates[logs.step].cursor = logs.cursor;
|
|
this.appendLogs(logs.step, logs.lines, logs.started);
|
|
}
|
|
|
|
if (this.run.done && this.intervalID) {
|
|
clearInterval(this.intervalID);
|
|
this.intervalID = null;
|
|
}
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
isDone(status) {
|
|
return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
|
|
},
|
|
|
|
isExpandable(status) {
|
|
return ['success', 'running', 'failure', 'cancelled'].includes(status);
|
|
},
|
|
|
|
closeDropdown() {
|
|
if (this.menuVisible) this.menuVisible = false;
|
|
},
|
|
|
|
toggleTimeDisplay(type) {
|
|
this.timeVisible[`log-time-${type}`] = !this.timeVisible[`log-time-${type}`];
|
|
for (const el of this.$refs.steps.querySelectorAll(`.log-time-${type}`)) {
|
|
toggleElem(el, this.timeVisible[`log-time-${type}`]);
|
|
}
|
|
},
|
|
|
|
toggleFullScreen() {
|
|
this.isFullScreen = !this.isFullScreen;
|
|
const fullScreenEl = document.querySelector('.action-view-right');
|
|
const outerEl = document.querySelector('.full.height');
|
|
const actionBodyEl = document.querySelector('.action-view-body');
|
|
const headerEl = document.querySelector('#navbar');
|
|
const contentEl = document.querySelector('.page-content.repository');
|
|
const footerEl = document.querySelector('.page-footer');
|
|
toggleElem(headerEl, !this.isFullScreen);
|
|
toggleElem(contentEl, !this.isFullScreen);
|
|
toggleElem(footerEl, !this.isFullScreen);
|
|
// move .action-view-right to new parent
|
|
if (this.isFullScreen) {
|
|
outerEl.append(fullScreenEl);
|
|
} else {
|
|
actionBodyEl.append(fullScreenEl);
|
|
}
|
|
},
|
|
async hashChangeListener() {
|
|
const selectedLogStep = window.location.hash;
|
|
if (!selectedLogStep) return;
|
|
const [_, step, _line] = selectedLogStep.split('-');
|
|
if (!this.currentJobStepsStates[step]) return;
|
|
if (!this.currentJobStepsStates[step].expanded && this.currentJobStepsStates[step].cursor === null) {
|
|
this.currentJobStepsStates[step].expanded = true;
|
|
// need to await for load job if the step log is loaded for the first time
|
|
// so logline can be selected by querySelector
|
|
await this.loadJob();
|
|
}
|
|
const logLine = this.$refs.steps.querySelector(selectedLogStep);
|
|
if (!logLine) return;
|
|
logLine.querySelector('.line-num').click();
|
|
},
|
|
},
|
|
};
|
|
|
|
export default sfc;
|
|
|
|
export function initRepositoryActionView() {
|
|
const el = document.getElementById('repo-action-view');
|
|
if (!el) return;
|
|
|
|
// TODO: the parent element's full height doesn't work well now,
|
|
// but we can not pollute the global style at the moment, only fix the height problem for pages with this component
|
|
const parentFullHeight = document.querySelector('body > div.full.height');
|
|
if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
|
|
|
|
const view = createApp(sfc, {
|
|
runIndex: el.getAttribute('data-run-index'),
|
|
jobIndex: el.getAttribute('data-job-index'),
|
|
actionsURL: el.getAttribute('data-actions-url'),
|
|
workflowName: el.getAttribute('data-workflow-name'),
|
|
workflowURL: el.getAttribute('data-workflow-url'),
|
|
locale: {
|
|
approve: el.getAttribute('data-locale-approve'),
|
|
cancel: el.getAttribute('data-locale-cancel'),
|
|
rerun: el.getAttribute('data-locale-rerun'),
|
|
artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
|
|
areYouSure: el.getAttribute('data-locale-are-you-sure'),
|
|
confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
|
|
rerun_all: el.getAttribute('data-locale-rerun-all'),
|
|
showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
|
|
showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
|
|
showFullScreen: el.getAttribute('data-locale-show-full-screen'),
|
|
downloadLogs: el.getAttribute('data-locale-download-logs'),
|
|
status: {
|
|
unknown: el.getAttribute('data-locale-status-unknown'),
|
|
waiting: el.getAttribute('data-locale-status-waiting'),
|
|
running: el.getAttribute('data-locale-status-running'),
|
|
success: el.getAttribute('data-locale-status-success'),
|
|
failure: el.getAttribute('data-locale-status-failure'),
|
|
cancelled: el.getAttribute('data-locale-status-cancelled'),
|
|
skipped: el.getAttribute('data-locale-status-skipped'),
|
|
blocked: el.getAttribute('data-locale-status-blocked'),
|
|
},
|
|
},
|
|
});
|
|
view.mount(el);
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="ui container action-view-container">
|
|
<div class="action-view-header">
|
|
<div class="action-info-summary">
|
|
<div class="action-info-summary-title">
|
|
<ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
|
|
<h2 class="action-info-summary-title-text">
|
|
{{ run.title }}
|
|
</h2>
|
|
</div>
|
|
<button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove">
|
|
{{ locale.approve }}
|
|
</button>
|
|
<button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
|
|
{{ locale.cancel }}
|
|
</button>
|
|
<button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
|
|
{{ locale.rerun_all }}
|
|
</button>
|
|
</div>
|
|
<div class="action-summary">
|
|
{{ run.commit.localeCommit }}
|
|
<a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
|
|
{{ run.commit.localePushedBy }}
|
|
<a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
|
|
<span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
|
|
<a class="gt-ellipsis" :href="run.commit.branch.link">{{ run.commit.branch.name }}</a>
|
|
</span>
|
|
</div>
|
|
<div class="action-summary">
|
|
{{ run.commit.localeWorkflow }}
|
|
<a class="muted" :href="workflowURL">{{ workflowName }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="action-view-body">
|
|
<div class="action-view-left">
|
|
<div class="job-group-section">
|
|
<div class="job-brief-list">
|
|
<a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1">
|
|
<div class="job-brief-item-left">
|
|
<ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
|
|
<span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span>
|
|
</div>
|
|
<span class="job-brief-item-right">
|
|
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun && onHoverRerunIndex === job.id"/>
|
|
<span class="step-summary-duration">{{ job.duration }}</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="job-artifacts" v-if="artifacts.length > 0">
|
|
<div class="job-artifacts-title">
|
|
{{ locale.artifactsTitle }}
|
|
</div>
|
|
<ul class="job-artifacts-list">
|
|
<li class="job-artifacts-item" v-for="artifact in artifacts" :key="artifact.name">
|
|
<a class="job-artifacts-link" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
|
|
<SvgIcon name="octicon-file" class="ui text black job-artifacts-icon"/>{{ artifact.name }}
|
|
</a>
|
|
<a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)" class="job-artifacts-delete">
|
|
<SvgIcon name="octicon-trash" class="ui text black job-artifacts-icon"/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-view-right">
|
|
<div class="job-info-header">
|
|
<div class="job-info-header-left gt-ellipsis">
|
|
<h3 class="job-info-header-title gt-ellipsis">
|
|
{{ currentJob.title }}
|
|
</h3>
|
|
<p class="job-info-header-detail">
|
|
{{ currentJob.detail }}
|
|
</p>
|
|
</div>
|
|
<div class="job-info-header-right">
|
|
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible">
|
|
<button class="btn gt-interact-bg tw-p-2">
|
|
<SvgIcon name="octicon-gear" :size="18"/>
|
|
</button>
|
|
<div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
|
<a class="item" tabindex="0" @click="toggleTimeDisplay('seconds')" @keyup.space="toggleTimeDisplay('seconds')" @keyup.enter="toggleTimeDisplay('seconds')">
|
|
<i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
|
{{ locale.showLogSeconds }}
|
|
</a>
|
|
<a class="item" tabindex="0" @click="toggleTimeDisplay('stamp')" @keyup.space="toggleTimeDisplay('stamp')" @keyup.enter="toggleTimeDisplay('stamp')">
|
|
<i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
|
{{ locale.showTimeStamps }}
|
|
</a>
|
|
<a class="item" tabindex="0" @click="toggleFullScreen()" @keyup.space="toggleFullScreen()" @keyup.enter="toggleFullScreen()">
|
|
<i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
|
{{ locale.showFullScreen }}
|
|
</a>
|
|
<div class="divider"/>
|
|
<a :class="['item', !currentJob.steps.length ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank">
|
|
<i class="icon"><SvgIcon name="octicon-download"/></i>
|
|
{{ locale.downloadLogs }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
|
|
<div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
|
|
<div class="job-step-summary" tabindex="0" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.enter.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.space.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
|
|
<!-- If the job is done and the job step log is loaded for the first time, show the loading icon
|
|
currentJobStepsStates[i].cursor === null means the log is loaded for the first time
|
|
-->
|
|
<SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
|
|
<SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" :class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"/>
|
|
<ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
|
|
|
|
<span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
|
|
<span class="step-summary-duration">{{ jobStep.duration }}</span>
|
|
</div>
|
|
|
|
<!-- the log elements could be a lot, do not use v-if to destroy/reconstruct the DOM,
|
|
use native DOM elements for "log line" to improve performance, Vue is not suitable for managing so many reactive elements. -->
|
|
<div class="job-step-logs" ref="logs" v-show="currentJobStepsStates[i].expanded"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.action-view-body {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* ================ */
|
|
/* action view header */
|
|
|
|
.action-view-header {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.action-info-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-info-summary-title {
|
|
display: flex;
|
|
}
|
|
|
|
.action-info-summary-title-text {
|
|
font-size: 20px;
|
|
margin: 0 0 0 8px;
|
|
flex: 1;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.action-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
margin-left: 28px;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.action-commit-summary {
|
|
margin-left: 0;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
/* ================ */
|
|
/* action view left */
|
|
|
|
.action-view-left {
|
|
width: 30%;
|
|
max-width: 400px;
|
|
position: sticky;
|
|
top: 12px;
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
background: var(--color-body);
|
|
z-index: 2; /* above .job-info-header */
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.action-view-left {
|
|
position: static; /* can not sticky because multiple jobs would overlap into right view */
|
|
}
|
|
}
|
|
|
|
.job-artifacts-title {
|
|
font-size: 18px;
|
|
margin-top: 16px;
|
|
padding: 16px 10px 0 20px;
|
|
border-top: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.job-artifacts-item {
|
|
margin: 5px 0;
|
|
padding: 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.job-artifacts-list {
|
|
padding-left: 12px;
|
|
list-style: none;
|
|
}
|
|
|
|
.job-artifacts-icon {
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.job-brief-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.job-brief-item {
|
|
padding: 10px;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.job-brief-item:hover {
|
|
background-color: var(--color-hover);
|
|
}
|
|
|
|
.job-brief-item.selected {
|
|
font-weight: var(--font-weight-bold);
|
|
background-color: var(--color-active);
|
|
}
|
|
|
|
.job-brief-item:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.job-brief-item .job-brief-rerun {
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.job-brief-item .job-brief-rerun:hover {
|
|
transform: scale(130%);
|
|
}
|
|
|
|
.job-brief-item .job-brief-item-left {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.job-brief-item .job-brief-item-left span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.job-brief-item .job-brief-item-left .job-brief-name {
|
|
display: block;
|
|
width: 70%;
|
|
}
|
|
|
|
.job-brief-item .job-brief-item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ================ */
|
|
/* action view right */
|
|
|
|
.action-view-right {
|
|
flex: 1;
|
|
color: var(--color-console-fg-subtle);
|
|
max-height: 100%;
|
|
width: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--color-console-border);
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-console-bg);
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* begin fomantic button overrides */
|
|
|
|
.action-view-right .ui.button,
|
|
.action-view-right .ui.button:focus {
|
|
background: transparent;
|
|
color: var(--color-console-fg-subtle);
|
|
}
|
|
|
|
.action-view-right .ui.button:hover {
|
|
background: var(--color-console-hover-bg);
|
|
color: var(--color-console-fg);
|
|
}
|
|
|
|
.action-view-right .ui.button:active {
|
|
background: var(--color-console-active-bg);
|
|
color: var(--color-console-fg);
|
|
}
|
|
|
|
/* end fomantic button overrides */
|
|
|
|
/* begin fomantic dropdown menu overrides */
|
|
|
|
.action-view-right .ui.dropdown .menu {
|
|
background: var(--color-console-menu-bg);
|
|
border-color: var(--color-console-menu-border);
|
|
}
|
|
|
|
.action-view-right .ui.dropdown .menu > .item {
|
|
color: var(--color-console-fg);
|
|
}
|
|
|
|
.action-view-right .ui.dropdown .menu > .item:hover {
|
|
color: var(--color-console-fg);
|
|
background: var(--color-console-hover-bg);
|
|
}
|
|
|
|
.action-view-right .ui.dropdown .menu > .item:active {
|
|
color: var(--color-console-fg);
|
|
background: var(--color-console-active-bg);
|
|
}
|
|
|
|
.action-view-right .ui.dropdown .menu > .divider {
|
|
border-top-color: var(--color-console-menu-border);
|
|
}
|
|
|
|
.action-view-right .ui.pointing.dropdown > .menu:not(.hidden)::after {
|
|
background: var(--color-console-menu-bg);
|
|
box-shadow: -1px -1px 0 0 var(--color-console-menu-border);
|
|
}
|
|
|
|
/* end fomantic dropdown menu overrides */
|
|
|
|
.job-info-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 60px;
|
|
z-index: 1; /* above .job-step-container */
|
|
background: var(--color-console-bg);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.job-info-header:has(+ .job-step-container) {
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
}
|
|
|
|
.job-info-header .job-info-header-title {
|
|
color: var(--color-console-fg);
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.job-info-header .job-info-header-detail {
|
|
color: var(--color-console-fg-subtle);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.job-info-header-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.job-step-container {
|
|
max-height: 100%;
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
border-top: 1px solid var(--color-console-border);
|
|
z-index: 0;
|
|
}
|
|
|
|
.job-step-container .job-step-summary {
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.job-step-container .job-step-summary.step-expandable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.job-step-container .job-step-summary.step-expandable:hover {
|
|
color: var(--color-console-fg);
|
|
background: var(--color-console-hover-bg);
|
|
}
|
|
|
|
.job-step-container .job-step-summary .step-summary-msg {
|
|
flex: 1;
|
|
}
|
|
|
|
.job-step-container .job-step-summary .step-summary-duration {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.job-step-container .job-step-summary.selected {
|
|
color: var(--color-console-fg);
|
|
background-color: var(--color-console-active-bg);
|
|
position: sticky;
|
|
top: 60px;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.action-view-body {
|
|
flex-direction: column;
|
|
}
|
|
.action-view-left, .action-view-right {
|
|
width: 100%;
|
|
}
|
|
.action-view-left {
|
|
max-width: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* some elements are not managed by vue, so we need to use global style */
|
|
.job-status-rotate {
|
|
animation: job-status-rotate-keyframes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes job-status-rotate-keyframes {
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
.job-step-section {
|
|
margin: 10px;
|
|
}
|
|
|
|
.job-step-section .job-step-logs {
|
|
font-family: var(--fonts-monospace);
|
|
margin: 8px 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.job-step-section .job-step-logs .job-log-line {
|
|
display: flex;
|
|
}
|
|
|
|
.job-log-line:hover,
|
|
.job-log-line:target {
|
|
background-color: var(--color-console-hover-bg);
|
|
}
|
|
|
|
.job-log-line:target {
|
|
scroll-margin-top: 95px;
|
|
}
|
|
|
|
/* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */
|
|
.job-log-line .line-num, .log-time-seconds {
|
|
width: 48px;
|
|
color: var(--color-text-light-3);
|
|
text-align: right;
|
|
user-select: none;
|
|
}
|
|
|
|
.job-log-line:target > .line-num {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.log-time-seconds {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.job-log-line .log-time,
|
|
.log-time-stamp {
|
|
color: var(--color-text-light-3);
|
|
margin-left: 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.job-step-section .job-step-logs .job-log-line .log-msg {
|
|
flex: 1;
|
|
word-break: break-all;
|
|
white-space: break-spaces;
|
|
margin-left: 10px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* selectors here are intentionally exact to only match fullscreen */
|
|
|
|
.full.height > .action-view-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.full.height > .action-view-right > .job-info-header {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.full.height > .action-view-right > .job-step-container {
|
|
height: calc(100% - 60px);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.job-log-list.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|