Show logs if step has error (#3979)

web/src/assets/locales/en.json

@@ -191,6 +191,7 @@
       "pipelines_for_pr": "Pipelines for pull request #{index}",
       "exit_code": "Exit Code {exitCode}",
       "loading": "Loading…",
+      "no_logs": "No logs",
       "pipeline": "Pipeline #{pipelineId}",
       "log_title": "Step Logs",
       "log_download_error": "There was an error while downloading the log file",

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

@@ -13,7 +13,7 @@
 
         <div class="flex flex-row items-center ml-auto gap-x-2">
           <IconButton
-            v-if="step?.end_time !== undefined"
+            v-if="step?.end_time !== undefined && hasLogs"
             :is-loading="downloadInProgress"
             :title="$t('repo.pipeline.actions.log_download')"
             class="!hover:bg-white !hover:bg-opacity-10"
@@ -45,7 +45,7 @@
       </div>
 
       <div
-        v-show="hasLogs && loadedLogs"
+        v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
         ref="consoleElement"
         class="w-full max-w-full grid grid-cols-[min-content,minmax(0,1fr),min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto text-xs md:text-sm"
       >
@@ -88,10 +88,10 @@
       </div>
 
       <div class="m-auto text-xl text-wp-text-alt-100">
-        <span v-if="step?.error">{{ step.error }}</span>
+        <span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
-        <span v-else-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.start_time">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
+        <div v-else-if="log?.length === 0">{{ $t('repo.pipeline.no_logs') }}</div>
       </div>
 
       <div
@@ -99,7 +99,8 @@
         class="flex items-center w-full bg-wp-code-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
       >
         <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
-        <span class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
+        <span v-if="step?.error" class="px-2">{{ step.error }}</span>
+        <span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
     </div>
   </div>
@@ -160,7 +161,7 @@ const loadedLogs = computed(() => !!log.value);
 const hasLogs = computed(
   () =>
     // we do not have logs for skipped steps
-    repo?.value && pipeline.value && step.value && step.value.state !== 'skipped' && step.value.state !== 'killed',
+    repo?.value && pipeline.value && step.value && step.value.state !== 'skipped',
 );
 const autoScroll = useStorage('log-auto-scroll', false);
 const showActions = ref(false);

web/src/views/repo/pipeline/Pipeline.vue

@@ -8,17 +8,7 @@
       />
 
       <div class="flex items-start justify-center flex-grow relative basis-full md:basis-auto">
-        <Container v-if="selectedStep?.error" fill-width class="p-0">
+        <Container v-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
-          <Panel>
-            <div class="flex flex-col items-center text-center gap-4">
-              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
-              <span class="text-xl">{{ $t('repo.pipeline.we_got_some_errors') }}</span>
-              <span class="whitespace-pre-wrap">{{ selectedStep?.error }}</span>
-            </div>
-          </Panel>
-        </Container>
-
-        <Container v-else-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center text-center gap-4">
               <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
@@ -86,7 +76,6 @@ import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';
 import type { Pipeline, PipelineStep, Repo, RepoPermissions } from '~/lib/api/types';
-import { findStep } from '~/utils/helpers';
 
 const props = defineProps<{
   stepId?: string | null;
@@ -148,8 +137,6 @@ const selectedStepId = computed({
   },
 });
 
-const selectedStep = computed(() => findStep(pipeline.value.workflows || [], selectedStepId.value || -1));
-
 const { doSubmit: approvePipeline, isLoading: isApprovingPipeline } = useAsyncAction(async () => {
   if (!repo) {
     throw new Error('Unexpected: Repo is undefined');