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 {
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 @ 366dbfb6
......@@ -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 @ 366dbfb6
......@@ -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 @ 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"
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 ""
......
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`] = `
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