Commit cdfc2378 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'revert-62d8b906' into 'master'

Revert "Merge branch 'winh-prettier-job-app' into 'master'"

See merge request gitlab-org/gitlab-ce!22489
parents c45de884 02719344
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { mapGetters, mapState, mapActions } from 'vuex'; import { mapGetters, mapState, mapActions } from 'vuex';
import { isScrolledToBottom } from '~/lib/utils/scroll_utils'; import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
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 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';
import ErasedBlock from './erased_block.vue'; import ErasedBlock from './erased_block.vue';
import Log from './job_log.vue'; import Log from './job_log.vue';
import LogTopBar from './job_log_controllers.vue'; import LogTopBar from './job_log_controllers.vue';
import StuckBlock from './stuck_block.vue'; import StuckBlock from './stuck_block.vue';
import Sidebar from './sidebar.vue'; import Sidebar from './sidebar.vue';
export default { export default {
name: 'JobPageApp', name: 'JobPageApp',
store: createStore(), store: createStore(),
components: { components: {
CiHeader, CiHeader,
Callout, Callout,
EmptyState, EmptyState,
EnvironmentsBlock, EnvironmentsBlock,
ErasedBlock, ErasedBlock,
Log, Log,
LogTopBar, LogTopBar,
StuckBlock, StuckBlock,
Sidebar, Sidebar,
},
props: {
runnerSettingsUrl: {
type: String,
required: false,
default: null,
}, },
runnerHelpUrl: { props: {
type: String, runnerSettingsUrl: {
required: false, type: String,
default: null, required: false,
default: null,
},
runnerHelpUrl: {
type: String,
required: false,
default: null,
},
endpoint: {
type: String,
required: true,
},
terminalPath: {
type: String,
required: false,
default: null,
},
pagePath: {
type: String,
required: true,
},
logState: {
type: String,
required: true,
},
}, },
endpoint: { computed: {
type: String, ...mapState([
required: true, 'isLoading',
}, 'job',
terminalPath: { 'isSidebarOpen',
type: String, 'trace',
required: false, 'isTraceComplete',
default: null, 'traceSize',
}, 'isTraceSizeVisible',
pagePath: { 'isScrollBottomDisabled',
type: String, 'isScrollTopDisabled',
required: true, 'isScrolledToBottomBeforeReceivingTrace',
}, 'hasError',
logState: { ]),
type: String, ...mapGetters([
required: true, 'headerActions',
}, 'headerTime',
}, 'shouldRenderCalloutMessage',
computed: { 'shouldRenderTriggeredLabel',
...mapState([ 'hasEnvironment',
'isLoading', 'isJobStuck',
'job', 'hasTrace',
'isSidebarOpen', 'emptyStateIllustration',
'trace', 'isScrollingDown',
'isTraceComplete', 'emptyStateAction',
'traceSize', ]),
'isTraceSizeVisible',
'isScrollBottomDisabled',
'isScrollTopDisabled',
'isScrolledToBottomBeforeReceivingTrace',
'hasError',
]),
...mapGetters([
'headerActions',
'headerTime',
'shouldRenderCalloutMessage',
'shouldRenderTriggeredLabel',
'hasEnvironment',
'isJobStuck',
'hasTrace',
'emptyStateIllustration',
'isScrollingDown',
'emptyStateAction',
]),
shouldRenderContent() { shouldRenderContent() {
return !this.isLoading && !this.hasError; return !this.isLoading && !this.hasError;
},
},
watch: {
// Once the job log is loaded,
// fetch the stages for the dropdown on the sidebar
job(newVal, oldVal) {
if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
this.fetchStages();
} }
}, },
}, watch: {
created() { // Once the job log is loaded,
this.throttled = _.throttle(this.toggleScrollButtons, 100); // fetch the stages for the dropdown on the sidebar
job(newVal, oldVal) {
this.setJobEndpoint(this.endpoint); if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
this.setTraceOptions({ this.fetchStages();
logState: this.logState, }
pagePath: this.pagePath, },
}); },
created() {
this.fetchJob(); this.throttled = _.throttle(this.toggleScrollButtons, 100);
this.fetchTrace();
window.addEventListener('resize', this.onResize); this.setJobEndpoint(this.endpoint);
window.addEventListener('scroll', this.updateScroll); this.setTraceOptions({
}, logState: this.logState,
pagePath: this.pagePath,
});
mounted() { this.fetchJob();
this.updateSidebar(); this.fetchTrace();
},
destroyed() { window.addEventListener('resize', this.onResize);
window.removeEventListener('resize', this.onResize); window.addEventListener('scroll', this.updateScroll);
window.removeEventListener('scroll', this.updateScroll); },
},
methods: { mounted() {
...mapActions([
'setJobEndpoint',
'setTraceOptions',
'fetchJob',
'fetchStages',
'hideSidebar',
'showSidebar',
'toggleSidebar',
'fetchTrace',
'scrollBottom',
'scrollTop',
'toggleScrollButtons',
'toggleScrollAnimation',
]),
onResize() {
this.updateSidebar(); this.updateSidebar();
this.updateScroll();
}, },
updateSidebar() {
if (bp.getBreakpointSize() === 'xs') { destroyed() {
this.hideSidebar(); window.removeEventListener('resize', this.onResize);
} else if (!this.isSidebarOpen) { window.removeEventListener('scroll', this.updateScroll);
this.showSidebar();
}
}, },
updateScroll() {
if (!isScrolledToBottom()) {
this.toggleScrollAnimation(false);
} else if (this.isScrollingDown) {
this.toggleScrollAnimation(true);
}
this.throttled(); methods: {
...mapActions([
'setJobEndpoint',
'setTraceOptions',
'fetchJob',
'fetchStages',
'hideSidebar',
'showSidebar',
'toggleSidebar',
'fetchTrace',
'scrollBottom',
'scrollTop',
'toggleScrollButtons',
'toggleScrollAnimation',
]),
onResize() {
this.updateSidebar();
this.updateScroll();
},
updateSidebar() {
if (bp.getBreakpointSize() === 'xs') {
this.hideSidebar();
} else if (!this.isSidebarOpen) {
this.showSidebar();
}
},
updateScroll() {
if (!isScrolledToBottom()) {
this.toggleScrollAnimation(false);
} else if (this.isScrollingDown) {
this.toggleScrollAnimation(true);
}
this.throttled();
},
}, },
}, };
};
</script> </script>
<template> <template>
<div> <div>
......
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