Prettify merge_conflicts monitoring and notebook modules

app/assets/javascripts/merge_conflicts/components/diff_file_editor.js

@@ -6,7 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
@@ -35,10 +35,10 @@ import { __ } from '~/locale';
     computed: {
       classObject() {
         return {
-          'saved': this.saved,
-          'is-loading': this.loading
+          saved: this.saved,
+          'is-loading': this.loading,
         };
-      }
+      },
     },
     watch: {
       ['file.showEditor'](val) {
@@ -49,7 +49,7 @@ import { __ } from '~/locale';
         }
 
         this.loadEditor();
-      }
+      },
     },
     mounted() {
       if (this.file.loadEditor) {
@@ -60,7 +60,8 @@ import { __ } from '~/locale';
       loadEditor() {
         this.loading = true;
 
-        axios.get(this.file.content_path)
+        axios
+          .get(this.file.content_path)
           .then(({ data }) => {
             const content = this.$el.querySelector('pre');
             const fileContent = document.createTextNode(data.content);
@@ -101,7 +102,7 @@ import { __ } from '~/locale';
       },
       acceptDiscardConfirmation(file) {
         this.onAcceptDiscardConfirmation(file);
-      }
-    }
+      },
+    },
   });
 })(window.gl || (window.gl = {}));

