From ba82fb6dd4f29feca596dc72580d3b546f77bb88 Mon Sep 17 00:00:00 2001
From: Miguel Rincon <mrincon@gitlab.com>
Date: Fri, 9 Aug 2019 15:45:18 +0000
Subject: [PATCH] Improve layout of dropdowns in metrics page

Ensure layout works on xs and sm screens

Add check in case buttons are not present

Apply Prettier to file

Remove unused class and div, reduce margins
---
 .../monitoring/components/dashboard.vue       | 221 ++++++++++--------
 app/assets/stylesheets/pages/prometheus.scss  |  22 +-
 ...u-is-cramped-with-new-features-enabled.yml |   5 +
 3 files changed, 142 insertions(+), 106 deletions(-)
 create mode 100644 changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 5892c18ac91..782e4310f3e 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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,107 +280,136 @@ 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 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"
-            toggle-class="dropdown-menu-toggle"
-            :text="selectedDashboardText"
+    <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"
           >
-            <gl-dropdown-item
-              v-for="dashboard in allDashboards"
-              :key="dashboard.path"
-              :active="dashboard.path === currentDashboard"
-              active-class="is-active"
-              :href="`?dashboard=${dashboard.path}`"
+            <gl-dropdown
+              id="monitor-dashboards-dropdown"
+              class="mb-0 d-flex js-dashboards-dropdown"
+              toggle-class="dropdown-menu-toggle"
+              :text="selectedDashboardText"
             >
-              {{ dashboard.display_name || dashboard.path }}
-            </gl-dropdown-item>
-          </gl-dropdown>
-        </div>
-        <div class="d-flex align-items-center">
-          <strong>{{ s__('Metrics|Environment') }}</strong>
-          <gl-dropdown
-            class="prepend-left-10 js-environments-dropdown"
-            toggle-class="dropdown-menu-toggle"
-            :text="currentEnvironmentName"
-            :disabled="environments.length === 0"
-          >
-            <gl-dropdown-item
-              v-for="environment in environments"
-              :key="environment.id"
-              :active="environment.name === currentEnvironmentName"
-              active-class="is-active"
-              :href="environment.metrics_path"
-              >{{ 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-dropdown
-            class="prepend-left-10 js-time-window-dropdown"
-            toggle-class="dropdown-menu-toggle"
-            :text="selectedTimeWindow"
-          >
-            <gl-dropdown-item
-              v-for="(value, key) in timeWindows"
-              :key="key"
-              :active="activeTimeWindow(key)"
-              :href="setTimeWindowParameter(key)"
-              active-class="active"
-              >{{ value }}</gl-dropdown-item
-            >
-          </gl-dropdown>
-        </div>
-      </div>
-      <div class="d-flex">
-        <div v-if="addingMetricsAvailable">
-          <gl-button
-            v-gl-modal="$options.addMetric.modalId"
-            class="js-add-metric-button text-success border-success"
-            >{{ $options.addMetric.title }}</gl-button
-          >
-          <gl-modal
-            ref="addMetricModal"
-            :modal-id="$options.addMetric.modalId"
-            :title="$options.addMetric.title"
-          >
-            <form ref="customMetricsForm" :action="customMetricsPath" method="post">
-              <custom-metrics-form-fields
-                :validate-query-path="validateQueryPath"
-                form-operation="post"
-                @formValidation="setFormValidity"
-              />
-            </form>
-            <div slot="modal-footer">
-              <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
-              <gl-button
-                :disabled="!formIsValid"
-                variant="success"
-                @click="submitCustomMetricsForm"
-                >{{ __('Save changes') }}</gl-button
+              <gl-dropdown-item
+                v-for="dashboard in allDashboards"
+                :key="dashboard.path"
+                :active="dashboard.path === currentDashboard"
+                active-class="is-active"
+                :href="`?dashboard=${dashboard.path}`"
+                >{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
               >
-            </div>
-          </gl-modal>
-        </div>
-        <gl-button
-          v-if="externalDashboardUrl.length"
-          class="js-external-dashboard-link prepend-left-8"
-          variant="primary"
-          :href="externalDashboardUrl"
-          target="_blank"
+            </gl-dropdown>
+          </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
+              id="monitor-environments-dropdown"
+              class="mb-0 d-flex js-environments-dropdown"
+              toggle-class="dropdown-menu-toggle"
+              :text="currentEnvironmentName"
+              :disabled="environments.length === 0"
+            >
+              <gl-dropdown-item
+                v-for="environment in environments"
+                :key="environment.id"
+                :active="environment.name === currentEnvironmentName"
+                active-class="is-active"
+                :href="environment.metrics_path"
+                >{{ environment.name }}</gl-dropdown-item
+              >
+            </gl-dropdown>
+          </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
+              id="monitor-time-window-dropdown"
+              class="mb-0 d-flex js-time-window-dropdown"
+              toggle-class="dropdown-menu-toggle"
+              :text="selectedTimeWindow"
+            >
+              <gl-dropdown-item
+                v-for="(value, key) in timeWindows"
+                :key="key"
+                :active="activeTimeWindow(key)"
+                :href="setTimeWindowParameter(key)"
+                active-class="active"
+                >{{ value }}</gl-dropdown-item
+              >
+            </gl-dropdown>
+          </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"
         >
-          {{ __('View full dashboard') }}
-          <icon name="external-link" />
-        </gl-button>
+          <div id="prometheus-graphs-dropdown-buttons">
+            <gl-button
+              v-if="addingMetricsAvailable"
+              v-gl-modal="$options.addMetric.modalId"
+              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"
+            >
+              <form ref="customMetricsForm" :action="customMetricsPath" method="post">
+                <custom-metrics-form-fields
+                  :validate-query-path="validateQueryPath"
+                  form-operation="post"
+                  @formValidation="setFormValidity"
+                />
+              </form>
+              <div slot="modal-footer">
+                <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
+                <gl-button
+                  :disabled="!formIsValid"
+                  variant="success"
+                  @click="submitCustomMetricsForm"
+                >
+                  {{ __('Save changes') }}
+                </gl-button>
+              </div>
+            </gl-modal>
+
+            <gl-button
+              v-if="externalDashboardUrl.length"
+              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"
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 05a4cc168a8..72f1b5307ec 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -1,17 +1,17 @@
 .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);
   }
 }
 
diff --git a/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml b/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml
new file mode 100644
index 00000000000..c564b98bb41
--- /dev/null
+++ b/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml
@@ -0,0 +1,5 @@
+---
+title: Improve layout of dropdowns in the metrics dashboard page
+merge_request: 31239
+author:
+type: fixed