2018-05-09 12:01:36 +05:30
|
|
|
<script>
|
2019-01-03 12:48:30 +05:30
|
|
|
import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
|
2018-11-08 19:23:39 +05:30
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
2018-11-20 20:47:30 +05:30
|
|
|
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
|
2018-12-13 13:39:08 +05:30
|
|
|
import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
|
|
|
|
import { __ } from '~/locale';
|
2018-05-09 12:01:36 +05:30
|
|
|
import timeagoMixin from '../../vue_shared/mixins/timeago';
|
|
|
|
import LoadingButton from '../../vue_shared/components/loading_button.vue';
|
|
|
|
import { visitUrl } from '../../lib/utils/url_utility';
|
|
|
|
import createFlash from '../../flash';
|
|
|
|
import MemoryUsage from './memory_usage.vue';
|
|
|
|
import StatusIcon from './mr_widget_status_icon.vue';
|
2018-12-13 13:39:08 +05:30
|
|
|
import ReviewAppLink from './review_app_link.vue';
|
2018-05-09 12:01:36 +05:30
|
|
|
import MRWidgetService from '../services/mr_widget_service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Deployment',
|
|
|
|
components: {
|
|
|
|
LoadingButton,
|
|
|
|
MemoryUsage,
|
|
|
|
StatusIcon,
|
2018-11-08 19:23:39 +05:30
|
|
|
Icon,
|
2018-11-20 20:47:30 +05:30
|
|
|
TooltipOnTruncate,
|
2018-12-13 13:39:08 +05:30
|
|
|
FilteredSearchDropdown,
|
|
|
|
ReviewAppLink,
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
directives: {
|
2018-12-13 13:39:08 +05:30
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
2018-12-13 13:39:08 +05:30
|
|
|
mixins: [timeagoMixin],
|
2018-05-09 12:01:36 +05:30
|
|
|
props: {
|
|
|
|
deployment: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2018-12-13 13:39:08 +05:30
|
|
|
deployedTextMap: {
|
|
|
|
running: __('Deploying to'),
|
|
|
|
success: __('Deployed to'),
|
|
|
|
failed: __('Failed to deploy to'),
|
|
|
|
},
|
2018-05-09 12:01:36 +05:30
|
|
|
data() {
|
2019-01-03 12:48:30 +05:30
|
|
|
const features = window.gon.features || {};
|
2018-05-09 12:01:36 +05:30
|
|
|
return {
|
|
|
|
isStopping: false,
|
2019-01-03 12:48:30 +05:30
|
|
|
enableCiEnvironmentsStatusChanges: features.ciEnvironmentsStatusChanges,
|
2018-05-09 12:01:36 +05:30
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
deployTimeago() {
|
|
|
|
return this.timeFormated(this.deployment.deployed_at);
|
|
|
|
},
|
|
|
|
hasExternalUrls() {
|
|
|
|
return !!(this.deployment.external_url && this.deployment.external_url_formatted);
|
|
|
|
},
|
|
|
|
hasDeploymentTime() {
|
|
|
|
return !!(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
|
|
|
|
},
|
|
|
|
hasDeploymentMeta() {
|
|
|
|
return !!(this.deployment.url && this.deployment.name);
|
|
|
|
},
|
|
|
|
hasMetrics() {
|
2018-12-13 13:39:08 +05:30
|
|
|
return !!this.deployment.metrics_url;
|
|
|
|
},
|
|
|
|
deployedText() {
|
|
|
|
return this.$options.deployedTextMap[this.deployment.status];
|
|
|
|
},
|
|
|
|
isDeployInProgress() {
|
|
|
|
return this.deployment.status === 'running';
|
|
|
|
},
|
|
|
|
deployInProgressTooltip() {
|
|
|
|
return this.isDeployInProgress
|
|
|
|
? __('Stopping this environment is currently not possible as a deployment is in progress')
|
|
|
|
: '';
|
|
|
|
},
|
|
|
|
shouldRenderDropdown() {
|
2019-01-03 12:48:30 +05:30
|
|
|
return (
|
|
|
|
this.enableCiEnvironmentsStatusChanges &&
|
|
|
|
(this.deployment.changes && this.deployment.changes.length > 0)
|
|
|
|
);
|
2018-05-09 12:01:36 +05:30
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
stopEnvironment() {
|
2018-12-13 13:39:08 +05:30
|
|
|
const msg = __('Are you sure you want to stop this environment?');
|
2018-05-09 12:01:36 +05:30
|
|
|
const isConfirmed = confirm(msg); // eslint-disable-line
|
|
|
|
|
|
|
|
if (isConfirmed) {
|
|
|
|
this.isStopping = true;
|
|
|
|
|
|
|
|
MRWidgetService.stopEnvironment(this.deployment.stop_url)
|
|
|
|
.then(res => res.data)
|
2018-12-13 13:39:08 +05:30
|
|
|
.then(data => {
|
2018-05-09 12:01:36 +05:30
|
|
|
if (data.redirect_url) {
|
|
|
|
visitUrl(data.redirect_url);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.isStopping = false;
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
createFlash('Something went wrong while stopping this environment. Please try again.');
|
|
|
|
this.isStopping = false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2019-01-03 12:48:30 +05:30
|
|
|
<div class="mr-widget-heading deploy-heading append-bottom-default">
|
2018-05-09 12:01:36 +05:30
|
|
|
<div class="ci-widget media">
|
|
|
|
<div class="media-body">
|
|
|
|
<div class="deploy-body">
|
2018-12-13 13:39:08 +05:30
|
|
|
<div class="js-deployment-info deployment-info">
|
2018-11-08 19:23:39 +05:30
|
|
|
<template v-if="hasDeploymentMeta">
|
2019-01-03 12:48:30 +05:30
|
|
|
<span>
|
|
|
|
{{ deployedText }}
|
|
|
|
</span>
|
2018-11-20 20:47:30 +05:30
|
|
|
<tooltip-on-truncate
|
|
|
|
:title="deployment.name"
|
|
|
|
truncate-target="child"
|
|
|
|
class="deploy-link label-truncate"
|
2018-11-08 19:23:39 +05:30
|
|
|
>
|
2018-11-20 20:47:30 +05:30
|
|
|
<a
|
|
|
|
:href="deployment.url"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer nofollow"
|
|
|
|
class="js-deploy-meta"
|
|
|
|
>
|
|
|
|
{{ deployment.name }}
|
|
|
|
</a>
|
|
|
|
</tooltip-on-truncate>
|
2018-11-08 19:23:39 +05:30
|
|
|
</template>
|
|
|
|
<span
|
|
|
|
v-if="hasDeploymentTime"
|
2018-12-13 13:39:08 +05:30
|
|
|
v-gl-tooltip
|
2018-11-08 19:23:39 +05:30
|
|
|
:title="deployment.deployed_at_formatted"
|
|
|
|
class="js-deploy-time"
|
2018-05-09 12:01:36 +05:30
|
|
|
>
|
2018-11-08 19:23:39 +05:30
|
|
|
{{ deployTimeago }}
|
2018-05-09 12:01:36 +05:30
|
|
|
</span>
|
2018-11-08 19:23:39 +05:30
|
|
|
<memory-usage
|
2019-01-03 12:48:30 +05:30
|
|
|
v-if="hasMetrics"
|
2018-11-08 19:23:39 +05:30
|
|
|
:metrics-url="deployment.metrics_url"
|
|
|
|
:metrics-monitoring-url="deployment.metrics_monitoring_url"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div>
|
2018-12-13 13:39:08 +05:30
|
|
|
<template v-if="hasExternalUrls">
|
|
|
|
<filtered-search-dropdown
|
|
|
|
v-if="shouldRenderDropdown"
|
|
|
|
class="js-mr-wigdet-deployment-dropdown inline"
|
|
|
|
:items="deployment.changes"
|
|
|
|
:main-action-link="deployment.external_url"
|
|
|
|
filter-key="path"
|
|
|
|
>
|
2019-01-03 12:48:30 +05:30
|
|
|
<template
|
|
|
|
slot="mainAction"
|
|
|
|
slot-scope="slotProps"
|
|
|
|
>
|
2018-12-13 13:39:08 +05:30
|
|
|
<review-app-link
|
|
|
|
:link="deployment.external_url"
|
|
|
|
:css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
|
2019-01-03 12:48:30 +05:30
|
|
|
<template
|
|
|
|
slot="result"
|
|
|
|
slot-scope="slotProps"
|
|
|
|
>
|
2018-12-13 13:39:08 +05:30
|
|
|
<a
|
|
|
|
:href="slotProps.result.external_url"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer nofollow"
|
|
|
|
class="menu-item"
|
|
|
|
>
|
|
|
|
<strong class="str-truncated-100 append-bottom-0 d-block">
|
|
|
|
{{ slotProps.result.path }}
|
|
|
|
</strong>
|
|
|
|
|
|
|
|
<p class="text-secondary str-truncated-100 append-bottom-0 d-block">
|
|
|
|
{{ slotProps.result.external_url }}
|
|
|
|
</p>
|
|
|
|
</a>
|
|
|
|
</template>
|
|
|
|
</filtered-search-dropdown>
|
|
|
|
<review-app-link
|
|
|
|
v-else
|
|
|
|
:link="deployment.external_url"
|
|
|
|
css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
|
|
|
|
/>
|
|
|
|
</template>
|
2019-01-03 12:48:30 +05:30
|
|
|
<span
|
2018-11-08 19:23:39 +05:30
|
|
|
v-if="deployment.stop_url"
|
2018-12-13 13:39:08 +05:30
|
|
|
v-gl-tooltip
|
|
|
|
:title="deployInProgressTooltip"
|
2019-01-03 12:48:30 +05:30
|
|
|
class="d-inline-block"
|
2018-12-13 13:39:08 +05:30
|
|
|
tabindex="0"
|
2018-11-08 19:23:39 +05:30
|
|
|
>
|
2018-12-13 13:39:08 +05:30
|
|
|
<loading-button
|
|
|
|
:loading="isStopping"
|
|
|
|
:disabled="isDeployInProgress"
|
|
|
|
:title="__('Stop environment')"
|
|
|
|
container-class="js-stop-env btn btn-default btn-sm inline prepend-left-4"
|
|
|
|
@click="stopEnvironment"
|
|
|
|
>
|
|
|
|
<icon name="stop" />
|
|
|
|
</loading-button>
|
|
|
|
</span>
|
2018-11-08 19:23:39 +05:30
|
|
|
</div>
|
2018-05-09 12:01:36 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|