pipeline_stop_modal.vue 2.25 KB
Newer Older
1 2 3
<script>
import _ from 'underscore';
import { GlLink } from '@gitlab/ui';
4
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
5 6 7 8 9 10 11 12 13 14
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import { s__, sprintf } from '~/locale';

/**
 * Pipeline Stop Modal.
 *
 * Renders the modal used to confirm stopping a pipeline.
 */
export default {
  components: {
15
    GlModal: DeprecatedModal2,
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
    GlLink,
    CiIcon,
  },
  props: {
    pipeline: {
      type: Object,
      required: true,
      deep: true,
    },
  },
  computed: {
    modalTitle() {
      return sprintf(
        s__('Pipeline|Stop pipeline #%{pipelineId}?'),
        {
          pipelineId: `${this.pipeline.id}`,
        },
        false,
      );
    },
    modalText() {
      return sprintf(
        s__(`Pipeline|You’re about to stop pipeline %{pipelineId}.`),
        {
          pipelineId: `<strong>#${this.pipeline.id}</strong>`,
        },
        false,
      );
    },
    hasRef() {
      return !_.isEmpty(this.pipeline.ref);
    },
  },
49 50 51 52 53
  methods: {
    emitSubmit(event) {
      this.$emit('submit', event);
    },
  },
54 55 56 57 58 59 60 61
};
</script>
<template>
  <gl-modal
    id="confirmation-modal"
    :header-title-text="modalTitle"
    :footer-primary-button-text="s__('Pipeline|Stop pipeline')"
    footer-primary-button-variant="danger"
62
    @submit="emitSubmit($event)"
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
  >
    <p v-html="modalText"></p>

    <p v-if="pipeline">
      <ci-icon
        v-if="pipeline.details"
        :status="pipeline.details.status"
        class="vertical-align-middle"
      />

      <span class="font-weight-bold">{{ __('Pipeline') }}</span>

      <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
        >#{{ pipeline.id }}</a
      >
      <template v-if="hasRef">
        {{ __('from') }}
        <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>
      </template>
    </p>

    <template v-if="pipeline.commit">
      <p>
        <span class="font-weight-bold">{{ __('Commit') }}</span>

        <gl-link :href="pipeline.commit.commit_path" class="js-commit-sha commit-sha link-commit">
          {{ pipeline.commit.short_id }}
        </gl-link>
      </p>
      <p>{{ pipeline.commit.title }}</p>
    </template>
  </gl-modal>
</template>