mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-05-20 09:18:15 +00:00
Update build layout (#678)
* show yml config of build in UI * fix after merge * improve build configs * fix approve & decline build * improve build layout * undo un-related changes * fix type * move icon back to right side Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
Anbraten
GitHub
parent
77923ad3dd
commit
9d17e26671
|
|
@ -5,14 +5,14 @@
|
|||
<span class="underline">{{ build.owner }} / {{ build.name }}</span>
|
||||
<span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
|
||||
<div class="flex flex-col mt-2">
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="duration" />
|
||||
<span>{{ duration }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="since" />
|
||||
<span>{{ since }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="duration" />
|
||||
<span>{{ duration }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="rounded-md w-full p-4 shadow border bg-white dark:bg-dark-gray-700 dark:border-dark-200">
|
||||
<slot />
|
||||
<div class="rounded-md w-full shadow overflow-hidden text-gray-500 bg-gray-300 dark:bg-dark-gray-700">
|
||||
<div v-if="title" class="font-bold bg-gray-400 dark:bg-dark-gray-800 p-2">{{ title }}</div>
|
||||
<div class="w-full p-4 bg-gray-300 dark:bg-dark-gray-700">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,8 +13,11 @@ import { defineComponent } from 'vue';
|
|||
export default defineComponent({
|
||||
name: 'Panel',
|
||||
|
||||
setup() {
|
||||
return {};
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ import { Build, Repo } from '~/lib/api/types';
|
|||
import { findProc } from '~/utils/helpers';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BuildLogs',
|
||||
name: 'BuildLog',
|
||||
|
||||
components: {},
|
||||
|
||||
112
web/src/components/repo/build/BuildProcList.vue
Normal file
112
web/src/components/repo/build/BuildProcList.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="flex flex-col w-3/12 text-gray-200 dark:text-gray-400">
|
||||
<div class="flex py-4 px-2 mx-2 justify-between flex-shrink-0 text-gray-500 border-b-1 dark:border-dark-gray-600">
|
||||
<div class="flex space-x-1 items-center flex-shrink-0">
|
||||
<div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
|
||||
<span>{{ build.author }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-1 items-center">
|
||||
<Icon v-if="build.event === 'push'" name="push" />
|
||||
<Icon v-if="build.event === 'deployment'" name="deployment" />
|
||||
<Icon v-else-if="build.event === 'tag'" name="tag" />
|
||||
<a
|
||||
v-else-if="build.event === 'pull_request'"
|
||||
class="flex items-center text-link"
|
||||
:href="build.link_url"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon name="pull_request" />
|
||||
<span>{{
|
||||
`#${build.ref.replaceAll('refs/pull/', '').replaceAll('refs/merge-requests/', '').replaceAll('/head', '')}`
|
||||
}}</span></a
|
||||
>
|
||||
<span v-if="build.event !== 'pull_request'">{{ build.branch }}</span>
|
||||
</div>
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
<template v-if="build.event === 'pull_request'">
|
||||
<Icon name="commit" />
|
||||
<span>{{ build.commit.slice(0, 10) }}</span>
|
||||
</template>
|
||||
<a v-else class="text-link flex items-center" :href="build.link_url" target="_blank">
|
||||
<Icon name="commit" />
|
||||
<span>{{ build.commit.slice(0, 10) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="proc in build.procs" :key="proc.id">
|
||||
<div class="p-4 pb-1 flex flex-wrap items-center justify-between">
|
||||
<span>{{ proc.name }}</span>
|
||||
<div v-if="proc.environ" class="text-xs">
|
||||
<div v-for="(value, key) in proc.environ" :key="key">
|
||||
<span
|
||||
class="
|
||||
pl-2
|
||||
pr-1
|
||||
py-0.5
|
||||
bg-gray-800
|
||||
dark:bg-gray-600
|
||||
border-2 border-gray-800
|
||||
dark:border-gray-600
|
||||
rounded-l-full
|
||||
"
|
||||
>{{ key }}</span
|
||||
>
|
||||
<span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">{{
|
||||
value
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="job in proc.children"
|
||||
:key="job.pid"
|
||||
class="flex p-2 pl-6 cursor-pointer items-center hover:bg-gray-700 hover:dark:bg-dark-gray-900"
|
||||
:class="{ 'bg-gray-700 !dark:bg-dark-gray-600': selectedProcId && selectedProcId === job.pid }"
|
||||
@click="$emit('update:selected-proc-id', job.pid)"
|
||||
>
|
||||
<div v-if="['success'].includes(job.state)" class="w-2 h-2 bg-lime-400 rounded-full" />
|
||||
<div v-if="['pending', 'skipped'].includes(job.state)" class="w-2 h-2 bg-gray-400 rounded-full" />
|
||||
<div
|
||||
v-if="['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state)"
|
||||
class="w-2 h-2 bg-red-400 rounded-full"
|
||||
/>
|
||||
<div v-if="['started', 'running'].includes(job.state)" class="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
<span class="ml-2">{{ job.name }}</span>
|
||||
<BuildProcDuration :proc="job" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
import BuildProcDuration from '~/components/repo/build/BuildProcDuration.vue';
|
||||
import { Build } from '~/lib/api/types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BuildProcList',
|
||||
|
||||
components: {
|
||||
BuildProcDuration,
|
||||
},
|
||||
|
||||
props: {
|
||||
build: {
|
||||
type: Object as PropType<Build>,
|
||||
required: true,
|
||||
},
|
||||
|
||||
selectedProcId: {
|
||||
type: Number as PropType<number | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
emits: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
'update:selected-proc-id': (selectedProcId: number) => true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<div class="flex mt-4 w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
|
||||
<div v-if="build.error" class="flex flex-col p-4">
|
||||
<span class="text-red-400 font-bold text-xl mb-2">Execution error</span>
|
||||
<span class="text-red-400">{{ build.error }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-3/12 text-gray-200 dark:text-gray-400">
|
||||
<div v-for="proc in build.procs" :key="proc.id">
|
||||
<div class="p-4 pb-1 flex flex-wrap items-center justify-between">
|
||||
<span>{{ proc.name }}</span>
|
||||
<div v-if="proc.environ" class="text-xs">
|
||||
<div v-for="(value, key) in proc.environ" :key="key">
|
||||
<span
|
||||
class="
|
||||
pl-2
|
||||
pr-1
|
||||
py-0.5
|
||||
bg-gray-800
|
||||
dark:bg-gray-600
|
||||
border-2 border-gray-800
|
||||
dark:border-gray-600
|
||||
rounded-l-full
|
||||
"
|
||||
>{{ key }}</span
|
||||
>
|
||||
<span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">{{
|
||||
value
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="job in proc.children"
|
||||
:key="job.pid"
|
||||
class="flex p-2 pl-6 cursor-pointer items-center hover:bg-gray-700 hover:dark:bg-dark-gray-900"
|
||||
:class="{ 'bg-gray-700 !dark:bg-dark-gray-600': selectedProcId && selectedProcId === job.pid }"
|
||||
@click="$emit('update:selected-proc-id', job.pid)"
|
||||
>
|
||||
<div v-if="['success'].includes(job.state)" class="w-2 h-2 bg-lime-400 rounded-full" />
|
||||
<div v-if="['pending', 'skipped'].includes(job.state)" class="w-2 h-2 bg-gray-400 rounded-full" />
|
||||
<div
|
||||
v-if="['killed', 'error', 'failure', 'blocked', 'declined'].includes(job.state)"
|
||||
class="w-2 h-2 bg-red-400 rounded-full"
|
||||
/>
|
||||
<div v-if="['started', 'running'].includes(job.state)" class="w-2 h-2 bg-blue-400 rounded-full" />
|
||||
<span class="ml-2">{{ job.name }}</span>
|
||||
<BuildProcDuration :proc="job" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BuildLogs v-if="selectedProcId" :build="build" :proc-id="selectedProcId" class="w-9/12 flex-grow" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
|
||||
import BuildLogs from '~/components/repo/build/BuildLogs.vue';
|
||||
import BuildProcDuration from '~/components/repo/build/BuildProcDuration.vue';
|
||||
import { Build } from '~/lib/api/types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BuildProcs',
|
||||
|
||||
components: {
|
||||
BuildLogs,
|
||||
BuildProcDuration,
|
||||
},
|
||||
|
||||
props: {
|
||||
build: {
|
||||
type: Object as PropType<Build>,
|
||||
required: true,
|
||||
},
|
||||
|
||||
selectedProcId: {
|
||||
type: Number as PropType<number | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
emits: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
'update:selected-proc-id': (selectedProcId: number) => true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-show="isActive" :aria-hidden="!isActive">
|
||||
<div v-if="$slots.default" v-show="isActive" :aria-hidden="!isActive" class="mt-4">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex w-full pt-4 mb-4">
|
||||
<div class="flex w-full pt-4">
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@ export default (build: Ref<Build | undefined>) => {
|
|||
return undefined;
|
||||
}
|
||||
|
||||
const start = build.value.started_at || 0;
|
||||
|
||||
if (start === 0) {
|
||||
return 0;
|
||||
}
|
||||
const start = build.value.created_at || 0;
|
||||
|
||||
return start * 1000;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default class WoodpeckerClient extends ApiClient {
|
|||
return this._get(`/api/repos/${owner}/${repo}/builds?${query}`) as Promise<Build[]>;
|
||||
}
|
||||
|
||||
getBuild(owner: string, repo: string, number: string | 'latest'): Promise<Build> {
|
||||
getBuild(owner: string, repo: string, number: number | 'latest'): Promise<Build> {
|
||||
return this._get(`/api/repos/${owner}/${repo}/builds/${number}`) as Promise<Build>;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,10 +48,17 @@ const routes: RouteRecordRaw[] = [
|
|||
props: (route) => ({ branch: route.params.branch }),
|
||||
},
|
||||
{
|
||||
path: 'build/:buildId/:procId?',
|
||||
name: 'repo-build',
|
||||
component: (): Component => import('~/views/repo/RepoBuild.vue'),
|
||||
path: 'build/:buildId',
|
||||
component: (): Component => import('~/views/repo/build/BuildWrapper.vue'),
|
||||
props: true,
|
||||
children: [
|
||||
{
|
||||
path: ':procId?',
|
||||
name: 'repo-build',
|
||||
component: (): Component => import('~/views/repo/build/Build.vue'),
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export default defineStore({
|
|||
});
|
||||
},
|
||||
async loadBuild(owner: string, repo: string, buildNumber: number) {
|
||||
const build = await apiClient.getBuild(owner, repo, buildNumber.toString());
|
||||
const build = await apiClient.getBuild(owner, repo, buildNumber);
|
||||
this.setBuild(owner, repo, build);
|
||||
},
|
||||
async loadBuildFeed() {
|
||||
|
|
|
|||
|
|
@ -1,261 +0,0 @@
|
|||
<template>
|
||||
<template v-if="build && repo">
|
||||
<FluidContainer class="flex border-b mb-4 items-center dark:border-gray-600 min-w-0">
|
||||
<IconButton icon="back" class="flex-shrink-0" @click="goBack" />
|
||||
<h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
|
||||
Pipeline #{{ buildId }} - {{ message }}
|
||||
</h1>
|
||||
<BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
|
||||
<template v-if="repoPermissions.push">
|
||||
<Button
|
||||
v-if="build.status === 'pending' || build.status === 'running'"
|
||||
class="ml-4 flex-shrink-0"
|
||||
text="Cancel"
|
||||
:is-loading="isCancelingBuild"
|
||||
@click="cancelBuild"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="build.status !== 'blocked' && build.status !== 'declined'"
|
||||
class="ml-4 flex-shrink-0"
|
||||
text="Restart"
|
||||
:is-loading="isRestartingBuild"
|
||||
@click="restartBuild"
|
||||
/>
|
||||
</template>
|
||||
</FluidContainer>
|
||||
|
||||
<div class="p-0 flex flex-col flex-grow">
|
||||
<FluidContainer class="flex text-gray-500 justify-between py-0">
|
||||
<div class="flex space-x-2 items-center">
|
||||
<div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
|
||||
<span>{{ build.author }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon v-if="build.event === 'pull_request'" name="pull_request" />
|
||||
<Icon v-else-if="build.event === 'deployment'" name="deployment" />
|
||||
<Icon v-else-if="build.event === 'tag'" name="tag" />
|
||||
<Icon v-else name="push" />
|
||||
<a v-if="build.event === 'pull_request'" class="text-link" :href="build.link_url" target="_blank">{{
|
||||
`#${build.ref.replaceAll('refs/pull/', '').replaceAll('/merge', '').replaceAll('/head', '')}`
|
||||
}}</a>
|
||||
<span v-else>{{ build.branch }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="commit" />
|
||||
<span v-if="build.event === 'pull_request'">{{ build.commit.slice(0, 10) }}</span>
|
||||
<a v-else class="text-link" :href="build.link_url" target="_blank">{{ build.commit.slice(0, 10) }}</a>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="since" />
|
||||
<span>{{ since }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Icon name="duration" />
|
||||
<span>{{ duration }}</span>
|
||||
</div>
|
||||
</FluidContainer>
|
||||
|
||||
<div v-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
|
||||
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
|
||||
<p class="text-xl text-gray-500">This pipeline is awaiting approval by some maintainer!</p>
|
||||
<div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
|
||||
<Button color="green" text="Approve" :is-loading="isApprovingBuild" @click="approveBuild" />
|
||||
<Button color="red" text="Decline" :is-loading="isDecliningBuild" @click="declineBuild" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
|
||||
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
|
||||
<p class="text-xl text-gray-500">This pipeline has been declined!</p>
|
||||
</div>
|
||||
<BuildProcs v-else v-model:selected-proc-id="selectedProcId" :build="build" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, onBeforeUnmount, onMounted, PropType, Ref, toRef, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import Icon from '~/components/atomic/Icon.vue';
|
||||
import IconButton from '~/components/atomic/IconButton.vue';
|
||||
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
||||
import BuildProcs from '~/components/repo/build/BuildProcs.vue';
|
||||
import BuildStatusIcon from '~/components/repo/build/BuildStatusIcon.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useBuild from '~/compositions/useBuild';
|
||||
import { useFavicon } from '~/compositions/useFavicon';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
|
||||
import { Repo, RepoPermissions } from '~/lib/api/types';
|
||||
import BuildStore from '~/store/builds';
|
||||
import { findProc } from '~/utils/helpers';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RepoBuild',
|
||||
|
||||
components: {
|
||||
FluidContainer,
|
||||
Button,
|
||||
BuildStatusIcon,
|
||||
BuildProcs,
|
||||
IconButton,
|
||||
Icon,
|
||||
},
|
||||
|
||||
props: {
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoOwner: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
buildId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
procId: {
|
||||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const apiClient = useApiClient();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const notifications = useNotifications();
|
||||
const favicon = useFavicon();
|
||||
|
||||
const buildStore = BuildStore();
|
||||
const buildId = toRef(props, 'buildId');
|
||||
const repoOwner = toRef(props, 'repoOwner');
|
||||
const repoName = toRef(props, 'repoName');
|
||||
const repo = inject<Ref<Repo>>('repo');
|
||||
const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
|
||||
if (!repo || !repoPermissions) {
|
||||
throw new Error('Unexpected: "repo" & "repoPermissions" should be provided at this place');
|
||||
}
|
||||
|
||||
const build = buildStore.getBuild(repoOwner, repoName, buildId);
|
||||
const { since, duration, message } = useBuild(build);
|
||||
const procId = toRef(props, 'procId');
|
||||
const selectedProcId = computed({
|
||||
get() {
|
||||
if (procId.value) {
|
||||
return parseInt(procId.value, 10);
|
||||
}
|
||||
|
||||
if (!build.value || !build.value.procs || !build.value.procs[0].children) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return build.value.procs[0].children[0].pid;
|
||||
},
|
||||
set(_selectedProcId: number | null) {
|
||||
if (!_selectedProcId) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.replace({ params: { ...route.params, procId: `${_selectedProcId}` } });
|
||||
},
|
||||
});
|
||||
|
||||
async function loadBuild(): Promise<void> {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await buildStore.loadBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10));
|
||||
|
||||
favicon.updateStatus(build.value.status);
|
||||
}
|
||||
|
||||
const { doSubmit: cancelBuild, isLoading: isCancelingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
if (!build.value.procs) {
|
||||
throw new Error('Unexpected: Build procs not loaded');
|
||||
}
|
||||
|
||||
// TODO: is selectedProcId right?
|
||||
const proc = findProc(build.value.procs, selectedProcId.value || 2);
|
||||
|
||||
if (!proc) {
|
||||
throw new Error('Unexpected: Proc not found');
|
||||
}
|
||||
|
||||
await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), proc.ppid);
|
||||
notifications.notify({ title: 'Pipeline canceled', type: 'success' });
|
||||
});
|
||||
|
||||
const { doSubmit: approveBuild, isLoading: isApprovingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.approveBuild(repo.value.owner, repo.value.name, buildId.value);
|
||||
notifications.notify({ title: 'Pipeline approved', type: 'success' });
|
||||
});
|
||||
|
||||
const { doSubmit: declineBuild, isLoading: isDecliningBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.declineBuild(repo.value.owner, repo.value.name, buildId.value);
|
||||
notifications.notify({ title: 'Pipeline declined', type: 'success' });
|
||||
});
|
||||
|
||||
const { doSubmit: restartBuild, isLoading: isRestartingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.restartBuild(repo.value.owner, repo.value.name, buildId.value, { fork: true });
|
||||
notifications.notify({ title: 'Pipeline restarted', type: 'success' });
|
||||
// TODO: directly send to newest build?
|
||||
await router.push({ name: 'repo', params: { repoName: repo.value.name, repoOwner: repo.value.owner } });
|
||||
});
|
||||
|
||||
onMounted(loadBuild);
|
||||
watch([repo, buildId], loadBuild);
|
||||
onBeforeUnmount(() => {
|
||||
favicon.updateStatus('default');
|
||||
});
|
||||
|
||||
return {
|
||||
repoPermissions,
|
||||
selectedProcId,
|
||||
build,
|
||||
since,
|
||||
duration,
|
||||
repo,
|
||||
message,
|
||||
isCancelingBuild,
|
||||
isApprovingBuild,
|
||||
isDecliningBuild,
|
||||
isRestartingBuild,
|
||||
cancelBuild,
|
||||
restartBuild,
|
||||
approveBuild,
|
||||
declineBuild,
|
||||
goBack: useRouteBackOrDefault({ name: 'repo' }),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<IconButton v-if="repoPermissions.admin" class="ml-2" :to="{ name: 'repo-settings' }" icon="settings" />
|
||||
</div>
|
||||
|
||||
<Tabs v-model="activeTab" disable-hash-mode>
|
||||
<Tabs v-model="activeTab" disable-hash-mode class="mb-4">
|
||||
<Tab title="Activity" />
|
||||
<Tab title="Branches" />
|
||||
</Tabs>
|
||||
|
|
|
|||
125
web/src/views/repo/build/Build.vue
Normal file
125
web/src/views/repo/build/Build.vue
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<div class="p-0 flex flex-col flex-grow">
|
||||
<div v-if="build.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center">
|
||||
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
|
||||
<p class="text-xl text-gray-500">This pipeline is awaiting approval by some maintainer!</p>
|
||||
<div v-if="repoPermissions.push" class="flex mt-2 space-x-4">
|
||||
<Button color="green" text="Approve" :is-loading="isApprovingBuild" @click="approveBuild" />
|
||||
<Button color="red" text="Decline" :is-loading="isDecliningBuild" @click="declineBuild" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="build.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
|
||||
<Icon name="status-blocked" class="w-32 h-32 text-gray-500" />
|
||||
<p class="text-xl text-gray-500">This pipeline has been declined!</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex w-full bg-gray-600 dark:bg-dark-gray-800 min-h-0 flex-grow">
|
||||
<div v-if="build.error" class="flex flex-col p-4">
|
||||
<span class="text-red-400 font-bold text-xl mb-2">Execution error</span>
|
||||
<span class="text-red-400">{{ build.error }}</span>
|
||||
</div>
|
||||
|
||||
<BuildProcList v-model:selected-proc-id="selectedProcId" :build="build" />
|
||||
|
||||
<BuildLog v-if="selectedProcId" :build="build" :proc-id="selectedProcId" class="w-9/12 flex-grow" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, PropType, Ref, toRef } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import Icon from '~/components/atomic/Icon.vue';
|
||||
import BuildLog from '~/components/repo/build/BuildLog.vue';
|
||||
import BuildProcList from '~/components/repo/build/BuildProcList.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
import { Build, Repo, RepoPermissions } from '~/lib/api/types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Build',
|
||||
|
||||
components: {
|
||||
Button,
|
||||
BuildProcList,
|
||||
Icon,
|
||||
BuildLog,
|
||||
},
|
||||
|
||||
props: {
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
procId: {
|
||||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const apiClient = useApiClient();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const notifications = useNotifications();
|
||||
|
||||
const build = inject<Ref<Build>>('build');
|
||||
const repo = inject<Ref<Repo>>('repo');
|
||||
const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
|
||||
if (!repo || !repoPermissions || !build) {
|
||||
throw new Error('Unexpected: "repo", "repoPermissions" & "build" should be provided at this place');
|
||||
}
|
||||
|
||||
const procId = toRef(props, 'procId');
|
||||
const selectedProcId = computed({
|
||||
get() {
|
||||
if (procId.value) {
|
||||
return parseInt(procId.value, 10);
|
||||
}
|
||||
|
||||
if (!build.value || !build.value.procs || !build.value.procs[0].children) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return build.value.procs[0].children[0].pid;
|
||||
},
|
||||
set(_selectedProcId: number | null) {
|
||||
if (!_selectedProcId) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.replace({ params: { ...route.params, procId: `${_selectedProcId}` } });
|
||||
},
|
||||
});
|
||||
|
||||
const { doSubmit: approveBuild, isLoading: isApprovingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.approveBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
|
||||
notifications.notify({ title: 'Pipeline approved', type: 'success' });
|
||||
});
|
||||
|
||||
const { doSubmit: declineBuild, isLoading: isDecliningBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.declineBuild(repo.value.owner, repo.value.name, `${build.value.number}`);
|
||||
notifications.notify({ title: 'Pipeline declined', type: 'success' });
|
||||
});
|
||||
|
||||
return {
|
||||
repoPermissions,
|
||||
selectedProcId,
|
||||
build,
|
||||
isApprovingBuild,
|
||||
isDecliningBuild,
|
||||
approveBuild,
|
||||
declineBuild,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
219
web/src/views/repo/build/BuildWrapper.vue
Normal file
219
web/src/views/repo/build/BuildWrapper.vue
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<template v-if="build && repo">
|
||||
<FluidContainer class="flex flex-col min-w-0 border-b dark:border-gray-600 !pb-0 mb-4">
|
||||
<div class="flex mb-2 items-center">
|
||||
<IconButton icon="back" class="flex-shrink-0" @click="goBack" />
|
||||
|
||||
<h1 class="text-xl ml-2 text-gray-500 whitespace-nowrap overflow-hidden overflow-ellipsis">
|
||||
Pipeline #{{ buildId }} - {{ message }}
|
||||
</h1>
|
||||
|
||||
<BuildStatusIcon :build="build" class="flex flex-shrink-0 ml-auto" />
|
||||
|
||||
<template v-if="repoPermissions.push">
|
||||
<Button
|
||||
v-if="build.status === 'pending' || build.status === 'running'"
|
||||
class="ml-4 flex-shrink-0"
|
||||
text="Cancel"
|
||||
:is-loading="isCancelingBuild"
|
||||
@click="cancelBuild"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="build.status !== 'blocked' && build.status !== 'declined'"
|
||||
class="ml-4 flex-shrink-0"
|
||||
text="Restart"
|
||||
:is-loading="isRestartingBuild"
|
||||
@click="restartBuild"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-y-2 items-center justify-between">
|
||||
<Tabs v-model="activeTab" disable-hash-mode>
|
||||
<Tab id="tasks" title="Tasks" />
|
||||
</Tabs>
|
||||
|
||||
<div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 ml-auto">
|
||||
<div class="flex space-x-1 items-center flex-shrink-0">
|
||||
<Icon name="since" />
|
||||
<span>{{ since }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-1 items-center flex-shrink-0">
|
||||
<Icon name="duration" />
|
||||
<span>{{ duration }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FluidContainer>
|
||||
|
||||
<router-view />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
inject,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
PropType,
|
||||
provide,
|
||||
Ref,
|
||||
toRef,
|
||||
watch,
|
||||
} from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import Button from '~/components/atomic/Button.vue';
|
||||
import IconButton from '~/components/atomic/IconButton.vue';
|
||||
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
||||
import BuildStatusIcon from '~/components/repo/build/BuildStatusIcon.vue';
|
||||
import Tab from '~/components/tabs/Tab.vue';
|
||||
import Tabs from '~/components/tabs/Tabs.vue';
|
||||
import useApiClient from '~/compositions/useApiClient';
|
||||
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
||||
import useBuild from '~/compositions/useBuild';
|
||||
import { useFavicon } from '~/compositions/useFavicon';
|
||||
import useNotifications from '~/compositions/useNotifications';
|
||||
import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
|
||||
import { Repo, RepoPermissions } from '~/lib/api/types';
|
||||
import BuildStore from '~/store/builds';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BuildWrapper',
|
||||
|
||||
components: {
|
||||
FluidContainer,
|
||||
Button,
|
||||
BuildStatusIcon,
|
||||
IconButton,
|
||||
Tabs,
|
||||
Tab,
|
||||
},
|
||||
|
||||
props: {
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoOwner: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
buildId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
procId: {
|
||||
type: String as PropType<string | null>,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const apiClient = useApiClient();
|
||||
const router = useRouter();
|
||||
const notifications = useNotifications();
|
||||
const favicon = useFavicon();
|
||||
|
||||
const buildStore = BuildStore();
|
||||
const buildId = toRef(props, 'buildId');
|
||||
const repoOwner = toRef(props, 'repoOwner');
|
||||
const repoName = toRef(props, 'repoName');
|
||||
const repo = inject<Ref<Repo>>('repo');
|
||||
const repoPermissions = inject<Ref<RepoPermissions>>('repo-permissions');
|
||||
if (!repo || !repoPermissions) {
|
||||
throw new Error('Unexpected: "repo" & "repoPermissions" should be provided at this place');
|
||||
}
|
||||
|
||||
const build = buildStore.getBuild(repoOwner, repoName, buildId);
|
||||
const { since, duration } = useBuild(build);
|
||||
provide('build', build);
|
||||
|
||||
const { message } = useBuild(build);
|
||||
|
||||
async function loadBuild(): Promise<void> {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await buildStore.loadBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10));
|
||||
|
||||
favicon.updateStatus(build.value.status);
|
||||
}
|
||||
|
||||
const { doSubmit: cancelBuild, isLoading: isCancelingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
if (!build.value.procs) {
|
||||
throw new Error('Unexpected: Build procs not loaded');
|
||||
}
|
||||
|
||||
// TODO: is selectedProcId right?
|
||||
// const proc = findProc(build.value.procs, selectedProcId.value || 2);
|
||||
|
||||
// if (!proc) {
|
||||
// throw new Error('Unexpected: Proc not found');
|
||||
// }
|
||||
|
||||
await apiClient.cancelBuild(repo.value.owner, repo.value.name, parseInt(buildId.value, 10), 0);
|
||||
notifications.notify({ title: 'Pipeline canceled', type: 'success' });
|
||||
});
|
||||
|
||||
const { doSubmit: restartBuild, isLoading: isRestartingBuild } = useAsyncAction(async () => {
|
||||
if (!repo) {
|
||||
throw new Error('Unexpected: Repo is undefined');
|
||||
}
|
||||
|
||||
await apiClient.restartBuild(repo.value.owner, repo.value.name, buildId.value, { fork: true });
|
||||
notifications.notify({ title: 'Pipeline restarted', type: 'success' });
|
||||
// TODO: directly send to newest build?
|
||||
await router.push({ name: 'repo', params: { repoName: repo.value.name, repoOwner: repo.value.owner } });
|
||||
});
|
||||
|
||||
onMounted(loadBuild);
|
||||
watch([repo, buildId], loadBuild);
|
||||
onBeforeUnmount(() => {
|
||||
favicon.updateStatus('default');
|
||||
});
|
||||
|
||||
const activeTab = computed({
|
||||
get() {
|
||||
return 'tasks';
|
||||
},
|
||||
set(tab: string) {
|
||||
if (tab === 'tasks') {
|
||||
router.replace({ name: 'repo-build' });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
repoPermissions,
|
||||
build,
|
||||
repo,
|
||||
message,
|
||||
isCancelingBuild,
|
||||
isRestartingBuild,
|
||||
activeTab,
|
||||
since,
|
||||
duration,
|
||||
cancelBuild,
|
||||
restartBuild,
|
||||
goBack: useRouteBackOrDefault({ name: 'repo' }),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue