- project = local_assigns.fetch(:project)

= render 'shared/integrations/prometheus/custom_metrics', project: project, integration: integration

.col-lg-3
  %p
    = s_('PrometheusService|Common metrics are automatically monitored based on a library of metrics from popular exporters.')
    = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus'), target: '_blank', rel: "noopener noreferrer"

.col-lg-9
  .card.js-panel-monitored-metrics{ data: { active_metrics: active_common_project_prometheus_metrics_path(project, :json), metrics_help_path: help_page_path('user/project/integrations/prometheus_library/index') } }
    .card-header
      %strong
        = s_('PrometheusService|Common metrics')
      = gl_badge_tag 0, nil, class: 'js-monitored-count'
    .card-body
      .loading-metrics.js-loading-metrics
        %p.m-3
          = gl_loading_icon(inline: true, css_class: 'metrics-load-spinner')
          = s_('PrometheusService|Finding and configuring metrics...')
      .empty-metrics.hidden.js-empty-metrics
        %p.text-tertiary.m-3
          = s_('PrometheusService|Waiting for your first deployment to an environment to find common metrics')
      %ul.list-unstyled.metrics-list.hidden.js-metrics-list

  .card.hidden.js-panel-missing-env-vars
    .card-header
      = sprite_icon('chevron-lg-right', css_class: 'panel-toggle js-panel-toggle-right' )
      = sprite_icon('chevron-lg-down', css_class: 'panel-toggle js-panel-toggle-down hidden' )
      = s_('PrometheusService|Missing environment variable')
      = gl_badge_tag 0, nil, class: 'js-env-var-count'
    .card-body.hidden
      .flash-container
        .flash-notice
          .flash-text
            = s_("PrometheusService|To set up automatic monitoring, add the environment variable %{variable} to exporter's queries." % { variable: "<code>$CI_ENVIRONMENT_SLUG</code>" }).html_safe
            = link_to s_('PrometheusService|More information'), help_page_path('operations/metrics/dashboards/variables.md', anchor: 'query-variables')
      %ul.list-unstyled.metrics-list.js-missing-var-metrics-list