Merge branch '5456-add-cluster-health-alert-frontend' into 'master'

Add frontend support for cluster health alerts

Closes #5456

See merge request gitlab-org/gitlab-ee!13443

app/controllers/projects/clusters_controller.rb

@@ -4,6 +4,10 @@ class Projects::ClustersController < Clusters::ClustersController
   prepend_before_action :project
   before_action :repository
 
+  before_action do
+    push_frontend_feature_flag(:prometheus_computed_alerts)
+  end
+
   layout 'project'
 
   private

app/controllers/projects/environments_controller.rb

@@ -15,6 +15,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     push_frontend_feature_flag(:environment_metrics_use_prometheus_endpoint)
     push_frontend_feature_flag(:environment_metrics_show_multiple_dashboards)
     push_frontend_feature_flag(:grafana_dashboard_link)
+    push_frontend_feature_flag(:prometheus_computed_alerts)
   end
 
   def index

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -67,6 +67,9 @@ export default {
     formDisabled() {
       return Boolean(this.errorMessage || this.isLoading);
     },
+    supportsComputedAlerts() {
+      return gon.features && gon.features.prometheusComputedAlerts;
+    },
   },
   watch: {
     isOpen(open) {
@@ -200,7 +203,11 @@ export default {
       <icon :name="alertIcon" :size="16" aria-hidden="true" />
       <icon :size="16" name="arrow-down" aria-hidden="true" class="chevron" />
     </button>
-    <div ref="dropdownMenu" :class="{ show: isOpen }" class="dropdown-menu alert-dropdown-menu">
+    <div
+      ref="dropdownMenu"
+      :class="{ show: isOpen, 'h-auto': supportsComputedAlerts }"
+      class="dropdown-menu alert-dropdown-menu"
+    >
       <div class="dropdown-title m0">
         <span>{{ dropdownTitle }}</span>
         <button
@@ -212,7 +219,7 @@ export default {
           <icon :size="12" name="close" aria-hidden="true" />
         </button>
       </div>
-      <div class="dropdown-content">
+      <div :class="{ 'mh-100': supportsComputedAlerts }" class="dropdown-content">
         <alert-widget-form
           ref="widgetForm"
           :disabled="formDisabled"

ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -4,7 +4,14 @@ import _ from 'underscore';
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
 import { alertsValidator, queriesValidator } from '../validators';
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlFormGroup,
+  GlFormInput,
+  GlDropdown,
+  GlDropdownItem,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
 
 Vue.use(Translate);
 
@@ -28,8 +35,14 @@ const OPERATORS = {
 
 export default {
   components: {
+    GlFormGroup,
+    GlFormInput,
     GlDropdown,
     GlDropdownItem,
+    Icon,
+  },
+  directives: {
+    GlTooltipDirective,
   },
   props: {
     disabled: {
@@ -55,16 +68,24 @@ export default {
       threshold: null,
       prometheusMetricId: null,
       selectedAlert: {},
+      alertQuery: '',
     };
   },
   computed: {
+    isValidQuery() {
+      // TODO: Add query validation check (most likely via http request)
+      return this.alertQuery.length ? true : null;
+    },
     currentQuery() {
       return this.relevantQueries.find(query => query.metricId === this.prometheusMetricId) || {};
     },
     formDisabled() {
       // We need a prometheusMetricId to determine whether we're
       // creating/updating/deleting
-      return this.disabled || !this.prometheusMetricId;
+      return this.disabled || !(this.prometheusMetricId || this.isValidQuery);
+    },
+    supportsComputedAlerts() {
+      return gon.features && gon.features.prometheusComputedAlerts;
     },
     queryDropdownLabel() {
       return this.currentQuery.label || s__('PrometheusAlerts|Select query');
@@ -137,12 +158,44 @@ export default {
       this.selectedAlert = {};
     },
   },
+  alertQueryText: {
+    label: __('Query'),
+    validFeedback: __('Query is valid'),
+    invalidFeedback: __('Invalid query'),
+    descriptionTooltip: __(
+      'Example: Usage = single query. (Requested) / (Capacity) = multiple queries combined into a formula.',
+    ),
+  },
 };
 </script>
 
 <template>
   <div class="alert-form">
-    <gl-dropdown :text="queryDropdownLabel" class="form-group" toggle-class="dropdown-menu-toggle">
+    <gl-form-group
+      v-if="supportsComputedAlerts"
+      :label="$options.alertQueryText.label"
+      :valid-feedback="$options.alertQueryText.validFeedback"
+      :invalid-feedback="$options.alertQueryText.invalidFeedback"
+      :state="isValidQuery"
+    >
+      <gl-form-input v-model.trim="alertQuery" :state="isValidQuery" />
+      <template #description>
+        <div class="d-flex align-items-center">
+          {{ __('Single or combined queries') }}
+          <icon
+            v-gl-tooltip-directive="$options.alertQueryText.descriptionTooltip"
+            name="question"
+            class="prepend-left-4"
+          />
+        </div>
+      </template>
+    </gl-form-group>
+    <gl-dropdown
+      v-else
+      :text="queryDropdownLabel"
+      class="form-group"
+      toggle-class="dropdown-menu-toggle"
+    >
       <gl-dropdown-item
         v-for="query in relevantQueries"
         :key="query.metricId"

ee/app/views/projects/clusters/_prometheus_graphs.html.haml

@@ -4,7 +4,8 @@
   %h4= s_('ClusterIntegration|Cluster health')
 
   - if @cluster&.application_prometheus_available?
-    #prometheus-graphs{ data: cluster_health_data(@cluster) }
+    #prometheus-graphs{ data: cluster_health_data(@cluster).merge({ "alerts-endpoint" => ('/' if Feature.enabled?(:prometheus_computed_alerts)),
+    "prometheus-alerts-available" => ('true' if Feature.enabled?(:prometheus_computed_alerts)) }) }
 
   - else
     %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus below.")

locale/gitlab.pot

@@ -5167,6 +5167,9 @@ msgstr ""
 msgid "Everything you need to create a GitLab Pages site using plain HTML."
 msgstr ""
 
+msgid "Example: Usage = single query. (Requested) / (Capacity) = multiple queries combined into a formula."
+msgstr ""
+
 msgid "Except policy:"
 msgstr ""
 
@@ -7156,6 +7159,9 @@ msgstr ""
 msgid "Invalid pin code"
 msgstr ""
 
+msgid "Invalid query"
+msgstr ""
+
 msgid "Invalid repository path"
 msgstr ""
 
@@ -10668,6 +10674,9 @@ msgstr ""
 msgid "Query"
 msgstr ""
 
+msgid "Query is valid"
+msgstr ""
+
 msgid "Quick actions can be used in the issues description and comment boxes."
 msgstr ""
 
@@ -11983,6 +11992,9 @@ msgstr ""
 msgid "Similar issues"
 msgstr ""
 
+msgid "Single or combined queries"
+msgstr ""
+
 msgid "Size"
 msgstr ""