Commit a579bba2 authored by Simon Knox's avatar Simon Knox Committed by Kushal Pandya

Add actions dropdown to metrics charts

Added as EE backport
parent d1ea2aba
<script> <script>
import { GlButton, GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui'; import {
GlButton,
GlDropdown,
GlDropdownItem,
GlModal,
GlModalDirective,
GlTooltipDirective,
} from '@gitlab/ui';
import _ from 'underscore'; import _ from 'underscore';
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
...@@ -30,7 +37,8 @@ export default { ...@@ -30,7 +37,8 @@ export default {
GlModal, GlModal,
}, },
directives: { directives: {
GlModalDirective, GlModal: GlModalDirective,
GlTooltip: GlTooltipDirective,
}, },
props: { props: {
externalDashboardUrl: { externalDashboardUrl: {
...@@ -328,7 +336,7 @@ export default { ...@@ -328,7 +336,7 @@ export default {
<div class="d-flex"> <div class="d-flex">
<div v-if="addingMetricsAvailable"> <div v-if="addingMetricsAvailable">
<gl-button <gl-button
v-gl-modal-directive="$options.addMetric.modalId" v-gl-modal="$options.addMetric.modalId"
class="js-add-metric-button text-success border-success" class="js-add-metric-button text-success border-success"
>{{ $options.addMetric.title }}</gl-button >{{ $options.addMetric.title }}</gl-button
> >
...@@ -395,14 +403,35 @@ export default { ...@@ -395,14 +403,35 @@ export default {
:project-path="projectPath" :project-path="projectPath"
group-id="monitor-area-chart" group-id="monitor-area-chart"
> >
<alert-widget <div class="d-flex align-items-center">
v-if="alertWidgetAvailable && graphData" <alert-widget
:alerts-endpoint="alertsEndpoint" v-if="alertWidgetAvailable && graphData"
:relevant-queries="graphData.queries" :modal-id="`alert-modal-${index}-${graphIndex}`"
:alerts-to-manage="getGraphAlerts(graphData.queries)" :alerts-endpoint="alertsEndpoint"
:modal-id="`alert-modal-${index}-${graphIndex}`" :relevant-queries="graphData.queries"
@setAlerts="setAlerts" :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> </monitor-area-chart>
</template> </template>
</graph-group> </graph-group>
......
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import _ from 'underscore'; import _ from 'underscore';
import { GlDropdown, GlDropdownItem, GlModal, GlModalDirective } from '@gitlab/ui';
import MonitorAreaChart from './charts/area.vue'; import MonitorAreaChart from './charts/area.vue';
import MonitorSingleStatChart from './charts/single_stat.vue'; import MonitorSingleStatChart from './charts/single_stat.vue';
import MonitorEmptyChart from './charts/empty_chart.vue'; import MonitorEmptyChart from './charts/empty_chart.vue';
...@@ -10,6 +11,12 @@ export default { ...@@ -10,6 +11,12 @@ export default {
MonitorAreaChart, MonitorAreaChart,
MonitorSingleStatChart, MonitorSingleStatChart,
MonitorEmptyChart, MonitorEmptyChart,
GlDropdown,
GlDropdownItem,
GlModal,
},
directives: {
GlModal: GlModalDirective,
}, },
props: { props: {
graphData: { graphData: {
...@@ -64,14 +71,32 @@ export default { ...@@ -64,14 +71,32 @@ export default {
:container-width="dashboardWidth" :container-width="dashboardWidth"
group-id="monitor-area-chart" group-id="monitor-area-chart"
> >
<alert-widget <div class="d-flex align-items-center">
v-if="alertWidgetAvailable" <alert-widget
:alerts-endpoint="alertsEndpoint" v-if="alertWidgetAvailable && graphData"
:relevant-queries="graphData.queries" :modal-id="`alert-modal-${index}`"
:alerts-to-manage="getGraphAlerts(graphData.queries)" :alerts-endpoint="alertsEndpoint"
:modal-id="`alert-modal-${index}`" :relevant-queries="graphData.queries"
@setAlerts="setAlerts" :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-area-chart>
<monitor-empty-chart v-else :graph-title="graphData.title" /> <monitor-empty-chart v-else :graph-title="graphData.title" />
</template> </template>
...@@ -900,6 +900,9 @@ msgstr "" ...@@ -900,6 +900,9 @@ msgstr ""
msgid "After a successful password update, you will be redirected to the login page where you can log in with your new password." msgid "After a successful password update, you will be redirected to the login page where you can log in with your new password."
msgstr "" msgstr ""
msgid "Alerts"
msgstr ""
msgid "All" msgid "All"
msgstr "" msgstr ""
...@@ -6868,6 +6871,9 @@ msgstr "" ...@@ -6868,6 +6871,9 @@ msgstr ""
msgid "More" msgid "More"
msgstr "" msgstr ""
msgid "More actions"
msgstr ""
msgid "More information" msgid "More information"
msgstr "" msgstr ""
......
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