Skip to content

G
gitlab-ce
Commit d8f1cb39 authored by Clement Ho's avatar Clement Ho
Browse files
Options

Merge branch '64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled' into 'master' 

Improve layout of dropdowns in the metrics dashboard page

Closes #64730

See merge request gitlab-org/gitlab-ce!31239
parents cdf347bf ba82fb6d
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 102 deletions
app/assets/javascripts/monitoring/components/dashboard.vue
View file @ d8f1cb39
...@@ -3,6 +3,7 @@ import { ...@@ -3,6 +3,7 @@ import {
GlButton, GlButton,
GlDropdown, GlDropdown,
GlDropdownItem, GlDropdownItem,
GlFormGroup,
GlModal, GlModal,
GlModalDirective, GlModalDirective,
GlTooltipDirective, GlTooltipDirective,
...@@ -34,6 +35,7 @@ export default { ...@@ -34,6 +35,7 @@ export default {
GlButton, GlButton,
GlDropdown, GlDropdown,
GlDropdownItem, GlDropdownItem,
GlFormGroup,
GlModal, GlModal,
}, },
directives: { directives: {
...@@ -278,107 +280,136 @@ export default { ...@@ -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" </gl-dropdown>
:text="currentEnvironmentName" </gl-form-group>
:disabled="environments.length === 0"
<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-item <gl-dropdown
v-for="environment in environments" id="monitor-environments-dropdown"
:key="environment.id" class="mb-0 d-flex js-environments-dropdown"
:active="environment.name === currentEnvironmentName" toggle-class="dropdown-menu-toggle"
active-class="is-active" :text="currentEnvironmentName"
:href="environment.metrics_path" :disabled="environments.length === 0"
>{{ environment.name }}</gl-dropdown-item
> >
</gl-dropdown> <gl-dropdown-item
</div> v-for="environment in environments"
<div v-if="!showEmptyState" class="d-flex align-items-center prepend-left-8"> :key="environment.id"
<strong>{{ s__('Metrics|Show last') }}</strong> :active="environment.name === currentEnvironmentName"
<gl-dropdown active-class="is-active"
class="prepend-left-10 js-time-window-dropdown" :href="environment.metrics_path"
toggle-class="dropdown-menu-toggle" >{{ environment.name }}</gl-dropdown-item
:text="selectedTimeWindow" >
</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-item <gl-dropdown
v-for="(value, key) in timeWindows" id="monitor-time-window-dropdown"
:key="key" class="mb-0 d-flex js-time-window-dropdown"
:active="activeTimeWindow(key)" toggle-class="dropdown-menu-toggle"
:href="setTimeWindowParameter(key)" :text="selectedTimeWindow"
active-class="active"
>{{ value }}</gl-dropdown-item
> >
</gl-dropdown> <gl-dropdown-item
</div> v-for="(value, key) in timeWindows"
</div> :key="key"
<div class="d-flex"> :active="activeTimeWindow(key)"
<div v-if="addingMetricsAvailable"> :href="setTimeWindowParameter(key)"
<gl-button active-class="active"
v-gl-modal="$options.addMetric.modalId" >{{ value }}</gl-dropdown-item
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> </template>
<gl-button
v-if="externalDashboardUrl.length" <gl-form-group
class="js-external-dashboard-link prepend-left-8" v-if="addingMetricsAvailable || externalDashboardUrl.length"
variant="primary" label-for="prometheus-graphs-dropdown-buttons"
:href="externalDashboardUrl" class="dropdown-buttons col-lg d-lg-flex align-items-end"
target="_blank"
> >
{{ __('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"
......
app/assets/stylesheets/pages/prometheus.scss
View file @ d8f1cb39
.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);
} }
} }
......
changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml 0 → 100644
View file @ d8f1cb39
---
title: Improve layout of dropdowns in the metrics dashboard page
merge_request: 31239
author:
type: fixed
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