diff options
Diffstat (limited to 'web_src/js/components/RepoActionView.vue')
| -rw-r--r-- | web_src/js/components/RepoActionView.vue | 241 |
1 files changed, 119 insertions, 122 deletions
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 8d18ad2301..925ff7e087 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -1,124 +1,3 @@ -<template> - <div class="ui container action-view-container"> - <div class="action-view-header"> - <div class="action-info-summary"> - <div class="action-info-summary-title"> - <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/> - <h2 class="action-info-summary-title-text"> - {{ run.title }} - </h2> - </div> - <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove"> - {{ locale.approve }} - </button> - <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel"> - {{ locale.cancel }} - </button> - <button class="ui basic small compact button gt-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun"> - {{ locale.rerun_all }} - </button> - </div> - <div class="action-commit-summary"> - {{ run.commit.localeCommit }} - <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a> - {{ run.commit.localePushedBy }} - <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a> - <span class="ui label" v-if="run.commit.shortSHA"> - <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> - </span> - </div> - </div> - <div class="action-view-body"> - <div class="action-view-left"> - <div class="job-group-section"> - <div class="job-brief-list"> - <a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1"> - <div class="job-brief-item-left"> - <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/> - <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span> - </div> - <span class="job-brief-item-right"> - <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun && onHoverRerunIndex === job.id"/> - <span class="step-summary-duration">{{ job.duration }}</span> - </span> - </a> - </div> - </div> - <div class="job-artifacts" v-if="artifacts.length > 0"> - <div class="job-artifacts-title"> - {{ locale.artifactsTitle }} - </div> - <ul class="job-artifacts-list"> - <li class="job-artifacts-item" v-for="artifact in artifacts" :key="artifact.name"> - <a class="job-artifacts-link" target="_blank" :href="run.link+'/artifacts/'+artifact.name"> - <SvgIcon name="octicon-file" class="ui text black job-artifacts-icon"/>{{ artifact.name }} - </a> - </li> - </ul> - </div> - </div> - - <div class="action-view-right"> - <div class="job-info-header"> - <div class="job-info-header-left"> - <h3 class="job-info-header-title"> - {{ currentJob.title }} - </h3> - <p class="job-info-header-detail"> - {{ currentJob.detail }} - </p> - </div> - <div class="job-info-header-right"> - <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> - <button class="btn gt-interact-bg gt-p-3"> - <SvgIcon name="octicon-gear" :size="18"/> - </button> - <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> - <a class="item" @click="toggleTimeDisplay('seconds')"> - <i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> - {{ locale.showLogSeconds }} - </a> - <a class="item" @click="toggleTimeDisplay('stamp')"> - <i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> - {{ locale.showTimeStamps }} - </a> - <a class="item" @click="toggleFullScreen()"> - <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> - {{ locale.showFullScreen }} - </a> - <div class="divider"/> - <a :class="['item', currentJob.steps.length === 0 ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank"> - <i class="icon"><SvgIcon name="octicon-download"/></i> - {{ locale.downloadLogs }} - </a> - </div> - </div> - </div> - </div> - <div class="job-step-container" ref="steps"> - <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i"> - <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''"> - <!-- If the job is done and the job step log is loaded for the first time, show the loading icon - currentJobStepsStates[i].cursor === null means the log is loaded for the first time - --> - <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/> - <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/> - <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/> - - <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span> - <span class="step-summary-duration">{{ jobStep.duration }}</span> - </div> - - <!-- the log elements could be a lot, do not use v-if to destroy/reconstruct the DOM, - use native DOM elements for "log line" to improve performance, Vue is not suitable for managing so many reactive elements. --> - <div class="job-step-logs" ref="logs" v-show="currentJobStepsStates[i].expanded"/> - </div> - </div> - </div> - </div> - </div> -</template> - <script> import {SvgIcon} from '../svg.js'; import ActionRunStatus from './ActionRunStatus.vue'; @@ -472,9 +351,127 @@ export function initRepositoryActionView() { }); view.mount(el); } - </script> +<template> + <div class="ui container action-view-container"> + <div class="action-view-header"> + <div class="action-info-summary"> + <div class="action-info-summary-title"> + <ActionRunStatus :locale-status="locale.status[run.status]" :status="run.status" :size="20"/> + <h2 class="action-info-summary-title-text"> + {{ run.title }} + </h2> + </div> + <button class="ui basic small compact button primary" @click="approveRun()" v-if="run.canApprove"> + {{ locale.approve }} + </button> + <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel"> + {{ locale.cancel }} + </button> + <button class="ui basic small compact button gt-mr-0 link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun"> + {{ locale.rerun_all }} + </button> + </div> + <div class="action-commit-summary"> + {{ run.commit.localeCommit }} + <a class="muted" :href="run.commit.link">{{ run.commit.shortSHA }}</a> + {{ run.commit.localePushedBy }} + <a class="muted" :href="run.commit.pusher.link">{{ run.commit.pusher.displayName }}</a> + <span class="ui label" v-if="run.commit.shortSHA"> + <a :href="run.commit.branch.link">{{ run.commit.branch.name }}</a> + </span> + </div> + </div> + <div class="action-view-body"> + <div class="action-view-left"> + <div class="job-group-section"> + <div class="job-brief-list"> + <a class="job-brief-item" :href="run.link+'/jobs/'+index" :class="parseInt(jobIndex) === index ? 'selected' : ''" v-for="(job, index) in run.jobs" :key="job.id" @mouseenter="onHoverRerunIndex = job.id" @mouseleave="onHoverRerunIndex = -1"> + <div class="job-brief-item-left"> + <ActionRunStatus :locale-status="locale.status[job.status]" :status="job.status"/> + <span class="job-brief-name gt-mx-3 gt-ellipsis">{{ job.name }}</span> + </div> + <span class="job-brief-item-right"> + <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun gt-mx-3 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun && onHoverRerunIndex === job.id"/> + <span class="step-summary-duration">{{ job.duration }}</span> + </span> + </a> + </div> + </div> + <div class="job-artifacts" v-if="artifacts.length > 0"> + <div class="job-artifacts-title"> + {{ locale.artifactsTitle }} + </div> + <ul class="job-artifacts-list"> + <li class="job-artifacts-item" v-for="artifact in artifacts" :key="artifact.name"> + <a class="job-artifacts-link" target="_blank" :href="run.link+'/artifacts/'+artifact.name"> + <SvgIcon name="octicon-file" class="ui text black job-artifacts-icon"/>{{ artifact.name }} + </a> + </li> + </ul> + </div> + </div> + <div class="action-view-right"> + <div class="job-info-header"> + <div class="job-info-header-left"> + <h3 class="job-info-header-title"> + {{ currentJob.title }} + </h3> + <p class="job-info-header-detail"> + {{ currentJob.detail }} + </p> + </div> + <div class="job-info-header-right"> + <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible"> + <button class="btn gt-interact-bg gt-p-3"> + <SvgIcon name="octicon-gear" :size="18"/> + </button> + <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak> + <a class="item" @click="toggleTimeDisplay('seconds')"> + <i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showLogSeconds }} + </a> + <a class="item" @click="toggleTimeDisplay('stamp')"> + <i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showTimeStamps }} + </a> + <a class="item" @click="toggleFullScreen()"> + <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i> + {{ locale.showFullScreen }} + </a> + <div class="divider"/> + <a :class="['item', currentJob.steps.length === 0 ? 'disabled' : '']" :href="run.link+'/jobs/'+jobIndex+'/logs'" target="_blank"> + <i class="icon"><SvgIcon name="octicon-download"/></i> + {{ locale.downloadLogs }} + </a> + </div> + </div> + </div> + </div> + <div class="job-step-container" ref="steps"> + <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i"> + <div class="job-step-summary" @click.stop="toggleStepLogs(i)" :class="currentJobStepsStates[i].expanded ? 'selected' : ''"> + <!-- If the job is done and the job step log is loaded for the first time, show the loading icon + currentJobStepsStates[i].cursor === null means the log is loaded for the first time + --> + <SvgIcon v-if="isDone(run.status) && currentJobStepsStates[i].expanded && currentJobStepsStates[i].cursor === null" name="octicon-sync" class="gt-mr-3 job-status-rotate"/> + <SvgIcon v-else :name="currentJobStepsStates[i].expanded ? 'octicon-chevron-down': 'octicon-chevron-right'" class="gt-mr-3"/> + <ActionRunStatus :status="jobStep.status" class="gt-mr-3"/> + + <span class="step-summary-msg gt-ellipsis">{{ jobStep.summary }}</span> + <span class="step-summary-duration">{{ jobStep.duration }}</span> + </div> + + <!-- the log elements could be a lot, do not use v-if to destroy/reconstruct the DOM, + use native DOM elements for "log line" to improve performance, Vue is not suitable for managing so many reactive elements. --> + <div class="job-step-logs" ref="logs" v-show="currentJobStepsStates[i].expanded"/> + </div> + </div> + </div> + </div> + </div> +</template> <style scoped> .action-view-body { padding-top: 12px; |