mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-03 05:59:30 +00:00
e2ab8a46ed
Some improvements to the Page Header and Tab UI. Original | New :--------:|:-------: ![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png) | ![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png) ![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png) | ![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png) ![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png) | ![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png) ![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png) | ![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png) ![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png) | ![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png) What? - Create a new Scaffold component, which includes the header and tabs required for a page. - Use this component to wrap all the views that have a header. - Ensures consistency in headers between different pages. - [x] Add support to use custom html/component in place of title (for repo page, pipeline page, etc) - [x] Add support of right icon buttons (for repo page, pipeline page, etc) - [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient) - [x] Make new header ui resposive
225 lines
7.1 KiB
Vue
225 lines
7.1 KiB
Vue
<template>
|
|
<template v-if="pipeline && repo">
|
|
<Scaffold v-model:activeTab="activeTab" enable-tabs disable-hash-mode :go-back="goBack">
|
|
<template #title>
|
|
<span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
|
|
<span class="<md:hidden">-</span>
|
|
<span class="w-full md:w-auto text-center truncate">{{ message }}</span>
|
|
</template>
|
|
|
|
<template #titleActions>
|
|
<PipelineStatusIcon :pipeline="pipeline" class="flex flex-shrink-0" />
|
|
|
|
<template v-if="repoPermissions.push">
|
|
<Button
|
|
v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
|
|
class="flex-shrink-0"
|
|
:text="$t('repo.pipeline.actions.cancel')"
|
|
:is-loading="isCancelingPipeline"
|
|
@click="cancelPipeline"
|
|
/>
|
|
<Button
|
|
v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
|
|
class="flex-shrink-0"
|
|
:text="$t('repo.pipeline.actions.restart')"
|
|
:is-loading="isRestartingPipeline"
|
|
@click="restartPipeline"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<template #tabActions>
|
|
<div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
|
|
<div class="flex space-x-1 items-center flex-shrink-0">
|
|
<Icon name="since" />
|
|
<Tooltip>
|
|
<span>{{ since }}</span>
|
|
<template #popper
|
|
><span class="font-bold">{{ $t('repo.pipeline.created') }}</span> {{ created }}</template
|
|
>
|
|
</Tooltip>
|
|
</div>
|
|
<div class="flex space-x-1 items-center flex-shrink-0">
|
|
<Icon name="duration" />
|
|
<span>{{ duration }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<Tab id="tasks" :title="$t('repo.pipeline.tasks')" />
|
|
<Tab id="config" :title="$t('repo.pipeline.config')" />
|
|
<Tab
|
|
v-if="pipeline.event === 'push' || pipeline.event === 'pull_request'"
|
|
id="changed-files"
|
|
:title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
|
|
/>
|
|
</Scaffold>
|
|
|
|
<router-view />
|
|
</template>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Tooltip } from 'floating-vue';
|
|
import { computed, defineComponent, inject, onBeforeUnmount, onMounted, provide, Ref, toRef, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import Button from '~/components/atomic/Button.vue';
|
|
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
|
|
import Tab from '~/components/layout/scaffold/Tab.vue';
|
|
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
|
|
import useApiClient from '~/compositions/useApiClient';
|
|
import { useAsyncAction } from '~/compositions/useAsyncAction';
|
|
import { useFavicon } from '~/compositions/useFavicon';
|
|
import useNotifications from '~/compositions/useNotifications';
|
|
import usePipeline from '~/compositions/usePipeline';
|
|
import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
|
|
import { Repo, RepoPermissions } from '~/lib/api/types';
|
|
import PipelineStore from '~/store/pipelines';
|
|
|
|
export default defineComponent({
|
|
name: 'PipelineWrapper',
|
|
|
|
components: {
|
|
Button,
|
|
PipelineStatusIcon,
|
|
Tab,
|
|
Tooltip,
|
|
Scaffold,
|
|
},
|
|
|
|
props: {
|
|
repoOwner: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
repoName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
pipelineId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
setup(props) {
|
|
const apiClient = useApiClient();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const notifications = useNotifications();
|
|
const favicon = useFavicon();
|
|
const i18n = useI18n();
|
|
|
|
const pipelineStore = PipelineStore();
|
|
const pipelineId = toRef(props, 'pipelineId');
|
|
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 pipeline = pipelineStore.getPipeline(repoOwner, repoName, pipelineId);
|
|
const { since, duration, created } = usePipeline(pipeline);
|
|
provide('pipeline', pipeline);
|
|
|
|
const { message } = usePipeline(pipeline);
|
|
|
|
async function loadPipeline(): Promise<void> {
|
|
if (!repo) {
|
|
throw new Error('Unexpected: Repo is undefined');
|
|
}
|
|
|
|
await pipelineStore.loadPipeline(repo.value.owner, repo.value.name, parseInt(pipelineId.value, 10));
|
|
|
|
favicon.updateStatus(pipeline.value.status);
|
|
}
|
|
|
|
const { doSubmit: cancelPipeline, isLoading: isCancelingPipeline } = useAsyncAction(async () => {
|
|
if (!repo) {
|
|
throw new Error('Unexpected: Repo is undefined');
|
|
}
|
|
|
|
if (!pipeline.value.procs) {
|
|
throw new Error('Unexpected: Pipeline procs not loaded');
|
|
}
|
|
|
|
// TODO: is selectedProcId right?
|
|
// const proc = findProc(pipeline.value.procs, selectedProcId.value || 2);
|
|
|
|
// if (!proc) {
|
|
// throw new Error('Unexpected: Proc not found');
|
|
// }
|
|
|
|
await apiClient.cancelPipeline(repo.value.owner, repo.value.name, parseInt(pipelineId.value, 10), 0);
|
|
notifications.notify({ title: i18n.t('repo.pipeline.actions.cancel_success'), type: 'success' });
|
|
});
|
|
|
|
const { doSubmit: restartPipeline, isLoading: isRestartingPipeline } = useAsyncAction(async () => {
|
|
if (!repo) {
|
|
throw new Error('Unexpected: Repo is undefined');
|
|
}
|
|
|
|
await apiClient.restartPipeline(repo.value.owner, repo.value.name, pipelineId.value, { fork: true });
|
|
notifications.notify({ title: i18n.t('repo.pipeline.actions.restart_success'), type: 'success' });
|
|
// TODO: directly send to newest pipeline?
|
|
await router.push({ name: 'repo', params: { repoName: repo.value.name, repoOwner: repo.value.owner } });
|
|
});
|
|
|
|
onMounted(loadPipeline);
|
|
watch([repo, pipelineId], loadPipeline);
|
|
onBeforeUnmount(() => {
|
|
favicon.updateStatus('default');
|
|
});
|
|
|
|
const activeTab = computed({
|
|
get() {
|
|
if (route.name === 'repo-pipeline-changed-files') {
|
|
return 'changed-files';
|
|
}
|
|
|
|
if (route.name === 'repo-pipeline-config') {
|
|
return 'config';
|
|
}
|
|
|
|
return 'tasks';
|
|
},
|
|
set(tab: string) {
|
|
if (tab === 'tasks') {
|
|
router.replace({ name: 'repo-pipeline' });
|
|
}
|
|
|
|
if (tab === 'changed-files') {
|
|
router.replace({ name: 'repo-pipeline-changed-files' });
|
|
}
|
|
|
|
if (tab === 'config') {
|
|
router.replace({ name: 'repo-pipeline-config' });
|
|
}
|
|
},
|
|
});
|
|
|
|
return {
|
|
repoPermissions,
|
|
pipeline,
|
|
repo,
|
|
message,
|
|
isCancelingPipeline,
|
|
isRestartingPipeline,
|
|
activeTab,
|
|
since,
|
|
duration,
|
|
cancelPipeline,
|
|
restartPipeline,
|
|
goBack: useRouteBackOrDefault({ name: 'repo' }),
|
|
created,
|
|
};
|
|
},
|
|
});
|
|
</script>
|