Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/create_cluster/eks_cluster/components/create_eks_cluster.vue

@@ -12,11 +12,18 @@ export default {
       type: String,
       required: true,
     },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <eks-cluster-configuration-form
-    :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
-  />
+  <div class="js-create-eks-cluster">
+    <eks-cluster-configuration-form
+      :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
+      :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
+    />
+  </div>
 </template>

app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue

@@ -35,6 +35,10 @@ export default {
       type: String,
       required: true,
     },
+    kubernetesIntegrationHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
@@ -94,6 +98,20 @@ export default {
     securityGroupDropdownDisabled() {
       return !this.selectedVpc;
     },
+    kubernetesIntegrationHelpText() {
+      const escapedUrl = _.escape(this.kubernetesIntegrationHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.',
+        ),
+        {
+          link_start: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          link_end: '</a>',
+        },
+        false,
+      );
+    },
     roleDropdownHelpText() {
       return sprintf(
         s__(
@@ -212,6 +230,10 @@ export default {
 </script>
 <template>
   <form name="eks-cluster-configuration-form">
+    <h2>
+      {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
+    </h2>
+    <p v-html="kubernetesIntegrationHelpText"></p>
     <div class="form-group">
       <label class="label-bold" for="eks-cluster-name">{{
         s__('ClusterIntegration|Kubernetes cluster name')

app/assets/javascripts/create_cluster/eks_cluster/index.js

@@ -5,25 +5,22 @@ import createStore from './store';
 Vue.use(Vuex);
-export default () =>
-  new Vue({
-    el: '.js-create-eks-cluster-form-container',
+export default el => {
+  const { gitlabManagedClusterHelpPath, kubernetesIntegrationHelpPath } = el.dataset;
+
+  return new Vue({
+    el,
     store: createStore(),
     components: {
       CreateEksCluster,
     },
-    data() {
-      const { gitlabManagedClusterHelpPath } = document.querySelector(this.$options.el).dataset;
-
-      return {
-        gitlabManagedClusterHelpPath,
-      };
-    },
     render(createElement) {
       return createElement('create-eks-cluster', {
         props: {
-          gitlabManagedClusterHelpPath: this.gitlabManagedClusterHelpPath,
+          gitlabManagedClusterHelpPath,
+          kubernetesIntegrationHelpPath,
         },
       });
     },
   });
+};

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -4,6 +4,8 @@ import { GlEmptyState, GlButton, GlLink, GlLoadingIcon, GlTable } from '@gitlab/
 import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { __ } from '~/locale';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { trackViewInSentryOptions, trackClickErrorLinkToSentryOptions } from '../utils';
 export default {
   fields: [
@@ -21,6 +23,9 @@ export default {
     Icon,
     TimeAgo,
   },
+  directives: {
+    TrackEvent: TrackEventDirective,
+  },
   props: {
     indexPath: {
       type: String,
@@ -53,6 +58,8 @@ export default {
   },
   methods: {
     ...mapActions(['startPolling', 'restartPolling']),
+    trackViewInSentryOptions,
+    trackClickErrorLinkToSentryOptions,
   },
 };
 </script>
@@ -65,7 +72,13 @@ export default {
       </div>
       <div v-else>
         <div class="d-flex justify-content-end">
-          <gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank">
+          <gl-button
+            v-track-event="trackViewInSentryOptions(externalUrl)"
+            class="my-3 ml-auto"
+            variant="primary"
+            :href="externalUrl"
+            target="_blank"
+          >
             {{ __('View in Sentry') }}
             <icon name="external-link" class="flex-shrink-0" />
           </gl-button>
@@ -80,7 +93,12 @@ export default {
           </template>
           <template slot="error" slot-scope="errors">
             <div class="d-flex flex-column">
-              <gl-link :href="errors.item.externalUrl" class="d-flex text-dark" target="_blank">
+              <gl-link
+                v-track-event="trackClickErrorLinkToSentryOptions(errors.item.externalUrl)"
+                :href="errors.item.externalUrl"
+                class="d-flex text-dark"
+                target="_blank"
+              >
                 <strong class="text-truncate">{{ errors.item.title.trim() }}</strong>
                 <icon name="external-link" class="ml-1 flex-shrink-0" />
               </gl-link>

app/assets/javascripts/error_tracking/utils.js

+/* eslint-disable @gitlab/i18n/no-non-i18n-strings */
+
+/**
+ * Tracks snowplow event when user clicks View in Sentry btn
+ * @param {String}  externalUrl that will be send as a property for the event
+ */
+export const trackViewInSentryOptions = url => ({
+  category: 'Error Tracking',
+  action: 'click_view_in_sentry',
+  label: 'External Url',
+  property: url,
+});
+
+/**
+ * Tracks snowplow event when User clicks on error link to Sentry
+ * @param {String}  externalUrl that will be send as a property for the event
+ */
+export const trackClickErrorLinkToSentryOptions = url => ({
+  category: 'Error Tracking',
+  action: 'click_error_link_to_sentry',
+  label: 'Error Link',
+  property: url,
+});

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

@@ -21,7 +21,14 @@ import MonitorSingleStatChart from './charts/single_stat.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import { sidebarAnimationDuration, timeWindows } from '../constants';
-import { getTimeDiff, getTimeWindow } from '../utils';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+
+import {
+  getTimeDiff,
+  getTimeWindow,
+  downloadCSVOptions,
+  generateLinkToChartOptions,
+} from '../utils';
 let sidebarMutationObserver;
@@ -43,6 +50,7 @@ export default {
   directives: {
     GlModal: GlModalDirective,
     GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
   },
   props: {
     externalDashboardUrl: {
@@ -322,6 +330,8 @@ export default {
     groupHasData(group) {
       return this.chartsWithData(group.metrics).length > 0;
     },
+    downloadCSVOptions,
+    generateLinkToChartOptions,
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
@@ -552,10 +562,19 @@ export default {
                 <template slot="button-content">
                   <icon name="ellipsis_v" class="text-secondary" />
                 </template>
-                <gl-dropdown-item :href="downloadCsv(graphData)" download="chart_metrics.csv">
+                <gl-dropdown-item
+                  v-track-event="downloadCSVOptions(graphData.title)"
+                  :href="downloadCsv(graphData)"
+                  download="chart_metrics.csv"
+                >
                   {{ __('Download CSV') }}
                 </gl-dropdown-item>
                 <gl-dropdown-item
+                  v-track-event="
+                    generateLinkToChartOptions(
+                      generateLink(groupData.group, graphData.title, graphData.y_label),
+                    )
+                  "
                   class="js-chart-link"
                   :data-clipboard-text="
                     generateLink(groupData.group, graphData.title, graphData.y_label)

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

@@ -13,6 +13,8 @@ import Icon from '~/vue_shared/components/icon.vue';
 import MonitorTimeSeriesChart from './charts/time_series.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
 import MonitorEmptyChart from './charts/empty_chart.vue';
+import TrackEventDirective from '~/vue_shared/directives/track_event';
+import { downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 export default {
   components: {
@@ -27,6 +29,7 @@ export default {
   directives: {
     GlModal: GlModalDirective,
     GlTooltip: GlTooltipDirective,
+    TrackEvent: TrackEventDirective,
   },
   props: {
     clipboardText: {
@@ -84,6 +87,8 @@ export default {
     showToast() {
       this.$toast.show(__('Link copied'));
     },
+    downloadCSVOptions,
+    generateLinkToChartOptions,
   },
 };
 </script>
@@ -121,13 +126,18 @@ export default {
         <template slot="button-content">
           <icon name="ellipsis_v" class="text-secondary" />
         </template>
-        <gl-dropdown-item :href="downloadCsv" download="chart_metrics.csv">
+        <gl-dropdown-item
+          v-track-event="downloadCSVOptions(graphData.title)"
+          :href="downloadCsv"
+          download="chart_metrics.csv"
+        >
           {{ __('Download CSV') }}
         </gl-dropdown-item>
         <gl-dropdown-item
+          v-track-event="generateLinkToChartOptions(clipboardText)"
           class="js-chart-link"
           :data-clipboard-text="clipboardText"
-          @click="showToast"
+          @click="showToast(clipboardText)"
         >
           {{ __('Generate link to chart') }}
         </gl-dropdown-item>

app/assets/javascripts/monitoring/utils.js

@@ -45,4 +45,47 @@ export const graphDataValidatorForValues = (isValues, graphData) => {
   );
 };
+/* eslint-disable @gitlab/i18n/no-non-i18n-strings */
+/**
+ * Checks that element that triggered event is located on cluster health check dashboard
+ * @param {HTMLElement}  element to check against
+ * @returns {boolean}
+ */
+const isClusterHealthBoard = () => (document.body.dataset.page || '').includes(':clusters:show');
+
+/**
+ * Tracks snowplow event when user generates link to metric chart
+ * @param {String}  chart link that will be sent as a property for the event
+ * @return {Object} config object for event tracking
+ */
+export const generateLinkToChartOptions = chartLink => {
+  const isCLusterHealthBoard = isClusterHealthBoard();
+
+  const category = isCLusterHealthBoard
+    ? 'Cluster Monitoring'
+    : 'Incident Management::Embedded metrics';
+  const action = isCLusterHealthBoard
+    ? 'generate_link_to_cluster_metric_chart'
+    : 'generate_link_to_metrics_chart';
+
+  return { category, action, label: 'Chart link', property: chartLink };
+};
+
+/**
+ * Tracks snowplow event when user downloads CSV of cluster metric
+ * @param {String}  chart title that will be sent as a property for the event
+ */
+export const downloadCSVOptions = title => {
+  const isCLusterHealthBoard = isClusterHealthBoard();
+
+  const category = isCLusterHealthBoard
+    ? 'Cluster Monitoring'
+    : 'Incident Management::Embedded metrics';
+  const action = isCLusterHealthBoard
+    ? 'download_csv_of_cluster_metric_chart'
+    : 'download_csv_of_metrics_dashboard_chart';
+
+  return { category, action, label: 'Chart title', property: title };
+};
+
 export default {};

app/assets/javascripts/pages/projects/clusters/new/index.js

 document.addEventListener('DOMContentLoaded', () => {
   if (gon.features.createEksClusters) {
     import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
-      .then(({ default: initCreateEKSCluster }) => initCreateEKSCluster())
+      .then(({ default: initCreateEKSCluster }) => {
+        const el = document.querySelector('.js-create-eks-cluster-form-container');
+
+        if (el) {
+          initCreateEKSCluster(el);
+        }
+      })
       .catch(() => {});
   }
 });

app/assets/javascripts/vue_shared/directives/track_event.js

+import Tracking from '~/tracking';
+
+export default {
+  bind(el, binding) {
+    el.dataset.trackingOptions = JSON.stringify(binding.value || {});
+
+    el.addEventListener('click', () => {
+      const { category, action, label, property, value } = JSON.parse(el.dataset.trackingOptions);
+      if (!category || !action) {
+        return;
+      }
+      Tracking.event(category, action, { label, property, value });
+    });
+  },
+  update(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      el.dataset.trackingOptions = JSON.stringify(binding.value || {});
+    }
+  },
+};

app/controllers/projects/settings/operations_controller.rb

@@ -13,9 +13,14 @@ module Projects
       def update
         result = ::Projects::Operations::UpdateService.new(project, current_user, update_params).execute
+        track_events(result)
         render_update_response(result)
       end
+      # overridden in EE
+      def track_events(result)
+      end
+
       private
       # overridden in EE

app/services/issues/zoom_link_service.rb

@@ -10,6 +10,7 @@ module Issues
     def add_link(link)
       if can_add_link? && (link = parse_link(link))
+        track_meeting_added_event
         success(_('Zoom meeting added'), append_to_description(link))
       else
         error(_('Failed to add a Zoom meeting'))
@@ -22,6 +23,7 @@ module Issues
     def remove_link
       if can_remove_link?
+        track_meeting_removed_event
         success(_('Zoom meeting removed'), remove_from_description)
       else
         error(_('Failed to remove a Zoom meeting'))
@@ -44,6 +46,14 @@ module Issues
       issue.description || ''
     end
+    def track_meeting_added_event
+      ::Gitlab::Tracking.event('IncidentManagement::ZoomIntegration', 'add_zoom_meeting', label: 'Issue ID', value: issue.id)
+    end
+
+    def track_meeting_removed_event
+      ::Gitlab::Tracking.event('IncidentManagement::ZoomIntegration', 'remove_zoom_meeting', label: 'Issue ID', value: issue.id)
+    end
+
     def success(message, description)
       ServiceResponse
         .success(message: message, payload: { description: description })

app/views/clusters/clusters/cloud_providers/_cloud_provider_button.html.haml

@@ -3,6 +3,6 @@
 - label = local_assigns.fetch(:label)
 = link_to clusterable.new_path(provider: provider), class: 'btn gl-button btn-outline flex-fill d-inline-flex flex-column mr-3 justify-content-center align-items-center' do
-  = image_tag logo_path, alt: label, class: 'gl-w-13 gl-h-13'
+  .svg-content= image_tag logo_path, alt: label, class: 'gl-w-13 gl-h-13'
   %span
     = label

app/views/clusters/clusters/cloud_providers/_cloud_provider_selector.html.haml

@@ -6,6 +6,6 @@
     = create_cluster_label
   .d-flex
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'gke', label: gke_label, logo_path: '' }
+      locals: { provider: 'eks', label: eks_label, logo_path: 'illustrations/logos/amazon_eks.svg' }
     = render partial: 'clusters/clusters/cloud_providers/cloud_provider_button',
-      locals: { provider: 'eks', label: eks_label, logo_path: '' }
+      locals: { provider: 'gke', label: gke_label, logo_path: 'illustrations/logos/google_gke.svg' }

app/views/clusters/clusters/eks/_index.html.haml

-.js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters') } }
+.js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters'),
+'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index') } }

app/views/clusters/clusters/gcp/_form.html.haml

@@ -3,13 +3,12 @@
 - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
 - machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
 - pricing_link_url = 'https://cloud.google.com/compute/pricing#machinetype'
+- kubernetes_integration_url = help_page_path('user/project/clusters/index')
 - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
 - help_link_end = ' %{external_link_icon}</a>'.html_safe % { external_link_icon: external_link_icon }
 %p
-  - link_to_help_page = link_to(s_('ClusterIntegration|help page'),
-    help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
-  = s_('ClusterIntegration|Read our %{link_to_help_page} on Kubernetes cluster integration.').html_safe % { link_to_help_page: link_to_help_page }
+  = s_('ClusterIntegration|Read our %{link_start}help page%{link_end} on Kubernetes cluster integration.').html_safe % { link_start: help_link_start % { url: kubernetes_integration_url }, link_end: '</a>'.html_safe }
 %p= link_to('Select a different Google account', @authorize_url)

app/views/clusters/clusters/gcp/_gcp_not_configured.html.haml

+- documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/google") }
+- link_end = '<a/>'.html_safe
+= s_('Google authentication is not %{link_start}property configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: link_end }

app/views/clusters/clusters/gcp/_signin_with_google_button.html.haml

+.signin-with-google
+  - create_account_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://accounts.google.com/SignUpWithoutGmail?service=cloudconsole&continue=https%3A%2F%2Fconsole.cloud.google.com%2Ffreetrial%3Futm_campaign%3D2018_cpanel%26utm_source%3Dgitlab%26utm_medium%3Dreferral' }
+  = link_to(image_tag('auth_buttons/signin_with_google.png', width: '191px', alt: _('Sign in with Google')), @authorize_url)
+  = s_('or %{link_start}create a new Google account%{link_end}').html_safe % { link_start: create_account_link, link_end: '</a>'.html_safe }

app/views/clusters/clusters/new.html.haml

@@ -2,7 +2,9 @@
 - page_title _('Kubernetes Cluster')
 - create_eks_enabled = Feature.enabled?(:create_eks_clusters)
 - active_tab = local_assigns.fetch(:active_tab, 'create')
-- link_end = '<a/>'.html_safe
+- create_on_gke_tab_label = s_('ClusterIntegration|Create new Cluster on GKE')
+- create_on_eks_tab_label = s_('ClusterIntegration|Create new Cluster on EKS')
+- create_new_cluster_label = s_('ClusterIntegration|Create new Cluster')
 = javascript_include_tag 'https://apis.google.com/js/api.js'
 = render_gcp_signup_offer
@@ -14,7 +16,16 @@
     %ul.nav-links.nav-tabs.gitlab-tabs.nav{ role: 'tablist' }
       %li.nav-item{ role: 'presentation' }
         %a.nav-link{ href: '#create-cluster-pane', id: 'create-cluster-tab', class: active_when(active_tab == 'create'), data: { toggle: 'tab' }, role: 'tab' }
-          %span Create new Cluster on GKE
+          %span
+            - if create_eks_enabled
+              - if @gke_selected
+                = create_on_gke_tab_label
+              - elsif @eks_selected
+                = create_on_eks_tab_label
+              - else
+                = create_new_cluster_label
+            - else
+              = create_on_gke_tab_label
       %li.nav-item{ role: 'presentation' }
         %a.nav-link{ href: '#add-cluster-pane', id: 'add-cluster-tab', class: active_when(active_tab == 'add'), data: { toggle: 'tab' }, role: 'tab' }
           %span Add existing cluster
@@ -22,9 +33,14 @@
     .tab-content.gitlab-tab-content
       - if create_eks_enabled
         .tab-pane{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
-          - if @gke_selected && @valid_gcp_token
+          - if @gke_selected
             = render 'clusters/clusters/gcp/header'
-            = render 'clusters/clusters/gcp/form'
+            - if @valid_gcp_token
+              = render 'clusters/clusters/gcp/form'
+            - elsif @authorize_url
+              = render 'clusters/clusters/gcp/signin_with_google_button'
+            - else
+              = render 'clusters/clusters/gcp/gcp_not_configured'
           - elsif @eks_selected
             = render 'clusters/clusters/eks/index'
           - else
@@ -35,13 +51,9 @@
           - if @valid_gcp_token
             = render 'clusters/clusters/gcp/form'
           - elsif @authorize_url
-            .signin-with-google
-              - create_account_link = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: 'https://accounts.google.com/SignUpWithoutGmail?service=cloudconsole&continue=https%3A%2F%2Fconsole.cloud.google.com%2Ffreetrial%3Futm_campaign%3D2018_cpanel%26utm_source%3Dgitlab%26utm_medium%3Dreferral' }
-              = link_to(image_tag('auth_buttons/signin_with_google.png', width: '191px', alt: _('Sign in with Google')), @authorize_url)
-              = s_('or %{link_start}create a new Google account%{link_end}').html_safe % { link_start: create_account_link, link_end: link_end }
+            = render 'clusters/clusters/gcp/signin_with_google_button'
           - else
-            - documentation_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path("integration/google") }
-            = s_('Google authentication is not %{link_start}property configured%{link_end}. Ask your GitLab administrator if you want to use this service.').html_safe % { link_start: documentation_link_start, link_end: link_end }
+            = render 'clusters/clusters/gcp/gcp_not_configured'
       .tab-pane{ id: 'add-cluster-pane', class: active_when(active_tab == 'add'), role: 'tabpanel' }
         = render 'clusters/clusters/user/header'

changelogs/unreleased/31923-Snowplow-custom-events-Monitor.yml

+---
+title: 'Snowplow custom events for Monitor: Health Product Categories'
+merge_request: 18157
+author:
+type: added