Add latest changes from gitlab-org/gitlab@master

Gemfile

@@ -332,7 +332,6 @@ group :metrics do
 end
 group :development do
-  gem 'listen', '~> 3.0'
   gem 'brakeman', '~> 4.2', require: false
   gem 'danger', '~> 6.0', require: false
@@ -487,3 +486,5 @@ gem 'liquid', '~> 4.0'
 # LRU cache
 gem 'lru_redux'
+
+gem 'erubi', '~> 1.9.0'

Gemfile.lock

@@ -1205,6 +1205,7 @@ DEPENDENCIES
   elasticsearch-rails (~> 6.1)
   email_reply_trimmer (~> 0.1)
   email_spec (~> 2.2.0)
+  erubi (~> 1.9.0)
   escape_utils (~> 1.1)
   factory_bot_rails (~> 5.1.0)
   faraday (~> 0.12)
@@ -1279,7 +1280,6 @@ DEPENDENCIES
   license_finder (~> 5.4)
   licensee (~> 8.9)
   liquid (~> 4.0)
-  listen (~> 3.0)
   lograge (~> 0.5)
   loofah (~> 2.2)
   lru_redux

app/assets/javascripts/merge_request.js

@@ -24,7 +24,7 @@ function MergeRequest(opts) {
   this.initCommitMessageListeners();
   this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
-  if ($('a.btn-close').length) {
+  if ($('.description.js-task-list-container').length) {
     this.taskList = new TaskList({
       dataType: 'merge_request',
       fieldName: 'description',

app/assets/javascripts/pages/projects/pipelines/charts/index.js

 import $ from 'jquery';
 import Chart from 'chart.js';
-import { barChartOptions, lineChartOptions } from '~/lib/utils/chart_utils';
+import { lineChartOptions } from '~/lib/utils/chart_utils';
+
+import initProjectPipelinesChartsApp from '~/projects/pipelines/charts/index';
 const SUCCESS_LINE_COLOR = '#1aaa55';
@@ -44,40 +46,13 @@ const buildChart = (chartScope, shouldAdjustFontSize) => {
   });
 };
-const buildBarChart = (chartTimesData, shouldAdjustFontSize) => {
-  const data = {
-    labels: chartTimesData.labels,
-    datasets: [
-      {
-        backgroundColor: 'rgba(220,220,220,0.5)',
-        borderColor: 'rgba(220,220,220,1)',
-        borderWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data: chartTimesData.values,
-      },
-    ],
-  };
-  return new Chart(
-    $('#build_timesChart')
-      .get(0)
-      .getContext('2d'),
-    {
-      type: 'bar',
-      data,
-      options: barChartOptions(shouldAdjustFontSize),
-    },
-  );
-};
-
 document.addEventListener('DOMContentLoaded', () => {
-  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
   const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
   // Scale fonts if window width lower than 768px (iPad portrait)
   const shouldAdjustFontSize = window.innerWidth < 768;
-  buildBarChart(chartTimesData, shouldAdjustFontSize);
-
   chartsData.forEach(scope => buildChart(scope, shouldAdjustFontSize));
 });
+
+document.addEventListener('DOMContentLoaded', initProjectPipelinesChartsApp);

app/assets/javascripts/projects/pipelines/charts/components/app.vue

+<script>
+import { GlColumnChart } from '@gitlab/ui/dist/charts';
+import StatisticsList from './statistics_list.vue';
+import {
+  CHART_CONTAINER_HEIGHT,
+  INNER_CHART_HEIGHT,
+  X_AXIS_LABEL_ROTATION,
+  X_AXIS_TITLE_OFFSET,
+} from '../constants';
+
+export default {
+  components: {
+    StatisticsList,
+    GlColumnChart,
+  },
+  props: {
+    counts: {
+      type: Object,
+      required: true,
+    },
+    timesChartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      timesChartTransformedData: {
+        full: this.mergeLabelsAndValues(this.timesChartData.labels, this.timesChartData.values),
+      },
+    };
+  },
+  methods: {
+    mergeLabelsAndValues(labels, values) {
+      return labels.map((label, index) => [label, values[index]]);
+    },
+  },
+  chartContainerHeight: CHART_CONTAINER_HEIGHT,
+  timesChartOptions: {
+    height: INNER_CHART_HEIGHT,
+    xAxis: {
+      axisLabel: {
+        rotate: X_AXIS_LABEL_ROTATION,
+      },
+      nameGap: X_AXIS_TITLE_OFFSET,
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <h4 class="my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
+    <div class="row">
+      <div class="col-md-6">
+        <statistics-list :counts="counts" />
+      </div>
+      <div class="col-md-6">
+        <strong>
+          {{ __('Duration for the last 30 commits') }}
+        </strong>
+        <gl-column-chart
+          :height="$options.chartContainerHeight"
+          :option="$options.timesChartOptions"
+          :data="timesChartTransformedData"
+          :y-axis-title="__('Minutes')"
+          :x-axis-title="__('Commit')"
+          x-axis-type="category"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/projects/pipelines/charts/components/statistics_list.vue

+<script>
+export default {
+  props: {
+    counts: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <ul>
+    <li>
+      <span>{{ s__('PipelineCharts|Total:') }}</span>
+      <strong>{{ n__('1 pipeline', '%d pipelines', counts.total) }}</strong>
+    </li>
+    <li>
+      <span>{{ s__('PipelineCharts|Successful:') }}</span>
+      <strong>{{ n__('1 pipeline', '%d pipelines', counts.success) }}</strong>
+    </li>
+    <li>
+      <span>{{ s__('PipelineCharts|Failed:') }}</span>
+      <strong>{{ n__('1 pipeline', '%d pipelines', counts.failed) }}</strong>
+    </li>
+    <li>
+      <span>{{ s__('PipelineCharts|Success ratio:') }}</span>
+      <strong>{{ counts.successRatio }}%</strong>
+    </li>
+  </ul>
+</template>

app/assets/javascripts/projects/pipelines/charts/constants.js

+export const CHART_CONTAINER_HEIGHT = 300;
+
+export const INNER_CHART_HEIGHT = 200;
+
+export const X_AXIS_LABEL_ROTATION = 45;
+
+export const X_AXIS_TITLE_OFFSET = 60;

app/assets/javascripts/projects/pipelines/charts/index.js

+import Vue from 'vue';
+import ProjectPipelinesCharts from './components/app.vue';
+
+export default () => {
+  const el = document.querySelector('#js-project-pipelines-charts-app');
+  const {
+    countsFailed,
+    countsSuccess,
+    countsTotal,
+    successRatio,
+    timesChartLabels,
+    timesChartValues,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'ProjectPipelinesChartsApp',
+    components: {
+      ProjectPipelinesCharts,
+    },
+    render: createElement =>
+      createElement(ProjectPipelinesCharts, {
+        props: {
+          counts: {
+            failed: countsFailed,
+            success: countsSuccess,
+            total: countsTotal,
+            successRatio,
+          },
+          timesChartData: {
+            labels: JSON.parse(timesChartLabels),
+            values: JSON.parse(timesChartValues),
+          },
+        },
+      }),
+  });
+};

app/assets/javascripts/serverless/components/functions.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 <template>
-  <section id="serverless-functions">
+  <section id="serverless-functions" class="flex-grow">
     <gl-loading-icon
       v-if="checkingInstalled"
       :size="2"

app/assets/stylesheets/pages/trials.scss

+/*
+* A CSS cross-browser fix for  Select2 failire to display HTML5 required warnings
+* MR link https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22716
+*/
+.gl-select2-html5-required-fix div.select2-container+select.select2 {
+  display: block !important;
+  width: 1px;
+  height: 1px;
+  z-index: -1;
+  opacity: 0;
+  margin: -3px auto 0;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+}

app/controllers/concerns/page_limiter.rb

@@ -63,6 +63,6 @@ module PageLimiter
       controller: params[:controller],
       action: params[:action],
       bot: dd.bot?
-    )
+    ).increment
   end
 end

app/models/prometheus_metric.rb

@@ -2,6 +2,7 @@
 class PrometheusMetric < ApplicationRecord
   belongs_to :project, validate: true, inverse_of: :prometheus_metrics
+  has_many :prometheus_alerts, inverse_of: :prometheus_metric
   enum group: PrometheusMetricEnums.groups
@@ -73,5 +74,3 @@ class PrometheusMetric < ApplicationRecord
     PrometheusMetricEnums.group_details.fetch(group.to_sym)
   end
 end
-
-PrometheusMetric.prepend_if_ee('EE::PrometheusMetric')

app/models/prometheus_metric_enums.rb

@@ -9,7 +9,8 @@ module PrometheusMetricEnums
       aws_elb: -3,
       nginx: -4,
       kubernetes: -5,
-      nginx_ingress: -6
+      nginx_ingress: -6,
+      cluster_health: -100
     }.merge(custom_groups).freeze
   end
@@ -54,6 +55,11 @@ module PrometheusMetricEnums
         group_title: _('System metrics (Kubernetes)'),
         required_metrics: %w(container_memory_usage_bytes container_cpu_usage_seconds_total),
         priority: 5
+      }.freeze,
+      cluster_health: {
+        group_title: _('Cluster Health'),
+        required_metrics: %w(container_memory_usage_bytes container_cpu_usage_seconds_total),
+        priority: 10
       }.freeze
     }.merge(custom_group_details).freeze
   end
@@ -76,5 +82,3 @@ module PrometheusMetricEnums
     }.freeze
   end
 end
