Merge branch '64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled' into 'master'

Improve layout of dropdowns in the metrics dashboard page

Closes #64730

See merge request gitlab-org/gitlab-ce!31239

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

@@ -3,6 +3,7 @@ import {
   GlButton,
   GlDropdown,
   GlDropdownItem,
+  GlFormGroup,
   GlModal,
   GlModalDirective,
   GlTooltipDirective,
@@ -34,6 +35,7 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
+    GlFormGroup,
     GlModal,
   },
   directives: {
@@ -278,15 +280,19 @@ export default {
 
 <template>
   <div class="prometheus-graphs">
-    <div class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between">
-      <div
-        v-if="environmentsEndpoint"
-        class="dropdowns d-flex align-items-center justify-content-between"
+    <div class="gl-p-3 pb-0 border-bottom bg-gray-light">
+      <div class="row">
+        <template v-if="environmentsEndpoint">
+          <gl-form-group
+            v-if="multipleDashboardsEnabled"
+            :label="__('Dashboard')"
+            label-size="sm"
+            label-for="monitor-dashboards-dropdown"
+            class="col-sm-12 col-md-4 col-lg-2"
           >
-        <div v-if="multipleDashboardsEnabled" class="d-flex align-items-center">
-          <label class="mb-0">{{ __('Dashboard') }}</label>
             <gl-dropdown
-            class="ml-2 mr-3 js-dashboards-dropdown"
+              id="monitor-dashboards-dropdown"
+              class="mb-0 d-flex js-dashboards-dropdown"
               toggle-class="dropdown-menu-toggle"
               :text="selectedDashboardText"
             >
@@ -296,15 +302,20 @@ export default {
                 :active="dashboard.path === currentDashboard"
                 active-class="is-active"
                 :href="`?dashboard=${dashboard.path}`"
+                >{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
               >
-              {{ dashboard.display_name || dashboard.path }}
-            </gl-dropdown-item>
             </gl-dropdown>
-        </div>
-        <div class="d-flex align-items-center">
-          <strong>{{ s__('Metrics|Environment') }}</strong>
+          </gl-form-group>
+
+          <gl-form-group
+            :label="s__('Metrics|Environment')"
+            label-size="sm"
+            label-for="monitor-environments-dropdown"
+            class="col-sm-6 col-md-4 col-lg-2"
+          >
             <gl-dropdown
-            class="prepend-left-10 js-environments-dropdown"
+              id="monitor-environments-dropdown"
+              class="mb-0 d-flex js-environments-dropdown"
               toggle-class="dropdown-menu-toggle"
               :text="currentEnvironmentName"
               :disabled="environments.length === 0"
@@ -318,11 +329,18 @@ export default {
                 >{{ environment.name }}</gl-dropdown-item
               >
             </gl-dropdown>
-        </div>
-        <div v-if="!showEmptyState" class="d-flex align-items-center prepend-left-8">
-          <strong>{{ s__('Metrics|Show last') }}</strong>
+          </gl-form-group>
+
+          <gl-form-group
+            v-if="!showEmptyState"
+            :label="s__('Metrics|Show last')"
+            label-size="sm"
+            label-for="monitor-time-window-dropdown"
+            class="col-sm-6 col-md-4 col-lg-2"
+          >
             <gl-dropdown
-            class="prepend-left-10 js-time-window-dropdown"
+              id="monitor-time-window-dropdown"
+              class="mb-0 d-flex js-time-window-dropdown"
               toggle-class="dropdown-menu-toggle"
               :text="selectedTimeWindow"
             >
@@ -335,16 +353,24 @@ export default {
                 >{{ value }}</gl-dropdown-item
               >
             </gl-dropdown>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div v-if="addingMetricsAvailable">
+          </gl-form-group>
+        </template>
+
+        <gl-form-group
+          v-if="addingMetricsAvailable || externalDashboardUrl.length"
+          label-for="prometheus-graphs-dropdown-buttons"
+          class="dropdown-buttons col-lg d-lg-flex align-items-end"
+        >
+          <div id="prometheus-graphs-dropdown-buttons">
             <gl-button
+              v-if="addingMetricsAvailable"
               v-gl-modal="$options.addMetric.modalId"
-            class="js-add-metric-button text-success border-success"
-            >{{ $options.addMetric.title }}</gl-button
+              class="mr-2 mt-1 js-add-metric-button text-success border-success"
             >
+              {{ $options.addMetric.title }}
+            </gl-button>
             <gl-modal
+              v-if="addingMetricsAvailable"
               ref="addMetricModal"
               :modal-id="$options.addMetric.modalId"
               :title="$options.addMetric.title"
@@ -362,23 +388,28 @@ export default {
                   :disabled="!formIsValid"
                   variant="success"
                   @click="submitCustomMetricsForm"
-                >{{ __('Save changes') }}</gl-button
                 >
+                  {{ __('Save changes') }}
+                </gl-button>
               </div>
             </gl-modal>
-        </div>
+
             <gl-button
               v-if="externalDashboardUrl.length"
-          class="js-external-dashboard-link prepend-left-8"
+              class="mt-1 js-external-dashboard-link"
               variant="primary"
               :href="externalDashboardUrl"
               target="_blank"
+              rel="noopener noreferrer"
             >
               {{ __('View full dashboard') }}
               <icon name="external-link" />
             </gl-button>
           </div>
+        </gl-form-group>
       </div>
+    </div>
+
     <div v-if="!showEmptyState">
       <graph-group
         v-for="(groupData, index) in groups"

app/assets/stylesheets/pages/prometheus.scss

 .prometheus-graphs {
-  .dropdowns {
-    .dropdown-menu-toggle {
-      svg {
-        position: absolute;
-        right: 5%;
-        top: 25%;
+  .dropdown-buttons {
+    > div {
+      margin-left: auto;
     }
   }
 
-    .dropdown-menu-toggle,
-    .dropdown-menu {
-      width: 240px;
+  .col-form-label {
+    line-height: 1;
+    padding-top: 0;
   }
+
+  .form-group {
+    margin-bottom: map-get($spacing-scale, 3);
   }
 }
 

changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml

+---
+title: Improve layout of dropdowns in the metrics dashboard page
+merge_request: 31239
+author:
+type: fixed