Define dashboard dropdowns layout in flex

Ensure the metric dashboard filter bar dropdowns and buttons are
consistent in their width, and scale well on different screen sizes

- Removed column layout and used flex instead
- Fixed an issue with the dropdown tooltip
- Tested on mobile and tablet as well as desktop

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

@@ -8,7 +8,6 @@ import {
   GlDropdownItem,
   GlDropdownHeader,
   GlDropdownDivider,
-  GlFormGroup,
   GlModal,
   GlLoadingIcon,
   GlSearchBoxByType,
@@ -46,7 +45,6 @@ export default {
     GlDropdownHeader,
     GlDropdownDivider,
     GlSearchBoxByType,
-    GlFormGroup,
     GlModal,
 
     DateTimePicker,
@@ -378,45 +376,34 @@ export default {
     <div
       v-if="showHeader"
       ref="prometheusGraphsHeader"
-      class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light"
-    >
-      <div class="row">
-        <gl-form-group
-          :label="__('Dashboard')"
-          label-size="sm"
-          label-for="monitor-dashboards-dropdown"
-          class="col-sm-12 col-md-6 col-lg-2"
+      class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
     >
+      <div class="mb-2 pr-2 d-flex d-sm-block">
         <dashboards-dropdown
           id="monitor-dashboards-dropdown"
           data-qa-selector="dashboards_filter_dropdown"
-            class="mb-0 d-flex"
+          class="flex-grow-1"
           toggle-class="dropdown-menu-toggle"
           :default-branch="defaultBranch"
           :selected-dashboard="selectedDashboard"
           @selectDashboard="selectDashboard($event)"
         />
-        </gl-form-group>
+      </div>
 
-        <gl-form-group
-          :label="s__('Metrics|Environment')"
-          label-size="sm"
-          label-for="monitor-environments-dropdown"
-          class="col-sm-6 col-md-6 col-lg-2"
-        >
+      <div class="mb-2 pr-2 d-flex d-sm-block">
         <gl-dropdown
           id="monitor-environments-dropdown"
           ref="monitorEnvironmentsDropdown"
+          class="flex-grow-1"
           data-qa-selector="environments_dropdown"
-            class="mb-0 d-flex"
           toggle-class="dropdown-menu-toggle"
           menu-class="monitor-environment-dropdown-menu"
           :text="currentEnvironmentName"
         >
           <div class="d-flex flex-column overflow-hidden">
-              <gl-dropdown-header class="monitor-environment-dropdown-header text-center">{{
-                __('Environment')
-              }}</gl-dropdown-header>
+            <gl-dropdown-header class="monitor-environment-dropdown-header text-center">
+              {{ __('Environment') }}
+            </gl-dropdown-header>
             <gl-dropdown-divider />
             <gl-search-box-by-type
               ref="monitorEnvironmentsDropdownSearch"
@@ -447,61 +434,57 @@ export default {
             </div>
           </div>
         </gl-dropdown>
-        </gl-form-group>
+      </div>
 
-        <gl-form-group
-          :label="s__('Metrics|Show last')"
-          label-size="sm"
-          label-for="monitor-time-window-dropdown"
-          class="col-sm-auto col-md-auto col-lg-auto"
-          data-qa-selector="show_last_dropdown"
-        >
+      <div class="mb-2 pr-2 d-flex d-sm-block">
         <date-time-picker
           ref="dateTimePicker"
+          class="flex-grow-1 show-last-dropdown"
+          data-qa-selector="show_last_dropdown"
           :value="selectedTimeRange"
           :options="timeRanges"
           @input="onDateTimePickerInput"
           @invalid="onDateTimePickerInvalid"
         />
-        </gl-form-group>
+      </div>
 
-        <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
+      <div class="mb-2 pr-2 d-flex d-sm-block">
         <gl-deprecated-button
           ref="refreshDashboardBtn"
           v-gl-tooltip
+          class="flex-grow-1"
           variant="default"
           :title="s__('Metrics|Refresh dashboard')"
           @click="refreshDashboard"
         >
           <icon name="retry" />
         </gl-deprecated-button>
-        </gl-form-group>
+      </div>
 
-        <gl-form-group
-          v-if="hasHeaderButtons"
-          label-for="prometheus-graphs-dropdown-buttons"
-          class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end"
-        >
-          <div id="prometheus-graphs-dropdown-buttons">
+      <div class="flex-grow-1"></div>
+
+      <div class="d-sm-flex">
+        <div v-if="showRearrangePanelsBtn" class="mb-2 mr-2 d-flex">
           <gl-deprecated-button
-              v-if="showRearrangePanelsBtn"
             :pressed="isRearrangingPanels"
             variant="default"
-              class="mr-2 mt-1 js-rearrange-button"
+            class="flex-grow-1 js-rearrange-button"
             @click="toggleRearrangingPanels"
-              >{{ __('Arrange charts') }}</gl-deprecated-button
           >
+            {{ __('Arrange charts') }}
+          </gl-deprecated-button>
+        </div>
+        <div v-if="addingMetricsAvailable" class="mb-2 mr-2 d-flex d-sm-block">
           <gl-deprecated-button
-              v-if="addingMetricsAvailable"
             ref="addMetricBtn"
             v-gl-modal="$options.addMetric.modalId"
             variant="outline-success"
             data-qa-selector="add_metric_button"
-              class="mr-2 mt-1"
-              >{{ $options.addMetric.title }}</gl-deprecated-button
+            class="flex-grow-1"
           >
+            {{ $options.addMetric.title }}
+          </gl-deprecated-button>
           <gl-modal
-              v-if="addingMetricsAvailable"
             ref="addMetricModal"
             :modal-id="$options.addMetric.modalId"
             :title="$options.addMetric.title"
@@ -514,41 +497,43 @@ export default {
               />
             </form>
             <div slot="modal-footer">
-                <gl-deprecated-button @click="hideAddMetricModal">{{
-                  __('Cancel')
-                }}</gl-deprecated-button>
+              <gl-deprecated-button @click="hideAddMetricModal">
+                {{ __('Cancel') }}
+              </gl-deprecated-button>
               <gl-deprecated-button
                 ref="submitCustomMetricsFormBtn"
                 v-track-event="getAddMetricTrackingOptions()"
                 :disabled="!formIsValid"
                 variant="success"
                 @click="submitCustomMetricsForm"
-                  >{{ __('Save changes') }}</gl-deprecated-button
               >
+                {{ __('Save changes') }}
+              </gl-deprecated-button>
             </div>
           </gl-modal>
+        </div>
 
+        <div v-if="selectedDashboard.can_edit" class="mb-2 mr-2 d-flex d-sm-block">
           <gl-deprecated-button
-              v-if="selectedDashboard.can_edit"
-              class="mt-1 js-edit-link"
+            class="flex-grow-1 js-edit-link"
             :href="selectedDashboard.project_blob_path"
             data-qa-selector="edit_dashboard_button"
-              >{{ __('Edit dashboard') }}</gl-deprecated-button
           >
+            {{ __('Edit dashboard') }}
+          </gl-deprecated-button>
+        </div>
 
+        <div v-if="externalDashboardUrl.length" class="mb-2 mr-2 d-flex d-sm-block">
           <gl-deprecated-button
-              v-if="externalDashboardUrl.length"
-              class="mt-1 js-external-dashboard-link"
+            class="flex-grow-1 js-external-dashboard-link"
             variant="primary"
             :href="externalDashboardUrl"
             target="_blank"
             rel="noopener noreferrer"
           >
-              {{ __('View full dashboard') }}
-              <icon name="external-link" />
+            {{ __('View full dashboard') }} <icon name="external-link" />
           </gl-deprecated-button>
         </div>
-        </gl-form-group>
       </div>
     </div>
 

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -158,7 +158,7 @@ export default {
 <template>
   <tooltip-on-truncate
     :title="timeWindowText"
-    :truncate-target="elem => elem.querySelector('.date-time-picker-toggle')"
+    :truncate-target="elem => elem.querySelector('.gl-dropdown-toggle-text')"
     placement="top"
     class="d-inline-block"
   >

app/assets/stylesheets/pages/prometheus.scss

@@ -64,6 +64,12 @@
       padding: $gl-padding-8 $gl-padding-12;
     }
   }
+
+  .show-last-dropdown {
+    // same as in .dropdown-menu-toggle
+    // see app/assets/stylesheets/framework/dropdowns.scss
+    width: 160px;
+  }
 }
 
 .prometheus-panel {

changelogs/unreleased/202541-dashboard-filters-should-scale-different-screens.yml

+---
+title: Define dashboard dropdowns layout in flex to improve support smaller screens
+merge_request: 29477
+author:
+type: changed

locale/gitlab.pot

@@ -12964,9 +12964,6 @@ msgid_plural "Metrics|Edit metrics"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Metrics|Environment"
-msgstr ""
-
 msgid "Metrics|For grouping similar metrics"
 msgstr ""
 
@@ -13000,9 +12997,6 @@ msgstr ""
 msgid "Metrics|Refresh dashboard"
 msgstr ""
 
-msgid "Metrics|Show last"
-msgstr ""
-
 msgid "Metrics|There was an error creating the dashboard."
 msgstr ""
 

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -6,35 +6,26 @@ exports[`Dashboard template matches the default snapshot 1`] = `
   data-qa-selector="prometheus_graphs"
 >
   <div
-    class="prometheus-graphs-header gl-p-3 pb-0 border-bottom bg-gray-light"
+    class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light"
   >
     <div
-      class="row"
-    >
-      <gl-form-group-stub
-        class="col-sm-12 col-md-6 col-lg-2"
-        label="Dashboard"
-        label-for="monitor-dashboards-dropdown"
-        label-size="sm"
+      class="mb-2 pr-2 d-flex d-sm-block"
     >
       <dashboards-dropdown-stub
-          class="mb-0 d-flex"
+        class="flex-grow-1"
         data-qa-selector="dashboards_filter_dropdown"
         defaultbranch="master"
         id="monitor-dashboards-dropdown"
         selecteddashboard="[object Object]"
         toggle-class="dropdown-menu-toggle"
       />
-      </gl-form-group-stub>
+    </div>
      
-      <gl-form-group-stub
-        class="col-sm-6 col-md-6 col-lg-2"
-        label="Environment"
-        label-for="monitor-environments-dropdown"
-        label-size="sm"
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
     >
       <gl-dropdown-stub
-          class="mb-0 d-flex"
+        class="flex-grow-1"
         data-qa-selector="environments_dropdown"
         id="monitor-environments-dropdown"
         menu-class="monitor-environment-dropdown-menu"
@@ -47,7 +38,9 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           <gl-dropdown-header-stub
             class="monitor-environment-dropdown-header text-center"
           >
+            
             Environment
+          
           </gl-dropdown-header-stub>
            
           <gl-dropdown-divider-stub />
@@ -71,26 +64,25 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           </div>
         </div>
       </gl-dropdown-stub>
-      </gl-form-group-stub>
+    </div>
      
-      <gl-form-group-stub
-        class="col-sm-auto col-md-auto col-lg-auto"
-        data-qa-selector="show_last_dropdown"
-        label="Show last"
-        label-for="monitor-time-window-dropdown"
-        label-size="sm"
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
     >
       <date-time-picker-stub
+        class="flex-grow-1 show-last-dropdown"
         customenabled="true"
+        data-qa-selector="show_last_dropdown"
         options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         value="[object Object]"
       />
-      </gl-form-group-stub>
+    </div>
      
-      <gl-form-group-stub
-        class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"
+    <div
+      class="mb-2 pr-2 d-flex d-sm-block"
     >
       <gl-deprecated-button-stub
+        class="flex-grow-1"
         size="md"
         title="Refresh dashboard"
         variant="default"
@@ -100,7 +92,20 @@ exports[`Dashboard template matches the default snapshot 1`] = `
           size="16"
         />
       </gl-deprecated-button-stub>
-      </gl-form-group-stub>
+    </div>
+     
+    <div
+      class="flex-grow-1"
+    />
+     
+    <div
+      class="d-sm-flex"
+    >
+      <!---->
+       
+      <!---->
+       
+      <!---->
        
       <!---->
     </div>