Add own workflow model (#1784)

Closes #1287

---------

Co-authored-by: 6543 <6543@obermui.de>

web/src/components/repo/pipeline/PipelineLog.vue

@@ -104,7 +104,7 @@ const apiClient = useApiClient();
 
 const loadedStepSlug = ref<string>();
 const stepSlug = computed(() => `${repo?.value.owner} - ${repo?.value.name} - ${pipeline.value.id} - ${stepId.value}`);
-const step = computed(() => pipeline.value && findStep(pipeline.value.steps || [], stepId.value));
+const step = computed(() => pipeline.value && findStep(pipeline.value.workflows || [], stepId.value));
 const stream = ref<EventSource>();
 const log = ref<LogLine[]>();
 const consoleElement = ref<Element>();

web/src/components/repo/pipeline/PipelineStepDuration.vue

@@ -1,12 +1,12 @@
 <template>
-  <span v-if="step.start_time !== undefined" class="ml-auto text-sm">{{ duration }}</span>
+  <span v-if="started" class="ml-auto text-sm">{{ duration }}</span>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, toRef } from 'vue';
 
 import { useElapsedTime } from '~/compositions/useElapsedTime';
-import { PipelineStep } from '~/lib/api/types';
+import { PipelineStep, PipelineWorkflow } from '~/lib/api/types';
 import { durationAsNumber } from '~/utils/duration';
 
 export default defineComponent({
@@ -15,16 +15,22 @@ export default defineComponent({
   props: {
     step: {
       type: Object as PropType<PipelineStep>,
-      required: true,
+      default: undefined,
+    },
+
+    workflow: {
+      type: Object as PropType<PipelineWorkflow>,
+      default: undefined,
     },
   },
 
   setup(props) {
     const step = toRef(props, 'step');
+    const workflow = toRef(props, 'workflow');
 
     const durationRaw = computed(() => {
-      const start = step.value.start_time || 0;
-      const end = step.value.end_time || 0;
+      const start = (step.value ? step.value?.start_time : workflow.value?.start_time) || 0;
+      const end = (step.value ? step.value?.end_time : workflow.value?.end_time) || 0;
 
       if (end === 0 && start === 0) {
         return undefined;
@@ -37,7 +43,7 @@ export default defineComponent({
       return (end - start) * 1000;
     });
 
-    const running = computed(() => step.value.state === 'running');
+    const running = computed(() => (step.value ? step.value?.state : workflow.value?.state) === 'running');
     const { time: durationElapsed } = useElapsedTime(running, durationRaw);
 
     const duration = computed(() => {
@@ -45,10 +51,11 @@ export default defineComponent({
         return '-';
       }
 
-      return durationAsNumber(durationElapsed.value);
+      return durationAsNumber(durationElapsed.value || 0);
     });
+    const started = computed(() => (step.value ? step.value?.start_time : workflow.value?.start_time) !== undefined);
 
-    return { duration };
+    return { started, duration };
   },
 });
 </script>

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -38,14 +38,14 @@
       </div>
     </div>
 
-    <div v-if="pipeline.steps === undefined || pipeline.steps.length === 0" class="m-auto mt-4">
+    <div v-if="pipeline.workflows === undefined || pipeline.workflows.length === 0" class="m-auto mt-4">
       <span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
     </div>
 
     <div class="flex-grow min-h-0 w-full relative">
       <div class="absolute top-0 left-0 right-0 h-full flex flex-col overflow-y-scroll gap-y-2">
         <div
-          v-for="workflow in pipeline.steps"
+          v-for="workflow in pipeline.workflows"
           :key="workflow.id"
           class="p-2 md:rounded-md bg-white shadow dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
         >
@@ -56,7 +56,7 @@
               </div>
             </div>
             <button
-              v-if="pipeline.steps && pipeline.steps.length > 1"
+              v-if="pipeline.workflows && pipeline.workflows.length > 1"
               type="button"
               :title="workflow.name"
               class="flex items-center gap-2 py-2 px-1 hover-effect rounded-md"
@@ -71,7 +71,7 @@
               <span class="truncate">{{ workflow.name }}</span>
               <PipelineStepDuration
                 v-if="workflow.start_time !== workflow.end_time"
-                :step="workflow"
+                :workflow="workflow"
                 class="mr-1 pr-2px"
               />
             </button>
@@ -81,7 +81,7 @@
             :class="{
               'max-h-screen': !workflowsCollapsed[workflow.id],
               'max-h-0': workflowsCollapsed[workflow.id],
-              'ml-6': pipeline.steps && pipeline.steps.length > 1,
+              'ml-6': pipeline.workflows && pipeline.workflows.length > 1,
             }"
           >
             <button
@@ -93,7 +93,7 @@
               :class="{
                 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': selectedStepId && selectedStepId === step.pid,
                 'mt-1':
-                  (pipeline.steps && pipeline.steps.length > 1) ||
+                  (pipeline.workflows && pipeline.workflows.length > 1) ||
                   (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
@@ -132,8 +132,8 @@ const pipeline = toRef(props, 'pipeline');
 const { prettyRef } = usePipeline(pipeline);
 
 const workflowsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
-  props.pipeline.steps && props.pipeline.steps.length > 1
-    ? (props.pipeline.steps || []).reduce(
+  props.pipeline.workflows && props.pipeline.workflows.length > 1
+    ? (props.pipeline.workflows || []).reduce(
         (collapsed, workflow) => ({
           ...collapsed,
           [workflow.id]: ['success', 'skipped', 'blocked'].includes(workflow.state),