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

171 lines
5 KiB
Vue
Raw Normal View History

2021-10-27 15:23:28 +05:30
<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() {
2021-11-11 11:23:49 +05:30
return Boolean(this.environment.externalUrl);
2021-10-27 15:23:28 +05:30
},
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
2021-11-11 11:23:49 +05:30
v-if="shouldShowExternalUrlButton"
2021-10-27 15:23:28 +05:30
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>