Commit 010b39f7 authored by Andrew Fontaine's avatar Andrew Fontaine

Display when environments will auto-stop

Show a relative time for when the environment is set to auto stop as
well as a tooltip with the absolute time.

Only displays future stop dates (Auto stop in <relative time>) as
opposed to past dates (Auto stopped <relative time> ago)
parent a5593cee
......@@ -9,6 +9,7 @@ import {
} from '@gitlab/ui';
import { __, s__ } from '~/locale';
import { truncate } from '~/lib/utils/text_utility';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql';
import ExternalUrl from './environment_external_url.vue';
import Actions from './environment_actions.vue';
......@@ -35,6 +36,7 @@ export default {
Monitoring,
Pin,
Terminal,
TimeAgoTooltip,
Delete,
},
directives: {
......@@ -66,6 +68,7 @@ export default {
emptyState: s__(
'Environments|There are no deployments for this environment yet. %{linkStart}Learn more about setting up deployments.%{linkEnd}',
),
autoStopIn: s__('Environment|Auto stop %{time}'),
},
data() {
return { visible: false };
......@@ -185,7 +188,14 @@ export default {
{{ displayName }}
</gl-link>
</div>
<div>
<div class="gl-display-flex gl-align-items-center">
<p v-if="canShowAutoStopDate" class="gl-font-sm gl-text-gray-700 gl-mr-5 gl-mb-0">
<gl-sprintf :message="$options.i18n.autoStopIn">
<template #time>
<time-ago-tooltip :time="environment.autoStopAt" css-class="gl-font-weight-bold" />
</template>
</gl-sprintf>
</p>
<div class="btn-group table-action-buttons" role="group">
<external-url
v-if="externalUrl"
......
......@@ -13776,6 +13776,9 @@ msgstr ""
msgid "Environments|protected"
msgstr ""
msgid "Environment|Auto stop %{time}"
msgstr ""
msgid "Epic"
msgstr ""
......
......@@ -4,7 +4,8 @@ import { GlCollapse, GlIcon } from '@gitlab/ui';
import createMockApollo from 'helpers/mock_apollo_helper';
import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
import { stubTransition } from 'helpers/stub_transition';
import { __, s__ } from '~/locale';
import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
import { __, s__, sprintf } from '~/locale';
import EnvironmentItem from '~/environments/components/new_environment_item.vue';
import Deployment from '~/environments/components/deployment.vue';
import { resolvedEnvironment } from './graphql/mock_data';
......@@ -173,25 +174,92 @@ describe('~/environments/components/new_environment_item.vue', () => {
});
describe('pin', () => {
it('shows the option to pin the environment if there is an autostop date', () => {
wrapper = createWrapper({
propsData: {
environment: { ...resolvedEnvironment, autoStopAt: new Date(Date.now() + 100000) },
},
apolloProvider: createApolloProvider(),
describe('with autostop', () => {
let environment;
beforeEach(() => {
environment = {
...resolvedEnvironment,
autoStopAt: new Date(Date.now() + 100000).toString(),
};
wrapper = createWrapper({
propsData: {
environment,
},
apolloProvider: createApolloProvider(),
});
});
const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
it('shows the option to pin the environment if there is an autostop date', () => {
const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(rollback.exists()).toBe(true);
expect(rollback.exists()).toBe(true);
});
it('shows when the environment auto stops', () => {
const autoStop = wrapper.findByTitle(formatDate(environment.autoStopAt));
expect(autoStop.text()).toBe('in 1 minute');
});
});
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
describe('without autostop', () => {
beforeEach(() => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
});
const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
expect(rollback.exists()).toBe(false);
const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(rollback.exists()).toBe(false);
});
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf(s__('Environment|Auto stop %{time}'), {
time: getTimeago().format(resolvedEnvironment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
});
});
describe('with past autostop', () => {
let environment;
beforeEach(() => {
environment = {
...resolvedEnvironment,
autoStopAt: new Date(Date.now() - 100000).toString(),
};
wrapper = createWrapper({
propsData: {
environment,
},
apolloProvider: createApolloProvider(),
});
});
it('does not show the option to pin the environment if there is no autostop date', () => {
wrapper = createWrapper({ apolloProvider: createApolloProvider() });
const rollback = wrapper.findByRole('menuitem', { name: __('Prevent auto-stopping') });
expect(rollback.exists()).toBe(false);
});
it('does not show when the environment auto stops', () => {
const autoStop = wrapper.findByText(
sprintf(s__('Environment|Auto stop %{time}'), {
time: getTimeago().format(environment.autoStopAt),
}),
);
expect(autoStop.exists()).toBe(false);
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment