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

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';
-  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,
-      Sidebar,
+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';
+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,
+    Sidebar,
+  },
+  props: {
+    runnerSettingsUrl: {
+      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,
-      },
+    runnerHelpUrl: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState([
-        'isLoading',
-        'job',
-        'isSidebarOpen',
-        'trace',
-        'isTraceComplete',
-        'traceSize',
-        'isTraceSizeVisible',
-        'isScrollBottomDisabled',
-        'isScrollTopDisabled',
-        'isScrolledToBottomBeforeReceivingTrace',
-        'hasError',
-      ]),
-      ...mapGetters([
-        'headerActions',
-        'headerTime',
-        'shouldRenderCalloutMessage',
-        'shouldRenderTriggeredLabel',
-        'hasEnvironment',
-        'isJobStuck',
-        'hasTrace',
-        'emptyStateIllustration',
-        'isScrollingDown',
-        'emptyStateAction',
-      ]),
-      shouldRenderContent() {
-        return !this.isLoading && !this.hasError;
-      }
+    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',
+      '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();
-        }
-      },
+  },
+  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);
-      this.setJobEndpoint(this.endpoint);
-      this.setTraceOptions({
-        logState: this.logState,
-        pagePath: this.pagePath,
-      });
-      this.fetchJob();
-      this.fetchTrace();
-      window.addEventListener('resize', this.onResize);
-      window.addEventListener('scroll', this.updateScroll);
-    },
-    mounted() {
+  },
+  created() {
+    this.throttled = _.throttle(this.toggleScrollButtons, 100);
+    this.setJobEndpoint(this.endpoint);
+    this.setTraceOptions({
+      logState: this.logState,
+      pagePath: this.pagePath,
+    });
+    this.fetchJob();
+    this.fetchTrace();
+    window.addEventListener('resize', this.onResize);
+    window.addEventListener('scroll', this.updateScroll);
+  },
+  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.updateScroll();
     },
-
-    destroyed() {
-      window.removeEventListener('resize', this.onResize);
-      window.removeEventListener('scroll', this.updateScroll);
+    updateSidebar() {
+      if (bp.getBreakpointSize() === 'xs') {
+        this.hideSidebar();
+      } else if (!this.isSidebarOpen) {
+        this.showSidebar();
+      }
     },
-    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();
-      },
+    updateScroll() {
+      if (!isScrolledToBottom()) {
+        this.toggleScrollAnimation(false);
+      } else if (this.isScrollingDown) {
+        this.toggleScrollAnimation(true);
+      }
+      this.throttled();
     },
-  };
+  },
+};
 </script>
 <template>
   <div>