Improve layout of dropdowns in metrics page
Ensure layout works on xs and sm screens Add check in case buttons are not present Apply Prettier to file Remove unused class and div, reduce margins
This commit is contained in:
parent
cdf347bf5e
commit
ba82fb6dd4
3 changed files with 142 additions and 106 deletions
|
@ -3,6 +3,7 @@ import {
|
|||
GlButton,
|
||||
GlDropdown,
|
||||
GlDropdownItem,
|
||||
GlFormGroup,
|
||||
GlModal,
|
||||
GlModalDirective,
|
||||
GlTooltipDirective,
|
||||
|
@ -34,6 +35,7 @@ export default {
|
|||
GlButton,
|
||||
GlDropdown,
|
||||
GlDropdownItem,
|
||||
GlFormGroup,
|
||||
GlModal,
|
||||
},
|
||||
directives: {
|
||||
|
@ -278,15 +280,19 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="prometheus-graphs">
|
||||
<div class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between">
|
||||
<div
|
||||
v-if="environmentsEndpoint"
|
||||
class="dropdowns d-flex align-items-center justify-content-between"
|
||||
<div class="gl-p-3 pb-0 border-bottom bg-gray-light">
|
||||
<div class="row">
|
||||
<template v-if="environmentsEndpoint">
|
||||
<gl-form-group
|
||||
v-if="multipleDashboardsEnabled"
|
||||
:label="__('Dashboard')"
|
||||
label-size="sm"
|
||||
label-for="monitor-dashboards-dropdown"
|
||||
class="col-sm-12 col-md-4 col-lg-2"
|
||||
>
|
||||
<div v-if="multipleDashboardsEnabled" class="d-flex align-items-center">
|
||||
<label class="mb-0">{{ __('Dashboard') }}</label>
|
||||
<gl-dropdown
|
||||
class="ml-2 mr-3 js-dashboards-dropdown"
|
||||
id="monitor-dashboards-dropdown"
|
||||
class="mb-0 d-flex js-dashboards-dropdown"
|
||||
toggle-class="dropdown-menu-toggle"
|
||||
:text="selectedDashboardText"
|
||||
>
|
||||
|
@ -296,15 +302,20 @@ export default {
|
|||
:active="dashboard.path === currentDashboard"
|
||||
active-class="is-active"
|
||||
:href="`?dashboard=${dashboard.path}`"
|
||||
>{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
|
||||
>
|
||||
{{ dashboard.display_name || dashboard.path }}
|
||||
</gl-dropdown-item>
|
||||
</gl-dropdown>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>{{ s__('Metrics|Environment') }}</strong>
|
||||
</gl-form-group>
|
||||
|
||||
<gl-form-group
|
||||
:label="s__('Metrics|Environment')"
|
||||
label-size="sm"
|
||||
label-for="monitor-environments-dropdown"
|
||||
class="col-sm-6 col-md-4 col-lg-2"
|
||||
>
|
||||
<gl-dropdown
|
||||
class="prepend-left-10 js-environments-dropdown"
|
||||
id="monitor-environments-dropdown"
|
||||
class="mb-0 d-flex js-environments-dropdown"
|
||||
toggle-class="dropdown-menu-toggle"
|
||||
:text="currentEnvironmentName"
|
||||
:disabled="environments.length === 0"
|
||||
|
@ -318,11 +329,18 @@ export default {
|
|||
>{{ environment.name }}</gl-dropdown-item
|
||||
>
|
||||
</gl-dropdown>
|
||||
</div>
|
||||
<div v-if="!showEmptyState" class="d-flex align-items-center prepend-left-8">
|
||||
<strong>{{ s__('Metrics|Show last') }}</strong>
|
||||
</gl-form-group>
|
||||
|
||||
<gl-form-group
|
||||
v-if="!showEmptyState"
|
||||
:label="s__('Metrics|Show last')"
|
||||
label-size="sm"
|
||||
label-for="monitor-time-window-dropdown"
|
||||
class="col-sm-6 col-md-4 col-lg-2"
|
||||
>
|
||||
<gl-dropdown
|
||||
class="prepend-left-10 js-time-window-dropdown"
|
||||
id="monitor-time-window-dropdown"
|
||||
class="mb-0 d-flex js-time-window-dropdown"
|
||||
toggle-class="dropdown-menu-toggle"
|
||||
:text="selectedTimeWindow"
|
||||
>
|
||||
|
@ -335,16 +353,24 @@ export default {
|
|||
>{{ value }}</gl-dropdown-item
|
||||
>
|
||||
</gl-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div v-if="addingMetricsAvailable">
|
||||
<gl-button
|
||||
v-gl-modal="$options.addMetric.modalId"
|
||||
class="js-add-metric-button text-success border-success"
|
||||
>{{ $options.addMetric.title }}</gl-button
|
||||
</gl-form-group>
|
||||
</template>
|
||||
|
||||
<gl-form-group
|
||||
v-if="addingMetricsAvailable || externalDashboardUrl.length"
|
||||
label-for="prometheus-graphs-dropdown-buttons"
|
||||
class="dropdown-buttons col-lg d-lg-flex align-items-end"
|
||||
>
|
||||
<div id="prometheus-graphs-dropdown-buttons">
|
||||
<gl-button
|
||||
v-if="addingMetricsAvailable"
|
||||
v-gl-modal="$options.addMetric.modalId"
|
||||
class="mr-2 mt-1 js-add-metric-button text-success border-success"
|
||||
>
|
||||
{{ $options.addMetric.title }}
|
||||
</gl-button>
|
||||
<gl-modal
|
||||
v-if="addingMetricsAvailable"
|
||||
ref="addMetricModal"
|
||||
:modal-id="$options.addMetric.modalId"
|
||||
:title="$options.addMetric.title"
|
||||
|
@ -362,23 +388,28 @@ export default {
|
|||
:disabled="!formIsValid"
|
||||
variant="success"
|
||||
@click="submitCustomMetricsForm"
|
||||
>{{ __('Save changes') }}</gl-button
|
||||
>
|
||||
{{ __('Save changes') }}
|
||||
</gl-button>
|
||||
</div>
|
||||
</gl-modal>
|
||||
</div>
|
||||
|
||||
<gl-button
|
||||
v-if="externalDashboardUrl.length"
|
||||
class="js-external-dashboard-link prepend-left-8"
|
||||
class="mt-1 js-external-dashboard-link"
|
||||
variant="primary"
|
||||
:href="externalDashboardUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{{ __('View full dashboard') }}
|
||||
<icon name="external-link" />
|
||||
</gl-button>
|
||||
</div>
|
||||
</gl-form-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!showEmptyState">
|
||||
<graph-group
|
||||
v-for="(groupData, index) in groups"
|
||||
|
|
|
@ -1,17 +1,17 @@
|
|||
.prometheus-graphs {
|
||||
.dropdowns {
|
||||
.dropdown-menu-toggle {
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 25%;
|
||||
.dropdown-buttons {
|
||||
> div {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle,
|
||||
.dropdown-menu {
|
||||
width: 240px;
|
||||
.col-form-label {
|
||||
line-height: 1;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: map-get($spacing-scale, 3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Improve layout of dropdowns in the metrics dashboard page
|
||||
merge_request: 31239
|
||||
author:
|
||||
type: fixed
|
Loading…
Reference in a new issue