debian-mirror-gitlab/app/assets/javascripts/environments/components/environments_detail_header.vue

<script>
import { GlButton, GlModalDirective, GlTooltipDirective as GlTooltip, GlSprintf } from '@gitlab/ui';
import csrf from '~/lib/utils/csrf';
import { __, s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import DeleteEnvironmentModal from './delete_environment_modal.vue';
import StopEnvironmentModal from './stop_environment_modal.vue';

export default {
  name: 'EnvironmentsDetailHeader',
  csrf,
  components: {
    GlButton,
    GlSprintf,
    TimeAgo,
    DeleteEnvironmentModal,
    StopEnvironmentModal,
  },
  directives: {
    GlModalDirective,
    GlTooltip,
  },
  mixins: [timeagoMixin],
  props: {
    environment: {
      type: Object,
      required: true,
    },
    canAdminEnvironment: {
      type: Boolean,
      required: true,
    },
    canUpdateEnvironment: {
      type: Boolean,
      required: true,
    },
    canDestroyEnvironment: {
      type: Boolean,
      required: true,
    },
    canStopEnvironment: {
      type: Boolean,
      required: true,
    },
    cancelAutoStopPath: {
      type: String,
      required: false,
      default: '',
    },
    metricsPath: {
      type: String,
      required: false,
      default: '',
    },
    updatePath: {
      type: String,
      required: false,
      default: '',
    },
    terminalPath: {
      type: String,
      required: false,
      default: '',
    },
  },
  i18n: {
    autoStopAtText: s__('Environments|Auto stops %{autoStopAt}'),
    metricsButtonTitle: __('See metrics'),
    metricsButtonText: __('Monitoring'),
    editButtonText: __('Edit'),
    stopButtonText: s__('Environments|Stop'),
    deleteButtonText: s__('Environments|Delete'),
    externalButtonTitle: s__('Environments|Open live environment'),
    externalButtonText: __('View deployment'),
    cancelAutoStopButtonTitle: __('Prevent environment from auto-stopping'),
  },
  computed: {
    shouldShowCancelAutoStopButton() {
      return this.environment.isAvailable && Boolean(this.environment.autoStopAt);
    },
    shouldShowExternalUrlButton() {
      return Boolean(this.environment.externalUrl);
    },
    shouldShowStopButton() {
      return this.canStopEnvironment && this.environment.isAvailable;
    },
    shouldShowTerminalButton() {
      return this.canAdminEnvironment && this.environment.hasTerminals;
    },
  },
};
</script>
<template>
  <header class="top-area gl-justify-content-between">
    <div class="gl-display-flex gl-flex-grow-1 gl-align-items-center">
      <h3 class="page-title">
        {{ environment.name }}
      </h3>
      <p v-if="shouldShowCancelAutoStopButton" class="gl-mb-0 gl-ml-3" data-testid="auto-stops-at">
        <gl-sprintf :message="$options.i18n.autoStopAtText">
          <template #autoStopAt>
            <time-ago :time="environment.autoStopAt" />
          </template>
        </gl-sprintf>
      </p>
    </div>
    <div class="nav-controls gl-my-1">
      <form method="POST" :action="cancelAutoStopPath" data-testid="cancel-auto-stop-form">
        <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
        <gl-button
          v-if="shouldShowCancelAutoStopButton"
          v-gl-tooltip.hover
          data-testid="cancel-auto-stop-button"
          :title="$options.i18n.cancelAutoStopButtonTitle"
          type="submit"
          icon="thumbtack"
        />
      </form>
      <gl-button
        v-if="shouldShowTerminalButton"
        data-testid="terminal-button"
        :href="terminalPath"
        icon="terminal"
      />
      <gl-button
        v-if="shouldShowExternalUrlButton"
        v-gl-tooltip.hover
        data-testid="external-url-button"
        :title="$options.i18n.externalButtonTitle"
        :href="environment.externalUrl"
        icon="external-link"
        target="_blank"
        >{{ $options.i18n.externalButtonText }}</gl-button
      >
      <gl-button
        v-if="shouldShowExternalUrlButton"
        data-testid="metrics-button"
        :href="metricsPath"
        :title="$options.i18n.metricsButtonTitle"
        icon="chart"
        class="gl-mr-2"
      >
        {{ $options.i18n.metricsButtonText }}
      </gl-button>
      <gl-button v-if="canUpdateEnvironment" data-testid="edit-button" :href="updatePath">
        {{ $options.i18n.editButtonText }}
      </gl-button>
      <gl-button
        v-if="shouldShowStopButton"
        v-gl-modal-directive="'stop-environment-modal'"
        data-testid="stop-button"
        icon="stop"
        variant="danger"
      >
        {{ $options.i18n.stopButtonText }}
      </gl-button>
      <gl-button
        v-if="canDestroyEnvironment"
        v-gl-modal-directive="'delete-environment-modal'"
        data-testid="destroy-button"
        variant="danger"
      >
        {{ $options.i18n.deleteButtonText }}
      </gl-button>
    </div>
    <delete-environment-modal v-if="canDestroyEnvironment" :environment="environment" />
    <stop-environment-modal v-if="shouldShowStopButton" :environment="environment" />
  </header>
</template>