Merge branch 'revert-caf0a2e9' into 'master'

EE port of: Revert "Merge branch 'winh-prettier-job-app-ee' into 'master'"

See merge request gitlab-org/gitlab-ee!8011

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

 <script>
-import _ from 'underscore';
-import { mapGetters, mapState, mapActions } from 'vuex';
-import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import bp from '~/breakpoints';
-import CiHeader from '~/vue_shared/components/header_ci_component.vue';
-import Callout from '~/vue_shared/components/callout.vue';
-// ee-only start
-import SharedRunner from 'ee/jobs/components/shared_runner_limit_block.vue';
-// ee-only end
-import createStore from '../store';
-import EmptyState from './empty_state.vue';
-import EnvironmentsBlock from './environments_block.vue';
-import ErasedBlock from './erased_block.vue';
-import Log from './job_log.vue';
-import LogTopBar from './job_log_controllers.vue';
-import StuckBlock from './stuck_block.vue';
-import Sidebar from './sidebar.vue';
+  import _ from 'underscore';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+  import bp from '~/breakpoints';
+  import CiHeader from '~/vue_shared/components/header_ci_component.vue';
+  import Callout from '~/vue_shared/components/callout.vue';
+  // ee-only start
+  import SharedRunner from 'ee/jobs/components/shared_runner_limit_block.vue';
+  // ee-only end
+  import createStore from '../store';
+  import EmptyState from './empty_state.vue';
+  import EnvironmentsBlock from './environments_block.vue';
+  import ErasedBlock from './erased_block.vue';
+  import Log from './job_log.vue';
+  import LogTopBar from './job_log_controllers.vue';
+  import StuckBlock from './stuck_block.vue';
+  import Sidebar from './sidebar.vue';
 
-export default {
-  name: 'JobPageApp',
-  store: createStore(),
-  components: {
-    CiHeader,
-    Callout,
-    EmptyState,
-    EnvironmentsBlock,
-    ErasedBlock,
-    Log,
-    LogTopBar,
-    StuckBlock,
-    SharedRunner,
-    Sidebar,
-  },
-  props: {
-    runnerSettingsUrl: {
-      type: String,
-      required: false,
-      default: null,
+  export default {
+    name: 'JobPageApp',
+    store: createStore(),
+    components: {
+      CiHeader,
+      Callout,
+      EmptyState,
+      EnvironmentsBlock,
+      ErasedBlock,
+      Log,
+      LogTopBar,
+      StuckBlock,
+      SharedRunner,
+      Sidebar,
     },
-    runnerHelpUrl: {
-      type: String,
-      required: false,
-      default: null,
+    props: {
+      runnerSettingsUrl: {
+        type: String,
+        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: {
-      type: String,
-      required: true,
-    },
-    terminalPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    pagePath: {
-      type: String,
-      required: true,
-    },
-    logState: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState([
-      'isLoading',
-      'job',
-      'isSidebarOpen',
-      'trace',
-      'isTraceComplete',
-      'traceSize',
-      'isTraceSizeVisible',
-      'isScrollBottomDisabled',
-      'isScrollTopDisabled',
-      'isScrolledToBottomBeforeReceivingTrace',
-      'hasError',
-    ]),
-    ...mapGetters([
-      'headerActions',
-      'headerTime',
-      'shouldRenderCalloutMessage',
-      'shouldRenderTriggeredLabel',
-      'hasEnvironment',
-      'isJobStuck',
-      'shouldRenderSharedRunnerLimitWarning',
-      'hasTrace',
-      'emptyStateIllustration',
-      'isScrollingDown',
-      'emptyStateAction',
-    ]),
+    computed: {
+      ...mapState([
+        'isLoading',
+        'job',
+        'isSidebarOpen',
+        'trace',
+        'isTraceComplete',
+        'traceSize',
+        'isTraceSizeVisible',
+        'isScrollBottomDisabled',
+        'isScrollTopDisabled',
+        'isScrolledToBottomBeforeReceivingTrace',
+        'hasError',
+      ]),
+      ...mapGetters([
+        'headerActions',
+        'headerTime',
+        'shouldRenderCalloutMessage',
+        'shouldRenderTriggeredLabel',
+        'hasEnvironment',
+        'isJobStuck',
+        'shouldRenderSharedRunnerLimitWarning',
+        'hasTrace',
+        'emptyStateIllustration',
+        'isScrollingDown',
+        'emptyStateAction',
+      ]),
 
-    shouldRenderContent() {
-      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();
+      shouldRenderContent() {
+        return !this.isLoading && !this.hasError;
       }
     },
-  },
-  created() {
-    this.throttled = _.throttle(this.toggleScrollButtons, 100);
-
-    this.setJobEndpoint(this.endpoint);
-    this.setTraceOptions({
-      logState: this.logState,
-      pagePath: this.pagePath,
-    });
-
-    this.fetchJob();
-    this.fetchTrace();
+    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();
+        }
+      },
+    },
+    created() {
+      this.throttled = _.throttle(this.toggleScrollButtons, 100);
 
-    window.addEventListener('resize', this.onResize);
-    window.addEventListener('scroll', this.updateScroll);
-  },
+      this.setJobEndpoint(this.endpoint);
+      this.setTraceOptions({
+        logState: this.logState,
+        pagePath: this.pagePath,
+      });
 
-  mounted() {
-    this.updateSidebar();
-  },
+      this.fetchJob();
+      this.fetchTrace();
 
-  destroyed() {
-    window.removeEventListener('resize', this.onResize);
-    window.removeEventListener('scroll', this.updateScroll);
-  },
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('scroll', this.updateScroll);
+    },
 
-  methods: {
-    ...mapActions([
-      'setJobEndpoint',
-      'setTraceOptions',
-      'fetchJob',
-      'fetchStages',
-      'hideSidebar',
-      'showSidebar',
-      'toggleSidebar',
-      'fetchTrace',
-      'scrollBottom',
-      'scrollTop',
-      'toggleScrollButtons',
-      'toggleScrollAnimation',
-    ]),
-    onResize() {
+    mounted() {
       this.updateSidebar();
-      this.updateScroll();
     },
-    updateSidebar() {
-      if (bp.getBreakpointSize() === 'xs') {
-        this.hideSidebar();
-      } else if (!this.isSidebarOpen) {
-        this.showSidebar();
-      }
+
+    destroyed() {
+      window.removeEventListener('resize', this.onResize);
+      window.removeEventListener('scroll', this.updateScroll);
     },
-    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>
 <template>
   <div>