Commit ecfdbee6 authored by Filipa Lacerda's avatar Filipa Lacerda Committed by Phil Hughes

Creates vue component for environments block

parent 722631a9
<script>
import _ from 'underscore';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import { sprintf, __ } from '../../locale';
export default {
components: {
CiIcon,
},
props: {
deploymentStatus: {
type: Object,
required: true,
},
},
computed: {
environment() {
let environmentText;
switch (this.deploymentStatus.status) {
case 'latest':
environmentText = sprintf(
__('This job is the most recent deployment to %{link}.'),
{ link: this.environmentLink },
false,
);
break;
case 'out_of_date':
if (this.hasLastDeployment) {
environmentText = sprintf(
__(
'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
),
{
environmentLink: this.environmentLink,
deploymentLink: this.deploymentLink,
},
false,
);
} else {
environmentText = sprintf(
__('This job is an out-of-date deployment to %{environmentLink}.'),
{ environmentLink: this.environmentLink },
false,
);
}
break;
case 'failed':
environmentText = sprintf(
__('The deployment of this job to %{environmentLink} did not succeed.'),
{ environmentLink: this.environmentLink },
false,
);
break;
case 'creating':
if (this.hasLastDeployment) {
environmentText = sprintf(
__(
'This job is creating a deployment to %{environmentLink} and will overwrite the last %{deploymentLink}.',
),
{
environmentLink: this.environmentLink,
deploymentLink: this.deploymentLink,
},
false,
);
} else {
environmentText = sprintf(
__('This job is creating a deployment to %{environmentLink}.'),
{ environmentLink: this.environmentLink },
false,
);
}
break;
default:
break;
}
return environmentText;
},
environmentLink() {
return sprintf(
'%{startLink}%{name}%{endLink}',
{
startLink: `<a href="${this.deploymentStatus.environment.path}">`,
name: _.escape(this.deploymentStatus.environment.name),
endLink: '</a>',
},
false,
);
},
deploymentLink() {
return sprintf(
'%{startLink}%{name}%{endLink}',
{
startLink: `<a href="${this.lastDeployment.path}">`,
name: _.escape(this.lastDeployment.name),
endLink: '</a>',
},
false,
);
},
hasLastDeployment() {
return this.deploymentStatus.environment.last_deployment;
},
lastDeployment() {
return this.deploymentStatus.environment.last_deployment;
},
},
};
</script>
<template>
<div class="prepend-top-default js-environment-container">
<div class="environment-information">
<ci-icon :status="deploymentStatus.icon" />
<p v-html="environment"></p>
</div>
</div>
</template>
---
title: Creates vue component for environments information in job log view
merge_request:
author:
type: other
......@@ -5492,6 +5492,9 @@ msgstr ""
msgid "The collection of events added to the data gathered for that stage."
msgstr ""
msgid "The deployment of this job to %{environmentLink} did not succeed."
msgstr ""
msgid "The fork relationship has been removed."
msgstr ""
......@@ -5675,6 +5678,18 @@ msgstr ""
msgid "This job has not started yet"
msgstr ""
msgid "This job is an out-of-date deployment to %{environmentLink}."
msgstr ""
msgid "This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}."
msgstr ""
msgid "This job is creating a deployment to %{environmentLink} and will overwrite the last %{deploymentLink}."
msgstr ""
msgid "This job is creating a deployment to %{environmentLink}."
msgstr ""
msgid "This job is in pending state and is waiting to be picked by a runner"
msgstr ""
......@@ -5684,6 +5699,9 @@ msgstr ""
msgid "This job is stuck, because you don't have any active runners that can run this job."
msgstr ""
msgid "This job is the most recent deployment to %{link}."
msgstr ""
msgid "This job requires a manual action"
msgstr ""
......
import Vue from 'vue';
import component from '~/jobs/components/environments_block.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('Environments block', () => {
const Component = Vue.extend(component);
let vm;
const icon = {
group: 'success',
icon: 'status_success',
label: 'passed',
text: 'passed',
tooltip: 'passed',
};
const deployment = {
path: 'deployment',
name: 'deployment name',
};
const environment = {
path: '/environment',
name: 'environment',
};
afterEach(() => {
vm.$destroy();
});
describe('with latest deployment', () => {
it('renders info for most recent deployment', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'latest',
icon,
deployment,
environment,
},
});
expect(vm.$el.textContent.trim()).toEqual(
'This job is the most recent deployment to environment.',
);
});
});
describe('with out of date deployment', () => {
describe('with last deployment', () => {
it('renders info for out date and most recent', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'out_of_date',
icon,
deployment,
environment: Object.assign({}, environment, {
last_deployment: { name: 'deployment', path: 'last_deployment' },
}),
},
});
expect(vm.$el.textContent.trim()).toEqual(
'This job is an out-of-date deployment to environment. View the most recent deployment deployment.',
);
});
});
describe('without last deployment', () => {
it('renders info about out of date deployment', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'out_of_date',
icon,
deployment: null,
environment,
},
});
expect(vm.$el.textContent.trim()).toEqual(
'This job is an out-of-date deployment to environment.',
);
});
});
});
describe('with failed deployment', () => {
it('renders info about failed deployment', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'failed',
icon,
deployment: null,
environment,
},
});
expect(vm.$el.textContent.trim()).toEqual(
'The deployment of this job to environment did not succeed.',
);
});
});
describe('creating deployment', () => {
describe('with last deployment', () => {
it('renders info about creating deployment and overriding lastest deployment', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'creating',
icon,
deployment,
environment: Object.assign({}, environment, {
last_deployment: { name: 'deployment', path: 'last_deployment' },
}),
},
});
expect(vm.$el.textContent.trim()).toEqual(
'This job is creating a deployment to environment and will overwrite the last deployment.',
);
});
});
describe('without last deployment', () => {
it('renders info about failed deployment', () => {
vm = mountComponent(Component, {
deploymentStatus: {
status: 'creating',
icon,
deployment: null,
environment,
},
});
expect(vm.$el.textContent.trim()).toEqual(
'This job is creating a deployment to environment.',
);
});
});
});
});
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