Skip to content

G
gitlab-ce
Commit 366dbfb6 authored by Martin Wortschack's avatar Martin Wortschack
Browse files
Options

Merge branch '202541-dashboard-filters-should-scale-different-screens' into 'master' 

Define dashboard dropdowns layout in flex

See merge request gitlab-org/gitlab!29477
parents 9bf7a9ba 8d6f1313
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 247 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ 366dbfb6
...@@ -8,7 +8,6 @@ import { ...@@ -8,7 +8,6 @@ import {
GlDropdownItem, GlDropdownItem,
GlDropdownHeader, GlDropdownHeader,
GlDropdownDivider, GlDropdownDivider,
GlFormGroup,
GlModal, GlModal,
GlLoadingIcon, GlLoadingIcon,
GlSearchBoxByType, GlSearchBoxByType,
...@@ -46,7 +45,6 @@ export default { ...@@ -46,7 +45,6 @@ export default {
GlDropdownHeader, GlDropdownHeader,
GlDropdownDivider, GlDropdownDivider,
GlSearchBoxByType, GlSearchBoxByType,
GlFormGroup,
GlModal, GlModal,
DateTimePicker, DateTimePicker,
...@@ -378,177 +376,164 @@ export default { ...@@ -378,177 +376,164 @@ export default {
<div <div
v-if="showHeader" v-if="showHeader"
ref="prometheusGraphsHeader" 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"> <div class="mb-2 pr-2 d-flex d-sm-block">
<gl-form-group <dashboards-dropdown
:label="__('Dashboard')" id="monitor-dashboards-dropdown"
label-size="sm" data-qa-selector="dashboards_filter_dropdown"
label-for="monitor-dashboards-dropdown" class="flex-grow-1"
class="col-sm-12 col-md-6 col-lg-2" toggle-class="dropdown-menu-toggle"
> :default-branch="defaultBranch"
<dashboards-dropdown :selected-dashboard="selectedDashboard"
id="monitor-dashboards-dropdown" @selectDashboard="selectDashboard($event)"
data-qa-selector="dashboards_filter_dropdown" />
class="mb-0 d-flex" </div>
toggle-class="dropdown-menu-toggle"
:default-branch="defaultBranch"
:selected-dashboard="selectedDashboard"
@selectDashboard="selectDashboard($event)"
/>
</gl-form-group>
<gl-form-group <div class="mb-2 pr-2 d-flex d-sm-block">
:label="s__('Metrics|Environment')" <gl-dropdown
label-size="sm" id="monitor-environments-dropdown"
label-for="monitor-environments-dropdown" ref="monitorEnvironmentsDropdown"
class="col-sm-6 col-md-6 col-lg-2" class="flex-grow-1"
data-qa-selector="environments_dropdown"
toggle-class="dropdown-menu-toggle"
menu-class="monitor-environment-dropdown-menu"
:text="currentEnvironmentName"
> >
<gl-dropdown <div class="d-flex flex-column overflow-hidden">
id="monitor-environments-dropdown" <gl-dropdown-header class="monitor-environment-dropdown-header text-center">
ref="monitorEnvironmentsDropdown" {{ __('Environment') }}
data-qa-selector="environments_dropdown" </gl-dropdown-header>
class="mb-0 d-flex" <gl-dropdown-divider />
toggle-class="dropdown-menu-toggle" <gl-search-box-by-type
menu-class="monitor-environment-dropdown-menu" ref="monitorEnvironmentsDropdownSearch"
:text="currentEnvironmentName" class="m-2"
> @input="debouncedEnvironmentsSearch"
<div class="d-flex flex-column overflow-hidden"> />
<gl-dropdown-header class="monitor-environment-dropdown-header text-center">{{ <gl-loading-icon
__('Environment') v-if="environmentsLoading"
}}</gl-dropdown-header> ref="monitorEnvironmentsDropdownLoading"
<gl-dropdown-divider /> :inline="true"
<gl-search-box-by-type />
ref="monitorEnvironmentsDropdownSearch" <div v-else class="flex-fill overflow-auto">
class="m-2" <gl-dropdown-item
@input="debouncedEnvironmentsSearch" v-for="environment in filteredEnvironments"
/> :key="environment.id"
<gl-loading-icon :active="environment.name === currentEnvironmentName"
v-if="environmentsLoading" active-class="is-active"
ref="monitorEnvironmentsDropdownLoading" :href="environment.metrics_path"
:inline="true" >{{ environment.name }}</gl-dropdown-item
/>
<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"
> >
{{ __('No matching results') }}
</div>
</div> </div>
</gl-dropdown> <div
</gl-form-group> v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"
ref="monitorEnvironmentsDropdownMsg"
class="text-secondary no-matches-message"
>
{{ __('No matching results') }}
</div>
</div>
</gl-dropdown>
</div>
<gl-form-group <div class="mb-2 pr-2 d-flex d-sm-block">
:label="s__('Metrics|Show last')" <date-time-picker
label-size="sm" ref="dateTimePicker"
label-for="monitor-time-window-dropdown" class="flex-grow-1 show-last-dropdown"
class="col-sm-auto col-md-auto col-lg-auto"
data-qa-selector="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 <icon name="retry" />
ref="dateTimePicker" </gl-deprecated-button>
:value="selectedTimeRange" </div>
:options="timeRanges"
@input="onDateTimePickerInput"
@invalid="onDateTimePickerInvalid"
/>
</gl-form-group>
<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 <gl-deprecated-button
ref="refreshDashboardBtn" :pressed="isRearrangingPanels"
v-gl-tooltip
variant="default" variant="default"
:title="s__('Metrics|Refresh dashboard')" class="flex-grow-1 js-rearrange-button"
@click="refreshDashboard" @click="toggleRearrangingPanels"
> >
<icon name="retry" /> {{ __('Arrange charts') }}
</gl-deprecated-button> </gl-deprecated-button>
</gl-form-group> </div>
<div v-if="addingMetricsAvailable" class="mb-2 mr-2 d-flex d-sm-block">
<gl-form-group <gl-deprecated-button
v-if="hasHeaderButtons" ref="addMetricBtn"
label-for="prometheus-graphs-dropdown-buttons" v-gl-modal="$options.addMetric.modalId"
class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end" variant="outline-success"
> data-qa-selector="add_metric_button"
<div id="prometheus-graphs-dropdown-buttons"> class="flex-grow-1"
<gl-deprecated-button >
v-if="showRearrangePanelsBtn" {{ $options.addMetric.title }}
:pressed="isRearrangingPanels" </gl-deprecated-button>
variant="default" <gl-modal
class="mr-2 mt-1 js-rearrange-button" ref="addMetricModal"
@click="toggleRearrangingPanels" :modal-id="$options.addMetric.modalId"
>{{ __('Arrange charts') }}</gl-deprecated-button :title="$options.addMetric.title"
> >
<gl-deprecated-button <form ref="customMetricsForm" :action="customMetricsPath" method="post">
v-if="addingMetricsAvailable" <custom-metrics-form-fields
ref="addMetricBtn" :validate-query-path="validateQueryPath"
v-gl-modal="$options.addMetric.modalId" form-operation="post"
variant="outline-success" @formValidation="setFormValidity"
data-qa-selector="add_metric_button" />
class="mr-2 mt-1" </form>
>{{ $options.addMetric.title }}</gl-deprecated-button <div slot="modal-footer">
> <gl-deprecated-button @click="hideAddMetricModal">
<gl-modal {{ __('Cancel') }}
v-if="addingMetricsAvailable" </gl-deprecated-button>
ref="addMetricModal" <gl-deprecated-button
:modal-id="$options.addMetric.modalId" ref="submitCustomMetricsFormBtn"
:title="$options.addMetric.title" v-track-event="getAddMetricTrackingOptions()"
> :disabled="!formIsValid"
<form ref="customMetricsForm" :action="customMetricsPath" method="post"> variant="success"
<custom-metrics-form-fields @click="submitCustomMetricsForm"
:validate-query-path="validateQueryPath" >
form-operation="post" {{ __('Save changes') }}
@formValidation="setFormValidity" </gl-deprecated-button>
/> </div>
</form> </gl-modal>
<div slot="modal-footer"> </div>
<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>
<gl-deprecated-button <div v-if="selectedDashboard.can_edit" class="mb-2 mr-2 d-flex d-sm-block">
v-if="selectedDashboard.can_edit" <gl-deprecated-button
class="mt-1 js-edit-link" class="flex-grow-1 js-edit-link"
:href="selectedDashboard.project_blob_path" :href="selectedDashboard.project_blob_path"
data-qa-selector="edit_dashboard_button" data-qa-selector="edit_dashboard_button"
>{{ __('Edit dashboard') }}</gl-deprecated-button >
> {{ __('Edit dashboard') }}
</gl-deprecated-button>
</div>
<gl-deprecated-button <div v-if="externalDashboardUrl.length" class="mb-2 mr-2 d-flex d-sm-block">
v-if="externalDashboardUrl.length" <gl-deprecated-button
class="mt-1 js-external-dashboard-link" class="flex-grow-1 js-external-dashboard-link"
variant="primary" variant="primary"
:href="externalDashboardUrl" :href="externalDashboardUrl"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
{{ __('View full dashboard') }} {{ __('View full dashboard') }} <icon name="external-link" />
<icon name="external-link" /> </gl-deprecated-button>
</gl-deprecated-button> </div>
</div>
</gl-form-group>
</div> </div>
</div> </div>
......
app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
View file @ 366dbfb6
...@@ -158,7 +158,7 @@ export default { ...@@ -158,7 +158,7 @@ export default {
<template> <template>
<tooltip-on-truncate <tooltip-on-truncate
:title="timeWindowText" :title="timeWindowText"
:truncate-target="elem => elem.querySelector('.date-time-picker-toggle')" :truncate-target="elem => elem.querySelector('.gl-dropdown-toggle-text')"
placement="top" placement="top"
class="d-inline-block" class="d-inline-block"
> >
......
app/assets/stylesheets/pages/prometheus.scss
View file @ 366dbfb6
...@@ -64,6 +64,12 @@ ...@@ -64,6 +64,12 @@
padding: $gl-padding-8 $gl-padding-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 { .prometheus-panel {
......
changelogs/unreleased/202541-dashboard-filters-should-scale-different-screens.yml 0 → 100644
View file @ 366dbfb6
---
title: Define dashboard dropdowns layout in flex to improve support smaller screens
merge_request: 29477
author:
type: changed
locale/gitlab.pot
View file @ 366dbfb6
...@@ -12982,9 +12982,6 @@ msgid_plural "Metrics|Edit metrics" ...@@ -12982,9 +12982,6 @@ msgid_plural "Metrics|Edit metrics"
msgstr[0] "" msgstr[0] ""
msgstr[1] "" msgstr[1] ""
msgid "Metrics|Environment"
msgstr ""
msgid "Metrics|For grouping similar metrics" msgid "Metrics|For grouping similar metrics"
msgstr "" msgstr ""
...@@ -13018,9 +13015,6 @@ msgstr "" ...@@ -13018,9 +13015,6 @@ msgstr ""
msgid "Metrics|Refresh dashboard" msgid "Metrics|Refresh dashboard"
msgstr "" msgstr ""
msgid "Metrics|Show last"
msgstr ""
msgid "Metrics|There was an error creating the dashboard." msgid "Metrics|There was an error creating the dashboard."
msgstr "" msgstr ""
......
spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap
View file @ 366dbfb6
...@@ -6,101 +6,106 @@ exports[`Dashboard template matches the default snapshot 1`] = ` ...@@ -6,101 +6,106 @@ exports[`Dashboard template matches the default snapshot 1`] = `
data-qa-selector="prometheus_graphs" data-qa-selector="prometheus_graphs"
> >
<div <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 <div
class="row" class="mb-2 pr-2 d-flex d-sm-block"
> >
<gl-form-group-stub <dashboards-dropdown-stub
class="col-sm-12 col-md-6 col-lg-2" class="flex-grow-1"
label="Dashboard" data-qa-selector="dashboards_filter_dropdown"
label-for="monitor-dashboards-dropdown" defaultbranch="master"
label-size="sm" id="monitor-dashboards-dropdown"
> selecteddashboard="[object Object]"
<dashboards-dropdown-stub toggle-class="dropdown-menu-toggle"
class="mb-0 d-flex" />
data-qa-selector="dashboards_filter_dropdown" </div>
defaultbranch="master"
id="monitor-dashboards-dropdown" <div
selecteddashboard="[object Object]" class="mb-2 pr-2 d-flex d-sm-block"
toggle-class="dropdown-menu-toggle" >
/> <gl-dropdown-stub
</gl-form-group-stub> class="flex-grow-1"
data-qa-selector="environments_dropdown"
<gl-form-group-stub id="monitor-environments-dropdown"
class="col-sm-6 col-md-6 col-lg-2" menu-class="monitor-environment-dropdown-menu"
label="Environment" text="production"
label-for="monitor-environments-dropdown" toggle-class="dropdown-menu-toggle"
label-size="sm"
> >
<gl-dropdown-stub <div
class="mb-0 d-flex" class="d-flex flex-column overflow-hidden"
data-qa-selector="environments_dropdown"
id="monitor-environments-dropdown"
menu-class="monitor-environment-dropdown-menu"
text="production"
toggle-class="dropdown-menu-toggle"
> >
<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 <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> </div>
</gl-dropdown-stub> </div>
</gl-form-group-stub> </gl-dropdown-stub>
</div>
<gl-form-group-stub
class="col-sm-auto col-md-auto col-lg-auto" <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" data-qa-selector="show_last_dropdown"
label="Show last" options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
label-for="monitor-time-window-dropdown" value="[object Object]"
label-size="sm" />
</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 <icon-stub
customenabled="true" name="retry"
options="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" size="16"
value="[object Object]"
/> />
</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> </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