.gitlab-ci.yml

@@ -63,7 +63,7 @@ stages:
 .only-master-and-ee-or-mysql: &only-master-and-ee-or-mysql
   only:
     - /mysql/
-    - /-stable$/
+    - /-stable/
     - master@gitlab-org/gitlab-ce
     - master@gitlab/gitlabhq
     - tags@gitlab-org/gitlab-ce
@@ -474,9 +474,10 @@ codeclimate:
   services:
     - docker:dind
   script:
+    - docker pull stedolan/jq
     - 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
+    - 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 > raw_codeclimate.json
+    - cat raw_codeclimate.json | docker run -i stedolan/jq -c 'map({check_name,fingerprint,location})' > codeclimate.json
   artifacts:
     paths: [codeclimate.json]
 

CHANGELOG.md

@@ -2,6 +2,15 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 9.3.3 (2017-06-30)
+
+- Fix head pipeline stored in merge request for external pipelines. !12478
+- Bring back branches badge to main project page. !12548
+- Fix diff of requirements.txt file by not matching newlines as part of package names.
+- Perform housekeeping only when an import of a fresh project is completed.
+- Fixed issue boards closed list not showing all closed issues.
+- Fixed multi-line markdown tooltip buttons in issue edit form.
+
 ## 9.3.2 (2017-06-27)
 
 - API: Fix optional arugments for POST :id/variables. !12474

app/assets/javascripts/build.js

