Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

9 files changed, 9 insertions, 734 deletions

diff --git a/app/assets/javascripts/monitoring/components/alert_widget.vue b/app/assets/javascripts/monitoring/components/alert_widget.vue
deleted file mode 100644
index e5d7e2ea2eb..00000000000
--- a/app/assets/javascripts/monitoring/components/alert_widget.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<script>
-import { GlBadge, GlLoadingIcon, GlModalDirective, GlIcon, GlTooltip, GlSprintf } from '@gitlab/ui';
-import { values, get } from 'lodash';
-import createFlash from '~/flash';
-import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
-import { s__ } from '~/locale';
-import { OPERATORS } from '../constants';
-import AlertsService from '../services/alerts_service';
-import { alertsValidator, queriesValidator } from '../validators';
-import AlertWidgetForm from './alert_widget_form.vue';
-
-export default {
-  components: {
-    AlertWidgetForm,
-    GlBadge,
-    GlLoadingIcon,
-    GlIcon,
-    GlTooltip,
-    GlSprintf,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-  },
-  props: {
-    alertsEndpoint: {
-      type: String,
-      required: true,
-    },
-    showLoadingState: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    // { [alertPath]: { alert_attributes } }. Populated from subsequent API calls.
-    // Includes only the metrics/alerts to be managed by this widget.
-    alertsToManage: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-      validator: alertsValidator,
-    },
-    // [{ metric+query_attributes }]. Represents queries (and alerts) we know about
-    // on intial fetch. Essentially used for reference.
-    relevantQueries: {
-      type: Array,
-      required: true,
-      validator: queriesValidator,
-    },
-    modalId: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      service: null,
-      errorMessage: null,
-      isLoading: false,
-      apiAction: 'create',
-    };
-  },
-  i18n: {
-    alertsCountMsg: s__('PrometheusAlerts|%{count} alerts applied'),
-    singleFiringMsg: s__('PrometheusAlerts|Firing: %{alert}'),
-    multipleFiringMsg: s__('PrometheusAlerts|%{firingCount} firing'),
-    firingAlertsTooltip: s__('PrometheusAlerts|Firing: %{alerts}'),
-  },
-  computed: {
-    singleAlertSummary() {
-      return {
-        message: this.isFiring ? this.$options.i18n.singleFiringMsg : this.thresholds[0],
-        alert: this.thresholds[0],
-      };
-    },
-    multipleAlertsSummary() {
-      return {
-        message: this.isFiring
-          ? `${this.$options.i18n.alertsCountMsg}, ${this.$options.i18n.multipleFiringMsg}`
-          : this.$options.i18n.alertsCountMsg,
-        count: this.thresholds.length,
-        firingCount: this.firingAlerts.length,
-      };
-    },
-    shouldShowLoadingIcon() {
-      return this.showLoadingState && this.isLoading;
-    },
-    thresholds() {
-      const alertsToManage = Object.keys(this.alertsToManage);
-      return alertsToManage.map(this.formatAlertSummary);
-    },
-    hasAlerts() {
-      return Boolean(Object.keys(this.alertsToManage).length);
-    },
-    hasMultipleAlerts() {
-      return this.thresholds.length > 1;
-    },
-    isFiring() {
-      return Boolean(this.firingAlerts.length);
-    },
-    firingAlerts() {
-      return values(this.alertsToManage).filter((alert) =>
-        this.passedAlertThreshold(this.getQueryData(alert), alert),
-      );
-    },
-    formattedFiringAlerts() {
-      return this.firingAlerts.map((alert) => this.formatAlertSummary(alert.alert_path));
-    },
-    configuredAlert() {
-      return this.hasAlerts ? values(this.alertsToManage)[0].metricId : '';
-    },
-  },
-  created() {
-    this.service = new AlertsService({ alertsEndpoint: this.alertsEndpoint });
-    this.fetchAlertData();
-  },
-  methods: {
-    fetchAlertData() {
-      this.isLoading = true;
-
-      const queriesWithAlerts = this.relevantQueries.filter((query) => query.alert_path);
-
-      return Promise.all(
-        queriesWithAlerts.map((query) =>
-          this.service
-            .readAlert(query.alert_path)
-            .then((alertAttributes) => this.setAlert(alertAttributes, query.metricId)),
-        ),
-      )
-        .then(() => {
-          this.isLoading = false;
-        })
-        .catch(() => {
-          createFlash({
-            message: s__('PrometheusAlerts|Error fetching alert'),
-          });
-          this.isLoading = false;
-        });
-    },
-    setAlert(alertAttributes, metricId) {
-      this.$emit('setAlerts', alertAttributes.alert_path, { ...alertAttributes, metricId });
-    },
-    removeAlert(alertPath) {
-      this.$emit('setAlerts', alertPath, null);
-    },
-    formatAlertSummary(alertPath) {
-      const alert = this.alertsToManage[alertPath];
-      const alertQuery = this.relevantQueries.find((query) => query.metricId === alert.metricId);
-
-      return `${alertQuery.label} ${alert.operator} ${alert.threshold}`;
-    },
-    passedAlertThreshold(data, alert) {
-      const { threshold, operator } = alert;
-
-      switch (operator) {
-        case OPERATORS.greaterThan:
-          return data.some((value) => value > threshold);
-        case OPERATORS.lessThan:
-          return data.some((value) => value < threshold);
-        case OPERATORS.equalTo:
-          return data.some((value) => value === threshold);
-        default:
-          return false;
-      }
-    },
-    getQueryData(alert) {
-      const alertQuery = this.relevantQueries.find((query) => query.metricId === alert.metricId);
-
-      return get(alertQuery, 'result[0].values', []).map((value) => get(value, '[1]', null));
-    },
-    showModal() {
-      this.$root.$emit(BV_SHOW_MODAL, this.modalId);
-    },
-    hideModal() {
-      this.errorMessage = null;
-      this.$root.$emit(BV_HIDE_MODAL, this.modalId);
-    },
-    handleSetApiAction(apiAction) {
-      this.apiAction = apiAction;
-    },
-    handleCreate({ operator, threshold, prometheus_metric_id, runbookUrl }) {
-      const newAlert = { operator, threshold, prometheus_metric_id, runbookUrl };
-      this.isLoading = true;
-      this.service
-        .createAlert(newAlert)
-        .then((alertAttributes) => {
-          this.setAlert(alertAttributes, prometheus_metric_id);
-          this.isLoading = false;
-          this.hideModal();
-        })
-        .catch(() => {
-          this.errorMessage = s__('PrometheusAlerts|Error creating alert');
-          this.isLoading = false;
-        });
-    },
-    handleUpdate({ alert, operator, threshold, runbookUrl }) {
-      const updatedAlert = { operator, threshold, runbookUrl };
-      this.isLoading = true;
-      this.service
-        .updateAlert(alert, updatedAlert)
-        .then((alertAttributes) => {
-          this.setAlert(alertAttributes, this.alertsToManage[alert].metricId);
-          this.isLoading = false;
-          this.hideModal();
-        })
-        .catch(() => {
-          this.errorMessage = s__('PrometheusAlerts|Error saving alert');
-          this.isLoading = false;
-        });
-    },
-    handleDelete({ alert }) {
-      this.isLoading = true;
-      this.service
-        .deleteAlert(alert)
-        .then(() => {
-          this.removeAlert(alert);
-          this.isLoading = false;
-          this.hideModal();
-        })
-        .catch(() => {
-          this.errorMessage = s__('PrometheusAlerts|Error deleting alert');
-          this.isLoading = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="prometheus-alert-widget dropdown flex-grow-2 overflow-hidden">
-    <gl-loading-icon v-if="shouldShowLoadingIcon" :inline="true" size="sm" />
-    <span v-else-if="errorMessage" ref="alertErrorMessage" class="alert-error-message">{{
-      errorMessage
-    }}</span>
-    <span
-      v-else-if="hasAlerts"
-      ref="alertCurrentSetting"
-      class="alert-current-setting cursor-pointer d-flex"
-      @click="showModal"
-    >
-      <gl-badge :variant="isFiring ? 'danger' : 'neutral'" class="d-flex-center text-truncate">
-        <gl-icon name="warning" :size="16" class="flex-shrink-0" />
-        <span class="text-truncate gl-pl-2">
-          <gl-sprintf
-            :message="
-              hasMultipleAlerts ? multipleAlertsSummary.message : singleAlertSummary.message
-            "
-          >
-            <template #alert>
-              {{ singleAlertSummary.alert }}
-            </template>
-            <template #count>
-              {{ multipleAlertsSummary.count }}
-            </template>
-            <template #firingCount>
-              {{ multipleAlertsSummary.firingCount }}
-            </template>
-          </gl-sprintf>
-        </span>
-      </gl-badge>
-      <gl-tooltip v-if="hasMultipleAlerts && isFiring" :target="() => $refs.alertCurrentSetting">
-        <gl-sprintf :message="$options.i18n.firingAlertsTooltip">
-          <template #alerts>
-            <div v-for="alert in formattedFiringAlerts" :key="alert.alert_path">
-              {{ alert }}
-            </div>
-          </template>
-        </gl-sprintf>
-      </gl-tooltip>
-    </span>
-    <alert-widget-form
-      ref="widgetForm"
-      :disabled="isLoading"
-      :alerts-to-manage="alertsToManage"
-      :relevant-queries="relevantQueries"
-      :error-message="errorMessage"
-      :configured-alert="configuredAlert"
-      :modal-id="modalId"
-      @create="handleCreate"
-      @update="handleUpdate"
-      @delete="handleDelete"
-      @cancel="hideModal"
-      @setAction="handleSetApiAction"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/alert_widget_form.vue b/app/assets/javascripts/monitoring/components/alert_widget_form.vue
deleted file mode 100644
index 68fd3e256ec..00000000000
--- a/app/assets/javascripts/monitoring/components/alert_widget_form.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<script>
-import {
-  GlLink,
-  GlButton,
-  GlButtonGroup,
-  GlFormGroup,
-  GlFormInput,
-  GlDropdown,
-  GlDropdownItem,
-  GlModal,
-  GlTooltipDirective,
-  GlIcon,
-} from '@gitlab/ui';
-import { isEmpty, findKey } from 'lodash';
-import Vue from 'vue';
-import { __, s__ } from '~/locale';
-import TrackEventDirective from '~/vue_shared/directives/track_event';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Translate from '~/vue_shared/translate';
-import { OPERATORS } from '../constants';
-import { alertsValidator, queriesValidator } from '../validators';
-
-Vue.use(Translate);
-
-const SUBMIT_ACTION_TEXT = {
-  create: __('Add'),
-  update: __('Save'),
-  delete: __('Delete'),
-};
-
-const SUBMIT_BUTTON_CLASS = {
-  create: 'btn-success',
-  update: 'btn-success',
-  delete: 'btn-danger',
-};
-
-export default {
-  components: {
-    GlButton,
-    GlButtonGroup,
-    GlFormGroup,
-    GlFormInput,
-    GlDropdown,
-    GlDropdownItem,
-    GlModal,
-    GlLink,
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-    TrackEvent: TrackEventDirective,
-  },
-  mixins: [glFeatureFlagsMixin()],
-  props: {
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    errorMessage: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    configuredAlert: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    alertsToManage: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-      validator: alertsValidator,
-    },
-    relevantQueries: {
-      type: Array,
-      required: true,
-      validator: queriesValidator,
-    },
-    modalId: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      operators: OPERATORS,
-      operator: null,
-      threshold: null,
-      prometheusMetricId: null,
-      runbookUrl: 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 || this.isValidQuery);
-    },
-    supportsComputedAlerts() {
-      return this.glFeatures.prometheusComputedAlerts;
-    },
-    queryDropdownLabel() {
-      return this.currentQuery.label || s__('PrometheusAlerts|Select query');
-    },
-    haveValuesChanged() {
-      return (
-        this.operator &&
-        this.threshold === Number(this.threshold) &&
-        (this.operator !== this.selectedAlert.operator ||
-          this.threshold !== this.selectedAlert.threshold ||
-          this.runbookUrl !== this.selectedAlert.runbookUrl)
-      );
-    },
-    submitAction() {
-      if (isEmpty(this.selectedAlert)) return 'create';
-      if (this.haveValuesChanged) return 'update';
-      return 'delete';
-    },
-    submitActionText() {
-      return SUBMIT_ACTION_TEXT[this.submitAction];
-    },
-    submitButtonClass() {
-      return SUBMIT_BUTTON_CLASS[this.submitAction];
-    },
-    isSubmitDisabled() {
-      return this.disabled || (this.submitAction === 'create' && !this.haveValuesChanged);
-    },
-    dropdownTitle() {
-      return this.submitAction === 'create'
-        ? s__('PrometheusAlerts|Add alert')
-        : s__('PrometheusAlerts|Edit alert');
-    },
-  },
-  watch: {
-    alertsToManage() {
-      this.resetAlertData();
-    },
-    submitAction() {
-      this.$emit('setAction', this.submitAction);
-    },
-  },
-  methods: {
-    selectQuery(queryId) {
-      const existingAlertPath = findKey(this.alertsToManage, (alert) => alert.metricId === queryId);
-      const existingAlert = this.alertsToManage[existingAlertPath];
-
-      if (existingAlert) {
-        const { operator, threshold, runbookUrl } = existingAlert;
-
-        this.selectedAlert = existingAlert;
-        this.operator = operator;
-        this.threshold = threshold;
-        this.runbookUrl = runbookUrl;
-      } else {
-        this.selectedAlert = {};
-        this.operator = this.operators.greaterThan;
-        this.threshold = null;
-        this.runbookUrl = null;
-      }
-
-      this.prometheusMetricId = queryId;
-    },
-    handleHidden() {
-      this.resetAlertData();
-      this.$emit('cancel');
-    },
-    handleSubmit() {
-      this.$emit(this.submitAction, {
-        alert: this.selectedAlert.alert_path,
-        operator: this.operator,
-        threshold: this.threshold,
-        prometheus_metric_id: this.prometheusMetricId,
-        runbookUrl: this.runbookUrl,
-      });
-    },
-    handleShown() {
-      if (this.configuredAlert) {
-        this.selectQuery(this.configuredAlert);
-      } else if (this.relevantQueries.length === 1) {
-        this.selectQuery(this.relevantQueries[0].metricId);
-      }
-    },
-    resetAlertData() {
-      this.operator = null;
-      this.threshold = null;
-      this.prometheusMetricId = null;
-      this.selectedAlert = {};
-      this.runbookUrl = null;
-    },
-    getAlertFormActionTrackingOption() {
-      const label = `${this.submitAction}_alert`;
-      return {
-        category: document.body.dataset.page,
-        action: 'click_button',
-        label,
-      };
-    },
-  },
-  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>
-  <gl-modal
-    ref="alertModal"
-    :title="dropdownTitle"
-    :modal-id="modalId"
-    :ok-variant="submitAction === 'delete' ? 'danger' : 'success'"
-    :ok-disabled="formDisabled"
-    @ok.prevent="handleSubmit"
-    @hidden="handleHidden"
-    @shown="handleShown"
-  >
-    <div v-if="errorMessage" class="alert-modal-message danger_message">{{ errorMessage }}</div>
-    <div class="alert-form">
-      <gl-form-group
-        v-if="supportsComputedAlerts"
-        :label="$options.alertQueryText.label"
-        label-for="alert-query-input"
-        :valid-feedback="$options.alertQueryText.validFeedback"
-        :invalid-feedback="$options.alertQueryText.invalidFeedback"
-        :state="isValidQuery"
-      >
-        <gl-form-input id="alert-query-input" v-model.trim="alertQuery" :state="isValidQuery" />
-        <template #description>
-          <div class="d-flex align-items-center">
-            {{ __('Single or combined queries') }}
-            <gl-icon
-              v-gl-tooltip="$options.alertQueryText.descriptionTooltip"
-              name="question"
-              class="gl-ml-2"
-            />
-          </div>
-        </template>
-      </gl-form-group>
-      <gl-form-group v-else label-for="alert-query-dropdown" :label="$options.alertQueryText.label">
-        <gl-dropdown
-          id="alert-query-dropdown"
-          :text="queryDropdownLabel"
-          toggle-class="dropdown-menu-toggle gl-border-1! qa-alert-query-dropdown"
-        >
-          <gl-dropdown-item
-            v-for="query in relevantQueries"
-            :key="query.metricId"
-            data-qa-selector="alert_query_option"
-            @click="selectQuery(query.metricId)"
-          >
-            {{ query.label }}
-          </gl-dropdown-item>
-        </gl-dropdown>
-      </gl-form-group>
-      <gl-button-group class="mb-3" :label="s__('PrometheusAlerts|Operator')">
-        <gl-button
-          :class="{ active: operator === operators.greaterThan }"
-          :disabled="formDisabled"
-          @click="operator = operators.greaterThan"
-        >
-          {{ operators.greaterThan }}
-        </gl-button>
-        <gl-button
-          :class="{ active: operator === operators.equalTo }"
-          :disabled="formDisabled"
-          @click="operator = operators.equalTo"
-        >
-          {{ operators.equalTo }}
-        </gl-button>
-        <gl-button
-          :class="{ active: operator === operators.lessThan }"
-          :disabled="formDisabled"
-          @click="operator = operators.lessThan"
-        >
-          {{ operators.lessThan }}
-        </gl-button>
-      </gl-button-group>
-      <gl-form-group :label="s__('PrometheusAlerts|Threshold')" label-for="alerts-threshold">
-        <gl-form-input
-          id="alerts-threshold"
-          v-model.number="threshold"
-          :disabled="formDisabled"
-          type="number"
-          data-qa-selector="alert_threshold_field"
-        />
-      </gl-form-group>
-      <gl-form-group
-        :label="s__('PrometheusAlerts|Runbook URL (optional)')"
-        label-for="alert-runbook"
-      >
-        <gl-form-input
-          id="alert-runbook"
-          v-model="runbookUrl"
-          :disabled="formDisabled"
-          data-testid="alertRunbookField"
-          type="text"
-          :placeholder="s__('PrometheusAlerts|https://gitlab.com/gitlab-com/runbooks')"
-        />
-      </gl-form-group>
-    </div>
-    <template #modal-ok>
-      <gl-link
-        v-track-event="getAlertFormActionTrackingOption()"
-        class="text-reset text-decoration-none"
-      >
-        {{ submitActionText }}
-      </gl-link>
-    </template>
-  </gl-modal>
-</template>
diff --git a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
index 4b54cffe231..ae079da0b0b 100644
--- a/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
+++ b/app/assets/javascripts/monitoring/components/charts/empty_chart.vue
@@ -1,8 +1,12 @@
 <script>
 import chartEmptyStateIllustration from '@gitlab/svgs/dist/illustrations/chart-empty-state.svg';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { chartHeight } from '../../constants';
 
 export default {
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+  },
   data() {
     return {
       height: chartHeight,
@@ -18,14 +22,15 @@ export default {
   created() {
     this.chartEmptyStateIllustration = chartEmptyStateIllustration;
   },
+  safeHtmlConfig: { ADD_TAGS: ['use'] },
 };
 </script>
 <template>
   <div class="d-flex flex-column justify-content-center">
     <div
+      v-safe-html:[$options.safeHtmlConfig]="chartEmptyStateIllustration"
       class="gl-mt-3 svg-w-100 d-flex align-items-center"
       :style="svgContainerStyle"
-      v-html="chartEmptyStateIllustration /* eslint-disable-line vue/no-v-html */"
     ></div>
     <h5 class="text-center gl-mt-3">{{ __('No data to display') }}</h5>
   </div>
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index 12f5e7efc96..5529a94874b 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -73,11 +73,6 @@ export default {
       required: false,
       default: chartHeight,
     },
-    thresholds: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     legendLayout: {
       type: String,
       required: false,
@@ -391,7 +386,6 @@ export default {
       :option="chartOptions"
       :format-tooltip-text="formatTooltipText"
       :format-annotations-tooltip-text="formatAnnotationsTooltipText"
-      :thresholds="thresholds"
       :width="width"
       :height="height"
       :legend-layout="legendLayout"
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index be9f104b81e..c9767330b73 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -8,10 +8,8 @@ import invalidUrl from '~/lib/utils/invalid_url';
 import { ESC_KEY } from '~/lib/utils/keys';
 import { mergeUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
-import AlertsDeprecationWarning from '~/vue_shared/components/alerts_deprecation_warning.vue';
 import { defaultTimeRange } from '~/vue_shared/constants';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { metricStates, keyboardShortcutKeys } from '../constants';
 import {
   timeRangeFromUrl,
@@ -30,7 +28,6 @@ import VariablesSection from './variables_section.vue';
 
 export default {
   components: {
-    AlertsDeprecationWarning,
     VueDraggable,
     DashboardHeader,
     DashboardPanel,
@@ -47,7 +44,6 @@ export default {
     GlTooltip: GlTooltipDirective,
     TrackEvent: TrackEventDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     hasMetrics: {
       type: Boolean,
@@ -399,8 +395,6 @@ export default {
 
 <template>
   <div class="prometheus-graphs" data-qa-selector="prometheus_graphs">
-    <alerts-deprecation-warning v-if="!glFeatures.managedAlertsDeprecation" />
-
     <dashboard-header
       v-if="showHeader"
       ref="prometheusGraphsHeader"
diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel.vue b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
index 446c6b52602..78e3b15913a 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -13,20 +13,16 @@ import {
   GlTooltip,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import { mapValues, pickBy } from 'lodash';
 import { mapState } from 'vuex';
-import { BV_SHOW_MODAL } from '~/lib/utils/constants';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import invalidUrl from '~/lib/utils/invalid_url';
 import { relativePathToAbsolute, getBaseURL, visitUrl, isSafeURL } from '~/lib/utils/url_utility';
 import { __, n__ } from '~/locale';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { panelTypes } from '../constants';
 
 import { graphDataToCsv } from '../csv_export';
 import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
-import AlertWidget from './alert_widget.vue';
 import MonitorAnomalyChart from './charts/anomaly.vue';
 import MonitorBarChart from './charts/bar.vue';
 import MonitorColumnChart from './charts/column.vue';
@@ -45,7 +41,6 @@ const events = {
 export default {
   components: {
     MonitorEmptyChart,
-    AlertWidget,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -62,7 +57,6 @@ export default {
     GlTooltip: GlTooltipDirective,
     TrackEvent: TrackEventDirective,
   },
-  mixins: [glFeatureFlagMixin()],
   props: {
     clipboardText: {
       type: String,
@@ -84,16 +78,6 @@ export default {
       required: false,
       default: 'monitoringDashboard',
     },
-    alertsEndpoint: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    prometheusAlertsAvailable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     settingsPath: {
       type: String,
       required: false,
@@ -104,7 +88,6 @@ export default {
     return {
       showTitleTooltip: false,
       zoomedTimeRange: null,
-      allAlerts: {},
       expandBtnAvailable: Boolean(this.$listeners[events.expand]),
     };
   },
@@ -211,7 +194,7 @@ export default {
     /**
      * In monitoring, Time Series charts typically support
      * a larger feature set like "annotations", "deployment
-     * data", alert "thresholds" and "datazoom".
+     * data" and "datazoom".
      *
      * This is intentional as Time Series are more frequently
      * used.
@@ -252,34 +235,11 @@ export default {
       const { metrics = [] } = this.graphData;
       return metrics.some(({ metricId }) => this.metricsSavedToDb.includes(metricId));
     },
-    alertWidgetAvailable() {
-      const supportsAlerts =
-        this.isPanelType(panelTypes.AREA_CHART) || this.isPanelType(panelTypes.LINE_CHART);
-      return (
-        supportsAlerts &&
-        this.prometheusAlertsAvailable &&
-        this.alertsEndpoint &&
-        this.graphData &&
-        this.hasMetricsInDb &&
-        !this.glFeatures.managedAlertsDeprecation
-      );
-    },
-    alertModalId() {
-      return `alert-modal-${this.graphData.id}`;
-    },
   },
   mounted() {
     this.refreshTitleTooltip();
   },
   methods: {
-    getGraphAlerts(queries) {
-      if (!this.allAlerts) return {};
-      const metricIdsForChart = queries.map((q) => q.metricId);
-      return pickBy(this.allAlerts, (alert) => metricIdsForChart.includes(alert.metricId));
-    },
-    getGraphAlertValues(queries) {
-      return Object.values(this.getGraphAlerts(queries));
-    },
     isPanelType(type) {
       return this.graphData?.type === type;
     },
@@ -310,24 +270,9 @@ export default {
         this.onExpand();
       }
     },
-    setAlerts(alertPath, alertAttributes) {
-      if (alertAttributes) {
-        this.$set(this.allAlerts, alertPath, alertAttributes);
-      } else {
-        this.$delete(this.allAlerts, alertPath);
-      }
-    },
     safeUrl(url) {
       return isSafeURL(url) ? url : '#';
     },
-    showAlertModal() {
-      this.$root.$emit(BV_SHOW_MODAL, this.alertModalId);
-    },
-    showAlertModalFromKeyboardShortcut() {
-      if (this.isContextualMenuShown) {
-        this.showAlertModal();
-      }
-    },
     visitLogsPage() {
       if (this.logsPathWithTimeRange) {
         visitUrl(relativePathToAbsolute(this.logsPathWithTimeRange, getBaseURL()));
@@ -348,19 +293,6 @@ export default {
         this.$refs.copyChartLink.$el.firstChild.click();
       }
     },
-    getAlertRunbooks(queries) {
-      const hasRunbook = (alert) => Boolean(alert.runbookUrl);
-      const graphAlertsWithRunbooks = pickBy(this.getGraphAlerts(queries), hasRunbook);
-      const alertToRunbookTransform = (alert) => {
-        const alertQuery = queries.find((query) => query.metricId === alert.metricId);
-        return {
-          key: alert.metricId,
-          href: alert.runbookUrl,
-          label: alertQuery.label,
-        };
-      };
-      return mapValues(graphAlertsWithRunbooks, alertToRunbookTransform);
-    },
   },
   panelTypes,
 };
@@ -378,15 +310,6 @@ export default {
       <gl-tooltip :target="() => $refs.graphTitle" :disabled="!showTitleTooltip">
         {{ title }}
       </gl-tooltip>
-      <alert-widget
-        v-if="isContextualMenuShown && alertWidgetAvailable"
-        class="mx-1"
-        :modal-id="alertModalId"
-        :alerts-endpoint="alertsEndpoint"
-        :relevant-queries="graphData.metrics"
-        :alerts-to-manage="getGraphAlerts(graphData.metrics)"
-        @setAlerts="setAlerts"
-      />
       <div class="flex-grow-1"></div>
       <div v-if="graphDataIsLoading" class="mx-1 mt-1">
         <gl-loading-icon size="sm" />
@@ -450,32 +373,6 @@ export default {
             >
               {{ __('Copy link to chart') }}
             </gl-dropdown-item>
-            <gl-dropdown-item
-              v-if="alertWidgetAvailable"
-              v-gl-modal="alertModalId"
-              data-qa-selector="alert_widget_menu_item"
-            >
-              {{ __('Alerts') }}
-            </gl-dropdown-item>
-            <gl-dropdown-item
-              v-for="runbook in getAlertRunbooks(graphData.metrics)"
-              :key="runbook.key"
-              :href="safeUrl(runbook.href)"
-              data-testid="runbookLink"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
-                <span>
-                  <gl-sprintf :message="s__('Metrics|View runbook - %{label}')">
-                    <template #label>
-                      {{ runbook.label }}
-                    </template>
-                  </gl-sprintf>
-                </span>
-                <gl-icon name="external-link" />
-              </span>
-            </gl-dropdown-item>
 
             <template v-if="graphData.links && graphData.links.length">
               <gl-dropdown-divider />
@@ -515,7 +412,6 @@ export default {
       :deployment-data="deploymentData"
       :annotations="annotations"
       :project-path="projectPath"
-      :thresholds="getGraphAlertValues(graphData.metrics)"
       :group-id="groupId"
       :timezone="dashboardTimezone"
       :time-range="fixedCurrentTimeRange"
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
index 1765a2f3d5d..a63008aa382 100644
--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
+++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
@@ -63,7 +63,7 @@ export default {
       return !(this.form.fileName && !this.form.fileName.endsWith('.yml'));
     },
     fileNameFeedback() {
-      return !this.fileNameState ? s__('The file name should have a .yml extension') : '';
+      return !this.fileNameState ? __('The file name should have a .yml extension') : '';
     },
   },
   mounted() {
diff --git a/app/assets/javascripts/monitoring/monitoring_app.js b/app/assets/javascripts/monitoring/monitoring_app.js
index cf79e71b9e0..ee67e5dd827 100644
--- a/app/assets/javascripts/monitoring/monitoring_app.js
+++ b/app/assets/javascripts/monitoring/monitoring_app.js
@@ -12,10 +12,7 @@ export default (props = {}) => {
   if (el && el.dataset) {
     const { metricsDashboardBasePath, ...dataset } = el.dataset;
 
-    const {
-      initState,
-      dataProps: { hasManagedPrometheus, ...dataProps },
-    } = stateAndPropsFromDataset(dataset);
+    const { initState, dataProps } = stateAndPropsFromDataset(dataset);
     const store = createStore(initState);
     const router = createRouter(metricsDashboardBasePath);
 
@@ -24,7 +21,6 @@ export default (props = {}) => {
       el,
       store,
       router,
-      provide: { hasManagedPrometheus },
       data() {
         return {
           dashboardProps: { ...dataProps, ...props },
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 74b777d7b44..336b613b620 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -41,7 +41,6 @@ export const stateAndPropsFromDataset = (dataset = {}) => {
   dataProps.hasMetrics = parseBoolean(dataProps.hasMetrics);
   dataProps.customMetricsAvailable = parseBoolean(dataProps.customMetricsAvailable);
   dataProps.prometheusAlertsAvailable = parseBoolean(dataProps.prometheusAlertsAvailable);
-  dataProps.hasManagedPrometheus = parseBoolean(dataProps.hasManagedPrometheus);
 
   return {
     initState: {