diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-10 18:09:07 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-10 18:09:07 +0300 |
commit | 1782886ed24fbe9b70cea5b0593fbae74da9dd30 (patch) | |
tree | b68faa75f50512585977fa5046b486581d57ebcd /app/assets/javascripts/alert_management | |
parent | 60a52d9829a3096dbeb78558081d95761abe1801 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/alert_management')
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_management_empty_state.vue | 50 | ||||
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue | 63 | ||||
-rw-r--r-- | app/assets/javascripts/alert_management/components/alert_management_table.vue (renamed from app/assets/javascripts/alert_management/components/alert_management_list.vue) | 49 | ||||
-rw-r--r-- | app/assets/javascripts/alert_management/list.js | 2 |
4 files changed, 115 insertions, 49 deletions
diff --git a/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue new file mode 100644 index 00000000000..131e93e7d58 --- /dev/null +++ b/app/assets/javascripts/alert_management/components/alert_management_empty_state.vue @@ -0,0 +1,50 @@ +<script> +import { GlEmptyState, GlButton } from '@gitlab/ui'; + +export default { + components: { + GlEmptyState, + GlButton, + }, + props: { + enableAlertManagementPath: { + type: String, + required: true, + }, + userCanEnableAlertManagement: { + type: Boolean, + required: true, + }, + emptyAlertSvgPath: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <div> + <gl-empty-state + :title="s__('AlertManagement|Surface alerts in GitLab')" + :svg-path="emptyAlertSvgPath" + > + <template #description> + <div class="d-block"> + <span>{{ + s__( + 'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.', + ) + }}</span> + <a href="/help/user/project/operations/alert_management.html" target="_blank"> + {{ s__('AlertManagement|More information') }} + </a> + </div> + <div v-if="userCanEnableAlertManagement" class="d-block center pt-4"> + <gl-button category="primary" variant="success" :href="enableAlertManagementPath"> + {{ s__('AlertManagement|Authorize external service') }} + </gl-button> + </div> + </template> + </gl-empty-state> + </div> +</template> diff --git a/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue b/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue new file mode 100644 index 00000000000..dd4fe9274f4 --- /dev/null +++ b/app/assets/javascripts/alert_management/components/alert_management_list_wrapper.vue @@ -0,0 +1,63 @@ +<script> +import Tracking from '~/tracking'; +import { trackAlertListViewsOptions } from '../constants'; +import AlertManagementEmptyState from './alert_management_empty_state.vue'; +import AlertManagementTable from './alert_management_table.vue'; + +export default { + components: { + AlertManagementEmptyState, + AlertManagementTable, + }, + props: { + projectPath: { + type: String, + required: true, + }, + alertManagementEnabled: { + type: Boolean, + required: true, + }, + enableAlertManagementPath: { + type: String, + required: true, + }, + populatingAlertsHelpUrl: { + type: String, + required: true, + }, + userCanEnableAlertManagement: { + type: Boolean, + required: true, + }, + emptyAlertSvgPath: { + type: String, + required: true, + }, + }, + mounted() { + this.trackPageViews(); + }, + methods: { + trackPageViews() { + const { category, action } = trackAlertListViewsOptions; + Tracking.event(category, action); + }, + }, +}; +</script> +<template> + <div> + <alert-management-table + v-if="alertManagementEnabled" + :populating-alerts-help-url="populatingAlertsHelpUrl" + :project-path="projectPath" + /> + <alert-management-empty-state + v-else + :empty-alert-svg-path="emptyAlertSvgPath" + :enable-alert-management-path="enableAlertManagementPath" + :user-can-enable-alert-management="userCanEnableAlertManagement" + /> + </div> +</template> diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue index 44602882be2..d86b57538ea 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_list.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue @@ -1,7 +1,5 @@ <script> import { - GlEmptyState, - GlDeprecatedButton, GlLoadingIcon, GlTable, GlAlert, @@ -108,11 +106,9 @@ export default { severityLabels: ALERTS_SEVERITY_LABELS, statusTabs: ALERTS_STATUS_TABS, components: { - GlEmptyState, GlLoadingIcon, GlTable, GlAlert, - GlDeprecatedButton, TimeAgo, GlIcon, GlLink, @@ -129,26 +125,10 @@ export default { type: String, required: true, }, - alertManagementEnabled: { - type: Boolean, - required: true, - }, - enableAlertManagementPath: { - type: String, - required: true, - }, populatingAlertsHelpUrl: { type: String, required: true, }, - userCanEnableAlertManagement: { - type: Boolean, - required: true, - }, - emptyAlertSvgPath: { - type: String, - required: true, - }, }, apollo: { alerts: { @@ -323,7 +303,7 @@ export default { </script> <template> <div> - <div v-if="alertManagementEnabled" class="alert-management-list"> + <div class="alert-management-list"> <gl-alert v-if="showNoAlertsMsg" @dismiss="isAlertDismissed = true"> <gl-sprintf :message="$options.i18n.noAlertsMsg"> <template #link="{ content }"> @@ -453,32 +433,5 @@ export default { @input="handlePageChange" /> </div> - <gl-empty-state - v-else - :title="s__('AlertManagement|Surface alerts in GitLab')" - :svg-path="emptyAlertSvgPath" - > - <template #description> - <div class="d-block"> - <span>{{ - s__( - 'AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents.', - ) - }}</span> - <a href="/help/user/project/operations/alert_management.html" target="_blank"> - {{ s__('AlertManagement|More information') }} - </a> - </div> - <div v-if="userCanEnableAlertManagement" class="d-block center pt-4"> - <gl-deprecated-button - category="primary" - variant="success" - :href="enableAlertManagementPath" - > - {{ s__('AlertManagement|Authorize external service') }} - </gl-deprecated-button> - </div> - </template> - </gl-empty-state> </div> </template> diff --git a/app/assets/javascripts/alert_management/list.js b/app/assets/javascripts/alert_management/list.js index 1fc7ad72f52..105b714fbce 100644 --- a/app/assets/javascripts/alert_management/list.js +++ b/app/assets/javascripts/alert_management/list.js @@ -3,7 +3,7 @@ import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import { defaultDataIdFromObject } from 'apollo-cache-inmemory'; import { parseBoolean } from '~/lib/utils/common_utils'; -import AlertManagementList from './components/alert_management_list.vue'; +import AlertManagementList from './components/alert_management_list_wrapper.vue'; Vue.use(VueApollo); |