Merge branch 'ce-to-ee-2017-06-28' into 'master'

CE upstream - Wednesday

See merge request !2293

.gitignore

@@ -21,6 +21,7 @@ eslint-report.html
 /.yarn-cache
 /.byebug_history
 /Vagrantfile
+/app/assets/javascripts/locale/**/app.js
 /backups/*
 /config/aws.yml
 /config/database.yml

.gitlab-ci.yml

@@ -199,6 +199,7 @@ setup-test-env:
   script:
     - node --version
     - yarn install --pure-lockfile --cache-folder .yarn-cache
+    - bundle exec rake gettext:po_to_json
     - bundle exec rake gitlab:assets:compile
     - bundle exec ruby -Ispec -e 'require "spec_helper" ; TestEnv.init'
   artifacts:
@@ -419,6 +420,7 @@ gitlab:assets:compile:
     NO_COMPRESSION: "true"
   script:
     - yarn install --pure-lockfile --production --cache-folder .yarn-cache
+    - bundle exec rake gettext:po_to_json
     - bundle exec rake gitlab:assets:compile
   artifacts:
     name: webpack-report
@@ -436,6 +438,7 @@ karma:
     BABEL_ENV: "coverage"
     CHROME_LOG_FILE: "chrome_debug.log"
   script:
+    - bundle exec rake gettext:po_to_json
     - bundle exec rake karma
   coverage: '/^Statements *: (\d+\.\d+%)/'
   artifacts:
@@ -459,6 +462,7 @@ codeclimate:
   script:
     - docker pull codeclimate/codeclimate
     - docker run --env CODECLIMATE_CODE="$PWD" --volume "$PWD":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate analyze -f json > codeclimate.json
+    - sed -i.bak 's/\({"body":"\)[^"]*\("}\)/\1\2/g' codeclimate.json
   artifacts:
     paths: [codeclimate.json]
 
@@ -533,3 +537,9 @@ cache gems:
   only:
     - master@gitlab-org/gitlab-ce
     - master@gitlab-org/gitlab-ee
+
+gitlab_git_test:
+  variables:
+    SETUP_DB: "false"
+  script:
+    - spec/support/prepare-gitlab-git-test-for-commit --check-for-changes

Gemfile

@@ -365,7 +365,7 @@ group :test do
   gem 'shoulda-matchers', '~> 2.8.0', require: false
   gem 'email_spec', '~> 1.6.0'
   gem 'json-schema', '~> 2.6.2'
-  gem 'webmock', '~> 1.24.0'
+  gem 'webmock', '~> 2.3.2'
   gem 'test_after_commit', '~> 1.1'
   gem 'sham_rack', '~> 1.3.6'
   gem 'timecop', '~> 0.8.0'

Gemfile.lock

@@ -395,7 +395,7 @@ GEM
       temple (~> 0.7.6)
       thor
       tilt
-    hashdiff (0.3.2)
+    hashdiff (0.3.4)
     hashie (3.5.5)
     hashie-forbidden_attributes (0.1.1)
       hashie (>= 3.0)
@@ -491,7 +491,7 @@ GEM
     mimemagic (0.3.0)
     mini_portile2 (2.1.0)
     minitest (5.7.0)
-    mmap2 (2.2.6)
+    mmap2 (2.2.7)
     mousetrap-rails (1.4.6)
     msgpack (1.1.0)
     multi_json (1.12.1)
@@ -919,7 +919,7 @@ GEM
     vmstat (2.3.0)
     warden (1.2.6)
       rack (>= 1.0)
-    webmock (1.24.6)
+    webmock (2.3.2)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
@@ -1158,7 +1158,7 @@ DEPENDENCIES
   version_sorter (~> 2.1.0)
   virtus (~> 1.0.1)
   vmstat (~> 2.3.0)
-  webmock (~> 1.24.0)
+  webmock (~> 2.3.2)
   webpack-rails (~> 0.9.10)
   wikicloth (= 0.8.1)
 

app/assets/javascripts/awards_handler.js

@@ -2,11 +2,7 @@
 /* global Flash */
 
 import Cookies from 'js-cookie';
-
-import emojiMap from 'emojis/digests.json';
-import emojiAliases from 'emojis/aliases.json';
-import { glEmojiTag } from './behaviors/gl_emoji';
-import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
+import * as Emoji from './emoji';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
@@ -17,8 +13,6 @@ const requestAnimationFrame = window.requestAnimationFrame ||
 
 const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence
 
