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,
|
GlButton,
|
||||||
GlDropdown,
|
GlDropdown,
|
||||||
GlDropdownItem,
|
GlDropdownItem,
|
||||||
|
GlFormGroup,
|
||||||
GlModal,
|
GlModal,
|
||||||
GlModalDirective,
|
GlModalDirective,
|
||||||
GlTooltipDirective,
|
GlTooltipDirective,
|
||||||
|
@ -34,6 +35,7 @@ export default {
|
||||||
GlButton,
|
GlButton,
|
||||||
GlDropdown,
|
GlDropdown,
|
||||||
GlDropdownItem,
|
GlDropdownItem,
|
||||||
|
GlFormGroup,
|
||||||
GlModal,
|
GlModal,
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
|
@ -278,107 +280,136 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="prometheus-graphs">
|
<div class="prometheus-graphs">
|
||||||
<div class="gl-p-3 border-bottom bg-gray-light d-flex justify-content-between">
|
<div class="gl-p-3 pb-0 border-bottom bg-gray-light">
|
||||||
<div
|
<div class="row">
|
||||||
v-if="environmentsEndpoint"
|
<template v-if="environmentsEndpoint">
|
||||||
class="dropdowns d-flex align-items-center justify-content-between"
|
<gl-form-group
|
||||||
>
|
v-if="multipleDashboardsEnabled"
|
||||||
<div v-if="multipleDashboardsEnabled" class="d-flex align-items-center">
|
:label="__('Dashboard')"
|
||||||
<label class="mb-0">{{ __('Dashboard') }}</label>
|
label-size="sm"
|
||||||
<gl-dropdown
|
label-for="monitor-dashboards-dropdown"
|
||||||
class="ml-2 mr-3 js-dashboards-dropdown"
|
class="col-sm-12 col-md-4 col-lg-2"
|
||||||
toggle-class="dropdown-menu-toggle"
|
|
||||||
:text="selectedDashboardText"
|
|
||||||
>
|
>
|
||||||
<gl-dropdown-item
|
<gl-dropdown
|
||||||
v-for="dashboard in allDashboards"
|
id="monitor-dashboards-dropdown"
|
||||||
:key="dashboard.path"
|
class="mb-0 d-flex js-dashboards-dropdown"
|
||||||
:active="dashboard.path === currentDashboard"
|
toggle-class="dropdown-menu-toggle"
|
||||||
active-class="is-active"
|
:text="selectedDashboardText"
|
||||||
:href="`?dashboard=${dashboard.path}`"
|
|
||||||
>
|
>
|
||||||
{{ dashboard.display_name || dashboard.path }}
|
<gl-dropdown-item
|
||||||
</gl-dropdown-item>
|
v-for="dashboard in allDashboards"
|
||||||
</gl-dropdown>
|
:key="dashboard.path"
|
||||||
</div>
|
:active="dashboard.path === currentDashboard"
|
||||||
<div class="d-flex align-items-center">
|
active-class="is-active"
|
||||||
<strong>{{ s__('Metrics|Environment') }}</strong>
|
:href="`?dashboard=${dashboard.path}`"
|
||||||
<gl-dropdown
|
>{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
|
||||||
class="prepend-left-10 js-environments-dropdown"
|
|
||||||
toggle-class="dropdown-menu-toggle"
|
|
||||||
:text="currentEnvironmentName"
|
|
||||||
:disabled="environments.length === 0"
|
|
||||||
>
|
|
||||||
<gl-dropdown-item
|
|
||||||
v-for="environment in environments"
|
|
||||||
:key="environment.id"
|
|
||||||
:active="environment.name === currentEnvironmentName"
|
|
||||||
active-class="is-active"
|
|
||||||
:href="environment.metrics_path"
|
|
||||||
>{{ 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-dropdown
|
|
||||||
class="prepend-left-10 js-time-window-dropdown"
|
|
||||||
toggle-class="dropdown-menu-toggle"
|
|
||||||
:text="selectedTimeWindow"
|
|
||||||
>
|
|
||||||
<gl-dropdown-item
|
|
||||||
v-for="(value, key) in timeWindows"
|
|
||||||
:key="key"
|
|
||||||
:active="activeTimeWindow(key)"
|
|
||||||
:href="setTimeWindowParameter(key)"
|
|
||||||
active-class="active"
|
|
||||||
>{{ 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-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-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
|
|
||||||
<gl-button
|
|
||||||
:disabled="!formIsValid"
|
|
||||||
variant="success"
|
|
||||||
@click="submitCustomMetricsForm"
|
|
||||||
>{{ __('Save changes') }}</gl-button
|
|
||||||
>
|
>
|
||||||
</div>
|
</gl-dropdown>
|
||||||
</gl-modal>
|
</gl-form-group>
|
||||||
</div>
|
|
||||||
<gl-button
|
<gl-form-group
|
||||||
v-if="externalDashboardUrl.length"
|
:label="s__('Metrics|Environment')"
|
||||||
class="js-external-dashboard-link prepend-left-8"
|
label-size="sm"
|
||||||
variant="primary"
|
label-for="monitor-environments-dropdown"
|
||||||
:href="externalDashboardUrl"
|
class="col-sm-6 col-md-4 col-lg-2"
|
||||||
target="_blank"
|
>
|
||||||
|
<gl-dropdown
|
||||||
|
id="monitor-environments-dropdown"
|
||||||
|
class="mb-0 d-flex js-environments-dropdown"
|
||||||
|
toggle-class="dropdown-menu-toggle"
|
||||||
|
:text="currentEnvironmentName"
|
||||||
|
:disabled="environments.length === 0"
|
||||||
|
>
|
||||||
|
<gl-dropdown-item
|
||||||
|
v-for="environment in environments"
|
||||||
|
:key="environment.id"
|
||||||
|
:active="environment.name === currentEnvironmentName"
|
||||||
|
active-class="is-active"
|
||||||
|
:href="environment.metrics_path"
|
||||||
|
>{{ environment.name }}</gl-dropdown-item
|
||||||
|
>
|
||||||
|
</gl-dropdown>
|
||||||
|
</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
|
||||||
|
id="monitor-time-window-dropdown"
|
||||||
|
class="mb-0 d-flex js-time-window-dropdown"
|
||||||
|
toggle-class="dropdown-menu-toggle"
|
||||||
|
:text="selectedTimeWindow"
|
||||||
|
>
|
||||||
|
<gl-dropdown-item
|
||||||
|
v-for="(value, key) in timeWindows"
|
||||||
|
:key="key"
|
||||||
|
:active="activeTimeWindow(key)"
|
||||||
|
:href="setTimeWindowParameter(key)"
|
||||||
|
active-class="active"
|
||||||
|
>{{ value }}</gl-dropdown-item
|
||||||
|
>
|
||||||
|
</gl-dropdown>
|
||||||
|
</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"
|
||||||
>
|
>
|
||||||
{{ __('View full dashboard') }}
|
<div id="prometheus-graphs-dropdown-buttons">
|
||||||
<icon name="external-link" />
|
<gl-button
|
||||||
</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"
|
||||||
|
>
|
||||||
|
<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-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
|
||||||
|
<gl-button
|
||||||
|
:disabled="!formIsValid"
|
||||||
|
variant="success"
|
||||||
|
@click="submitCustomMetricsForm"
|
||||||
|
>
|
||||||
|
{{ __('Save changes') }}
|
||||||
|
</gl-button>
|
||||||
|
</div>
|
||||||
|
</gl-modal>
|
||||||
|
|
||||||
|
<gl-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-button>
|
||||||
|
</div>
|
||||||
|
</gl-form-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!showEmptyState">
|
<div v-if="!showEmptyState">
|
||||||
<graph-group
|
<graph-group
|
||||||
v-for="(groupData, index) in groups"
|
v-for="(groupData, index) in groups"
|
||||||
|
|
|
@ -1,17 +1,17 @@
|
||||||
.prometheus-graphs {
|
.prometheus-graphs {
|
||||||
.dropdowns {
|
.dropdown-buttons {
|
||||||
.dropdown-menu-toggle {
|
> div {
|
||||||
svg {
|
margin-left: auto;
|
||||||
position: absolute;
|
|
||||||
right: 5%;
|
|
||||||
top: 25%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-menu-toggle,
|
.col-form-label {
|
||||||
.dropdown-menu {
|
line-height: 1;
|
||||||
width: 240px;
|
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