<script>
import { GlButton, GlLink, GlSafeHtmlDirective, GlTableLite } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import createFlash from '~/flash';
import { redirectTo } from '~/lib/utils/url_utility';
import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
import RetryFailedJobMutation from '../../graphql/mutations/retry_failed_job.mutation.graphql';
import { DEFAULT_FIELDS } from '../../constants';

export default {
  fields: DEFAULT_FIELDS,
  retry: __('Retry'),
  components: {
    CiBadge,
    GlButton,
    GlLink,
    GlTableLite,
  },
  directives: {
    SafeHtml: GlSafeHtmlDirective,
  },
  props: {
    failedJobs: {
      type: Array,
      required: true,
    },
  },
  methods: {
    async retryJob(id) {
      try {
        const {
          data: {
            jobRetry: { errors, job },
          },
        } = await this.$apollo.mutate({
          mutation: RetryFailedJobMutation,
          variables: { id },
        });
        if (errors.length > 0) {
          this.showErrorMessage();
        } else {
          redirectTo(job.detailedStatus.detailsPath);
        }
      } catch {
        this.showErrorMessage();
      }
    },
    canRetryJob(job) {
      return job.retryable && job.userPermissions.updateBuild;
    },
    showErrorMessage() {
      createFlash({ message: s__('Job|There was a problem retrying the failed job.') });
    },
  },
};
</script>

<template>
  <gl-table-lite :items="failedJobs" :fields="$options.fields" stacked="lg" fixed>
    <template #table-colgroup="{ fields }">
      <col v-for="field in fields" :key="field.key" :class="field.columnClass" />
    </template>

    <template #cell(name)="{ item }">
      <div
        class="gl-display-flex gl-align-items-center gl-lg-justify-content-start gl-justify-content-end"
      >
        <ci-badge :status="item.detailedStatus" :show-text="false" class="gl-mr-3" />
        <div class="gl-text-truncate">
          <gl-link
            :href="item.detailedStatus.detailsPath"
            class="gl-font-weight-bold gl-text-gray-900!"
          >
            {{ item.name }}
          </gl-link>
        </div>
      </div>
    </template>

    <template #cell(stage)="{ item }">
      <div class="gl-text-truncate">
        <span>{{ item.stage.name }}</span>
      </div>
    </template>

    <template #cell(failure)="{ item }">
      <span>{{ item.failure }}</span>
    </template>

    <template #cell(actions)="{ item }">
      <gl-button
        v-if="canRetryJob(item)"
        icon="repeat"
        :title="$options.retry"
        :aria-label="$options.retry"
        @click="retryJob(item.id)"
      />
    </template>

    <template #row-details="{ item }">
      <pre
        v-if="item.userPermissions.readBuild"
        class="gl-w-full gl-text-left gl-border-none"
        data-testid="job-log"
      >
        <code v-safe-html="item.failureSummary" class="gl-reset-bg gl-p-0" >
        </code>
      </pre>
    </template>
  </gl-table-lite>
</template>
