Skip to content

G
gitlab-ce
Commit 8d6f1313 authored by Miguel Rincon's avatar Miguel Rincon
Browse files
Options

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
parent 7b5ad03d
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 247 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ 8d6f1313
......@@ -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,177 +376,164 @@ export default {
<div
v-if="showHeader"
ref="prometheusGraphsHeader"
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
:label="__('Dashboard')"
label-size="sm"
label-for="monitor-dashboards-dropdown"
class="col-sm-12 col-md-6 col-lg-2"
>
<dashboards-dropdown
id="monitor-dashboards-dropdown"
data-qa-selector="dashboards_filter_dropdown"
class="mb-0 d-flex"
toggle-class="dropdown-menu-toggle"
:default-branch="defaultBranch"
:selected-dashboard="selectedDashboard"
@selectDashboard="selectDashboard($event)"
/>
</gl-form-group>
<div class="mb-2 pr-2 d-flex d-sm-block">
<dashboards-dropdown
id="monitor-dashboards-dropdown"
data-qa-selector="dashboards_filter_dropdown"
class="flex-grow-1"
toggle-class="dropdown-menu-toggle"
:default-branch="defaultBranch"
:selected-dashboard="selectedDashboard"
@selectDashboard="selectDashboard($event)"
/>
</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"
toggle-class="dropdown-menu-toggle"
menu-class="monitor-environment-dropdown-menu"
:text="currentEnvironmentName"
>
<gl-dropdown
id="monitor-environments-dropdown"
ref="monitorEnvironmentsDropdown"
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-divider />
<gl-search-box-by-type
ref="monitorEnvironmentsDropdownSearch"
class="m-2"
@input="debouncedEnvironmentsSearch"
/>
<gl-loading-icon
v-if="environmentsLoading"
ref="monitorEnvironmentsDropdownLoading"
:inline="true"
/>
<div v-else class="flex-fill overflow-auto">
<gl-dropdown-item
v-for="environment in filteredEnvironments"
:key="environment.id"
:active="environment.name === currentEnvironmentName"
active-class="is-active"
:href="environment.metrics_path"
>{{ environment.name }}</gl-dropdown-item
>
</div>
<div
v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"
ref="monitorEnvironmentsDropdownMsg"
class="text-secondary no-matches-message"
<div class="d-flex flex-column overflow-hidden">
<gl-dropdown-header class="monitor-environment-dropdown-header text-center">
{{ __('Environment') }}
</gl-dropdown-header>
<gl-dropdown-divider />
<gl-search-box-by-type
ref="monitorEnvironmentsDropdownSearch"
class="m-2"
@input="debouncedEnvironmentsSearch"
/>
<gl-loading-icon
v-if="environmentsLoading"
ref="monitorEnvironmentsDropdownLoading"
:inline="true"
/>
<div v-else class="flex-fill overflow-auto">
<gl-dropdown-item
v-for="environment in filteredEnvironments"
:key="environment.id"
:active="environment.name === currentEnvironmentName"
active-class="is-active"
:href="environment.metrics_path"
>{{ environment.name }}</gl-dropdown-item
>
{{ __('No matching results') }}
</div>
</div>
</gl-dropdown>
</gl-form-group>
<div
v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"
ref="monitorEnvironmentsDropdownMsg"
class="text-secondary no-matches-message"
>
{{ __('No matching results') }}
</div>
</div>
</gl-dropdown>
</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"
<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"
/>
</div>
<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"
>
<date-time-picker
ref="dateTimePicker"
:value="selectedTimeRange"
:options="timeRanges"
@input="onDateTimePickerInput"
@invalid="onDateTimePickerInvalid"
/>
</gl-form-group>
<icon name="retry" />
</gl-deprecated-button>
</div>
<gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
<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
ref="refreshDashboardBtn"
v-gl-tooltip
:pressed="isRearrangingPanels"
variant="default"
:title="s__('Metrics|Refresh dashboard')"
@click="refreshDashboard"
class="flex-grow-1 js-rearrange-button"
@click="toggleRearrangingPanels"
>
<icon name="retry" />
{{ __('Arrange charts') }}
</gl-deprecated-button>
</gl-form-group>
<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">
<gl-deprecated-button
v-if="showRearrangePanelsBtn"
:pressed="isRearrangingPanels"
variant="default"
class="mr-2 mt-1 js-rearrange-button"
@click="toggleRearrangingPanels"
>{{ __('Arrange charts') }}</gl-deprecated-button
>
<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
>
<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-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
>
</div>
</gl-modal>
</div>
<div v-if="addingMetricsAvailable" class="mb-2 mr-2 d-flex d-sm-block">
<gl-deprecated-button
ref="addMetricBtn"
v-gl-modal="$options.addMetric.modalId"
variant="outline-success"
data-qa-selector="add_metric_button"
class="flex-grow-1"
>
{{ $options.addMetric.title }}
</gl-deprecated-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-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>
</div>
</gl-modal>
</div>
<gl-deprecated-button
v-if="selectedDashboard.can_edit"
class="mt-1 js-edit-link"
:href="selectedDashboard.project_blob_path"
data-qa-selector="edit_dashboard_button"
>{{ __('Edit dashboard') }}</gl-deprecated-button
>
<div v-if="selectedDashboard.can_edit" class="mb-2 mr-2 d-flex d-sm-block">
<gl-deprecated-button
class="flex-grow-1 js-edit-link"
:href="selectedDashboard.project_blob_path"
data-qa-selector="edit_dashboard_button"
>
{{ __('Edit dashboard') }}
</gl-deprecated-button>
</div>
<gl-deprecated-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-deprecated-button>
</div>
</gl-form-group>
<div v-if="externalDashboardUrl.length" class="mb-2 mr-2 d-flex d-sm-block">
<gl-deprecated-button
class="flex-grow-1 js-external-dashboard-link"
variant="primary"
:href="externalDashboardUrl"
target="_blank"
rel="noopener noreferrer"
>
{{ __('View full dashboard') }} <icon name="external-link" />
</gl-deprecated-button>
</div>
</div>
</div>
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
View file @ 8d6f1313
......@@ -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
View file @ 8d6f1313
......@@ -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 0 → 100644
View file @ 8d6f1313
---
title: Define dashboard dropdowns layout in flex to improve support smaller screens
merge_request: 29477
author:
type: changed
locale/gitlab.pot
View file @ 8d6f1313
......@@ -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
View file @ 8d6f1313
......@@ -6,101 +6,106 @@ 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"
class="mb-2 pr-2 d-flex d-sm-block"
>
<gl-form-group-stub
class="col-sm-12 col-md-6 col-lg-2"
label="Dashboard"
label-for="monitor-dashboards-dropdown"
label-size="sm"
>
<dashboards-dropdown-stub
class="mb-0 d-flex"
data-qa-selector="dashboards_filter_dropdown"
defaultbranch="master"
id="monitor-dashboards-dropdown"
selecteddashboard="[object Object]"
toggle-class="dropdown-menu-toggle"
/>
</gl-form-group-stub>
<gl-form-group-stub
class="col-sm-6 col-md-6 col-lg-2"
label="Environment"
label-for="monitor-environments-dropdown"
label-size="sm"
<dashboards-dropdown-stub
class="flex-grow-1"
data-qa-selector="dashboards_filter_dropdown"
defaultbranch="master"
id="monitor-dashboards-dropdown"
selecteddashboard="[object Object]"
toggle-class="dropdown-menu-toggle"
/>
</div>
<div
class="mb-2 pr-2 d-flex d-sm-block"
>
<gl-dropdown-stub
class="flex-grow-1"
data-qa-selector="environments_dropdown"
id="monitor-environments-dropdown"
menu-class="monitor-environment-dropdown-menu"
text="production"
toggle-class="dropdown-menu-toggle"
>
<gl-dropdown-stub
class="mb-0 d-flex"
data-qa-selector="environments_dropdown"
id="monitor-environments-dropdown"
menu-class="monitor-environment-dropdown-menu"
text="production"
toggle-class="dropdown-menu-toggle"
<div
class="d-flex flex-column overflow-hidden"
>
<gl-dropdown-header-stub
class="monitor-environment-dropdown-header text-center"
>
Environment
</gl-dropdown-header-stub>
<gl-dropdown-divider-stub />
<gl-search-box-by-type-stub
class="m-2"
clearbuttontitle="Clear"
value=""
/>
<div
class="flex-fill overflow-auto"
/>
<div
class="d-flex flex-column overflow-hidden"
class="text-secondary no-matches-message"
>
<gl-dropdown-header-stub
class="monitor-environment-dropdown-header text-center"
>
Environment
</gl-dropdown-header-stub>
<gl-dropdown-divider-stub />
<gl-search-box-by-type-stub
class="m-2"
clearbuttontitle="Clear"
value=""
/>
<div
class="flex-fill overflow-auto"
/>
<div
class="text-secondary no-matches-message"
>
No matching results
</div>
No matching results
</div>
</gl-dropdown-stub>
</gl-form-group-stub>
<gl-form-group-stub
class="col-sm-auto col-md-auto col-lg-auto"
</div>
</gl-dropdown-stub>
</div>
<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"
label="Show last"
label-for="monitor-time-window-dropdown"
label-size="sm"
options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
value="[object Object]"
/>
</div>
<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"
>
<date-time-picker-stub
customenabled="true"
options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
value="[object Object]"
<icon-stub
name="retry"
size="16"
/>
</gl-form-group-stub>
</gl-deprecated-button-stub>
</div>
<div
class="flex-grow-1"
/>
<div
class="d-sm-flex"
>
<!---->
<gl-form-group-stub
class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button"
>
<gl-deprecated-button-stub
size="md"
title="Refresh dashboard"
variant="default"
>
<icon-stub
name="retry"
size="16"
/>
</gl-deprecated-button-stub>
</gl-form-group-stub>
<!---->
<!---->
<!---->
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7