Merge branch 'master' into 'latest-security-to-master-21-03-18'

# Conflicts:
#   Gemfile
#   Gemfile.lock

CHANGELOG.md

@@ -2,6 +2,198 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
+## 10.6.0 (2018-03-22)
+
+### Security (4 changes)
+
+- Fixed some SSRF vulnerabilities in services, hooks and integrations. !2337
+- Ensure that OTP backup codes are always invalidated.
+- Add verification for GitLab Pages custom domains.
+- Fix GitLab Auth0 integration signing in the wrong user.
+
+### Fixed (75 changes, 17 of them are from the community)
+
+- Ensure users cannot create environments with leading or trailing slashes (Fixes #39885). !15273
+- Fix new project path input overlapping. !16755 (George Tsiolis)
+- Respect description and visibility when creating project from template. !16820 (George Tsiolis)
+- Remove user notification settings for groups and projects when user leaves. !16906 (Jacopo Beschi @jacopo-beschi)
+- Fix Teleporting Emoji. !16963 (Jared Deckard <jared.deckard@gmail.com>)
+- Fix duplicate system notes when merging a merge request. !17035
+- Fix breadcrumb on labels page for groups. !17045 (Onuwa Nnachi Isaac)
+- Fix user avatar's vertical align on the issues and merge requests pages. !17072 (Laszlo Karpati)
+- Fix settings panels not expanding when fragment hash linked. !17074
+- Fix 404 when listing archived projects in a group where all projects have been archived. !17077 (Ashley Dumaine)
+- Allow to call PUT /projects/:id API with only ci_config_path specified. !17105 (Laszlo Karpati)
+- Fix long list of recipients on group request membership email. !17121 (Jacopo Beschi @jacopo-beschi)
+- Remove duplicated error message on duplicate variable validation. !17135
+- Keep "Import project" tab/form active when validation fails trying to import "Repo by URL". !17136
+- Fixed bug with unauthenticated requests through git ssh. !17149
+- Allows project rename after validation error. !17150
+- Fix "Remove source branch" button in Merge request widget during merge when pipeline succeeds state. !17192
+- Add missing pagination on the commit diff endpoint. !17203 (Maxime Roussin-Bélanger)
+- Fix get a single pages domain when project path contains a period. !17206 (Travis Miller)
+- remove avater underline. !17219 (Ken Ding)
+- Allows the usage of /milestone quick action for group milestones. !17239 (Jacopo Beschi @jacopo-beschi)
+- Encode branch name as binary before creating a RPC request to copy attributes. !17291
+- Restart Unicorn and Sidekiq when GRPC throws 14:Endpoint read failed. !17293
+- Do not persist Google Project verification flash errors after a page reload. !17299
+- Ensure group issues and merge requests pages show results from subgroups when there are no results from the current group. !17312
+- Prevent trace artifact migration to incur data loss. !17313
+- Fixes gpg popover layout. !17323
+- Return a 404 instead of 403 if the repository does not exist on disk. !17341
+- Fix Slack/Mattermost notifications not respecting `notify_only_default_branch` setting for pushes. !17345
+- Fix Group labels load failure when there are duplicate labels present. !17353
+- Allow Prometheus application to be installed from Cluster applications. !17372
+- Fixes Prometheus admin configuration page. !17377
+- Enable filtering MR list based on clicked label in MR sidebar. !17390
+- Fix code and wiki search results pages when non-ASCII text is displayed. !17413
+- Count comments on diffs and discussions as contributions for the contributions calendar. !17418 (Riccardo Padovani)
+- Add Assignees vue component missing data container. !17426 (George Tsiolis)
+- Update tooltip on pipeline cancel to Stop (#42946). !17444
+- Removing the two factor check when the user sets a new password. !17457
+- Fix quick actions for users who cannot update issues and merge requests. !17482
+- Stop loading spinner on error of milestone update on issue. !17507 (Takuya Noguchi)
+- Set margins around dropdown dividers to 4px. !17517
+- Fix pages flaky failure by reloading stale object. !17522
+- Remove extra breadcrumb on tags. !17562 (Takuya Noguchi)
+- Fix missing uploads after group transfer. !17658
+- Fix markdown table showing extra column. !17669
+- Ensure the API returns https links when https is configured. !17681
+- Sanitize extra blank spaces used when uploading a SSH key. !40552
+- Render htmlentities correctly for links not supported by Rinku.
+- Keep link when redacting unauthorized object links.
+- Handle empty state in Pipelines page.
+- Revert Project.public_or_visible_to_user changes and only apply to snippets.
+- Release libgit2 cache and open file descriptors after `git gc` run.
+- Fix project dashboard showing the wrong timestamps.
+- Fix "Can't modify frozen hash" error when project is destroyed.
+- Fix Error 500 when viewing a commit with a GPG signature in Geo.
+- Don't error out in system hook if user has `nil` datetime columns.
+- Remove double caching of Repository#empty?.
+- Don't delete todos or unassign issues and MRs when a user leaves a project.
+- Don't cache a nil repository root ref to prevent caching issues.
+- Escape HTML entities in commit messages.
+- Verify project import status again before marking as failed.
+- [GitHub Import] Create an empty wiki if wiki import failed.
+- Create empty wiki when import from GitLab and wiki is not there.
+- Make sure wiki exists when it's enabled.
+- Fix broken loading state for close issue button.
+- Fix code and wiki search results when filename is non-ASCII.
+- Fix file upload on project show page.
+- Fix squashing when a file is renamed.
+- Show loading button inline in refresh button in MR widget.
+- Fix close button on issues not working on mobile.
+- Adds tooltip in environment names to increase readability.
+- Fixed issue edit shortcut not opening edit form.
+- Fix 500 error being shown when diff has context marker with invalid encoding.
+- Render modified icon for moved file in changes dropdown.
+- Remember assignee when moving an issue.
+
+### Changed (16 changes, 9 of them are from the community)
+
+- Allow including custom attributes in API responses. !16526 (Markus Koller)
+- Apply new default and inline label design. !16956 (George Tsiolis)
+- Remove whitespace from the username/email sign in form field. !17020 (Peter lauck)
+- CI charts now include the current day. !17032 (Dakkaron)
+- Hide CI secret variable values after saving. !17044
+- Add new modal Vue component. !17108
+- Asciidoc now support inter-document cross references between files in repository. !17125 (Turo Soisenniemi)
+- Update issue closing pattern to allow variations in punctuation. !17198 (Vicky Chijwani)
+- Add a button to deploy a runner to a Kubernetes cluster in the settings page. !17278
+- Pages custom domain: allow update of key/certificate. !17376 (rfwatson)
+- Clear the Labels dropdown search filter after a selection is made. !17393 (Andrew Torres)
+- Hook data for pipelines includes detailed_status. !17607
+- Avoid showing unnecessary Trigger checkboxes for project Integrations with only one event. !17607
+- Display a link to external issue tracker when enabled.
+- Allow token authentication on go-get request.
+- Update SSH key link to include existing keys. (Brendan O'Leary)
+
+### Performance (24 changes, 5 of them are from the community)
+
+- Add catch-up background migration to migrate pipeline stages. !15741
+- Move BoardNewIssue vue component. !16947 (George Tsiolis)
+- Move IssuableTimeTracker vue component. !16948 (George Tsiolis)
+- Move RecentSearchesDropdownContent vue component. !16951 (George Tsiolis)
+- Move Assignees vue component. !16952 (George Tsiolis)
+- Improve performance of pipeline page by reducing DB queries. !17168
+- Store sha256 checksum to job artifacts. !17354
+- Move SidebarAssignees vue component. !17398 (George Tsiolis)
+- Improve database response time for user activity listing. !17454
+- Use persisted/memoized value for MRs shas instead of doing git lookups. !17555
+- Cache MergeRequests can_be_resolved_in_ui? git operations. !17589
+- Prevent the graphs page from generating unnecessary Gitaly requests. !37602
+- Use a user object in ApplicationHelper#avatar_icon where possible to avoid N+1 queries. !42800
+- Submit a single batch blob RPC to Gitaly per HTTP request when viewing diffs.
+- Avoid re-fetching merge-base SHA from Gitaly unnecessarily.
+- Don't use ProjectsFinder in TodosFinder.
+- Adding missing indexes on taggings table.
+- Add index on section_name_id on ci_build_trace_sections table.
+- Cache column_exists? for application settings.
+- Cache table_exists?('application_settings') to reduce repeated schema reloads.
+- Make --prune a configurable parameter in fetching a git remote.
+- Fix timeouts loading /admin/projects page.
+- Add partial indexes on todos to handle users with many todos.
+- Optimize search queries on the search page by setting a limit for matching records in project scope.
+
+### Added (30 changes, 9 of them are from the community)
+
+- Add CommonMark markdown engine (experimental). !14835 (blackst0ne)
+- API: Get references a commit is pushed to. !15026 (Robert Schilling)
+- Add overview of branches and a filter for active/stale branches. !15402 (Takuya Noguchi)
+- Add project export API. !15860 (Travis Miller)
+- expose more metrics in merge requests api. !16589 (haseebeqx)
+- #28481: Display time tracking totals on milestone page. !16753 (Riccardo Padovani)
+- Add a button on the project page to set up a Kubernetes cluster and enable Auto DevOps. !16900
+- Include cycle time in usage ping data. !16973
+- Add ability to use external plugins as an alternative to system hooks. !17003
+- Add search param to Branches API. !17005 (bunufi)
+- API endpoint for importing a project export. !17025
+- Display ingress IP address in the Kubernetes page. !17052
+- Implemented badge API endpoints. !17082
+- Allow installation of GitLab Runner with a single click. !17134
+- Allow commits endpoint to work over all commits of a repository. !17182
+- Display Runner IP Address. !17286
+- Add archive feature to trace. !17314
+- Allow maintainers to push to forks of their projects when a merge request is open. !17395
+- Foreground verification of uploads and LFS objects. !17402
+- Adds updated_at filter to issues and merge_requests API. !17417 (Jacopo Beschi @jacopo-beschi)
+- Port /wip quick action command to Merge Request creation (on description). !17463 (Adam Pahlevi)
+- Add a paragraph about security implications on Cluster's page. !17486
+- Add plugins list to the system hooks page. !17518
+- Enable privileged mode for GitLab Runner. !17528
+- Expose GITLAB_FEATURES as CI/CD variable (fixes #40994).
+- Upgrade GitLab Workhorse to 4.0.0.
+- Allow CI/CD Jobs being grouped on version strings.
+- Add discussions API for Issues and Snippets.
+- Add one group board to Libre.
+- Add support for filtering by source and target branch to merge requests API.
+
+### Other (14 changes, 3 of them are from the community)
+
+- Update vue component naming guidelines. !17018 (George Tsiolis)
+- Added new design for promotion modals. !17197
+- Update to github-linguist 5.3.x. !17241 (Ken Ding)
+- update toml-rb to 1.0.0. !17259 (Ken Ding)
+- Keep track of projects a user interacted with. !17327
+- Enables eslint in codeclimate job. !17392
+- Port Labels Select dropdown to Vue. !17411
+- Add NOT NULL constraint to projects.namespace_id. !17448
+- Ensure foreign keys on clusters applications. !17488
+- Started translation into Turkish, Indonesian and Filipino. !17526
+- Add documentation for displayed K8s Ingress IP address (#44330). !17836
+- Move Ruby endpoints to OPT_OUT.
+- Upgrade Workhorse to version 3.8.0 to support structured logging.
+- Use host URL to build JIRA remote link icon.
+
+
+## 10.5.6 (2018-03-16)
+
+### Security (2 changes)
+
+- Fixed some SSRF vulnerabilities in services, hooks and integrations. !2337
+- Fix GitLab Auth0 integration signing in the wrong user.
+
+
 ## 10.5.5 (2018-03-15)
 ### Fixed (3 changes)
@@ -261,6 +453,14 @@ entry.
 - Adds empty state illustration for pending job.
+## 10.4.6 (2018-03-16)
+
+### Security (2 changes)
+
+- Fixed some SSRF vulnerabilities in services, hooks and integrations. !2337
+- Fix GitLab Auth0 integration signing in the wrong user.
+
+
 ## 10.4.5 (2018-03-01)
 ### Security (1 change)
@@ -492,6 +692,15 @@ entry.
 - Use a background migration for issues.closed_at.
+## 10.3.9 (2018-03-16)
+
+### Security (3 changes)
+
+- Fixed some SSRF vulnerabilities in services, hooks and integrations. !2337
+- Update nokogiri to 1.8.2. !16807
+- Fix GitLab Auth0 integration signing in the wrong user.
+
+
 ## 10.3.8 (2018-03-01)
 ### Security (1 change)

GITLAB_SHELL_VERSION

-6.0.4
+7.1.0

Gemfile

+# --- Special code for migrating to Rails 5.0 ---
+def rails5?
+  %w[1 true].include?(ENV["RAILS5"])
+end
+
+gem_versions = {}
+gem_versions['activerecord_sane_schema_dumper'] = rails5? ? '1.0'      : '0.2'
+gem_versions['default_value_for']               = rails5? ? '~> 3.0.5' : '~> 3.0.0'
+gem_versions['html-pipeline']                   = rails5? ? '~> 2.6.0' : '~> 1.11.0'
+gem_versions['rails']                           = rails5? ? '5.0.6'    : '4.2.10'
+gem_versions['rails-i18n']                      = rails5? ? '~> 5.1'   : '~> 4.0.9'
+# --- The end of special code for migrating to Rails 5.0 ---
+
 source 'https://rubygems.org'
-gem 'rails', '4.2.10'
+gem 'rails', gem_versions['rails']
 gem 'rails-deprecated_sanitizer', '~> 1.0.3'
 # Responders respond_to and respond_with
@@ -9,7 +22,7 @@ gem 'responders', '~> 2.0'
 gem 'sprockets', '~> 3.7.0'
 # Default values for AR models
-gem 'default_value_for', '~> 3.0.0'
+gem 'default_value_for', gem_versions['default_value_for']
 # Supported DBs
 gem 'mysql2', '~> 0.4.10', group: :mysql
@@ -24,7 +37,7 @@ gem 'faraday', '~> 0.12'
 gem 'devise', '~> 4.2'
 gem 'doorkeeper', '~> 4.3'
 gem 'doorkeeper-openid_connect', '~> 1.3'
-gem 'omniauth', '~> 1.4.2'
+gem 'omniauth', '~> 1.8'
 gem 'omniauth-auth0', '~> 2.0.0'
 gem 'omniauth-azure-oauth2', '~> 0.0.9'
 gem 'omniauth-cas3', '~> 1.1.4'
@@ -122,7 +135,7 @@ gem 'unf', '~> 0.1.4'
 gem 'seed-fu', '~> 2.3.7'
 # Markdown and HTML processing
-gem 'html-pipeline', '~> 1.11.0'
+gem 'html-pipeline', gem_versions['html-pipeline']
 gem 'deckar01-task_list', '2.0.0'
 gem 'gitlab-markup', '~> 1.6.2'
 gem 'redcarpet', '~> 3.4'
@@ -266,7 +279,7 @@ gem 'premailer-rails', '~> 1.9.7'
 # I18n
 gem 'ruby_parser', '~> 3.8', require: false
-gem 'rails-i18n', '~> 4.0.9'
+gem 'rails-i18n', gem_versions['rails-i18n']
 gem 'gettext_i18n_rails', '~> 1.8.0'
 gem 'gettext_i18n_rails_js', '~> 1.3'
 gem 'gettext', '~> 3.2.2', require: false, group: :development
@@ -357,7 +370,7 @@ group :development, :test do
   gem 'license_finder', '~> 3.1', require: false
   gem 'knapsack', '~> 1.16'
-  gem 'activerecord_sane_schema_dumper', '0.2'
+  gem 'activerecord_sane_schema_dumper', gem_versions['activerecord_sane_schema_dumper']
   gem 'stackprof', '~> 0.2.10', require: false

Gemfile.lock

@@ -524,8 +524,8 @@ GEM
       rack (>= 1.2, < 3)
     octokit (4.8.0)
       sawyer (~> 0.8.0, >= 0.5.3)
-    omniauth (1.4.3)
-      hashie (>= 1.2, < 4)
+    omniauth (1.8.1)
+      hashie (>= 3.4.6, < 3.6.0)
       rack (>= 1.6.2, < 3)
     omniauth-auth0 (2.0.0)
       omniauth-oauth2 (~> 1.4)
@@ -1104,7 +1104,7 @@ DEPENDENCIES
   nokogiri (~> 1.8.2)
   oauth2 (~> 1.4)
   octokit (~> 4.8)
-  omniauth (~> 1.4.2)
+  omniauth (~> 1.8)
   omniauth-auth0 (~> 2.0.0)
   omniauth-authentiq (~> 0.3.1)
   omniauth-azure-oauth2 (~> 0.0.9)

Gemfile.rails5

+# BUNDLE_GEMFILE=Gemfile.rails5 bundle install
+
+ENV["RAILS5"] = "true"
+
+gemfile = File.expand_path("../Gemfile", __FILE__)
+
+eval(File.read(gemfile), nil, gemfile)

Procfile

@@ -4,4 +4,3 @@
 #
 web: RAILS_ENV=development bin/web start_foreground
 worker: RAILS_ENV=development bin/background_jobs start_foreground
-# mail_room: bundle exec mail_room -q -c config/mail_room.yml

VERSION

-10.6.0-pre
+10.7.0-pre

app/assets/javascripts/ide/components/repo_file.vue

@@ -43,6 +43,7 @@ export default {
         'file-open': this.isBlob && this.file.opened,
         'file-active': this.isBlob && this.file.active,
         folder: this.isTree,
+        'is-open': this.file.opened,
       };
     },
   },

app/assets/javascripts/ide/ide_router.js

@@ -54,41 +54,61 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
   if (to.params.namespace && to.params.project) {
-    store.dispatch('getProjectData', {
-      namespace: to.params.namespace,
-      projectId: to.params.project,
-    })
-    .then(() => {
-      const fullProjectId = `${to.params.namespace}/${to.params.project}`;
-      if (to.params.branch) {
-        store.dispatch('getBranchData', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        });
-        store.dispatch('getFiles', {
-          projectId: fullProjectId,
-          branchId: to.params.branch,
-        })
-        .then(() => {
-          if (to.params[0]) {
-            const treeEntry = store.state.entries[to.params[0]];
-            if (treeEntry) {
-              store.dispatch('handleTreeEntryAction', treeEntry);
-            }
-          }
-        })
-        .catch((e) => {
-          flash('Error while loading the branch files. Please try again.', 'alert', document, null, false, true);
-          throw e;
-        });
-      }
-    })
-    .catch((e) => {
-      flash('Error while loading the project data. Please try again.', 'alert', document, null, false, true);
-      throw e;
-    });
+    store
+      .dispatch('getProjectData', {
+        namespace: to.params.namespace,
+        projectId: to.params.project,
+      })
+      .then(() => {
+        const fullProjectId = `${to.params.namespace}/${to.params.project}`;
+        if (to.params.branch) {
+          store.dispatch('getBranchData', {
+            projectId: fullProjectId,
+            branchId: to.params.branch,
+          });
+          store
+            .dispatch('getFiles', {
+              projectId: fullProjectId,
+              branchId: to.params.branch,
+            })
+            .then(() => {
+              if (to.params[0]) {
+                const path =
+                  to.params[0].slice(-1) === '/'
+                    ? to.params[0].slice(0, -1)
+                    : to.params[0];
+                const treeEntry = store.state.entries[path];
+                if (treeEntry) {
+                  store.dispatch('handleTreeEntryAction', treeEntry);
+                }
+              }
+            })
+            .catch(e => {
+              flash(
+                'Error while loading the branch files. Please try again.',
+                'alert',
+                document,
+                null,
+                false,
+                true,
+              );
+              throw e;
+            });
+        }
+      })
+      .catch(e => {
+        flash(
+          'Error while loading the project data. Please try again.',
+          'alert',
+          document,
+          null,
+          false,
+          true,
+        );
+        throw e;
+      });
   }
   next();

app/assets/javascripts/ide/stores/workers/files_decorator_worker.js

-import {
-  decorateData,
-  sortTree,
-} from '../utils';
-self.addEventListener('message', (e) => {
-  const { data, projectId, branchId, tempFile = false, content = '', base64 = false } = e.data;
+import { decorateData, sortTree } from '../utils';
+self.addEventListener('message', e => {
+  const {
+    data,
+    projectId,
+    branchId,
+    tempFile = false,
+    content = '',
+    base64 = false,
+  } = e.data;
   const treeList = [];
   let file;
@@ -15,7 +19,9 @@ self.addEventListener('message', (e) => {
     if (pathSplit.length > 0) {
       pathSplit.reduce((pathAcc, folderName) => {
         const parentFolder = acc[pathAcc[pathAcc.length - 1]];
-        const folderPath = `${(parentFolder ? `${parentFolder.path}/` : '')}${folderName}`;
+        const folderPath = `${
+          parentFolder ? `${parentFolder.path}/` : ''
+        }${folderName}`;
         const foundEntry = acc[folderPath];
         if (!foundEntry) {
@@ -25,9 +31,11 @@ self.addEventListener('message', (e) => {
             id: folderPath,
             name: folderName,
             path: folderPath,
-            url: `/${projectId}/tree/${branchId}/${folderPath}`,
+            url: `/${projectId}/tree/${branchId}/${folderPath}/`,
             type: 'tree',
-            parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
+            parentTreeUrl: parentFolder
+              ? parentFolder.url
+              : `/${projectId}/tree/${branchId}/`,
             tempFile,
             changed: tempFile,
             opened: tempFile,
@@ -62,7 +70,9 @@ self.addEventListener('message', (e) => {
         path,
         url: `/${projectId}/blob/${branchId}/${path}`,
         type: 'blob',
-        parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        parentTreeUrl: fileFolder
+          ? fileFolder.url
+          : `/${projectId}/blob/${branchId}`,
         tempFile,
         changed: tempFile,
         content,

app/assets/javascripts/notes.js

@@ -1727,6 +1727,7 @@ export default class Notes {
     // Get Form metadata
     const $submitBtn = $(e.target);
+    $submitBtn.prop('disabled', true);
     let $form = $submitBtn.parents('form');
     const $closeBtn = $form.find('.js-note-target-close');
     const isDiscussionNote =
@@ -1761,7 +1762,6 @@ export default class Notes {
     // If comment is to resolve discussion, disable submit buttons while
     // comment posting is finished.
     if (isDiscussionResolve) {
-      $submitBtn.disable();
       $form.find('.js-comment-submit-button').disable();
     }
@@ -1816,6 +1816,7 @@ export default class Notes {
       .then(res => {
         const note = res.data;
+        $submitBtn.prop('disabled', false);
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
@@ -1899,7 +1900,7 @@ export default class Notes {
       .catch(() => {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
-
+        $submitBtn.prop('disabled', false);
         const blurEvent = new CustomEvent('blur.imageDiff', {
           detail: e,
         });

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -27,12 +27,21 @@ export default {
       required: true,
     },
   },
+  computed: {
+    metricDetails() {
+      return this.currentRequest.details[this.metric];
+    },
+    detailsList() {
+      return this.metricDetails[this.details];
+    },
+  },
 };
 </script>
 <template>
   <div
     :id="`peek-view-${metric}`"
     class="view"
+    v-if="currentRequest.details"
   >
     <button
       :data-target="`#modal-peek-${metric}-details`"
@@ -40,34 +49,39 @@ export default {
       type="button"
       data-toggle="modal"
     >
-      <span
-        v-if="currentRequest.details"
-        class="bold"
-      >
-        {{ currentRequest.details[metric].duration }}
-        /
-        {{ currentRequest.details[metric].calls }}
-      </span>
+      {{ metricDetails.duration }}
+      /
+      {{ metricDetails.calls }}
     </button>
     <gl-modal
-      v-if="currentRequest.details"
       :id="`modal-peek-${metric}-details`"
       :header-title-text="header"
       class="performance-bar-modal"
     >
-      <table class="table">
-        <tr
-          v-for="(item, index) in currentRequest.details[metric][details]"
-          :key="index"
-        >
-          <td><strong>{{ item.duration }}ms</strong></td>
-          <td
-            v-for="key in keys"
-            :key="key"
+      <table
+        class="table"
+      >
+        <template v-if="detailsList.length">
+          <tr
+            v-for="(item, index) in detailsList"
+            :key="index"
           >
-            {{ item[key] }}
-          </td>
-        </tr>
+            <td><strong>{{ item.duration }}ms</strong></td>
+            <td
+              v-for="key in keys"
+              :key="key"
+            >
+              {{ item[key] }}
+            </td>
+          </tr>
+        </template>
+        <template v-else>
+          <tr>
+            <td>
+              No {{ header.toLowerCase() }} for this request.
+            </td>
+          </tr>
+        </template>
       </table>
       <div slot="footer">

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -113,27 +113,21 @@ export default {
     id="js-peek"
     :class="env"
   >
-    <request-selector
-      v-if="currentRequest"
-      :current-request="currentRequest"
-      :requests="requests"
-      @change-current-request="changeCurrentRequest"
-    />
-    <div
-      id="peek-view-host"
-      class="view prepend-left-5"
-    >
-      <span
-        v-if="currentRequest && currentRequest.details"
-        class="current-host"
-      >
-        {{ currentRequest.details.host.hostname }}
-      </span>
-    </div>
     <div
       v-if="currentRequest"
-      class="wrapper"
+      class="container-fluid container-limited"
     >
+      <div
+        id="peek-view-host"
+        class="view"
+      >
+        <span
+          v-if="currentRequest.details"
+          class="current-host"
+        >
+          {{ currentRequest.details.host.hostname }}
+        </span>
+      </div>
       <upstream-performance-bar
         v-if="initialRequest && currentRequest.details"
       />
@@ -186,6 +180,12 @@ export default {
           gc
         </span>
       </div>
+      <request-selector
+        v-if="currentRequest"
+        :current-request="currentRequest"
+        :requests="requests"
+        @change-current-request="changeCurrentRequest"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/performance_bar/components/request_selector.vue

@@ -37,7 +37,7 @@ export default {
 <template>
   <div
     id="peek-request-selector"
-    class="append-right-5 pull-right"
+    class="pull-right"
   >
     <select v-model="currentRequestId">
       <option

app/assets/javascripts/performance_bar/components/upstream_performance_bar.vue

@@ -5,6 +5,8 @@ export default {
       .getElementById('peek-view-performance-bar')
       .cloneNode(true);
+    upstreamPerformanceBar.classList.remove('hidden');
+
     this.$refs.wrapper.appendChild(upstreamPerformanceBar);
   },
 };

app/assets/javascripts/performance_bar/index.js

@@ -4,9 +4,9 @@ import Vue from 'vue';
 import performanceBarApp from './components/performance_bar_app.vue';
 import PerformanceBarStore from './stores/performance_bar_store';
-export default () =>
+export default ({ container }) =>
   new Vue({
-    el: '#js-peek',
+    el: container,
     components: {
       performanceBarApp,
     },

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js

-import stopwatchSvg from 'icons/_icon_stopwatch.svg';
-import { abbreviateTime } from '../../../lib/utils/pretty_time';
-
-export default {
-  name: 'time-tracking-collapsed-state',
-  props: {
-    showComparisonState: {
-      type: Boolean,
-      required: true,
-    },
-    showSpentOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showEstimateOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showNoTimeTrackingState: {
-      type: Boolean,
-      required: true,
-    },
-    timeSpentHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    timeEstimateHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    timeSpent() {
-      return this.abbreviateTime(this.timeSpentHumanReadable);
-    },
-    timeEstimate() {
-      return this.abbreviateTime(this.timeEstimateHumanReadable);
-    },
-    divClass() {
-      if (this.showComparisonState) {
-        return 'compare';
-      } else if (this.showEstimateOnlyState) {
-        return 'estimate-only';
-      } else if (this.showSpentOnlyState) {
-        return 'spend-only';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-tracking';
-      }
-
-      return '';
-    },
-    spanClass() {
-      if (this.showComparisonState) {
-        return '';
-      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
-        return 'bold';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-value';
-      }
-
-      return '';
-    },
-    text() {
-      if (this.showComparisonState) {
-        return `${this.timeSpent} / ${this.timeEstimate}`;
-      } else if (this.showEstimateOnlyState) {
-        return `-- / ${this.timeEstimate}`;
-      } else if (this.showSpentOnlyState) {
-        return `${this.timeSpent} / --`;
-      } else if (this.showNoTimeTrackingState) {
-        return 'None';
-      }
-
-      return '';
-    },
-  },
-  methods: {
-    abbreviateTime(timeStr) {
-      return abbreviateTime(timeStr);
-    },
-  },
-  template: `
-    <div class="sidebar-collapsed-icon">
-      ${stopwatchSvg}
-      <div class="time-tracking-collapsed-summary">
-        <div :class="divClass">
-          <span :class="spanClass">
-            {{ text }}
-          </span>
-        </div>
-      </div>
-    </div>
-    `,
-};

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+  import { abbreviateTime } from '../../../lib/utils/pretty_time';
+
+  export default {
+    name: 'TimeTrackingCollapsedState',
+    components: {
+      icon,
+    },
+    props: {
+      showComparisonState: {
+        type: Boolean,
+        required: true,
+      },
+      showSpentOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showEstimateOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showNoTimeTrackingState: {
+        type: Boolean,
+        required: true,
+      },
+      timeSpentHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      timeEstimateHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      timeSpent() {
+        return this.abbreviateTime(this.timeSpentHumanReadable);
+      },
+      timeEstimate() {
+        return this.abbreviateTime(this.timeEstimateHumanReadable);
+      },
+      divClass() {
+        if (this.showComparisonState) {
+          return 'compare';
+        } else if (this.showEstimateOnlyState) {
+          return 'estimate-only';
+        } else if (this.showSpentOnlyState) {
+          return 'spend-only';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-tracking';
+        }
+
+        return '';
+      },
+      spanClass() {
+        if (this.showComparisonState) {
+          return '';
+        } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+          return 'bold';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-value';
+        }
+
+        return '';
+      },
+      text() {
+        if (this.showComparisonState) {
+          return `${this.timeSpent} / ${this.timeEstimate}`;
+        } else if (this.showEstimateOnlyState) {
+          return `-- / ${this.timeEstimate}`;
+        } else if (this.showSpentOnlyState) {
+          return `${this.timeSpent} / --`;
+        } else if (this.showNoTimeTrackingState) {
+          return 'None';
+        }
+
+        return '';
+      },
+    },
+    methods: {
+      abbreviateTime(timeStr) {
+        return abbreviateTime(timeStr);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="sidebar-collapsed-icon">
+    <icon name="timer" />
+    <div class="time-tracking-collapsed-summary">
+      <div :class="divClass">
+        <span :class="spanClass">
+          {{ text }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

 <script>
 import timeTrackingHelpState from './help_state';
-import timeTrackingCollapsedState from './collapsed_state';
+import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
 import timeTrackingEstimateOnlyPane from './estimate_only_pane';
@@ -11,7 +11,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'IssuableTimeTracker',
   components: {
-    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    TimeTrackingCollapsedState,
     'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,