-
-PrometheusMetricEnums.prepend_if_ee('EE::PrometheusMetricEnums')

app/presenters/release_presenter.rb

@@ -19,6 +19,12 @@ class ReleasePresenter < Gitlab::View::Presenter::Delegated
     project_tag_path(project, release.tag)
   end
+  def self_url
+    return unless ::Feature.enabled?(:release_show_page, project)
+
+    project_release_url(project, release)
+  end
+
   def merge_requests_url
     return unless release_mr_issue_urls_available?

app/views/projects/pipelines/charts.html.haml

 - page_title _('CI / CD Charts')
+#js-project-pipelines-charts-app{ data: { counts: @counts, success_ratio: success_ratio(@counts), times_chart: { labels: @charts[:pipeline_times].labels, values: @charts[:pipeline_times].pipeline_times } } }
+
 #charts.ci-charts
-  = render 'projects/pipelines/charts/overall'
   %hr
   = render 'projects/pipelines/charts/pipelines'

app/views/projects/pipelines/charts/_overall.haml

-%h4.mt-4.mb-4= s_("PipelineCharts|Overall statistics")
-.row
-  .col-md-6
-    = render 'projects/pipelines/charts/pipeline_statistics'
-  .col-md-6
-    = render 'projects/pipelines/charts/pipeline_times'