-let categoryMap = null;
-
 const categoryLabelMap = {
   activity: 'Activity',
   people: 'People',
@@ -30,26 +24,6 @@ const categoryLabelMap = {
   flags: 'Flags',
 };
 
-function buildCategoryMap() {
-  return Object.keys(emojiMap).reduce((currentCategoryMap, emojiNameKey) => {
-    const emojiInfo = emojiMap[emojiNameKey];
-    if (currentCategoryMap[emojiInfo.category]) {
-      currentCategoryMap[emojiInfo.category].push(emojiNameKey);
-    }
-
-    return currentCategoryMap;
-  }, {
-    activity: [],
-    people: [],
-    nature: [],
-    food: [],
-    travel: [],
-    objects: [],
-    symbols: [],
-    flags: [],
-  });
-}
-
 function renderCategory(name, emojiList, opts = {}) {
   return `
     <h5 class="emoji-menu-title">
@@ -59,7 +33,7 @@ function renderCategory(name, emojiList, opts = {}) {
       ${emojiList.map(emojiName => `
         <li class="emoji-menu-list-item">
           <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
-            ${glEmojiTag(emojiName, {
+            ${Emoji.glEmojiTag(emojiName, {
               sprite: true,
             })}
           </button>
@@ -72,7 +46,6 @@ function renderCategory(name, emojiList, opts = {}) {
 export default class AwardsHandler {
   constructor() {
     this.eventListeners = [];
-    this.aliases = emojiAliases;
     // If the user shows intent let's pre-build the menu
     this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
       const $menu = $('.emoji-menu');
@@ -81,8 +54,6 @@ export default class AwardsHandler {
           this.createEmojiMenu();
         });
       }
-      // Prebuild the categoryMap
-      categoryMap = categoryMap || buildCategoryMap();
     });
     this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
       e.stopPropagation();
@@ -168,7 +139,7 @@ export default class AwardsHandler {
     this.isCreatingEmojiMenu = true;
 
     // Render the first category
-    categoryMap = categoryMap || buildCategoryMap();
+    const categoryMap = Emoji.getEmojiCategoryMap();
     const categoryNameKey = Object.keys(categoryMap)[0];
     const emojisInCategory = categoryMap[categoryNameKey];
     const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
@@ -208,7 +179,7 @@ export default class AwardsHandler {
     }
     this.isAddingRemainingEmojiMenuCategories = true;
 
-    categoryMap = categoryMap || buildCategoryMap();
+    const categoryMap = Emoji.getEmojiCategoryMap();
 
     // Avoid the jank and render the remaining categories separately
     // This will take more time, but makes UI more responsive
@@ -262,14 +233,8 @@ export default class AwardsHandler {
     return $menu.css(css);
   }
 
-  addAward(
-    votesBlock,
-    awardUrl,
-    emoji,
-    checkMutuality,
-    callback,
-  ) {
-    const normalizedEmoji = this.normalizeEmojiName(emoji);
+  addAward(votesBlock, awardUrl, emoji, checkMutuality, callback) {
+    const normalizedEmoji = Emoji.normalizeEmojiName(emoji);
     const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
     this.postEmoji($emojiButton, awardUrl, normalizedEmoji, () => {
       this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
@@ -279,16 +244,12 @@ export default class AwardsHandler {
     $('.js-add-award.is-active').removeClass('is-active');
   }
 
-  addAwardToEmojiBar(
-    votesBlock,
-    emoji,
-    checkForMutuality,
-  ) {
+  addAwardToEmojiBar(votesBlock, emoji, checkForMutuality) {
     if (checkForMutuality || checkForMutuality === null) {
       this.checkMutuality(votesBlock, emoji);
     }
     this.addEmojiToFrequentlyUsedList(emoji);
-    const normalizedEmoji = this.normalizeEmojiName(emoji);
+    const normalizedEmoji = Emoji.normalizeEmojiName(emoji);
     const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
     if ($emojiButton.length > 0) {
       if (this.isActive($emojiButton)) {
@@ -413,7 +374,7 @@ export default class AwardsHandler {
   createAwardButtonForVotesBlock(votesBlock, emojiName) {
     const buttonHtml = `
       <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom">
-        ${glEmojiTag(emojiName)}
+        ${Emoji.glEmojiTag(emojiName)}
         <span class="award-control-text js-counter">1</span>
       </button>
     `;
@@ -478,12 +439,8 @@ export default class AwardsHandler {
     return $('body, html').animate(options, 200);
   }
 
-  normalizeEmojiName(emoji) {
-    return Object.prototype.hasOwnProperty.call(this.aliases, emoji) ? this.aliases[emoji] : emoji;
-  }
-
   addEmojiToFrequentlyUsedList(emoji) {
-    if (isEmojiNameValid(emoji)) {
+    if (Emoji.isEmojiNameValid(emoji)) {
       this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
       Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
     }
@@ -493,7 +450,7 @@ export default class AwardsHandler {
     return this.frequentlyUsedEmojis || (() => {
       const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
       this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
-        inputName => isEmojiNameValid(inputName),
+        inputName => Emoji.isEmojiNameValid(inputName),
       );
 
       return this.frequentlyUsedEmojis;
@@ -535,21 +492,11 @@ export default class AwardsHandler {
     }
   }
 
-  findMatchingEmojiElements(term) {
-    const safeTerm = term.toLowerCase();
-
-    const namesMatchingAlias = [];
-    Object.keys(emojiAliases).forEach((alias) => {
-      if (alias.indexOf(safeTerm) >= 0) {
-        namesMatchingAlias.push(emojiAliases[alias]);
-      }
-    });
-    const $matchingElements = namesMatchingAlias.concat(safeTerm)
-      .reduce(
-        ($result, searchTerm) =>
-          $result.add($(`.emoji-menu-list:not(.frequent-emojis) [data-name*="${searchTerm}"]`)),
-        $([]),
-      );
+  findMatchingEmojiElements(query) {
+    const emojiMatches = Emoji.filterEmojiNamesByAlias(query);
+    const $emojiElements = $('.emoji-menu-list:not(.frequent-emojis) [data-name]');
+    const $matchingElements = $emojiElements
+      .filter((i, elm) => emojiMatches.indexOf(elm.dataset.name) >= 0);
     return $matchingElements.closest('li').clone();
   }
 

app/assets/javascripts/behaviors/gl_emoji.js

 import installCustomElements from 'document-register-element';
-import emojiMap from 'emojis/digests.json';
-import emojiAliases from 'emojis/aliases.json';
-import { getUnicodeSupportMap } from './gl_emoji/unicode_support_map';
-import { isEmojiUnicodeSupported } from './gl_emoji/is_emoji_unicode_supported';
+import { emojiImageTag, emojiFallbackImageSrc } from '../emoji';
+import isEmojiUnicodeSupported from '../emoji/support';
 
 installCustomElements(window);
 
-const generatedUnicodeSupportMap = getUnicodeSupportMap();
-
-function emojiImageTag(name, src) {
-  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
-}
-
-function assembleFallbackImageSrc(inputName) {
-  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
-    emojiAliases[inputName] : inputName;
-  let emojiInfo = emojiMap[name];
-  // Fallback to question mark for unknown emojis
-  if (!emojiInfo) {
-    name = 'grey_question';
-    emojiInfo = emojiMap[name];
-  }
-  const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
-
-  return fallbackImageSrc;
-}
-const glEmojiTagDefaults = {
-  sprite: false,
-  forceFallback: false,
-};
-function glEmojiTag(inputName, options) {
-  const opts = Object.assign({}, glEmojiTagDefaults, options);
-  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
-    emojiAliases[inputName] : inputName;
-  let emojiInfo = emojiMap[name];
-  // Fallback to question mark for unknown emojis
-  if (!emojiInfo) {
-    name = 'grey_question';
-    emojiInfo = emojiMap[name];
-  }
-
-  const fallbackImageSrc = assembleFallbackImageSrc(name);
-  const fallbackSpriteClass = `emoji-${name}`;
-
-  const classList = [];
-  if (opts.forceFallback && opts.sprite) {
-    classList.push('emoji-icon');
-    classList.push(fallbackSpriteClass);
-  }
-  const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
-  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
-  let contents = emojiInfo.moji;
-  if (opts.forceFallback && !opts.sprite) {
-    contents = emojiImageTag(name, fallbackImageSrc);
-  }
-
-  return `
-  <gl-emoji
-    ${classAttribute}
-    data-name="${name}"
-    data-fallback-src="${fallbackImageSrc}"
-    ${fallbackSpriteAttribute}
-    data-unicode-version="${emojiInfo.unicodeVersion}"
-    title="${emojiInfo.description}"
-  >
-    ${contents}
-  </gl-emoji>
-  `;
-}
-
-function installGlEmojiElement() {
+export default function installGlEmojiElement() {
   const GlEmojiElementProto = Object.create(HTMLElement.prototype);
   GlEmojiElementProto.createdCallback = function createdCallback() {
     const emojiUnicode = this.textContent.trim();
@@ -90,7 +25,7 @@ function installGlEmojiElement() {
     if (
       emojiUnicode &&
       isEmojiUnicode &&
-      !isEmojiUnicodeSupported(generatedUnicodeSupportMap, emojiUnicode, unicodeVersion)
+      !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
     ) {
       // CSS sprite fallback takes precedence over image fallback
       if (hasCssSpriteFalback) {
@@ -100,7 +35,7 @@ function installGlEmojiElement() {
       } else if (hasImageFallback) {
         this.innerHTML = emojiImageTag(name, fallbackSrc);
       } else {
-        const src = assembleFallbackImageSrc(name);
+        const src = emojiFallbackImageSrc(name);
         this.innerHTML = emojiImageTag(name, src);
       }
     }
@@ -110,9 +45,3 @@ function installGlEmojiElement() {
     prototype: GlEmojiElementProto,
   });
 }
-
-export {
-  installGlEmojiElement,
-  glEmojiTag,
-  emojiImageTag,
-};

app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js

-import emojiMap from 'emojis/digests.json';
-import emojiAliases from 'emojis/aliases.json';
-
-function isEmojiNameValid(inputName) {
-  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
-    emojiAliases[inputName] : inputName;
-
-  return name && emojiMap[name];
-}
-
-export default isEmojiNameValid;

app/assets/javascripts/behaviors/index.js

 import './autosize';
 import './bind_in_out';
 import './details_behavior';
-import { installGlEmojiElement } from './gl_emoji';
+import installGlEmojiElement from './gl_emoji';
 import './quick_submit';
 import './requires_input';
 import './toggler_behavior';

app/assets/javascripts/behaviors/quick_submit.js

@@ -40,7 +40,7 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
 
   e.preventDefault();
   const $form = $(e.target).closest('form');
-  const $submitButton = $form.find('input[type=submit], button[type=submit]');
+  const $submitButton = $form.find('input[type=submit], button[type=submit]').first();
 
   if (!$submitButton.attr('disabled')) {
     $submitButton.trigger('click', [e]);

app/assets/javascripts/emoji/index.js

+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+
+export function normalizeEmojiName(name) {
+  return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
+}
+
+export function isEmojiNameValid(name) {
+  return validEmojiNames.indexOf(name) >= 0;
+}
+
+export function filterEmojiNames(filter) {
+  const match = filter.toLowerCase();
+  return validEmojiNames.filter(name => name.indexOf(match) >= 0);
+}
+
+export function filterEmojiNamesByAlias(filter) {
+  return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name)));
+}
+
+let emojiCategoryMap;
+export function getEmojiCategoryMap() {
+  if (!emojiCategoryMap) {
+    emojiCategoryMap = {
+      activity: [],
+      people: [],
+      nature: [],
+      food: [],
+      travel: [],
+      objects: [],
+      symbols: [],
+      flags: [],
+    };
+    Object.keys(emojiMap).forEach((name) => {
+      const emoji = emojiMap[name];
+      if (emojiCategoryMap[emoji.category]) {
+        emojiCategoryMap[emoji.category].push(name);
+      }
+    });
+  }
+  return emojiCategoryMap;
+}
+
+export function getEmojiInfo(query) {
+  let name = normalizeEmojiName(query);
+  let emojiInfo = emojiMap[name];
+
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
+  return { ...emojiInfo, name };
+}
+
+export function emojiFallbackImageSrc(inputName) {
+  const { name, digest } = getEmojiInfo(inputName);
+  return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`;
+}
+
+export function emojiImageTag(name, src) {
+  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
+}
+
+export function glEmojiTag(inputName, options) {
+  const opts = { sprite: false, forceFallback: false, ...options };
+  const { name, ...emojiInfo } = getEmojiInfo(inputName);
+
+  const fallbackImageSrc = emojiFallbackImageSrc(name);
+  const fallbackSpriteClass = `emoji-${name}`;
+
+  const classList = [];
+  if (opts.forceFallback && opts.sprite) {
+    classList.push('emoji-icon');
+    classList.push(fallbackSpriteClass);
+  }
+  const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
+  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
+  let contents = emojiInfo.moji;
+  if (opts.forceFallback && !opts.sprite) {
+    contents = emojiImageTag(name, fallbackImageSrc);
+  }
+
+  return `
+    <gl-emoji
+      ${classAttribute}
+      data-name="${name}"
+      data-fallback-src="${fallbackImageSrc}"
+      ${fallbackSpriteAttribute}
+      data-unicode-version="${emojiInfo.unicodeVersion}"
+      title="${emojiInfo.description}"
+    >
+      ${contents}
+    </gl-emoji>
+  `;
+}

app/assets/javascripts/emoji/support/index.js

+import isEmojiUnicodeSupported from './is_emoji_unicode_supported';
+import getUnicodeSupportMap from './unicode_support_map';
+
+// cache browser support map between calls
+let browserUnicodeSupportMap;
+
+export default function isEmojiUnicodeSupportedByBrowser(emojiUnicode, unicodeVersion) {
+  browserUnicodeSupportMap = browserUnicodeSupportMap || getUnicodeSupportMap();
+  return isEmojiUnicodeSupported(browserUnicodeSupportMap, emojiUnicode, unicodeVersion);
+}

app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js → app/assets/javascripts/emoji/support/is_emoji_unicode_supported.js

@@ -111,7 +111,7 @@ function isEmojiUnicodeSupported(unicodeSupportMap = {}, emojiUnicode, unicodeVe
 }
 
 export {
-  isEmojiUnicodeSupported,
+  isEmojiUnicodeSupported as default,
   isFlagEmoji,
   isKeycapEmoji,
   isSkinToneComboEmoji,

app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js → app/assets/javascripts/emoji/support/unicode_support_map.js

@@ -140,7 +140,7 @@ function generateUnicodeSupportMap(testMap) {
   return resultMap;
 }
 
-function getUnicodeSupportMap() {
+export default function getUnicodeSupportMap() {
   let unicodeSupportMap;
   let userAgentFromCache;
 
@@ -165,8 +165,3 @@ function getUnicodeSupportMap() {
 
   return unicodeSupportMap;
 }
-
-export {
-  getUnicodeSupportMap,
-  generateUnicodeSupportMap,
-};

app/assets/javascripts/filtered_search/dropdown_user.js

@@ -2,6 +2,7 @@
 
 import AjaxFilter from '~/droplab/plugins/ajax_filter';
 import './filtered_search_dropdown';
+import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class DropdownUser extends gl.FilteredSearchDropdown {
   constructor(droplab, dropdown, input, tokenKeys, filter) {
@@ -32,8 +33,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
   }
 
   hideCurrentUser() {
-    const currenUserItem = this.dropdown.querySelector('.js-current-user');
-    currenUserItem.classList.add('hidden');
+    addClassIfElementExists(this.dropdown.querySelector('.js-current-user'), 'hidden');
   }
 
   itemClicked(e) {

app/assets/javascripts/filtered_search/filtered_search_manager.js

@@ -3,6 +3,7 @@ import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
 import RecentSearchesService from './services/recent_searches_service';
 import eventHub from './event_hub';
+import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
 class FilteredSearchManager {
   constructor(page) {
@@ -231,11 +232,7 @@ class FilteredSearchManager {
   }
 
   addInputContainerFocus() {
-    const inputContainer = this.filteredSearchInput.closest('.filtered-search-box');
-
-    if (inputContainer) {
-      inputContainer.classList.add('focus');
-    }
+    addClassIfElementExists(this.filteredSearchInput.closest('.filtered-search-box'), 'focus');
   }
 
   removeInputContainerFocus(e) {

app/assets/javascripts/gfm_auto_complete.js

-import emojiMap from 'emojis/digests.json';
-import emojiAliases from 'emojis/aliases.json';
-import { glEmojiTag } from '~/behaviors/gl_emoji';
-import glRegexp from '~/lib/utils/regexp';
-import AjaxCache from '~/lib/utils/ajax_cache';
+import { validEmojiNames, glEmojiTag } from './emoji';
+import glRegexp from './lib/utils/regexp';
+import AjaxCache from './lib/utils/ajax_cache';
 
 function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
@@ -375,7 +373,7 @@ class GfmAutoComplete {
     if (this.cachedData[at]) {
       this.loadData($input, at, this.cachedData[at]);
     } else if (GfmAutoComplete.atTypeMap[at] === 'emojis') {
-      this.loadData($input, at, Object.keys(emojiMap).concat(Object.keys(emojiAliases)));
+      this.loadData($input, at, validEmojiNames);
     } else {
       AjaxCache.retrieve(this.dataSources[GfmAutoComplete.atTypeMap[at]], true)
         .then((data) => {

app/assets/javascripts/lib/utils/dom_utils.js

+/* eslint-disable import/prefer-default-export */
+
+export const addClassIfElementExists = (element, className) => {
+  if (element) {
+    element.classList.add(className);
+  }
+};

app/assets/javascripts/lib/utils/text_utility.js

@@ -94,8 +94,8 @@ gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
 
   startChar = !wrap && !currentLineEmpty && textArea.selectionStart > 0 ? '\n' : '';
 
-  if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) {
-    if (blockTag != null) {
+  if (selectedSplit.length > 1 && (!wrap || (blockTag != null && blockTag !== ''))) {
+    if (blockTag != null && blockTag !== '') {
       insertText = this.blockTagText(text, textArea, blockTag, selected);
     } else {
       insertText = selectedSplit.map(function(val) {

app/assets/javascripts/locale/bg/app.js

-var locales = locales || {}; locales['bg'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-05-04 19:24-0500","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","PO-Revision-Date":"2017-06-05 09:40-0400","Last-Translator":"Lyubomir Vasilev <lyubomirv@abv.bg>","Language-Team":"Bulgarian","Language":"bg","X-Generator":"Zanata 3.9.6","Plural-Forms":"nplurals=2; plural=(n != 1)","lang":"bg","domain":"app","plural_forms":"nplurals=2; plural=(n != 1)"},"ByAuthor|by":["от"],"Commit":["Подаване","Подавания"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Анализът на циклите дава общ поглед върху това колко време е нужно на една идея да се превърне в завършена функционалност в проекта."],"CycleAnalyticsStage|Code":["Програмиране"],"CycleAnalyticsStage|Issue":["Проблем"],"CycleAnalyticsStage|Plan":["Планиране"],"CycleAnalyticsStage|Production":["Издаване"],"CycleAnalyticsStage|Review":["Преглед и одобрение"],"CycleAnalyticsStage|Staging":["Подготовка за издаване"],"CycleAnalyticsStage|Test":["Тестване"],"Deploy":["Внедряване","Внедрявания"],"FirstPushedBy|First":["Първо"],"FirstPushedBy|pushed by":["изпращане на промени от"],"From issue creation until deploy to production":["От създаването на проблема до внедряването в крайната версия"],"From merge request merge until deploy to production":["От прилагането на заявката за сливане до внедряването в крайната версия"],"Introducing Cycle Analytics":["Представяме Ви анализът на циклите"],"Last %d day":["Последния %d ден","Последните %d дни"],"Limited to showing %d event at most":["Ограничено до показване на последното %d събитие","Ограничено до показване на последните %d събития"],"Median":["Медиана"],"New Issue":["Нов проблем","Нови проблема"],"Not available":["Не е налично"],"Not enough data":["Няма достатъчно данни"],"OpenedNDaysAgo|Opened":["Отворен"],"Pipeline Health":["Състояние"],"ProjectLifecycle|Stage":["Етап"],"Read more":["Прочетете повече"],"Related Commits":["Свързани подавания"],"Related Deployed Jobs":["Свързани задачи за внедряване"],"Related Issues":["Свързани проблеми"],"Related Jobs":["Свързани задачи"],"Related Merge Requests":["Свързани заявки за сливане"],"Related Merged Requests":["Свързани приложени заявки за сливане"],"Showing %d event":["Показване на %d събитие","Показване на %d събития"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["Етапът на програмиране показва времето от първото подаване до създаването на заявката за сливане. Данните ще бъдат добавени тук автоматично след като бъде създадена първата заявка за сливане."],"The collection of events added to the data gathered for that stage.":["Съвкупността от събития добавени към данните събрани за този етап."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["Етапът на проблемите показва колко е времето от създаването на проблем до определянето на целеви етап на проекта за него, или до добавянето му в списък на дъската за проблеми. Започнете да добавяте проблеми, за да видите данните за този етап."],"The phase of the development lifecycle.":["Етапът от цикъла на разработка"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["Етапът на планиране показва колко е времето от преходната стъпка до изпращането на първото подаване. Това време ще бъде добавено автоматично след като изпратите първото си подаване."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["Етапът на издаване показва общото време, което е нужно от създаването на проблем до внедряването на кода в крайната версия."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["Етапът на преглед и одобрение показва времето от създаването на заявката за сливане до прилагането ѝ. Данните ще бъдат добавени автоматично след като приложите първата си заявка за сливане."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["Етапът на подготовка за издаване показва времето между прилагането на заявката за сливане и внедряването на кода в средата на работещата крайна версия. Данните ще бъдат добавени автоматично след като направите първото си внедряване в крайната версия."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["Етапът на тестване показва времето, което е нужно на „Gitlab CI“ да изпълни всички задачи за свързаната заявка за сливане. Данните ще бъдат добавени автоматично след като приключи изпълнените на първата Ви такава задача."],"The time taken by each data entry gathered by that stage.":["Времето, което отнема всеки запис от данни за съответния етап."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["Стойността, която се намира в средата на последователността от наблюдавани данни. Например: медианата на 3, 5 и 9 е 5, а медианата на 3, 5, 7 и 8 е (5+7)/2 = 6."],"Time before an issue gets scheduled":["Време преди един проблем да бъде планиран за работа"],"Time before an issue starts implementation":["Време преди работата по проблем да започне"],"Time between merge request creation and merge/close":["Време между създаване на заявка за сливане и прилагането/отхвърлянето ѝ"],"Time until first merge request":["Време преди първата заявка за сливане"],"Time|hr":["час","часа"],"Time|min":["мин","мин"],"Time|s":["сек"],"Total Time":["Общо време"],"Total test time for all commits/merges":["Общо време за тестване на всички подавания/сливания"],"Want to see the data? Please ask an administrator for access.":["Искате ли да видите данните? Помолете администратор за достъп."],"We don't have enough data to show this stage.":["Няма достатъчно данни за този етап."],"You have reached your project limit":[""],"You need permission.":["Нуждаете се от разрешение."],"day":["ден","дни"]}}};
\ No newline at end of file

app/assets/javascripts/locale/de/app.js

-var locales = locales || {}; locales['de'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-09 13:44+0200","Language-Team":"German","Language":"de","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Plural-Forms":"nplurals=2; plural=n != 1;","Last-Translator":"","X-Generator":"Poedit 2.0.1","lang":"de","domain":"app","plural_forms":"nplurals=2; plural=n != 1;"},"Are you sure you want to delete this pipeline schedule?":[""],"ByAuthor|by":["Von"],"Cancel":[""],"Commit":["Commit","Commits"],"Cron Timezone":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["Cycle Analytics liefern einen Überblick darüber, wie viel Zeit in Ihrem Projekt von einer Idee bis zum Produktivdeployment vergeht."],"CycleAnalyticsStage|Code":["Code"],"CycleAnalyticsStage|Issue":["Issue"],"CycleAnalyticsStage|Plan":["Planung"],"CycleAnalyticsStage|Production":["Produktiv"],"CycleAnalyticsStage|Review":["Review"],"CycleAnalyticsStage|Staging":["Staging"],"CycleAnalyticsStage|Test":["Test"],"Delete":[""],"Deploy":["Deployment","Deployments"],"Description":[""],"Edit":[""],"Edit Pipeline Schedule %{id}":[""],"Failed to change the owner":[""],"Failed to remove the pipeline schedule":[""],"Filter":[""],"FirstPushedBy|First":["Erster"],"FirstPushedBy|pushed by":["gepusht von"],"From issue creation until deploy to production":["Vom Anlegen des Issues bis zum Produktivdeployment"],"From merge request merge until deploy to production":["Vom Merge Request bis zum Produktivdeployment"],"Interval Pattern":[""],"Introducing Cycle Analytics":["Was sind Cycle Analytics?"],"Last %d day":["Letzter %d Tag","Letzten %d Tage"],"Last Pipeline":[""],"Limited to showing %d event at most":["Eingeschränkt auf maximal %d Ereignis","Eingeschränkt auf maximal %d Ereignisse"],"Median":["Median"],"New Issue":["Neues Issue","Neue Issues"],"New Pipeline Schedule":[""],"No schedules":[""],"Not available":["Nicht verfügbar"],"Not enough data":["Nicht genügend Daten"],"OpenedNDaysAgo|Opened":["Erstellt"],"Owner":[""],"Pipeline Health":["Pipeline Kennzahlen"],"Pipeline Schedule":[""],"Pipeline Schedules":[""],"PipelineSchedules|Activated":[""],"PipelineSchedules|Active":[""],"PipelineSchedules|All":[""],"PipelineSchedules|Inactive":[""],"PipelineSchedules|Next Run":[""],"PipelineSchedules|None":[""],"PipelineSchedules|Provide a short description for this pipeline":[""],"PipelineSchedules|Take ownership":[""],"PipelineSchedules|Target":[""],"ProjectLifecycle|Stage":["Phase"],"Read more":["Mehr"],"Related Commits":["Zugehörige Commits"],"Related Deployed Jobs":["Zugehörige Deploymentjobs"],"Related Issues":["Zugehörige Issues"],"Related Jobs":["Zugehörige Jobs"],"Related Merge Requests":["Zugehörige Merge Requests"],"Related Merged Requests":["Zugehörige abgeschlossene Merge Requests"],"Save pipeline schedule":[""],"Schedule a new pipeline":[""],"Select a timezone":[""],"Select target branch":[""],"Showing %d event":["Zeige %d Ereignis","Zeige %d Ereignisse"],"Target Branch":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["Die Code-Phase stellt die Zeit vom ersten Commit bis zum Erstellen eines Merge Requests dar. Sobald Sie Ihren ersten Merge Request anlegen, werden dessen Daten automatisch ergänzt."],"The collection of events added to the data gathered for that stage.":["Ereignisse, die für diese Phase ausgewertet wurden."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["Die Issue-Phase stellt die Zeit vom Anlegen eines Issues bis zum Zuweisen eines Meilensteins oder Hinzufügen zum Issue Board dar. Erstellen Sie einen Issue, damit dessen Daten hier erscheinen."],"The phase of the development lifecycle.":["Die Phase im Entwicklungsprozess."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["Die Planungsphase stellt die Zeit von der vorherigen Phase bis zum Pushen des ersten Commits dar. Sobald Sie den ersten Commit pushen, werden dessen Daten hier erscheinen."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["Die Produktiv-Phase stellt die Gesamtzeit vom Anlegen eines Issues bis zum Deployment auf dem Produktivsystem dar. Sobald Sie den vollständigen Entwicklungszyklus von einer Idee bis zum Produktivdeployment durchlaufen haben, erscheinen die zugehörigen Daten hier."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["Die Review-Phase stellt die Zeit vom Anlegen eines Merge Requests bis zum Mergen dar. Sobald Sie Ihren ersten Merge Request abschließen, werden dessen Daten hier automatisch angezeigt."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["Die Staging-Phase stellt die Zeit zwischen Mergen eines Merge Requests und dem Produktivdeployment dar. Sobald Sie das erste Produktivdeployment durchgeführt haben, werden dessen Daten hier automatisch angezeigt."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["Die Test-Phase stellt die Zeit dar, die GitLab CI benötigt um die Pipelines von Merge Requests abzuarbeiten. Sobald die erste Pipeline abgeschlossen ist, werden deren Daten hier automatisch angezeigt."],"The time taken by each data entry gathered by that stage.":["Zeit die für das jeweilige Ereignis in der Phase ermittelt wurde."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["Der mittlere aller erfassten Werte. Zum Beispiel ist für 3, 5, 9 der Median 5. Bei 3, 5, 7, 8 ist der Median (5+7)/2 = 6."],"Time before an issue gets scheduled":["Zeit bis ein Issue geplant wird"],"Time before an issue starts implementation":["Zeit bis die Implementierung für ein Issue beginnt"],"Time between merge request creation and merge/close":["Zeit zwischen Anlegen und Mergen/Schließen eines Merge Requests"],"Time until first merge request":["Zeit bis zum ersten Merge Request"],"Time|hr":["h","h"],"Time|min":["min","min"],"Time|s":["s"],"Total Time":["Gesamtzeit"],"Total test time for all commits/merges":["Gesamte Testlaufzeit für alle Commits/Merges"],"Want to see the data? Please ask an administrator for access.":["Um diese Daten einsehen zu können, wenden Sie sich bitte an Ihren Administrator."],"We don't have enough data to show this stage.":["Es liegen nicht genügend Daten vor, um diese Phase anzuzeigen."],"You have reached your project limit":[""],"You need permission.":["Sie benötigen Zugriffsrechte."],"day":["Tag","Tage"]}}};
\ No newline at end of file

app/assets/javascripts/locale/fr/app.js

-var locales = locales || {}; locales['fr'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","PO-Revision-Date":"2017-06-14 04:21-0400","Last-Translator":"Dremor <egeorget@opmbx.org>","Language-Team":"French (https://www.transifex.com/gitlab-fr/teams/75145/fr/)","Language":"fr","Plural-Forms":"nplurals=2; plural=(n > 1);","X-Generator":"Zanata 3.9.6","lang":"fr","domain":"app","plural_forms":"nplurals=2; plural=(n > 1);"},"ByAuthor|by":["par"],"Commit":["Validation","Validations"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["L’analyseur de cycle permet d’avoir une vue d’ensemble du temps nécessaire pour aller d’une idée à sa mise en production pour votre projet."],"CycleAnalyticsStage|Code":["Code"],"CycleAnalyticsStage|Issue":["Incident"],"CycleAnalyticsStage|Plan":["Planification"],"CycleAnalyticsStage|Production":["Production"],"CycleAnalyticsStage|Review":["Examen"],"CycleAnalyticsStage|Staging":["Pré-production"],"CycleAnalyticsStage|Test":["Test"],"Deploy":["Déploiement","Déploiements"],"FirstPushedBy|First":["En premier"],"FirstPushedBy|pushed by":["poussé par"],"From issue creation until deploy to production":["Depuis la création de l'incident jusqu'au déploiement en production"],"From merge request merge until deploy to production":["Depuis la fusion de la demande de fusion jusqu'au déploiement en production"],"Introducing Cycle Analytics":["Introduction à l'analyseur de cycle"],"Last %d day":["Le dernier %d jour","Les derniers %d jours"],"Limited to showing %d event at most":["Limiter l'affichage au plus à %d évènement","Limiter l'affichage au plus à %d évènements"],"Median":["Médian"],"New Issue":["Nouvel incident","Nouveaux incidents"],"Not available":["Indisponible"],"Not enough data":["Données insuffisantes"],"OpenedNDaysAgo|Opened":["Ouvert"],"Pipeline Health":["Santé du Pipeline"],"ProjectLifecycle|Stage":["Étape"],"Read more":["Lire plus"],"Related Commits":["Validations liés"],"Related Deployed Jobs":["Tâches de déploiement liés"],"Related Issues":["Incidents liés"],"Related Jobs":["Tâches liées"],"Related Merge Requests":["Demandes de fusion liées"],"Related Merged Requests":["Demandes fusionnées liées"],"Showing %d event":["Affichage de %d évènement","Affichage de %d évènements"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["L’étape de développement montre le temps entre la première validation et la création de la demande de fusion. Les données seront automatiquement ajoutées ici une fois que vous aurez créé votre première demande de fusion."],"The collection of events added to the data gathered for that stage.":["L’ensemble d’évènements ajoutés aux données récupérées pour cette étape."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["L'étape des incidents montre le temps nécessaire entre la création d'un incident et son assignation à un jalon, ou son ajout à une liste d'un tableau d'incident. Débutez à créer des incidents pour voir des données pour cette étape."],"The phase of the development lifecycle.":["Les étapes du cycle de développement."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["L’étape de planification montre le temps entre l’étape précédente et l’envoi de votre première validation. Ce temps sera automatiquement ajouté quand vous pousserez votre première validation."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["L’étape de mise en production montre le temps nécessaire entre la création d’un incident et le déploiement du code en production. Les données seront automatiquement ajoutées une fois que vous aurez complété le cycle complet, depuis l’idée jusqu’à la mise en production."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["L’étape d’évaluation montre le temps entre la création de la demande de fusion et la fusion effective de celle-ci. Ces données seront automatiquement ajoutées après que vous ayez fusionné votre première demande de fusion."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["L’étape de pré-production indique le temps entre la fusion de la RF et le déploiement du code dans l’environnent de production. Les données seront automatiquement ajoutées une fois que vous déploierez en production pour la première fois."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["L’étape de test montre le temps que le CI de GitLab met pour exécuter chaque pipeline liés à la demande de fusion. Les données seront automatiquement ajoutées après que votre premier pipeline s’achèvera."],"The time taken by each data entry gathered by that stage.":["Le temps pris par chaque entrée récoltée durant cette étape."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["La valeur située au point médian d’une série de valeur observée. C.à.d., entre 3, 5, 9, le médian est 5. Entre 3, 5, 7, 8, le médian est (5+7)/2 = 6."],"Time before an issue gets scheduled":["Temps avant qu’un incident ne soit planifié"],"Time before an issue starts implementation":["Temps avant que résolution ne débute"],"Time between merge request creation and merge/close":["Temps entre la création d'une demande de fusion et sa fusion/clôture"],"Time until first merge request":["Temps jusqu’à la première demande de fusion"],"Time|hr":["hr","hrs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Temps total"],"Total test time for all commits/merges":["Temps total de test pour toutes les validations/fusions"],"Want to see the data? Please ask an administrator for access.":["Vous voulez voir les données ? Merci de contacter un administrateur pour en obtenir l’accès."],"We don't have enough data to show this stage.":["Nous n'avons pas suffisamment de données pour afficher cette étape."],"You need permission.":["Vous avez besoin d’une autorisation."],"day":["jour","jours"]}}};
\ No newline at end of file

app/assets/javascripts/locale/pt_BR/app.js

-var locales = locales || {}; locales['pt_BR'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","POT-Creation-Date":"2017-05-04 19:24-0500","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","PO-Revision-Date":"2017-06-05 03:29-0400","Last-Translator":"Alexandre Alencar <alexandre.alencar@gmail.com>","Language-Team":"Portuguese (Brazil)","Language":"pt-BR","X-Generator":"Zanata 3.9.6","Plural-Forms":"nplurals=2; plural=(n != 1)","lang":"pt_BR","domain":"app","plural_forms":"nplurals=2; plural=(n != 1)"},"ByAuthor|by":["por"],"Commit":["Commit","Commits"],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["A Análise de Ciclo fornece uma visão geral de quanto tempo uma ideia demora para ir para produção em seu projeto."],"CycleAnalyticsStage|Code":["Código"],"CycleAnalyticsStage|Issue":["Tarefa"],"CycleAnalyticsStage|Plan":["Plano"],"CycleAnalyticsStage|Production":["Produção"],"CycleAnalyticsStage|Review":["Revisão"],"CycleAnalyticsStage|Staging":["Homologação"],"CycleAnalyticsStage|Test":["Teste"],"Deploy":["Implantação","Implantações"],"FirstPushedBy|First":["Primeiro"],"FirstPushedBy|pushed by":["publicado por"],"From issue creation until deploy to production":["Da criação de tarefas até a implantação para a produção"],"From merge request merge until deploy to production":["Da incorporação do merge request  até a implantação em produção"],"Introducing Cycle Analytics":["Apresentando a Análise de Ciclo"],"Last %d day":["Último %d dia","Últimos %d dias"],"Limited to showing %d event at most":["Limitado a mostrar %d evento no máximo","Limitado a mostrar %d eventos no máximo"],"Median":["Mediana"],"New Issue":["Nova Tarefa","Novas Tarefas"],"Not available":["Não disponível"],"Not enough data":["Dados insuficientes"],"OpenedNDaysAgo|Opened":["Aberto"],"Pipeline Health":["Saúde da Pipeline"],"ProjectLifecycle|Stage":["Etapa"],"Read more":["Ler mais"],"Related Commits":["Commits Relacionados"],"Related Deployed Jobs":["Jobs Relacionados Incorporados"],"Related Issues":["Tarefas Relacionadas"],"Related Jobs":["Jobs Relacionados"],"Related Merge Requests":["Merge Requests Relacionados"],"Related Merged Requests":["Merge Requests Relacionados"],"Showing %d event":["Mostrando %d evento","Mostrando %d eventos"],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["O estágio de codificação mostra o tempo desde o primeiro commit até a criação do merge request. \\nOs dados serão automaticamente adicionados aqui uma vez que você tenha criado seu primeiro merge request."],"The collection of events added to the data gathered for that stage.":["A coleção de eventos adicionados aos dados coletados para esse estágio."],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["O estágio em questão mostra o tempo que leva desde a criação de uma tarefa até a sua assinatura para um milestone, ou a sua adição para a lista no seu Painel de Tarefas. Comece a criar tarefas para ver dados para esta etapa."],"The phase of the development lifecycle.":["A fase do ciclo de vida do desenvolvimento."],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["A fase de planejamento mostra o tempo do passo anterior até empurrar o seu primeiro commit. Este tempo será adicionado automaticamente assim que você realizar seu primeiro commit."],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["O estágio de produção mostra o tempo total que leva entre criar uma tarefa e implantar o código na produção. Os dados serão adicionados automaticamente até que você complete todo o ciclo de produção."],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["A etapa de revisão mostra o tempo de criação de um merge request até que o merge seja feito. Os dados serão automaticamente adicionados depois que você fizer seu primeiro merge request."],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["O estágio de estágio mostra o tempo entre a fusão do MR e o código de implantação para o ambiente de produção. Os dados serão automaticamente adicionados depois de implantar na produção pela primeira vez."],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["A fase de teste mostra o tempo que o GitLab CI leva para executar cada pipeline para o merge request relacionado. Os dados serão automaticamente adicionados após a conclusão do primeiro pipeline."],"The time taken by each data entry gathered by that stage.":["O tempo necessário para cada entrada de dados reunida por essa etapa."],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["O valor situado no ponto médio de uma série de valores observados. Ex., entre 3, 5, 9, a mediana é 5. Entre 3, 5, 7, 8, a mediana é (5 + 7) / 2 = 6."],"Time before an issue gets scheduled":["Tempo até que uma tarefa seja planejada"],"Time before an issue starts implementation":["Tempo até que uma tarefa comece a ser implementada"],"Time between merge request creation and merge/close":["Tempo entre a criação do merge request e o merge/fechamento"],"Time until first merge request":["Tempo até o primeiro merge request"],"Time|hr":["h","hs"],"Time|min":["min","mins"],"Time|s":["s"],"Total Time":["Tempo Total"],"Total test time for all commits/merges":["Tempo de teste total para todos os commits/merges"],"Want to see the data? Please ask an administrator for access.":["Precisa visualizar os dados? Solicite acesso ao administrador."],"We don't have enough data to show this stage.":["Não temos dados suficientes para mostrar esta fase."],"You have reached your project limit":[""],"You need permission.":["Você precisa de permissão."],"day":["dia","dias"]}}};
\ No newline at end of file

app/assets/javascripts/locale/zh_HK/app.js

-var locales = locales || {}; locales['zh_HK'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (Hong Kong) (https://www.transifex.com/gitlab-zh/teams/75177/zh_HK/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_HK","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_HK","domain":"app","plural_forms":"nplurals=1; plural=0;"},"Are you sure you want to delete this pipeline schedule?":[""],"ByAuthor|by":["作者:"],"Cancel":[""],"Commit":["提交"],"Cron Timezone":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["週期分析概述了項目從想法到產品實現的各階段所需的時間。"],"CycleAnalyticsStage|Code":["編碼"],"CycleAnalyticsStage|Issue":["議題"],"CycleAnalyticsStage|Plan":["計劃"],"CycleAnalyticsStage|Production":["生產"],"CycleAnalyticsStage|Review":["評審"],"CycleAnalyticsStage|Staging":["預發布"],"CycleAnalyticsStage|Test":["測試"],"Delete":[""],"Deploy":["部署"],"Description":[""],"Edit":[""],"Edit Pipeline Schedule %{id}":[""],"Failed to change the owner":[""],"Failed to remove the pipeline schedule":[""],"Filter":[""],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["從創建議題到部署到生產環境"],"From merge request merge until deploy to production":["從合併請求的合併到部署至生產環境"],"Interval Pattern":[""],"Introducing Cycle Analytics":["週期分析簡介"],"Last %d day":["最後 %d 天"],"Last Pipeline":[""],"Limited to showing %d event at most":["最多顯示 %d 個事件"],"Median":["中位數"],"New Issue":["新議題"],"New Pipeline Schedule":[""],"No schedules":[""],"Not available":["不可用"],"Not enough data":["數據不足"],"OpenedNDaysAgo|Opened":["開始於"],"Owner":[""],"Pipeline Health":["流水線健康指標"],"Pipeline Schedule":[""],"Pipeline Schedules":[""],"PipelineSchedules|Activated":[""],"PipelineSchedules|Active":[""],"PipelineSchedules|All":[""],"PipelineSchedules|Inactive":[""],"PipelineSchedules|Next Run":[""],"PipelineSchedules|None":[""],"PipelineSchedules|Provide a short description for this pipeline":[""],"PipelineSchedules|Take ownership":[""],"PipelineSchedules|Target":[""],"ProjectLifecycle|Stage":["項目生命週期"],"Read more":["了解更多"],"Related Commits":["相關的提交"],"Related Deployed Jobs":["相關的部署作業"],"Related Issues":["相關的議題"],"Related Jobs":["相關的作業"],"Related Merge Requests":["相關的合併請求"],"Related Merged Requests":["相關已合併的合並請求"],"Save pipeline schedule":[""],"Schedule a new pipeline":[""],"Select a timezone":[""],"Select target branch":[""],"Showing %d event":["顯示 %d 個事件"],"Target Branch":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["編碼階段概述了從第一次提交到創建合併請求的時間。創建第壹個合並請求後，數據將自動添加到此處。"],"The collection of events added to the data gathered for that stage.":["與該階段相關的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["議題階段概述了從創建議題到將議題設置裏程碑或將議題添加到議題看板的時間。創建一個議題後，數據將自動添加到此處。"],"The phase of the development lifecycle.":["項目生命週期中的各個階段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["計劃階段概述了從議題添加到日程後到推送首次提交的時間。當首次推送提交後，數據將自動添加到此處。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["生產階段概述了從創建議題到將代碼部署到生產環境的時間。當完成完整的想法到部署生產，數據將自動添加到此處。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["評審階段概述了從創建合並請求到合併的時間。當創建第壹個合並請求後，數據將自動添加到此處。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["預發布階段概述了合並請求的合併到部署代碼到生產環境的總時間。當首次部署到生產環境後，數據將自動添加到此處。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["測試階段概述了GitLab CI為相關合併請求運行每個流水線所需的時間。當第壹個流水線運行完成後，數據將自動添加到此處。"],"The time taken by each data entry gathered by that stage.":["該階段每條數據所花的時間"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位數是一個數列中最中間的值。例如在 3、5、9 之間，中位數是 5。在 3、5、7、8 之間，中位數是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["議題被列入日程表的時間"],"Time before an issue starts implementation":["開始進行編碼前的時間"],"Time between merge request creation and merge/close":["從創建合併請求到被合並或關閉的時間"],"Time until first merge request":["創建第壹個合併請求之前的時間"],"Time|hr":["小時"],"Time|min":["分鐘"],"Time|s":["秒"],"Total Time":["總時間"],"Total test time for all commits/merges":["所有提交和合併的總測試時間"],"Want to see the data? Please ask an administrator for access.":["權限不足。如需查看相關數據，請向管理員申請權限。"],"We don't have enough data to show this stage.":["該階段的數據不足，無法顯示。"],"You have reached your project limit":[""],"You need permission.":["您需要相關的權限。"],"day":["天"]}}};
\ No newline at end of file

app/assets/javascripts/locale/zh_TW/app.js

-var locales = locales || {}; locales['zh_TW'] = {"domain":"app","locale_data":{"app":{"":{"Project-Id-Version":"gitlab 1.0.0","Report-Msgid-Bugs-To":"","PO-Revision-Date":"2017-05-04 19:24-0500","Last-Translator":"HuangTao <htve@outlook.com>, 2017","Language-Team":"Chinese (Taiwan) (https://www.transifex.com/gitlab-zh/teams/75177/zh_TW/)","MIME-Version":"1.0","Content-Type":"text/plain; charset=UTF-8","Content-Transfer-Encoding":"8bit","Language":"zh_TW","Plural-Forms":"nplurals=1; plural=0;","lang":"zh_TW","domain":"app","plural_forms":"nplurals=1; plural=0;"},"Are you sure you want to delete this pipeline schedule?":[""],"ByAuthor|by":["作者:"],"Cancel":[""],"Commit":["送交"],"Cron Timezone":[""],"Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.":["週期分析概述了你的專案從想法到產品實現，各階段所需的時間。"],"CycleAnalyticsStage|Code":["程式開發"],"CycleAnalyticsStage|Issue":["議題"],"CycleAnalyticsStage|Plan":["計劃"],"CycleAnalyticsStage|Production":["上線"],"CycleAnalyticsStage|Review":["複閱"],"CycleAnalyticsStage|Staging":["預備"],"CycleAnalyticsStage|Test":["測試"],"Delete":[""],"Deploy":["部署"],"Description":[""],"Edit":[""],"Edit Pipeline Schedule %{id}":[""],"Failed to change the owner":[""],"Failed to remove the pipeline schedule":[""],"Filter":[""],"FirstPushedBy|First":["首次推送"],"FirstPushedBy|pushed by":["推送者:"],"From issue creation until deploy to production":["從議題建立至線上部署"],"From merge request merge until deploy to production":["從請求被合併後至線上部署"],"Interval Pattern":[""],"Introducing Cycle Analytics":["週期分析簡介"],"Last %d day":["最後 %d 天"],"Last Pipeline":[""],"Limited to showing %d event at most":["最多顯示 %d 個事件"],"Median":["中位數"],"New Issue":["新議題"],"New Pipeline Schedule":[""],"No schedules":[""],"Not available":["無法使用"],"Not enough data":["資料不足"],"OpenedNDaysAgo|Opened":["開始於"],"Owner":[""],"Pipeline Health":["流水線健康指標"],"Pipeline Schedule":[""],"Pipeline Schedules":[""],"PipelineSchedules|Activated":[""],"PipelineSchedules|Active":[""],"PipelineSchedules|All":[""],"PipelineSchedules|Inactive":[""],"PipelineSchedules|Next Run":[""],"PipelineSchedules|None":[""],"PipelineSchedules|Provide a short description for this pipeline":[""],"PipelineSchedules|Take ownership":[""],"PipelineSchedules|Target":[""],"ProjectLifecycle|Stage":["專案生命週期"],"Read more":["了解更多"],"Related Commits":["相關的送交"],"Related Deployed Jobs":["相關的部署作業"],"Related Issues":["相關的議題"],"Related Jobs":["相關的作業"],"Related Merge Requests":["相關的合併請求"],"Related Merged Requests":["相關已合併的請求"],"Save pipeline schedule":[""],"Schedule a new pipeline":[""],"Select a timezone":[""],"Select target branch":[""],"Showing %d event":["顯示 %d 個事件"],"Target Branch":[""],"The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.":["程式開發階段顯示從第一次送交到建立合併請求的時間。建立第一個合併請求後，資料將自動填入。"],"The collection of events added to the data gathered for that stage.":["與該階段相關的事件。"],"The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.":["議題階段顯示從議題建立到設置里程碑、或將該議題加至議題看板的時間。建立第一個議題後，資料將自動填入。"],"The phase of the development lifecycle.":["專案開發生命週期的各個階段。"],"The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.":["計劃階段所顯示的是議題被排程後至第一個送交被推送的時間。一旦完成（或執行）首次的推送，資料將自動填入。"],"The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.":["上線階段顯示從建立一個議題到部署程式至線上的總時間。當完成從想法到產品實現的循環後，資料將自動填入。"],"The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.":["複閱階段顯示從合併請求建立後至被合併的時間。當建立第一個合併請求後，資料將自動填入。"],"The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.":["預備階段顯示從合併請求被合併後至部署上線的時間。當第一次部署上線後，資料將自動填入。"],"The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.":["測試階段顯示相關合併請求的流水線所花的時間。當第一個流水線運作完畢後，資料將自動填入。"],"The time taken by each data entry gathered by that stage.":["每筆該階段相關資料所花的時間。"],"The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.":["中位數是一個數列中最中間的值。例如在 3、5、9 之間，中位數是 5。在 3、5、7、8 之間，中位數是 （5 + 7）/ 2 = 6。"],"Time before an issue gets scheduled":["議題等待排程的時間"],"Time before an issue starts implementation":["議題等待開始實作的時間"],"Time between merge request creation and merge/close":["合併請求被合併或是關閉的時間"],"Time until first merge request":["第一個合併請求被建立前的時間"],"Time|hr":["小時"],"Time|min":["分鐘"],"Time|s":["秒"],"Total Time":["總時間"],"Total test time for all commits/merges":["所有送交和合併的總測試時間"],"Want to see the data? Please ask an administrator for access.":["權限不足。如需查看相關資料，請向管理員申請權限。"],"We don't have enough data to show this stage.":["因該階段的資料不足而無法顯示相關資訊"],"You have reached your project limit":[""],"You need permission.":["您需要相關的權限。"],"day":["天"]}}};
\ No newline at end of file

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

+<script>
+  /* global Flash */
+  import _ from 'underscore';
+  import statusCodes from '../../lib/utils/http_status';
+  import MonitoringService from '../services/monitoring_service';
+  import monitoringRow from './monitoring_row.vue';
+  import monitoringState from './monitoring_state.vue';
+  import MonitoringStore from '../stores/monitoring_store';
+  import eventHub from '../event_hub';
+
+  export default {
+
+    data() {
+      const metricsData = document.querySelector('#prometheus-graphs').dataset;
+      const store = new MonitoringStore();
+
+      return {
+        store,
+        state: 'gettingStarted',
+        hasMetrics: gl.utils.convertPermissionToBoolean(metricsData.hasMetrics),
+        documentationPath: metricsData.documentationPath,
+        settingsPath: metricsData.settingsPath,
+        endpoint: metricsData.additionalMetrics,
+        deploymentEndpoint: metricsData.deploymentEndpoint,
+        showEmptyState: true,
+        backOffRequestCounter: 0,
+        updateAspectRatio: false,
+        updatedAspectRatios: 0,
+        resizeThrottled: {},
+      };
+    },
+
+    components: {
+      monitoringRow,
+      monitoringState,
+    },
+
+    methods: {
+      getGraphsData() {
+        const maxNumberOfRequests = 3;
+        this.state = 'loading';
+        gl.utils.backOff((next, stop) => {
+          this.service.get().then((resp) => {
+            if (resp.status === statusCodes.NO_CONTENT) {
+              this.backOffRequestCounter = this.backOffRequestCounter += 1;
+              if (this.backOffRequestCounter < maxNumberOfRequests) {
+                next();
+              } else {
+                stop(new Error('Failed to connect to the prometheus server'));
+              }
+            } else {
+              stop(resp);
+            }
+          }).catch(stop);
+        })
+        .then((resp) => {
+          if (resp.status === statusCodes.NO_CONTENT) {
+            this.state = 'unableToConnect';
+            return false;
+          }
+          return resp.json();
+        })
+        .then((metricGroupsData) => {
+          if (!metricGroupsData) return false;
+          this.store.storeMetrics(metricGroupsData.data);
+          return this.getDeploymentData();
+        })
+        .then((deploymentData) => {
+          if (deploymentData !== false) {
+            this.store.storeDeploymentData(deploymentData.deployments);
+            this.showEmptyState = false;
+          }
+          return {};
+        })
+        .catch(() => {
+          this.state = 'unableToConnect';
+        });
+      },
+
+      getDeploymentData() {
+        return this.service.getDeploymentData(this.deploymentEndpoint)
+          .then(resp => resp.json())
+          .catch(() => new Flash('Error getting deployment information.'));
+      },
+
+      resize() {
+        this.updateAspectRatio = true;
+      },
+
+      toggleAspectRatio() {
+        this.updatedAspectRatios = this.updatedAspectRatios += 1;
+        if (this.store.getMetricsCount() === this.updatedAspectRatios) {
+          this.updateAspectRatio = !this.updateAspectRatio;
+          this.updatedAspectRatios = 0;
+        }
+      },
+
+    },
+
+    created() {
+      this.service = new MonitoringService(this.endpoint);
+      eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
+    },
+
+    beforeDestroy() {
+      eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
+      window.removeEventListener('resize', this.resizeThrottled, false);
+    },
+
+    mounted() {
+      this.resizeThrottled = _.throttle(this.resize, 600);
+      if (!this.hasMetrics) {
+        this.state = 'gettingStarted';
+      } else {
+        this.getGraphsData();
+        window.addEventListener('resize', this.resizeThrottled, false);
+      }
+    },
+  };
+</script>
+<template>
+  <div 
+    class="prometheus-graphs" 
+    v-if="!showEmptyState">
+    <div 
+      class="row"
+      v-for="(groupData, index) in store.groups"
+      :key="index">
+      <div 
+        class="col-md-12">
+        <div 
+          class="panel panel-default prometheus-panel">
+          <div 
+            class="panel-heading">
+            <h4>{{groupData.group}}</h4>
+          </div>
+          <div 
+            class="panel-body">
+            <monitoring-row
+              v-for="(row, index) in groupData.metrics" 
+              :key="index"
+              :row-data="row"
+              :update-aspect-ratio="updateAspectRatio"
+              :deployment-data="store.deploymentData"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <monitoring-state 
+    :selected-state="state"
+    :documentation-path="documentationPath"
+    :settings-path="settingsPath"
+    v-else
+  />
+</template>

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

+<script>
+  /* global Breakpoints */
+  import d3 from 'd3';
+  import monitoringLegends from './monitoring_legends.vue';
+  import monitoringFlag from './monitoring_flag.vue';
+  import monitoringDeployment from './monitoring_deployment.vue';
+  import MonitoringMixin from '../mixins/monitoring_mixins';
+  import eventHub from '../event_hub';
+  import measurements from '../utils/measurements';
+  import { formatRelevantDigits } from '../../lib/utils/number_utils';
+
+  const bisectDate = d3.bisector(d => d.time).left;
+
+  export default {
+    props: {
+      columnData: {
+        type: Object,
+        required: true,
+      },
+      classType: {
+        type: String,
+        required: true,
+      },
+      updateAspectRatio: {
+        type: Boolean,
+        required: true,
+      },
+      deploymentData: {
+        type: Array,
+        required: true,
+      },
+    },
+
+    mixins: [MonitoringMixin],
+
+    data() {
+      return {
+        graphHeight: 500,
+        graphWidth: 600,
+        graphHeightOffset: 120,
+        xScale: {},
+        yScale: {},
+        margin: {},
+        data: [],
+        breakpointHandler: Breakpoints.get(),
+        unitOfDisplay: '',
+        areaColorRgb: '#8fbce8',
+        lineColorRgb: '#1f78d1',
+        yAxisLabel: '',
+        legendTitle: '',
+        reducedDeploymentData: [],
+        area: '',
+        line: '',
+        measurements: measurements.large,
+        currentData: {
+          time: new Date(),
+          value: 0,
+        },
+        currentYCoordinate: 0,
+        currentXCoordinate: 0,
+        currentFlagPosition: 0,
+        metricUsage: '',
+        showFlag: false,
+        showDeployInfo: true,
+      };
+    },
+
+    components: {
+      monitoringLegends,
+      monitoringFlag,
+      monitoringDeployment,
+    },
+
+    computed: {
+      outterViewBox() {
+        return `0 0 ${this.graphWidth} ${this.graphHeight}`;
+      },
+
+      innerViewBox() {
+        if ((this.graphWidth - 150) > 0) {
+          return `0 0 ${this.graphWidth - 150} ${this.graphHeight}`;
+        }
+        return '0 0 0 0';
+      },
+
+      axisTransform() {
+        return `translate(70, ${this.graphHeight - 100})`;
+      },
+
+      paddingBottomRootSvg() {
+        return (Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0;
+      },
+    },
+
+    methods: {
+      draw() {
+        const breakpointSize = this.breakpointHandler.getBreakpointSize();
+        const query = this.columnData.queries[0];
+        this.margin = measurements.large.margin;
+        if (breakpointSize === 'xs' || breakpointSize === 'sm') {
+          this.graphHeight = 300;
+          this.margin = measurements.small.margin;
+          this.measurements = measurements.small;
+        }
+        this.data = query.result[0].values;
+        this.unitOfDisplay = query.unit || 'N/A';
+        this.yAxisLabel = this.columnData.y_axis || 'Values';
+        this.legendTitle = query.legend || 'Average';
+        this.graphWidth = this.$refs.baseSvg.clientWidth -
+                     this.margin.left - this.margin.right;
+        this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
+        if (this.data !== undefined) {
+          this.renderAxesPaths();
+          this.formatDeployments();
+        }
+      },
+
+      handleMouseOverGraph(e) {
+        let point = this.$refs.graphData.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
+        point.x = point.x += 7;
+        const timeValueOverlay = this.xScale.invert(point.x);
+        const overlayIndex = bisectDate(this.data, timeValueOverlay, 1);
+        const d0 = this.data[overlayIndex - 1];
+        const d1 = this.data[overlayIndex];
+        if (d0 === undefined || d1 === undefined) return;
+        const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
+        this.currentData = evalTime ? d1 : d0;
+        this.currentXCoordinate = Math.floor(this.xScale(this.currentData.time));
+        const currentDeployXPos = this.mouseOverDeployInfo(point.x);
+        this.currentYCoordinate = this.yScale(this.currentData.value);
+
+        if (this.currentXCoordinate > (this.graphWidth - 200)) {
+          this.currentFlagPosition = this.currentXCoordinate - 103;
+        } else {
+          this.currentFlagPosition = this.currentXCoordinate;
+        }
+
+        if (currentDeployXPos) {
+          this.showFlag = false;
+        } else {
+          this.showFlag = true;
+        }
+
+        this.metricUsage = `${formatRelevantDigits(this.currentData.value)} ${this.unitOfDisplay}`;
+      },
+
+      renderAxesPaths() {
+        const axisXScale = d3.time.scale()
+          .range([0, this.graphWidth]);
+        this.yScale = d3.scale.linear()
+          .range([this.graphHeight - this.graphHeightOffset, 0]);
+        axisXScale.domain(d3.extent(this.data, d => d.time));
+        this.yScale.domain([0, d3.max(this.data.map(d => d.value))]);
+
+        const xAxis = d3.svg.axis()
+          .scale(axisXScale)
+          .ticks(measurements.ticks)
+          .orient('bottom');
+
+        const yAxis = d3.svg.axis()
+          .scale(this.yScale)
+          .ticks(measurements.ticks)
+          .orient('left');
+
+        d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
+
+        const width = this.graphWidth;
+        d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
+          .selectAll('.tick')
+          .each(function createTickLines() {
+            d3.select(this).select('line').attr('x2', width);
+          }); // This will select all of the ticks once they're rendered
+
+        this.xScale = d3.time.scale()
+          .range([0, this.graphWidth - 70]);
+
+        this.xScale.domain(d3.extent(this.data, d => d.time));
+
+        const areaFunction = d3.svg.area()
+          .x(d => this.xScale(d.time))
+          .y0(this.graphHeight - this.graphHeightOffset)
+          .y1(d => this.yScale(d.value))
+          .interpolate('linear');
+
+        const lineFunction = d3.svg.line()
+          .x(d => this.xScale(d.time))
+          .y(d => this.yScale(d.value));
+
+        this.line = lineFunction(this.data);
+
+        this.area = areaFunction(this.data);
+      },
+    },
+
+    watch: {
+      updateAspectRatio() {
+        if (this.updateAspectRatio) {
+          this.graphHeight = 500;
+          this.graphWidth = 600;
+          this.measurements = measurements.large;
+          this.draw();
+          eventHub.$emit('toggleAspectRatio');
+        }
+      },
+    },
+
+    mounted() {
+      this.draw();
+    },
+  };
+</script>
+<template>
+  <div 
+    :class="classType">
+    <h5 
+      class="text-center">
+        {{columnData.title}}
+    </h5>
+    <div 
+      class="prometheus-svg-container">
+      <svg 
+        :viewBox="outterViewBox"
+        :style="{ 'padding-bottom': paddingBottomRootSvg }"
+        ref="baseSvg">
+        <g
+          class="x-axis"
+          :transform="axisTransform">
+        </g>
+        <g
+          class="y-axis"
+          transform="translate(70, 20)">
+        </g>
+        <monitoring-legends 
+          :graph-width="graphWidth"
+          :graph-height="graphHeight"
+          :margin="margin"
+          :measurements="measurements"
+          :area-color-rgb="areaColorRgb"
+          :legend-title="legendTitle"
+          :y-axis-label="yAxisLabel"
+          :metric-usage="metricUsage"
+        />
+        <svg 
+          class="graph-data"
+          :viewBox="innerViewBox"
+          ref="graphData">
+            <path
+              class="metric-area"
+              :d="area"
+              :fill="areaColorRgb"
+              transform="translate(-5, 20)">
+            </path>
+            <path
+              class="metric-line"
+              :d="line"
+              :stroke="lineColorRgb"
+              fill="none"
+              stroke-width="2"
+              transform="translate(-5, 20)">
+            </path>
+            <rect 
+              class="prometheus-graph-overlay"
+              :width="(graphWidth - 70)"
+              :height="(graphHeight - 100)"
+              transform="translate(-5, 20)"
+              ref="graphOverlay"
+              @mousemove="handleMouseOverGraph($event)">
+            </rect>
+            <monitoring-deployment
+              :show-deploy-info="showDeployInfo"
+              :deployment-data="reducedDeploymentData"
+              :graph-height="graphHeight"
+              :graph-height-offset="graphHeightOffset"
+            />
+            <monitoring-flag 
+              v-if="showFlag"
+              :current-x-coordinate="currentXCoordinate"
+              :current-y-coordinate="currentYCoordinate"
+              :current-data="currentData"
+              :current-flag-position="currentFlagPosition"
+              :graph-height="graphHeight"
+              :graph-height-offset="graphHeightOffset"
+            />
+        </svg>
+      </svg>
+    </div>
+  </div>
+</template>

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

+<script>
+  import {
+      dateFormat,
+      timeFormat,
+    } from '../constants';
+
+  export default {
+    props: {
+      showDeployInfo: {
+        type: Boolean,
+        required: true,
+      },
+      deploymentData: {
+        type: Array,
+        required: true,
+      },
+      graphHeight: {
+        type: Number,
+        required: true,
+      },
+      graphHeightOffset: {
+        type: Number,
+        required: true,
+      },
+    },
+
+    computed: {
+      calculatedHeight() {
+        return this.graphHeight - this.graphHeightOffset;
+      },
+    },
+
+    methods: {
+      refText(d) {
+        return d.tag ? d.ref : d.sha.slice(0, 6);
+      },
+
+      formatTime(deploymentTime) {
+        return timeFormat(deploymentTime);
+      },
+
+      formatDate(deploymentTime) {
+        return dateFormat(deploymentTime);
+      },
+
+      nameDeploymentClass(deployment) {
+        return `deploy-info-${deployment.id}`;
+      },
+
+      transformDeploymentGroup(deployment) {
+        return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
+      },
+    },
+  };
+</script>
+<template>
+  <g
+    class="deploy-info"
+    v-if="showDeployInfo">
+    <g
+      v-for="(deployment, index) in deploymentData" 
+      :key="index"
+      :class="nameDeploymentClass(deployment)"
+      :transform="transformDeploymentGroup(deployment)">
+      <rect
+        x="0"
+        y="0"
+        :height="calculatedHeight"
+        width="3"
+        fill="url(#shadow-gradient)">
+      </rect>
+      <line
+        class="deployment-line"
+        x1="0"
+        y1="0"
+        x2="0"
+        :y2="calculatedHeight"
+        stroke="#000">
+      </line>
+      <svg
+        v-if="deployment.showDeploymentFlag"
+        class="js-deploy-info-box"
+        x="3"
+        y="0"
+        width="92"
+        height="60">
+        <rect
+          class="rect-text-metric deploy-info-rect rect-metric"
+          x="1"
+          y="1"
+          rx="2"
+          width="90"
+          height="58">
+        </rect>
+        <g 
+          transform="translate(5, 2)">
+          <text
+            class="deploy-info-text text-metric-bold">
+            {{refText(deployment)}}
+          </text>
+        </g>
+        <text
+          class="deploy-info-text"
+          y="18"
+          transform="translate(5, 2)">
+          {{formatDate(deployment.time)}}
+        </text>
+        <text
+          class="deploy-info-text text-metric-bold"
+          y="38"
+          transform="translate(5, 2)">
+          {{formatTime(deployment.time)}}
+        </text>
+      </svg>
+    </g>
+    <svg
+      height="0"
+      width="0">
+      <defs>
+        <linearGradient
+          id="shadow-gradient">
+          <stop
+            offset="0%"
+            stop-color="#000"
+            stop-opacity="0.4">
+          </stop>
+          <stop
+            offset="100%"
+            stop-color="#000"
+            stop-opacity="0">
+          </stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  </g>
+</template>

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

+<script>
+  import {
+      dateFormat,
+      timeFormat,
+    } from '../constants';
+
+  export default {
+    props: {
+      currentXCoordinate: {
+        type: Number,
+        required: true,
+      },
+      currentYCoordinate: {
+        type: Number,
+        required: true,
+      },
+      currentFlagPosition: {
+        type: Number,
+        required: true,
+      },
+      currentData: {
+        type: Object,
+        required: true,
+      },
+      graphHeight: {
+        type: Number,
+        required: true,
+      },
+      graphHeightOffset: {
+        type: Number,
+        required: true,
+      },
+    },
+
+    data() {
+      return {
+        circleColorRgb: '#8fbce8',
+      };
+    },
+
+    computed: {
+      formatTime() {
+        return timeFormat(this.currentData.time);
+      },
+
+      formatDate() {
+        return dateFormat(this.currentData.time);
+      },
+
+      calculatedHeight() {
+        return this.graphHeight - this.graphHeightOffset;
+      },
+    },
+  };
+</script>
+<template>
+  <g class="mouse-over-flag">
+    <line
+      class="selected-metric-line"
+      :x1="currentXCoordinate"
+      :y1="0"
+      :x2="currentXCoordinate"
+      :y2="calculatedHeight"
+      transform="translate(-5, 20)">
+    </line>
+    <circle
+      class="circle-metric"
+      :fill="circleColorRgb"
+      stroke="#000"
+      :cx="currentXCoordinate"
+      :cy="currentYCoordinate"
+      r="5"
+      transform="translate(-5, 20)">
+    </circle>
+    <svg 
+      class="rect-text-metric"
+      :x="currentFlagPosition"
+      y="0">
+      <rect
+        class="rect-metric"
+        x="4"
+        y="1"
+        rx="2"
+        width="90"
+        height="40"
+        transform="translate(-3, 20)">
+      </rect>
+      <text
+        class="text-metric text-metric-bold"
+        x="8"
+        y="35"
+        transform="translate(-5, 20)">
+        {{formatTime}}
+      </text>
+      <text
+        class="text-metric-date"
+        x="8"
+        y="15"
+        transform="translate(-5, 20)">
+        {{formatDate}}
+      </text>
+    </svg>
+  </g>
+</template>

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

+<script>
+  export default {
+    props: {
+      graphWidth: {
+        type: Number,
+        required: true,
+      },
+      graphHeight: {
+        type: Number,
+        required: true,
+      },
+      margin: {
+        type: Object,
+        required: true,
+      },
+      measurements: {
+        type: Object,
+        required: true,
+      },
+      areaColorRgb: {
+        type: String,
+        required: true,
+      },
+      legendTitle: {
+        type: String,
+        required: true,
+      },
+      yAxisLabel: {
+        type: String,
+        required: true,
+      },
+      metricUsage: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        yLabelWidth: 0,
+        yLabelHeight: 0,
+      };
+    },
+    computed: {
+      textTransform() {
+        const yCoordinate = (((this.graphHeight - this.margin.top)
+                          + this.measurements.axisLabelLineOffset) / 2) || 0;
+
+        return `translate(15, ${yCoordinate}) rotate(-90)`;
+      },
+
+      rectTransform() {
+        const yCoordinate = ((this.graphHeight - this.margin.top) / 2)
+                            + (this.yLabelWidth / 2) + 10 || 0;
+
+        return `translate(0, ${yCoordinate}) rotate(-90)`;
+      },
+
+      xPosition() {
+        return (((this.graphWidth + this.measurements.axisLabelLineOffset) / 2)
+               - this.margin.right) || 0;
+      },
+
+      yPosition() {
+        return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const bbox = this.$refs.ylabel.getBBox();
+        this.yLabelWidth = bbox.width + 10; // Added some padding
+        this.yLabelHeight = bbox.height + 5;
+      });
+    },
+  };
+</script>
+<template>
+  <g 
+    class="axis-label-container">
+    <line
+      class="label-x-axis-line"
+      stroke="#000000"
+      stroke-width="1"
+      x1="10"
+      :y1="yPosition"
+      :x2="graphWidth + 20"
+      :y2="yPosition">
+    </line>
+    <line
+      class="label-y-axis-line"
+      stroke="#000000"
+      stroke-width="1"
+      x1="10"
+      y1="0"
+      :x2="10"
+      :y2="yPosition">
+    </line>
+    <rect
+      class="rect-axis-text"
+      :transform="rectTransform"
+      :width="yLabelWidth"
+      :height="yLabelHeight">
+    </rect>
+    <text 
+      class="label-axis-text y-label-text"
+      text-anchor="middle"
+      :transform="textTransform"
+      ref="ylabel">
+      {{yAxisLabel}}
+    </text>
+    <rect
+      class="rect-axis-text"
+      :x="xPosition + 50"
+      :y="graphHeight - 80"
+      width="50"
+      height="50">
+    </rect>
+    <text
+      class="label-axis-text"
+      :x="xPosition + 60"
+      :y="yPosition"
+      dy=".35em">
+      Time
+    </text>
+    <rect
+      :fill="areaColorRgb"
+      :width="measurements.legends.width"
+      :height="measurements.legends.height"
+      x="20"
+      :y="graphHeight - measurements.legendOffset">
+    </rect>
+    <text
+      class="text-metric-title"
+      x="50"
+      :y="graphHeight - 40">
+      {{legendTitle}}
+    </text>
+    <text
+      class="text-metric-usage"
+      x="50"
+      :y="graphHeight - 25">
+      {{metricUsage}}
+    </text>
+  </g>
+</template>

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

+<script>
+  import monitoringColumn from './monitoring_column.vue';
+
+  export default {
+    props: {
+      rowData: {
+        type: Array,
+        required: true,
+      },
+      updateAspectRatio: {
+        type: Boolean,
+        required: true,
+      },
+      deploymentData: {
+        type: Array,
+        required: true,
+      },
+    },
+    components: {
+      monitoringColumn,
+    },
+    computed: {
+      bootstrapClass() {
+        return this.rowData.length >= 2 ? 'col-md-6' : 'col-md-12';
+      },
+    },
+  };
+</script>
+<template>
+  <div 
+    class="prometheus-row row">
+    <monitoring-column
+      v-for="(column, index) in rowData" 
+      :column-data="column"
+      :class-type="bootstrapClass"
+      :key="index"
+      :update-aspect-ratio="updateAspectRatio"
+      :deployment-data="deploymentData"
+    />
+  </div>
+</template>

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

+<script>
+  import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg';
+  import loadingSvg from 'empty_states/monitoring/_loading.svg';
+  import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg';
+
+  export default {
+    props: {
+      documentationPath: {
+        type: String,
+        required: true,
+      },
+      settingsPath: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      selectedState: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        states: {
+          gettingStarted: {
+            svg: gettingStartedSvg,
+            title: 'Get started with performance monitoring',
+            description: 'Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.',
+            buttonText: 'Configure Prometheus',
+          },
+          loading: {
+            svg: loadingSvg,
+            title: 'Waiting for performance data',
+            description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.',
+            buttonText: 'View documentation',
+          },
+          unableToConnect: {
+            svg: unableToConnectSvg,
+            title: 'Unable to connect to Prometheus server',
+            description: 'Ensure connectivity is available from the GitLab server to the ',
+            buttonText: 'View documentation',
+          },
+        },
+      };
+    },
+    computed: {
+      currentState() {
+        return this.states[this.selectedState];
+      },
+
+      buttonPath() {
+        if (this.selectedState === 'gettingStarted') {
+          return this.settingsPath;
+        }
+        return this.documentationPath;
+      },
+
+      showButtonDescription() {
+        if (this.selectedState === 'unableToConnect') return true;
+        return false;
+      },
+    },
+  };
+</script>
+<template>
+  <div 
+    class="prometheus-state">
+    <div 
+      class="row">
+      <div 
+        class="col-md-4 col-md-offset-4 state-svg" 
+        v-html="currentState.svg">
+      </div>
+    </div>
+    <div 
+      class="row">
+      <div 
+        class="col-md-6 col-md-offset-3">
+        <h4 
+          class="text-center state-title">
+          {{currentState.title}}
+        </h4>
+      </div>
+    </div>
+    <div 
+      class="row">
+      <div 
+        class="col-md-6 col-md-offset-3">
+        <div 
+          class="description-text text-center state-description">
+            {{currentState.description}}
+            <a 
+              :href="settingsPath"
+              v-if="showButtonDescription">
+              Prometheus server
+            </a>
+        </div>
+      </div>
+    </div>
+    <div 
+      class="row state-button-section">
+      <div 
+        class="col-md-4 col-md-offset-4 text-center state-button">
+        <a 
+          class="btn btn-success" 
+          :href="buttonPath">
+            {{currentState.buttonText}}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/monitoring/deployments.js

-/* global Flash */
-import d3 from 'd3';
-import {
-  dateFormat,
-  timeFormat,
-} from './constants';
-
-export default class Deployments {
-  constructor(width, height) {
-    this.width = width;
-    this.height = height;
-
-    this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
-
-    this.createGradientDef();
-  }
-
-  init(chartData) {
-    this.chartData = chartData;
-
-    this.x = d3.time.scale().range([0, this.width]);
-    this.x.domain(d3.extent(this.chartData, d => d.time));
-
-    this.charts = d3.selectAll('.prometheus-graph');
-
-    this.getData();
-  }
-
-  getData() {
-    $.ajax({
-      url: this.endpoint,
-      dataType: 'JSON',
-    })
-    .fail(() => new Flash('Error getting deployment information.'))
-    .done((data) => {
-      this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
-        const time = new Date(deployment.created_at);
-        const xPos = Math.floor(this.x(time));
-
-        time.setSeconds(this.chartData[0].time.getSeconds());
-
-        if (xPos >= 0) {
-          deploymentDataArray.push({
-            id: deployment.id,
-            time,
-            sha: deployment.sha,
-            tag: deployment.tag,
-            ref: deployment.ref.name,
-            xPos,
-          });
-        }
-
-        return deploymentDataArray;
-      }, []);
-
-      this.plotData();
-    });
-  }
-
-  plotData() {
-    this.charts.each((d, i) => {
-      const svg = d3.select(this.charts[0][i]);
-      const chart = svg.select('.graph-container');
-      const key = svg.node().getAttribute('graph-type');
-
-      this.createLine(chart, key);
-      this.createDeployInfoBox(chart, key);
-    });
-  }
-
-  createGradientDef() {
-    const defs = d3.select('body')
-      .append('svg')
-      .attr({
-        height: 0,
-        width: 0,
-      })
-      .append('defs');
-
-    defs.append('linearGradient')
-      .attr({
-        id: 'shadow-gradient',
-      })
-      .append('stop')
-      .attr({
-        offset: '0%',
-        'stop-color': '#000',
-        'stop-opacity': 0.4,
-      })
-      .select(this.selectParentNode)
-      .append('stop')
-      .attr({
-        offset: '100%',
-        'stop-color': '#000',
-        'stop-opacity': 0,
-      });
-  }
-
-  createLine(chart, key) {
-    chart.append('g')
-      .attr({
-        class: 'deploy-info',
-      })
-      .selectAll('.deploy-info')
-      .data(this.data)
-      .enter()
-      .append('g')
-      .attr({
-        class: d => `deploy-info-${d.id}-${key}`,
-        transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
-      })
-      .append('rect')
-      .attr({
-        x: 1,
-        y: 0,
-        height: this.height + 1,
-        width: 3,
-        fill: 'url(#shadow-gradient)',
-      })
-      .select(this.selectParentNode)
-      .append('line')
-      .attr({
-        class: 'deployment-line',
-        x1: 0,
-        x2: 0,
-        y1: 0,
-        y2: this.height + 1,
-      });
-  }
-
-  createDeployInfoBox(chart, key) {
-    chart.selectAll('.deploy-info')
-      .selectAll('.js-deploy-info-box')
-      .data(this.data)
-      .enter()
-      .select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
-      .append('svg')
-      .attr({
-        class: 'js-deploy-info-box hidden',
-        x: 3,
-        y: 0,
-        width: 92,
-        height: 60,
-      })
-      .append('rect')
-      .attr({
-        class: 'rect-text-metric deploy-info-rect rect-metric',
-        x: 1,
-        y: 1,
-        rx: 2,
-        width: 90,
-        height: 58,
-      })
-      .select(this.selectParentNode)
-      .append('g')
-      .attr({
-        transform: 'translate(5, 2)',
-      })
-      .append('text')
-      .attr({
-        class: 'deploy-info-text text-metric-bold',
-      })
-      .text(Deployments.refText)
-      .select(this.selectParentNode)
-      .append('text')
-      .attr({
-        class: 'deploy-info-text',
-        y: 18,
-      })
-      .text(d => dateFormat(d.time))
-      .select(this.selectParentNode)
-      .append('text')
-      .attr({
-        class: 'deploy-info-text text-metric-bold',
-        y: 38,
-      })
-      .text(d => timeFormat(d.time));
-  }
-
-  static toggleDeployTextbox(deploy, key, showInfoBox) {
-    d3.selectAll(`.deploy-info-${deploy.id}-${key} .js-deploy-info-box`)
-      .classed('hidden', !showInfoBox);
-  }
-
-  mouseOverDeployInfo(mouseXPos, key) {
-    if (!this.data) return false;
-
-    let dataFound = false;
-
-    this.data.forEach((d) => {
-      if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
-        dataFound = d.xPos + 1;
-
-        Deployments.toggleDeployTextbox(d, key, true);
-      } else {
-        Deployments.toggleDeployTextbox(d, key, false);
-      }
-    });
-
-    return dataFound;
-  }
-
-  /* `this` is bound to the D3 node */
-  selectParentNode() {
-    return this.parentNode;
-  }
-
-  static refText(d) {
-    return d.tag ? d.ref : d.sha.slice(0, 6);
-  }
-}

app/assets/javascripts/monitoring/event_hub.js

+import Vue from 'vue';
+
+export default new Vue();

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

+const mixins = {
+  methods: {
+    mouseOverDeployInfo(mouseXPos) {
+      if (!this.reducedDeploymentData) return false;
+
+      let dataFound = false;
+      this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
+        const deployment = d;
+        if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
+          dataFound = d.xPos + 1;
+
+          deployment.showDeploymentFlag = true;
+        } else {
+          deployment.showDeploymentFlag = false;
+        }
+        return deployment;
+      });
+
+      return dataFound;
+    },
+    formatDeployments() {
+      this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
+        const time = new Date(deployment.created_at);
+        const xPos = Math.floor(this.xScale(time));
+
+        time.setSeconds(this.data[0].time.getSeconds());
+
+        if (xPos >= 0) {
+          deploymentDataArray.push({
+            id: deployment.id,
+            time,
+            sha: deployment.sha,
+            tag: deployment.tag,
+            ref: deployment.ref.name,
+            xPos,
+            showDeploymentFlag: false,
+          });
+        }
+
+        return deploymentDataArray;
+      }, []);
+    },
+  },
+};
+
+export default mixins;

app/assets/javascripts/monitoring/monitoring_bundle.js

-import PrometheusGraph from './prometheus_graph';
+import Vue from 'vue';
+import Monitoring from './components/monitoring.vue';
 
-document.addEventListener('DOMContentLoaded', function onLoad() {
-  document.removeEventListener('DOMContentLoaded', onLoad, false);
-  return new PrometheusGraph();
-}, false);
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: '#prometheus-graphs',
+  components: {
+    'monitoring-dashboard': Monitoring,
+  },
+  render: createElement => createElement('monitoring-dashboard'),
+}));

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

+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class MonitoringService {
+  constructor(endpoint) {
+    this.graphs = Vue.resource(endpoint);
+  }
+
+  get() {
+    return this.graphs.get();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getDeploymentData(endpoint) {
+    return Vue.http.get(endpoint);
+  }
+}

app/assets/javascripts/monitoring/stores/monitoring_store.js

+import _ from 'underscore';
+
+class MonitoringStore {
+  constructor() {
+    this.groups = [];
+    this.deploymentData = [];
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  createArrayRows(metrics = []) {
+    const currentMetrics = metrics;
+    const availableMetrics = [];
+    let metricsRow = [];
+    let index = 1;
+    Object.keys(currentMetrics).forEach((key) => {
+      const metricValues = currentMetrics[key].queries[0].result[0].values;
+      if (metricValues != null) {
+        const literalMetrics = metricValues.map(metric => ({
+          time: new Date(metric[0] * 1000),
+          value: metric[1],
+        }));
+        currentMetrics[key].queries[0].result[0].values = literalMetrics;
+        metricsRow.push(currentMetrics[key]);
+        if (index % 2 === 0) {
+          availableMetrics.push(metricsRow);
+          metricsRow = [];
+        }
+        index = index += 1;
+      }
+    });
+    if (metricsRow.length > 0) {
+      availableMetrics.push(metricsRow);
+    }
+    return availableMetrics;
+  }
+
+  storeMetrics(groups = []) {
+    this.groups = groups.map((group) => {
+      const currentGroup = group;
+      currentGroup.metrics = _.chain(group.metrics).sortBy('weight').sortBy('title').value();
+      currentGroup.metrics = this.createArrayRows(currentGroup.metrics);
+      return currentGroup;
+    });
+  }
+
+  storeDeploymentData(deploymentData = []) {
+    this.deploymentData = deploymentData;
+  }
+
+  getMetricsCount() {
+    let metricsCount = 0;
+    this.groups.forEach((group) => {
+      group.metrics.forEach((metric) => {
+        metricsCount = metricsCount += metric.length;
+      });
+    });
+    return metricsCount;
+  }
+}
+
+export default MonitoringStore;

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

+export default {
+  small: { // Covers both xs and sm screen sizes
+    margin: {
+      top: 40,
+      right: 40,
+      bottom: 50,
+      left: 40,
+    },
+    legends: {
+      width: 15,
+      height: 30,
+    },
+    backgroundLegend: {
+      width: 30,
+      height: 50,
+    },
+    axisLabelLineOffset: -20,
+    legendOffset: 52,
+  },
+  large: { // This covers both md and lg screen sizes
+    margin: {
+      top: 80,
+      right: 80,
+      bottom: 100,
+      left: 80,
+    },
+    legends: {
+      width: 20,
+      height: 35,
+    },
+    backgroundLegend: {
+      width: 30,
+      height: 150,
+    },
+    axisLabelLineOffset: 20,
+    legendOffset: 55,
+  },
+  ticks: 3,
+};

app/assets/javascripts/notes.js

@@ -1485,7 +1485,7 @@ export default class Notes {
     const cachedNoteBodyText = $noteBodyText.html();
 
     // Show updated comment content temporarily
-    $noteBodyText.html(_.escape(formContent));
+    $noteBodyText.html(formContent);
     $editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
     $editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
 

app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js

-import Vue from 'vue';
-import Translate from '../../vue_shared/translate';
-
-Vue.use(Translate);
-
-const inputNameAttribute = 'schedule[cron]';
-
-export default {
-  props: {
-    initialCronInterval: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      inputNameAttribute,
-      cronInterval: this.initialCronInterval,
-      cronIntervalPresets: {
-        everyDay: '0 4 * * *',
-        everyWeek: '0 4 * * 0',
-        everyMonth: '0 4 1 * *',
-      },
-      cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron',
-      customInputEnabled: false,
-    };
-  },
-  computed: {
-    intervalIsPreset() {
-      return _.contains(this.cronIntervalPresets, this.cronInterval);
-    },
-    // The text input is editable when there's a custom interval, or when it's
-    // a preset interval and the user clicks the 'custom' radio button
-    isEditable() {
-      return !!(this.customInputEnabled || !this.intervalIsPreset);
-    },
-  },
-  methods: {
-    toggleCustomInput(shouldEnable) {
-      this.customInputEnabled = shouldEnable;
-
-      if (shouldEnable) {
-        // We need to change the value so other radios don't remain selected
-        // because the model (cronInterval) hasn't changed. The server trims it.
-        this.cronInterval = `${this.cronInterval} `;
-      }
-    },
-  },
-  created() {
-    if (this.intervalIsPreset) {
-      this.enableCustomInput = false;
-    }
-  },
-  watch: {
-    cronInterval() {
-      // updates field validation state when model changes, as
-      // glFieldError only updates on input.
-      Vue.nextTick(() => {
-        gl.pipelineScheduleFieldErrors.updateFormValidityState();
-      });
-    },
-  },
-  template: `
-    <div class="interval-pattern-form-group">
-      <div class="cron-preset-radio-input">
-        <input
-          id="custom"
-          class="label-light"
-          type="radio"
-          :name="inputNameAttribute"
-          :value="cronInterval"
-          :checked="isEditable"
-          @click="toggleCustomInput(true)"
-        />
-
-        <label for="custom">
-          {{ s__('PipelineSheduleIntervalPattern|Custom') }}
-        </label>
-
-        <span class="cron-syntax-link-wrap">
-          (<a :href="cronSyntaxUrl" target="_blank">{{ __('Cron syntax') }}</a>)
-        </span>
-      </div>
-
-      <div class="cron-preset-radio-input">
-        <input
-          id="every-day"
-          class="label-light"
-          type="radio"
-          v-model="cronInterval"
-          :name="inputNameAttribute"
-          :value="cronIntervalPresets.everyDay"
-          @click="toggleCustomInput(false)"
-        />
-
-        <label class="label-light" for="every-day">
-          {{ __('Every day (at 4:00am)') }}
-        </label>
-      </div>
-
-      <div class="cron-preset-radio-input">
-        <input
-          id="every-week"
-          class="label-light"
-          type="radio"
-          v-model="cronInterval"
-          :name="inputNameAttribute"
-          :value="cronIntervalPresets.everyWeek"
-          @click="toggleCustomInput(false)"
-        />
-
-        <label class="label-light" for="every-week">
-          {{ __('Every week (Sundays at 4:00am)') }}
-        </label>
-      </div>
-
-      <div class="cron-preset-radio-input">
-        <input
-          id="every-month"
-          class="label-light"
-          type="radio"
-          v-model="cronInterval"
-          :name="inputNameAttribute"
-          :value="cronIntervalPresets.everyMonth"
-          @click="toggleCustomInput(false)"
-        />
-
-        <label class="label-light" for="every-month">
-          {{ __('Every month (on the 1st at 4:00am)') }}
-        </label>
-      </div>
-
-      <div class="cron-interval-input-wrapper">
-        <input
-          id="schedule_cron"
-          class="form-control inline cron-interval-input"
-          type="text"
-          :placeholder="__('Define a custom pattern with cron syntax')"
-          required="true"
-          v-model="cronInterval"
-          :name="inputNameAttribute"
-          :disabled="!isEditable"
-        />
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue

+<script>
+  export default {
+    props: {
+      initialCronInterval: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        inputNameAttribute: 'schedule[cron]',
+        cronInterval: this.initialCronInterval,
+        cronIntervalPresets: {
+          everyDay: '0 4 * * *',
+          everyWeek: '0 4 * * 0',
+          everyMonth: '0 4 1 * *',
+        },
+        cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron',
+        customInputEnabled: false,
+      };
+    },
+    computed: {
+      intervalIsPreset() {
+        return _.contains(this.cronIntervalPresets, this.cronInterval);
+      },
+      // The text input is editable when there's a custom interval, or when it's
+      // a preset interval and the user clicks the 'custom' radio button
+      isEditable() {
+        return !!(this.customInputEnabled || !this.intervalIsPreset);
+      },
+    },
+    methods: {
+      toggleCustomInput(shouldEnable) {
+        this.customInputEnabled = shouldEnable;
+
+        if (shouldEnable) {
+          // We need to change the value so other radios don't remain selected
+          // because the model (cronInterval) hasn't changed. The server trims it.
+          this.cronInterval = `${this.cronInterval} `;
+        }
+      },
+    },
+    created() {
+      if (this.intervalIsPreset) {
+        this.enableCustomInput = false;
+      }
+    },
+    watch: {
+      cronInterval() {
+        // updates field validation state when model changes, as
+        // glFieldError only updates on input.
+        this.$nextTick(() => {
+          gl.pipelineScheduleFieldErrors.updateFormValidityState();
+        });
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="interval-pattern-form-group">
+    <div class="cron-preset-radio-input">
+      <input
+        id="custom"
+        class="label-light"
+        type="radio"
+        :name="inputNameAttribute"
+        :value="cronInterval"
+        :checked="isEditable"
+        @click="toggleCustomInput(true)"
+      />
+
+      <label for="custom">
+        {{ s__('PipelineSheduleIntervalPattern|Custom') }}
+      </label>
+
+      <span class="cron-syntax-link-wrap">
+        (<a :href="cronSyntaxUrl" target="_blank">{{ __('Cron syntax') }}</a>)
+      </span>
+    </div>
+
+    <div class="cron-preset-radio-input">
+      <input
+        id="every-day"
+        class="label-light"
+        type="radio"
+        v-model="cronInterval"
+        :name="inputNameAttribute"
+        :value="cronIntervalPresets.everyDay"
+        @click="toggleCustomInput(false)"
+      />
+
+      <label class="label-light" for="every-day">
+        {{ __('Every day (at 4:00am)') }}
+      </label>
+    </div>
+
+    <div class="cron-preset-radio-input">
+      <input
+        id="every-week"
+        class="label-light"
+        type="radio"
+        v-model="cronInterval"
+        :name="inputNameAttribute"
+        :value="cronIntervalPresets.everyWeek"
+        @click="toggleCustomInput(false)"
+      />
+
+      <label class="label-light" for="every-week">
+        {{ __('Every week (Sundays at 4:00am)') }}
+      </label>
+    </div>
+
+    <div class="cron-preset-radio-input">
+      <input
+        id="every-month"
+        class="label-light"
+        type="radio"
+        v-model="cronInterval"
+        :name="inputNameAttribute"
+        :value="cronIntervalPresets.everyMonth"
+        @click="toggleCustomInput(false)"
+      />
+
+      <label class="label-light" for="every-month">
+        {{ __('Every month (on the 1st at 4:00am)') }}
+      </label>
+    </div>
+
+    <div class="cron-interval-input-wrapper">
+      <input
+        id="schedule_cron"
+        class="form-control inline cron-interval-input"
+        type="text"
+        :placeholder="__('Define a custom pattern with cron syntax')"
+        required="true"
+        v-model="cronInterval"
+        :name="inputNameAttribute"
+        :disabled="!isEditable"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js

 import Vue from 'vue';
-import IntervalPatternInput from './components/interval_pattern_input';
+import Translate from '../vue_shared/translate';
+import intervalPatternInput from './components/interval_pattern_input.vue';
 import TimezoneDropdown from './components/timezone_dropdown';
 import TargetBranchDropdown from './components/target_branch_dropdown';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const IntervalPatternInputComponent = Vue.extend(IntervalPatternInput);
+Vue.use(Translate);
+
+function initIntervalPatternInput() {
   const intervalPatternMount = document.getElementById('interval-pattern-input');
   const initialCronInterval = intervalPatternMount ? intervalPatternMount.dataset.initialInterval : '';
 
-  new IntervalPatternInputComponent({
-    propsData: {
-      initialCronInterval,
+  return new Vue({
+    el: intervalPatternMount,
+    components: {
+      intervalPatternInput,
     },
-  }).$mount(intervalPatternMount);
+    render(createElement) {
+      return createElement('interval-pattern-input', {
+        props: {
+          initialCronInterval,
+        },
+      });
+    },
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  /* Most of the form is written in haml, but for fields with more complex behaviors,
+   * you should mount individual Vue components here. If at some point components need
+   * to share state, it may make sense to refactor the whole form to Vue */
+
+  initIntervalPatternInput();
+
+  // Initialize non-Vue JS components in the form
 
   const formElement = document.getElementById('new-pipeline-schedule-form');
+
   gl.timezoneDropdown = new TimezoneDropdown();
   gl.targetBranchDropdown = new TargetBranchDropdown();
   gl.pipelineScheduleFieldErrors = new gl.GlFieldErrors(formElement);

app/assets/stylesheets/framework/variables.scss

@@ -74,6 +74,8 @@ $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
 
+$purple-600: #6e49cb;
+$purple-650: #5c35ae;
 $purple-700: #4a2192;
 $purple-800: #2c0a5c;
 $purple-900: #380d75;
@@ -103,6 +105,7 @@ $well-light-text-color: #5b6169;
  */
 $gl-font-size: 14px;
 $gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-light: rgba(0, 0, 0, .7);
 $gl-text-color-secondary: rgba(0, 0, 0, .55);
 $gl-text-color-disabled: rgba(0, 0, 0, .35);
 $gl-text-color-inverted: rgba(255, 255, 255, 1.0);

app/assets/stylesheets/new_sidebar.scss

+@import "framework/variables";
+@import 'framework/tw_bootstrap_variables';
+@import "bootstrap/variables";
+
+$new-sidebar-width: 220px;
+
+.page-with-new-sidebar {
+
+  @media (min-width: $screen-sm-min) {
+    padding-left: $new-sidebar-width;
+  }
+
+  .right-sidebar {
+    position: fixed;
+    height: 100%;
+  }
+}
+
+.nav-sidebar {
+  position: fixed;
+  z-index: 400;
+  width: $new-sidebar-width;
+  top: 50px;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  background-color: $gray-light;
+  border-right: 1px solid $border-color;
+
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    a {
+      display: block;
+      padding: 12px 14px;
+    }
+  }
+
+  a {
+    color: $gl-text-color;
+    text-decoration: none;
+  }
+}
+
+.sidebar-sub-level-items {
+  display: none;
+
+  > li {
+    a {
+      padding: 12px 24px;
+      color: $gl-text-color-light;
+
+      &:hover {
+        color: $gl-text-color;
+        background-color: $border-color;
+      }
+    }
+
+    &.active {
+      > a {
+        color: $purple-650;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.sidebar-top-level-items {
+  > li {
+    .badge {
+      float: right;
+      background-color: $border-color;
+      color: $gl-text-color;
+    }
+
+    &.active {
+      > a {
+        background-color: $purple-600;
+        color: $white-light;
+        font-weight: 600;
+      }
+
+      .badge {
+        background-color: $purple-700;
+        color: $white-light;
+      }
+
+      .sidebar-sub-level-items {
+        background-color: $gray-normal;
+        border-left: 6px solid $purple-600;
+        display: block;
+      }
+    }
+
+    &:not(.active) > a:hover {
+      background-color: $border-color;
+
+      .badge {
+        transition: background-color 100ms linear;
+        background-color: $gray-normal;
+      }
+    }
+  }
+}
+
+
+// Make issue boards full-height now that sub-nav is gone
+
+.boards-list {
+  height: calc(100vh - 50px);
+
+  @media (min-width: $screen-sm-min) {
+    height: 475px; // Needed for PhantomJS
+    // scss-lint:disable DuplicateProperty
+    height: calc(100vh - 120px);
+    // scss-lint:enable DuplicateProperty
+  }
+}

app/assets/stylesheets/pages/environments.scss

@@ -290,23 +290,6 @@
   }
 }
 
-.prometheus-graph {
-  text {
-    fill: $gl-text-color;
-    stroke-width: 0;
-  }
-
-  .label-axis-text,
-  .text-metric-usage {
-    fill: $black;
-    font-weight: 500;
-  }
-
-  .legend-axis-text {
-    fill: $black;
-  }
-}
-
 .x-axis path,
 .y-axis path,
 .label-x-axis-line,
@@ -355,6 +338,7 @@
 
 .text-metric {
   font-weight: 600;
+  font-size: 14px;
 }
 
 .selected-metric-line {
@@ -364,20 +348,15 @@
 
 .deployment-line {
   stroke: $black;
-  stroke-width: 2;
+  stroke-width: 1;
 }
 
 .deploy-info-text {
   dominant-baseline: text-before-edge;
 }
 
-.text-metric-bold {
-  font-weight: 600;
-}
-
 .prometheus-state {
   margin-top: 10px;
-  display: none;
 
   .state-button-section {
     margin-top: 10px;
@@ -392,3 +371,59 @@
     width: 38px;
   }
 }
+
+.prometheus-panel {
+  margin-top: 20px;
+}
+
+.prometheus-svg-container {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding: 0;
+  padding-bottom: 100%;
+
+  .text-metric-bold {
+    font-weight: 600;
+  }
+}
+
+.prometheus-svg-container > svg {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+
+  text {
+    fill: $gl-text-color;
+    stroke-width: 0;
+  }
+
+  .label-axis-text,
+  .text-metric-usage {
+    fill: $black;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .legend-axis-text {
+    fill: $black;
+  }
+
+  .tick > text {
+    font-size: 14px;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    .label-axis-text,
+    .text-metric-usage,
+    .legend-axis-text {
+      font-size: 8px;
+    }
+
+    .tick > text {
+      font-size: 8px;
+    }
+  }
+}

app/assets/stylesheets/pages/notes.scss

@@ -473,7 +473,7 @@ ul.notes {
 }
 
 .more-actions {
-  display: inline;
+  display: inline-block;
 
   .tooltip {
     white-space: nowrap;

app/assets/stylesheets/pages/projects.scss

@@ -385,6 +385,7 @@ a.deploy-project-label {
 }
 
 .breadcrumb.repo-breadcrumb {
+  flex: 1;
   padding: 0;
   background: transparent;
   border: none;

app/assets/stylesheets/pages/tree.scss

@@ -70,7 +70,8 @@
   }
 
   .file-finder {
-    width: 50%;
+    max-width: 500px;
+    width: 100%;
 
     .file-finder-input {
       width: 95%;

app/models/network/graph.rb

@@ -113,7 +113,7 @@ module Network
 
       opts[:ref] = @commit.id if @filter_ref
 
-      @repo.find_commits(opts)
+      Gitlab::Git::Commit.find_all(@repo.raw_repository, opts)
     end
 
     def commits_sort_by_ref

app/models/project.rb

@@ -705,7 +705,7 @@ class Project < ActiveRecord::Base
   end
 
   def last_activity_date
-    last_activity_at || updated_at
+    last_repository_updated_at || last_activity_at || updated_at
   end
 
   def project_id

app/models/repository.rb

@@ -612,22 +612,6 @@ class Repository
     end
   end
 
-  # Returns url for submodule
-  #
-  # Ex.
-  #   @repository.submodule_url_for('master', 'rack')
-  #   # => git@localhost:rack.git
-  #
-  def submodule_url_for(ref, path)
-    if submodules(ref).any?
-      submodule = submodules(ref)[path]
-
-      if submodule
-        submodule['url']
-      end
-    end
-  end
-
   def last_commit_for_path(sha, path)
     sha = last_commit_id_for_path(sha, path)
     commit(sha)

app/services/boards/issues/list_service.rb

@@ -3,7 +3,7 @@ module Boards
     class ListService < BaseService
       def execute
         issues = IssuesFinder.new(current_user, filter_params).execute
-        issues = without_board_labels(issues) unless movable_list?
+        issues = without_board_labels(issues) unless movable_list? || closed_list?
         issues = with_list_label(issues) if movable_list?
         issues.order_by_position_and_priority
       end
@@ -21,7 +21,15 @@ module Boards
       end
 
       def movable_list?
-        @movable_list ||= list.present? && list.movable?
+        return @movable_list if defined?(@movable_list)
+
+        @movable_list = list.present? && list.movable?
+      end
+
+      def closed_list?
+        return @closed_list if defined?(@closed_list)
+
+        @closed_list = list.present? && list.closed?
       end
 
       def filter_params

app/services/notification_recipient_service.rb

@@ -11,7 +11,7 @@ class NotificationRecipientService
   def build_recipients(target, current_user, action:, previous_assignee: nil, skip_current_user: true)
     custom_action = build_custom_key(action, target)
 
-    recipients = target.participants(current_user)
+    recipients = participants(target, current_user)
     recipients = add_project_watchers(recipients)
     recipients = add_custom_notifications(recipients, custom_action)
     recipients = reject_mention_users(recipients)
@@ -86,12 +86,7 @@ class NotificationRecipientService
     mentioned_users = note.mentioned_users.select { |user| user.can?(ability, subject) }
 
     # Add all users participating in the thread (author, assignee, comment authors)
-    recipients =
-      if target.respond_to?(:participants)
-        target.participants(note.author)
-      else
-        mentioned_users
-      end
+    recipients = participants(target, note.author) || mentioned_users
 
     unless note.for_personal_snippet?
       # Merge project watchers
@@ -123,6 +118,14 @@ class NotificationRecipientService
 
   protected
 
+  # Ensure that if we modify this array, we aren't modifying the memoised
+  # participants on the target.
+  def participants(target, user)
+    return unless target.respond_to?(:participants)
+
+    target.participants(user).dup
+  end
+
   # Get project/group users with CUSTOM notification level
   def add_custom_notifications(recipients, action)
     user_ids = []

app/views/doorkeeper/applications/edit.html.haml

 - page_title "Edit", @application.name, "Applications"
+- @content_class = "limit-container-width" unless fluid_layout
 %h3.page-title Edit application
 = render 'form', application: @application

app/views/doorkeeper/applications/index.html.haml

 - page_title "Applications"
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
@@ -10,7 +11,7 @@
         and applications that you've authorized to use your account.
       - else
         Manage applications that you've authorized to use your account.
-  .col-lg-9
+  .col-lg-8
     - if user_oauth_applications?
       %h5.prepend-top-0
         Add new application

app/views/doorkeeper/applications/show.html.haml

 - page_title @application.name, "Applications"
+- @content_class = "limit-container-width" unless fluid_layout
+
 %h3.page-title
   Application: #{@application.name}
 

app/views/layouts/_head.html.haml

@@ -32,6 +32,7 @@
 
   - if show_new_nav?
     = stylesheet_link_tag "new_nav", media: "all"
+    = stylesheet_link_tag "new_sidebar", media: "all"
 
   = Gon::Base.render_data
 

app/views/layouts/_page.html.haml

-.page-with-sidebar{ class: page_gutter_class }
-  - if defined?(nav) && nav
-    .layout-nav
-      .container-fluid
-        = render "layouts/nav/#{nav}"
-  - if content_for?(:sub_nav)
-    = yield :sub_nav
-  .content-wrapper{ class: layout_nav_class }
+.page-with-sidebar{ class: "#{('page-with-new-sidebar' if defined?(@new_sidebar) && @new_sidebar)} #{page_gutter_class}" }
+  - if show_new_nav?
+    - if defined?(nav) && nav
+      = render "layouts/nav/#{nav}"
+  - else
+    - if defined?(nav) && nav
+      .layout-nav
+        .container-fluid
+          = render "layouts/nav/#{nav}"
+    - if content_for?(:sub_nav)
+      = yield :sub_nav
+  .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
     .alert-wrapper
       = render "layouts/broadcast"
       = render "layouts/flash"

app/views/layouts/admin.html.haml

 - page_title    "Admin Area"
 - header_title  "Admin Area", admin_root_path
-- nav           "admin"
+- if show_new_nav?
+  - nav         "new_admin_sidebar"
+  - @new_sidebar = true
+- else
+  - nav         "admin"
 
 = render template: "layouts/application"

app/views/layouts/group.html.haml

 - page_title       @group.name
 - page_description @group.description  unless page_description
 - header_title     group_title(@group) unless header_title
-- nav              "group"
+- if show_new_nav?
+  - nav            "new_group_sidebar"
+  - @new_sidebar = true
+- else
+  - nav            "group"
 
 = render template: "layouts/application"

app/views/layouts/nav/_new_admin_sidebar.html.haml

+.nav-sidebar
+  %ul.sidebar-top-level-items
+    = nav_link(controller: %w(dashboard admin projects users groups builds runners cohorts), html_options: {class: 'home'}) do
+      = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
+        %span
+          Overview
+
+      %ul.sidebar-sub-level-items
+        = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
+          = link_to admin_root_path, title: 'Overview' do
+            %span
+              Overview
+        = nav_link(controller: [:admin, :projects]) do
+          = link_to admin_projects_path, title: 'Projects' do
+            %span
+              Projects
+        = nav_link(controller: :users) do
+          = link_to admin_users_path, title: 'Users' do
+            %span
+              Users
+        = nav_link(controller: :groups) do
+          = link_to admin_groups_path, title: 'Groups' do
+            %span
+              Groups
+        = nav_link path: 'builds#index' do
+          = link_to admin_jobs_path, title: 'Jobs' do
+            %span
+              Jobs
+        = nav_link path: ['runners#index', 'runners#show'] do
+          = link_to admin_runners_path, title: 'Runners' do
+            %span
+              Runners
+        = nav_link path: 'cohorts#index' do
+          = link_to admin_cohorts_path, title: 'Cohorts' do
+            %span
+              Cohorts
+
+    = nav_link(controller: %w(conversational_development_index system_info background_jobs logs health_check requests_profiles)) do
+      = link_to admin_conversational_development_index_path, title: 'Monitoring' do
+        %span
+          Monitoring
+
+      %ul.sidebar-sub-level-items
+        = nav_link(controller: :conversational_development_index) do
+          = link_to admin_conversational_development_index_path, title: 'ConvDev Index' do
+            %span
+              ConvDev Index
+        = nav_link(controller: :system_info) do
+          = link_to admin_system_info_path, title: 'System Info' do
+            %span
+              System Info
+        = nav_link(controller: :background_jobs) do
+          = link_to admin_background_jobs_path, title: 'Background Jobs' do
+            %span
+              Background Jobs
+        = nav_link(controller: :logs) do
+          = link_to admin_logs_path, title: 'Logs' do
+            %span
+              Logs
+        = nav_link(controller: :health_check) do
+          = link_to admin_health_check_path, title: 'Health Check' do
+            %span
+              Health Check
+        = nav_link(controller: :requests_profiles) do
+          = link_to admin_requests_profiles_path, title: 'Requests Profiles' do
+            %span
+              Requests Profiles
+
+    = nav_link(controller: :broadcast_messages) do
+      = link_to admin_broadcast_messages_path, title: 'Messages' do
+        %span
+          Messages
+    = nav_link(controller: [:hooks, :hook_logs]) do
+      = link_to admin_hooks_path, title: 'Hooks' do
+        %span
+          System Hooks
+
+    = nav_link(controller: :applications) do
+      = link_to admin_applications_path, title: 'Applications' do
+        %span
+          Applications
+
+    = nav_link(controller: :abuse_reports) do
+      = link_to admin_abuse_reports_path, title: "Abuse Reports" do
+        %span
+          Abuse Reports
+          %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
+
+    - if akismet_enabled?
+      = nav_link(controller: :spam_logs) do
+        = link_to admin_spam_logs_path, title: "Spam Logs" do
+          %span
+            Spam Logs
+
+    = nav_link(controller: :deploy_keys) do
+      = link_to admin_deploy_keys_path, title: 'Deploy Keys' do
+        %span
+          Deploy Keys
+
+    = nav_link(controller: :services) do
+      = link_to admin_application_settings_services_path, title: 'Service Templates' do
+        %span
+          Service Templates
+
+    = nav_link(controller: :labels) do
+      = link_to admin_labels_path, title: 'Labels' do
+        %span
+          Labels
+
+    = nav_link(controller: :appearances) do
+      = link_to admin_appearances_path, title: 'Appearances' do
+        %span
+          Appearance
+
+    %li.divider
+    = nav_link(controller: :application_settings) do
+      = link_to admin_application_settings_path, title: 'Settings' do
+        %span
+          Settings

app/views/layouts/nav/_new_group_sidebar.html.haml

+.nav-sidebar
+  %ul.sidebar-top-level-items
+    = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
+      = link_to group_path(@group), title: 'Home' do
+        %span
+          Group
+
+      %ul.sidebar-sub-level-items
+        = nav_link(path: ['groups#show', 'groups#subgroups'], html_options: { class: 'home' }) do
+          = link_to group_path(@group), title: 'Group Home' do
+            %span
+              Home
+
+        = nav_link(path: 'groups#activity') do
+          = link_to activity_group_path(@group), title: 'Activity' do
+            %span
+              Activity
+
+    = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
+      = link_to issues_group_path(@group), title: 'Issues' do
+        %span
+          Issues
+          - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          %span.badge.count= number_with_delimiter(issues.count)
+
+      %ul.sidebar-sub-level-items
+        = nav_link(path: 'groups#issues', html_options: { class: 'home' }) do
+          = link_to issues_group_path(@group), title: 'List' do
+            %span
+              List
+
+        = nav_link(path: 'labels#index') do
+          = link_to group_labels_path(@group), title: 'Labels' do
+            %span
+              Labels
+
+        = nav_link(path: 'milestones#index') do
+          = link_to group_milestones_path(@group), title: 'Milestones' do
+            %span
+              Milestones
+
+    = nav_link(path: 'groups#merge_requests') do
+      = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
+        %span
+          Merge Requests
+          - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
+          %span.badge.count= number_with_delimiter(merge_requests.count)
+    = nav_link(path: 'group_members#index') do
+      = link_to group_group_members_path(@group), title: 'Members' do
+        %span
+          Members
+    - if current_user && can?(current_user, :admin_group, @group)
+      = nav_link(path: %w[groups#projects groups#edit]) do
+        = link_to edit_group_path(@group), title: 'Settings' do
+          %span
+            Settings

app/views/layouts/nav/_new_profile_sidebar.html.haml

+.nav-sidebar
+  %ul.sidebar-top-level-items
+    = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
+      = link_to profile_path, title: 'Profile Settings' do
+        %span
+          Profile
+    = nav_link(controller: [:accounts, :two_factor_auths]) do
+      = link_to profile_account_path, title: 'Account' do
+        %span
+          Account
+    - if current_application_settings.user_oauth_applications?
+      = nav_link(controller: 'oauth/applications') do
+        = link_to applications_profile_path, title: 'Applications' do
+          %span
+            Applications
+    = nav_link(controller: :chat_names) do
+      = link_to profile_chat_names_path, title: 'Chat' do
+        %span
+          Chat
+    = nav_link(controller: :personal_access_tokens) do
+      = link_to profile_personal_access_tokens_path, title: 'Access Tokens' do
+        %span
+          Access Tokens
+    = nav_link(controller: :emails) do
+      = link_to profile_emails_path, title: 'Emails' do
+        %span
+          Emails
+    - unless current_user.ldap_user?
+      = nav_link(controller: :passwords) do
+        = link_to edit_profile_password_path, title: 'Password' do
+          %span
+            Password
+    = nav_link(controller: :notifications) do
+      = link_to profile_notifications_path, title: 'Notifications' do
+        %span
+          Notifications
+
+    = nav_link(controller: :keys) do
+      = link_to profile_keys_path, title: 'SSH Keys' do
+        %span
+          SSH Keys
+    = nav_link(controller: :preferences) do
+      = link_to profile_preferences_path, title: 'Preferences' do
+        %span
+          Preferences
+    = nav_link(path: 'profiles#audit_log') do
+      = link_to audit_log_profile_path, title: 'Authentication log' do
+        %span
+          Authentication log

app/views/layouts/profile.html.haml

 - page_title    "User Settings"
 - header_title  "User Settings", profile_path unless header_title
 - sidebar       "dashboard"
-- nav           "profile"
+- if show_new_nav?
+  - nav         "new_profile_sidebar"
+  - @new_sidebar = true
+- else
+  - nav         "profile"
 
 = render template: "layouts/application"

app/views/layouts/project.html.haml

 - page_title       @project.name_with_namespace
 - page_description @project.description    unless page_description
 - header_title     project_title(@project) unless header_title
-- nav              "project"
+- if show_new_nav?
+  - nav            "new_project_sidebar"
+  - @new_sidebar    = true
+- else
+  - nav            "project"
 
 - content_for :project_javascripts do
   - project = @target_project || @project

app/views/profiles/accounts/show.html.haml

 - page_title "Account"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 - if current_user.ldap_user?
@@ -6,13 +7,13 @@
     Some options are unavailable for LDAP accounts
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Private Tokens
     %p
       Keep these tokens secret, anyone with access to them can interact with
       GitLab as if they were you.
-  .col-lg-9.private-tokens-reset
+  .col-lg-8.private-tokens-reset
     = render partial: 'reset_token', locals: { label: 'Private token', button_label: 'Reset private token', help_text: 'Your private token is used to access the API and Atom feeds without username/password authentication.' }
 
     = render partial: 'reset_token', locals: { label: 'RSS token', button_label: 'Reset RSS token', help_text: 'Your RSS token is used to create urls for personalized RSS feeds.' }
@@ -22,12 +23,12 @@
 
 %hr
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Two-Factor Authentication
     %p
       Increase your account's security by enabling Two-Factor Authentication (2FA).
-  .col-lg-9
+  .col-lg-8
     %p
       Status: #{current_user.two_factor_enabled? ? 'Enabled' : 'Disabled'}
     - if current_user.two_factor_enabled?
@@ -43,12 +44,12 @@
 %hr
 - if button_based_providers.any?
   .row.prepend-top-default
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4.prepend-top-0
         Social sign-in
       %p
         Activate signin with one of the following services
-    .col-lg-9
+    .col-lg-8
       %label.label-light
         Connected Accounts
       %p Click on icon to activate signin with one of the following services
@@ -69,12 +70,12 @@
   %hr
 - if current_user.can_change_username?
   .row.prepend-top-default
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4.prepend-top-0.warning-title
         Change username
       %p
         Changing your username will change path to all personal projects!
-    .col-lg-9
+    .col-lg-8
       = form_for @user, url: update_username_profile_path, method: :put, html: {class: "update-username"} do |f|
         .form-group
           = f.label :username, "Path", class: "label-light"
@@ -93,10 +94,10 @@
 
 - if signup_enabled?
   .row.prepend-top-default
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4.prepend-top-0.danger-title
         Remove account
-    .col-lg-9
+    .col-lg-8
       - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
         %p
           Deleting an account has the following effects:

app/views/profiles/audit_log.html.haml

 - page_title "Authentication log"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h3.prepend-top-0
       = page_title
     %p
       This is a security log of important events involving your account.
-  .col-lg-9
+  .col-lg-8
     = render 'event_table', events: @events

app/views/profiles/chat_names/index.html.haml

 - page_title 'Chat'
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
       You can see your Chat accounts.
 
-  .col-lg-9
+  .col-lg-8
     %h5 Active chat names (#{@chat_names.size})
 
     - if @chat_names.present?

app/views/profiles/emails/index.html.haml

 - page_title "Emails"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
       Control emails linked to your account
-  .col-lg-9
+  .col-lg-8
     %h4.prepend-top-0
       Add email address
     = form_for 'email', url: profile_emails_path do |f|

app/views/profiles/keys/index.html.haml

 - page_title "SSH Keys"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
       SSH keys allow you to establish a secure connection between your computer and GitLab.
-  .col-lg-9
+  .col-lg-8
     %h5.prepend-top-0
       Add an SSH key
     %p.profile-settings-content

app/views/profiles/keys/show.html.haml

 - page_title @key.title, "SSH Keys"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 = render "key_details"

app/views/profiles/notifications/show.html.haml

 - page_title "Notifications"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 %div
@@ -10,14 +11,14 @@
 
   = hidden_field_tag :notification_type, 'global'
   .row
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4
         = page_title
       %p
         You can specify notification level per group or per project.
       %p
         By default, all projects and groups will use the global notifications setting.
-    .col-lg-9
+    .col-lg-8
       %h5
         Global notification settings
 

app/views/profiles/passwords/edit.html.haml

 - page_title "Password"
+- @content_class = "limit-container-width" unless fluid_layout
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
       After a successful password update, you will be redirected to the login page where you can log in with your new password.
-  .col-lg-9
+  .col-lg-8
     %h5.prepend-top-0
       Change your password
       - unless @user.password_automatically_set?

app/views/profiles/personal_access_tokens/index.html.haml

 - page_title "Personal Access Tokens"
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 .row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       = page_title
     %p
@@ -11,7 +12,7 @@
       You can also use personal access tokens to authenticate against Git over HTTP.
       They are the only accepted password when you have Two-Factor Authentication (2FA) enabled.
 
-  .col-lg-9
+  .col-lg-8
 
     - if flash[:personal_access_token]
       .created-personal-access-token-container

app/views/profiles/preferences/show.html.haml

 - page_title 'Preferences'
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 = form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Syntax highlighting theme
     %p
       This setting allows you to customize the appearance of the syntax.
       = succeed '.' do
         = link_to 'Learn more', help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank'
-  .col-lg-9.syntax-theme
+  .col-lg-8.syntax-theme
     - Gitlab::ColorSchemes.each do |scheme|
       = label_tag do
         .preview= image_tag "#{scheme.css_class}-scheme-preview.png"
@@ -36,14 +37,14 @@
         New
   .col-sm-12
     %hr
-  .col-lg-3.profile-settings-sidebar
+  .col-lg-4.profile-settings-sidebar
     %h4.prepend-top-0
       Behavior
     %p
       This setting allows you to customize the behavior of the system layout and default views.
       = succeed '.' do
         = link_to 'Learn more', help_page_path('user/profile/preferences', anchor: 'behavior'), target: '_blank'
-  .col-lg-9
+  .col-lg-8
     .form-group
       = f.label :layout, class: 'label-light' do
         Layout width

app/views/profiles/show.html.haml

+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 = bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user prepend-top-default' }, authenticity_token: true do |f|
   = form_errors(@user)
 
   .row
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4.prepend-top-0
         Public Avatar
       %p
@@ -16,7 +17,7 @@
           You can upload an avatar here
           - if gravatar_enabled?
             or change it at #{link_to Gitlab.config.gravatar.host, 'http://' + Gitlab.config.gravatar.host}
-    .col-lg-9
+    .col-lg-8
       .clearfix.avatar-image.append-bottom-default
         = link_to avatar_icon(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
@@ -34,14 +35,14 @@
         = link_to 'Remove avatar', profile_avatar_path, data: { confirm: 'Avatar will be removed. Are you sure?' }, method: :delete, class: 'btn btn-gray'
   %hr
   .row
-    .col-lg-3.profile-settings-sidebar
+    .col-lg-4.profile-settings-sidebar
       %h4.prepend-top-0
         Main settings
       %p
         This information will appear on your profile.
         - if current_user.ldap_user?
           Some options are unavailable for LDAP accounts
-    .col-lg-9
+    .col-lg-8
       .row
         = f.text_field :name,  required: true, wrapper: { class: 'col-md-9' },
           help: 'Enter your name, so people you know can recognize you.'

app/views/profiles/two_factor_auths/show.html.haml

 - page_title 'Two-Factor Authentication', 'Account'
 - header_title "Two-Factor Authentication", profile_two_factor_auth_path
+- @content_class = "limit-container-width" unless fluid_layout
 = render 'profiles/head'
 
 - if inject_u2f_api?
@@ -7,12 +8,12 @@
     = page_specific_javascript_bundle_tag('u2f')
 
 .row.prepend-top-default
-  .col-lg-3
+  .col-lg-4
     %h4.prepend-top-0
       Register Two-Factor Authentication App
     %p
       Use an app on your mobile device to enable two-factor authentication (2FA).
-  .col-lg-9
+  .col-lg-8
     - if current_user.two_factor_otp_enabled?
       = icon "check inverse", base: "circle", class: "text-success", text: "You've already enabled two-factor authentication using mobile authenticator applications. You can disable it from your account settings page."
     - else
@@ -20,9 +21,9 @@
         Download the Google Authenticator application from App Store or Google Play Store and scan this code.
         More information is available in the #{link_to('documentation', help_page_path('profile/two_factor_authentication'))}.
       .row.append-bottom-10
-        .col-md-3
+        .col-md-4
           = raw @qr_code
-        .col-md-9
+        .col-md-8
           .account-well
             %p.prepend-top-0.append-bottom-0
               Can't scan the code?
@@ -50,7 +51,7 @@
 
 .row.prepend-top-default
 
-  .col-lg-3
+  .col-lg-4
     %h4.prepend-top-0
       Register Universal Two-Factor (U2F) Device
     %p
@@ -59,7 +60,7 @@
       As U2F devices are only supported by a few browsers, we require that you set up a
       two-factor authentication app before a U2F device. That way you'll always be able to
       log in - even when you're using an unsupported browser.
-  .col-lg-9
+  .col-lg-8
     - if @u2f_registration.errors.present?
       = form_errors(@u2f_registration)
     = render "u2f/register"

app/views/projects/commits/_commit.html.haml

@@ -5,7 +5,7 @@
   - notes = commit.notes
   - note_count = notes.user.count
 
-- cache_key = [project.path_with_namespace, commit.id, current_application_settings, note_count]
+- cache_key = [project.path_with_namespace, commit.id, current_application_settings, note_count, @path.presence, current_controller?(:commits)]
 - cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do

app/views/projects/environments/metrics.html.haml

 - @no_container = true
 - page_title "Metrics for environment", @environment.name
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('monitoring')
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'common_d3'
+  = webpack_bundle_tag 'monitoring'
 = render "projects/pipelines/head"
 
-#js-metrics.prometheus-container{ class: container_class, data: { has_metrics: "#{@environment.has_metrics?}", deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
+.prometheus-container{ class: container_class }
   .top-area
     .row
       .col-sm-6
@@ -13,68 +14,8 @@
           Environment:
           = link_to @environment.name, environment_path(@environment)
 
-  .prometheus-state
-    .js-getting-started.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          = render "shared/empty_states/monitoring/getting_started.svg"
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Get started with performance monitoring
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.
-            = link_to help_page_path('administration/monitoring/prometheus/index.md') do
-              Learn more about performance monitoring
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          = link_to edit_namespace_project_service_path(@project.namespace, @project, 'prometheus'), class: 'btn btn-success' do
-            Configure Prometheus
-    .js-loading.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          = render "shared/empty_states/monitoring/loading.svg"
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Waiting for performance data
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          = link_to help_page_path('administration/monitoring/prometheus/index.md'), class: 'btn btn-success' do
-            View documentation
-    .js-unable-to-connect.hidden
-      .row
-        .col-md-4.col-md-offset-4.state-svg
-          = render "shared/empty_states/monitoring/unable_to_connect.svg"
-      .row
-        .col-md-6.col-md-offset-3
-          %h4.text-center.state-title
-            Unable to connect to Prometheus server
-      .row
-        .col-md-6.col-md-offset-3
-          .description-text.text-center.state-description
-            Ensure connectivity is available from the GitLab server to the
-            = link_to edit_namespace_project_service_path(@project.namespace, @project, 'prometheus') do
-              Prometheus server
-      .row.state-button-section
-        .col-md-4.col-md-offset-4.text-center.state-button
-          = link_to help_page_path('administration/monitoring/prometheus/index.md'), class:'btn btn-success' do
-            View documentation
+  #prometheus-graphs{ data: { "settings-path": edit_namespace_project_service_path(@project.namespace, @project, 'prometheus'),
+    "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
+    "additional-metrics": additional_metrics_namespace_project_environment_path(@project.namespace, @project, @environment, format: :json),
+    "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
 
-  .prometheus-graphs
-    .row
-      .col-sm-12
-        %h4
-          CPU utilization
-        %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
-    .row
-      .col-sm-12
-        %h4
-          Memory usage
-        %svg.prometheus-graph{ 'graph-type' => 'memory_values' }

app/views/shared/projects/_project.html.haml

@@ -7,7 +7,7 @@
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit
 - css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
 - cache_key = project_list_cache_key(project)
-- updated_tooltip = time_ago_with_tooltip(project.last_activity_at)
+- updated_tooltip = time_ago_with_tooltip(project.last_activity_date)
 
 %li.project-row{ class: css_class }
   = cache(cache_key) do

changelogs/unreleased/33442-supplement_traditional_chinese_in_hong_kong_translation_of_i18n.yml

+---
+title: Supplement Traditional Chinese in Hong Kong translation of Project Page & Repository Page
+merge_request: 11995
+author: Huang Tao

changelogs/unreleased/33561-supplement_bulgarian_translation_of_i18n.yml

+---
+title: Supplement Bulgarian translation of Project Page & Repository Page
+merge_request: 12083
+author: Lyubomir Vasilev

changelogs/unreleased/dm-commit-row-browse-button.yml

+---
+title: Fix inconsistent display of the "Browse files" button in the commit list
+merge_request:
+author:

changelogs/unreleased/dm-dependency-linker-newlines.yml

+---
+title: Fix diff of requirements.txt file by not matching newlines as part of package
+  names
+merge_request:
+author:

changelogs/unreleased/fix-head-pipeline-for-commit-status.yml

+---
+title: Fix head pipeline stored in merge request for external pipelines
+merge_request: 12478
+author:

changelogs/unreleased/issue-boards-closed-list-all.yml

+---
+title: Fixed issue boards closed list not showing all closed issues
+merge_request:
+author:

changelogs/unreleased/issue-form-multiple-line-markdown.yml

+---
+title: Fixed multi-line markdown tooltip buttons in issue edit form
+merge_request:
+author:

changelogs/unreleased/stop-notification-recipient-service-modifying-participants.yml

+---
+title: Ensure participants for issues, merge requests, etc. are calculated correctly
+  when sending notifications
+merge_request:
+author:

config/application.rb

@@ -116,6 +116,7 @@ module Gitlab
     config.assets.precompile << "vendor/assets/fonts/*"
     config.assets.precompile << "test.css"
     config.assets.precompile << "new_nav.css"
+    config.assets.precompile << "new_sidebar.css"
 
     # Version of your assets, change this if you want to expire all your assets
     config.assets.version = '1.0'

config/webpack.config.js

@@ -168,6 +168,7 @@ var config = {
         'issue_show',
         'job_details',
         'merge_conflicts',
+        'monitoring',
         'notebook_viewer',
         'pdf_viewer',
         'pipelines',

doc/README.md

@@ -3,7 +3,7 @@
 Welcome to [GitLab](https://about.gitlab.com/), a Git-based fully featured
 platform for software development!
 
-We offer four different products for you and your organization:
+We offer four different products for you and your company:
 
 - **GitLab Community Edition (CE)** is an [opensource product](https://gitlab.com/gitlab-org/gitlab-ce/),
 self-hosted, free to use. Every feature available in GitLab CE is also available on GitLab Enterprise Edition (Starter and Premium) and GitLab.com.
@@ -16,6 +16,10 @@ plus premium features available in each version: **Enterprise Edition Starter**
 (**EES**) and **Enterprise Edition Premium** (**EEP**). Everything available in
 **EES** is also available in **EEP**.
 
+**Note:** _We are unifying the documentation for CE and EE. To check if certain feature is
+available in CE or EE, look for a note right below the page title containing the GitLab
+version which introduced that feature._
+
 ----
 
 Shortcuts to GitLab's most visited docs:

doc/development/architecture.md

@@ -194,3 +194,7 @@ bundle exec rake gitlab:check RAILS_ENV=production
 ```
 
 Note: It is recommended to log into the `git` user using `sudo -i -u git` or `sudo su - git`. While the sudo commands provided by gitlabhq work in Ubuntu they do not always work in RHEL.
+
+## GitLab.com
+
+We've also detailed [our architecture of GitLab.com](https://about.gitlab.com/handbook/infrastructure/production-architecture/) but this is probably over the top unless you have millions of users.

doc/install/installation.md

@@ -294,9 +294,9 @@ sudo usermod -aG redis git
 ### Clone the Source
 
     # Clone GitLab repository
-    sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 9-2-stable gitlab
+    sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 9-3-stable gitlab
 
-**Note:** You can change `9-2-stable` to `master` if you want the *bleeding edge* version, but never install master on a production server!
+**Note:** You can change `9-3-stable` to `master` if you want the *bleeding edge* version, but never install master on a production server!
 
 ### Configure It
 

doc/update/9.2-to-9.3.md

@@ -117,7 +117,7 @@ cd /home/git/gitlab
 sudo -u git -H git checkout 9-3-stable-ee
 ```
 
-### 5. Update gitlab-shell
+### 7. Update gitlab-shell
 
 ```bash
 cd /home/git/gitlab-shell
@@ -127,7 +127,7 @@ sudo -u git -H git checkout v$(</home/git/gitlab/GITLAB_SHELL_VERSION)
 sudo -u git -H bin/compile
 ```
 
-### 6. Update gitlab-workhorse
+### 8. Update gitlab-workhorse
 
 Install and compile gitlab-workhorse. This requires
 [Go 1.5](https://golang.org/dl) which should already be on your system from
@@ -143,7 +143,7 @@ sudo -u git -H git checkout v$(</home/git/gitlab/GITLAB_WORKHORSE_VERSION)
 sudo -u git -H make
 ```
 
-### 7. Update Gitaly
+### 9. Update Gitaly
 
 If you have not yet set up Gitaly then follow [Gitaly section of the installation
 guide](../install/installation.md#install-gitaly).