1 files changed, 28 insertions, 0 deletions
diff --git a/app/views/shared/integrations/prometheus/_custom_metrics.html.haml b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
new file mode 100644
index 00000000000..896249c6163
--- /dev/null
+++ b/app/views/shared/integrations/prometheus/_custom_metrics.html.haml
@@ -0,0 +1,28 @@
+- project = local_assigns.fetch(:project)
+
+.col-lg-3
+  %p
+    = s_('PrometheusService|Custom metrics require Prometheus installed on a cluster with environment scope "*" OR a manually configured Prometheus to be available.')
+    = link_to s_('PrometheusService|More information'), help_page_path('operations/metrics/index.md', anchor: 'adding-custom-metrics'), target: '_blank', rel: "noopener noreferrer"
+
+.col-lg-9
+  .card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { qa_selector: 'custom_metrics_container', active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{integration.active}" } }
+    .card-header
+      %strong
+        = s_('PrometheusService|Custom metrics')
+      = gl_badge_tag 0, nil, class: 'js-custom-monitored-count'
+      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn gl-button btn-confirm gl-ml-auto js-new-metric-button hidden', data: { qa_selector: 'new_metric_button' }
+    .card-body
+      .flash-container.hidden
+        .flash-warning
+          .flash-text
+      .loading-metrics.js-loading-custom-metrics
+        %p.m-3
+          = gl_loading_icon(inline: true, css_class: 'metrics-load-spinner')
+          = s_('PrometheusService|Finding custom metrics...')
+      .empty-metrics.hidden.js-empty-custom-metrics
+        %p.text-tertiary.m-3.js-no-active-integration-text.hidden
+          = s_('PrometheusService|Enable Prometheus to define custom metrics, using either option above')
+        %p.text-tertiary.m-3.js-new-metric-text.hidden
+          = s_('PrometheusService|No custom metrics have been created. Create one using the button above')
+      %ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list