Add dropdown, without data

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -155,8 +155,30 @@ export default {
 <template>
   <div
     v-if="!showEmptyState"
-    class="prometheus-graphs"
+    class="prometheus-graphs prepend-top-10"
   >
+    <div class="environments">
+      Environment
+      <div class="dropdown prepend-left-10">
+        <!--Set up the actual data-->
+        <button
+          class="dropdown-menu-toggle"
+          data-toggle="dropdown"
+          type="button"
+        >
+          Production
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+          <a
+            href="#"
+            class="dropdown-item"
+          >
+            Staging
+          </a>
+        </div>
+      </div>
+    </div>
     <graph-group
       v-for="(groupData, index) in store.groups"
       :key="index"

app/assets/stylesheets/pages/environments.scss

@@ -222,6 +222,13 @@
   }
 }
 
+.prometheus-graphs {
+  .environments {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .environments-actions {
   .external-url,
   .monitoring-url,

app/views/projects/environments/metrics.html.haml

@@ -2,14 +2,6 @@
 - page_title "Metrics for environment", @environment.name
 
 .prometheus-container{ class: container_class }
-  .top-area
-    .row
-      .col-sm-6
-        %h3
-          Environment:
-          = link_to @environment.name, environment_path(@environment)
-          = @environments.to_a
-
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
     "clusters-path": project_clusters_path(@project),
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),