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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 247 deletions
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