Commit 8310235b authored by Andrew Fontaine's avatar Andrew Fontaine

Show the job that created the deployment

Also link to it in case the trace logs need to be examined.

If a deployment is made with the API, there is no job. Instead, display
a badge with the text 'API'.
parent 28ea4f63
......@@ -80,6 +80,15 @@ export default {
userPath() {
return this.user?.path;
},
deployable() {
return this.deployment?.deployable;
},
jobName() {
return truncate(this.deployable?.name ?? '', 25);
},
jobPath() {
return this.deployable?.buildPath;
},
},
methods: {
toggleCollapse() {
......@@ -94,6 +103,8 @@ export default {
showDetails: __('Show details'),
hideDetails: __('Hide details'),
triggerer: s__('Deployment|Triggerer'),
job: __('Job'),
api: __('API'),
},
headerClasses: [
'gl-display-flex',
......@@ -174,6 +185,20 @@ export default {
<span class="gl-text-gray-500 gl-font-weight-bold">{{ $options.i18n.triggerer }}</span>
<gl-link :href="userPath" class="gl-font-monospace gl-mt-3"> @{{ username }} </gl-link>
</div>
<div class="gl-display-flex gl-flex-direction-column gl-ml-5">
<span class="gl-text-gray-500 gl-font-weight-bold" :class="{ 'gl-ml-3': !deployable }">
{{ $options.i18n.job }}
</span>
<gl-link v-if="jobPath" :href="jobPath" class="gl-font-monospace gl-mt-3">
{{ jobName }}
</gl-link>
<span v-else-if="jobName" class="gl-font-monospace gl-mt-3">
{{ jobName }}
</span>
<gl-badge v-else class="gl-font-monospace gl-mt-3" variant="info">
{{ $options.i18n.api }}
</gl-badge>
</div>
</div>
</gl-collapse>
</div>
......
......@@ -209,6 +209,36 @@ describe('~/environments/components/deployment.vue', () => {
const username = wrapper.findByRole('link', { name: `@${deployment.user.username}` });
expect(username.attributes('href')).toBe(deployment.user.path);
const job = wrapper.findByRole('link', { name: deployment.deployable.name });
expect(job.attributes('href')).toBe(deployment.deployable.buildPath);
const apiBadge = wrapper.findByText(__('API'));
expect(apiBadge.exists()).toBe(false);
});
});
describe('with API deployment', () => {
beforeEach(async () => {
wrapper = createWrapper({ propsData: { deployment: { ...deployment, deployable: null } } });
await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
});
it('shows API instead of a job name', () => {
const apiBadge = wrapper.findByText(__('API'));
expect(apiBadge.exists()).toBe(true);
});
});
describe('without a job path', () => {
beforeEach(async () => {
wrapper = createWrapper({
propsData: {
deployment: { ...deployment, deployable: { name: deployment.deployable.name } },
},
});
await wrapper.findComponent({ ref: 'details-toggle' }).trigger('click');
});
it('shows a span instead of a link', () => {
const job = wrapper.findByText(deployment.deployable.name);
expect(job.attributes('href')).toBeUndefined();
});
});
});
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