|
|
<script>
|
|
<script>
|
|
|
/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
|
|
/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
|
|
|
import { format } from 'timeago.js';
|
|
|
|
|
import _ from 'underscore';
|
|
import _ from 'underscore';
|
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
|
|
import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
|
|
import { __, sprintf } from '~/locale';
|
|
|
|
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
|
|
|
|
import timeagoMixin from '~/vue_shared/mixins/timeago';
|
|
|
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
|
|
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
|
|
|
|
import CommitComponent from '~/vue_shared/components/commit.vue';
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
|
|
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
|
|
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
|
|
|
import { __, sprintf } from '~/locale';
|
|
import environmentItemMixin from 'ee_else_ce/environments/mixins/environment_item_mixin';
|
|
|
|
import eventHub from '../event_hub';
|
|
|
import ActionsComponent from './environment_actions.vue';
|
|
import ActionsComponent from './environment_actions.vue';
|
|
|
import ExternalUrlComponent from './environment_external_url.vue';
|
|
import ExternalUrlComponent from './environment_external_url.vue';
|
|
|
import StopComponent from './environment_stop.vue';
|
|
import MonitoringButtonComponent from './environment_monitoring.vue';
|
|
|
|
import PinComponent from './environment_pin.vue';
|
|
|
import RollbackComponent from './environment_rollback.vue';
|
|
import RollbackComponent from './environment_rollback.vue';
|
|
|
|
import StopComponent from './environment_stop.vue';
|
|
|
import TerminalButtonComponent from './environment_terminal_button.vue';
|
|
import TerminalButtonComponent from './environment_terminal_button.vue';
|
|
|
import MonitoringButtonComponent from './environment_monitoring.vue';
|
|
|
|
|
import CommitComponent from '../../vue_shared/components/commit.vue';
|
|
|
|
|
import eventHub from '../event_hub';
|
|
|
|
|
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
|
|
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* Environment Item Component
|
|
* Environment Item Component
|
| ... | @@ -26,21 +27,22 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; |
... | @@ -26,21 +27,22 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; |
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
CommitComponent,
|
|
|
|
|
Icon,
|
|
|
|
|
ActionsComponent,
|
|
ActionsComponent,
|
|
|
|
CommitComponent,
|
|
|
ExternalUrlComponent,
|
|
ExternalUrlComponent,
|
|
|
StopComponent,
|
|
Icon,
|
|
|
|
MonitoringButtonComponent,
|
|
|
|
PinComponent,
|
|
|
RollbackComponent,
|
|
RollbackComponent,
|
|
|
|
StopComponent,
|
|
|
TerminalButtonComponent,
|
|
TerminalButtonComponent,
|
|
|
MonitoringButtonComponent,
|
|
|
|
|
TooltipOnTruncate,
|
|
TooltipOnTruncate,
|
|
|
UserAvatarLink,
|
|
UserAvatarLink,
|
|
|
},
|
|
},
|
|
|
directives: {
|
|
directives: {
|
|
|
GlTooltip: GlTooltipDirective,
|
|
GlTooltip: GlTooltipDirective,
|
|
|
},
|
|
},
|
|
|
mixins: [environmentItemMixin],
|
|
mixins: [environmentItemMixin, timeagoMixin],
|
|
|
|
|
|
|
|
props: {
|
|
props: {
|
|
|
canReadEnvironment: {
|
|
canReadEnvironment: {
|
| ... | @@ -52,7 +54,12 @@ export default { |
... | @@ -52,7 +54,12 @@ export default { |
|
|
model: {
|
|
model: {
|
|
|
type: Object,
|
|
type: Object,
|
|
|
required: true,
|
|
required: true,
|
|
|
default: () => ({}),
|
|
},
|
|
|
|
|
|
|
|
shouldShowAutoStopDate: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
tableData: {
|
|
tableData: {
|
| ... | @@ -76,6 +83,16 @@ export default { |
... | @@ -76,6 +83,16 @@ export default { |
|
|
return false;
|
|
return false;
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Checkes whether the row displayed is a folder.
|
|
|
|
*
|
|
|
|
* @returns {Boolean}
|
|
|
|
*/
|
|
|
|
|
|
|
|
isFolder() {
|
|
|
|
return this.model.isFolder;
|
|
|
|
},
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* Checkes whether the environment is protected.
|
|
* Checkes whether the environment is protected.
|
|
|
* (`is_protected` currently only set in EE)
|
|
* (`is_protected` currently only set in EE)
|
| ... | @@ -112,24 +129,64 @@ export default { |
... | @@ -112,24 +129,64 @@ export default { |
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* Verifies if the date to be shown is present.
|
|
* Verifies if the autostop date is present.
|
|
|
|
*
|
|
|
|
* @returns {Boolean}
|
|
|
|
*/
|
|
|
|
canShowAutoStopDate() {
|
|
|
|
if (!this.model.auto_stop_at) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
const autoStopDate = new Date(this.model.auto_stop_at);
|
|
|
|
const now = new Date();
|
|
|
|
|
|
|
|
return now < autoStopDate;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Human readable deployment date.
|
|
|
|
*
|
|
|
|
* @returns {String}
|
|
|
|
*/
|
|
|
|
autoStopDate() {
|
|
|
|
if (this.canShowAutoStopDate) {
|
|
|
|
return {
|
|
|
|
formatted: this.timeFormatted(this.model.auto_stop_at),
|
|
|
|
tooltip: this.tooltipTitle(this.model.auto_stop_at),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
formatted: '',
|
|
|
|
tooltip: '',
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Verifies if the deployment date is present.
|
|
|
*
|
|
*
|
|
|
* @returns {Boolean|Undefined}
|
|
* @returns {Boolean|Undefined}
|
|
|
*/
|
|
*/
|
|
|
canShowDate() {
|
|
canShowDeploymentDate() {
|
|
|
return this.model && this.model.last_deployment && this.model.last_deployment.deployed_at;
|
|
return this.model && this.model.last_deployment && this.model.last_deployment.deployed_at;
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* Human readable date.
|
|
* Human readable deployment date.
|
|
|
*
|
|
*
|
|
|
* @returns {String}
|
|
* @returns {String}
|
|
|
*/
|
|
*/
|
|
|
deployedDate() {
|
|
deployedDate() {
|
|
|
if (this.canShowDate) {
|
|
if (this.canShowDeploymentDate) {
|
|
|
return format(this.model.last_deployment.deployed_at);
|
|
return {
|
|
|
|
formatted: this.timeFormatted(this.model.last_deployment.deployed_at),
|
|
|
|
tooltip: this.tooltipTitle(this.model.last_deployment.deployed_at),
|
|
|
|
};
|
|
|
}
|
|
}
|
|
|
return '';
|
|
return {
|
|
|
|
formatted: '',
|
|
|
|
tooltip: '',
|
|
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
actions() {
|
|
actions() {
|
| ... | @@ -344,6 +401,15 @@ export default { |
... | @@ -344,6 +401,15 @@ export default { |
|
|
return {};
|
|
return {};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Checkes whether to display no deployment text.
|
|
|
|
*
|
|
|
|
* @returns {Boolean}
|
|
|
|
*/
|
|
|
|
showNoDeployments() {
|
|
|
|
return !this.hasLastDeploymentKey && !this.isFolder;
|
|
|
|
},
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* Verifies if the build name column should be rendered by verifing
|
|
* Verifies if the build name column should be rendered by verifing
|
|
|
* if all the information needed is present
|
|
* if all the information needed is present
|
| ... | @@ -353,7 +419,7 @@ export default { |
... | @@ -353,7 +419,7 @@ export default { |
|
|
*/
|
|
*/
|
|
|
shouldRenderBuildName() {
|
|
shouldRenderBuildName() {
|
|
|
return (
|
|
return (
|
|
|
!this.model.isFolder &&
|
|
!this.isFolder &&
|
|
|
!_.isEmpty(this.model.last_deployment) &&
|
|
!_.isEmpty(this.model.last_deployment) &&
|
|
|
!_.isEmpty(this.model.last_deployment.deployable)
|
|
!_.isEmpty(this.model.last_deployment.deployable)
|
|
|
);
|
|
);
|
| ... | @@ -383,11 +449,7 @@ export default { |
... | @@ -383,11 +449,7 @@ export default { |
|
|
* @return {String}
|
|
* @return {String}
|
|
|
*/
|
|
*/
|
|
|
externalURL() {
|
|
externalURL() {
|
|
|
if (this.model && this.model.external_url) {
|
|
return this.model.external_url || '';
|
|
|
return this.model.external_url;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '';
|
|
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
/**
|
| ... | @@ -399,26 +461,22 @@ export default { |
... | @@ -399,26 +461,22 @@ export default { |
|
|
*/
|
|
*/
|
|
|
shouldRenderDeploymentID() {
|
|
shouldRenderDeploymentID() {
|
|
|
return (
|
|
return (
|
|
|
!this.model.isFolder &&
|
|
!this.isFolder &&
|
|
|
!_.isEmpty(this.model.last_deployment) &&
|
|
!_.isEmpty(this.model.last_deployment) &&
|
|
|
this.model.last_deployment.iid !== undefined
|
|
this.model.last_deployment.iid !== undefined
|
|
|
);
|
|
);
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
environmentPath() {
|
|
environmentPath() {
|
|
|
if (this.model && this.model.environment_path) {
|
|
return this.model.environment_path || '';
|
|
|
return this.model.environment_path;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '';
|
|
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
monitoringUrl() {
|
|
monitoringUrl() {
|
|
|
if (this.model && this.model.metrics_path) {
|
|
return this.model.metrics_path || '';
|
|
|
return this.model.metrics_path;
|
|
},
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '';
|
|
autoStopUrl() {
|
|
|
|
return this.model.cancel_auto_stop_path || '';
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
displayEnvironmentActions() {
|
|
displayEnvironmentActions() {
|
| ... | @@ -447,7 +505,7 @@ export default { |
... | @@ -447,7 +505,7 @@ export default { |
|
|
<div
|
|
<div
|
|
|
:class="{
|
|
:class="{
|
|
|
'js-child-row environment-child-row': model.isChildren,
|
|
'js-child-row environment-child-row': model.isChildren,
|
|
|
'folder-row': model.isFolder,
|
|
'folder-row': isFolder,
|
|
|
}"
|
|
}"
|
|
|
class="gl-responsive-table-row"
|
|
class="gl-responsive-table-row"
|
|
|
role="row"
|
|
role="row"
|
| ... | @@ -457,7 +515,7 @@ export default { |
... | @@ -457,7 +515,7 @@ export default { |
|
|
:class="tableData.name.spacing"
|
|
:class="tableData.name.spacing"
|
|
|
role="gridcell"
|
|
role="gridcell"
|
|
|
>
|
|
>
|
|
|
<div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
|
|
<div v-if="!isFolder" class="table-mobile-header" role="rowheader">
|
|
|
{{ tableData.name.title }}
|
|
{{ tableData.name.title }}
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
| ... | @@ -466,7 +524,7 @@ export default { |
... | @@ -466,7 +524,7 @@ export default { |
|
|
</span>
|
|
</span>
|
|
|
|
|
|
|
|
<span
|
|
<span
|
|
|
v-if="!model.isFolder"
|
|
v-if="!isFolder"
|
|
|
v-gl-tooltip
|
|
v-gl-tooltip
|
|
|
:title="model.name"
|
|
:title="model.name"
|
|
|
class="environment-name table-mobile-content"
|
|
class="environment-name table-mobile-content"
|
| ... | @@ -506,7 +564,7 @@ export default { |
... | @@ -506,7 +564,7 @@ export default { |
|
|
{{ deploymentInternalId }}
|
|
{{ deploymentInternalId }}
|
|
|
</span>
|
|
</span>
|
|
|
|
|
|
|
|
<span v-if="!model.isFolder && deploymentHasUser" class="text-break-word">
|
|
<span v-if="!isFolder && deploymentHasUser" class="text-break-word">
|
|
|
by
|
|
by
|
|
|
<user-avatar-link
|
|
<user-avatar-link
|
|
|
:link-href="deploymentUser.web_url"
|
|
:link-href="deploymentUser.web_url"
|
| ... | @@ -516,6 +574,10 @@ export default { |
... | @@ -516,6 +574,10 @@ export default { |
|
|
class="js-deploy-user-container float-none"
|
|
class="js-deploy-user-container float-none"
|
|
|
/>
|
|
/>
|
|
|
</span>
|
|
</span>
|
|
|
|
|
|
|
|
<div v-if="showNoDeployments" class="commit-title table-mobile-content">
|
|
|
|
{{ s__('Environments|No deployments yet') }}
|
|
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
<div
|
| ... | @@ -536,14 +598,8 @@ export default { |
... | @@ -536,14 +598,8 @@ export default { |
|
|
</a>
|
|
</a>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
<div v-if="!isFolder" class="table-section" :class="tableData.commit.spacing" role="gridcell">
|
|
|
v-if="!model.isFolder"
|
|
|
|
|
class="table-section"
|
|
|
|
|
:class="tableData.commit.spacing"
|
|
|
|
|
role="gridcell"
|
|
|
|
|
>
|
|
|
|
|
<div role="rowheader" class="table-mobile-header">{{ tableData.commit.title }}</div>
|
|
<div role="rowheader" class="table-mobile-header">{{ tableData.commit.title }}</div>
|
|
|
|
|
|
|
|
<div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
|
|
<div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
|
|
|
<commit-component
|
|
<commit-component
|
|
|
:tag="commitTag"
|
|
:tag="commitTag"
|
| ... | @@ -554,31 +610,51 @@ export default { |
... | @@ -554,31 +610,51 @@ export default { |
|
|
:author="commitAuthor"
|
|
:author="commitAuthor"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
|
|
|
|
|
{{ s__('Environments|No deployments yet') }}
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="!isFolder" class="table-section" :class="tableData.date.spacing" role="gridcell">
|
|
|
|
<div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div>
|
|
|
|
<span
|
|
|
|
v-if="canShowDeploymentDate"
|
|
|
|
v-gl-tooltip
|
|
|
|
:title="deployedDate.tooltip"
|
|
|
|
class="environment-created-date-timeago table-mobile-content flex-truncate-parent"
|
|
|
|
>
|
|
|
|
<span class="flex-truncate-child">
|
|
|
|
{{ deployedDate.formatted }}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
<div
|
|
|
v-if="!model.isFolder"
|
|
v-if="!isFolder && shouldShowAutoStopDate"
|
|
|
class="table-section"
|
|
class="table-section"
|
|
|
:class="tableData.date.spacing"
|
|
:class="tableData.autoStop.spacing"
|
|
|
role="gridcell"
|
|
role="gridcell"
|
|
|
>
|
|
>
|
|
|
<div role="rowheader" class="table-mobile-header">{{ tableData.date.title }}</div>
|
|
<div role="rowheader" class="table-mobile-header">{{ tableData.autoStop.title }}</div>
|
|
|
|
|
<span
|
|
|
<span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
|
|
v-if="canShowAutoStopDate"
|
|
|
{{ deployedDate }}
|
|
v-gl-tooltip
|
|
|
|
:title="autoStopDate.tooltip"
|
|
|
|
class="table-mobile-content flex-truncate-parent"
|
|
|
|
>
|
|
|
|
<span class="flex-truncate-child js-auto-stop">{{ autoStopDate.formatted }}</span>
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
<div
|
|
|
v-if="!model.isFolder && displayEnvironmentActions"
|
|
v-if="!isFolder && displayEnvironmentActions"
|
|
|
class="table-section table-button-footer"
|
|
class="table-section table-button-footer"
|
|
|
:class="tableData.actions.spacing"
|
|
:class="tableData.actions.spacing"
|
|
|
role="gridcell"
|
|
role="gridcell"
|
|
|
>
|
|
>
|
|
|
<div class="btn-group table-action-buttons" role="group">
|
|
<div class="btn-group table-action-buttons" role="group">
|
|
|
|
<pin-component
|
|
|
|
v-if="canShowAutoStopDate && shouldShowAutoStopDate"
|
|
|
|
:auto-stop-url="autoStopUrl"
|
|
|
|
/>
|
|
|
|
|
|
|
<external-url-component
|
|
<external-url-component
|
|
|
v-if="externalURL && canReadEnvironment"
|
|
v-if="externalURL && canReadEnvironment"
|
|
|
:external-url="externalURL"
|
|
:external-url="externalURL"
|
| ... | |
... | |
| ... | | ... | |