Show alerts when prometheus service is active

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -8,10 +8,12 @@ import {
   GlIcon,
   GlDropdown,
   GlDropdownItem,
+  GlLink,
   GlTabs,
   GlTab,
   GlBadge,
   GlPagination,
+  GlSprintf,
 } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
@@ -47,7 +49,7 @@ const initialPaginationState = {
 export default {
   i18n: {
     noAlertsMsg: s__(
-      "AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page.",
+      'AlertManagement|No alerts available to display. See %{linkStart}enabling alert management%{linkEnd} for more information on adding alerts to the list.',
     ),
     errorMsg: s__(
       "AlertManagement|There was an error displaying the alerts. Confirm your endpoint's configuration details to ensure alerts appear.",
@@ -119,10 +121,12 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlIcon,
+    GlLink,
     GlTabs,
     GlTab,
     GlBadge,
     GlPagination,
+    GlSprintf,
   },
   props: {
     projectPath: {
@@ -137,6 +141,10 @@ export default {
       type: String,
       required: true,
     },
+    populatingAlertsHelpUrl: {
+      type: String,
+      required: true,
+    },
     userCanEnableAlertManagement: {
       type: Boolean,
       required: true,
@@ -319,7 +327,17 @@ export default {
   <div>
     <div v-if="alertManagementEnabled" class="alert-management-list">
       <gl-alert v-if="showNoAlertsMsg" @dismiss="isAlertDismissed = true">
-        {{ $options.i18n.noAlertsMsg }}
+        <gl-sprintf :message="$options.i18n.noAlertsMsg">
+          <template #link="{ content }">
+            <gl-link
+              class="gl-display-inline-block"
+              :href="populatingAlertsHelpUrl"
+              target="_blank"
+            >
+              {{ content }}
+            </gl-link>
+          </template>
+        </gl-sprintf>
       </gl-alert>
       <gl-alert v-if="showErrorMsg" variant="danger" @dismiss="isErrorAlertDismissed = true">
         {{ $options.i18n.errorMsg }}

app/assets/javascripts/alert_management/list.js

@@ -11,7 +11,12 @@ export default () => {
   const selector = '#js-alert_management';
 
   const domEl = document.querySelector(selector);
-  const { projectPath, enableAlertManagementPath, emptyAlertSvgPath } = domEl.dataset;
+  const {
+    projectPath,
+    enableAlertManagementPath,
+    emptyAlertSvgPath,
+    populatingAlertsHelpUrl,
+  } = domEl.dataset;
   let { alertManagementEnabled, userCanEnableAlertManagement } = domEl.dataset;
 
   alertManagementEnabled = parseBoolean(alertManagementEnabled);
@@ -45,6 +50,7 @@ export default () => {
         props: {
           projectPath,
           enableAlertManagementPath,
+          populatingAlertsHelpUrl,
           emptyAlertSvgPath,
           alertManagementEnabled,
           userCanEnableAlertManagement,

app/helpers/projects/alert_management_helper.rb

@@ -5,9 +5,10 @@ module Projects::AlertManagementHelper
     {
       'project-path' => project.full_path,
       'enable-alert-management-path' => edit_project_service_path(project, AlertsService),
+      'populating-alerts-help-url' => help_page_url('user/project/operations/alert_management.html', anchor: 'enable-alert-management'),
       'empty-alert-svg-path' => image_path('illustrations/alert-management-empty-state.svg'),
       'user-can-enable-alert-management' => can?(current_user, :admin_project, project).to_s,
-      'alert-management-enabled' => (!!project.alerts_service_activated?).to_s
+      'alert-management-enabled' => alert_management_enabled?(project).to_s
     }
   end
 
@@ -18,4 +19,10 @@ module Projects::AlertManagementHelper
       'project-issues-path' => project_issues_path(project)
     }
   end
+
+  private
+
+  def alert_management_enabled?(project)
+    !!(project.alerts_service_activated? || project.prometheus_service_active?)
+  end
 end

app/models/project.rb

@@ -377,6 +377,7 @@ class Project < ApplicationRecord
   delegate :forward_deployment_enabled, :forward_deployment_enabled=, :forward_deployment_enabled?, to: :ci_cd_settings
   delegate :actual_limits, :actual_plan_name, to: :namespace, allow_nil: true
   delegate :allow_merge_on_skipped_pipeline, :allow_merge_on_skipped_pipeline?, :allow_merge_on_skipped_pipeline=, to: :project_setting
+  delegate :active?, to: :prometheus_service, allow_nil: true, prefix: true
 
   # Validations
   validates :creator, presence: true, on: :create

changelogs/unreleased/tr-fix-prometheus-alert-list.yml

+---
+title: Ensure that alerts are shown when prometheus service is active
+merge_request: 33928
+author:
+type: fixed

locale/gitlab.pot

@@ -1939,7 +1939,7 @@ msgstr ""
 msgid "AlertManagement|No alert data to display."
 msgstr ""
 
-msgid "AlertManagement|No alerts available to display. If you think you're seeing this message in error, refresh the page."
+msgid "AlertManagement|No alerts available to display. See %{linkStart}enabling alert management%{linkEnd} for more information on adding alerts to the list."
 msgstr ""
 
 msgid "AlertManagement|No alerts to display."

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -70,6 +70,7 @@ describe('AlertManagementList', () => {
       propsData: {
         projectPath: 'gitlab-org/gitlab',
         enableAlertManagementPath: '/link',
+        populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data',
         emptyAlertSvgPath: 'illustration/path',
         ...props,
       },

spec/helpers/projects/alert_management_helper_spec.rb

@@ -27,6 +27,7 @@ describe Projects::AlertManagementHelper do
         expect(helper.alert_management_data(current_user, project)).to match(
           'project-path' => project_path,
           'enable-alert-management-path' => setting_path,
+          'populating-alerts-help-url' => 'http://test.host/help/user/project/operations/alert_management.html#enable-alert-management',
           'empty-alert-svg-path' => match_asset_path('/assets/illustrations/alert-management-empty-state.svg'),
           'user-can-enable-alert-management' => 'true',
           'alert-management-enabled' => 'false'
@@ -56,6 +57,28 @@ describe Projects::AlertManagementHelper do
       end
     end
 
+    context 'with prometheus service' do
+      let_it_be(:prometheus_service) { create(:prometheus_service, project: project) }
+
+      context 'when prometheus service is active' do
+        it 'enables alert management' do
+          expect(data).to include(
+            'alert-management-enabled' => 'true'
+          )
+        end
+      end
+
+      context 'when prometheus service is inactive' do
+        it 'disables alert management' do
+          prometheus_service.update!(manual_configuration: false)
+
+          expect(data).to include(
+            'alert-management-enabled' => 'false'
+          )
+        end
+      end
+    end
+
     context 'when user does not have requisite enablement permissions' do
       let(:user_can_enable_alert_management) { false }
 

spec/models/project_spec.rb

@@ -5886,6 +5886,30 @@ describe Project do
     end
   end
 
+  describe '#prometheus_service_active?' do
+    let(:project) { create(:project) }
+
+    subject { project.prometheus_service_active? }
+
+    before do
+      create(:prometheus_service, project: project, manual_configuration: manual_configuration)
+    end
+
+    context 'when project has an activated prometheus service' do
+      let(:manual_configuration) { true }
+
+      it { is_expected.to be_truthy }
+    end
+
+    context 'when project has an inactive prometheus service' do
+      let(:manual_configuration) { false }
+
+      it 'the service is marked as inactive' do
+        expect(subject).to be_falsey
+      end
+    end
+  end
+
   describe '#self_monitoring?' do
     let_it_be(:project) { create(:project) }