Skip to content

G
gitlab-ce
Commit c9c1f2c6 authored by Winnie Hellmann's avatar Winnie Hellmann
Browse files
Options

Make app/assets/javascripts/jobs/components/job_app.vue prettier

parent d32ac958
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 145 deletions
app/assets/javascripts/jobs/components/job_app.vue
View file @ c9c1f2c6
<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,
}, },
props: { runnerHelpUrl: {
runnerSettingsUrl: { type: String,
type: String, required: false,
required: false, default: null,
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,
},
}, },
computed: { endpoint: {
...mapState([ type: String,
'isLoading', required: true,
'job', },
'isSidebarOpen', terminalPath: {
'trace', type: String,
'isTraceComplete', required: false,
'traceSize', default: null,
'isTraceSizeVisible', },
'isScrollBottomDisabled', pagePath: {
'isScrollTopDisabled', type: String,
'isScrolledToBottomBeforeReceivingTrace', required: true,
'hasError', },
]), logState: {
...mapGetters([ type: String,
'headerActions', required: true,
'headerTime', },
'shouldRenderCalloutMessage', },
'shouldRenderTriggeredLabel', computed: {
'hasEnvironment', ...mapState([
'isJobStuck', 'isLoading',
'hasTrace', 'job',
'emptyStateIllustration', 'isSidebarOpen',
'isScrollingDown', 'trace',
'emptyStateAction', 'isTraceComplete',
]), '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, watch: {
// fetch the stages for the dropdown on the sidebar // Once the job log is loaded,
job(newVal, oldVal) { // fetch the stages for the dropdown on the sidebar
if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) { job(newVal, oldVal) {
this.fetchStages(); if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
} this.fetchStages();
}, }
}, },
created() { },
this.throttled = _.throttle(this.toggleScrollButtons, 100); created() {
this.throttled = _.throttle(this.toggleScrollButtons, 100);
this.setJobEndpoint(this.endpoint); this.setJobEndpoint(this.endpoint);
this.setTraceOptions({ this.setTraceOptions({
logState: this.logState, logState: this.logState,
pagePath: this.pagePath, pagePath: this.pagePath,
}); });
this.fetchJob(); this.fetchJob();
this.fetchTrace(); this.fetchTrace();
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
window.addEventListener('scroll', this.updateScroll); window.addEventListener('scroll', this.updateScroll);
}, },
mounted() { mounted() {
this.updateSidebar();
},
destroyed() {
window.removeEventListener('resize', this.onResize);
window.removeEventListener('scroll', this.updateScroll);
},
methods: {
...mapActions([
'setJobEndpoint',
'setTraceOptions',
'fetchJob',
'fetchStages',
'hideSidebar',
'showSidebar',
'toggleSidebar',
'fetchTrace',
'scrollBottom',
'scrollTop',
'toggleScrollButtons',
'toggleScrollAnimation',
]),
onResize() {
this.updateSidebar(); this.updateSidebar();
this.updateScroll();
}, },
updateSidebar() {
destroyed() { if (bp.getBreakpointSize() === 'xs') {
window.removeEventListener('resize', this.onResize); this.hideSidebar();
window.removeEventListener('scroll', this.updateScroll); } else if (!this.isSidebarOpen) {
this.showSidebar();
}
}, },
updateScroll() {
if (!isScrolledToBottom()) {
this.toggleScrollAnimation(false);
} else if (this.isScrollingDown) {
this.toggleScrollAnimation(true);
}
methods: { this.throttled();
...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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7