@@ -85,9 +85,8 @@ window.Build = (function () {
         if (!this.hasBeenScrolled) {
           this.scrollToBottom();
         }
-      });
-
-    this.verifyTopPosition();
+      })
+      .then(() => this.verifyTopPosition());
   }
 
   Build.prototype.canScroll = function () {
@@ -176,7 +175,7 @@ window.Build = (function () {
     }
 
     if ($flashError.length) {
-      topPostion += $flashError.outerHeight();
+      topPostion += $flashError.outerHeight() + prependTopDefault;
     }
 
     this.$buildTrace.css({
@@ -196,6 +195,7 @@ window.Build = (function () {
     })
       .done((log) => {
         gl.utils.setCiStatusFavicon(`${this.pageUrl}/status.json`);
+
         if (log.state) {
           this.state = log.state;
         }
@@ -220,7 +220,11 @@ window.Build = (function () {
         }
 
         if (!log.complete) {
-          this.toggleScrollAnimation(true);
+          if (!this.hasBeenScrolled) {
+            this.toggleScrollAnimation(true);
+          } else {
+            this.toggleScrollAnimation(false);
+          }
 
           Build.timeout = setTimeout(() => {
             //eslint-disable-next-line
@@ -229,7 +233,8 @@ window.Build = (function () {
                 if (!this.hasBeenScrolled) {
                   this.scrollToBottom();
                 }
-              });
+              })
+              .then(() => this.verifyTopPosition());
           }, 4000);
         } else {
           this.$buildRefreshAnimation.remove();

app/assets/javascripts/diff.js

 /* eslint-disable class-methods-use-this */
 
 import './lib/utils/url_utility';
+import FilesCommentButton from './files_comment_button';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -8,8 +9,10 @@ let isBound = false;
 class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
+
     $diffFile.singleFileDiff();
-    $diffFile.filesCommentButton();
+
+    FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -139,9 +139,9 @@ const DiffNoteAvatars = Vue.extend({
       const notesCount = this.notesCount;
 
       $(this.$el).closest('.js-avatar-container')
-        .toggleClass('js-no-comment-btn', notesCount > 0)
+        .toggleClass('no-comment-btn', notesCount > 0)
         .nextUntil('.js-avatar-container')
-        .toggleClass('js-no-comment-btn', notesCount > 0);
+        .toggleClass('no-comment-btn', notesCount > 0);
     },
     toggleDiscussionsToggleState() {
       const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');

app/assets/javascripts/dispatcher.js

@@ -209,8 +209,8 @@ import initExperimentalFlags from './experimental_flags';
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
           break;
-        case 'projects:merge_requests:new':
-        case 'projects:merge_requests:new_diffs':
+        case 'projects:merge_requests:creations:new':
+        case 'projects:merge_requests:creations:diffs':
         case 'projects:merge_requests:edit':
           new gl.Diff();
           shortcut_handler = new ShortcutsNavigation();
@@ -247,10 +247,6 @@ import initExperimentalFlags from './experimental_flags';
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
           break;
-        case "projects:merge_requests:diffs":
-          new gl.Diff();
-          new ZenMode();
-          break;
         case 'dashboard:activity':
           new gl.Activities();
           break;
@@ -319,7 +315,7 @@ import initExperimentalFlags from './experimental_flags';
           new gl.Members();
           new UsersSelect();
           break;
-        case 'projects:members:show':
+        case 'projects:settings:members:show':
           new gl.MemberExpirationDate('.js-access-expiration-date-groups');
           new GroupsSelect();
           new gl.MemberExpirationDate();
@@ -386,7 +382,7 @@ import initExperimentalFlags from './experimental_flags';
         case 'search:show':
           new Search();
           break;
-        case 'projects:repository:show':
+        case 'projects:settings:repository:show':
           // Initialize Protected Branch Settings
           new gl.ProtectedBranchCreate();
           new gl.ProtectedBranchEditList();
@@ -396,7 +392,7 @@ import initExperimentalFlags from './experimental_flags';
           // Initialize expandable settings panels
           initSettingsPanels();
           break;
-        case 'projects:ci_cd:show':
+        case 'projects:settings:ci_cd:show':
           new gl.ProjectVariables();
           break;
         case 'ci:lints:create':

app/assets/javascripts/files_comment_button.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, consistent-return */
-/* global FilesCommentButton */
 /* global notes */
 
-let $commentButtonTemplate;
-
-window.FilesCommentButton = (function() {
-  var COMMENT_BUTTON_CLASS, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
-
-  COMMENT_BUTTON_CLASS = '.add-diff-note';
-
-  LINE_HOLDER_CLASS = '.line_holder';
-
-  LINE_NUMBER_CLASS = 'diff-line-num';
-
-  LINE_CONTENT_CLASS = 'line_content';
-
-  UNFOLDABLE_LINE_CLASS = 'js-unfold';
-
-  EMPTY_CELL_CLASS = 'empty-cell';
-
-  OLD_LINE_CLASS = 'old_line';
-
-  LINE_COLUMN_CLASSES = "." + LINE_NUMBER_CLASS + ", .line_content";
-
-  TEXT_FILE_SELECTOR = '.text-file';
-
-  function FilesCommentButton(filesContainerElement) {
-    this.render = this.render.bind(this);
-    this.hideButton = this.hideButton.bind(this);
-    this.isParallelView = notes.isParallelView();
-    filesContainerElement.on('mouseover', LINE_COLUMN_CLASSES, this.render)
-      .on('mouseleave', LINE_COLUMN_CLASSES, this.hideButton);
-  }
-
-  FilesCommentButton.prototype.render = function(e) {
-    var $currentTarget, buttonParentElement, lineContentElement, textFileElement, $button;
-    $currentTarget = $(e.currentTarget);
-
-    if ($currentTarget.hasClass('js-no-comment-btn')) return;
-
-    lineContentElement = this.getLineContent($currentTarget);
-    buttonParentElement = this.getButtonParent($currentTarget);
-
-    if (!this.validateButtonParent(buttonParentElement) || !this.validateLineContent(lineContentElement)) return;
-
-    $button = $(COMMENT_BUTTON_CLASS, buttonParentElement);
-    buttonParentElement.addClass('is-over')
-      .nextUntil(`.${LINE_CONTENT_CLASS}`).addClass('is-over');
-
-    if ($button.length) {
-      return;
+/* Developer beware! Do not add logic to showButton or hideButton
+ * that will force a reflow. Doing so will create a signficant performance
+ * bottleneck for pages with large diffs. For a comprehensive list of what
+ * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+ */
+
+const LINE_NUMBER_CLASS = 'diff-line-num';
+const UNFOLDABLE_LINE_CLASS = 'js-unfold';
+const NO_COMMENT_CLASS = 'no-comment-btn';
+const EMPTY_CELL_CLASS = 'empty-cell';
+const OLD_LINE_CLASS = 'old_line';
+const LINE_COLUMN_CLASSES = `.${LINE_NUMBER_CLASS}, .line_content`;
+const DIFF_CONTAINER_SELECTOR = '.files';
+const DIFF_EXPANDED_CLASS = 'diff-expanded';
+
+export default {
+  init($diffFile) {
+    /* Caching is used only when the following members are *true*. This is because there are likely to be
+     * differently configured versions of diffs in the same session. However if these values are true, they
+     * will be true in all cases */
+
+    if (!this.userCanCreateNote) {
+      // data-can-create-note is an empty string when true, otherwise undefined
+      this.userCanCreateNote = $diffFile.closest(DIFF_CONTAINER_SELECTOR).data('can-create-note') === '';
     }
 
-    textFileElement = this.getTextFileElement($currentTarget);
-    buttonParentElement.append(this.buildButton({
-      discussionID: lineContentElement.attr('data-discussion-id'),
-      lineType: lineContentElement.attr('data-line-type'),
-
-      noteableType: textFileElement.attr('data-noteable-type'),
-      noteableID: textFileElement.attr('data-noteable-id'),
-      commitID: textFileElement.attr('data-commit-id'),
-      noteType: lineContentElement.attr('data-note-type'),
-
-      // LegacyDiffNote
-      lineCode: lineContentElement.attr('data-line-code'),
-
-      // DiffNote
-      position: lineContentElement.attr('data-position')
-    }));
-  };
-
-  FilesCommentButton.prototype.hideButton = function(e) {
-    var $currentTarget = $(e.currentTarget);
-    var buttonParentElement = this.getButtonParent($currentTarget);
-
-    buttonParentElement.removeClass('is-over')
-      .nextUntil(`.${LINE_CONTENT_CLASS}`).removeClass('is-over');
-  };
-
-  FilesCommentButton.prototype.buildButton = function(buttonAttributes) {
-    return $commentButtonTemplate.clone().attr({
-      'data-discussion-id': buttonAttributes.discussionID,
-      'data-line-type': buttonAttributes.lineType,
-
-      'data-noteable-type': buttonAttributes.noteableType,
-      'data-noteable-id': buttonAttributes.noteableID,
-      'data-commit-id': buttonAttributes.commitID,
-      'data-note-type': buttonAttributes.noteType,
-
-      // LegacyDiffNote
-      'data-line-code': buttonAttributes.lineCode,
-
-      // DiffNote
-      'data-position': buttonAttributes.position
-    });
-  };
-
-  FilesCommentButton.prototype.getTextFileElement = function(hoveredElement) {
-    return hoveredElement.closest(TEXT_FILE_SELECTOR);
-  };
-
-  FilesCommentButton.prototype.getLineContent = function(hoveredElement) {
-    if (hoveredElement.hasClass(LINE_CONTENT_CLASS)) {
-      return hoveredElement;
-    }
-    if (!this.isParallelView) {
-      return $(hoveredElement).closest(LINE_HOLDER_CLASS).find("." + LINE_CONTENT_CLASS);
-    } else {
-      return $(hoveredElement).next("." + LINE_CONTENT_CLASS);
+    if (typeof notes !== 'undefined' && !this.isParallelView) {
+      this.isParallelView = notes.isParallelView && notes.isParallelView();
     }
-  };
 
-  FilesCommentButton.prototype.getButtonParent = function(hoveredElement) {
-    if (!this.isParallelView) {
-      if (hoveredElement.hasClass(OLD_LINE_CLASS)) {
-        return hoveredElement;
-      }
-      return hoveredElement.parent().find("." + OLD_LINE_CLASS);
-    } else {
-      if (hoveredElement.hasClass(LINE_NUMBER_CLASS)) {
-        return hoveredElement;
-      }
-      return $(hoveredElement).prev("." + LINE_NUMBER_CLASS);
+    if (this.userCanCreateNote) {
+      $diffFile.on('mouseover', LINE_COLUMN_CLASSES, e => this.showButton(this.isParallelView, e))
+        .on('mouseleave', LINE_COLUMN_CLASSES, e => this.hideButton(this.isParallelView, e));
     }
-  };
+  },
 
-  FilesCommentButton.prototype.validateButtonParent = function(buttonParentElement) {
-    return !buttonParentElement.hasClass(EMPTY_CELL_CLASS) && !buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS);
-  };
+  showButton(isParallelView, e) {
+    const buttonParentElement = this.getButtonParent(e.currentTarget, isParallelView);
 
-  FilesCommentButton.prototype.validateLineContent = function(lineContentElement) {
-    return lineContentElement.attr('data-note-type') && lineContentElement.attr('data-note-type') !== '';
-  };
+    if (!this.validateButtonParent(buttonParentElement)) return;
 
-  return FilesCommentButton;
-})();
+    buttonParentElement.classList.add('is-over');
+    buttonParentElement.nextElementSibling.classList.add('is-over');
+  },
 
-$.fn.filesCommentButton = function() {
-  $commentButtonTemplate = $('<button name="button" type="submit" class="add-diff-note js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>');
+  hideButton(isParallelView, e) {
+    const buttonParentElement = this.getButtonParent(e.currentTarget, isParallelView);
 
-  if (!(this && (this.parent().data('can-create-note') != null))) {
-    return;
-  }
-  return this.each(function() {
-    if (!$.data(this, 'filesCommentButton')) {
-      return $.data(this, 'filesCommentButton', new FilesCommentButton($(this)));
+    buttonParentElement.classList.remove('is-over');
+    buttonParentElement.nextElementSibling.classList.remove('is-over');
+  },
+
+  getButtonParent(hoveredElement, isParallelView) {
+    if (isParallelView) {
+      if (!hoveredElement.classList.contains(LINE_NUMBER_CLASS)) {
+        return hoveredElement.previousElementSibling;
+      }
+    } else if (!hoveredElement.classList.contains(OLD_LINE_CLASS)) {
+      return hoveredElement.parentNode.querySelector(`.${OLD_LINE_CLASS}`);
     }
-  });
+    return hoveredElement;
+  },
+
+  validateButtonParent(buttonParentElement) {
+    return !buttonParentElement.classList.contains(EMPTY_CELL_CLASS) &&
+      !buttonParentElement.classList.contains(UNFOLDABLE_LINE_CLASS) &&
+      !buttonParentElement.classList.contains(NO_COMMENT_CLASS) &&
+      !buttonParentElement.parentNode.classList.contains(DIFF_EXPANDED_CLASS);
+  },
 };

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) {
@@ -227,11 +228,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

@@ -396,6 +396,13 @@ class GfmAutoComplete {
     this.cachedData = {};
   }
 
+  destroy() {
+    this.input.each((i, input) => {
+      const $input = $(input);
+      $input.atwho('destroy');
+    });
+  }
+
   static isLoading(data) {
     let dataToInspect = data;
     if (data && data.length > 0) {

app/assets/javascripts/gl_form.js

@@ -21,6 +21,9 @@ function GLForm(form, enableGFM = false) {
 GLForm.prototype.destroy = function() {
   // Clean form listeners
   this.clearEventListeners();
+  if (this.autoComplete) {
+    this.autoComplete.destroy();
+  }
   return this.form.data('gl-form', null);
 };
 
@@ -33,7 +36,8 @@ GLForm.prototype.setupForm = function() {
     this.form.addClass('gfm-form');
     // remove notify commit author checkbox for non-commit notes
     gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button, .js-note-new-discussion'));
-    new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup(this.form.find('.js-gfm-input'), {
+    this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
+    this.autoComplete.setup(this.form.find('.js-gfm-input'), {
       emojis: true,
       members: this.enableGFM,
       issues: this.enableGFM,

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

@@ -39,6 +39,17 @@
       runnerId() {
         return `#${this.job.runner.id}`;
       },
+      renderBlock() {
+        return this.job.merge_request ||
+          this.job.duration ||
+          this.job.finished_data ||
+          this.job.erased_at ||
+          this.job.queued ||
+          this.job.runner ||
+          this.job.coverage ||
+          this.job.tags.length ||
+          this.job.cancel_path;
+      },
     },
   };
 </script>
@@ -63,7 +74,7 @@
           Retry
         </a>
       </div>
-      <div class="block">
+      <div :class="{block : renderBlock }">
         <p
           class="build-detail-row js-job-mr"
           v-if="job.merge_request">

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/merge_request_tabs.js

@@ -144,7 +144,9 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
         this.resetViewContainer();
         this.mountPipelinesView();
       } else {
-        this.expandView();
+        if (Breakpoints.get().getBreakpointSize() !== 'xs') {
+          this.expandView();
+        }
         this.resetViewContainer();
         this.destroyPipelinesView();
       }
@@ -168,9 +170,8 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
     // Activate a tab based on the current action
     activateTab(action) {
-      const activate = action === 'show' ? 'notes' : action;
       // important note: the .tab('show') method triggers 'shown.bs.tab' event itself
-      $(`.merge-request-tabs a[data-action='${activate}']`).tab('show');
+      $(`.merge-request-tabs a[data-action='${action}']`).tab('show');
     }
 
     // Replaces the current Merge Request-specific action in the URL with a new one
@@ -185,7 +186,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
     //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
     //
     //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
-    //   setCurrentAction('notes')
+    //   setCurrentAction('show')
     //   location.pathname # => "/namespace/project/merge_requests/1"
     //
     //   location.pathname # => "/namespace/project/merge_requests/1/diffs"
@@ -194,13 +195,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
     //
     // Returns the new URL String
     setCurrentAction(action) {
-      this.currentAction = action === 'show' ? 'notes' : action;
+      this.currentAction = action;
 
-      // Remove a trailing '/commits' '/diffs' '/pipelines' '/new' '/new/diffs'
-      let newState = location.pathname.replace(/\/(commits|diffs|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
+      // Remove a trailing '/commits' '/diffs' '/pipelines'
+      let newState = location.pathname.replace(/\/(commits|diffs|pipelines)(\.html)?\/?$/, '');
 
       // Append the new action if we're on a tab other than 'notes'
-      if (this.currentAction !== 'notes') {
+      if (this.currentAction !== 'show' && this.currentAction !== 'new') {
         newState += `/${this.currentAction}`;
       }
 

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>