app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import actionsMixin from '../mixins/line_conflict_actions';
 import utilsMixin from '../mixins/line_conflict_utils';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({

app/assets/javascripts/merge_conflicts/merge_conflict_store.js

@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   const diffViewType = Cookies.get('diff_view');
@@ -17,11 +17,11 @@ import Cookies from 'js-cookie';
   const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
   const VIEW_TYPES = {
     INLINE: 'inline',
-    PARALLEL: 'parallel'
+    PARALLEL: 'parallel',
   };
   const CONFLICT_TYPES = {
     TEXT: 'text',
-    TEXT_EDITOR: 'text-editor'
+    TEXT_EDITOR: 'text-editor',
   };
 
   global.mergeConflicts.mergeConflictsStore = {
@@ -31,7 +31,7 @@ import Cookies from 'js-cookie';
       isSubmitting: false,
       isParallel: diffViewType === VIEW_TYPES.PARALLEL,
       diffViewType: diffViewType,
-      conflictsData: {}
+      conflictsData: {},
     },
 
     setConflictsData(data) {
@@ -47,7 +47,7 @@ import Cookies from 'js-cookie';
     },
 
     decorateFiles(files) {
-      files.forEach((file) => {
+      files.forEach(file => {
         file.content = '';
         file.resolutionData = {};
         file.promptDiscardConfirmation = false;
@@ -72,7 +72,7 @@ import Cookies from 'js-cookie';
     setInlineLine(file) {
       file.inlineLines = [];
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         let currentLineType = 'new';
         const { conflict, lines, id } = section;
 
@@ -80,7 +80,7 @@ import Cookies from 'js-cookie';
           file.inlineLines.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if ((type === 'new' || type === 'old') && currentLineType !== type) {
@@ -102,7 +102,7 @@ import Cookies from 'js-cookie';
       file.parallelLines = [];
       const linesObj = { left: [], right: [] };
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         const { conflict, lines, id } = section;
 
         if (conflict) {
@@ -110,7 +110,7 @@ import Cookies from 'js-cookie';
           linesObj.right.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if (conflict) {
@@ -131,10 +131,7 @@ import Cookies from 'js-cookie';
       });
 
       for (let i = 0, len = linesObj.left.length; i < len; i += 1) {
-        file.parallelLines.push([
-          linesObj.right[i],
-          linesObj.left[i]
-        ]);
+        file.parallelLines.push([linesObj.right[i], linesObj.left[i]]);
       }
     },
 
@@ -159,9 +156,9 @@ import Cookies from 'js-cookie';
       const { files } = this.state.conflictsData;
       let count = 0;
 
-      files.forEach((file) => {
+      files.forEach(file => {
         if (file.type === CONFLICT_TYPES.TEXT) {
-          file.sections.forEach((section) => {
+          file.sections.forEach(section => {
             if (section.conflict) {
               count += 1;
             }
@@ -198,7 +195,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isHead: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -229,7 +226,7 @@ import Cookies from 'js-cookie';
         section: isHead ? 'head' : 'origin',
         richText: rich_text,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -243,7 +240,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isOrigin: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -290,14 +287,14 @@ import Cookies from 'js-cookie';
     },
 
     restoreFileLinesState(file) {
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.hasConflict || line.isHeader) {
           line.isSelected = false;
           line.isUnselected = false;
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const isLeftMatch = left.hasConflict || left.isHeader;
@@ -354,7 +351,7 @@ import Cookies from 'js-cookie';
       const initial = 'Commit to source branch';
       const inProgress = 'Committing...';
 
-      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
+      return this.state ? (this.state.isSubmitting ? inProgress : initial) : initial;
     },
 
     getCommitData() {
@@ -362,13 +359,13 @@ import Cookies from 'js-cookie';
 
       commitData = {
         commit_message: this.state.conflictsData.commitMessage,
-        files: []
+        files: [],
       };
 
-      this.state.conflictsData.files.forEach((file) => {
+      this.state.conflictsData.files.forEach(file => {
         const addFile = {
           old_path: file.old_path,
-          new_path: file.new_path
+          new_path: file.new_path,
         };
 
         if (file.type === CONFLICT_TYPES.TEXT) {
@@ -391,13 +388,13 @@ import Cookies from 'js-cookie';
     handleSelected(file, sectionId, selection) {
       Vue.set(file.resolutionData, sectionId, selection);
 
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
           this.markLine(line, selection);
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const hasSameId = right.id === sectionId || left.id === sectionId;
@@ -430,6 +427,6 @@ import Cookies from 'js-cookie';
 
     fileTextTypePresent() {
       return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
-    }
+    },
   };
 })(window.gl || (window.gl = {}));

app/assets/javascripts/monitoring/components/graph.vue

@@ -148,7 +148,7 @@ export default {
       point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
       point.x += 7;
 
-      this.seriesUnderMouse = this.timeSeries.filter((series) => {
+      this.seriesUnderMouse = this.timeSeries.filter(series => {
         const mouseX = series.timeSeriesScaleX.invert(point.x);
         let minDistance = Infinity;
 
@@ -221,21 +221,18 @@ export default {
         .scale(axisYScale)
         .ticks(measurements.yTicks);
 
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.x-axis')
         .call(xAxis);
 
       const width = this.graphWidth;
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.y-axis')
         .call(yAxis)
         .selectAll('.tick')
         .each(function createTickLines(d, i) {
           if (i > 0) {
-            d3
-              .select(this)
+            d3.select(this)
               .select('line')
               .attr('x2', width)
               .attr('class', 'axis-tick');

app/assets/javascripts/monitoring/components/graph/axis.vue

@@ -38,38 +38,25 @@ export default {
   computed: {
     textTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 || 0;
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
 
       return `translate(15, ${yCoordinate}) rotate(-90)`;
     },
 
     rectTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 +
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
           this.yLabelWidth / 2 || 0;
 
       return `translate(0, ${yCoordinate}) rotate(-90)`;
     },
 
     xPosition() {
-      return (
-        (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 -
-          this.margin.right || 0
-      );
+      return (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 - this.margin.right || 0;
     },
 
     yPosition() {
-      return (
-        this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset || 0
-      );
+      return this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset || 0;
     },
 
     yAxisLabelSentenceCase() {

app/assets/javascripts/monitoring/components/graph/flag.vue

@@ -92,7 +92,8 @@ export default {
   methods: {
     seriesMetricValue(seriesIndex, series) {
       const indexFromCoordinates = this.currentCoordinates[series.metricTag]
-      ? this.currentCoordinates[series.metricTag].currentDataIndex : 0;
+        ? this.currentCoordinates[series.metricTag].currentDataIndex
+        : 0;
       const index = this.deploymentFlagData
         ? this.deploymentFlagData.seriesIndex
         : indexFromCoordinates;

app/assets/javascripts/monitoring/components/graph/track_info.vue

@@ -26,4 +26,3 @@ export default {
     {{ summaryMetrics }}
   </span>
 </template>
-

app/assets/javascripts/monitoring/components/graph/track_line.vue

@@ -33,4 +33,3 @@ export default {
     </svg>
   </td>
 </template>
-

app/assets/javascripts/monitoring/mixins/monitoring_mixins.js

@@ -6,7 +6,7 @@ const mixins = {
       if (!this.reducedDeploymentData) return false;
 
       let dataFound = false;
-      this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
+      this.reducedDeploymentData = this.reducedDeploymentData.map(d => {
         const deployment = d;
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
@@ -61,7 +61,7 @@ const mixins = {
 
       this.currentCoordinates = {};
 
-      this.seriesUnderMouse.forEach((series) => {
+      this.seriesUnderMouse.forEach(series => {
         const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
         const currentData = series.values[currentDataIndex];
         const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));

app/assets/javascripts/monitoring/services/monitoring_service.js

@@ -8,7 +8,8 @@ const MAX_REQUESTS = 3;
 function backOffRequest(makeRequestCallback) {
   let requestCounter = 0;
   return backOff((next, stop) => {
-    makeRequestCallback().then((resp) => {
+    makeRequestCallback()
+      .then(resp => {
         if (resp.status === statusCodes.NO_CONTENT) {
           requestCounter += 1;
           if (requestCounter < MAX_REQUESTS) {
@@ -19,7 +20,8 @@ function backOffRequest(makeRequestCallback) {
         } else {
           stop(resp);
         }
-    }).catch(stop);
+      })
+      .catch(stop);
   });
 }
 
@@ -33,7 +35,7 @@ export default class MonitoringService {
   getGraphsData() {
     return backOffRequest(() => axios.get(this.metricsEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.data) {
           throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
@@ -47,20 +49,25 @@ export default class MonitoringService {
     }
     return backOffRequest(() => axios.get(this.deploymentEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.deployments) {
-          throw new Error(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+          throw new Error(
+            s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
+          );
         }
         return response.deployments;
       });
   }
 
   getEnvironmentsData() {
-    return axios.get(this.environmentsEndpoint)
+    return axios
+      .get(this.environmentsEndpoint)
       .then(resp => resp.data)
-    .then((response) => {
+      .then(response => {
         if (!response || !response.environments) {
-        throw new Error(s__('Metrics|There was an error fetching the environments data, please try again'));
+          throw new Error(
+            s__('Metrics|There was an error fetching the environments data, please try again'),
+          );
         }
         return response.environments;
       });

app/assets/javascripts/monitoring/utils/measurements.js

 export default {
-  small: { // Covers both xs and sm screen sizes
+  small: {
+    // Covers both xs and sm screen sizes
     margin: {
       top: 40,
       right: 40,
@@ -18,7 +19,8 @@ export default {
     },
     axisLabelLineOffset: -20,
   },
-  large: { // This covers both md and lg screen sizes
+  large: {
+    // This covers both md and lg screen sizes
     margin: {
       top: 80,
       right: 80,

app/assets/javascripts/monitoring/utils/multiple_time_series.js

@@ -66,7 +66,8 @@ function queryTimeSeries(query, graphDrawData, lineStyle) {
   // offset the same amount as the original data
   const [minX, maxX] = graphDrawData.xDom;
   const offset = d3.timeMinute(minX) - Number(minX);
-  const datesWithoutGaps = d3.timeSecond.every(60)
+  const datesWithoutGaps = d3.timeSecond
+    .every(60)
     .range(d3.timeMinute.offset(minX, -1), maxX)
     .map(d => d - offset);
 
@@ -208,9 +209,7 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
 
   const timeSeries = queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
-    return series.concat(
-      queryTimeSeries(query, graphDrawData, lineStyle),
-    );
+    return series.concat(queryTimeSeries(query, graphDrawData, lineStyle));
   }, []);
 
   return {

app/assets/javascripts/notebook/cells/code/index.vue

 <script>
-  import Prism from '../../lib/highlight';
-  import Prompt from '../prompt.vue';
+import Prism from '../../lib/highlight';
+import Prompt from '../prompt.vue';
 
-  export default {
+export default {
   components: {
     prompt: Prompt,
   },
@@ -39,7 +39,7 @@
   mounted() {
     Prism.highlightElement(this.$refs.code);
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/notebook/cells/markdown.vue

 <script>
-  /* global katex */
-  import marked from 'marked';
-  import sanitize from 'sanitize-html';
-  import Prompt from './prompt.vue';
+/* global katex */
+import marked from 'marked';
+import sanitize from 'sanitize-html';
+import Prompt from './prompt.vue';
 
-  const renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 
-  /*
+/*
     Regex to match KaTex blocks.
 
     Supports the following:
@@ -17,7 +17,7 @@
 
     The matched text then goes through the KaTex renderer & then outputs the HTML
   */
-  const katexRegexString = `(
+const katexRegexString = `(
     ^\\\\begin{[a-zA-Z]+}\\s
     |
     ^\\$\\$
@@ -32,14 +32,17 @@
     |
     \\$
   )
-  `.replace(/\s/g, '').trim();
+  `
+  .replace(/\s/g, '')
+  .trim();
 
-  renderer.paragraph = (t) => {
+renderer.paragraph = t => {
   let text = t;
   let inline = false;
 
   if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/&amp;/g, '&')
+    const katexString = text
+      .replace(/&amp;/g, '&')
       .replace(/&=&/g, '\\space=\\space')
       .replace(/<(\/?)em>/g, '_');
     const regex = new RegExp(katexRegexString, 'gi');
@@ -64,14 +67,14 @@
   }
 
   return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
-  };
+};
 
-  marked.setOptions({
+marked.setOptions({
   sanitize: true,
   renderer,
-  });
+});
 
-  export default {
+export default {
   components: {
     prompt: Prompt,
   },
@@ -91,7 +94,7 @@
       });
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -105,13 +108,13 @@
 </template>
 
 <style>
-  .markdown .katex {
+.markdown .katex {
   display: block;
   text-align: center;
-  }
+}
 
-  .markdown .inline-katex .katex {
+.markdown .inline-katex .katex {
   display: inline;
   text-align: initial;
-  }
+}
 </style>

app/assets/javascripts/notebook/cells/output/html.vue

 <script>
-  import sanitize from 'sanitize-html';
-  import Prompt from '../prompt.vue';
+import sanitize from 'sanitize-html';
+import Prompt from '../prompt.vue';
 
-  export default {
+export default {
   components: {
     prompt: Prompt,
   },
@@ -15,16 +15,14 @@
   computed: {
     sanitizedOutput() {
       return sanitize(this.rawCode, {
-          allowedTags: sanitize.defaults.allowedTags.concat([
-            'img', 'svg',
-          ]),
+        allowedTags: sanitize.defaults.allowedTags.concat(['img', 'svg']),
         allowedAttributes: {
           img: ['src'],
         },
       });
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/notebook/cells/output/image.vue

 <script>
-  import Prompt from '../prompt.vue';
+import Prompt from '../prompt.vue';
 
-  export default {
+export default {
   components: {
     prompt: Prompt,
   },
@@ -15,7 +15,7 @@
       required: true,
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/notebook/cells/output/index.vue

 <script>
-  import CodeCell from '../code/index.vue';
-  import Html from './html.vue';
-  import Image from './image.vue';
+import CodeCell from '../code/index.vue';
+import Html from './html.vue';
+import Image from './image.vue';
 
-  export default {
+export default {
   components: {
     'code-cell': CodeCell,
     'html-output': Html,
@@ -72,7 +72,7 @@
       return data;
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/javascripts/notebook/cells/prompt.vue

 <script>
-  export default {
+export default {
   props: {
     type: {
       type: String,
@@ -17,7 +17,7 @@
       return this.type !== '' && this.count;
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -29,9 +29,9 @@
 </template>
 
 <style scoped>
-  .prompt {
+.prompt {
   padding: 0 10px;
   min-width: 7em;
   font-family: monospace;
-  }
+}
 </style>

app/assets/javascripts/notebook/index.vue

 <script>
-  import {
-    MarkdownCell,
-    CodeCell,
-  } from './cells';
+import { MarkdownCell, CodeCell } from './cells';
 
-  export default {
+export default {
   components: {
     'code-cell': CodeCell,
     'markdown-cell': MarkdownCell,
@@ -45,7 +42,7 @@
       return `${type}-cell`;
     },
   },
-  };
+};
 </script>
 
 <template>