diff options
author | Simon Knox <simon@gitlab.com> | 2019-08-06 14:48:09 +0300 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-08-06 14:48:09 +0300 |
commit | a579bba2f323c7e8daba3e599a6d61348ae808f7 (patch) | |
tree | 52f7885df32f798c8151f57a6e9290c819c80aa5 /app | |
parent | d1ea2aba599d9e57b6e1688bcdacf7ae7fb571cc (diff) |
Add actions dropdown to metrics charts
Added as EE backport
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/monitoring/components/dashboard.vue | 51 | ||||
-rw-r--r-- | app/assets/javascripts/monitoring/components/panel_type.vue | 41 |
2 files changed, 73 insertions, 19 deletions
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue index 45543ef2cc8..2feb545199b 100644 --- a/app/assets/javascripts/monitoring/components/dashboard.vue +++ b/app/assets/javascripts/monitoring/components/dashboard.vue @@ -1,5 +1,12 @@ <script> -import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui'; +import { + GlButton, + GlDropdown, + GlDropdownItem, + GlModal, + GlModalDirective, + GlTooltipDirective, +} from '@gitlab/ui'; import _ from 'underscore'; import { mapActions, mapState } from 'vuex'; import { s__ } from '~/locale'; @@ -30,7 +37,8 @@ export default { GlModal, }, directives: { - GlModalDirective, + GlModal: GlModalDirective, + GlTooltip: GlTooltipDirective, }, props: { externalDashboardUrl: { @@ -328,7 +336,7 @@ export default { <div class="d-flex"> <div v-if="addingMetricsAvailable"> <gl-button - v-gl-modal-directive="$options.addMetric.modalId" + v-gl-modal="$options.addMetric.modalId" class="js-add-metric-button text-success border-success" >{{ $options.addMetric.title }}</gl-button > @@ -395,14 +403,35 @@ export default { :project-path="projectPath" group-id="monitor-area-chart" > - <alert-widget - v-if="alertWidgetAvailable && graphData" - :alerts-endpoint="alertsEndpoint" - :relevant-queries="graphData.queries" - :alerts-to-manage="getGraphAlerts(graphData.queries)" - :modal-id="`alert-modal-${index}-${graphIndex}`" - @setAlerts="setAlerts" - /> + <div class="d-flex align-items-center"> + <alert-widget + v-if="alertWidgetAvailable && graphData" + :modal-id="`alert-modal-${index}-${graphIndex}`" + :alerts-endpoint="alertsEndpoint" + :relevant-queries="graphData.queries" + :alerts-to-manage="getGraphAlerts(graphData.queries)" + @setAlerts="setAlerts" + /> + <gl-dropdown + v-if="alertWidgetAvailable" + v-gl-tooltip + class="mx-2" + toggle-class="btn btn-transparent border-0" + :right="true" + :no-caret="true" + :title="__('More actions')" + > + <template slot="button-content"> + <icon name="ellipsis_v" class="text-secondary" /> + </template> + <gl-dropdown-item + v-if="alertWidgetAvailable" + v-gl-modal="`alert-modal-${index}-${graphIndex}`" + > + {{ __('Alerts') }} + </gl-dropdown-item> + </gl-dropdown> + </div> </monitor-area-chart> </template> </graph-group> diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index f1f02964a29..295c0851f12 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -1,6 +1,7 @@ <script> import { mapState } from 'vuex'; import _ from 'underscore'; +import { GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui'; import MonitorAreaChart from './charts/area.vue'; import MonitorSingleStatChart from './charts/single_stat.vue'; import MonitorEmptyChart from './charts/empty_chart.vue'; @@ -10,6 +11,12 @@ export default { MonitorAreaChart, MonitorSingleStatChart, MonitorEmptyChart, + GlDropdown, + GlDropdownItem, + GlModal, + }, + directives: { + GlModal: GlModalDirective, }, props: { graphData: { @@ -64,14 +71,32 @@ export default { :container-width="dashboardWidth" group-id="monitor-area-chart" > - <alert-widget - v-if="alertWidgetAvailable" - :alerts-endpoint="alertsEndpoint" - :relevant-queries="graphData.queries" - :alerts-to-manage="getGraphAlerts(graphData.queries)" - :modal-id="`alert-modal-${index}`" - @setAlerts="setAlerts" - /> + <div class="d-flex align-items-center"> + <alert-widget + v-if="alertWidgetAvailable && graphData" + :modal-id="`alert-modal-${index}`" + :alerts-endpoint="alertsEndpoint" + :relevant-queries="graphData.queries" + :alerts-to-manage="getGraphAlerts(graphData.queries)" + @setAlerts="setAlerts" + /> + <gl-dropdown + v-if="alertWidgetAvailable" + v-gl-tooltip + class="mx-2" + toggle-class="btn btn-transparent border-0" + :right="true" + :no-caret="true" + :title="__('More actions')" + > + <template slot="button-content"> + <icon name="ellipsis_v" class="text-secondary" /> + </template> + <gl-dropdown-item v-if="alertWidgetAvailable" v-gl-modal="`alert-modal-${index}`"> + {{ __('Alerts') }} + </gl-dropdown-item> + </gl-dropdown> + </div> </monitor-area-chart> <monitor-empty-chart v-else :graph-title="graphData.title" /> </template> |