Commit 366dbfb6 authored by Martin Wortschack's avatar Martin Wortschack

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
......@@ -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"
>
......
......@@ -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 {
......
---
title: Define dashboard dropdowns layout in flex to improve support smaller screens
merge_request: 29477
author:
type: changed
......@@ -12982,9 +12982,6 @@ msgid_plural "Metrics|Edit metrics"
msgstr[0] ""
msgstr[1] ""
msgid "Metrics|Environment"
msgstr ""
msgid "Metrics|For grouping similar metrics"
msgstr ""
......@@ -13018,9 +13015,6 @@ msgstr ""
msgid "Metrics|Refresh dashboard"
msgstr ""
msgid "Metrics|Show last"
msgstr ""
msgid "Metrics|There was an error creating the dashboard."
msgstr ""
......
......@@ -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