Add latest changes from gitlab-org/gitlab@master

.gitlab/issue_templates/Security Release.md

@@ -12,23 +12,24 @@ Set the title to: `Security Release: 12.2.X, 12.1.X, and 12.0.X`
 
 ## Version issues:
 
-* 12.2.X: {release task link}
-* 12.1.X: {release task link}
-* 12.0.X: {release task link}
+12.2.X, 12.1.X, 12.0.X: {release task link}
 
 ## Issues in GitLab Security
 
-* {https://gitlab.com/gitlab-org/security/gitlab/issues/ link}
+To include your issue and merge requests in this Security Release, please mark
+your security issues as related to this release tracking issue. You can do this
+in the "Linked issues" section below this issue description.
 
-| Version | MR |
-|---------|----|
-| 12.2 | {https://gitlab.com/gitlab-org/security/gitlab/-/merge_requests link} |
-| 12.1 | {https://gitlab.com/gitlab-org/security/gitlab/-/merge_requests link} |
-| 12.0 | {https://gitlab.com/gitlab-org/security/gitlab/-/merge_requests link} |
-| master | {https://gitlab.com/gitlab-org/security/gitlab/-/merge_requests link} |
+:warning: If your security issues are not marked as related to this release
+tracking issue, their merge requests may not be included in the security
+release.
 
 ## Issues in Omnibus-GitLab
 
+Omnibus security fixes need to be added manually to this issue description
+using and below the following template:
+
+```markdown
 * {https://gitlab.com/gitlab-org/security/gitlab/issues/ link}
 
 | Version | MR |
@@ -37,6 +38,7 @@ Set the title to: `Security Release: 12.2.X, 12.1.X, and 12.0.X`
 | 12.1 | {https://dev.gitlab.org/gitlab/omnibus-gitlab/merge_requests/ link} |
 | 12.0 | {https://dev.gitlab.org/gitlab/omnibus-gitlab/merge_requests/ link} |
 | master | {https://dev.gitlab.org/gitlab/omnibus-gitlab/merge_requests/ link} |
+```
 
 ## QA
 {QA issue link}
@@ -49,5 +51,5 @@ GitLab.com: {https://gitlab.com/gitlab-com/www-gitlab-com/merge_requests/ link}
 ## Email notification
 {https://gitlab.com/gitlab-com/marketing/general/issues/ link}
 
-/label ~security
+/label ~security ~"upcoming security release"
 /confidential

app/assets/javascripts/boards/models/issue.js

@@ -26,36 +26,7 @@ class ListIssue {
   }
 
   refreshData(obj, defaultAvatar) {
-    this.id = obj.id;
-    this.iid = obj.iid;
-    this.title = obj.title;
-    this.confidential = obj.confidential;
-    this.dueDate = obj.due_date;
-    this.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
-    this.referencePath = obj.reference_path;
-    this.path = obj.real_path;
-    this.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint;
-    this.project_id = obj.project_id;
-    this.timeEstimate = obj.time_estimate;
-    this.assignableLabelsEndpoint = obj.assignable_labels_endpoint;
-    this.blocked = obj.blocked;
-
-    if (obj.project) {
-      this.project = new IssueProject(obj.project);
-    }
-
-    if (obj.milestone) {
-      this.milestone = new ListMilestone(obj.milestone);
-      this.milestone_id = obj.milestone.id;
-    }
-
-    if (obj.labels) {
-      this.labels = obj.labels.map(label => new ListLabel(label));
-    }
-
-    if (obj.assignees) {
-      this.assignees = obj.assignees.map(a => new ListAssignee(a, defaultAvatar));
-    }
+    boardsStore.refreshIssueData(this, obj, defaultAvatar);
   }
 
   addLabel(label) {

app/assets/javascripts/boards/stores/boards_store.js

@@ -12,6 +12,10 @@ import axios from '~/lib/utils/axios_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import eventHub from '../eventhub';
 import { ListType } from '../constants';
+import IssueProject from '../models/project';
+import ListLabel from '../models/label';
+import ListAssignee from '../models/assignee';
+import ListMilestone from '../models/milestone';
 
 const boardsStore = {
   disabled: false,
@@ -593,6 +597,38 @@ const boardsStore = {
   clearMultiSelect() {
     this.multiSelect.list = [];
   },
+  refreshIssueData(issue, obj, defaultAvatar) {
+    issue.id = obj.id;
+    issue.iid = obj.iid;
+    issue.title = obj.title;
+    issue.confidential = obj.confidential;
+    issue.dueDate = obj.due_date;
+    issue.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
+    issue.referencePath = obj.reference_path;
+    issue.path = obj.real_path;
+    issue.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint;
+    issue.project_id = obj.project_id;
+    issue.timeEstimate = obj.time_estimate;
+    issue.assignableLabelsEndpoint = obj.assignable_labels_endpoint;
+    issue.blocked = obj.blocked;
+
+    if (obj.project) {
+      issue.project = new IssueProject(obj.project);
+    }
+
+    if (obj.milestone) {
+      issue.milestone = new ListMilestone(obj.milestone);
+      issue.milestone_id = obj.milestone.id;
+    }
+
+    if (obj.labels) {
+      issue.labels = obj.labels.map(label => new ListLabel(label));
+    }
+
+    if (obj.assignees) {
+      issue.assignees = obj.assignees.map(a => new ListAssignee(a, defaultAvatar));
+    }
+  },
 };
 
 BoardsStoreEE.initEESpecific(boardsStore);

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

@@ -522,7 +522,7 @@ export default {
 
     <div v-if="!showEmptyState">
       <graph-group
-        v-for="(groupData, index) in dashboard.panel_groups"
+        v-for="(groupData, index) in dashboard.panelGroups"
         :key="`${groupData.group}.${groupData.priority}`"
         :name="groupData.group"
         :show-panels="showPanels"

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

@@ -28,10 +28,10 @@ export default {
     ...mapState('monitoringDashboard', ['dashboard']),
     ...mapGetters('monitoringDashboard', ['metricsWithData']),
     charts() {
-      if (!this.dashboard || !this.dashboard.panel_groups) {
+      if (!this.dashboard || !this.dashboard.panelGroups) {
         return [];
       }
-      const groupWithMetrics = this.dashboard.panel_groups.find(group =>
+      const groupWithMetrics = this.dashboard.panelGroups.find(group =>
         group.panels.find(chart => this.chartHasData(chart)),
       ) || { panels: [] };
 

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

@@ -51,9 +51,11 @@ export const requestMetricsDashboard = ({ commit }) => {
   commit(types.REQUEST_METRICS_DATA);
 };
 export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response, params }) => {
-  commit(types.SET_ALL_DASHBOARDS, response.all_dashboards);
-  commit(types.RECEIVE_METRICS_DATA_SUCCESS, response.dashboard);
-  commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(response.metrics_data));
+  const { all_dashboards, dashboard, metrics_data } = response;
+
+  commit(types.SET_ALL_DASHBOARDS, all_dashboards);
+  commit(types.RECEIVE_METRICS_DATA_SUCCESS, dashboard);
+  commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
 
   return dispatch('fetchPrometheusMetrics', params);
 };
@@ -149,16 +151,16 @@ export const fetchPrometheusMetric = ({ commit }, { metric, params }) => {
     step,
   };
 
-  commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metric_id });
+  commit(types.REQUEST_METRIC_RESULT, { metricId: metric.metricId });
 
-  return fetchPrometheusResult(metric.prometheus_endpoint_path, queryParams)
+  return fetchPrometheusResult(metric.prometheusEndpointPath, queryParams)
     .then(result => {
-      commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metric_id, result });
+      commit(types.RECEIVE_METRIC_RESULT_SUCCESS, { metricId: metric.metricId, result });
     })
     .catch(error => {
       Sentry.captureException(error);
 
-      commit(types.RECEIVE_METRIC_RESULT_FAILURE, { metricId: metric.metric_id, error });
+      commit(types.RECEIVE_METRIC_RESULT_FAILURE, { metricId: metric.metricId, error });
       // Continue to throw error so the dashboard can notify using createFlash
       throw error;
     });
@@ -168,7 +170,7 @@ export const fetchPrometheusMetrics = ({ state, commit, dispatch, getters }, par
   commit(types.REQUEST_METRICS_DATA);
 
   const promises = [];
-  state.dashboard.panel_groups.forEach(group => {
+  state.dashboard.panelGroups.forEach(group => {
     group.panels.forEach(panel => {
       panel.metrics.forEach(metric => {
         promises.push(dispatch('fetchPrometheusMetric', { metric, params }));

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

@@ -11,7 +11,7 @@ const metricsIdsInPanel = panel =>
  * states in all the metric in the dashboard or group.
  */
 export const getMetricStates = state => groupKey => {
-  let groups = state.dashboard.panel_groups;
+  let groups = state.dashboard.panelGroups;
   if (groupKey) {
     groups = groups.filter(group => group.key === groupKey);
   }
@@ -43,7 +43,7 @@ export const getMetricStates = state => groupKey => {
  * filtered by group key.
  */
 export const metricsWithData = state => groupKey => {
-  let groups = state.dashboard.panel_groups;
+  let groups = state.dashboard.panelGroups;
   if (groupKey) {
     groups = groups.filter(group => group.key === groupKey);
   }

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

 import Vue from 'vue';
 import pick from 'lodash/pick';
-import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
-import { normalizeMetric, normalizeQueryResult } from './utils';
+import { mapToDashboardViewModel, normalizeQueryResult } from './utils';
 import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
 import { metricStates } from '../constants';
 import httpStatusCodes from '~/lib/utils/http_status';
 
-const normalizePanelMetrics = (metrics, defaultLabel) =>
-  metrics.map(metric => ({
-    ...normalizeMetric(metric),
-    label: metric.label || defaultLabel,
-  }));
-
 /**
  * Locate and return a metric in the dashboard by its id
  * as generated by `uniqMetricsId()`.
@@ -21,10 +14,10 @@ const normalizePanelMetrics = (metrics, defaultLabel) =>
  */
 const findMetricInDashboard = (metricId, dashboard) => {
   let res = null;
-  dashboard.panel_groups.forEach(group => {
+  dashboard.panelGroups.forEach(group => {
     group.panels.forEach(panel => {
       panel.metrics.forEach(metric => {
-        if (metric.metric_id === metricId) {
+        if (metric.metricId === metricId) {
           res = metric;
         }
       });
@@ -86,27 +79,9 @@ export default {
     state.showEmptyState = true;
   },
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, dashboard) {
-    state.dashboard = {
-      ...dashboard,
-      panel_groups: dashboard.panel_groups.map((group, i) => {
-        const key = `${slugify(group.group || 'default')}-${i}`;
-        let { panels = [] } = group;
-
-        // each panel has metric information that needs to be normalized
-        panels = panels.map(panel => ({
-          ...panel,
-          metrics: normalizePanelMetrics(panel.metrics, panel.y_label),
-        }));
-
-        return {
-          ...group,
-          panels,
-          key,
-        };
-      }),
-    };
+    state.dashboard = mapToDashboardViewModel(dashboard);
 
-    if (!state.dashboard.panel_groups.length) {
+    if (!state.dashboard.panelGroups.length) {
       state.emptyState = 'noData';
     }
   },
@@ -206,7 +181,7 @@ export default {
     state.showErrorBanner = enabled;
   },
   [types.SET_PANEL_GROUP_METRICS](state, payload) {
-    const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
+    const panelGroup = state.dashboard.panelGroups.find(pg => payload.key === pg.key);
     panelGroup.panels = payload.panels;
   },
   [types.SET_ENVIRONMENTS_FILTER](state, searchTerm) {

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

@@ -15,7 +15,7 @@ export default () => ({
   showEmptyState: true,
   showErrorBanner: true,
   dashboard: {
-    panel_groups: [],
+    panelGroups: [],
   },
   allDashboards: [],
 

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

-import { omit } from 'lodash';
+import { slugify } from '~/lib/utils/text_utility';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
@@ -9,6 +9,13 @@ export const gqClient = createGqClient(
   },
 );
 
+/**
+ * Metrics loaded from project-defined dashboards do not have a metric_id.
+ * This method creates a unique ID combining metric_id and id, if either is present.
+ * This is hopefully a temporary solution until BE processes metrics before passing to fE
+ * @param {Object} metric - metric
+ * @returns {Object} - normalized metric with a uniqueID
+ */
 export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
 
 /**
@@ -41,22 +48,75 @@ export const parseEnvironmentsResponse = (response = [], projectPath) =>
   });
 
 /**
- * Metrics loaded from project-defined dashboards do not have a metric_id.
- * This method creates a unique ID combining metric_id and id, if either is present.
- * This is hopefully a temporary solution until BE processes metrics before passing to fE
- * @param {Object} metric - metric
- * @returns {Object} - normalized metric with a uniqueID
+ * Maps metrics to its view model
+ *
+ * This function difers from other in that is maps all
+ * non-define properties as-is to the object. This is not
+ * advisable as it could lead to unexpected side-effects.
+ *
+ * Related issue:
+ * https://gitlab.com/gitlab-org/gitlab/issues/207198
+ *
+ * @param {Array} metrics - Array of prometheus metrics
+ * @param {String} defaultLabel - Default label for metrics
+ * @returns {Object}
  */
+const mapToMetricsViewModel = (metrics, defaultLabel) =>
+  metrics.map(({ label, id, metric_id, query_range, prometheus_endpoint_path, ...metric }) => ({
+    label: label || defaultLabel,
+    queryRange: query_range,
+    prometheusEndpointPath: prometheus_endpoint_path,
+    metricId: uniqMetricsId({ metric_id, id }),
 
-export const normalizeMetric = (metric = {}) =>
-  omit(
-    {
+    // `metric_id` is used by embed.vue, keeping this duplicated.
+    // https://gitlab.com/gitlab-org/gitlab/issues/37492
+    metric_id: uniqMetricsId({ metric_id, id }),
     ...metric,
-      metric_id: uniqMetricsId(metric),
-      metricId: uniqMetricsId(metric),
-    },
-    'id',
-  );
+  }));
+
+/**
+ * Maps a metrics panel to its view model
+ *
+ * @param {Object} panel - Metrics panel
+ * @returns {Object}
+ */
+const mapToPanelViewModel = ({ title = '', type, y_label, metrics = [] }) => {
+  return {
+    title,
+    type,
+    y_label,
+    metrics: mapToMetricsViewModel(metrics, y_label),
+  };
+};
+
+/**
+ * Maps a metrics panel group to its view model
+ *
+ * @param {Object} panelGroup - Panel Group
+ * @returns {Object}
+ */
+const mapToPanelGroupViewModel = ({ group = '', panels = [] }, i) => {
+  return {
+    key: `${slugify(group || 'default')}-${i}`,
+    group,
+    panels: panels.map(mapToPanelViewModel),
+  };
+};
+
+/**
+ * Maps a dashboard json object to its view model
+ *
+ * @param {Object} dashboard - Dashboard object
+ * @param {String} dashboard.dashboard - Dashboard name object
+ * @param {Array} dashboard.panel_groups - Panel groups array
+ * @returns {Object}
+ */
+export const mapToDashboardViewModel = ({ dashboard = '', panel_groups = [] }) => {
+  return {
+    dashboard,
+    panelGroups: panel_groups.map(mapToPanelGroupViewModel),
+  };
+};
 
 export const normalizeQueryResult = timeSeries => {
   let normalizedResult = {};

app/assets/javascripts/monitoring/utils.js

@@ -7,7 +7,7 @@ import {
 
 /**
  * This method is used to validate if the graph data format for a chart component
- * that needs a time series as a response from a prometheus query (query_range) is
+ * that needs a time series as a response from a prometheus query (queryRange) is
  * of a valid format or not.
  * @param {Object} graphData  the graph data response from a prometheus request
  * @returns {boolean} whether the graphData format is correct

app/controllers/groups/registry/repositories_controller.rb

@@ -17,7 +17,7 @@ module Groups
             serializer = ContainerRepositoriesSerializer
               .new(current_user: current_user)
 
-            if Feature.enabled?(:vue_container_registry_explorer)
+            if Feature.enabled?(:vue_container_registry_explorer, group)
               render json: serializer.with_pagination(request, response)
                 .represent_read_only(@images)
             else

app/controllers/projects/registry/repositories_controller.rb

@@ -17,7 +17,7 @@ module Projects
             serializer = ContainerRepositoriesSerializer
               .new(project: project, current_user: current_user)
 
-            if Feature.enabled?(:vue_container_registry_explorer)
+            if Feature.enabled?(:vue_container_registry_explorer, project.group)
               render json: serializer.with_pagination(request, response).represent(@images)
             else
               render json: serializer.represent(@images)

app/views/projects/registry/repositories/index.html.haml

@@ -4,7 +4,7 @@
 %section
   .row.registry-placeholder.prepend-bottom-10
     .col-12
-      - if Feature.enabled?(:vue_container_registry_explorer, @project)
+      - if Feature.enabled?(:vue_container_registry_explorer, @project.group)
         #js-container-registry{ data: { endpoint: project_container_registry_index_path(@project),
           project_path: @project.full_path,
           "help_page_path" => help_page_path('user/packages/container_registry/index'),

changelogs/unreleased/207468-note-confidential-attribute.yml

+---
+title: Add confidential attribute to notes table
+merge_request:
+author:
+type: other

changelogs/unreleased/Remove-refreshData-function-logic-from-issue-js.yml

+---
+title: Moves refreshData from issue model to board store
+merge_request: 21409
+author: nuwe1
+type: other

db/migrate/20200222055543_add_confidential_to_note.rb

+# frozen_string_literal: true
+class AddConfidentialToNote < ActiveRecord::Migration[6.0]
+  include Gitlab::Database::MigrationHelpers
+
+  DOWNTIME = false
+
+  def change
+    with_lock_retries do
+      add_column :notes, :confidential, :boolean
+    end
+  end
+end

db/schema.rb

@@ -2806,6 +2806,7 @@ ActiveRecord::Schema.define(version: 2020_02_24_163804) do
     t.text "change_position"
     t.boolean "resolved_by_push"
     t.bigint "review_id"
+    t.boolean "confidential"
     t.index ["author_id"], name: "index_notes_on_author_id"
     t.index ["commit_id"], name: "index_notes_on_commit_id"
     t.index ["created_at"], name: "index_notes_on_created_at"

doc/development/serializing_data.md

@@ -20,7 +20,7 @@ alternative.
 ## Serialized Data Is Less Powerful
 
 When using a relational database you have the ability to query individual
-fields, change the schema, index data and so forth. When you use serialized data
+fields, change the schema, index data, and so forth. When you use serialized data
 all of that becomes either very difficult or downright impossible. While
 PostgreSQL does offer the ability to query JSON fields it is mostly meant for
 very specialized use cases, and not for more general use. If you use YAML in

doc/development/shell_commands.md

@@ -215,4 +215,4 @@ When importing, GitLab would execute the following command, passing the `import_
 git clone file://git:/tmp/lol
 ```
 
-Git would simply ignore the `git:` part, interpret the path as `file:///tmp/lol` and import the repository into the new project, in turn potentially giving the attacker access to any repository in the system, whether private or not.
+Git would simply ignore the `git:` part, interpret the path as `file:///tmp/lol`, and import the repository into the new project. This action could potentially give the attacker access to any repository in the system, whether private or not.

doc/user/project/integrations/prometheus.md

@@ -671,7 +671,7 @@ The sharing dialog within Grafana provides the link, as highlighted below.
 ![Grafana Direct Linked Rendered Image](img/grafana_live_embed.png)
 
 NOTE: **Note:**
-For this embed to display correctly, the Grafana instance must be available to the target user, either as a public dashboard or on the same network.
+For this embed to display correctly, the Grafana instance must be available to the target user, either as a public dashboard, or on the same network.
 
 Copy the link and add an image tag as [inline HTML](../../markdown.md#inline-html) in your Markdown. You may tweak the query parameters as required. For instance, removing the `&from=` and `&to=` parameters will give you a live chart. Here is example markup for a live chart from GitLab's public dashboard:
 

doc/user/project/issue_board.md

@@ -147,7 +147,7 @@ Create lists for each of your team members and quickly drag-and-drop issues onto
 ## Permissions
 
 [Reporters and up](../permissions.md) can use all the functionality of the
-Issue Board, that is, create or delete lists and drag issues from one list to another.
+Issue Board to create or delete lists, and drag issues from one list to another.
 
 ## GitLab Enterprise features for Issue Boards
 
@@ -373,7 +373,7 @@ window where you can see all the issues that do not belong to any list.
 
 Select one or more issues by clicking on the cards and then click **Add issues**
 to add them to the selected list. You can limit the issues you want to add to
-the list by filtering by author, assignee, milestone and label.
+the list by filtering by author, assignee, milestone, and label.
 
 ![Bulk adding issues to lists](img/issue_boards_add_issues_modal.png)
 
@@ -419,7 +419,7 @@ You should be able to use the filters on top of your Issue Board to show only
 the results you want. This is similar to the filtering used in the issue tracker
 since the metadata from the issues and labels are re-used in the Issue Board.
 
-You can filter by author, assignee, milestone and label.
+You can filter by author, assignee, milestone, and label.
 
 ### Creating workflows
 

doc/user/project/issues/index.md

@@ -6,7 +6,7 @@ Issues are the fundamental medium for collaborating on ideas and planning work i
 
 The GitLab issue tracker is an advanced tool for collaboratively developing ideas, solving problems, and planning work.
 
-Issues can allow you, your team, and your collaborators to share and discuss proposals
+Issues can allow you and your team to share and discuss proposals
 before, and during, their implementation. However, they can be used for a variety of
 other purposes, customized to your needs and workflow.
 

doc/user/project/merge_requests/index.md

@@ -48,7 +48,7 @@ about CI/CD pipelines, when present), followed by the discussion threads of the
 collaborating with that MR.
 
 MRs also contain navigation tabs from which you can see the discussion happening on the thread,
-the list of commits, the list of pipelines and jobs, the code changes and inline code reviews.
+the list of commits, the list of pipelines and jobs, the code changes, and inline code reviews.
 
 To get started, read the [introduction to merge requests](getting_started.md).
 

doc/user/project/milestones/burndown_charts.md

@@ -28,7 +28,7 @@ For an overview, check the video demonstration on [Mapping work versus time with
 
 ## Use cases
 
-Burndown Charts, in general, are used for tracking and analyzing the completion of
+Burndown Charts are generally used for tracking and analyzing the completion of
 a milestone. Therefore, their use cases are tied to the
 [use you are assigning your milestone to](index.md).
 

doc/user/project/pages/custom_domains_ssl_tls_certification/ssl_tls_concepts.md

@@ -27,7 +27,7 @@ they are static, hence we are not dealing with server-side scripts
 nor credit card transactions, then why do we need secure connections?
 
 Back in the 1990s, where HTTPS came out, [SSL](https://en.wikipedia.org/wiki/Transport_Layer_Security#SSL_1.0.2C_2.0_and_3.0) was considered a "special"
-security measure, necessary just for big companies, like banks and shoppings sites
+security measure, necessary just for big companies like banks and shopping sites
 with financial transactions.
 Now we have a different picture. [According to Josh Aas](https://letsencrypt.org/2015/10/29/phishing-and-malware.html), Executive Director at [ISRG](https://en.wikipedia.org/wiki/Internet_Security_Research_Group):
 

doc/user/project/pages/getting_started/new_or_existing_website.md

@@ -16,7 +16,7 @@ To do so, follow the steps below.
    click **New project**, and name it according to the
    [Pages domain names](../getting_started_part_one.md#gitlab-pages-default-domain-names).
 1. Clone it to your local computer, add your website
-   files to your project, add, commit and push to GitLab.
+   files to your project, add, commit, and push to GitLab.
    Alternatively, you can run `git init` in your local directory,
    add the remote URL:
    `git remote add origin git@gitlab.com:namespace/project-name.git`,

doc/user/project/pipelines/job_artifacts.md

@@ -50,7 +50,7 @@ For more examples on artifacts, follow the [artifacts reference in
 
 ## Browsing artifacts
 
-> - From GitLab 9.2, PDFs, images, videos and other formats can be previewed directly in the job artifacts browser without the need to download them.
+> - From GitLab 9.2, PDFs, images, videos, and other formats can be previewed directly in the job artifacts browser without the need to download them.
 > - Introduced in [GitLab 10.1][ce-14399], HTML files in a public project can be previewed directly in a new tab without the need to download them when [GitLab Pages](../../../administration/pages/index.md) is enabled. The same applies for textual formats (currently supported extensions: `.txt`, `.json`, and `.log`).
 > - Introduced in [GitLab 12.4][gitlab-16675], artifacts in private projects can be previewed when [GitLab Pages access control](../../../administration/pages/index.md#access-control) is enabled.
 

doc/user/project/pipelines/schedules.md

@@ -119,7 +119,7 @@ The next time a pipeline is scheduled, your credentials will be used.
 NOTE: **Note:**
 If the owner of a pipeline schedule doesn't have the ability to create pipelines
 on the target branch, the schedule will stop creating new pipelines. This can
-happen if, for example, the owner is blocked or removed from the project, or
+happen if the owner is blocked or removed from the project, or
 the target branch or tag is protected. In this case, someone with sufficient
 privileges must take ownership of the schedule.
 

doc/user/project/releases/index.md

@@ -13,7 +13,7 @@ assets output by your CI system to use them, not just the raw source
 code.
 
 GitLab's **Releases** are a way to track deliverables in your project. Consider them
-a snapshot in time of the source, build output, and other metadata or artifacts
+a snapshot in time of the source, build output, artifacts, and other metadata
 associated with a released version of your code.
 
 There are several ways to create a Release:

doc/user/project/repository/index.md

@@ -104,7 +104,7 @@ Some things to note about precedence:
 
 [Jupyter](https://jupyter.org/) Notebook (previously IPython Notebook) files are used for
 interactive computing in many fields and contain a complete record of the
-user's sessions and include code, narrative text, equations and rich output.
+user's sessions and include code, narrative text, equations, and rich output.
 
 [Read how to use Jupyter notebooks with GitLab.](jupyter_notebooks/index.md)
 

doc/user/project/repository/jupyter_notebooks/index.md

@@ -4,7 +4,7 @@
 
 [Jupyter](https://jupyter.org/) Notebook (previously IPython Notebook) files are used for
 interactive computing in many fields and contain a complete record of the
-user's sessions and include code, narrative text, equations and rich output.
+user's sessions and include code, narrative text, equations, and rich output.
 
 When added to a repository, Jupyter Notebooks with a `.ipynb` extension will be
 rendered to HTML when viewed.

doc/user/project/repository/x509_signed_commits/index.md

@@ -7,7 +7,7 @@ type: concepts, howto
 [x509](https://en.wikipedia.org/wiki/X.509) is a standard format for public key
 certificates issued by a public or private Public Key Infrastructure (PKI).
 Personal x509 certificates are used for authentication or signing purposes
-such as SMIME, but beside that, Git supports signing of commits and tags
+such as SMIME, but Git also supports signing of commits and tags
 with x509 certificates in a similar way as with [GPG](../gpg_signed_commits/index.md).
 The main difference is the trust anchor which is the PKI for x509 certificates
 instead of a web of trust with GPG.

doc/user/project/settings/index.md

@@ -115,7 +115,7 @@ no longer actively maintained. Projects that have been archived can also be
 unarchived. Only project Owners and Admin users have the
 [permissions](../../permissions.md#project-members-permissions) to archive a project.
 
-When a project is archived, the repository, issues, merge requests and all
+When a project is archived, the repository, issues, merge requests, and all
 other features are read-only. Archived projects are also hidden
 in project listings.
 

doc/user/project/web_ide/index.md

@@ -30,11 +30,11 @@ the Web IDE will make your direct editing even easier.
 The Web IDE currently provides:
 
 - Basic syntax colorization for a variety of programming, scripting and markup
-  languages such as XML, PHP, C#, C++, Markdown, Java, VB, Batch, Python, Ruby
+  languages such as XML, PHP, C#, C++, Markdown, Java, VB, Batch, Python, Ruby,
   and Objective-C.
 - IntelliSense and validation support (displaying errors and warnings, providing
   smart completions, formatting, and outlining) for some languages. For example:
-TypeScript, JavaScript, CSS, LESS, SCSS, JSON and HTML.
+  TypeScript, JavaScript, CSS, LESS, SCSS, JSON, and HTML.
 
 Because the Web IDE is based on the [Monaco Editor](https://microsoft.github.io/monaco-editor/),
 you can find a more complete list of supported languages in the

doc/user/project/wiki/index.md

@@ -38,7 +38,7 @@ automatically. For example, a title of `docs/my-page` will create a wiki
 page with a path `/wikis/docs/my-page`.
 
 Once you enter the page name, it's time to fill in its content. GitLab wikis
-support Markdown, RDoc, AsciiDoc and Org. For Markdown based pages, all the
+support Markdown, RDoc, AsciiDoc, and Org. For Markdown based pages, all the
 [Markdown features](../../markdown.md) are supported and for links there is
 some [wiki specific](../../markdown.md#wiki-specific-markdown) behavior.
 
@@ -121,7 +121,7 @@ The changes of a wiki page over time are recorded in the wiki's Git repository,
 and you can view them by clicking the **Page history** button.
 
 From the history page you can see the revision of the page (Git commit SHA), its
-author, the commit message, when it was last updated and the page markup format.
+author, the commit message, when it was last updated, and the page markup format.
 To see how a previous version of the page looked like, click on a revision
 number.
 

doc/user/search/index.md

@@ -119,7 +119,7 @@ Your [To-Do List](../todos.md#gitlab-to-do-list) can be searched by "to do" and
 You can [filter](../todos.md#filtering-your-to-do-list) them per project,
 author, type, and action. Also, you can sort them by
 [**Label priority**](../../user/project/labels.md#label-priority),
-**Last created** and **Oldest created**.
+**Last created**, and **Oldest created**.
 
 ## Projects
 

doc/user/shortcuts.md

@@ -34,7 +34,7 @@ These shortcuts are available in most areas of GitLab
 | <kbd>p</kbd> + <kbd>b</kbd>     | Show/hide the Performance Bar. |
 
 Additionally, the following shortcuts are available when editing text in text fields,
-for example comments, replies, or issue and merge request descriptions:
+for example comments, replies, issue descriptions, and merge request descriptions:
 
 | Keyboard Shortcut                                                      | Description |
 | ---------------------------------------------------------------------- | ----------- |

spec/controllers/groups/registry/repositories_controller_spec.rb

@@ -93,7 +93,7 @@ describe Groups::Registry::RepositoriesController do
 
     context 'with :vue_container_registry_explorer feature flag disabled' do
       before do
-        stub_feature_flags(vue_container_registry_explorer: false)
+        stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: group })
       end
 
       it 'has the correct response schema' do

spec/controllers/projects/registry/repositories_controller_spec.rb

@@ -88,7 +88,7 @@ describe Projects::Registry::RepositoriesController do
 
       context 'with :vue_container_registry_explorer feature flag disabled' do
         before do
-          stub_feature_flags(vue_container_registry_explorer: false)
+          stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: project.group })
           stub_container_registry_tags(repository: project.full_path,
                                        tags: %w[rc1 latest])
         end

spec/features/projects/container_registry_spec.rb

@@ -19,7 +19,7 @@ describe 'Container Registry', :js do
 
   describe 'Registry explorer is off' do
     before do
-      stub_feature_flags(vue_container_registry_explorer: false)
+      stub_feature_flags(vue_container_registry_explorer: { enabled: false, thing: project.group })
     end
 
     it 'has a page title set' do

spec/fixtures/api/schemas/environment.json

@@ -26,7 +26,6 @@
     "stop_path": { "type": "string" },
     "cancel_auto_stop_path": { "type": "string" },
     "folder_path": { "type": "string" },
-    "project_path": { "type": "string" },
     "created_at": { "type": "string", "format": "date-time" },
     "updated_at": { "type": "string", "format": "date-time" },
     "auto_stop_at": { "type": "string", "format": "date-time" },

spec/frontend/helpers/dom_shims/get_client_rects.js

@@ -8,14 +8,16 @@ function hasHiddenStyle(node) {
   return false;
 }
 
-function createDefaultClientRect() {
+function createDefaultClientRect(node) {
+  const { outerWidth: width, outerHeight: height } = node;
+
   return {
-    bottom: 0,
-    height: 0,
+    bottom: height,
+    height,
     left: 0,
-    right: 0,
+    right: width,
     top: 0,
-    width: 0,
+    width,
     x: 0,
     y: 0,
   };
@@ -46,5 +48,5 @@ window.Element.prototype.getClientRects = function getClientRects() {
     return [];
   }
 
-  return [createDefaultClientRect()];
+  return [createDefaultClientRect(node)];
 };

spec/frontend/helpers/dom_shims/index.js

@@ -2,3 +2,5 @@ import './element_scroll_into_view';
 import './get_client_rects';
 import './inner_text';
 import './window_scroll_to';
+import './scroll_by';
+import './size_properties';

spec/frontend/helpers/dom_shims/scroll_by.js

+window.scrollX = 0;
+window.scrollY = 0;
+
+window.scrollBy = (x, y) => {
+  window.scrollX += x;
+  window.scrollY += y;
+};

spec/frontend/helpers/dom_shims/size_properties.js

+const convertFromStyle = style => {
+  if (style.match(/[0-9](px|rem)/g)) {
+    return Number(style.replace(/[^0-9]/g, ''));
+  }
+
+  return 0;
+};
+
+Object.defineProperty(global.HTMLElement.prototype, 'offsetWidth', {
+  get() {
+    return convertFromStyle(this.style.width || '0px');
+  },
+});
+
+Object.defineProperty(global.HTMLElement.prototype, 'offsetHeight', {
+  get() {
+    return convertFromStyle(this.style.height || '0px');
+  },
+});

spec/frontend/lib/utils/mock_data.js

+export const faviconDataUrl =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACcFBMVEX////iQyniQyniQyniQyniQyniQyniQyniQynhRiriQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniRCniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQynhQiniQiniQiniQinhQinpUSjqUSjqTyjqTyjqTyjlSCniRCniQynjRCjqTyjsZSjrWyj8oib9kSb8pyb9pib8oyb8fyb3ZSb4Zib8fCb8oyb8oyb8oyb8pCb8cSbiQyn7bCb8cib8oyb8oSb8bSbtVSjpTij8nyb8oyb8oyb8lCb2Yyf3ZCf8mCb8oyb8oyb8oyb8iib8bSbiRCn8gyb8oyb8eCbpTinrUSj8oyb8oyb8oyb8pSb8bib4Zif0YCf8byb8oyb8oyb8oyb7oib8oyb8nCbjRSn9bib8ayb8nib8oyb8oyb8oyb8kSbpTyjpTyj8jib8oyb8oyb8oyb8fib0Xyf2ZSb8gCb8oyb6pSb8oyb8dib+cCbgQCnjRSn8cCb8oib8oyb8oyb8oybqUCjnSyn8bCb8oyb8oyb8oyb8myb2YyfyXyf8oyb8oyb8hibhQSn+bib8iSb8oyb8qCb+fSbmSSnqTyj8oib9pCb1YifxXyf7pSb8oCb8pCb+mCb0fCf8pSb7hSXvcSjiQyniQinqTyj9kCb9bib9byb+cCbqUSjiRCnsVCj+cSb8pib8bCb8bSbgQCn7bCb8bibjRSn8oyb8ayb8oib8aib8pCbjRCn8pybhQinhQSn8pSb7ayb7aSb6aib8eib///8IbM+7AAAAr3RSTlMBA3NtX2vT698HGQcRLwWLiXnv++3V+eEd/R8HE2V/Y5HjyefdFw99YWfJ+/3nwQP78/HvX1VTQ/kdA2HzbQXj9fX79/3DGf379/33T/v99/f7ba33+/f1+9/18/v59V339flzF/H9+fX3/fMhBwOh9/v5/fmvBV/z+fP3Awnp9/f38+UFgff7+/37+4c77/f7/flFz/f59dFr7/v98Wnr+/f3I5/197EDBU1ZAwUD8/kLUwAAAAFiS0dEAIgFHUgAAAAHdElNRQfhBQoLHiBV6/1lAAACHUlEQVQ4y41TZXsTQRCe4FAIUigN7m7FXY+iLRQKBG2x4g7BjhZ3Le7uMoEkFJprwyQk0CC/iZnNhUZaHt4vt6/szO7cHcD/wFKjZrJWq3YMq1M3eVc9rFzXR2yQkuA3RGxkjZLGiEk9miA2tURJs1RsnhhokYYtzaU13WZDbBVnW1sjo43J2vI6tZ0lLtFeAh1M0lECneI7dGYtrUtk3RUVIKaEJR25qw27yT0s3W0qEHuPlB4RradivXo7GX36xnbo51SQ+fWHARmCgYMGDxkaxbD3SssYPmIkwKgPLrfA87EETTg/fVaSa/SYsQDjSsd7DcGEsr+BieVKmaRNBsjUtClTfUI900y/5Mt05c8oJQKYSURZ2UqYFa0w283M588JEM2BuRwI5EqT8nmmXzZf4l8XsGNfCIv4QcHFklhiBpaqAsuC4tghj+ySyOdjeJYrP7RCCuR/E5tWAqxaLcmCNSyujdxjHZdbn8UHoA0bN/GoNm8hjQJb/ZzYpo6w3TB27JRduxxqrA7YzbWCezixN8RD2Oc2/Ptlfx7o5uT1A4XMiwzj4HfEikNe7+Ew0ZGjeuW70eEYaeHjxomTiKd++E4XnKGz8d+HDufOB3Ky3RcwdNF1qZiKLyf/B44r2tWf15wV143cwI2qfi8dbtKtX6Hbd+6G74EDqkTm/QcPH/0ufFyNLXjy9NnzF9Xb8BJevYY38C+8fZcg/AF3QTYemVkCwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wNS0xMFQxMTozMDozMiswMjowMMzup8UAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDUtMTBUMTE6MzA6MzIrMDI6MDC9sx95AAAAAElFTkSuQmCC';
+
+export const overlayDataUrl =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA85JREFUWAntVllIVGEUPv/9b46O41KplYN7PeRkti8TjQlhCUGh3MmeQugpIsGKAi2soIcIooiohxYKK2daqDAlIpIiWwxtQaJcaHE0d5tMrbn37z9XRqfR0TvVW56Hudf//uec72zfEWBCJjIwkYGJDPzvGSD/KgExN3Oi2Q+2DJgSDYQEMwItVGH1iZGmJw/Si1y+/PwVAMYYib22MYc/8hVQFgKDEfYoId0KYzagAQebsos/ewMZoeB9wdffcTYpQSaCTWHKoqSQaDk7zkIt0+aCUR8BelEHrf3dUNv9AcqbnsHtT5UKB/hTASh0SLYjnjb/CIDRJi0XiFAaJOpCD8zLpdb4NB66b1OfelthX815dtdRRfiti2aAXLvVLiMQ6olGyztGDkSo4JGGXk8/QFdGpYzpHG2GBQTDhtgVhPEaVbbVpvI6GJz22rv4TcAfrYI1x7Rj5MWWAppomKFVVb2302SFzUkZHAbkG+0b1+Gh77yNYjrmqnWTrLBLRxdvBWv8qlFujH/kYjJYyvLkj71t78zAUvzMAMnHhpN4zf9UREJhd8omyssxu1IgazQDwDnHUcNuH6vhPIE1fmuBzHt74Hn7W89jWGtcAjoaIDOFrdcMYJBkgOCoaRF0Lj0oglddDbCj6tRvKjphEpgjkzEQs2YAKsNxMzjn3nKurhzK+Ly7xe28ua8TwgMMcHJZnvvT0BPtEEKM4tDJ+C8GvIIk4ylINIXVZ0EUKJxYuh3mhCeokbudl6TtVc88dfBdLwbyaWB6zQCYQJpBYSrDGQxBQ/ZWRM2B+VNmQnVnHWx7elyNuL2/R336co7KyJR8CL9oLgEuFlREevWUkEl6uGwpVEG4FBm0OEf9N10NMgPlvWYAuNVwsWDKvcUNYsHUWTCZ13ysyFEXe6TO6aC8CUr9IiK+A05TQrc8yjwmxARHeeMAPlfQJw+AQRwu0YhL/GDXi9NwufG+S8dYkuYMqIb4SsWthotlNMOUCOM6r+G9cqXxPmd1dqrBav/o1zJy2l5/NUjJA/VORwYuFnOUaTQcPs9wMqwV++Xv8oADxKAcZ8nLPr8AoGW+xR6HSqYk3GodAz2QNj0V+Gr26dT9ASNH5239Pf0gktVNWZca8ZvfAFBprWS6hSu1pqt++Y0PD+WIwDAhIWQGtzvSHDbcodfFUFB9hg1Gjs5LXqIdFL+acFBl+FddqYwdxsWC3I70OvgfUaA65zhq2O2c8VxYcyIGFTVlXegYtvCXANCQZJMobjVcLMjtSK/IcEgyOOe8Ve5w7ryKDefp2P3+C/5ohv8HZmVLAAAAAElFTkSuQmCC';
+
+export const faviconWithOverlayDataUrl =
+  'data:image/png;base64,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';

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -12,6 +12,7 @@ import {
   deploymentData,
   metricsDashboardPayload,
   mockedQueryResultPayload,
+  metricsDashboardViewModel,
   mockProjectDir,
   mockHost,
 } from '../../mock_data';
@@ -65,7 +66,7 @@ describe('Time series component', () => {
       );
 
       // Pick the second panel group and the first panel in it
-      [mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
+      [mockGraphData] = store.state.monitoringDashboard.dashboard.panelGroups[0].panels;
     });
 
     describe('general functions', () => {
@@ -188,7 +189,7 @@ describe('Time series component', () => {
             });
 
             it('formats tooltip content', () => {
-              const name = 'Pod average';
+              const name = 'Total';
               const value = '5.556';
               const dataIndex = 0;
               const seriesLabel = timeSeriesChart.find(GlChartSeriesLabel);
@@ -439,7 +440,7 @@ describe('Time series component', () => {
           it('constructs a label for the chart y-axis', () => {
             const { yAxis } = getChartOptions();
 
-            expect(yAxis[0].name).toBe('Memory Used per Pod');
+            expect(yAxis[0].name).toBe('Total Memory Used');
           });
         });
       });
@@ -535,46 +536,22 @@ describe('Time series component', () => {
   });
 
   describe('with multiple time series', () => {
-    const mockedResultMultipleSeries = [];
-    const [, , panelData] = metricsDashboardPayload.panel_groups[1].panels;
-
-    for (let i = 0; i < panelData.metrics.length; i += 1) {
-      mockedResultMultipleSeries.push(cloneDeep(mockedQueryResultPayload));
-      mockedResultMultipleSeries[
-        i
-      ].metricId = `${panelData.metrics[i].metric_id}_${panelData.metrics[i].id}`;
-    }
-
-    beforeEach(() => {
-      setTestTimeout(1000);
+    describe('General functions', () => {
+      let timeSeriesChart;
 
+      beforeEach(done => {
         store = createStore();
-
-      store.commit(
-        `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
-        metricsDashboardPayload,
-      );
-
-      store.commit(`monitoringDashboard/${types.RECEIVE_DEPLOYMENTS_DATA_SUCCESS}`, deploymentData);
-
-      // Mock data contains the metric_id for a multiple time series panel
-      for (let i = 0; i < panelData.metrics.length; i += 1) {
-        store.commit(
-          `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`,
-          mockedResultMultipleSeries[i],
+        const graphData = cloneDeep(metricsDashboardViewModel.panelGroups[0].panels[3]);
+        graphData.metrics.forEach(metric =>
+          Object.assign(metric, { result: mockedQueryResultPayload.result }),
         );
-      }
 
-      // Pick the second panel group and the second panel in it
-      [, , mockGraphData] = store.state.monitoringDashboard.dashboard.panel_groups[1].panels;
+        timeSeriesChart = makeTimeSeriesChart(graphData, 'area-chart');
+        timeSeriesChart.vm.$nextTick(done);
       });
 
-    describe('General functions', () => {
-      let timeSeriesChart;
-
-      beforeEach(done => {
-        timeSeriesChart = makeTimeSeriesChart(mockGraphData, 'area-chart');
-        timeSeriesChart.vm.$nextTick(done);
+      afterEach(() => {
+        timeSeriesChart.destroy();
       });
 
       describe('computed', () => {

spec/frontend/monitoring/components/dashboard_spec.js

@@ -17,12 +17,13 @@ import { setupComponentStore, propsData } from '../init_utils';
 import {
   metricsDashboardPayload,
   mockedQueryResultPayload,
+  metricsDashboardViewModel,
   environmentData,
   dashboardGitResponse,
 } from '../mock_data';
 
 const localVue = createLocalVue();
-const expectedPanelCount = 3;
+const expectedPanelCount = 4;
 
 describe('Dashboard', () => {
   let store;
@@ -366,7 +367,7 @@ describe('Dashboard', () => {
 
         it('metrics can be swapped', () => {
           const firstDraggable = findDraggables().at(0);
-          const mockMetrics = [...metricsDashboardPayload.panel_groups[1].panels];
+          const mockMetrics = [...metricsDashboardViewModel.panelGroups[0].panels];
 
           const firstTitle = mockMetrics[0].title;
           const secondTitle = mockMetrics[1].title;
@@ -376,7 +377,7 @@ describe('Dashboard', () => {
           firstDraggable.vm.$emit('input', mockMetrics);
 
           return wrapper.vm.$nextTick(() => {
-            const { panels } = wrapper.vm.dashboard.panel_groups[1];
+            const { panels } = wrapper.vm.dashboard.panelGroups[0];
 
             expect(panels[1].title).toEqual(firstTitle);
             expect(panels[0].title).toEqual(secondTitle);

spec/frontend/monitoring/embed/embed_spec.js

@@ -69,8 +69,8 @@ describe('Embed', () => {
 
   describe('metrics are available', () => {
     beforeEach(() => {
-      store.state.monitoringDashboard.dashboard.panel_groups = groups;
-      store.state.monitoringDashboard.dashboard.panel_groups[0].panels = metricsData;
+      store.state.monitoringDashboard.dashboard.panelGroups = groups;
+      store.state.monitoringDashboard.dashboard.panelGroups[0].panels = metricsData;
 
       metricsWithDataGetter.mockReturnValue(metricsWithData);
 

spec/frontend/monitoring/mock_data.js

+import { mapToDashboardViewModel } from '~/monitoring/stores/utils';
+
 // This import path needs to be relative for now because this mock data is used in
 // Karma specs too, where the helpers/test_constants alias can not be resolved
 import { TEST_HOST } from '../helpers/test_constants';
@@ -246,7 +248,7 @@ export const mockedEmptyResult = {
 };
 
 export const mockedQueryResultPayload = {
-  metricId: '17_system_metrics_kubernetes_container_memory_average',
+  metricId: '12_system_metrics_kubernetes_container_memory_total',
   result: [
     {
       metric: {},
@@ -378,8 +380,7 @@ export const environmentData = [
   },
 ].concat(extraEnvironmentData);
 
-export const metricsDashboardResponse = {
-  dashboard: {
+export const metricsDashboardPayload = {
   dashboard: 'Environment metrics',
   priority: 1,
   panel_groups: [
@@ -436,83 +437,6 @@ export const metricsDashboardResponse = {
             },
           ],
         },
-        ],
-      },
-    ],
-  },
-  status: 'success',
-};
-
-export const metricsDashboardPayload = {
-  dashboard: 'Environment metrics',
-  panel_groups: [
-    {
-      group: 'Response metrics (NGINX Ingress VTS)',
-      priority: 10,
-      panels: [
-        {
-          metrics: [
-            {
-              id: 'response_metrics_nginx_ingress_throughput_status_code',
-              label: 'Status Code',
-              metric_id: 1,
-              prometheus_endpoint_path:
-                '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=sum%28rate%28nginx_upstream_responses_total%7Bupstream%3D~%22%25%7Bkube_namespace%7D-%25%7Bci_environment_slug%7D-.%2A%22%7D%5B2m%5D%29%29+by+%28status_code%29',
-              query_range:
-                'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[2m])) by (status_code)',
-              unit: 'req / sec',
-            },
-          ],
-          title: 'Throughput',
-          type: 'area-chart',
-          weight: 1,
-          y_label: 'Requests / Sec',
-        },
-      ],
-    },
-    {
-      group: 'System metrics (Kubernetes)',
-      priority: 5,
-      panels: [
-        {
-          title: 'Memory Usage (Pod average)',
-          type: 'area-chart',
-          y_label: 'Memory Used per Pod',
-          weight: 2,
-          metrics: [
-            {
-              id: 'system_metrics_kubernetes_container_memory_average',
-              query_range:
-                'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job) / count(avg(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) without (job)) /1024/1024',
-              label: 'Pod average',
-              unit: 'MB',
-              metric_id: 17,
-              prometheus_endpoint_path:
-                '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024',
-              appearance: {
-                line: {
-                  width: 2,
-                },
-              },
-            },
-          ],
-        },
-        {
-          title: 'Core Usage (Total)',
-          type: 'area-chart',
-          y_label: 'Total Cores',
-          weight: 3,
-          metrics: [
-            {
-              id: 'system_metrics_kubernetes_container_cores_total',
-              query_range:
-                'avg(sum(rate(container_cpu_usage_seconds_total{container_name!="POD",pod_name=~"^%{ci_environment_slug}-(.*)",namespace="%{kube_namespace}"}[15m])) by (job)) without (job)',
-              label: 'Total',
-              unit: 'cores',
-              metric_id: 13,
-            },
-          ],
-        },
         {
           title: 'memories',
           type: 'area-chart',
@@ -557,9 +481,45 @@ export const metricsDashboardPayload = {
         },
       ],
     },
+    {
+      group: 'Response metrics (NGINX Ingress VTS)',
+      priority: 10,
+      panels: [
+        {
+          metrics: [
+            {
+              id: 'response_metrics_nginx_ingress_throughput_status_code',
+              label: 'Status Code',
+              metric_id: 1,
+              prometheus_endpoint_path:
+                '/root/autodevops-deploy/environments/32/prometheus/api/v1/query_range?query=sum%28rate%28nginx_upstream_responses_total%7Bupstream%3D~%22%25%7Bkube_namespace%7D-%25%7Bci_environment_slug%7D-.%2A%22%7D%5B2m%5D%29%29+by+%28status_code%29',
+              query_range:
+                'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[2m])) by (status_code)',
+              unit: 'req / sec',
+            },
+          ],
+          title: 'Throughput',
+          type: 'area-chart',
+          weight: 1,
+          y_label: 'Requests / Sec',
+        },
       ],
+    },
+  ],
+};
+
+/**
+ * Mock of response of metrics_dashboard.json
+ */
+export const metricsDashboardResponse = {
+  all_dashboards: [],
+  dashboard: metricsDashboardPayload,
+  metrics_data: {},
+  status: 'success',
 };
 
+export const metricsDashboardViewModel = mapToDashboardViewModel(metricsDashboardPayload);
+
 const customDashboardsData = new Array(30).fill(null).map((_, idx) => ({
   default: false,
   display_name: `Custom Dashboard ${idx}`,

spec/frontend/monitoring/store/actions_spec.js

@@ -3,7 +3,7 @@ import testAction from 'helpers/vuex_action_helper';
 import Tracking from '~/tracking';
 import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
-import { backOff } from '~/lib/utils/common_utils';
+import * as commonUtils from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 
 import store from '~/monitoring/stores';
@@ -28,11 +28,10 @@ import {
   deploymentData,
   environmentData,
   metricsDashboardResponse,
-  metricsDashboardPayload,
+  metricsDashboardViewModel,
   dashboardGitResponse,
 } from '../mock_data';
 
-jest.mock('~/lib/utils/common_utils');
 jest.mock('~/flash');
 
 const resetStore = str => {
@@ -44,14 +43,17 @@ const resetStore = str => {
 };
 
 describe('Monitoring store actions', () => {
+  const { convertObjectPropsToCamelCase } = commonUtils;
+
   let mock;
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
     // Mock `backOff` function to remove exponential algorithm delay.
     jest.useFakeTimers();
 
-    backOff.mockImplementation(callback => {
+    jest.spyOn(commonUtils, 'backOff').mockImplementation(callback => {
       const q = new Promise((resolve, reject) => {
         const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
         const next = () => callback(next, stop);
@@ -69,7 +71,7 @@ describe('Monitoring store actions', () => {
     resetStore(store);
     mock.reset();
 
-    backOff.mockReset();
+    commonUtils.backOff.mockReset();
     createFlash.mockReset();
   });
 
@@ -115,7 +117,6 @@ describe('Monitoring store actions', () => {
 
     afterEach(() => {
       resetStore(store);
-      jest.restoreAllMocks();
     });
 
     it('setting SET_ENVIRONMENTS_FILTER should dispatch fetchEnvironmentsData', () => {
@@ -365,6 +366,7 @@ describe('Monitoring store actions', () => {
       );
       expect(commit).toHaveBeenCalledWith(
         types.RECEIVE_METRICS_DATA_SUCCESS,
+
         metricsDashboardResponse.dashboard,
       );
       expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetrics', params);
@@ -443,8 +445,11 @@ describe('Monitoring store actions', () => {
         .catch(done.fail);
     });
     it('dispatches fetchPrometheusMetric for each panel query', done => {
-      state.dashboard.panel_groups = metricsDashboardResponse.dashboard.panel_groups;
-      const [metric] = state.dashboard.panel_groups[0].panels[0].metrics;
+      state.dashboard.panelGroups = convertObjectPropsToCamelCase(
+        metricsDashboardResponse.dashboard.panel_groups,
+      );
+
+      const [metric] = state.dashboard.panelGroups[0].panels[0].metrics;
       const getters = {
         metricsWithData: () => [metric.id],
       };
@@ -473,16 +478,16 @@ describe('Monitoring store actions', () => {
     });
 
     it('dispatches fetchPrometheusMetric for each panel query, handles an error', done => {
-      state.dashboard.panel_groups = metricsDashboardResponse.dashboard.panel_groups;
-      const metric = state.dashboard.panel_groups[0].panels[0].metrics[0];
+      state.dashboard.panelGroups = metricsDashboardViewModel.panelGroups;
+      const metric = state.dashboard.panelGroups[0].panels[0].metrics[0];
 
-      // Mock having one out of three metrics failing
+      // Mock having one out of four metrics failing
       dispatch.mockRejectedValueOnce(new Error('Error fetching this metric'));
       dispatch.mockResolvedValue();
 
       fetchPrometheusMetrics({ state, commit, dispatch }, params)
         .then(() => {
-          expect(dispatch).toHaveBeenCalledTimes(3);
+          expect(dispatch).toHaveBeenCalledTimes(9); // one per metric
           expect(dispatch).toHaveBeenCalledWith('fetchPrometheusMetric', {
             metric,
             params,
@@ -508,7 +513,12 @@ describe('Monitoring store actions', () => {
     beforeEach(() => {
       state = storeState();
       [metric] = metricsDashboardResponse.dashboard.panel_groups[0].panels[0].metrics;
-      [data] = metricsDashboardPayload.panel_groups[0].panels[0].metrics;
+      metric = convertObjectPropsToCamelCase(metric, { deep: true });
+
+      data = {
+        metricId: metric.metricId,
+        result: [1582065167.353, 5, 1582065599.353],
+      };
     });
 
     it('commits result', done => {
@@ -522,13 +532,13 @@ describe('Monitoring store actions', () => {
           {
             type: types.REQUEST_METRIC_RESULT,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
             },
           },
           {
             type: types.RECEIVE_METRIC_RESULT_SUCCESS,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
               result: data.result,
             },
           },
@@ -556,13 +566,13 @@ describe('Monitoring store actions', () => {
           {
             type: types.REQUEST_METRIC_RESULT,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
             },
           },
           {
             type: types.RECEIVE_METRIC_RESULT_SUCCESS,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
               result: data.result,
             },
           },
@@ -592,13 +602,13 @@ describe('Monitoring store actions', () => {
           {
             type: types.REQUEST_METRIC_RESULT,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
             },
           },
           {
             type: types.RECEIVE_METRIC_RESULT_FAILURE,
             payload: {
-              metricId: metric.metric_id,
+              metricId: metric.metricId,
               error,
             },
           },

spec/frontend/monitoring/store/getters_spec.js

@@ -32,7 +32,7 @@ describe('Monitoring store Getters', () => {
     it('when dashboard has no panel groups, returns empty', () => {
       setupState({
         dashboard: {
-          panel_groups: [],
+          panelGroups: [],
         },
       });
 
@@ -43,10 +43,10 @@ describe('Monitoring store Getters', () => {
       let groups;
       beforeEach(() => {
         setupState({
-          dashboard: { panel_groups: [] },
+          dashboard: { panelGroups: [] },
         });
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
-        groups = state.dashboard.panel_groups;
+        groups = state.dashboard.panelGroups;
       });
 
       it('no loaded metric returns empty', () => {
@@ -84,8 +84,8 @@ describe('Monitoring store Getters', () => {
         expect(getMetricStates()).toEqual([metricStates.OK]);
 
         // Filtered by groups
-        expect(getMetricStates(state.dashboard.panel_groups[0].key)).toEqual([]);
-        expect(getMetricStates(state.dashboard.panel_groups[1].key)).toEqual([metricStates.OK]);
+        expect(getMetricStates(state.dashboard.panelGroups[0].key)).toEqual([metricStates.OK]);
+        expect(getMetricStates(state.dashboard.panelGroups[1].key)).toEqual([]);
       });
       it('on multiple metrics errors', () => {
         mutations[types.RECEIVE_METRICS_DATA_SUCCESS](state, metricsDashboardPayload);
@@ -94,10 +94,10 @@ describe('Monitoring store Getters', () => {
           metricId: groups[0].panels[0].metrics[0].metricId,
         });
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
-          metricId: groups[1].panels[0].metrics[0].metricId,
+          metricId: groups[0].panels[0].metrics[0].metricId,
         });
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
-          metricId: groups[1].panels[1].metrics[0].metricId,
+          metricId: groups[1].panels[0].metrics[0].metricId,
         });
 
         // Entire dashboard fails
@@ -113,18 +113,18 @@ describe('Monitoring store Getters', () => {
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
         // An error in 2 groups
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
-          metricId: groups[0].panels[0].metrics[0].metricId,
+          metricId: groups[0].panels[1].metrics[0].metricId,
         });
         mutations[types.RECEIVE_METRIC_RESULT_FAILURE](state, {
-          metricId: groups[1].panels[1].metrics[0].metricId,
+          metricId: groups[1].panels[0].metrics[0].metricId,
         });
 
         expect(getMetricStates()).toEqual([metricStates.OK, metricStates.UNKNOWN_ERROR]);
-        expect(getMetricStates(groups[0].key)).toEqual([metricStates.UNKNOWN_ERROR]);
-        expect(getMetricStates(groups[1].key)).toEqual([
+        expect(getMetricStates(groups[0].key)).toEqual([
           metricStates.OK,
           metricStates.UNKNOWN_ERROR,
         ]);
+        expect(getMetricStates(groups[1].key)).toEqual([metricStates.UNKNOWN_ERROR]);
       });
     });
   });
@@ -154,7 +154,7 @@ describe('Monitoring store Getters', () => {
     it('when dashboard has no panel groups, returns empty', () => {
       setupState({
         dashboard: {
-          panel_groups: [],
+          panelGroups: [],
         },
       });
 
@@ -164,7 +164,7 @@ describe('Monitoring store Getters', () => {
     describe('when the dashboard is set', () => {
       beforeEach(() => {
         setupState({
-          dashboard: { panel_groups: [] },
+          dashboard: { panelGroups: [] },
         });
       });
 
@@ -204,14 +204,14 @@ describe('Monitoring store Getters', () => {
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayload);
         mutations[types.RECEIVE_METRIC_RESULT_SUCCESS](state, mockedQueryResultPayloadCoresTotal);
 
-        // First group has no metrics
-        expect(metricsWithData(state.dashboard.panel_groups[0].key)).toEqual([]);
-
-        // Second group has metrics
-        expect(metricsWithData(state.dashboard.panel_groups[1].key)).toEqual([
+        // First group has metrics
+        expect(metricsWithData(state.dashboard.panelGroups[0].key)).toEqual([
           mockedQueryResultPayload.metricId,
           mockedQueryResultPayloadCoresTotal.metricId,
         ]);
+
+        // Second group has no metrics
+        expect(metricsWithData(state.dashboard.panelGroups[1].key)).toEqual([]);
       });
     });
   });

spec/frontend/monitoring/store/mutations_spec.js

@@ -4,12 +4,8 @@ import mutations from '~/monitoring/stores/mutations';
 import * as types from '~/monitoring/stores/mutation_types';
 import state from '~/monitoring/stores/state';
 import { metricStates } from '~/monitoring/constants';
-import {
-  metricsDashboardPayload,
-  deploymentData,
-  metricsDashboardResponse,
-  dashboardGitResponse,
-} from '../mock_data';
+
+import { metricsDashboardPayload, deploymentData, dashboardGitResponse } from '../mock_data';
 
 describe('Monitoring mutations', () => {
   let stateCopy;
@@ -17,27 +13,29 @@ describe('Monitoring mutations', () => {
   beforeEach(() => {
     stateCopy = state();
   });
+
   describe('RECEIVE_METRICS_DATA_SUCCESS', () => {
     let payload;
-    const getGroups = () => stateCopy.dashboard.panel_groups;
+    const getGroups = () => stateCopy.dashboard.panelGroups;
 
     beforeEach(() => {
-      stateCopy.dashboard.panel_groups = [];
+      stateCopy.dashboard.panelGroups = [];
       payload = metricsDashboardPayload;
     });
     it('adds a key to the group', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
       const groups = getGroups();
 
-      expect(groups[0].key).toBe('response-metrics-nginx-ingress-vts-0');
-      expect(groups[1].key).toBe('system-metrics-kubernetes-1');
+      expect(groups[0].key).toBe('system-metrics-kubernetes-0');
+      expect(groups[1].key).toBe('response-metrics-nginx-ingress-vts-1');
     });
     it('normalizes values', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
       const expectedLabel = 'Pod average';
-      const { label, query_range } = getGroups()[1].panels[0].metrics[0];
+
+      const { label, queryRange } = getGroups()[0].panels[2].metrics[0];
       expect(label).toEqual(expectedLabel);
-      expect(query_range.length).toBeGreaterThan(0);
+      expect(queryRange.length).toBeGreaterThan(0);
     });
     it('contains two groups, with panels with a metric each', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
@@ -47,13 +45,14 @@ describe('Monitoring mutations', () => {
       expect(groups).toBeDefined();
       expect(groups).toHaveLength(2);
 
-      expect(groups[0].panels).toHaveLength(1);
+      expect(groups[0].panels).toHaveLength(4);
       expect(groups[0].panels[0].metrics).toHaveLength(1);
+      expect(groups[0].panels[1].metrics).toHaveLength(1);
+      expect(groups[0].panels[2].metrics).toHaveLength(1);
+      expect(groups[0].panels[3].metrics).toHaveLength(5);
 
-      expect(groups[1].panels).toHaveLength(3);
+      expect(groups[1].panels).toHaveLength(1);
       expect(groups[1].panels[0].metrics).toHaveLength(1);
-      expect(groups[1].panels[1].metrics).toHaveLength(1);
-      expect(groups[1].panels[2].metrics).toHaveLength(5);
     });
     it('assigns metrics a metric id', () => {
       mutations[types.RECEIVE_METRICS_DATA_SUCCESS](stateCopy, payload);
@@ -61,10 +60,10 @@ describe('Monitoring mutations', () => {
       const groups = getGroups();
 
       expect(groups[0].panels[0].metrics[0].metricId).toEqual(
-        '1_response_metrics_nginx_ingress_throughput_status_code',
+        '12_system_metrics_kubernetes_container_memory_total',
       );
       expect(groups[1].panels[0].metrics[0].metricId).toEqual(
-        '17_system_metrics_kubernetes_container_memory_average',
+        '1_response_metrics_nginx_ingress_throughput_status_code',
       );
     });
   });
@@ -130,8 +129,8 @@ describe('Monitoring mutations', () => {
         values: [[0, 1], [1, 1], [1, 3]],
       },
     ];
-    const { dashboard } = metricsDashboardResponse;
-    const getMetric = () => stateCopy.dashboard.panel_groups[0].panels[0].metrics[0];
+    const dashboard = metricsDashboardPayload;
+    const getMetric = () => stateCopy.dashboard.panelGroups[0].panels[0].metrics[0];
 
     describe('REQUEST_METRIC_RESULT', () => {
       beforeEach(() => {

spec/frontend/monitoring/store/utils_spec.js

 import {
-  normalizeMetric,
   uniqMetricsId,
   parseEnvironmentsResponse,
   removeLeadingSlash,
+  mapToDashboardViewModel,
 } from '~/monitoring/stores/utils';
 
 const projectPath = 'gitlab-org/gitlab-test';
 
-describe('normalizeMetric', () => {
-  [
-    { args: [], expected: 'undefined_undefined' },
-    { args: [undefined], expected: 'undefined_undefined' },
-    { args: [{ id: 'something' }], expected: 'undefined_something' },
-    { args: [{ id: 45 }], expected: 'undefined_45' },
-    { args: [{ metric_id: 5 }], expected: '5_undefined' },
-    { args: [{ metric_id: 'something' }], expected: 'something_undefined' },
-    {
-      args: [{ metric_id: 5, id: 'system_metrics_kubernetes_container_memory_total' }],
-      expected: '5_system_metrics_kubernetes_container_memory_total',
-    },
-  ].forEach(({ args, expected }) => {
-    it(`normalizes metric to "${expected}" with args=${JSON.stringify(args)}`, () => {
-      expect(normalizeMetric(...args)).toEqual({ metric_id: expected, metricId: expected });
+describe('mapToDashboardViewModel', () => {
+  it('maps an empty dashboard', () => {
+    expect(mapToDashboardViewModel({})).toEqual({
+      dashboard: '',
+      panelGroups: [],
+    });
+  });
+
+  it('maps a simple dashboard', () => {
+    const response = {
+      dashboard: 'Dashboard Name',
+      panel_groups: [
+        {
+          group: 'Group 1',
+          panels: [
+            {
+              title: 'Title A',
+              type: 'chart-type',
+              y_label: 'Y Label A',
+              metrics: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    expect(mapToDashboardViewModel(response)).toEqual({
+      dashboard: 'Dashboard Name',
+      panelGroups: [
+        {
+          group: 'Group 1',
+          key: 'group-1-0',
+          panels: [
+            {
+              title: 'Title A',
+              type: 'chart-type',
+              y_label: 'Y Label A',
+              metrics: [],
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  describe('panel groups mapping', () => {
+    it('key', () => {
+      const response = {
+        dashboard: 'Dashboard Name',
+        panel_groups: [
+          {
+            group: 'Group A',
+          },
+          {
+            group: 'Group B',
+          },
+          {
+            group: '',
+            unsupported_property: 'This should be removed',
+          },
+        ],
+      };
+
+      expect(mapToDashboardViewModel(response).panelGroups).toEqual([
+        {
+          group: 'Group A',
+          key: 'group-a-0',
+          panels: [],
+        },
+        {
+          group: 'Group B',
+          key: 'group-b-1',
+          panels: [],
+        },
+        {
+          group: '',
+          key: 'default-2',
+          panels: [],
+        },
+      ]);
+    });
+  });
+
+  describe('metrics mapping', () => {
+    const defaultLabel = 'Panel Label';
+    const dashboardWithMetric = (metric, label = defaultLabel) => ({
+      panel_groups: [
+        {
+          panels: [
+            {
+              y_label: label,
+              metrics: [metric],
+            },
+          ],
+        },
+      ],
+    });
+
+    const getMappedMetric = dashboard => {
+      return mapToDashboardViewModel(dashboard).panelGroups[0].panels[0].metrics[0];
+    };
+
+    it('creates a metric', () => {
+      const dashboard = dashboardWithMetric({});
+
+      expect(getMappedMetric(dashboard)).toEqual({
+        label: expect.any(String),
+        metricId: expect.any(String),
+        metric_id: expect.any(String),
+      });
+    });
+
+    it('creates a metric with a correct ids', () => {
+      const dashboard = dashboardWithMetric({
+        id: 'http_responses',
+        metric_id: 1,
+      });
+
+      expect(getMappedMetric(dashboard)).toMatchObject({
+        metricId: '1_http_responses',
+        metric_id: '1_http_responses',
+      });
+    });
+
+    it('creates a metric with a default label', () => {
+      const dashboard = dashboardWithMetric({});
+
+      expect(getMappedMetric(dashboard)).toMatchObject({
+        label: defaultLabel,
+      });
+    });
+
+    it('creates a metric with an endpoint and query', () => {
+      const dashboard = dashboardWithMetric({
+        prometheus_endpoint_path: 'http://test',
+        query_range: 'http_responses',
+      });
+
+      expect(getMappedMetric(dashboard)).toMatchObject({
+        prometheusEndpointPath: 'http://test',
+        queryRange: 'http_responses',
+      });
+    });
+
+    it('creates a metric with an ad-hoc property', () => {
+      // This behavior is deprecated and should be removed
+      // https://gitlab.com/gitlab-org/gitlab/issues/207198
+
+      const dashboard = dashboardWithMetric({
+        x_label: 'Another label',
+        unkown_option: 'unkown_data',
+      });
+
+      expect(getMappedMetric(dashboard)).toMatchObject({
+        x_label: 'Another label',
+        unkown_option: 'unkown_data',
+      });
     });
   });
 });

spec/javascripts/lib/utils/browser_spec.js

+/**
+ * This file should only contain browser specific specs.
+ * If you need to add or update a spec, please see spec/frontend/lib/utils/*.js
+ * https://gitlab.com/gitlab-org/gitlab/issues/194242#note_292137135
+ * https://gitlab.com/groups/gitlab-org/-/epics/895#what-if-theres-a-karma-spec-which-is-simply-unmovable-to-jest-ie-it-is-dependent-on-a-running-browser-environment
+ */
+
+import MockAdapter from 'axios-mock-adapter';
+import { GlBreakpointInstance as breakpointInstance } from '@gitlab/ui/dist/utils';
+import axios from '~/lib/utils/axios_utils';
+import * as commonUtils from '~/lib/utils/common_utils';
+import { faviconDataUrl, overlayDataUrl, faviconWithOverlayDataUrl } from './mock_data';
+
+const PIXEL_TOLERANCE = 0.2;
+
+/**
+ * Loads a data URL as the src of an
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image|Image}
+ * and resolves to that Image once loaded.
+ *
+ * @param url
+ * @returns {Promise}
+ */
+const urlToImage = url =>
+  new Promise(resolve => {
+    const img = new Image();
+    img.onload = function() {
+      resolve(img);
+    };
+    img.src = url;
+  });
+
+describe('common_utils browser specific specs', () => {
+  describe('contentTop', () => {
+    it('does not add height for fileTitle or compareVersionsHeader if screen is too small', () => {
+      spyOn(breakpointInstance, 'isDesktop').and.returnValue(false);
+
+      setFixtures(`
+          <div class="diff-file file-title-flex-parent">
+            blah blah blah
+          </div>
+          <div class="mr-version-controls">
+            more blah blah blah
+          </div>
+        `);
+
+      expect(commonUtils.contentTop()).toBe(0);
+    });
+
+    it('adds height for fileTitle and compareVersionsHeader screen is large enough', () => {
+      spyOn(breakpointInstance, 'isDesktop').and.returnValue(true);
+
+      setFixtures(`
+          <div class="diff-file file-title-flex-parent">
+            blah blah blah
+          </div>
+          <div class="mr-version-controls">
+            more blah blah blah
+          </div>
+        `);
+
+      expect(commonUtils.contentTop()).toBe(18);
+    });
+  });
+
+  describe('createOverlayIcon', () => {
+    it('should return the favicon with the overlay', done => {
+      commonUtils
+        .createOverlayIcon(faviconDataUrl, overlayDataUrl)
+        .then(url => Promise.all([urlToImage(url), urlToImage(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
+
+  describe('setFaviconOverlay', () => {
+    beforeEach(() => {
+      const favicon = document.createElement('link');
+      favicon.setAttribute('id', 'favicon');
+      favicon.setAttribute('data-original-href', faviconDataUrl);
+      document.body.appendChild(favicon);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(document.getElementById('favicon'));
+    });
+
+    it('should set page favicon to provided favicon overlay', done => {
+      commonUtils
+        .setFaviconOverlay(overlayDataUrl)
+        .then(() => document.getElementById('favicon').getAttribute('href'))
+        .then(url => Promise.all([urlToImage(url), urlToImage(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
+
+  describe('setCiStatusFavicon', () => {
+    const BUILD_URL = `${gl.TEST_HOST}/frontend-fixtures/builds-project/-/jobs/1/status.json`;
+    let mock;
+
+    beforeEach(() => {
+      const favicon = document.createElement('link');
+      favicon.setAttribute('id', 'favicon');
+      favicon.setAttribute('href', 'null');
+      favicon.setAttribute('data-original-href', faviconDataUrl);
+      document.body.appendChild(favicon);
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+      document.body.removeChild(document.getElementById('favicon'));
+    });
+
+    it('should reset favicon in case of error', done => {
+      mock.onGet(BUILD_URL).replyOnce(500);
+
+      commonUtils.setCiStatusFavicon(BUILD_URL).catch(() => {
+        const favicon = document.getElementById('favicon');
+
+        expect(favicon.getAttribute('href')).toEqual(faviconDataUrl);
+        done();
+      });
+    });
+
+    it('should set page favicon to CI status favicon based on provided status', done => {
+      mock.onGet(BUILD_URL).reply(200, {
+        favicon: overlayDataUrl,
+      });
+
+      commonUtils
+        .setCiStatusFavicon(BUILD_URL)
+        .then(() => document.getElementById('favicon').getAttribute('href'))
+        .then(url => Promise.all([urlToImage(url), urlToImage(faviconWithOverlayDataUrl)]))
+        .then(([actual, expected]) => {
+          expect(actual).toImageDiffEqual(expected, PIXEL_TOLERANCE);
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
+
+  describe('isInViewport', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    afterEach(() => {
+      document.body.removeChild(el);
+    });
+
+    it('returns true when provided `el` is in viewport', () => {
+      el.setAttribute('style', `position: absolute; right: ${window.innerWidth + 0.2};`);
+      document.body.appendChild(el);
+
+      expect(commonUtils.isInViewport(el)).toBe(true);
+    });
+
+    it('returns false when provided `el` is not in viewport', () => {
+      el.setAttribute('style', 'position: absolute; top: -1000px; left: -1000px;');
+      document.body.appendChild(el);
+
+      expect(commonUtils.isInViewport(el)).toBe(false);
+    });
+  });
+});

spec/javascripts/lib/utils/mock_data.js

-export const faviconDataUrl =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACcFBMVEX////iQyniQyniQyniQyniQyniQyniQyniQynhRiriQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniRCniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQyniQynhQiniQiniQiniQinhQinpUSjqUSjqTyjqTyjqTyjlSCniRCniQynjRCjqTyjsZSjrWyj8oib9kSb8pyb9pib8oyb8fyb3ZSb4Zib8fCb8oyb8oyb8oyb8pCb8cSbiQyn7bCb8cib8oyb8oSb8bSbtVSjpTij8nyb8oyb8oyb8lCb2Yyf3ZCf8mCb8oyb8oyb8oyb8iib8bSbiRCn8gyb8oyb8eCbpTinrUSj8oyb8oyb8oyb8pSb8bib4Zif0YCf8byb8oyb8oyb8oyb7oib8oyb8nCbjRSn9bib8ayb8nib8oyb8oyb8oyb8kSbpTyjpTyj8jib8oyb8oyb8oyb8fib0Xyf2ZSb8gCb8oyb6pSb8oyb8dib+cCbgQCnjRSn8cCb8oib8oyb8oyb8oybqUCjnSyn8bCb8oyb8oyb8oyb8myb2YyfyXyf8oyb8oyb8hibhQSn+bib8iSb8oyb8qCb+fSbmSSnqTyj8oib9pCb1YifxXyf7pSb8oCb8pCb+mCb0fCf8pSb7hSXvcSjiQyniQinqTyj9kCb9bib9byb+cCbqUSjiRCnsVCj+cSb8pib8bCb8bSbgQCn7bCb8bibjRSn8oyb8ayb8oib8aib8pCbjRCn8pybhQinhQSn8pSb7ayb7aSb6aib8eib///8IbM+7AAAAr3RSTlMBA3NtX2vT698HGQcRLwWLiXnv++3V+eEd/R8HE2V/Y5HjyefdFw99YWfJ+/3nwQP78/HvX1VTQ/kdA2HzbQXj9fX79/3DGf379/33T/v99/f7ba33+/f1+9/18/v59V339flzF/H9+fX3/fMhBwOh9/v5/fmvBV/z+fP3Awnp9/f38+UFgff7+/37+4c77/f7/flFz/f59dFr7/v98Wnr+/f3I5/197EDBU1ZAwUD8/kLUwAAAAFiS0dEAIgFHUgAAAAHdElNRQfhBQoLHiBV6/1lAAACHUlEQVQ4y41TZXsTQRCe4FAIUigN7m7FXY+iLRQKBG2x4g7BjhZ3Le7uMoEkFJprwyQk0CC/iZnNhUZaHt4vt6/szO7cHcD/wFKjZrJWq3YMq1M3eVc9rFzXR2yQkuA3RGxkjZLGiEk9miA2tURJs1RsnhhokYYtzaU13WZDbBVnW1sjo43J2vI6tZ0lLtFeAh1M0lECneI7dGYtrUtk3RUVIKaEJR25qw27yT0s3W0qEHuPlB4RradivXo7GX36xnbo51SQ+fWHARmCgYMGDxkaxbD3SssYPmIkwKgPLrfA87EETTg/fVaSa/SYsQDjSsd7DcGEsr+BieVKmaRNBsjUtClTfUI900y/5Mt05c8oJQKYSURZ2UqYFa0w283M588JEM2BuRwI5EqT8nmmXzZf4l8XsGNfCIv4QcHFklhiBpaqAsuC4tghj+ySyOdjeJYrP7RCCuR/E5tWAqxaLcmCNSyujdxjHZdbn8UHoA0bN/GoNm8hjQJb/ZzYpo6w3TB27JRduxxqrA7YzbWCezixN8RD2Oc2/Ptlfx7o5uT1A4XMiwzj4HfEikNe7+Ew0ZGjeuW70eEYaeHjxomTiKd++E4XnKGz8d+HDufOB3Ky3RcwdNF1qZiKLyf/B44r2tWf15wV143cwI2qfi8dbtKtX6Hbd+6G74EDqkTm/QcPH/0ufFyNLXjy9NnzF9Xb8BJevYY38C+8fZcg/AF3QTYemVkCwwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wNS0xMFQxMTozMDozMiswMjowMMzup8UAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDUtMTBUMTE6MzA6MzIrMDI6MDC9sx95AAAAAElFTkSuQmCC';
-
-export const overlayDataUrl =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA85JREFUWAntVllIVGEUPv/9b46O41KplYN7PeRkti8TjQlhCUGh3MmeQugpIsGKAi2soIcIooiohxYKK2daqDAlIpIiWwxtQaJcaHE0d5tMrbn37z9XRqfR0TvVW56Hudf//uec72zfEWBCJjIwkYGJDPzvGSD/KgExN3Oi2Q+2DJgSDYQEMwItVGH1iZGmJw/Si1y+/PwVAMYYib22MYc/8hVQFgKDEfYoId0KYzagAQebsos/ewMZoeB9wdffcTYpQSaCTWHKoqSQaDk7zkIt0+aCUR8BelEHrf3dUNv9AcqbnsHtT5UKB/hTASh0SLYjnjb/CIDRJi0XiFAaJOpCD8zLpdb4NB66b1OfelthX815dtdRRfiti2aAXLvVLiMQ6olGyztGDkSo4JGGXk8/QFdGpYzpHG2GBQTDhtgVhPEaVbbVpvI6GJz22rv4TcAfrYI1x7Rj5MWWAppomKFVVb2302SFzUkZHAbkG+0b1+Gh77yNYjrmqnWTrLBLRxdvBWv8qlFujH/kYjJYyvLkj71t78zAUvzMAMnHhpN4zf9UREJhd8omyssxu1IgazQDwDnHUcNuH6vhPIE1fmuBzHt74Hn7W89jWGtcAjoaIDOFrdcMYJBkgOCoaRF0Lj0oglddDbCj6tRvKjphEpgjkzEQs2YAKsNxMzjn3nKurhzK+Ly7xe28ua8TwgMMcHJZnvvT0BPtEEKM4tDJ+C8GvIIk4ylINIXVZ0EUKJxYuh3mhCeokbudl6TtVc88dfBdLwbyaWB6zQCYQJpBYSrDGQxBQ/ZWRM2B+VNmQnVnHWx7elyNuL2/R336co7KyJR8CL9oLgEuFlREevWUkEl6uGwpVEG4FBm0OEf9N10NMgPlvWYAuNVwsWDKvcUNYsHUWTCZ13ysyFEXe6TO6aC8CUr9IiK+A05TQrc8yjwmxARHeeMAPlfQJw+AQRwu0YhL/GDXi9NwufG+S8dYkuYMqIb4SsWthotlNMOUCOM6r+G9cqXxPmd1dqrBav/o1zJy2l5/NUjJA/VORwYuFnOUaTQcPs9wMqwV++Xv8oADxKAcZ8nLPr8AoGW+xR6HSqYk3GodAz2QNj0V+Gr26dT9ASNH5239Pf0gktVNWZca8ZvfAFBprWS6hSu1pqt++Y0PD+WIwDAhIWQGtzvSHDbcodfFUFB9hg1Gjs5LXqIdFL+acFBl+FddqYwdxsWC3I70OvgfUaA65zhq2O2c8VxYcyIGFTVlXegYtvCXANCQZJMobjVcLMjtSK/IcEgyOOe8Ve5w7ryKDefp2P3+C/5ohv8HZmVLAAAAAElFTkSuQmCC';
-
-export const faviconWithOverlayDataUrl =
-  'data:image/png;base64,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';
+export * from '../../../frontend/lib/utils/mock_data.js';

spec/javascripts/monitoring/components/dashboard_resize_spec.js

@@ -112,7 +112,7 @@ describe('Dashboard', () => {
       setupComponentStore(component);
 
       return Vue.nextTick().then(() => {
-        [, promPanel] = component.$el.querySelectorAll('.prometheus-panel');
+        [promPanel] = component.$el.querySelectorAll('.prometheus-panel');
         promGroup = promPanel.querySelector('.prometheus-graph-group');
         panelToggle = promPanel.querySelector('.js-graph-group-toggle');
         chart = promGroup.querySelector('.position-relative svg');

spec/lib/gitlab/import_export/safe_model_attributes.yml

@@ -72,6 +72,7 @@ Note:
 - resolved_by_push
 - discussion_id
 - original_discussion_id
+- confidential
 LabelLink:
 - id
 - target_type