Commit 15f1952e authored by Phil Hughes's avatar Phil Hughes

Merge branch '53535-sticky-archived' into 'master'

Renders a warning block for archived job

Closes #53535

See merge request gitlab-org/gitlab-ce!22811
parents 3301876b 26e88b10
...@@ -3,9 +3,11 @@ import _ from 'underscore'; ...@@ -3,9 +3,11 @@ import _ from 'underscore';
import { mapGetters, mapState, mapActions } from 'vuex'; import { mapGetters, mapState, mapActions } from 'vuex';
import { GlLoadingIcon } from '@gitlab-org/gitlab-ui'; import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
import { polyfillSticky } from '~/lib/utils/sticky';
import bp from '~/breakpoints'; import bp from '~/breakpoints';
import CiHeader from '~/vue_shared/components/header_ci_component.vue'; import CiHeader from '~/vue_shared/components/header_ci_component.vue';
import Callout from '~/vue_shared/components/callout.vue'; import Callout from '~/vue_shared/components/callout.vue';
import Icon from '~/vue_shared/components/icon.vue';
import createStore from '../store'; import createStore from '../store';
import EmptyState from './empty_state.vue'; import EmptyState from './empty_state.vue';
import EnvironmentsBlock from './environments_block.vue'; import EnvironmentsBlock from './environments_block.vue';
...@@ -25,6 +27,7 @@ export default { ...@@ -25,6 +27,7 @@ export default {
EnvironmentsBlock, EnvironmentsBlock,
ErasedBlock, ErasedBlock,
GlLoadingIcon, GlLoadingIcon,
Icon,
Log, Log,
LogTopBar, LogTopBar,
StuckBlock, StuckBlock,
...@@ -97,6 +100,14 @@ export default { ...@@ -97,6 +100,14 @@ export default {
if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) { if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
this.fetchStages(); this.fetchStages();
} }
if (newVal.archived) {
this.$nextTick(() => {
if (this.$refs.sticky) {
polyfillSticky(this.$refs.sticky);
}
});
}
}, },
}, },
created() { created() {
...@@ -114,16 +125,13 @@ export default { ...@@ -114,16 +125,13 @@ export default {
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.updateScroll); window.addEventListener('scroll', this.updateScroll);
}, },
mounted() { mounted() {
this.updateSidebar(); this.updateSidebar();
}, },
destroyed() { destroyed() {
window.removeEventListener('resize', this.onResize); window.removeEventListener('resize', this.onResize);
window.removeEventListener('scroll', this.updateScroll); window.removeEventListener('scroll', this.updateScroll);
}, },
methods: { methods: {
...mapActions([ ...mapActions([
'setJobEndpoint', 'setJobEndpoint',
...@@ -218,14 +226,28 @@ export default { ...@@ -218,14 +226,28 @@ export default {
:erased-at="job.erased_at" :erased-at="job.erased_at"
/> />
<div
v-if="job.archived"
ref="sticky"
class="js-archived-job prepend-top-default archived-sticky sticky-top"
>
<icon
name="lock"
class="align-text-bottom"
/>
{{ __('This job is archived. Only the complete pipeline can be retried.') }}
</div>
<!--job log --> <!--job log -->
<div <div
v-if="hasTrace" v-if="hasTrace"
class="build-trace-container prepend-top-default"> class="build-trace-container"
>
<log-top-bar <log-top-bar
:class="{ :class="{
'sidebar-expanded': isSidebarOpen, 'sidebar-expanded': isSidebarOpen,
'sidebar-collapsed': !isSidebarOpen 'sidebar-collapsed': !isSidebarOpen,
'has-archived-block': job.archived
}" }"
:erase-path="job.erase_path" :erase-path="job.erase_path"
:size="traceSize" :size="traceSize"
......
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="top-bar affix"> <div class="top-bar">
<!-- truncate information --> <!-- truncate information -->
<div class="js-truncated-info truncated-info d-none d-sm-block float-left"> <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
<template v-if="isTraceSizeVisible"> <template v-if="isTraceSizeVisible">
......
...@@ -55,9 +55,29 @@ ...@@ -55,9 +55,29 @@
@include build-trace(); @include build-trace();
} }
.archived-sticky {
top: $header-height;
border-radius: 2px 2px 0 0;
color: $orange-600;
background-color: $orange-100;
border: 1px solid $border-gray-normal;
border-bottom: 0;
padding: 3px 12px;
margin: auto;
align-items: center;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
}
}
.top-bar { .top-bar {
@include build-trace-top-bar(35px); @include build-trace-top-bar(35px);
&.has-archived-block {
top: $header-height + $performance-bar-height + 28px;
}
&.affix { &.affix {
top: $header-height; top: $header-height;
......
---
title: Renders warning info when job is archieved
merge_request:
author:
type: added
...@@ -6230,6 +6230,9 @@ msgstr "" ...@@ -6230,6 +6230,9 @@ msgstr ""
msgid "This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}." msgid "This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}."
msgstr "" msgstr ""
msgid "This job is archived. Only the complete pipeline can be retried."
msgstr ""
msgid "This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}." msgid "This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}."
msgstr "" msgstr ""
......
...@@ -423,6 +423,40 @@ describe('Job App ', () => { ...@@ -423,6 +423,40 @@ describe('Job App ', () => {
}); });
}); });
describe('archived job', () => {
beforeEach(() => {
mock.onGet(props.endpoint).reply(200, Object.assign({}, job, { archived: true }), {});
vm = mountComponentWithStore(Component, {
props,
store,
});
});
it('renders warning about job being archived', done => {
setTimeout(() => {
expect(vm.$el.querySelector('.js-archived-job ')).not.toBeNull();
done();
}, 0);
});
});
describe('non-archived job', () => {
beforeEach(() => {
mock.onGet(props.endpoint).reply(200, job, {});
vm = mountComponentWithStore(Component, {
props,
store,
});
});
it('does not warning about job being archived', done => {
setTimeout(() => {
expect(vm.$el.querySelector('.js-archived-job ')).toBeNull();
done();
}, 0);
});
});
describe('trace output', () => { describe('trace output', () => {
beforeEach(() => { beforeEach(() => {
mock.onGet(props.endpoint).reply(200, job, {}); mock.onGet(props.endpoint).reply(200, job, {});
......
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