diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue')
-rw-r--r-- | app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue new file mode 100644 index 00000000000..217442e6131 --- /dev/null +++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue @@ -0,0 +1,109 @@ +<script> +import { GlTable, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { s__, __ } from '~/locale'; +import Tracking from '~/tracking'; +import { trackAlertIntergrationsViewsOptions } from '../constants'; + +export const i18n = { + title: s__('AlertsIntegrations|Current integrations'), + emptyState: s__('AlertsIntegrations|No integrations have been added yet'), + status: { + enabled: { + name: __('Enabled'), + tooltip: s__('AlertsIntegrations|Alerts will be created through this integration'), + }, + disabled: { + name: __('Disabled'), + tooltip: s__('AlertsIntegrations|Alerts will not be created through this integration'), + }, + }, +}; + +const bodyTrClass = + 'gl-border-1 gl-border-t-solid gl-border-b-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-blue-50 gl-hover-border-blue-200'; + +export default { + i18n, + components: { + GlTable, + GlIcon, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + integrations: { + type: Array, + required: false, + default: () => [], + }, + }, + fields: [ + { + key: 'activated', + label: __('Status'), + }, + { + key: 'name', + label: s__('AlertsIntegrations|Integration Name'), + }, + { + key: 'type', + label: __('Type'), + }, + ], + computed: { + tbodyTrClass() { + return { + [bodyTrClass]: this.integrations.length, + }; + }, + }, + mounted() { + this.trackPageViews(); + }, + methods: { + trackPageViews() { + const { category, action } = trackAlertIntergrationsViewsOptions; + Tracking.event(category, action); + }, + }, +}; +</script> + +<template> + <div class="incident-management-list"> + <h5 class="gl-font-lg">{{ $options.i18n.title }}</h5> + <gl-table + :empty-text="$options.i18n.emptyState" + :items="integrations" + :fields="$options.fields" + stacked="md" + :tbody-tr-class="tbodyTrClass" + show-empty + > + <template #cell(activated)="{ item }"> + <span v-if="item.activated" data-testid="integration-activated-status"> + <gl-icon + v-gl-tooltip + name="check-circle-filled" + :size="16" + class="gl-text-green-500 gl-hover-cursor-pointer gl-mr-3" + :title="$options.i18n.status.enabled.tooltip" + /> + {{ $options.i18n.status.enabled.name }} + </span> + <span v-else data-testid="integration-activated-status"> + <gl-icon + v-gl-tooltip + name="warning-solid" + :size="16" + class="gl-text-red-600 gl-hover-cursor-pointer gl-mr-3" + :title="$options.i18n.status.disabled.tooltip" + /> + {{ $options.i18n.status.disabled.name }} + </span> + </template> + </gl-table> + </div> +</template> |