This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
import {buildArtifactTooltipHtml} from './ActionRunArtifacts.ts';
|
||||
import {normalizeTestHtml} from '../utils/testhelper.ts';
|
||||
|
||||
describe('buildArtifactTooltipHtml', () => {
|
||||
test('active artifact', () => {
|
||||
const expiresUnix = Date.UTC(2026, 2, 20, 12, 0, 0) / 1000;
|
||||
const expiresLocal = new Date(expiresUnix * 1000).toLocaleString();
|
||||
const result = buildArtifactTooltipHtml({
|
||||
name: 'artifact.zip',
|
||||
size: 1024 * 1024,
|
||||
status: 'completed',
|
||||
expiresUnix,
|
||||
}, 'Expires at %s (extra)');
|
||||
|
||||
expect(normalizeTestHtml(result)).toBe(normalizeTestHtml(`<span class="flex-text-inline">
|
||||
<span>Expires at </span>
|
||||
<relative-time datetime="${expiresUnix}" threshold="P0Y" prefix="" weekday="" year="numeric" month="short" hour="numeric" minute="2-digit">
|
||||
${expiresLocal}
|
||||
</relative-time>
|
||||
<span> (extra)</span>
|
||||
<span class="inline-divider">,</span>
|
||||
<span>1.0 MiB</span>
|
||||
</span>
|
||||
`));
|
||||
});
|
||||
|
||||
test('no expiry', () => {
|
||||
const result = buildArtifactTooltipHtml({
|
||||
name: 'artifact.zip',
|
||||
size: 512,
|
||||
status: 'completed',
|
||||
expiresUnix: 0,
|
||||
}, 'Expires at %s');
|
||||
expect(normalizeTestHtml(result)).toBe(`<span class="flex-text-inline">512 B</span>`);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
import {html} from '../utils/html.ts';
|
||||
import {formatBytes} from '../utils.ts';
|
||||
import type {ActionsArtifact} from '../modules/gitea-actions.ts';
|
||||
|
||||
export function buildArtifactTooltipHtml(artifact: ActionsArtifact, expiresAtLocale: string): string {
|
||||
const sizeText = formatBytes(artifact.size);
|
||||
if (artifact.expiresUnix <= 0) {
|
||||
return html`<span class="flex-text-inline">${sizeText}</span>`; // use the same layout as below
|
||||
}
|
||||
const datetimeLocal = new Date(artifact.expiresUnix * 1000).toLocaleString();
|
||||
// split so the <relative-time> element can be interleaved, e.g. "Expires at %s" -> ["Expires at ", ""]
|
||||
const [prefix, suffix = ''] = expiresAtLocale.split('%s');
|
||||
return html`
|
||||
<span class="flex-text-inline">
|
||||
<span>${prefix}</span>
|
||||
<relative-time datetime="${artifact.expiresUnix}" threshold="P0Y" prefix="" weekday="" year="numeric" month="short" hour="numeric" minute="2-digit">
|
||||
${datetimeLocal}
|
||||
</relative-time>
|
||||
<span>${suffix}</span>
|
||||
<span class="inline-divider">,</span>
|
||||
<span>${sizeText}</span>
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
@@ -1,20 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
|
||||
import {computed, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import ActionRunStatus from './ActionRunStatus.vue';
|
||||
import {addDelegatedEventListener, createElementFromAttrs, toggleElem} from '../utils/dom.ts';
|
||||
import {formatDatetime} from '../utils/time.ts';
|
||||
import ActionStatusIcon from './ActionStatusIcon.vue';
|
||||
import {addDelegatedEventListener, createElementFromAttrs} from '../utils/dom.ts';
|
||||
import {formatDatetime, formatDatetimeISO} from '../utils/time.ts';
|
||||
import {POST} from '../modules/fetch.ts';
|
||||
import {copyToClipboardWithFeedback} from '../modules/clipboard.ts';
|
||||
import type {IntervalId} from '../types.ts';
|
||||
import {toggleFullScreen} from '../utils.ts';
|
||||
import {localUserSettings} from '../modules/user-settings.ts';
|
||||
import type {ActionsArtifact, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
|
||||
import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
|
||||
import {
|
||||
type ActionRunViewStore,
|
||||
createLogLineMessage,
|
||||
type LogLine,
|
||||
type LogLineCommand,
|
||||
parseLogLineCommand
|
||||
parseLogLineCommand,
|
||||
} from './ActionRunView.ts';
|
||||
|
||||
function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPortHeight: 0}): boolean {
|
||||
@@ -26,7 +27,7 @@ function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPor
|
||||
type Step = {
|
||||
summary: string,
|
||||
duration: string,
|
||||
status: ActionsRunStatus,
|
||||
status: ActionsStatus,
|
||||
}
|
||||
|
||||
type JobStepState = {
|
||||
@@ -77,9 +78,8 @@ defineOptions({
|
||||
|
||||
const props = defineProps<{
|
||||
store: ActionRunViewStore,
|
||||
runId: number;
|
||||
jobId: number;
|
||||
actionsUrl: string;
|
||||
actionsViewUrl: string;
|
||||
locale: Record<string, any>;
|
||||
}>();
|
||||
const store = props.store;
|
||||
@@ -116,6 +116,12 @@ const currentJob = ref<CurrentJob>({
|
||||
const stepsContainer = ref<HTMLElement | null>(null);
|
||||
const jobStepLogs = ref<Array<StepContainerElement | undefined>>([]);
|
||||
|
||||
// Reusable workflow caller view: the right pane shows just the header (name + uses path +
|
||||
// status). Callers don't run on a runner, and the dependency graph for their children lives
|
||||
// in the run summary's WorkflowGraph, not here — matching GitHub Actions.
|
||||
const selectedJob = computed<ActionsJob | undefined>(() => (run.value.jobs || []).find((it) => it.id === props.jobId));
|
||||
const isCallerJob = computed(() => Boolean(selectedJob.value?.isReusableCaller));
|
||||
|
||||
watch(optionAlwaysAutoScroll, () => {
|
||||
saveLocaleStorageOptions();
|
||||
});
|
||||
@@ -202,6 +208,22 @@ function endLogGroup(stepIndex: number) {
|
||||
el._stepLogsActiveContainer = undefined;
|
||||
}
|
||||
|
||||
async function copyStepOutput(event: MouseEvent, stepIndex: number) {
|
||||
await copyToClipboardWithFeedback(event.currentTarget as HTMLElement, async () => {
|
||||
const data = await fetchJobData([{step: stepIndex, cursor: null, expanded: true}]);
|
||||
const stepLog = data.logs.stepsLog?.find((s) => s.step === stepIndex);
|
||||
const lines: string[] = [];
|
||||
for (const line of stepLog?.lines ?? []) {
|
||||
const cmd = parseLogLineCommand(line);
|
||||
if (cmd?.name === 'hidden' || cmd?.name === 'endgroup') continue;
|
||||
const ts = formatDatetimeISO(line.timestamp);
|
||||
const msg = createLogLineMessage(line, cmd).textContent ?? '';
|
||||
lines.push(`${ts} ${msg}`);
|
||||
}
|
||||
return lines.join('\n');
|
||||
});
|
||||
}
|
||||
|
||||
// show/hide the step logs for a step
|
||||
function toggleStepLogs(idx: number) {
|
||||
currentJobStepsStates.value[idx].expanded = !currentJobStepsStates.value[idx].expanded;
|
||||
@@ -217,7 +239,7 @@ function createLogLine(stepIndex: number, startTime: number, line: LogLine, cmd:
|
||||
String(line.index),
|
||||
);
|
||||
const logTimeStamp = createElementFromAttrs('span', {class: 'log-time-stamp'},
|
||||
formatDatetime(new Date(line.timestamp * 1000)), // for "Show timestamps"
|
||||
formatDatetime(line.timestamp * 1000), // for "Show timestamps"
|
||||
);
|
||||
const logMsg = createLogLineMessage(line, cmd);
|
||||
const seconds = Math.floor(line.timestamp - startTime);
|
||||
@@ -225,9 +247,6 @@ function createLogLine(stepIndex: number, startTime: number, line: LogLine, cmd:
|
||||
`${seconds}s`, // for "Show seconds"
|
||||
);
|
||||
|
||||
toggleElem(logTimeStamp, timeVisible.value['log-time-stamp']);
|
||||
toggleElem(logTimeSeconds, timeVisible.value['log-time-seconds']);
|
||||
|
||||
const lineClass = cmd?.name ? `job-log-line log-line-${cmd.name}` : 'job-log-line';
|
||||
return createElementFromAttrs('div', {id: `jobstep-${stepIndex}-${line.index}`, class: lineClass},
|
||||
lineNum, logTimeStamp, logMsg, logTimeSeconds,
|
||||
@@ -262,18 +281,14 @@ function appendLogs(stepIndex: number, startTime: number, logLines: LogLine[]) {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchJobData(abortController: AbortController): Promise<JobData> {
|
||||
const logCursors = currentJobStepsStates.value.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 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 url = `${props.actionsUrl}/runs/${props.runId}/jobs/${props.jobId}`;
|
||||
const resp = await POST(url, {
|
||||
signal: abortController.signal,
|
||||
data: {logCursors},
|
||||
});
|
||||
// "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 can be any type.
|
||||
// Frontend knows nothing about its type, never uses its value.
|
||||
// For example: backend can make cursor=null means the first time to fetch logs, cursor=1234 for a position, cursor=eof for no more logs, etc.
|
||||
type LogCursor = {step: number, cursor: any, expanded: boolean};
|
||||
|
||||
async function fetchJobData(logCursors: LogCursor[], signal?: AbortSignal): Promise<JobData> {
|
||||
const resp = await POST(props.actionsViewUrl, {signal, data: {logCursors}});
|
||||
return await resp.json();
|
||||
}
|
||||
|
||||
@@ -288,7 +303,8 @@ async function loadJob() {
|
||||
const abortController = new AbortController();
|
||||
loadingAbortController = abortController;
|
||||
try {
|
||||
const runJobResp = await fetchJobData(abortController);
|
||||
const logCursors = currentJobStepsStates.value.map((it, idx) => ({step: idx, cursor: it.cursor, expanded: it.expanded}));
|
||||
const runJobResp = await fetchJobData(logCursors, abortController.signal);
|
||||
if (loadingAbortController !== abortController) return;
|
||||
|
||||
// FIXME: this logic is quite hacky and dirty, it should be refactored in a better way in the future
|
||||
@@ -354,11 +370,11 @@ async function loadJob() {
|
||||
}
|
||||
}
|
||||
|
||||
function isDone(status: ActionsRunStatus) {
|
||||
function isDone(status: ActionsStatus) {
|
||||
return ['success', 'skipped', 'failure', 'cancelled'].includes(status);
|
||||
}
|
||||
|
||||
function isExpandable(status: ActionsRunStatus) {
|
||||
function isExpandable(status: ActionsStatus) {
|
||||
return ['success', 'running', 'failure', 'cancelled'].includes(status);
|
||||
}
|
||||
|
||||
@@ -372,9 +388,6 @@ function elStepsContainer(): HTMLElement {
|
||||
|
||||
function toggleTimeDisplay(type: 'seconds' | 'stamp') {
|
||||
timeVisible.value[`log-time-${type}`] = !timeVisible.value[`log-time-${type}`];
|
||||
for (const el of elStepsContainer().querySelectorAll(`.log-time-${type}`)) {
|
||||
toggleElem(el, timeVisible.value[`log-time-${type}`]);
|
||||
}
|
||||
saveLocaleStorageOptions();
|
||||
}
|
||||
|
||||
@@ -404,16 +417,22 @@ async function hashChangeListener() {
|
||||
<template>
|
||||
<div class="job-info-header">
|
||||
<div class="job-info-header-left gt-ellipsis">
|
||||
<h3 class="job-info-header-title gt-ellipsis">
|
||||
{{ currentJob.title }}
|
||||
</h3>
|
||||
<div class="job-info-header-title-row">
|
||||
<h3 class="job-info-header-title gt-ellipsis">
|
||||
{{ isCallerJob ? selectedJob?.name : currentJob.title }}
|
||||
</h3>
|
||||
<span v-if="isCallerJob && selectedJob?.callUses" class="ui label job-info-header-uses">
|
||||
<span>uses:</span>
|
||||
<span class="gt-ellipsis">{{ selectedJob.callUses }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="job-info-header-detail">
|
||||
{{ currentJob.detail }}
|
||||
{{ isCallerJob && selectedJob ? locale.status[selectedJob.status] : currentJob.detail }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="job-info-header-right">
|
||||
<div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||
<button class="ui button tw-px-3">
|
||||
<button class="btn 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>
|
||||
@@ -448,7 +467,15 @@ async function hashChangeListener() {
|
||||
</div>
|
||||
</div>
|
||||
<!-- always create the node because we have our own event listeners on it, don't use "v-if" -->
|
||||
<div class="job-step-container" ref="stepsContainer" v-show="currentJob.steps.length">
|
||||
<div
|
||||
class="job-step-container"
|
||||
ref="stepsContainer"
|
||||
v-show="!isCallerJob && currentJob.steps.length"
|
||||
:class="{
|
||||
'log-line-show-timestamps': timeVisible['log-time-stamp'],
|
||||
'log-line-show-seconds': timeVisible['log-time-seconds']
|
||||
}"
|
||||
>
|
||||
<div class="job-step-section" v-for="(jobStep, stepIdx) in currentJob.steps" :key="stepIdx">
|
||||
<div
|
||||
class="job-step-summary"
|
||||
@@ -461,15 +488,25 @@ async function hashChangeListener() {
|
||||
<SvgIcon
|
||||
v-if="isDone(run.status) && currentJobStepsStates[stepIdx].expanded && currentJobStepsStates[stepIdx].cursor === null"
|
||||
name="gitea-running"
|
||||
class="tw-mr-2 rotate-clockwise"
|
||||
class="rotate-clockwise"
|
||||
/>
|
||||
<SvgIcon
|
||||
v-else
|
||||
:name="currentJobStepsStates[stepIdx].expanded ? 'octicon-chevron-down' : 'octicon-chevron-right'"
|
||||
:class="['tw-mr-2', !isExpandable(jobStep.status) && 'tw-invisible']"
|
||||
name="octicon-chevron-right"
|
||||
class="tw-mr-2 step-summary-chevron"
|
||||
:class="{'tw-invisible': !isExpandable(jobStep.status)}"
|
||||
/>
|
||||
<ActionRunStatus :status="jobStep.status" class="tw-mr-2"/>
|
||||
<ActionStatusIcon :status="jobStep.status" icon-variant="circle-fill"/>
|
||||
<span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span>
|
||||
<button
|
||||
v-if="isExpandable(jobStep.status)"
|
||||
class="btn interact-fg step-copy-btn"
|
||||
:aria-label="locale.copyOutput"
|
||||
:data-tooltip-content="locale.copyOutput"
|
||||
@click.stop="copyStepOutput($event, stepIdx)"
|
||||
>
|
||||
<SvgIcon name="octicon-copy" :size="14"/>
|
||||
</button>
|
||||
<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,
|
||||
@@ -541,6 +578,21 @@ async function hashChangeListener() {
|
||||
|
||||
.job-info-header-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.job-info-header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.job-info-header-uses {
|
||||
display: inline-flex !important;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.job-step-container {
|
||||
@@ -554,6 +606,7 @@ async function hashChangeListener() {
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@@ -566,12 +619,32 @@ async function hashChangeListener() {
|
||||
background: var(--color-console-hover-bg);
|
||||
}
|
||||
|
||||
.job-step-container .job-step-summary .step-summary-chevron {
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.job-step-container .job-step-summary.selected .step-summary-chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.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 .step-copy-btn {
|
||||
visibility: hidden;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.job-step-container .job-step-summary:hover .step-copy-btn,
|
||||
.job-step-container .job-step-summary.selected .step-copy-btn {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.job-step-container .job-step-summary:focus-within .step-copy-btn {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.job-step-container .job-step-summary.selected {
|
||||
@@ -610,8 +683,22 @@ async function hashChangeListener() {
|
||||
scroll-margin-top: 95px;
|
||||
}
|
||||
|
||||
.job-log-line .log-time-stamp,
|
||||
.job-log-line .log-time-seconds {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.log-line-show-timestamps .job-log-line .log-time-stamp {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.log-line-show-seconds .job-log-line .log-time-seconds {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */
|
||||
.job-log-line .line-num, .log-time-seconds {
|
||||
.job-log-line .line-num,
|
||||
.job-log-line .log-time-seconds {
|
||||
width: 48px;
|
||||
color: var(--color-text-light-3);
|
||||
text-align: right;
|
||||
@@ -628,16 +715,16 @@ async function hashChangeListener() {
|
||||
}
|
||||
|
||||
.job-log-line .log-time,
|
||||
.log-time-stamp {
|
||||
.job-log-line .log-time-stamp {
|
||||
color: var(--color-text-light-3);
|
||||
margin-left: 10px;
|
||||
margin-left: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.job-step-logs .job-log-line .log-msg {
|
||||
flex: 1;
|
||||
white-space: break-spaces;
|
||||
margin-left: 10px;
|
||||
white-space: break-spaces; /* decoded commands like "::error::foo%0Abar" contain "\n" */
|
||||
margin-left: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -704,18 +791,28 @@ async function hashChangeListener() {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.job-log-group .job-log-list .job-log-line .log-msg {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.job-log-group-summary {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
list-style: none; /* hide the standard disclosure marker (Chrome, Edge, Firefox) */
|
||||
}
|
||||
|
||||
.job-log-group-summary > .job-log-line {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1; /* to avoid hiding the triangle of the "details" element */
|
||||
overflow: hidden;
|
||||
.job-log-group-summary::-webkit-details-marker { /* hide the disclosure marker on Safari */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.log-line-group .log-msg::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -2.5px;
|
||||
margin-right: 8px;
|
||||
border-top: 4px solid transparent;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 6px solid var(--color-text-light-3);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.job-log-group[open] .log-line-group .log-msg::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
|
||||
Please also update the template file above if this vue is modified.
|
||||
action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
|
||||
withDefaults(defineProps<{
|
||||
status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'unknown',
|
||||
size?: number,
|
||||
className?: string,
|
||||
localeStatus?: string,
|
||||
}>(), {
|
||||
size: 16,
|
||||
className: '',
|
||||
localeStatus: undefined,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :data-tooltip-content="localeStatus ?? status" v-if="status">
|
||||
<SvgIcon name="octicon-check-circle-fill" class="tw-text-green" :size="size" :class="className" v-if="status === 'success'"/>
|
||||
<SvgIcon name="octicon-skip" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'skipped'"/>
|
||||
<SvgIcon name="octicon-stop" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
|
||||
<SvgIcon name="octicon-circle" class="tw-text-text-light" :size="size" :class="className" v-else-if="status === 'waiting'"/>
|
||||
<SvgIcon name="octicon-blocked" class="tw-text-yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
|
||||
<SvgIcon name="gitea-running" class="tw-text-yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
|
||||
<SvgIcon name="octicon-x-circle-fill" class="tw-text-red" :size="size" v-else/><!-- failure, unknown -->
|
||||
</span>
|
||||
</template>
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import ActionRunStatus from './ActionRunStatus.vue';
|
||||
import WorkflowGraph from './WorkflowGraph.vue';
|
||||
import type {ActionRunViewStore} from "./ActionRunView.ts";
|
||||
import {computed, onBeforeUnmount, onMounted, toRefs} from "vue";
|
||||
@@ -11,15 +10,42 @@ defineOptions({
|
||||
const props = defineProps<{
|
||||
store: ActionRunViewStore;
|
||||
locale: Record<string, any>;
|
||||
artifactCount: number;
|
||||
}>();
|
||||
|
||||
const locale = props.locale;
|
||||
const {currentRun: run} = toRefs(props.store.viewData);
|
||||
|
||||
const runTriggeredAtIso = computed(() => {
|
||||
const t = props.store.viewData.currentRun.triggeredAt;
|
||||
return t ? new Date(t * 1000).toISOString() : '';
|
||||
const isRerun = computed(() => run.value.runAttempt > 1);
|
||||
|
||||
// The summary's dependency graph is the workflow's top-level shape: a reusable caller
|
||||
// renders as a single node, its expanded children belong to the caller's own detail page.
|
||||
const topLevelJobs = computed(() => (run.value.jobs || []).filter((j) => !j.parentJobID));
|
||||
|
||||
const triggerUser = computed(() => {
|
||||
const currentAttempt = run.value.attempts.find((attempt) => attempt.current);
|
||||
if (currentAttempt) {
|
||||
return {
|
||||
name: currentAttempt.triggerUserName,
|
||||
link: currentAttempt.triggerUserLink,
|
||||
avatar: currentAttempt.triggerUserAvatar,
|
||||
};
|
||||
}
|
||||
const pusher = run.value.commit.pusher;
|
||||
return pusher.displayName ? {
|
||||
name: pusher.displayName,
|
||||
link: pusher.link,
|
||||
avatar: pusher.avatarLink,
|
||||
} : null;
|
||||
});
|
||||
|
||||
const triggerLabel = computed(() => {
|
||||
if (isRerun.value) return locale.rerunTriggered;
|
||||
return locale.triggeredVia.replace('%s', run.value.triggerEvent);
|
||||
});
|
||||
|
||||
const artifactsDisplay = computed(() => props.artifactCount > 0 ? String(props.artifactCount) : '–');
|
||||
|
||||
onMounted(async () => {
|
||||
await props.store.startPollingCurrentRun();
|
||||
});
|
||||
@@ -31,20 +57,71 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<div class="action-run-summary-view">
|
||||
<div class="action-run-summary-block">
|
||||
<div class="flex-text-block">
|
||||
{{ locale.triggeredVia.replace('%s', run.triggerEvent) }} • <relative-time :datetime="runTriggeredAtIso" prefix=""/>
|
||||
<div class="action-run-summary-trigger">
|
||||
<span class="action-run-summary-label">
|
||||
{{ triggerLabel }} <relative-time :datetime="run.triggeredAt || ''" prefix=""/>
|
||||
</span>
|
||||
<div class="flex-text-block tw-flex-wrap action-run-summary-trigger-content">
|
||||
<component
|
||||
:is="triggerUser.link ? 'a' : 'span'"
|
||||
v-if="triggerUser"
|
||||
class="flex-text-inline action-run-summary-user"
|
||||
:class="{silenced: triggerUser.link}"
|
||||
:href="triggerUser.link || undefined"
|
||||
>
|
||||
<img
|
||||
v-if="triggerUser.avatar"
|
||||
class="ui avatar tw-align-middle"
|
||||
:src="triggerUser.avatar"
|
||||
width="16"
|
||||
height="16"
|
||||
:alt="triggerUser.name"
|
||||
>
|
||||
<span>{{ triggerUser.name }}</span>
|
||||
</component>
|
||||
<a v-if="run.pullRequest" class="action-run-summary-pr silenced" :href="run.pullRequest.link">{{ run.pullRequest.index }}</a>
|
||||
<span v-else-if="run.commit.branch.name" class="action-run-summary-branch-label tw-max-w-full">
|
||||
<a
|
||||
v-if="!run.commit.branch.isDeleted && run.commit.branch.link"
|
||||
class="gt-ellipsis silenced"
|
||||
:href="run.commit.branch.link"
|
||||
:title="run.commit.branch.name"
|
||||
>{{ run.commit.branch.name }}</a>
|
||||
<span
|
||||
v-else
|
||||
class="gt-ellipsis tw-line-through"
|
||||
:title="run.commit.branch.name"
|
||||
>{{ run.commit.branch.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-text-block">
|
||||
<ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="16"/>
|
||||
<span>{{ locale.status[run.status] }}</span> • <span>{{ locale.totalDuration }} {{ run.duration || '–' }}</span>
|
||||
|
||||
<div class="action-run-summary-stat-divider"/>
|
||||
|
||||
<div class="action-run-summary-stat">
|
||||
<span class="action-run-summary-label">{{ locale.statusLabel }}</span>
|
||||
<span class="action-run-summary-stat-value">{{ locale.status[run.status] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="action-run-summary-stat">
|
||||
<span class="action-run-summary-label">{{ locale.totalDuration }}</span>
|
||||
<span class="action-run-summary-stat-value">{{ run.duration || '–' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="action-run-summary-stat action-run-summary-stat-last">
|
||||
<span class="action-run-summary-label">{{ locale.artifactsTitle }}</span>
|
||||
<span class="action-run-summary-stat-value">{{ artifactsDisplay }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<WorkflowGraph
|
||||
v-if="run.jobs.length > 0"
|
||||
v-if="topLevelJobs.length > 0"
|
||||
:store="store"
|
||||
:jobs="run.jobs"
|
||||
:jobs="topLevelJobs"
|
||||
:run-link="run.link"
|
||||
:workflow-id="run.workflowID"
|
||||
:workflow-link="run.canViewWorkflowFile ? `${run.link}/workflow` : ''"
|
||||
:trigger-event="run.triggerEvent"
|
||||
:locale="locale"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,13 +135,119 @@ onBeforeUnmount(() => {
|
||||
|
||||
.action-run-summary-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
align-items: stretch; /* equal-height columns so labels align at top and values at bottom */
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
background: var(--color-box-header);
|
||||
background: var(--color-console-bg);
|
||||
}
|
||||
|
||||
.action-run-summary-trigger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.action-run-summary-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.action-run-summary-trigger-content {
|
||||
margin-top: auto; /* pin trigger content to the bottom, aligned with the stat values */
|
||||
color: var(--color-text-light-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action-run-summary-user {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.action-run-summary-user .ui.avatar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-run-summary-pr {
|
||||
color: var(--color-text);
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.action-run-summary-branch-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: 200px;
|
||||
min-height: 20px;
|
||||
padding: 0 6px;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-primary-light-6);
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
|
||||
.action-run-summary-branch-label a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.action-run-summary-branch-label a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.action-run-summary-user:hover span {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.action-run-summary-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
min-width: 72px;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.action-run-summary-stat-last {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.action-run-summary-stat-divider {
|
||||
display: none;
|
||||
flex: 0 0 100%;
|
||||
margin: 8px 0;
|
||||
border-bottom: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
.action-run-summary-stat-value {
|
||||
display: block;
|
||||
margin-top: auto; /* pin value to the bottom so all column values share a baseline */
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.action-run-summary-trigger {
|
||||
flex: 0 0 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.action-run-summary-stat {
|
||||
margin-left: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.action-run-summary-stat-divider {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,8 +14,16 @@ test('LogLineMessage', () => {
|
||||
'##[debug] foo': '<span class="log-msg log-cmd-debug"><span class="log-msg-label">Debug:</span><span> foo</span></span>',
|
||||
'::error::foo': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> foo</span></span>',
|
||||
'::warning file=test.js,line=1::foo': '<span class="log-msg log-cmd-warning"><span class="log-msg-label">Warning:</span><span> foo</span></span>',
|
||||
'::error::foo%0Abar': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> foo\nbar</span></span>',
|
||||
'::error::foo%0D%0Abar': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> foo\nbar</span></span>',
|
||||
'::error::100%25 done%250A': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> 100% done%0A</span></span>',
|
||||
'::error::keep%5Dsemi%3B': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> keep%5Dsemi%3B</span></span>',
|
||||
'::group::foo%0Abar': '<span class="log-msg log-cmd-group">foo\nbar</span>',
|
||||
'##[error]foo%0Abar%3B%5D': '<span class="log-msg log-cmd-error"><span class="log-msg-label">Error:</span><span> foo\nbar;]</span></span>',
|
||||
'##[command]foo%0Abar': '<span class="log-msg log-cmd-command">foo%0Abar</span>',
|
||||
'::notice::foo': '<span class="log-msg log-cmd-notice"><span class="log-msg-label">Notice:</span><span> foo</span></span>',
|
||||
'::debug::foo': '<span class="log-msg log-cmd-debug"><span class="log-msg-label">Debug:</span><span> foo</span></span>',
|
||||
'##[command] foo': '<span class="log-msg log-cmd-command"> foo</span>',
|
||||
'[command] foo': '<span class="log-msg log-cmd-command"> foo</span>',
|
||||
|
||||
// hidden is special, it is actually skipped before creating
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {createElementFromAttrs} from '../utils/dom.ts';
|
||||
import {renderAnsi} from '../render/ansi.ts';
|
||||
import {renderAnsiInto} from '../render/ansi.ts';
|
||||
import {reactive} from 'vue';
|
||||
import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsRunStatus} from '../modules/gitea-actions.ts';
|
||||
import type {ActionsArtifact, ActionsJob, ActionsRun, ActionsStatus} from '../modules/gitea-actions.ts';
|
||||
import type {IntervalId} from '../types.ts';
|
||||
import {POST} from '../modules/fetch.ts';
|
||||
|
||||
@@ -9,7 +9,8 @@ import {POST} from '../modules/fetch.ts';
|
||||
// * Workflow command outputs log commands like "::group::the-title", "::add-matcher::...."
|
||||
// * Workflow runner parses and processes the commands to "##[group]", apply "matchers", hide secrets, etc.
|
||||
// * The reported logs are the processed logs.
|
||||
// HOWEVER: Gitea runner does not completely process those commands. Many works are done by the frontend at the moment.
|
||||
// HOWEVER: Gitea cannot, a decoded message may contain newlines and FormatLog drops them,
|
||||
// so the commands arrive here still escaped and the frontend decodes them.
|
||||
const LogLinePrefixCommandMap: Record<string, LogLineCommandName> = {
|
||||
'::group::': 'group',
|
||||
'##[group]': 'group',
|
||||
@@ -20,6 +21,7 @@ const LogLinePrefixCommandMap: Record<string, LogLineCommandName> = {
|
||||
'##[warning]': 'warning',
|
||||
'##[notice]': 'notice',
|
||||
'##[debug]': 'debug',
|
||||
'##[command]': 'command',
|
||||
'[command]': 'command',
|
||||
|
||||
// https://github.com/actions/toolkit/blob/master/docs/commands.md
|
||||
@@ -46,9 +48,9 @@ export type LogLineCommand = {
|
||||
|
||||
export function parseLogLineCommand(line: LogLine): LogLineCommand | null {
|
||||
// TODO: in the future it can be refactored to be a general parser that can parse arguments, drop the "prefix match"
|
||||
for (const prefix of Object.keys(LogLinePrefixCommandMap)) {
|
||||
for (const [prefix, commandName] of Object.entries(LogLinePrefixCommandMap)) {
|
||||
if (line.message.startsWith(prefix)) {
|
||||
return {name: LogLinePrefixCommandMap[prefix], prefix};
|
||||
return {name: commandName, prefix};
|
||||
}
|
||||
}
|
||||
// Handle ::cmd:: and ::cmd args:: format (runner may pass these through raw)
|
||||
@@ -66,34 +68,61 @@ const LogLineLabelMap: Partial<Record<LogLineCommandName, string>> = {
|
||||
'debug': 'Debug',
|
||||
};
|
||||
|
||||
function decodeLineMessage(line: LogLine, cmd: LogLineCommand | null): string {
|
||||
// TODO: for some commands (::group::), the "prefix removal" works well, for some commands with "arguments" (::remove-matcher ...::),
|
||||
// it needs to do further processing in the future (fortunately, at the moment we don't need to handle these commands)
|
||||
if (!cmd) return line.message;
|
||||
let msg = line.message.substring(cmd.prefix.length);
|
||||
if (cmd.name === 'command') return msg; // "command" is only an output tag, do not parse or escape it
|
||||
// "##[cmd]" also escapes ";" and "]" which delimit its header, "::cmd::" does not
|
||||
if (!cmd.prefix.startsWith('::')) msg = msg.replace(/%3B/g, ';').replace(/%5D/g, ']');
|
||||
// renderAnsiInto breaks a line per "\r", so "%0D%0A" is one break. "%25" last keeps "%250A" literal
|
||||
return msg.replace(/(?:%0D)?%0A/g, '\n').replace(/%0D/g, '\r').replace(/%25/g, '%');
|
||||
}
|
||||
|
||||
export function createLogLineMessage(line: LogLine, cmd: LogLineCommand | null) {
|
||||
const logMsgAttrs = {class: 'log-msg'};
|
||||
if (cmd?.name) logMsgAttrs.class += ` log-cmd-${cmd.name}`; // make it easier to add styles to some commands like "error"
|
||||
|
||||
// TODO: for some commands (::group::), the "prefix removal" works well, for some commands with "arguments" (::remove-matcher ...::),
|
||||
// it needs to do further processing in the future (fortunately, at the moment we don't need to handle these commands)
|
||||
const msgContent = cmd ? line.message.substring(cmd.prefix.length) : line.message;
|
||||
|
||||
const msgContent = decodeLineMessage(line, cmd);
|
||||
const logMsg = createElementFromAttrs('span', logMsgAttrs);
|
||||
const label = cmd ? LogLineLabelMap[cmd.name] : null;
|
||||
if (label) {
|
||||
logMsg.append(createElementFromAttrs('span', {class: 'log-msg-label'}, `${label}:`));
|
||||
const msgSpan = document.createElement('span');
|
||||
msgSpan.innerHTML = ` ${renderAnsi(msgContent.trimStart())}`;
|
||||
renderAnsiInto(msgSpan, ` ${msgContent.trimStart()}`);
|
||||
logMsg.append(msgSpan);
|
||||
} else {
|
||||
logMsg.innerHTML = renderAnsi(msgContent);
|
||||
renderAnsiInto(logMsg, msgContent);
|
||||
}
|
||||
return logMsg;
|
||||
}
|
||||
|
||||
// buildJobsByParentJobID groups jobs by their parentJobID (0 = top level).
|
||||
// Useful for rendering the reusable-workflow caller/child tree in the sidebar.
|
||||
export function buildJobsByParentJobID(jobs: ActionsJob[]): Map<number, ActionsJob[]> {
|
||||
const childrenByParent = new Map<number, ActionsJob[]>();
|
||||
for (const job of jobs) {
|
||||
const parentID = job.parentJobID || 0;
|
||||
const existing = childrenByParent.get(parentID);
|
||||
if (existing) {
|
||||
existing.push(job);
|
||||
} else {
|
||||
childrenByParent.set(parentID, [job]);
|
||||
}
|
||||
}
|
||||
return childrenByParent;
|
||||
}
|
||||
|
||||
export function createEmptyActionsRun(): ActionsRun {
|
||||
return {
|
||||
repoId: 0,
|
||||
index: 0,
|
||||
link: '',
|
||||
viewLink: '',
|
||||
title: '',
|
||||
titleHTML: '',
|
||||
status: '' as ActionsRunStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
|
||||
status: '' as ActionsStatus, // do not show the status before initialized, otherwise it would show an incorrect "error" icon
|
||||
canCancel: false,
|
||||
canApprove: false,
|
||||
canRerun: false,
|
||||
@@ -102,11 +131,16 @@ export function createEmptyActionsRun(): ActionsRun {
|
||||
done: false,
|
||||
workflowID: '',
|
||||
workflowLink: '',
|
||||
canViewWorkflowFile: true,
|
||||
isSchedule: false,
|
||||
runAttempt: 0,
|
||||
attempts: [],
|
||||
duration: '',
|
||||
triggeredAt: 0,
|
||||
triggerEvent: '',
|
||||
pullRequest: null,
|
||||
jobs: [] as Array<ActionsJob>,
|
||||
jobSummaries: [],
|
||||
commit: {
|
||||
localeCommit: '',
|
||||
localePushedBy: '',
|
||||
@@ -115,6 +149,7 @@ export function createEmptyActionsRun(): ActionsRun {
|
||||
pusher: {
|
||||
displayName: '',
|
||||
link: '',
|
||||
avatarLink: '',
|
||||
},
|
||||
branch: {
|
||||
name: '',
|
||||
@@ -125,7 +160,7 @@ export function createEmptyActionsRun(): ActionsRun {
|
||||
};
|
||||
}
|
||||
|
||||
export function createActionRunViewStore(actionsUrl: string, runId: number) {
|
||||
export function createActionRunViewStore(viewUrl: string) {
|
||||
let loadingAbortController: AbortController | null = null;
|
||||
let intervalID: IntervalId | null = null;
|
||||
const viewData = reactive({
|
||||
@@ -137,8 +172,7 @@ export function createActionRunViewStore(actionsUrl: string, runId: number) {
|
||||
const abortController = new AbortController();
|
||||
loadingAbortController = abortController;
|
||||
try {
|
||||
const url = `${actionsUrl}/runs/${runId}`;
|
||||
const resp = await POST(url, {signal: abortController.signal, data: {}});
|
||||
const resp = await POST(viewUrl, {signal: abortController.signal, data: {}});
|
||||
const runResp = await resp.json();
|
||||
if (loadingAbortController !== abortController) return;
|
||||
|
||||
@@ -158,7 +192,7 @@ export function createActionRunViewStore(actionsUrl: string, runId: number) {
|
||||
}
|
||||
};
|
||||
|
||||
return reactive({
|
||||
return {
|
||||
viewData,
|
||||
|
||||
async startPollingCurrentRun() {
|
||||
@@ -175,7 +209,7 @@ export function createActionRunViewStore(actionsUrl: string, runId: number) {
|
||||
clearInterval(intervalID);
|
||||
intervalID = null;
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export type ActionRunViewStore = ReturnType<typeof createActionRunViewStore>;
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<!-- Keep in sync with templates/repo/icons/action_status.tmpl.
|
||||
action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, cancelling, unknown.
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import {computed} from 'vue';
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import {getActionStatusIcon, type ActionStatusIconVariant} from '../modules/action-status-icon.ts';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'cancelling' | 'unknown',
|
||||
size?: number,
|
||||
className?: string,
|
||||
localeStatus?: string,
|
||||
iconVariant?: ActionStatusIconVariant,
|
||||
}>(), {
|
||||
size: 16,
|
||||
className: '',
|
||||
localeStatus: undefined,
|
||||
iconVariant: '',
|
||||
});
|
||||
|
||||
const icon = computed(() => getActionStatusIcon(props.status, props.iconVariant));
|
||||
const iconClass = computed(() => {
|
||||
const classes = [icon.value.colorClass, props.className];
|
||||
if (props.status === 'running') classes.push('rotate-clockwise');
|
||||
return classes.filter(Boolean).join(' ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SvgIcon v-if="status" :name="icon.name" :class="iconClass" :size="size" :data-tooltip-content="localeStatus ?? status"/>
|
||||
</template>
|
||||
@@ -1,21 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
// TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
|
||||
import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
|
||||
import {onMounted, shallowRef} from 'vue';
|
||||
import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
|
||||
import {computed, onBeforeUnmount, onMounted} from 'vue';
|
||||
import tippy, {createSingleton} from 'tippy.js';
|
||||
import type {CreateSingletonInstance, Instance} from 'tippy.js';
|
||||
import {getCurrentLocale} from '../utils.ts';
|
||||
|
||||
defineProps<{
|
||||
type HeatmapValue = {date: Date; count: number};
|
||||
type HeatmapCell = {date: Date; colorIndex: number; ariaLabel: string; tooltip: string};
|
||||
type MonthLabel = {monthIdx: number; weekIdx: number};
|
||||
|
||||
const props = defineProps<{
|
||||
values: HeatmapValue[];
|
||||
locale: {
|
||||
textTotalContributions: string;
|
||||
heatMapLocale: Partial<HeatmapLocale>;
|
||||
heatMapLocale: {months: string[]; days: string[]; on: string; more: string; less: string};
|
||||
noDataText: string;
|
||||
tooltipUnit: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const colorRange = [
|
||||
'var(--color-secondary-alpha-60)',
|
||||
'var(--color-secondary-alpha-60)',
|
||||
'var(--color-primary-light-4)',
|
||||
'var(--color-primary-light-2)',
|
||||
@@ -24,21 +27,113 @@ const colorRange = [
|
||||
'var(--color-primary-dark-4)',
|
||||
];
|
||||
|
||||
const endDate = shallowRef(new Date());
|
||||
const squareSize = 10;
|
||||
const squareBorder = 2;
|
||||
const cellSize = squareSize + squareBorder;
|
||||
const daysInWeek = 7;
|
||||
const trailingDays = 365;
|
||||
const gridLeft = Math.ceil(squareSize * 2.5);
|
||||
const gridTop = squareSize + squareSize / 2;
|
||||
|
||||
onMounted(() => {
|
||||
// work around issue with first legend color being rendered twice and legend cut off
|
||||
const legend = document.querySelector<HTMLElement>('.vch__external-legend-wrapper')!;
|
||||
legend.setAttribute('viewBox', '12 0 80 10');
|
||||
legend.style.marginRight = '-12px';
|
||||
const now = new Date();
|
||||
|
||||
function dateKey(d: Date): string {
|
||||
return `${d.getFullYear()}${String(d.getMonth()).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function shiftDate(d: Date, days: number): Date {
|
||||
const out = new Date(d);
|
||||
out.setDate(out.getDate() + days);
|
||||
return out;
|
||||
}
|
||||
|
||||
const grid = computed(() => {
|
||||
const start = shiftDate(now, -trailingDays);
|
||||
const padStart = start.getDay();
|
||||
const padEnd = daysInWeek - 1 - now.getDay();
|
||||
const weekCount = (trailingDays + 1 + padStart + padEnd) / daysInWeek;
|
||||
|
||||
const maxCount = props.values.length ? Math.max(...props.values.map((v) => v.count)) : 0;
|
||||
const max = maxCount > 0 ? Math.ceil(maxCount / 5 * 4) : 1;
|
||||
|
||||
const activities = new Map<string, {count: number; colorIndex: number}>();
|
||||
for (const {date, count} of props.values) {
|
||||
const colorIndex = count >= max ? 4 : Math.max(1, Math.ceil((count / max) * 3));
|
||||
activities.set(dateKey(date), {count, colorIndex});
|
||||
}
|
||||
|
||||
const {on} = props.locale.heatMapLocale;
|
||||
const {noDataText, tooltipUnit} = props.locale;
|
||||
const currentLocale = getCurrentLocale();
|
||||
|
||||
const cursorStart = shiftDate(start, -padStart);
|
||||
const cursor = new Date(cursorStart.getFullYear(), cursorStart.getMonth(), cursorStart.getDate());
|
||||
const calendar: HeatmapCell[][] = [];
|
||||
for (let w = 0; w < weekCount; w++) {
|
||||
const week: HeatmapCell[] = [];
|
||||
for (let d = 0; d < daysInWeek; d++) {
|
||||
const hit = activities.get(dateKey(cursor));
|
||||
const dateStr = cursor.toLocaleDateString(currentLocale, {year: 'numeric', month: 'short', day: 'numeric'});
|
||||
const head = hit ? `${hit.count} ${tooltipUnit}` : noDataText;
|
||||
week.push({
|
||||
date: new Date(cursor),
|
||||
colorIndex: hit ? hit.colorIndex : 0,
|
||||
ariaLabel: `${head} ${on} ${dateStr}`,
|
||||
tooltip: `<b>${head}</b> ${on} ${dateStr}`,
|
||||
});
|
||||
cursor.setDate(cursor.getDate() + 1);
|
||||
}
|
||||
calendar.push(week);
|
||||
}
|
||||
|
||||
const monthLabels: MonthLabel[] = [];
|
||||
for (let w = 1; w < calendar.length; w++) {
|
||||
const prev = calendar[w - 1][0].date;
|
||||
const curr = calendar[w][0].date;
|
||||
if (prev.getMonth() !== curr.getMonth()) {
|
||||
monthLabels.push({monthIdx: curr.getMonth(), weekIdx: w});
|
||||
}
|
||||
}
|
||||
|
||||
const width = gridLeft + (cellSize * weekCount) + squareBorder;
|
||||
const height = gridTop + (cellSize * daysInWeek);
|
||||
return {calendar, monthLabels, width, height};
|
||||
});
|
||||
|
||||
function handleDayClick(e: Event & {date: Date}) {
|
||||
// Reset filter if same date is clicked
|
||||
const legendViewBox = `${cellSize} 0 ${squareSize * (colorRange.length + 2)} ${squareSize}`;
|
||||
|
||||
const cellInstances = new Map<Element, Instance>();
|
||||
let singleton: CreateSingletonInstance | null = null;
|
||||
|
||||
onMounted(() => {
|
||||
singleton = createSingleton([], {
|
||||
overrides: [],
|
||||
moveTransition: 'transform 0.1s ease-out',
|
||||
allowHTML: true,
|
||||
theme: 'tooltip',
|
||||
role: 'tooltip',
|
||||
placement: 'top',
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
singleton?.destroy();
|
||||
for (const instance of cellInstances.values()) instance.destroy();
|
||||
cellInstances.clear();
|
||||
});
|
||||
|
||||
function lazyInitTooltip(e: MouseEvent) {
|
||||
const el = e.target as Element;
|
||||
if (!singleton || cellInstances.has(el) || !el.classList.contains('heatmap-day')) return;
|
||||
cellInstances.set(el, tippy(el, {content: el.getAttribute('data-tooltip')!}));
|
||||
singleton.setInstances([...cellInstances.values()]);
|
||||
}
|
||||
|
||||
function handleDayClick(date: Date) {
|
||||
const params = new URLSearchParams(document.location.search);
|
||||
const queryDate = params.get('date');
|
||||
// Timezone has to be stripped because toISOString() converts to UTC
|
||||
const clickedDate = new Date(e.date.getTime() - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
|
||||
const clickedDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
|
||||
|
||||
if (queryDate && queryDate === clickedDate) {
|
||||
params.delete('date');
|
||||
@@ -53,16 +148,63 @@ function handleDayClick(e: Event & {date: Date}) {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<calendar-heatmap
|
||||
:locale="locale.heatMapLocale"
|
||||
:no-data-text="locale.noDataText"
|
||||
:tooltip-unit="locale.tooltipUnit"
|
||||
:end-date="endDate"
|
||||
:values="values"
|
||||
:range-color="colorRange"
|
||||
@day-click="handleDayClick($event)"
|
||||
:tippy-props="{theme: 'tooltip'}"
|
||||
>
|
||||
<template #vch__legend-left>{{ locale.textTotalContributions }}</template>
|
||||
</calendar-heatmap>
|
||||
<div>
|
||||
<svg class="heatmap-svg" :viewBox="`0 0 ${grid.width} ${grid.height}`">
|
||||
<g class="heatmap-month-labels" :transform="`translate(${gridLeft}, 0)`">
|
||||
<text
|
||||
v-for="m in grid.monthLabels"
|
||||
:key="m.weekIdx"
|
||||
class="heatmap-month-label"
|
||||
:x="cellSize * m.weekIdx"
|
||||
:y="cellSize - squareBorder"
|
||||
>
|
||||
{{ locale.heatMapLocale.months[m.monthIdx] }}
|
||||
</text>
|
||||
</g>
|
||||
<g class="heatmap-day-labels" :transform="`translate(0, ${gridTop})`">
|
||||
<text class="heatmap-day-label" :x="0" :y="20">{{ locale.heatMapLocale.days[1] }}</text>
|
||||
<text class="heatmap-day-label" :x="0" :y="44">{{ locale.heatMapLocale.days[3] }}</text>
|
||||
<text class="heatmap-day-label" :x="0" :y="69">{{ locale.heatMapLocale.days[5] }}</text>
|
||||
</g>
|
||||
<g class="heatmap-grid" :transform="`translate(${gridLeft}, ${gridTop})`" @mouseover="lazyInitTooltip">
|
||||
<g
|
||||
v-for="(week, w) in grid.calendar"
|
||||
:key="w"
|
||||
class="heatmap-week"
|
||||
:transform="`translate(${w * cellSize}, 0)`"
|
||||
>
|
||||
<template v-for="(day, d) in week" :key="d">
|
||||
<rect
|
||||
v-if="day.date < now"
|
||||
class="heatmap-day"
|
||||
:transform="`translate(0, ${d * cellSize})`"
|
||||
:width="squareSize"
|
||||
:height="squareSize"
|
||||
:style="{fill: colorRange[day.colorIndex]}"
|
||||
:aria-label="day.ariaLabel"
|
||||
:data-tooltip="day.tooltip"
|
||||
@click="handleDayClick(day.date)"
|
||||
/>
|
||||
</template>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="heatmap-footer">
|
||||
<div>{{ locale.textTotalContributions }}</div>
|
||||
<div class="heatmap-legend">
|
||||
<div>{{ locale.heatMapLocale.less }}</div>
|
||||
<svg class="heatmap-legend-svg" :viewBox="legendViewBox" :height="squareSize">
|
||||
<rect
|
||||
v-for="(color, i) in colorRange"
|
||||
:key="i"
|
||||
:width="squareSize"
|
||||
:height="squareSize"
|
||||
:x="(i + 1) * cellSize"
|
||||
:style="{fill: color}"
|
||||
/>
|
||||
</svg>
|
||||
<div>{{ locale.heatMapLocale.more }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,63 +1,40 @@
|
||||
<script lang="ts" setup>
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import {GET} from '../modules/fetch.ts';
|
||||
import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
|
||||
import {computed, onMounted, shallowRef} from 'vue';
|
||||
import {computed} from 'vue';
|
||||
import type {Issue} from '../types.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
repoLink: string,
|
||||
loadIssueInfoUrl: string,
|
||||
issue?: Issue | null,
|
||||
renderedLabels?: string,
|
||||
errorMessage?: string,
|
||||
}>();
|
||||
|
||||
const loading = shallowRef(false);
|
||||
const issue = shallowRef<Issue | null>(null);
|
||||
const renderedLabels = shallowRef('');
|
||||
const errorMessage = shallowRef('');
|
||||
|
||||
const createdAt = computed(() => {
|
||||
if (!issue?.value) return '';
|
||||
return new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
|
||||
if (!props.issue) return '';
|
||||
return new Date(props.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
|
||||
});
|
||||
|
||||
const body = computed(() => {
|
||||
if (!issue?.value) return '';
|
||||
const body = issue.value.body.replace(/\n+/g, ' ');
|
||||
if (!props.issue) return '';
|
||||
const body = props.issue.body.replace(/\n+/g, ' ');
|
||||
return body.length > 85 ? `${body.substring(0, 85)}…` : body;
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
errorMessage.value = '';
|
||||
try {
|
||||
const resp = await GET(props.loadIssueInfoUrl);
|
||||
if (!resp.ok) {
|
||||
errorMessage.value = resp.status ? resp.statusText : 'Unknown network error';
|
||||
return;
|
||||
}
|
||||
const respJson = await resp.json();
|
||||
issue.value = respJson.convertedIssue;
|
||||
renderedLabels.value = respJson.renderedLabels;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tw-p-4">
|
||||
<div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
|
||||
<div v-else-if="issue" class="tw-flex tw-flex-col tw-gap-2">
|
||||
<div v-if="issue" class="tw-flex tw-flex-col tw-gap-2">
|
||||
<div class="tw-text-12">
|
||||
<a :href="repoLink" class="muted">{{ issue.repository.full_name }}</a>
|
||||
<a :href="issue.repository.html_url" class="muted">{{ issue.repository.full_name }}</a>
|
||||
on {{ createdAt }}
|
||||
</div>
|
||||
<div class="flex-text-block">
|
||||
<svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
|
||||
<span class="issue-title tw-font-semibold tw-break-anywhere">
|
||||
<a :href="issue.html_url" class="issue-title tw-font-semibold tw-break-anywhere muted">
|
||||
{{ issue.title }}
|
||||
<span class="index">#{{ issue.number }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="body">{{ body }}</div>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
|
||||
@@ -3,9 +3,13 @@ import {computed, onMounted, onUnmounted, shallowRef, watch} from 'vue';
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import {toggleElem} from '../utils/dom.ts';
|
||||
|
||||
const {pageData} = window.config;
|
||||
const props = defineProps<{
|
||||
mergeFormProps: any, // TODO: this is a huge object, need to be refactored in the future
|
||||
}>();
|
||||
|
||||
const mergeForm = pageData.pullRequestMergeForm!;
|
||||
const mergeStyleManuallyMerged = 'manually-merged';
|
||||
|
||||
const mergeForm = props.mergeFormProps;
|
||||
|
||||
const mergeTitleFieldValue = shallowRef('');
|
||||
const mergeMessageFieldValue = shallowRef('');
|
||||
@@ -27,10 +31,18 @@ const showMergeStyleMenu = shallowRef(false);
|
||||
const showActionForm = shallowRef(false);
|
||||
|
||||
const mergeButtonStyleClass = computed(() => {
|
||||
if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
|
||||
if (mergeForm.allOverridableChecksOk) return 'primary';
|
||||
return autoMergeWhenSucceed.value ? 'primary' : 'red';
|
||||
});
|
||||
|
||||
const mergeSelectStyleClass = computed(() => {
|
||||
if (mergeForm.emptyCommit) return '';
|
||||
if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
|
||||
if (!mergeForm.allOverridableChecksOk) return 'red';
|
||||
return 'primary';
|
||||
});
|
||||
|
||||
const forceMerge = computed(() => {
|
||||
return mergeForm.canMergeNow && !mergeForm.allOverridableChecksOk;
|
||||
});
|
||||
@@ -113,30 +125,32 @@ function clearMergeMessage() {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field" v-if="mergeStyle === 'manually-merged'">
|
||||
<div class="field" v-if="mergeStyle === mergeStyleManuallyMerged">
|
||||
<input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId">
|
||||
</div>
|
||||
|
||||
<button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
|
||||
{{ mergeStyleDetail.textDoMerge }}
|
||||
<template v-if="autoMergeWhenSucceed">
|
||||
{{ mergeForm.textAutoMergeButtonWhenSucceed }}
|
||||
</template>
|
||||
</button>
|
||||
<div class="flex-text-block tw-gap-3">
|
||||
<button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
|
||||
{{ mergeStyleDetail.textDoMerge }}
|
||||
<template v-if="autoMergeWhenSucceed">
|
||||
{{ mergeForm.textAutoMergeButtonWhenSucceed }}
|
||||
</template>
|
||||
</button>
|
||||
|
||||
<button class="ui button merge-cancel" @click="toggleActionForm(false)">
|
||||
{{ mergeForm.textCancel }}
|
||||
</button>
|
||||
<button class="ui button merge-cancel" type="button" @click="toggleActionForm(false)">
|
||||
{{ mergeForm.textCancel }}
|
||||
</button>
|
||||
|
||||
<div class="ui checkbox tw-ml-1" v-if="mergeForm.isPullBranchDeletable">
|
||||
<input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
|
||||
<label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
|
||||
<div class="ui checkbox" v-if="mergeForm.isPullBranchDeletable">
|
||||
<input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
|
||||
<label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="!showActionForm" class="tw-flex">
|
||||
<!-- the merge button -->
|
||||
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
|
||||
<div class="ui buttons merge-button" :class="mergeSelectStyleClass" @click="toggleActionForm(true)">
|
||||
<button class="ui button">
|
||||
<svg-icon name="octicon-git-merge"/>
|
||||
<span class="button-text">
|
||||
|
||||
@@ -1,26 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import ActionRunStatus from './ActionRunStatus.vue';
|
||||
import {toRefs} from 'vue';
|
||||
import ActionStatusIcon from './ActionStatusIcon.vue';
|
||||
import {computed, onBeforeUnmount, ref, toRefs, watch} from 'vue';
|
||||
import {resetActionFavicon, syncActionRunFavicon} from '../modules/favicon-status.ts';
|
||||
import {POST, DELETE} from '../modules/fetch.ts';
|
||||
import ActionRunSummaryView from './ActionRunSummaryView.vue';
|
||||
import ActionRunJobView from './ActionRunJobView.vue';
|
||||
import {createActionRunViewStore} from "./ActionRunView.ts";
|
||||
import type {ActionsJob, ActionsRunAttempt} from '../modules/gitea-actions.ts';
|
||||
import {buildJobsByParentJobID, createActionRunViewStore} from './ActionRunView.ts';
|
||||
import {buildArtifactTooltipHtml} from './ActionRunArtifacts.ts';
|
||||
|
||||
defineOptions({
|
||||
name: 'RepoActionView',
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
runId: number;
|
||||
jobId: number;
|
||||
actionsUrl: string;
|
||||
actionsViewUrl: string;
|
||||
locale: Record<string, any>;
|
||||
}>();
|
||||
|
||||
const locale = props.locale;
|
||||
const store = createActionRunViewStore(props.actionsUrl, props.runId);
|
||||
const {currentRun: run , runArtifacts: artifacts} = toRefs(store.viewData);
|
||||
const store = createActionRunViewStore(props.actionsViewUrl);
|
||||
const {currentRun: run, runArtifacts: artifacts} = toRefs(store.viewData);
|
||||
const visibleJobSummaries = computed(() => {
|
||||
const summaries = run.value.jobSummaries || [];
|
||||
if (!props.jobId) return summaries;
|
||||
return summaries.filter((summary) => summary.jobId === props.jobId);
|
||||
});
|
||||
|
||||
type JobListItem = {
|
||||
job: ActionsJob;
|
||||
depth: number;
|
||||
};
|
||||
|
||||
// Caller jobs default to collapsed. Membership in this set means "user has manually expanded this caller"
|
||||
const expandedJobIDs = ref(new Set<number>());
|
||||
|
||||
function toggleExpandedJob(jobID: number) {
|
||||
const next = new Set(expandedJobIDs.value);
|
||||
if (next.has(jobID)) {
|
||||
next.delete(jobID);
|
||||
} else {
|
||||
next.add(jobID);
|
||||
}
|
||||
expandedJobIDs.value = next;
|
||||
}
|
||||
|
||||
// When a child job is currently selected, force-expand the chain of caller ancestors
|
||||
const forcedExpandedJobIDs = computed(() => {
|
||||
const expanded = new Set<number>();
|
||||
if (!props.jobId) return expanded;
|
||||
const jobsByID = new Map((run.value.jobs || []).map((job) => [job.id, job]));
|
||||
let cur = jobsByID.get(props.jobId);
|
||||
while (cur?.parentJobID) {
|
||||
expanded.add(cur.parentJobID);
|
||||
cur = jobsByID.get(cur.parentJobID);
|
||||
}
|
||||
return expanded;
|
||||
});
|
||||
|
||||
function isJobCollapsed(jobID: number) {
|
||||
return !expandedJobIDs.value.has(jobID) && !forcedExpandedJobIDs.value.has(jobID);
|
||||
}
|
||||
|
||||
const visibleJobListItems = computed<JobListItem[]>(() => {
|
||||
const jobs = [...(run.value.jobs || [])].sort((a, b) => a.id - b.id);
|
||||
const childrenByParent = buildJobsByParentJobID(jobs);
|
||||
|
||||
const result: JobListItem[] = [];
|
||||
const stack: Array<{job: ActionsJob; depth: number}> = [];
|
||||
const top = childrenByParent.get(0) || [];
|
||||
for (let i = top.length - 1; i >= 0; i--) stack.push({job: top[i], depth: 0});
|
||||
|
||||
while (stack.length > 0) {
|
||||
const {job, depth} = stack.pop()!;
|
||||
const children = childrenByParent.get(job.id) || [];
|
||||
result.push({job, depth});
|
||||
if (children.length > 0 && isJobCollapsed(job.id)) continue;
|
||||
for (let i = children.length - 1; i >= 0; i--) stack.push({job: children[i], depth: depth + 1});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
function formatAttemptTitle(attempt: ActionsRunAttempt) {
|
||||
return attempt.latest ? `${locale.latestAttempt} #${attempt.attempt}` : `${locale.attempt} #${attempt.attempt}`;
|
||||
}
|
||||
|
||||
function formatCurrentAttemptTitle(attempt: ActionsRunAttempt) {
|
||||
return attempt.latest ? `${locale.latest} #${attempt.attempt}` : formatAttemptTitle(attempt);
|
||||
}
|
||||
|
||||
const backLink = computed(() => {
|
||||
if (run.value.pullRequest) {
|
||||
return {href: run.value.pullRequest.link, prefix: locale.backToPullRequest, name: run.value.pullRequest.index};
|
||||
}
|
||||
if (run.value.workflowLink) {
|
||||
return {href: run.value.workflowLink, prefix: locale.backToWorkflow, name: run.value.workflowID.replace(/\.(yml|yaml)$/i, '')};
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
function buildArtifactLink(name: string) {
|
||||
const searchString = run.value.runAttempt > 0 ? `?attempt=${run.value.runAttempt}` : '';
|
||||
return `${run.value.link}/artifacts/${encodeURIComponent(name)}${searchString}`;
|
||||
}
|
||||
|
||||
function cancelRun() {
|
||||
POST(`${run.value.link}/cancel`);
|
||||
@@ -32,28 +116,41 @@ function approveRun() {
|
||||
|
||||
async function deleteArtifact(name: string) {
|
||||
if (!window.confirm(locale.confirmDeleteArtifact.replace('%s', name))) return;
|
||||
await DELETE(`${run.value.link}/artifacts/${encodeURIComponent(name)}`);
|
||||
await DELETE(buildArtifactLink(name));
|
||||
await store.forceReloadCurrentRun();
|
||||
}
|
||||
|
||||
watch(() => run.value.status, (status) => {
|
||||
syncActionRunFavicon(status);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resetActionFavicon();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- make the view container full width to make users easier to read logs -->
|
||||
<div class="ui fluid container">
|
||||
<div class="action-view-header">
|
||||
<a v-if="backLink" class="action-view-back silenced" :href="backLink.href">
|
||||
<SvgIcon name="octicon-arrow-left" :size="14"/>
|
||||
<span>{{ backLink.prefix }} <span class="action-view-back-name">{{ backLink.name }}</span></span>
|
||||
</a>
|
||||
<div class="action-info-summary">
|
||||
<div class="action-info-summary-title">
|
||||
<ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/>
|
||||
<ActionStatusIcon :locale-status="locale.status[run.status]" :status="run.status" :size="22" icon-variant="circle-fill"/>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<h2 class="action-info-summary-title-text" v-html="run.titleHTML"/>
|
||||
<span class="action-info-summary-title-index">#{{ run.index }}</span>
|
||||
</div>
|
||||
<div class="flex-text-block tw-shrink-0 tw-flex-wrap">
|
||||
<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">
|
||||
<button class="ui small compact button tw-text-red" @click="cancelRun()" v-else-if="run.canCancel">
|
||||
{{ locale.cancel }}
|
||||
</button>
|
||||
<template v-else-if="run.canRerun">
|
||||
<template v-if="run.canRerun">
|
||||
<div v-if="run.canRerunFailed" class="ui small compact buttons">
|
||||
<button class="ui basic small compact button link-action" :data-url="`${run.link}/rerun-failed`">
|
||||
{{ locale.rerun_failed }}
|
||||
@@ -71,99 +168,173 @@ async function deleteArtifact(name: string) {
|
||||
{{ locale.rerun_all }}
|
||||
</button>
|
||||
</template>
|
||||
<div v-if="run.attempts.length > 1" class="ui dropdown basic small compact button">
|
||||
<div class="flex-text-inline">
|
||||
<SvgIcon name="octicon-history" :size="14"/>
|
||||
<span>{{ formatCurrentAttemptTitle(run.attempts.find((attempt) => attempt.current)!) }}</span>
|
||||
</div>
|
||||
<SvgIcon name="octicon-triangle-down" :size="14" class="dropdown icon"/>
|
||||
<div class="menu">
|
||||
<a
|
||||
v-for="attempt in run.attempts"
|
||||
:key="attempt.attempt"
|
||||
class="item tw-flex tw-flex-col tw-gap-2"
|
||||
:class="attempt.current ? 'selected' : ''"
|
||||
:href="attempt.link"
|
||||
>
|
||||
<div class="flex-text-block">
|
||||
<SvgIcon name="octicon-check" :size="14" :class="{'tw-invisible': !Boolean(attempt.current)}"/>
|
||||
<strong class="tw-text-sm gt-ellipsis">{{ formatAttemptTitle(attempt) }}</strong>
|
||||
</div>
|
||||
<div class="flex-text-block tw-pl-[20px]">
|
||||
<span class="flex-text-inline tw-flex-shrink-0">
|
||||
<ActionStatusIcon :locale-status="locale.status[attempt.status]" :status="attempt.status" :size="14" class="flex-text-block" icon-variant="circle-fill"/>
|
||||
<span>{{ locale.status[attempt.status] }}</span>
|
||||
</span>
|
||||
<span>•</span>
|
||||
<relative-time :datetime="attempt.triggeredAt" prefix=""/>
|
||||
<span>•</span>
|
||||
<span class="gt-ellipsis">{{ attempt.triggerUserName }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-commit-summary">
|
||||
<span><a class="muted" :href="run.workflowLink"><b>{{ run.workflowID }}</b></a>:</span>
|
||||
<template v-if="run.isSchedule">
|
||||
{{ locale.scheduled }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ locale.commit }}
|
||||
<a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a>
|
||||
{{ locale.pushedBy }}
|
||||
<a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a>
|
||||
</template>
|
||||
<span class="ui label tw-max-w-full" v-if="run.commit.shortSHA">
|
||||
<span v-if="run.commit.branch.isDeleted" class="gt-ellipsis tw-line-through" :data-tooltip-content="run.commit.branch.name">{{ run.commit.branch.name }}</span>
|
||||
<a v-else class="gt-ellipsis" :href="run.commit.branch.link" :data-tooltip-content="run.commit.branch.name">{{ run.commit.branch.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-view-body">
|
||||
<div class="action-view-left">
|
||||
<!-- summary -->
|
||||
<a class="job-brief-item silenced" :href="run.link" :class="!props.jobId ? 'selected' : ''">
|
||||
<SvgIcon name="octicon-list-unordered"/>
|
||||
<span class="gt-ellipsis">{{ locale.summary }}</span>
|
||||
</a>
|
||||
<div class="flex-items-block action-view-sidebar-list">
|
||||
<a class="item silenced" :href="run.viewLink" :class="!props.jobId ? 'selected' : ''">
|
||||
<SvgIcon name="octicon-home"/>
|
||||
<span class="gt-ellipsis">{{ locale.summary }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- jobs list -->
|
||||
<div class="ui divider"/>
|
||||
<div class="left-list-header">{{ locale.allJobs }}</div>
|
||||
<!-- unlike other lists, the items have paddings already -->
|
||||
<ul class="ui relaxed list flex-items-block tw-p-0">
|
||||
<li class="item job-brief-item" v-for="job in run.jobs" :key="job.id" :class="props.jobId === job.id ? 'selected' : ''">
|
||||
<a class="tw-contents silenced" :href="run.link+'/jobs/'+job.id">
|
||||
<ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/>
|
||||
<span class="tw-flex-1 gt-ellipsis">{{ job.name }}</span>
|
||||
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${job.id}/rerun`" v-if="job.canRerun"/>
|
||||
<span>{{ job.duration }}</span>
|
||||
<div class="flex-items-block action-view-sidebar-list">
|
||||
<template
|
||||
v-for="item in visibleJobListItems"
|
||||
:key="item.job.id"
|
||||
>
|
||||
<!-- Callers have no log page of their own; the whole row toggles expansion
|
||||
(matches GitHub Actions, where caller rows are not navigation targets). -->
|
||||
<button
|
||||
v-if="item.job.isReusableCaller"
|
||||
type="button"
|
||||
class="item caller-row-toggle"
|
||||
:class="{'selected': props.jobId === item.job.id}"
|
||||
:style="{paddingLeft: `${10 + item.depth * 16}px`}"
|
||||
@click="toggleExpandedJob(item.job.id)"
|
||||
:title="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
|
||||
:aria-label="isJobCollapsed(item.job.id) ? locale.expandCallerJobs : locale.collapseCallerJobs"
|
||||
:aria-expanded="!isJobCollapsed(item.job.id)"
|
||||
>
|
||||
<ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
|
||||
<span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
|
||||
<span class="job-duration">{{ item.job.duration }}</span>
|
||||
<SvgIcon name="octicon-chevron-down" :size="14" class="job-brief-toggle-icon" :class="{'collapsed': isJobCollapsed(item.job.id)}"/>
|
||||
</button>
|
||||
<a
|
||||
v-else
|
||||
class="item silenced"
|
||||
:class="{'selected': props.jobId === item.job.id}"
|
||||
:style="{paddingLeft: `${10 + item.depth * 16}px`}"
|
||||
:href="item.job.link"
|
||||
>
|
||||
<ActionStatusIcon :locale-status="locale.status[item.job.status]" :status="item.job.status" icon-variant="circle-fill"/>
|
||||
<span class="tw-min-w-0 gt-ellipsis">{{ item.job.name }}</span>
|
||||
<SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-rerun-button tw-cursor-pointer link-action interact-fg" :data-url="`${run.link}/jobs/${item.job.id}/rerun`" v-if="item.job.canRerun"/>
|
||||
<span class="job-duration">{{ item.job.duration }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- artifacts list -->
|
||||
<template v-if="artifacts.length > 0">
|
||||
<div class="ui divider"/>
|
||||
<div class="left-list-header">{{ locale.artifactsTitle }} ({{ artifacts.length }})</div>
|
||||
<ul class="ui relaxed list flex-items-block">
|
||||
<li class="item" v-for="artifact in artifacts" :key="artifact.name">
|
||||
<div class="flex-items-block action-view-sidebar-list">
|
||||
<div class="item" v-for="artifact in artifacts" :key="artifact.name">
|
||||
<template v-if="artifact.status !== 'expired'">
|
||||
<a class="tw-flex-1 flex-text-block" target="_blank" :href="run.link+'/artifacts/'+artifact.name">
|
||||
<SvgIcon name="octicon-file" class="tw-text-text"/>
|
||||
<a
|
||||
class="tw-flex-1 tw-min-w-0 flex-text-block silenced" target="_blank"
|
||||
:href="buildArtifactLink(artifact.name)"
|
||||
:data-tooltip-content="buildArtifactTooltipHtml(artifact, locale.artifactExpiresAt)"
|
||||
data-tooltip-render="html"
|
||||
data-tooltip-placement="top-end"
|
||||
>
|
||||
<SvgIcon name="octicon-file" class="tw-text-text-light"/>
|
||||
<span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
|
||||
</a>
|
||||
<a v-if="run.canDeleteArtifact" @click="deleteArtifact(artifact.name)">
|
||||
<SvgIcon name="octicon-trash" class="tw-text-text"/>
|
||||
<a v-if="run.canDeleteArtifact" class="silenced" @click="deleteArtifact(artifact.name)">
|
||||
<SvgIcon name="octicon-trash"/>
|
||||
</a>
|
||||
</template>
|
||||
<span v-else class="flex-text-block tw-flex-1 tw-text-grey-light">
|
||||
<SvgIcon name="octicon-file"/>
|
||||
<span
|
||||
v-else class="flex-text-block tw-flex-1 tw-min-w-0 tw-text-text-light-2"
|
||||
:data-tooltip-content="buildArtifactTooltipHtml(artifact, locale.artifactExpiredAt)"
|
||||
data-tooltip-render="html"
|
||||
data-tooltip-placement="top-end"
|
||||
>
|
||||
<SvgIcon name="octicon-file-removed"/>
|
||||
<span class="tw-flex-1 gt-ellipsis">{{ artifact.name }}</span>
|
||||
<span class="ui label tw-text-grey-light tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
|
||||
<span class="ui label tw-flex-shrink-0">{{ locale.artifactExpired }}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- run details -->
|
||||
<div class="ui divider"/>
|
||||
<div class="left-list-header">{{ locale.runDetails }}</div>
|
||||
<ul class="ui relaxed list">
|
||||
<li class="item">
|
||||
<a class="flex-text-block" :href="`${run.link}/workflow`">
|
||||
<div class="flex-items-block action-view-sidebar-list">
|
||||
<div class="item">
|
||||
<a v-if="run.canViewWorkflowFile" class="flex-text-block silenced" :href="`${run.link}/workflow`">
|
||||
<SvgIcon name="octicon-file-code" class="tw-text-text"/>
|
||||
<span class="gt-ellipsis">{{ locale.workflowFile }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<span v-else class="flex-text-block silenced" :data-tooltip-content="locale.workflowFileNoPermission">
|
||||
<SvgIcon name="octicon-lock" class="tw-text-text"/>
|
||||
<span class="gt-ellipsis">{{ locale.workflowFileNoPermission }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-view-right">
|
||||
<ActionRunSummaryView
|
||||
v-if="!props.jobId"
|
||||
:store="store"
|
||||
:locale="locale"
|
||||
/>
|
||||
<ActionRunJobView
|
||||
v-else
|
||||
:store="store"
|
||||
:locale="locale"
|
||||
:run-id="props.runId"
|
||||
:job-id="props.jobId"
|
||||
:actions-url="props.actionsUrl"
|
||||
/>
|
||||
<div class="action-view-right-panel">
|
||||
<ActionRunSummaryView
|
||||
v-if="!props.jobId"
|
||||
:store="store"
|
||||
:locale="locale"
|
||||
:artifact-count="artifacts.length"
|
||||
/>
|
||||
<ActionRunJobView
|
||||
v-else
|
||||
:store="store"
|
||||
:locale="locale"
|
||||
:actions-view-url="props.actionsViewUrl"
|
||||
:job-id="props.jobId"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="visibleJobSummaries.length" class="action-view-right-panel job-summary-section">
|
||||
<div class="job-summary-section-header">
|
||||
{{ locale.jobSummaries }}
|
||||
</div>
|
||||
<div class="job-summary-list">
|
||||
<div v-for="s in visibleJobSummaries" :key="s.jobId" class="job-summary-item">
|
||||
<div class="job-summary-header">
|
||||
<strong class="gt-ellipsis">{{ s.jobName || `Job ${s.jobId}` }}</strong>
|
||||
</div>
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<div class="markup job-summary-body" v-html="s.summaryHTML"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,9 +351,30 @@ async function deleteArtifact(name: string) {
|
||||
/* action view header */
|
||||
|
||||
.action-view-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.action-view-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
.action-view-back:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.action-view-back-name {
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.action-info-summary {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -200,30 +392,20 @@ async function deleteArtifact(name: string) {
|
||||
.action-info-summary-title-text {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.action-info-summary-title-index {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-light-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-info-summary .ui.button {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-commit-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 */
|
||||
|
||||
@@ -251,32 +433,77 @@ async function deleteArtifact(name: string) {
|
||||
|
||||
.left-list-header {
|
||||
font-size: 13px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.action-view-left .ui.relaxed.list {
|
||||
.action-view-sidebar-list {
|
||||
margin: var(--gap-block) 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.job-brief-item {
|
||||
.action-view-sidebar-list:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.action-view-sidebar-list > .item {
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: var(--gap-block);
|
||||
}
|
||||
|
||||
.job-brief-item:hover {
|
||||
.action-view-sidebar-list > .item:hover {
|
||||
background-color: var(--color-hover);
|
||||
}
|
||||
|
||||
.job-brief-item.selected {
|
||||
.action-view-sidebar-list > .item.selected {
|
||||
font-weight: var(--font-weight-bold);
|
||||
background-color: var(--color-active);
|
||||
}
|
||||
|
||||
.caller-row-toggle {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
line-height: inherit; /* buttons don't inherit line-height; match the <a> rows' row height */
|
||||
cursor: pointer;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.job-brief-toggle-icon {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.15s ease;
|
||||
/* sit between name and duration; duration uses order:2 with margin-left:auto to float right */
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.job-brief-toggle-icon:not(.collapsed) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* push rerun/duration to the right edge; only one is visible at a time (hover swap),
|
||||
the visible one absorbs the free space via auto-margin */
|
||||
.action-view-sidebar-list > .item .job-rerun-button,
|
||||
.action-view-sidebar-list > .item .job-duration {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* the re-run button replaces the duration on hover or job-link focus */
|
||||
.action-view-sidebar-list > .item .job-rerun-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-view-sidebar-list > .item:hover .job-rerun-button,
|
||||
.action-view-sidebar-list > .item:focus .job-rerun-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* only swap out the duration when a re-run button exists to take its place */
|
||||
.action-view-sidebar-list > .item:hover .job-rerun-button ~ .job-duration,
|
||||
.action-view-sidebar-list > .item:focus .job-rerun-button ~ .job-duration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ================ */
|
||||
/* action view right */
|
||||
|
||||
@@ -287,25 +514,33 @@ async function deleteArtifact(name: string) {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-view-right-panel {
|
||||
flex: 1; /* fill the right column so the summary graph stretches even without a job-summary section */
|
||||
border: 1px solid var(--color-console-border);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-console-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* begin fomantic button overrides */
|
||||
|
||||
.action-view-right .ui.button,
|
||||
.action-view-right .ui.button:focus {
|
||||
.action-view-right-panel .ui.button,
|
||||
.action-view-right-panel .ui.button:focus {
|
||||
background: transparent;
|
||||
color: var(--color-console-fg-subtle);
|
||||
}
|
||||
|
||||
.action-view-right .ui.button:hover {
|
||||
.action-view-right-panel .ui.button:hover {
|
||||
background: var(--color-console-hover-bg);
|
||||
color: var(--color-console-fg);
|
||||
}
|
||||
|
||||
.action-view-right .ui.button:active {
|
||||
.action-view-right-panel .ui.button:active {
|
||||
background: var(--color-console-active-bg);
|
||||
color: var(--color-console-fg);
|
||||
}
|
||||
@@ -323,4 +558,40 @@ async function deleteArtifact(name: string) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.job-summary-section {
|
||||
flex: 0 0 auto; /* size to its content; let the summary panel keep the remaining height */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.job-summary-section-header {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid var(--color-console-border);
|
||||
background: var(--color-console-bg);
|
||||
color: var(--color-console-fg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.job-summary-list {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.job-summary-item {
|
||||
padding: 12px;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--color-console-hover-bg);
|
||||
border: 1px solid var(--color-console-border);
|
||||
}
|
||||
|
||||
.job-summary-header {
|
||||
color: var(--color-console-fg);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.job-summary-body {
|
||||
color: var(--color-console-fg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
type DayDataObject,
|
||||
} from '../utils/time.ts';
|
||||
import {chartJsColors} from '../utils/color.ts';
|
||||
import {errorMessage} from '../modules/errors.ts';
|
||||
import {sleep} from '../utils.ts';
|
||||
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
|
||||
import {onMounted, shallowRef} from 'vue';
|
||||
@@ -78,7 +79,7 @@ async function fetchGraphData() {
|
||||
errorText.value = response.statusText;
|
||||
}
|
||||
} catch (err) {
|
||||
errorText.value = err.message;
|
||||
errorText.value = errorMessage(err);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
@@ -144,7 +145,7 @@ const options: ChartOptions<'line'> = {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header tw-flex tw-items-center tw-justify-between">
|
||||
<div class="ui header">
|
||||
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
|
||||
</div>
|
||||
<div class="tw-flex ui segment main-graph">
|
||||
|
||||
@@ -24,6 +24,7 @@ import {
|
||||
fillEmptyStartDaysWithZeroes,
|
||||
} from '../utils/time.ts';
|
||||
import {chartJsColors} from '../utils/color.ts';
|
||||
import {errorMessage} from '../modules/errors.ts';
|
||||
import {sleep} from '../utils.ts';
|
||||
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
|
||||
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
||||
@@ -166,7 +167,7 @@ export default defineComponent({
|
||||
this.errorText = response.statusText;
|
||||
}
|
||||
} catch (err) {
|
||||
this.errorText = err.message;
|
||||
this.errorText = errorMessage(err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
@@ -269,7 +270,7 @@ export default defineComponent({
|
||||
plugins: {
|
||||
title: {
|
||||
display: type === 'main',
|
||||
text: 'drag: zoom, shift+drag: pan, double click: reset zoom',
|
||||
text: this.locale.chartZoomHint,
|
||||
position: 'top',
|
||||
align: 'center',
|
||||
},
|
||||
@@ -339,7 +340,7 @@ export default defineComponent({
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header tw-flex tw-items-center tw-justify-between">
|
||||
<div class="ui header flex-left-right">
|
||||
<div>
|
||||
<relative-time
|
||||
v-if="xAxisMin && xAxisMin > 0"
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
type DayDataObject,
|
||||
} from '../utils/time.ts';
|
||||
import {chartJsColors} from '../utils/color.ts';
|
||||
import {errorMessage} from '../modules/errors.ts';
|
||||
import {sleep} from '../utils.ts';
|
||||
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
|
||||
import {onMounted, ref, shallowRef} from 'vue';
|
||||
@@ -74,7 +75,7 @@ async function fetchGraphData() {
|
||||
errorText.value = response.statusText;
|
||||
}
|
||||
} catch (err) {
|
||||
errorText.value = err.message;
|
||||
errorText.value = errorMessage(err);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
@@ -122,7 +123,7 @@ const options: ChartOptions<'bar'> = {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header tw-flex tw-items-center tw-justify-between">
|
||||
<div class="ui header">
|
||||
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
|
||||
</div>
|
||||
<div class="tw-flex ui segment main-graph">
|
||||
|
||||
@@ -32,6 +32,8 @@ const onItemClick = (e: MouseEvent) => {
|
||||
// - the user didn't press any special key like "Ctrl+Click" (which may have custom browser behavior)
|
||||
// - the editor/commit form isn't dirty (a full page reload shows a confirmation dialog if the form contains unsaved changes)
|
||||
if (!isPlainClick(e) || shouldTriggerAreYouSure()) return;
|
||||
// submodules (commit entry mode) point to external repos, let the browser handle navigation normally
|
||||
if (props.item.entryMode === 'commit') return;
|
||||
e.preventDefault();
|
||||
if (props.item.entryMode === 'tree') doLoadChildren();
|
||||
store.navigateTreeView(props.item.fullPath);
|
||||
|
||||
@@ -57,9 +57,7 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
|
||||
await store.loadViewContent(url);
|
||||
},
|
||||
|
||||
buildTreePathWebUrl(treePath: string) {
|
||||
return `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
|
||||
},
|
||||
buildTreePathWebUrl: (treePath: string) => `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`,
|
||||
});
|
||||
return store;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
import {computeGraphHighlightState, computeJobLevels, createWorkflowGraphModel} from './WorkflowGraph.utils.ts';
|
||||
import type {ActionsJob} from '../modules/gitea-actions.ts';
|
||||
|
||||
const mockJobs: ActionsJob[] = [
|
||||
{id: 1, link: '', jobId: 'job-100', name: 'job-100', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s'},
|
||||
{id: 2, link: '', jobId: 'job-101', name: 'job-101', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['job-100']},
|
||||
{id: 3, link: '', jobId: 'job-102', name: 'job-102', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['job-101']},
|
||||
{id: 4, link: '', jobId: 'job-103', name: 'job-103', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100']},
|
||||
{id: 5, link: '', jobId: 'prep-jdk', name: 'prep-jdk', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s'},
|
||||
{id: 6, link: '', jobId: 'code-analysis', name: 'code-analysis', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s'},
|
||||
{id: 7, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (1, chromium)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 8, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (1, firefox)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 9, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (2, chromium)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 10, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (3, chromium)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 11, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (3, firefox)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 12, link: '', jobId: 'matrix-e2e', name: 'matrix-e2e (99, webkit)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['job-100', 'prep-jdk', 'code-analysis']},
|
||||
{id: 13, link: '', jobId: 'unit-test', name: 'unit-test', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['prep-jdk', 'code-analysis']},
|
||||
{id: 14, link: '', jobId: 'arch-test', name: 'arch-test', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['prep-jdk', 'code-analysis']},
|
||||
{id: 15, link: '', jobId: 'integration-test', name: 'integration-test', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['prep-jdk', 'code-analysis']},
|
||||
{id: 16, link: '', jobId: 'build-image', name: 'build-image', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: [
|
||||
'unit-test',
|
||||
'arch-test',
|
||||
'integration-test',
|
||||
'matrix-e2e',
|
||||
]},
|
||||
];
|
||||
|
||||
const verifyDeployJobs: ActionsJob[] = [
|
||||
{id: 101, link: '', jobId: 'seed-dev', name: 'seed-dev', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s'},
|
||||
{id: 102, link: '', jobId: 'seed-qa', name: 'seed-qa', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s'},
|
||||
{id: 103, link: '', jobId: 'verify-dev', name: 'Verify Dev', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['seed-dev']},
|
||||
{id: 104, link: '', jobId: 'verify-qa', name: 'Verify QA', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['seed-qa']},
|
||||
{id: 105, link: '', jobId: 'deploy', name: 'Deploy', status: 'blocked', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '', needs: ['verify-dev', 'verify-qa']},
|
||||
];
|
||||
|
||||
// Multi-level pipeline with two matrices and a leaf with two parents.
|
||||
const wfTest1Jobs: ActionsJob[] = [
|
||||
{id: 1, link: '', jobId: 'init', name: 'Initialize Pipeline', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '1s'},
|
||||
{id: 2, link: '', jobId: 'lint-frontend', name: 'Lint Frontend', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['init']},
|
||||
{id: 3, link: '', jobId: 'lint-backend', name: 'Lint Backend', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['init']},
|
||||
{id: 4, link: '', jobId: 'build-frontend', name: 'Build Frontend', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['lint-frontend']},
|
||||
{id: 5, link: '', jobId: 'build-backend', name: 'Build Backend', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '5s', needs: ['lint-backend']},
|
||||
{id: 6, link: '', jobId: 'unit-tests', name: 'Unit Tests (api, true)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['build-frontend', 'build-backend']},
|
||||
{id: 7, link: '', jobId: 'unit-tests', name: 'Unit Tests (api, false)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['build-frontend', 'build-backend']},
|
||||
{id: 8, link: '', jobId: 'unit-tests', name: 'Unit Tests (service, true)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['build-frontend', 'build-backend']},
|
||||
{id: 9, link: '', jobId: 'test-integration', name: 'Integration Tests', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '6s', needs: ['build-backend']},
|
||||
{id: 10, link: '', jobId: 'e2e-tests', name: 'E2E Tests (chrome, desktop)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['build-frontend', 'unit-tests']},
|
||||
{id: 11, link: '', jobId: 'e2e-tests', name: 'E2E Tests (chrome, mobile)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['build-frontend', 'unit-tests']},
|
||||
{id: 12, link: '', jobId: 'e2e-tests', name: 'E2E Tests (firefox, desktop)', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '4s', needs: ['build-frontend', 'unit-tests']},
|
||||
{id: 13, link: '', jobId: 'bundle-app', name: 'Bundle Application', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['unit-tests', 'test-integration', 'e2e-tests']},
|
||||
{id: 14, link: '', jobId: 'deploy-dev', name: 'Deploy to Dev', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['bundle-app']},
|
||||
{id: 15, link: '', jobId: 'deploy-qa', name: 'Deploy to QA', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '3s', needs: ['bundle-app']},
|
||||
{id: 16, link: '', jobId: 'verify-dev', name: 'Verify Dev', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['deploy-dev']},
|
||||
{id: 17, link: '', jobId: 'verify-qa', name: 'Verify QA', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['deploy-qa']},
|
||||
{id: 18, link: '', jobId: 'deploy-prod', name: 'Deploy to Production', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '5s', needs: ['verify-dev', 'verify-qa']},
|
||||
{id: 19, link: '', jobId: 'post-deploy-checks', name: 'Post-Deploy Checks', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '2s', needs: ['deploy-prod']},
|
||||
];
|
||||
|
||||
const mockJob = (id: number, jobId: string, name: string, needs?: string[]): ActionsJob =>
|
||||
({id, link: '', jobId, name, status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '1s', needs});
|
||||
|
||||
test('matrix nodes key on job id, not on the display name', () => {
|
||||
const legs = createWorkflowGraphModel([mockJob(1, 'explicit', 'leg one'), mockJob(2, 'explicit', 'leg two')]);
|
||||
expect(legs.nodes).toHaveLength(1);
|
||||
expect(legs.nodes[0].type).toBe('matrix');
|
||||
expect(legs.nodes[0].name).toBe('explicit');
|
||||
expect(legs.nodes[0].jobs.map((j) => j.id)).toEqual([1, 2]);
|
||||
|
||||
const lookalikes = createWorkflowGraphModel([
|
||||
mockJob(1, 'setup', 'setup'),
|
||||
mockJob(2, 'build-fast', 'build (fast)', ['setup']),
|
||||
mockJob(3, 'build-slow', 'build (slow)', ['setup']),
|
||||
]);
|
||||
expect(lookalikes.nodes.map((n) => n.type)).toEqual(['job', 'group']);
|
||||
|
||||
const noJobId = createWorkflowGraphModel([mockJob(1, '', 'first'), mockJob(2, '', 'second')]);
|
||||
expect(noJobId.nodes.map((n) => n.id)).toEqual(['job:1', 'job:2']);
|
||||
});
|
||||
|
||||
test('computeJobLevels keeps stable topological levels', () => {
|
||||
const levels = computeJobLevels(mockJobs);
|
||||
expect(levels.get('job-100')).toBe(0);
|
||||
expect(levels.get('job-101')).toBe(1);
|
||||
expect(levels.get('job-102')).toBe(2);
|
||||
expect(levels.get('build-image')).toBe(2);
|
||||
});
|
||||
|
||||
test('graph model collapses matrix and groups jobs that share parents and children', () => {
|
||||
const graph = createWorkflowGraphModel(mockJobs);
|
||||
|
||||
expect(graph.nodes.find((n) => n.type === 'matrix')?.jobs).toHaveLength(6);
|
||||
const groupJobIds = graph.nodes.filter((n) => n.type === 'group').map((g) => g.jobs.map((j) => j.jobId));
|
||||
expect(groupJobIds).toEqual(expect.arrayContaining([
|
||||
['prep-jdk', 'code-analysis'],
|
||||
['unit-test', 'arch-test', 'integration-test'],
|
||||
]));
|
||||
});
|
||||
|
||||
test('expanded matrix height includes summary and toggle rows', () => {
|
||||
const collapsed = createWorkflowGraphModel(mockJobs);
|
||||
const expanded = createWorkflowGraphModel(mockJobs, new Set(['matrix:matrix-e2e']));
|
||||
const collapsedMatrix = collapsed.nodes.find((n) => n.id === 'matrix:matrix-e2e');
|
||||
const expandedMatrix = expanded.nodes.find((n) => n.id === 'matrix:matrix-e2e');
|
||||
|
||||
expect(collapsedMatrix?.displayHeight).toBeLessThan(expandedMatrix?.displayHeight ?? 0);
|
||||
// 6 jobs * 26 row height + 24 header + 6 pad * 2 = 192
|
||||
expect(expandedMatrix?.displayHeight).toBe(192);
|
||||
});
|
||||
|
||||
test('every dependency is rendered as one routed edge', () => {
|
||||
const graph = createWorkflowGraphModel(mockJobs);
|
||||
const rootGroup = graph.nodes.find((n) => n.type === 'group' && n.jobs.some((j) => j.jobId === 'prep-jdk'))!;
|
||||
const testGroup = graph.nodes.find((n) => n.type === 'group' && n.jobs.some((j) => j.jobId === 'unit-test'))!;
|
||||
const expectedKeys = [
|
||||
`${rootGroup.id}->matrix:matrix-e2e`,
|
||||
`${rootGroup.id}->${testGroup.id}`,
|
||||
];
|
||||
const keys = new Set(graph.routedEdges.map((e) => e.key));
|
||||
for (const k of expectedKeys) expect(keys.has(k)).toBe(true);
|
||||
});
|
||||
|
||||
test('same-row edge collapses to a single horizontal line', () => {
|
||||
const graph = createWorkflowGraphModel(verifyDeployJobs);
|
||||
const verifyDevEdge = graph.routedEdges.find((e) => e.fromId === 'job:101' && e.toId === 'job:103');
|
||||
const verifyQaEdge = graph.routedEdges.find((e) => e.fromId === 'job:102' && e.toId === 'job:104');
|
||||
expect(verifyDevEdge?.path).toMatch(/^M [\d.]+ [\d.]+ H [\d.]+$/);
|
||||
expect(verifyQaEdge?.path).toMatch(/^M [\d.]+ [\d.]+ H [\d.]+$/);
|
||||
});
|
||||
|
||||
test('different-row edge uses cubic bezier curve', () => {
|
||||
const graph = createWorkflowGraphModel(verifyDeployJobs);
|
||||
const deployLowerEdge = graph.routedEdges.find((e) => e.fromId === 'job:104' && e.toId === 'job:105');
|
||||
expect(deployLowerEdge?.path).toContain(' C ');
|
||||
});
|
||||
|
||||
test('multi-level pipeline with two matrices and a converging leaf renders without errors', () => {
|
||||
const graph = createWorkflowGraphModel(wfTest1Jobs);
|
||||
const matrices = graph.nodes.filter((n) => n.type === 'matrix');
|
||||
expect(matrices.map((n) => n.name).sort()).toEqual(['E2E Tests', 'Unit Tests']);
|
||||
|
||||
const deployProd = graph.nodes.find((n) => n.id === 'job:18');
|
||||
const verifyDev = graph.nodes.find((n) => n.id === 'job:16');
|
||||
const verifyQa = graph.nodes.find((n) => n.id === 'job:17');
|
||||
expect(verifyDev?.level).toBe(verifyQa?.level);
|
||||
expect(deployProd?.level).toBe((verifyDev?.level ?? 0) + 1);
|
||||
|
||||
for (const node of graph.nodes) {
|
||||
expect(Number.isFinite(node.x)).toBe(true);
|
||||
expect(Number.isFinite(node.y)).toBe(true);
|
||||
expect(node.x).toBeGreaterThanOrEqual(0);
|
||||
expect(node.y).toBeGreaterThanOrEqual(0);
|
||||
}
|
||||
for (const edge of graph.routedEdges) {
|
||||
expect(edge.path).not.toMatch(/NaN|undefined|Infinity/);
|
||||
}
|
||||
});
|
||||
|
||||
test('reusable callers with identical dependency signature are kept as separate nodes', () => {
|
||||
const jobs: ActionsJob[] = [
|
||||
{id: 1, link: '', jobId: 'prepare', name: 'prepare', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '30s'},
|
||||
{id: 2, link: '', jobId: 'local_caller', name: 'local caller', status: 'running', canRerun: false, isReusableCaller: true, parentJobID: 0, duration: '5m', needs: ['prepare'], callUses: './.gitea/workflows/lib.yml'},
|
||||
{id: 3, link: '', jobId: 'cross_caller', name: 'cross-repo caller', status: 'waiting', canRerun: false, isReusableCaller: true, parentJobID: 0, duration: '0s', needs: ['prepare'], callUses: 'user2/lib/.gitea/workflows/ext.yml@main'},
|
||||
{id: 4, link: '', jobId: 'final', name: 'final', status: 'blocked', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '0s', needs: ['local_caller', 'cross_caller']},
|
||||
];
|
||||
const graph = createWorkflowGraphModel(jobs);
|
||||
expect(graph.nodes.find((n) => n.type === 'group')).toBeUndefined();
|
||||
expect(graph.nodes.find((n) => n.id === 'job:2')?.name).toBe('local caller');
|
||||
expect(graph.nodes.find((n) => n.id === 'job:3')?.name).toBe('cross-repo caller');
|
||||
});
|
||||
|
||||
test('matrix legs that call a reusable workflow are folded into a single matrix node', () => {
|
||||
const jobs: ActionsJob[] = [
|
||||
{id: 1, link: '', jobId: 'prepare', name: 'prepare', status: 'success', canRerun: false, isReusableCaller: false, parentJobID: 0, duration: '30s'},
|
||||
{id: 2, link: '', jobId: 'build-call', name: 'build-call (linux)', status: 'success', canRerun: false, isReusableCaller: true, parentJobID: 0, duration: '1m', needs: ['prepare'], callUses: './.gitea/workflows/build.yml'},
|
||||
{id: 3, link: '', jobId: 'build-call', name: 'build-call (windows)', status: 'success', canRerun: false, isReusableCaller: true, parentJobID: 0, duration: '2m', needs: ['prepare'], callUses: './.gitea/workflows/build.yml'},
|
||||
{id: 4, link: '', jobId: 'build-call', name: 'build-call (macos)', status: 'success', canRerun: false, isReusableCaller: true, parentJobID: 0, duration: '90s', needs: ['prepare'], callUses: './.gitea/workflows/build.yml'},
|
||||
];
|
||||
const graph = createWorkflowGraphModel(jobs);
|
||||
const matrixNodes = graph.nodes.filter((n) => n.type === 'matrix');
|
||||
expect(matrixNodes).toHaveLength(1);
|
||||
expect(matrixNodes[0].name).toBe('build-call');
|
||||
expect(matrixNodes[0].jobs.map((j) => j.id).sort()).toEqual([2, 3, 4]);
|
||||
});
|
||||
|
||||
test('directed highlight state covers ancestors and descendants of the hovered node', () => {
|
||||
const graph = createWorkflowGraphModel(mockJobs);
|
||||
const rootGroup = graph.nodes.find((n) => n.type === 'group' && n.jobs.some((j) => j.jobId === 'prep-jdk'))!;
|
||||
|
||||
const highlight = computeGraphHighlightState(rootGroup.id, graph.adjacency);
|
||||
expect(highlight.nodeIds.has('matrix:matrix-e2e')).toBe(true);
|
||||
expect(highlight.nodeIds.has('job:16')).toBe(true);
|
||||
expect(highlight.edgeKeys.has(`${rootGroup.id}->matrix:matrix-e2e`)).toBe(true);
|
||||
});
|
||||
|
||||
test('directed highlight state for converging graph excludes sibling branch when hovering parent', () => {
|
||||
const graph = createWorkflowGraphModel(verifyDeployJobs);
|
||||
|
||||
const parentHighlight = computeGraphHighlightState('job:103', graph.adjacency);
|
||||
expect(parentHighlight.nodeIds.has('job:101')).toBe(true);
|
||||
expect(parentHighlight.nodeIds.has('job:105')).toBe(true);
|
||||
expect(parentHighlight.nodeIds.has('job:104')).toBe(false);
|
||||
expect(parentHighlight.edgeKeys.has('job:103->job:105')).toBe(true);
|
||||
expect(parentHighlight.edgeKeys.has('job:104->job:105')).toBe(false);
|
||||
|
||||
const sinkHighlight = computeGraphHighlightState('job:105', graph.adjacency);
|
||||
expect(sinkHighlight.nodeIds.has('job:103')).toBe(true);
|
||||
expect(sinkHighlight.nodeIds.has('job:104')).toBe(true);
|
||||
expect(sinkHighlight.edgeKeys.has('job:103->job:105')).toBe(true);
|
||||
expect(sinkHighlight.edgeKeys.has('job:104->job:105')).toBe(true);
|
||||
});
|
||||
@@ -0,0 +1,538 @@
|
||||
import type {ActionsJob, ActionsStatus} from '../modules/gitea-actions.ts';
|
||||
|
||||
export type GraphNodeType = 'job' | 'matrix' | 'group';
|
||||
|
||||
export type GraphNode = {
|
||||
id: string;
|
||||
type: GraphNodeType;
|
||||
name: string;
|
||||
status: ActionsStatus;
|
||||
duration: string;
|
||||
x: number;
|
||||
y: number;
|
||||
level: number;
|
||||
displayHeight: number;
|
||||
jobs: ActionsJob[];
|
||||
};
|
||||
|
||||
export type Edge = {
|
||||
fromId: string;
|
||||
toId: string;
|
||||
key: string;
|
||||
};
|
||||
|
||||
export type RoutedEdge = Edge & {
|
||||
path: string;
|
||||
fromNode: GraphNode;
|
||||
toNode: GraphNode;
|
||||
};
|
||||
|
||||
export type SharedSegment = {
|
||||
key: string;
|
||||
edgeKeys: string[];
|
||||
path: string;
|
||||
};
|
||||
|
||||
export type GraphHighlightState = {
|
||||
nodeIds: Set<string>;
|
||||
edgeKeys: Set<string>;
|
||||
};
|
||||
|
||||
export type WorkflowGraphLayoutOptions = {
|
||||
margin: number;
|
||||
nodeWidth: number;
|
||||
nodeHeight: number;
|
||||
columnGap: number;
|
||||
laneGap: number;
|
||||
groupRowHeight: number;
|
||||
groupPadY: number;
|
||||
matrixCollapsedHeight: number;
|
||||
matrixHeaderHeight: number;
|
||||
matrixRowHeight: number;
|
||||
matrixPadY: number;
|
||||
};
|
||||
|
||||
export type WorkflowGraphModel = {
|
||||
nodes: GraphNode[];
|
||||
edges: Edge[];
|
||||
routedEdges: RoutedEdge[];
|
||||
sharedSegments: SharedSegment[];
|
||||
adjacency: NodeAdjacency;
|
||||
};
|
||||
|
||||
export type NodeAdjacency = {
|
||||
incomingByNodeId: Map<string, string[]>;
|
||||
outgoingByNodeId: Map<string, string[]>;
|
||||
};
|
||||
|
||||
const defaultLayoutOptions: WorkflowGraphLayoutOptions = {
|
||||
margin: 24,
|
||||
nodeWidth: 220,
|
||||
nodeHeight: 40,
|
||||
columnGap: 96,
|
||||
laneGap: 32,
|
||||
groupRowHeight: 28,
|
||||
groupPadY: 8,
|
||||
matrixCollapsedHeight: 78,
|
||||
matrixHeaderHeight: 24,
|
||||
matrixRowHeight: 26,
|
||||
matrixPadY: 6,
|
||||
};
|
||||
|
||||
function canonicalKey(ids: Iterable<string>): string {
|
||||
return Array.from(ids).sort().join('');
|
||||
}
|
||||
|
||||
function graphIdForJob(job: ActionsJob): string {
|
||||
return `job:${job.id}`;
|
||||
}
|
||||
|
||||
// matrix legs are named `<job name> (<combination>)`; a workflow-provided `name:` may not be
|
||||
function matrixLabel(matrixJobs: ActionsJob[], jobId: string): string {
|
||||
const prefixes = new Set(matrixJobs.map((job) => {
|
||||
const idx = job.name.indexOf(' (');
|
||||
return idx === -1 ? '' : job.name.slice(0, idx).trim();
|
||||
}));
|
||||
const [prefix] = prefixes;
|
||||
return prefixes.size === 1 && prefix ? prefix : jobId;
|
||||
}
|
||||
|
||||
export function boxBottom(node: GraphNode): number {
|
||||
return node.y + node.displayHeight;
|
||||
}
|
||||
|
||||
export function boxCenterY(node: GraphNode): number {
|
||||
return node.y + node.displayHeight / 2;
|
||||
}
|
||||
|
||||
function matrixPanelHeight(rowCount: number, expanded: boolean, options: WorkflowGraphLayoutOptions): number {
|
||||
if (rowCount <= 0) return options.nodeHeight;
|
||||
if (!expanded) return options.matrixCollapsedHeight;
|
||||
return options.matrixHeaderHeight + rowCount * options.matrixRowHeight + options.matrixPadY * 2;
|
||||
}
|
||||
|
||||
function groupPanelHeight(rowCount: number, options: WorkflowGraphLayoutOptions): number {
|
||||
return rowCount * options.groupRowHeight + options.groupPadY * 2;
|
||||
}
|
||||
|
||||
function compareStatusWorstFirst(a: ActionsStatus, b: ActionsStatus): number {
|
||||
const rank = (s: ActionsStatus) => {
|
||||
if (s === 'failure') return 0;
|
||||
if (s === 'cancelled') return 1;
|
||||
if (s === 'running') return 2;
|
||||
if (s === 'waiting') return 3;
|
||||
if (s === 'blocked') return 4;
|
||||
if (s === 'success') return 5;
|
||||
if (s === 'skipped') return 6;
|
||||
return 7;
|
||||
};
|
||||
return rank(a) - rank(b);
|
||||
}
|
||||
|
||||
function aggregateStatus(children: ActionsJob[]): ActionsStatus {
|
||||
return children.map((c) => c.status).slice().sort(compareStatusWorstFirst)[0] ?? 'unknown';
|
||||
}
|
||||
|
||||
function buildDirectNeedsMap(jobs: ActionsJob[]): Map<string, string[]> {
|
||||
const directNeedsByJobId = new Map<string, string[]>();
|
||||
const dependentsByJobId = new Map<string, Set<string>>();
|
||||
|
||||
for (const job of jobs) {
|
||||
const needs = job.needs || [];
|
||||
directNeedsByJobId.set(job.jobId, needs);
|
||||
for (const need of needs) {
|
||||
if (!dependentsByJobId.has(need)) dependentsByJobId.set(need, new Set());
|
||||
dependentsByJobId.get(need)!.add(job.jobId);
|
||||
}
|
||||
}
|
||||
|
||||
const reachabilityCache = new Map<string, boolean>();
|
||||
function canReach(fromJobId: string, toJobId: string): boolean {
|
||||
const cacheKey = `${fromJobId}->${toJobId}`;
|
||||
if (reachabilityCache.has(cacheKey)) return reachabilityCache.get(cacheKey)!;
|
||||
const visited = new Set<string>();
|
||||
const stack = Array.from(dependentsByJobId.get(fromJobId) || []);
|
||||
while (stack.length > 0) {
|
||||
const current = stack.pop()!;
|
||||
if (current === toJobId) {
|
||||
reachabilityCache.set(cacheKey, true);
|
||||
return true;
|
||||
}
|
||||
if (visited.has(current)) continue;
|
||||
visited.add(current);
|
||||
stack.push(...(dependentsByJobId.get(current) || []));
|
||||
}
|
||||
reachabilityCache.set(cacheKey, false);
|
||||
return false;
|
||||
}
|
||||
|
||||
const reducedNeedsByJobId = new Map<string, string[]>();
|
||||
for (const [jobId, needs] of directNeedsByJobId) {
|
||||
reducedNeedsByJobId.set(jobId, needs.filter((need) => {
|
||||
return needs.every((other) => other === need || !canReach(need, other));
|
||||
}));
|
||||
}
|
||||
return reducedNeedsByJobId;
|
||||
}
|
||||
|
||||
export function computeJobLevels(jobs: ActionsJob[]): Map<string, number> {
|
||||
const jobMap = new Map<string, ActionsJob>();
|
||||
for (const job of jobs) {
|
||||
jobMap.set(job.name, job);
|
||||
if (job.jobId) jobMap.set(job.jobId, job);
|
||||
}
|
||||
|
||||
const levels = new Map<string, number>();
|
||||
const visited = new Set<string>();
|
||||
const recursionStack = new Set<string>();
|
||||
|
||||
function dfs(jobNameOrId: string): number {
|
||||
if (recursionStack.has(jobNameOrId)) return 0;
|
||||
if (visited.has(jobNameOrId)) return levels.get(jobNameOrId) ?? 0;
|
||||
recursionStack.add(jobNameOrId);
|
||||
visited.add(jobNameOrId);
|
||||
|
||||
const job = jobMap.get(jobNameOrId);
|
||||
if (!job) {
|
||||
recursionStack.delete(jobNameOrId);
|
||||
return 0;
|
||||
}
|
||||
if (!job.needs?.length) {
|
||||
levels.set(job.jobId, 0);
|
||||
if (job.jobId !== job.name) levels.set(job.name, 0);
|
||||
recursionStack.delete(jobNameOrId);
|
||||
return 0;
|
||||
}
|
||||
|
||||
let maxLevel = -1;
|
||||
for (const need of job.needs) {
|
||||
if (!jobMap.has(need)) continue;
|
||||
maxLevel = Math.max(maxLevel, dfs(need));
|
||||
}
|
||||
const level = maxLevel + 1;
|
||||
levels.set(job.name, level);
|
||||
levels.set(job.jobId, level);
|
||||
recursionStack.delete(jobNameOrId);
|
||||
return level;
|
||||
}
|
||||
|
||||
for (const job of jobs) {
|
||||
if (!visited.has(job.jobId)) dfs(job.jobId);
|
||||
}
|
||||
return levels;
|
||||
}
|
||||
|
||||
export function computeGraphHighlightState(hoveredId: string | null, adjacency: NodeAdjacency): GraphHighlightState {
|
||||
if (!hoveredId) return {nodeIds: new Set(), edgeKeys: new Set()};
|
||||
const {incomingByNodeId, outgoingByNodeId} = adjacency;
|
||||
|
||||
const edgeKeys = new Set<string>();
|
||||
const collect = (startId: string, adj: Map<string, string[]>, edgeKeyForward: boolean): Set<string> => {
|
||||
const seen = new Set<string>();
|
||||
const queue = [startId];
|
||||
while (queue.length > 0) {
|
||||
const current = queue.shift()!;
|
||||
if (seen.has(current)) continue;
|
||||
seen.add(current);
|
||||
for (const next of adj.get(current) || []) {
|
||||
edgeKeys.add(edgeKeyForward ? `${current}->${next}` : `${next}->${current}`);
|
||||
if (!seen.has(next)) queue.push(next);
|
||||
}
|
||||
}
|
||||
return seen;
|
||||
};
|
||||
|
||||
const ancestors = collect(hoveredId, incomingByNodeId, false);
|
||||
const descendants = collect(hoveredId, outgoingByNodeId, true);
|
||||
return {nodeIds: new Set([...ancestors, ...descendants]), edgeKeys};
|
||||
}
|
||||
|
||||
type VisualGraphBuild = {
|
||||
nodes: GraphNode[];
|
||||
edges: Edge[];
|
||||
};
|
||||
|
||||
function buildVisualGraph(
|
||||
jobs: ActionsJob[],
|
||||
expandedMatrixNodeIds: ReadonlySet<string>,
|
||||
options: WorkflowGraphLayoutOptions,
|
||||
): VisualGraphBuild {
|
||||
const jobsByJobId = new Map<string, ActionsJob[]>();
|
||||
const jobIndexById = new Map<number, number>();
|
||||
for (const [index, job] of jobs.entries()) {
|
||||
jobIndexById.set(job.id, index);
|
||||
if (!jobsByJobId.has(job.jobId)) jobsByJobId.set(job.jobId, []);
|
||||
jobsByJobId.get(job.jobId)!.push(job);
|
||||
}
|
||||
|
||||
// legs of one matrix job share its `jobId`; their display names are free-form so cannot key them
|
||||
const isMatrixLeg = (job: ActionsJob): boolean => Boolean(job.jobId) && jobsByJobId.get(job.jobId)!.length > 1;
|
||||
|
||||
const directNeedsByJobId = buildDirectNeedsMap(jobs);
|
||||
const rawLevels = computeJobLevels(jobs);
|
||||
const dependentsByJobId = new Map<string, string[]>();
|
||||
const rawEdges: Array<{from: ActionsJob; to: ActionsJob}> = [];
|
||||
|
||||
for (const job of jobs) {
|
||||
for (const need of directNeedsByJobId.get(job.jobId) || []) {
|
||||
for (const upstream of jobsByJobId.get(need) || []) {
|
||||
rawEdges.push({from: upstream, to: job});
|
||||
if (!dependentsByJobId.has(upstream.jobId)) dependentsByJobId.set(upstream.jobId, []);
|
||||
dependentsByJobId.get(upstream.jobId)!.push(job.jobId);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const list of dependentsByJobId.values()) list.sort();
|
||||
|
||||
// Group sibling jobs that share an identical (parents, children) signature into a single
|
||||
// collapsed "group" node. This is a visual aggregation only - the underlying jobs are
|
||||
// preserved on the node so the panel can list them.
|
||||
const groupedJobIds = new Map<number, string>();
|
||||
const groupsById = new Map<string, ActionsJob[]>();
|
||||
const groupCandidateBuckets = new Map<string, ActionsJob[]>();
|
||||
for (const job of jobs) {
|
||||
if (isMatrixLeg(job)) continue;
|
||||
// Reusable callers represent distinct workflow files — keep each as its own node so the
|
||||
// graph mirrors GitHub Actions, where every caller shows up as its own box even when
|
||||
// siblings share an identical (parents, children) dependency signature.
|
||||
if (job.isReusableCaller) continue;
|
||||
const needsKey = canonicalKey(directNeedsByJobId.get(job.jobId) || []);
|
||||
const childrenKey = (dependentsByJobId.get(job.jobId) || []).join('');
|
||||
if (!needsKey && !childrenKey) continue;
|
||||
const level = rawLevels.get(job.jobId) ?? 0;
|
||||
const key = `group:${level}:${needsKey}:${childrenKey}`;
|
||||
if (!groupCandidateBuckets.has(key)) groupCandidateBuckets.set(key, []);
|
||||
groupCandidateBuckets.get(key)!.push(job);
|
||||
}
|
||||
for (const [groupId, groupJobs] of groupCandidateBuckets) {
|
||||
if (groupJobs.length < 2) continue;
|
||||
groupJobs.sort((a, b) => (jobIndexById.get(a.id) ?? 0) - (jobIndexById.get(b.id) ?? 0));
|
||||
groupsById.set(groupId, groupJobs);
|
||||
for (const job of groupJobs) groupedJobIds.set(job.id, groupId);
|
||||
}
|
||||
|
||||
const visualIdByJobId = new Map<number, string>();
|
||||
const emittedNodeIds = new Set<string>();
|
||||
const nodes: GraphNode[] = [];
|
||||
for (const job of jobs) {
|
||||
const matrixJobs = isMatrixLeg(job) ? jobsByJobId.get(job.jobId)! : null;
|
||||
const visualId = matrixJobs ? `matrix:${job.jobId}` : (groupedJobIds.get(job.id) || graphIdForJob(job));
|
||||
visualIdByJobId.set(job.id, visualId);
|
||||
if (emittedNodeIds.has(visualId)) continue;
|
||||
emittedNodeIds.add(visualId);
|
||||
|
||||
if (matrixJobs) {
|
||||
nodes.push({
|
||||
id: visualId,
|
||||
type: 'matrix',
|
||||
name: matrixLabel(matrixJobs, job.jobId),
|
||||
status: aggregateStatus(matrixJobs),
|
||||
duration: '',
|
||||
x: 0, y: 0, level: 0,
|
||||
displayHeight: matrixPanelHeight(matrixJobs.length, expandedMatrixNodeIds.has(visualId), options),
|
||||
jobs: matrixJobs,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
const groupJobs = groupsById.get(visualId);
|
||||
if (groupJobs) {
|
||||
nodes.push({
|
||||
id: visualId,
|
||||
type: 'group',
|
||||
name: groupJobs.map((g) => g.name).join(', '),
|
||||
status: aggregateStatus(groupJobs),
|
||||
duration: '',
|
||||
x: 0, y: 0, level: 0,
|
||||
displayHeight: groupPanelHeight(groupJobs.length, options),
|
||||
jobs: groupJobs,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
nodes.push({
|
||||
id: visualId,
|
||||
type: 'job',
|
||||
name: job.name,
|
||||
status: job.status,
|
||||
duration: job.duration,
|
||||
x: 0, y: 0, level: 0,
|
||||
displayHeight: options.nodeHeight,
|
||||
jobs: [job],
|
||||
});
|
||||
}
|
||||
|
||||
const seenEdges = new Set<string>();
|
||||
const edges: Edge[] = [];
|
||||
for (const {from, to} of rawEdges) {
|
||||
const fromId = visualIdByJobId.get(from.id);
|
||||
const toId = visualIdByJobId.get(to.id);
|
||||
if (!fromId || !toId || fromId === toId) continue;
|
||||
const key = `${fromId}->${toId}`;
|
||||
if (seenEdges.has(key)) continue;
|
||||
seenEdges.add(key);
|
||||
edges.push({fromId, toId, key});
|
||||
}
|
||||
|
||||
return {nodes, edges};
|
||||
}
|
||||
|
||||
function buildNodeAdjacency(edges: Edge[]): NodeAdjacency {
|
||||
const incomingByNodeId = new Map<string, string[]>();
|
||||
const outgoingByNodeId = new Map<string, string[]>();
|
||||
for (const edge of edges) {
|
||||
if (!incomingByNodeId.has(edge.toId)) incomingByNodeId.set(edge.toId, []);
|
||||
incomingByNodeId.get(edge.toId)!.push(edge.fromId);
|
||||
if (!outgoingByNodeId.has(edge.fromId)) outgoingByNodeId.set(edge.fromId, []);
|
||||
outgoingByNodeId.get(edge.fromId)!.push(edge.toId);
|
||||
}
|
||||
return {incomingByNodeId, outgoingByNodeId};
|
||||
}
|
||||
|
||||
function assignNodeLevels(nodes: GraphNode[], {incomingByNodeId}: NodeAdjacency): void {
|
||||
const cache = new Map<string, number>();
|
||||
function levelFor(id: string, visiting = new Set<string>()): number {
|
||||
if (cache.has(id)) return cache.get(id)!;
|
||||
if (visiting.has(id)) return 0;
|
||||
visiting.add(id);
|
||||
const incoming = incomingByNodeId.get(id) || [];
|
||||
const level = incoming.length > 0 ?
|
||||
Math.max(...incoming.map((fromId) => levelFor(fromId, visiting))) + 1 :
|
||||
0;
|
||||
visiting.delete(id);
|
||||
cache.set(id, level);
|
||||
return level;
|
||||
}
|
||||
for (const node of nodes) node.level = levelFor(node.id);
|
||||
}
|
||||
|
||||
// Roots stay in input order; later levels are sorted by the mean parent Y so that simple
|
||||
// chains stay on a straight horizontal line.
|
||||
function assignNodeCoordinates(nodesById: Map<string, GraphNode>, nodes: GraphNode[], adjacency: NodeAdjacency, options: WorkflowGraphLayoutOptions): void {
|
||||
const {incomingByNodeId} = adjacency;
|
||||
const inputRank = (node: GraphNode): number => Math.min(...node.jobs.map((j) => j.id));
|
||||
|
||||
const nodesByLevel = new Map<number, GraphNode[]>();
|
||||
for (const node of nodes) {
|
||||
if (!nodesByLevel.has(node.level)) nodesByLevel.set(node.level, []);
|
||||
nodesByLevel.get(node.level)!.push(node);
|
||||
}
|
||||
const orderedLevels = Array.from(nodesByLevel.keys()).sort((a, b) => a - b);
|
||||
|
||||
// Initial X assignment and a default Y so barycenters can use a finite value.
|
||||
for (const level of orderedLevels) {
|
||||
const list = nodesByLevel.get(level)!;
|
||||
list.sort((a, b) => inputRank(a) - inputRank(b));
|
||||
let yCursor = options.margin;
|
||||
for (const node of list) {
|
||||
node.x = options.margin + level * (options.nodeWidth + options.columnGap);
|
||||
node.y = yCursor;
|
||||
yCursor += node.displayHeight + options.laneGap;
|
||||
}
|
||||
}
|
||||
|
||||
function packLevel(level: number, anchorOf: (n: GraphNode) => number): void {
|
||||
const list = nodesByLevel.get(level)!;
|
||||
const sorted = Array.from(list).sort((a, b) => anchorOf(a) - anchorOf(b) || inputRank(a) - inputRank(b));
|
||||
// Pack tight to top after sorting. Using barycenter only for order (not Y) keeps terminal
|
||||
// nodes like build-image close to the top of their column instead of being pulled down to
|
||||
// the mean Y of their parents — matching GitHub Actions' compact layout.
|
||||
let prevBottom = options.margin - options.laneGap;
|
||||
for (const node of sorted) {
|
||||
node.y = prevBottom + options.laneGap;
|
||||
prevBottom = boxBottom(node);
|
||||
}
|
||||
nodesByLevel.set(level, sorted);
|
||||
}
|
||||
|
||||
function meanCenterOf(ids: string[]): number | null {
|
||||
if (ids.length === 0) return null;
|
||||
let sum = 0;
|
||||
for (const id of ids) sum += boxCenterY(nodesById.get(id)!);
|
||||
return sum / ids.length;
|
||||
}
|
||||
|
||||
// Down-only barycenter pass: each child is anchored to the mean Y of its parents. Roots
|
||||
// keep their initial yaml-declaration order (via inputRank), matching how GitHub Actions
|
||||
// arranges root jobs. This produces a "main chain on top" layout where job-100 → job-101 →
|
||||
// job-102 stays on a straight horizontal line.
|
||||
for (const level of orderedLevels) {
|
||||
if (level === 0) continue;
|
||||
packLevel(level, (node) => meanCenterOf(incomingByNodeId.get(node.id) || []) ?? boxCenterY(node));
|
||||
}
|
||||
}
|
||||
|
||||
// Per-edge connector: source stub → cubic-bezier corner down/up to column midpoint →
|
||||
// vertical run → cubic-bezier corner back to horizontal → target stub. The corner radius is
|
||||
// fixed (not clamped to the row delta) so any two edges sharing the same source produce the
|
||||
// same source-side path and overlap into a single visual line until they diverge at the V.
|
||||
const cornerRadius = 12;
|
||||
|
||||
function connectorPath(sx: number, sy: number, ex: number, ey: number, options: WorkflowGraphLayoutOptions): string {
|
||||
if (Math.abs(sy - ey) < 0.5) return `M ${sx} ${sy} H ${ex}`;
|
||||
// Anchor the V segment in the column gap immediately before the target instead of the
|
||||
// horizontal midpoint. The long H stays at the source's Y, matching GitHub Actions' style
|
||||
// — a multi-column edge runs along the source row across intermediate columns, then turns
|
||||
// up/down only when it reaches the target column.
|
||||
const midX = Math.max(ex - options.columnGap / 2, (sx + ex) / 2);
|
||||
const dy = ey > sy ? 1 : -1;
|
||||
// Keep the same H prefix to `midX - cornerRadius` for every edge so that edges sharing a
|
||||
// source overlap visually until they fork. When there isn't 2*cornerRadius of vertical
|
||||
// room for the V segment, emit a single S-curve between (midX - r, sy) and (midX + r, ey)
|
||||
// instead of a backward V kink.
|
||||
if (Math.abs(ey - sy) < cornerRadius * 2) {
|
||||
return [
|
||||
`M ${sx} ${sy}`,
|
||||
`H ${midX - cornerRadius}`,
|
||||
`C ${midX} ${sy} ${midX} ${ey} ${midX + cornerRadius} ${ey}`,
|
||||
`H ${ex}`,
|
||||
].join(' ');
|
||||
}
|
||||
const half = cornerRadius / 2;
|
||||
return [
|
||||
`M ${sx} ${sy}`,
|
||||
`H ${midX - cornerRadius}`,
|
||||
`C ${midX - half} ${sy} ${midX} ${sy + half * dy} ${midX} ${sy + cornerRadius * dy}`,
|
||||
`V ${ey - cornerRadius * dy}`,
|
||||
`C ${midX} ${ey - half * dy} ${midX + half} ${ey} ${midX + cornerRadius} ${ey}`,
|
||||
`H ${ex}`,
|
||||
].join(' ');
|
||||
}
|
||||
|
||||
function buildRoutedEdges(
|
||||
nodesById: Map<string, GraphNode>,
|
||||
edges: Edge[],
|
||||
options: WorkflowGraphLayoutOptions,
|
||||
): Pick<WorkflowGraphModel, 'routedEdges' | 'sharedSegments'> {
|
||||
const routedEdges: RoutedEdge[] = [];
|
||||
for (const edge of edges) {
|
||||
const fromNode = nodesById.get(edge.fromId);
|
||||
const toNode = nodesById.get(edge.toId);
|
||||
if (!fromNode || !toNode) continue;
|
||||
const startX = fromNode.x + options.nodeWidth;
|
||||
const endX = toNode.x;
|
||||
const startY = boxCenterY(fromNode);
|
||||
const endY = boxCenterY(toNode);
|
||||
routedEdges.push({...edge, fromNode, toNode, path: connectorPath(startX, startY, endX, endY, options)});
|
||||
}
|
||||
|
||||
return {routedEdges, sharedSegments: []};
|
||||
}
|
||||
|
||||
export function createWorkflowGraphModel(
|
||||
jobs: ActionsJob[],
|
||||
expandedMatrixNodeIds: ReadonlySet<string> = new Set(),
|
||||
partialOptions: Partial<WorkflowGraphLayoutOptions> = {},
|
||||
): WorkflowGraphModel {
|
||||
const options = {...defaultLayoutOptions, ...partialOptions};
|
||||
const {nodes, edges} = buildVisualGraph(jobs, expandedMatrixNodeIds, options);
|
||||
const nodesById = new Map(nodes.map((n) => [n.id, n]));
|
||||
const adjacency = buildNodeAdjacency(edges);
|
||||
assignNodeLevels(nodes, adjacency);
|
||||
assignNodeCoordinates(nodesById, nodes, adjacency, options);
|
||||
return {nodes, edges, ...buildRoutedEdges(nodesById, edges, options), adjacency};
|
||||
}
|
||||
|
||||
export function getWorkflowGraphLayoutOptions(partialOptions: Partial<WorkflowGraphLayoutOptions> = {}): WorkflowGraphLayoutOptions {
|
||||
return {...defaultLayoutOptions, ...partialOptions};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user