Add Prometheus Metrics Bundle, panel for Missing environment variables

app/views/projects/services/prometheus/_show.html.haml

-.row.prepend-top-default.append-bottom-default.prometheus-metrics-monitoring
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('prometheus_metrics')
+
+.row.prepend-top-default.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
   .col-lg-3
     %h4.prepend-top-0
       Metrics
@@ -8,14 +11,28 @@
       More information
   .col-lg-9
-    .panel.panel-default
+    .panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project)}.json" } }
       .panel-heading
         %h3.panel-title
           Monitored
           %span.badge-count.js-monitored-count 0
       .panel-body
-        .empty-metrics
+        .loading-metrics.js-loading-metrics
+          = icon('spinner spin 3x')
+          %p Finding and configuring metrics...
+        .empty-metrics.hidden.js-empty-metrics
           = custom_icon('icon_empty_metrics')
           %p No metrics are being monitored. To start monitoring, deploy to an environment.
           = link_to project_environments_path(@project), title: 'View environments', class: 'btn btn-success' do
-            View environments
\ No newline at end of file
+            View environments
+        %ul.metrics-list.hidden.js-metrics-list
+
+    .panel.panel-default.js-panel-missing-env-vars
+      .panel-heading
+        %h3.panel-title
+          = icon('caret-right lg', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
+          Missing environment variable(s)
+          %span.badge-count.js-env-var-count 0
+      .panel-body.hidden
+        .empty-metrics
+          %p Nothing to show here at the moment
\ No newline at end of file