Commit 914ebb2c authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'alerts-dropdown-to-modal-part-2-ce' into 'master'

Alerts dropdown to modal CE2

See merge request gitlab-org/gitlab-ce!31181
parents d1ea2aba a579bba2
<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