summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClement Ho <408677-ClemMakesApps@users.noreply.gitlab.com>2019-08-09 15:45:19 +0000
committerClement Ho <408677-ClemMakesApps@users.noreply.gitlab.com>2019-08-09 15:45:19 +0000
commitd8f1cb398f9ddf2337bd2c405c64f6bca1789f7c (patch)
tree35481a7e43ad46b0b12a1e8dc3915dabb4b119f5
parentcdf347bf5e604b543c4b5e0e71c2da9ced6b647b (diff)
parentba82fb6dd4f29feca596dc72580d3b546f77bb88 (diff)
downloadgitlab-ce-d8f1cb398f9ddf2337bd2c405c64f6bca1789f7c.tar.gz
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
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue213
-rw-r--r--app/assets/stylesheets/pages/prometheus.scss22
-rw-r--r--changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml5
3 files changed, 138 insertions, 102 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 5892c18ac91..782e4310f3e 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -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,107 +280,136 @@ 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 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"
- toggle-class="dropdown-menu-toggle"
- :text="selectedDashboardText"
+ <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"
>
- <gl-dropdown-item
- v-for="dashboard in allDashboards"
- :key="dashboard.path"
- :active="dashboard.path === currentDashboard"
- active-class="is-active"
- :href="`?dashboard=${dashboard.path}`"
+ <gl-dropdown
+ id="monitor-dashboards-dropdown"
+ class="mb-0 d-flex js-dashboards-dropdown"
+ toggle-class="dropdown-menu-toggle"
+ :text="selectedDashboardText"
>
- {{ dashboard.display_name || dashboard.path }}
- </gl-dropdown-item>
- </gl-dropdown>
- </div>
- <div class="d-flex align-items-center">
- <strong>{{ s__('Metrics|Environment') }}</strong>
- <gl-dropdown
- class="prepend-left-10 js-environments-dropdown"
- toggle-class="dropdown-menu-toggle"
- :text="currentEnvironmentName"
- :disabled="environments.length === 0"
+ <gl-dropdown-item
+ v-for="dashboard in allDashboards"
+ :key="dashboard.path"
+ :active="dashboard.path === currentDashboard"
+ active-class="is-active"
+ :href="`?dashboard=${dashboard.path}`"
+ >{{ dashboard.display_name || dashboard.path }}</gl-dropdown-item
+ >
+ </gl-dropdown>
+ </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-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
+ 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>
- </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="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-item
- v-for="(value, key) in timeWindows"
- :key="key"
- :active="activeTimeWindow(key)"
- :href="setTimeWindowParameter(key)"
- active-class="active"
- >{{ value }}</gl-dropdown-item
+ <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>
- </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
+ <gl-dropdown-item
+ v-for="(value, key) in timeWindows"
+ :key="key"
+ :active="activeTimeWindow(key)"
+ :href="setTimeWindowParameter(key)"
+ active-class="active"
+ >{{ value }}</gl-dropdown-item
>
- </div>
- </gl-modal>
- </div>
- <gl-button
- v-if="externalDashboardUrl.length"
- class="js-external-dashboard-link prepend-left-8"
- variant="primary"
- :href="externalDashboardUrl"
- target="_blank"
+ </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') }}
- <icon name="external-link" />
- </gl-button>
+ <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"
+ >
+ <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 v-if="!showEmptyState">
<graph-group
v-for="(groupData, index) in groups"
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 05a4cc168a8..72f1b5307ec 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -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);
}
}
diff --git a/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml b/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml
new file mode 100644
index 00000000000..c564b98bb41
--- /dev/null
+++ b/changelogs/unreleased/64730-metrics-dashboard-menu-is-cramped-with-new-features-enabled.yml
@@ -0,0 +1,5 @@
+---
+title: Improve layout of dropdowns in the metrics dashboard page
+merge_request: 31239
+author:
+type: fixed