mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-22 18:01:02 +00:00
Code Issues Projects Releases Wiki Activity

Make pipeline steps collapsible (#1304)

Browse source 
Closes #948
This commit is contained in:
Lukas 2022-10-21 22:09:36 +02:00 committed by GitHub
parent 4785e5b5a4
commit 5bcb939bce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
web/src/components/repo/pipeline/PipelineProcList.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col w-full md:w-3/12 text-gray-600 dark:text-gray-400">
<div class="flex flex-col w-full md:w-3/12 md:ml-2 text-gray-600 dark:text-gray-400 gap-2 pb-2">
<div
class="flex md:ml-2 p-4 space-x-1 justify-between flex-shrink-0 border-b-1 md:rounded-md bg-gray-300 dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 border-b-1 md:rounded-md bg-gray-300 dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
>
<div class="flex space-x-1 items-center flex-shrink-0">
<div class="flex items-center">
@ -42,30 +42,50 @@
<span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
</div>
<div class="flex flex-grow relative min-h-0 overflow-y-auto">
<div class="md:absolute top-0 left-0 w-full">
<div v-for="proc in pipeline.procs" :key="proc.id">
<div class="p-4 pb-1 flex flex-wrap items-center justify-between">
<div v-if="pipeline.procs && pipeline.procs.length > 1" class="flex items-center">
<span class="ml-2">{{ proc.name }}</span>
</div>
<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 text-gray-200 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 class="flex flex-grow flex-col relative min-h-0 overflow-y-auto gap-2">
<div
v-for="proc in pipeline.procs"
:key="proc.id"
class="p-2 md:rounded-md bg-gray-300 dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
>
<div class="flex flex-col gap-2">
<div v-if="proc.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1">
<div v-for="(value, key) in proc.environ" :key="key">
<span
class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 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
<button
type="button"
class="flex items-center py-2 pl-1 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-md"
@click="procsCollapsed[proc.id] = !!!procsCollapsed[proc.id]"
>
<Icon
name="chevron-right"
class="transition-transform duration-150 mr-2"
:class="{ 'transform rotate-90': !procsCollapsed[proc.id] }"
/>
{{ proc.name }}
</button>
</div>
<div
class="transition-height duration-150 overflow-hidden ml-6"
:class="{ 'max-h-screen': !procsCollapsed[proc.id], 'max-h-0': procsCollapsed[proc.id] }"
>
<button
v-for="job in proc.children"
:key="job.pid"
class="flex mx-2 mb-1 p-2 pl-6 cursor-pointer rounded-md items-center hover:bg-gray-300 hover:dark:bg-dark-gray-700"
:class="{ 'bg-gray-300 !dark:bg-dark-gray-700': selectedProcId && selectedProcId === job.pid }"
type="button"
class="flex mt-1 p-2 border-2 border-transparent rounded-md items-center hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 w-full"
:class="{
'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': 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" />
@ -77,49 +97,32 @@
<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>
<PipelineProcDuration :proc="job" />
</div>
</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, toRef } from 'vue';
<script lang="ts" setup>
import { ref, toRef } from 'vue';
import Icon from '~/components/atomic/Icon.vue';
import PipelineProcDuration from '~/components/repo/pipeline/PipelineProcDuration.vue';
import usePipeline from '~/compositions/usePipeline';
import { Pipeline } from '~/lib/api/types';
import { Pipeline, PipelineProc } from '~/lib/api/types';
export default defineComponent({
name: 'PipelineProcList',
const props = defineProps<{
pipeline: Pipeline;
selectedProcId?: number | null;
}>();
components: {
PipelineProcDuration,
},
defineEmits<{
(event: 'update:selected-proc-id', selectedProcId: number): void;
}>();
props: {
pipeline: {
type: Object as PropType<Pipeline>,
required: true,
},
const pipeline = toRef(props, 'pipeline');
const { prettyRef } = usePipeline(pipeline);
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,
},
setup(props) {
const pipeline = toRef(props, 'pipeline');
const { prettyRef } = usePipeline(pipeline);
return { prettyRef };
},
});
const procsCollapsed = ref<Record<PipelineProc['id'], boolean>>({});
</script>

3
web/windi.config.ts
View file

@ -17,6 +17,9 @@ export default defineConfig({
900: '#2e323e',
},
},
transitionProperty: {
height: 'max-height',
},
stroke: (theme) => theme('colors'),
fill: (theme) => theme('colors'),
},