Merge branch 'master' into 31053-pipeline-ux

* master:
  Fallback to default pattern when note does not belong to project
  Merge request widget redesign
  Fixed focused test in notes spec
  Fixed UP arrow key not editing last comment in discussion
  Fix skipped manual actions issue in pipeline processing
  Fix notify_only_default_branch check for Slack service

3 files changed, 102 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.js b/app/assets/javascripts/vue_shared/components/memory_graph.js
new file mode 100644
index 00000000000..2a605b24339
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.js
@@ -0,0 +1,36 @@
+export default {
+  name: 'MemoryGraph',
+  props: {
+    metrics: { type: Array, required: true },
+    width: { type: String, required: true },
+    height: { type: String, required: true },
+  },
+  data() {
+    return {
+      pathD: '',
+      pathViewBox: '',
+      // dotX: '',
+      // dotY: '',
+    };
+  },
+  mounted() {
+    const renderData = this.$props.metrics.map(v => v[1]);
+    const maxMemory = Math.max.apply(null, renderData);
+    const minMemory = Math.min.apply(null, renderData);
+    const diff = maxMemory - minMemory;
+    // const cx = 0;
+    // const cy = 0;
+    const lineWidth = renderData.length;
+    const linePath = renderData.map((y, x) => `${x} ${maxMemory - y}`);
+    this.pathD = `M ${linePath}`;
+    this.pathViewBox = `0 0 ${lineWidth} ${diff}`;
+  },
+  template: `
+    <div class="memory-graph-container">
+      <svg :width="width" :height="height" xmlns="http://www.w3.org/2000/svg">
+        <path :d="pathD" :viewBox="pathViewBox" />
+        <!--<circle r="0.8" :cx="dotX" :cy="dotY" tranform="translate(0 -1)" /> -->
+      </svg>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js b/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
new file mode 100644
index 00000000000..ae246ada01b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pipeline_status_icon.js
@@ -0,0 +1,23 @@
+import { statusClassToSvgMap } from '../pipeline_svg_icons';
+
+export default {
+  name: 'PipelineStatusIcon',
+  props: {
+    pipelineStatus: { type: Object, required: true, default: () => ({}) },
+  },
+  computed: {
+    svg() {
+      return statusClassToSvgMap[this.pipelineStatus.icon];
+    },
+    statusClass() {
+      return `ci-status-icon ci-status-icon-${this.pipelineStatus.group}`;
+    },
+  },
+  template: `
+    <div :class="statusClass">
+      <a class="icon-link" :href="pipelineStatus.details_path">
+        <span v-html="svg" aria-hidden="true"></span>
+      </a>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/pipeline_svg_icons.js b/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
new file mode 100644
index 00000000000..5af30ae74f0
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/pipeline_svg_icons.js
@@ -0,0 +1,43 @@
+import canceledSvg from 'icons/_icon_status_canceled.svg';
+import createdSvg from 'icons/_icon_status_created.svg';
+import failedSvg from 'icons/_icon_status_failed.svg';
+import manualSvg from 'icons/_icon_status_manual.svg';
+import pendingSvg from 'icons/_icon_status_pending.svg';
+import runningSvg from 'icons/_icon_status_running.svg';
+import skippedSvg from 'icons/_icon_status_skipped.svg';
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
+import canceledBorderlessSvg from 'icons/_icon_status_canceled_borderless.svg';
+import createdBorderlessSvg from 'icons/_icon_status_created_borderless.svg';
+import failedBorderlessSvg from 'icons/_icon_status_failed_borderless.svg';
+import manualBorderlessSvg from 'icons/_icon_status_manual_borderless.svg';
+import pendingBorderlessSvg from 'icons/_icon_status_pending_borderless.svg';
+import runningBorderlessSvg from 'icons/_icon_status_running_borderless.svg';
+import skippedBorderlessSvg from 'icons/_icon_status_skipped_borderless.svg';
+import successBorderlessSvg from 'icons/_icon_status_success_borderless.svg';
+import warningBorderlessSvg from 'icons/_icon_status_warning_borderless.svg';
+
+export const statusClassToSvgMap = {
+  icon_status_canceled: canceledSvg,
+  icon_status_created: createdSvg,
+  icon_status_failed: failedSvg,
+  icon_status_manual: manualSvg,
+  icon_status_pending: pendingSvg,
+  icon_status_running: runningSvg,
+  icon_status_skipped: skippedSvg,
+  icon_status_success: successSvg,
+  icon_status_warning: warningSvg,
+};
+
+export const statusClassToBorderlessSvgMap = {
+  icon_status_canceled: canceledBorderlessSvg,
+  icon_status_created: createdBorderlessSvg,
+  icon_status_failed: failedBorderlessSvg,
+  icon_status_manual: manualBorderlessSvg,
+  icon_status_pending: pendingBorderlessSvg,
+  icon_status_running: runningBorderlessSvg,
+  icon_status_skipped: skippedBorderlessSvg,
+  icon_status_success: successBorderlessSvg,
+  icon_status_warning: warningBorderlessSvg,
+};