mirror of
https://github.com/go-gitea/gitea.git
synced 2026-08-04 04:22:15 +02:00
Merge branch 'main' into add-file-tree-to-file-view-page
This commit is contained in:
@@ -6,24 +6,25 @@
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
|
||||
withDefaults(defineProps<{
|
||||
status: '',
|
||||
status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'unknown',
|
||||
size?: number,
|
||||
className?: string,
|
||||
localeStatus?: string,
|
||||
}>(), {
|
||||
size: 16,
|
||||
className: undefined,
|
||||
className: '',
|
||||
localeStatus: undefined,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus" v-if="status">
|
||||
<span :data-tooltip-content="localeStatus ?? status" v-if="status">
|
||||
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
|
||||
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
|
||||
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'cancelled'"/>
|
||||
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
|
||||
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
|
||||
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
|
||||
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else-if="['failure', 'cancelled', 'unknown'].includes(status)"/>
|
||||
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -25,10 +25,9 @@ const body = computed(() => {
|
||||
const root = ref<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
|
||||
const data: IssuePathInfo = e.detail;
|
||||
root.value.addEventListener('ce-load-context-popup', (e: CustomEventInit<IssuePathInfo>) => {
|
||||
if (!loading.value && issue.value === null) {
|
||||
load(data);
|
||||
load(e.detail);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -38,6 +38,25 @@ function parseLineCommand(line: LogLine): LogLineCommand | null {
|
||||
return null;
|
||||
}
|
||||
|
||||
function isLogElementInViewport(el: HTMLElement): boolean {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return rect.top >= 0 && rect.bottom <= window.innerHeight; // only check height but not width
|
||||
}
|
||||
|
||||
type LocaleStorageOptions = {
|
||||
autoScroll: boolean;
|
||||
expandRunning: boolean;
|
||||
};
|
||||
|
||||
function getLocaleStorageOptions(): LocaleStorageOptions {
|
||||
try {
|
||||
const optsJson = localStorage.getItem('actions-view-options');
|
||||
if (optsJson) return JSON.parse(optsJson);
|
||||
} catch {}
|
||||
// if no options in localStorage, or failed to parse, return default options
|
||||
return {autoScroll: true, expandRunning: false};
|
||||
}
|
||||
|
||||
const sfc = {
|
||||
name: 'RepoActionView',
|
||||
components: {
|
||||
@@ -51,7 +70,17 @@ const sfc = {
|
||||
locale: Object,
|
||||
},
|
||||
|
||||
watch: {
|
||||
optionAlwaysAutoScroll() {
|
||||
this.saveLocaleStorageOptions();
|
||||
},
|
||||
optionAlwaysExpandRunning() {
|
||||
this.saveLocaleStorageOptions();
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const {autoScroll, expandRunning} = getLocaleStorageOptions();
|
||||
return {
|
||||
// internal state
|
||||
loadingAbortController: null,
|
||||
@@ -65,6 +94,8 @@ const sfc = {
|
||||
'log-time-stamp': false,
|
||||
'log-time-seconds': false,
|
||||
},
|
||||
optionAlwaysAutoScroll: autoScroll ?? false,
|
||||
optionAlwaysExpandRunning: expandRunning ?? false,
|
||||
|
||||
// provided by backend
|
||||
run: {
|
||||
@@ -142,9 +173,19 @@ const sfc = {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// get the active container element, either the `job-step-logs` or the `job-log-list` in the `job-log-group`
|
||||
getLogsContainer(stepIndex: number) {
|
||||
const el = this.$refs.logs[stepIndex];
|
||||
saveLocaleStorageOptions() {
|
||||
const opts: LocaleStorageOptions = {autoScroll: this.optionAlwaysAutoScroll, expandRunning: this.optionAlwaysExpandRunning};
|
||||
localStorage.setItem('actions-view-options', JSON.stringify(opts));
|
||||
},
|
||||
|
||||
// get the job step logs container ('.job-step-logs')
|
||||
getJobStepLogsContainer(stepIndex: number): HTMLElement {
|
||||
return this.$refs.logs[stepIndex];
|
||||
},
|
||||
|
||||
// get the active logs container element, either the `job-step-logs` or the `job-log-list` in the `job-log-group`
|
||||
getActiveLogsContainer(stepIndex: number): HTMLElement {
|
||||
const el = this.getJobStepLogsContainer(stepIndex);
|
||||
return el._stepLogsActiveContainer ?? el;
|
||||
},
|
||||
// begin a log group
|
||||
@@ -217,9 +258,17 @@ const sfc = {
|
||||
);
|
||||
},
|
||||
|
||||
shouldAutoScroll(stepIndex: number): boolean {
|
||||
if (!this.optionAlwaysAutoScroll) return false;
|
||||
const el = this.getJobStepLogsContainer(stepIndex);
|
||||
// if the logs container is empty, then auto-scroll if the step is expanded
|
||||
if (!el.lastChild) return this.currentJobStepsStates[stepIndex].expanded;
|
||||
return isLogElementInViewport(el.lastChild);
|
||||
},
|
||||
|
||||
appendLogs(stepIndex: number, startTime: number, logLines: LogLine[]) {
|
||||
for (const line of logLines) {
|
||||
const el = this.getLogsContainer(stepIndex);
|
||||
const el = this.getActiveLogsContainer(stepIndex);
|
||||
const cmd = parseLineCommand(line);
|
||||
if (cmd?.name === 'group') {
|
||||
this.beginLogGroup(stepIndex, startTime, line, cmd);
|
||||
@@ -264,6 +313,7 @@ const sfc = {
|
||||
const abortController = new AbortController();
|
||||
this.loadingAbortController = abortController;
|
||||
try {
|
||||
const isFirstLoad = !this.run.status;
|
||||
const job = await this.fetchJobData(abortController);
|
||||
if (this.loadingAbortController !== abortController) return;
|
||||
|
||||
@@ -273,11 +323,20 @@ const sfc = {
|
||||
|
||||
// sync the currentJobStepsStates to store the job step states
|
||||
for (let i = 0; i < this.currentJob.steps.length; i++) {
|
||||
const expanded = isFirstLoad && this.optionAlwaysExpandRunning && this.currentJob.steps[i].status === 'running';
|
||||
if (!this.currentJobStepsStates[i]) {
|
||||
// initial states for job steps
|
||||
this.currentJobStepsStates[i] = {cursor: null, expanded: false};
|
||||
this.currentJobStepsStates[i] = {cursor: null, expanded};
|
||||
}
|
||||
}
|
||||
|
||||
// find the step indexes that need to auto-scroll
|
||||
const autoScrollStepIndexes = new Map<number, boolean>();
|
||||
for (const logs of job.logs.stepsLog ?? []) {
|
||||
if (autoScrollStepIndexes.has(logs.step)) continue;
|
||||
autoScrollStepIndexes.set(logs.step, this.shouldAutoScroll(logs.step));
|
||||
}
|
||||
|
||||
// append logs to the UI
|
||||
for (const logs of job.logs.stepsLog ?? []) {
|
||||
// save the cursor, it will be passed to backend next time
|
||||
@@ -285,6 +344,15 @@ const sfc = {
|
||||
this.appendLogs(logs.step, logs.started, logs.lines);
|
||||
}
|
||||
|
||||
// auto-scroll to the last log line of the last step
|
||||
let autoScrollJobStepElement: HTMLElement;
|
||||
for (let stepIndex = 0; stepIndex < this.currentJob.steps.length; stepIndex++) {
|
||||
if (!autoScrollStepIndexes.get(stepIndex)) continue;
|
||||
autoScrollJobStepElement = this.getJobStepLogsContainer(stepIndex);
|
||||
}
|
||||
autoScrollJobStepElement?.lastElementChild.scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
||||
|
||||
// clear the interval timer if the job is done
|
||||
if (this.run.done && this.intervalID) {
|
||||
clearInterval(this.intervalID);
|
||||
this.intervalID = null;
|
||||
@@ -393,6 +461,8 @@ export function initRepositoryActionView() {
|
||||
skipped: el.getAttribute('data-locale-status-skipped'),
|
||||
blocked: el.getAttribute('data-locale-status-blocked'),
|
||||
},
|
||||
logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
|
||||
logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
|
||||
},
|
||||
});
|
||||
view.mount(el);
|
||||
@@ -495,6 +565,17 @@ export function initRepositoryActionView() {
|
||||
<i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
||||
{{ locale.showFullScreen }}
|
||||
</a>
|
||||
|
||||
<div class="divider"/>
|
||||
<a class="item" @click="optionAlwaysAutoScroll = !optionAlwaysAutoScroll">
|
||||
<i class="icon"><SvgIcon :name="optionAlwaysAutoScroll ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
||||
{{ locale.logsAlwaysAutoScroll }}
|
||||
</a>
|
||||
<a class="item" @click="optionAlwaysExpandRunning = !optionAlwaysExpandRunning">
|
||||
<i class="icon"><SvgIcon :name="optionAlwaysExpandRunning ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
|
||||
{{ locale.logsAlwaysExpandRunning }}
|
||||
</a>
|
||||
|
||||
<div class="divider"/>
|
||||
<a :class="['item', !currentJob.steps.length ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank">
|
||||
<i class="icon"><SvgIcon name="octicon-download"/></i>
|
||||
@@ -551,11 +632,13 @@ export function initRepositoryActionView() {
|
||||
|
||||
.action-info-summary-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.action-info-summary-title-text {
|
||||
font-size: 20px;
|
||||
margin: 0 0 0 8px;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {createApp, nextTick} from 'vue';
|
||||
import {nextTick} from 'vue';
|
||||
import {SvgIcon} from '../svg.ts';
|
||||
import {showErrorToast} from '../modules/toast.ts';
|
||||
import {GET} from '../modules/fetch.ts';
|
||||
@@ -17,11 +17,11 @@ type SelectedTab = 'branches' | 'tags';
|
||||
|
||||
type TabLoadingStates = Record<SelectedTab, '' | 'loading' | 'done'>
|
||||
|
||||
let currentElRoot: HTMLElement;
|
||||
|
||||
const sfc = {
|
||||
components: {SvgIcon},
|
||||
|
||||
props: {
|
||||
elRoot: HTMLElement,
|
||||
},
|
||||
computed: {
|
||||
searchFieldPlaceholder() {
|
||||
return this.selectedTab === 'branches' ? this.textFilterBranch : this.textFilterTag;
|
||||
@@ -55,18 +55,15 @@ const sfc = {
|
||||
return `${this.currentRepoLink}/branches/_new/${this.currentRefType}/${pathEscapeSegments(this.currentRefShortName)}`;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
menuVisible(visible) {
|
||||
menuVisible(visible: boolean) {
|
||||
if (!visible) return;
|
||||
this.focusSearchField();
|
||||
this.loadTabItems();
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const elRoot = currentElRoot;
|
||||
const shouldShowTabBranches = elRoot.getAttribute('data-show-tab-branches') === 'true';
|
||||
const shouldShowTabBranches = this.elRoot.getAttribute('data-show-tab-branches') === 'true';
|
||||
return {
|
||||
csrfToken: window.config.csrfToken,
|
||||
allItems: [] as ListItem[],
|
||||
@@ -76,43 +73,51 @@ const sfc = {
|
||||
activeItemIndex: 0,
|
||||
tabLoadingStates: {} as TabLoadingStates,
|
||||
|
||||
textReleaseCompare: elRoot.getAttribute('data-text-release-compare'),
|
||||
textBranches: elRoot.getAttribute('data-text-branches'),
|
||||
textTags: elRoot.getAttribute('data-text-tags'),
|
||||
textFilterBranch: elRoot.getAttribute('data-text-filter-branch'),
|
||||
textFilterTag: elRoot.getAttribute('data-text-filter-tag'),
|
||||
textDefaultBranchLabel: elRoot.getAttribute('data-text-default-branch-label'),
|
||||
textCreateTag: elRoot.getAttribute('data-text-create-tag'),
|
||||
textCreateBranch: elRoot.getAttribute('data-text-create-branch'),
|
||||
textCreateRefFrom: elRoot.getAttribute('data-text-create-ref-from'),
|
||||
textNoResults: elRoot.getAttribute('data-text-no-results'),
|
||||
textViewAllBranches: elRoot.getAttribute('data-text-view-all-branches'),
|
||||
textViewAllTags: elRoot.getAttribute('data-text-view-all-tags'),
|
||||
textReleaseCompare: this.elRoot.getAttribute('data-text-release-compare'),
|
||||
textBranches: this.elRoot.getAttribute('data-text-branches'),
|
||||
textTags: this.elRoot.getAttribute('data-text-tags'),
|
||||
textFilterBranch: this.elRoot.getAttribute('data-text-filter-branch'),
|
||||
textFilterTag: this.elRoot.getAttribute('data-text-filter-tag'),
|
||||
textDefaultBranchLabel: this.elRoot.getAttribute('data-text-default-branch-label'),
|
||||
textCreateTag: this.elRoot.getAttribute('data-text-create-tag'),
|
||||
textCreateBranch: this.elRoot.getAttribute('data-text-create-branch'),
|
||||
textCreateRefFrom: this.elRoot.getAttribute('data-text-create-ref-from'),
|
||||
textNoResults: this.elRoot.getAttribute('data-text-no-results'),
|
||||
textViewAllBranches: this.elRoot.getAttribute('data-text-view-all-branches'),
|
||||
textViewAllTags: this.elRoot.getAttribute('data-text-view-all-tags'),
|
||||
|
||||
currentRepoDefaultBranch: elRoot.getAttribute('data-current-repo-default-branch'),
|
||||
currentRepoLink: elRoot.getAttribute('data-current-repo-link'),
|
||||
currentTreePath: elRoot.getAttribute('data-current-tree-path'),
|
||||
currentRefType: elRoot.getAttribute('data-current-ref-type'),
|
||||
currentRefShortName: elRoot.getAttribute('data-current-ref-short-name'),
|
||||
currentRepoDefaultBranch: this.elRoot.getAttribute('data-current-repo-default-branch'),
|
||||
currentRepoLink: this.elRoot.getAttribute('data-current-repo-link'),
|
||||
currentTreePath: this.elRoot.getAttribute('data-current-tree-path'),
|
||||
currentRefType: this.elRoot.getAttribute('data-current-ref-type'),
|
||||
currentRefShortName: this.elRoot.getAttribute('data-current-ref-short-name'),
|
||||
|
||||
refLinkTemplate: elRoot.getAttribute('data-ref-link-template'),
|
||||
refFormActionTemplate: elRoot.getAttribute('data-ref-form-action-template'),
|
||||
dropdownFixedText: elRoot.getAttribute('data-dropdown-fixed-text'),
|
||||
refLinkTemplate: this.elRoot.getAttribute('data-ref-link-template'),
|
||||
refFormActionTemplate: this.elRoot.getAttribute('data-ref-form-action-template'),
|
||||
dropdownFixedText: this.elRoot.getAttribute('data-dropdown-fixed-text'),
|
||||
showTabBranches: shouldShowTabBranches,
|
||||
showTabTags: elRoot.getAttribute('data-show-tab-tags') === 'true',
|
||||
allowCreateNewRef: elRoot.getAttribute('data-allow-create-new-ref') === 'true',
|
||||
showViewAllRefsEntry: elRoot.getAttribute('data-show-view-all-refs-entry') === 'true',
|
||||
|
||||
enableFeed: elRoot.getAttribute('data-enable-feed') === 'true',
|
||||
showTabTags: this.elRoot.getAttribute('data-show-tab-tags') === 'true',
|
||||
allowCreateNewRef: this.elRoot.getAttribute('data-allow-create-new-ref') === 'true',
|
||||
showViewAllRefsEntry: this.elRoot.getAttribute('data-show-view-all-refs-entry') === 'true',
|
||||
enableFeed: this.elRoot.getAttribute('data-enable-feed') === 'true',
|
||||
};
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
document.body.addEventListener('click', (e) => {
|
||||
if (this.$el.contains(e.target)) return;
|
||||
if (this.menuVisible) this.menuVisible = false;
|
||||
});
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.refFormActionTemplate) {
|
||||
// if the selector is used in a form and needs to change the form action,
|
||||
// make a mock item and select it to update the form action
|
||||
const item: ListItem = {selected: true, refType: this.currentRefType, refShortName: this.currentRefShortName, rssFeedLink: ''};
|
||||
this.selectItem(item);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectItem(item: ListItem) {
|
||||
this.menuVisible = false;
|
||||
@@ -209,16 +214,6 @@ const sfc = {
|
||||
},
|
||||
};
|
||||
|
||||
export function initRepoBranchTagSelector(selector) {
|
||||
for (const elRoot of document.querySelectorAll(selector)) {
|
||||
// it is very hacky, but it is the only way to pass the elRoot to the "data()" function
|
||||
// it could be improved in the future to do more rewriting.
|
||||
currentElRoot = elRoot;
|
||||
const comp = {...sfc};
|
||||
createApp(comp).mount(elRoot);
|
||||
}
|
||||
}
|
||||
|
||||
export default sfc; // activate IDE's Vue plugin
|
||||
</script>
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user