app/views/projects/pipelines/charts/_pipeline_statistics.haml

-%ul
-  %li
-    = s_("PipelineCharts|Total:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:total]) % @counts[:total]
-  %li
-    = s_("PipelineCharts|Successful:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:success]) % @counts[:success]
-  %li
-    = s_("PipelineCharts|Failed:")
-    %strong= n_("1 pipeline", "%d pipelines", @counts[:failed]) % @counts[:failed]
-  %li
-    = s_("PipelineCharts|Success ratio:")
-    %strong
-      #{success_ratio(@counts)}%

app/views/projects/pipelines/charts/_pipeline_times.haml

-%p.light
-  = _("Commit duration in minutes for last 30 commits")
-
-%div
-  %canvas#build_timesChart{ height: 200 }
-
--# haml-lint:disable InlineJavaScript
-%script#pipelinesTimesChartsData{ type: "application/json" }= { :labels => @charts[:pipeline_times].labels, :values => @charts[:pipeline_times].pipeline_times }.to_json.html_safe

app/views/projects/snippets/index.html.haml

 - page_title _("Snippets")
+- new_project_snippet_link = new_project_snippet_path(@project) if can?(current_user, :create_snippet, @project)
 - if @snippets.exists?
   - if current_user
@@ -6,10 +7,10 @@
       - include_private = @project.team.member?(current_user) || current_user.admin?
       = render partial: 'snippets/snippets_scope_menu', locals: { subject: @project, include_private: include_private }
-      - if can?(current_user, :create_snippet, @project)
+      - if new_project_snippet_link.present?
         .nav-controls
-          = link_to _("New snippet"), new_project_snippet_path(@project), class: "btn btn-success", title: _("New snippet")
+          = link_to _("New snippet"), new_project_snippet_link, class: "btn btn-success", title: _("New snippet")
   = render 'shared/snippets/list'
 - else
-  = render 'shared/empty_states/snippets', button_path: new_namespace_project_snippet_path(@project.namespace, @project)
+  = render 'shared/empty_states/snippets', button_path: new_project_snippet_link

app/views/shared/empty_states/_profile_tabs.html.haml

@@ -14,6 +14,7 @@
         - if secondary_button_link.present?
           = link_to secondary_button_label, secondary_button_link, class: 'btn btn-success btn-inverted'
-        = link_to primary_button_label, primary_button_link, class: 'btn btn-success'
+        - if primary_button_link.present?
+          = link_to primary_button_label, primary_button_link, class: 'btn btn-success'
       - else
         %h5= visitor_empty_message