Merge branch '53535-sticky-archived' into 'master'
Renders a warning block for archived job Closes #53535 See merge request gitlab-org/gitlab-ce!22811
This commit is contained in:
commit
15f1952e30
|
@ -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 {
|
||||||
EnvironmentsBlock,
|
EnvironmentsBlock,
|
||||||
ErasedBlock,
|
ErasedBlock,
|
||||||
GlLoadingIcon,
|
GlLoadingIcon,
|
||||||
|
Icon,
|
||||||
Log,
|
Log,
|
||||||
LogTopBar,
|
LogTopBar,
|
||||||
StuckBlock,
|
StuckBlock,
|
||||||
|
@ -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 {
|
||||||
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 {
|
||||||
: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 {
|
||||||
};
|
};
|
||||||
</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 @@
|
||||||
@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;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Renders warning info when job is archieved
|
||||||
|
merge_request:
|
||||||
|
author:
|
||||||
|
type: added
|
|
@ -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 ', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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, {});
|
||||||
|
|
Loading…
Reference in New Issue