All files / app/assets/javascripts/alert_management/components alert_management_empty_state.vue

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52      2x                                                 4x                                              
<script>
import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
import { s__ } from '~/locale';
import alertsHelpUrlQuery from '../graphql/queries/alert_help_url.query.graphql';
 
export default {
  i18n: {
    emptyState: {
      title: s__('AlertManagement|Surface alerts in GitLab'),
      info: 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.',
      ),
      buttonText: s__('AlertManagement|Authorize external service'),
    },
    moreInformation: s__('AlertManagement|More information'),
  },
  components: {
    GlEmptyState,
    GlButton,
    GlLink,
  },
  apollo: {
    alertsHelpUrl: {
      query: alertsHelpUrlQuery,
    },
  },
  inject: ['enableAlertManagementPath', 'userCanEnableAlertManagement', 'emptyAlertSvgPath'],
  data() {
    return {
      alertsHelpUrl: '',
    };
  },
};
</script>
<template>
  <gl-empty-state :title="$options.i18n.emptyState.title" :svg-path="emptyAlertSvgPath">
    <template #description>
      <div class="gl-display-block">
        <span>{{ $options.i18n.emptyState.info }}</span>
        <gl-link :href="alertsHelpUrl" target="_blank">
          {{ $options.i18n.moreInformation }}
        </gl-link>
      </div>
    </template>
    <template v-if="userCanEnableAlertManagement" #actions>
      <gl-button category="primary" variant="confirm" :href="enableAlertManagementPath">
        {{ $options.i18n.emptyState.buttonText }}
      </gl-button>
    </template>
  </gl-empty-state>
</template>