summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorSimon Knox <simon@gitlab.com>2019-08-06 11:48:09 +0000
committerKushal Pandya <kushalspandya@gmail.com>2019-08-06 11:48:09 +0000
commita579bba2f323c7e8daba3e599a6d61348ae808f7 (patch)
tree52f7885df32f798c8151f57a6e9290c819c80aa5 /app
parentd1ea2aba599d9e57b6e1688bcdacf7ae7fb571cc (diff)
downloadgitlab-ce-a579bba2f323c7e8daba3e599a6d61348ae808f7.tar.gz
Add actions dropdown to metrics charts
Added as EE backport
Diffstat (limited to 'app')
-rw-r--r--app/assets/javascripts/monitoring/components/dashboard.vue51
-rw-r--r--app/assets/javascripts/monitoring/components/panel_type.vue41
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>