From 3c1f2c08dc94b45d7faa24501a9edefb70c316fa Mon Sep 17 00:00:00 2001 From: Pavel Zavora Date: Fri, 10 Jul 2020 12:07:17 +0200 Subject: [PATCH] feat(notifications/teams): add UI to manage teams endpoints and rules --- ui/src/alerting/constants/index.ts | 1 + .../endpoints/components/EndpointCards.tsx | 2 +- .../endpoints/components/EndpointOptions.tsx | 13 +++++ .../components/EndpointOptionsTeams.tsx | 57 +++++++++++++++++++ .../components/EndpointOverlay.reducer.ts | 9 +++ .../components/EndpointTypeDropdown.tsx | 1 + .../endpoints/components/EndpointsColumn.tsx | 2 +- .../rules/components/RuleMessageContents.tsx | 13 +++++ .../rules/components/TeamsMessage.tsx | 32 +++++++++++ ui/src/notifications/rules/utils/index.ts | 10 ++++ ui/src/types/alerting.ts | 12 +++- 11 files changed, 149 insertions(+), 3 deletions(-) create mode 100644 ui/src/notifications/endpoints/components/EndpointOptionsTeams.tsx create mode 100644 ui/src/notifications/rules/components/TeamsMessage.tsx diff --git a/ui/src/alerting/constants/index.ts b/ui/src/alerting/constants/index.ts index 1caeb14d081..12bdce526d6 100644 --- a/ui/src/alerting/constants/index.ts +++ b/ui/src/alerting/constants/index.ts @@ -74,6 +74,7 @@ export const DEFAULT_ENDPOINT_URLS = { slack: 'https://hooks.slack.com/services/X/X/X', pagerduty: 'https://events.pagerduty.com/v2/enqueue', http: 'https://www.example.com/endpoint', + teams: 'https://office.outlook.com/hook/XXXX', } export const NEW_ENDPOINT_DRAFT: NotificationEndpoint = { diff --git a/ui/src/notifications/endpoints/components/EndpointCards.tsx b/ui/src/notifications/endpoints/components/EndpointCards.tsx index 29366aa9f5d..075dd55e0c7 100644 --- a/ui/src/notifications/endpoints/components/EndpointCards.tsx +++ b/ui/src/notifications/endpoints/components/EndpointCards.tsx @@ -57,7 +57,7 @@ const EmptyEndpointList: FC<{searchTerm: string}> = ({searchTerm}) => { Want to send notifications to Slack,
- PagerDuty, Telegram or an HTTP server? + PagerDuty, Telegram, Teams or an HTTP server?

Try creating a Notification Endpoint diff --git a/ui/src/notifications/endpoints/components/EndpointOptions.tsx b/ui/src/notifications/endpoints/components/EndpointOptions.tsx index 542a906e77a..8a75266e338 100644 --- a/ui/src/notifications/endpoints/components/EndpointOptions.tsx +++ b/ui/src/notifications/endpoints/components/EndpointOptions.tsx @@ -6,6 +6,7 @@ import EndpointOptionsSlack from './EndpointOptionsSlack' import EndpointOptionsPagerDuty from './EndpointOptionsPagerDuty' import EndpointOptionsHTTP from './EndpointOptionsHTTP' import EndpointOptionsTelegram from './EndpointOptionsTelegram' +import EndpointOptionsTeams from './EndpointOptionsTeams' // Types import { @@ -14,6 +15,7 @@ import { PagerDutyNotificationEndpoint, HTTPNotificationEndpoint, TelegramNotificationEndpoint, + TeamsNotificationEndpoint, } from 'src/types' interface Props { @@ -77,6 +79,17 @@ const EndpointOptions: FC = ({ ) } + case 'teams': { + const {url, secretURLSuffix} = endpoint as TeamsNotificationEndpoint + return ( + + ) + } + default: throw new Error( `Unknown endpoint type for endpoint: ${JSON.stringify( diff --git a/ui/src/notifications/endpoints/components/EndpointOptionsTeams.tsx b/ui/src/notifications/endpoints/components/EndpointOptionsTeams.tsx new file mode 100644 index 00000000000..4de6bbf11e5 --- /dev/null +++ b/ui/src/notifications/endpoints/components/EndpointOptionsTeams.tsx @@ -0,0 +1,57 @@ +// Libraries +import React, {FC, ChangeEvent} from 'react' + +// Components +import { + Input, + FormElement, + Panel, + Grid, + Columns, + InputType, +} from '@influxdata/clockface' + +interface Props { + url: string + secretURLSuffix: string + onChange: (e: ChangeEvent) => void +} + +const EndpointOptionsTeams: FC = ({url, secretURLSuffix, onChange}) => { + return ( + + +

Teams Options

+ + + + + + + + + + + + + + + + + + + ) +} + +export default EndpointOptionsTeams diff --git a/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts b/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts index c8532a5cae2..6690b4af6d6 100644 --- a/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts +++ b/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts @@ -34,6 +34,8 @@ export const reducer = ( 'headers', 'clientURL', 'routingKey', + 'channel', + 'secretURLSuffix', ]) switch (endpoint.type) { @@ -66,6 +68,13 @@ export const reducer = ( token: '', channel: '', } + case 'teams': + return { + ...baseProps, + type: 'teams', + url: DEFAULT_ENDPOINT_URLS.teams, + token: '', + } } } return state diff --git a/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx b/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx index 037d218bac5..b6952cf92e9 100644 --- a/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx +++ b/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx @@ -33,6 +33,7 @@ const types: EndpointType[] = [ {name: 'Slack', type: 'slack', id: 'slack'}, {name: 'Pagerduty', type: 'pagerduty', id: 'pagerduty'}, {name: 'Telegram', type: 'telegram', id: 'telegram'}, + {name: 'Teams', type: 'teams', id: 'teams'}, ] const EndpointTypeDropdown: FC = ({ diff --git a/ui/src/notifications/endpoints/components/EndpointsColumn.tsx b/ui/src/notifications/endpoints/components/EndpointsColumn.tsx index d0ecbc032af..6c68d59229b 100644 --- a/ui/src/notifications/endpoints/components/EndpointsColumn.tsx +++ b/ui/src/notifications/endpoints/components/EndpointsColumn.tsx @@ -30,7 +30,7 @@ const EndpointsColumn: FC = ({history, match, endpoints}) => {
to a third party service that can receive notifications
- like Slack, PagerDuty, Telegram, or an HTTP server + like Slack, PagerDuty, Telegram, Teams or an HTTP server

= ({rule}) => { /> ) } + + case 'teams': { + const {title, messageTemplate} = rule + return ( + + ) + } + case 'http': { return <> } diff --git a/ui/src/notifications/rules/components/TeamsMessage.tsx b/ui/src/notifications/rules/components/TeamsMessage.tsx new file mode 100644 index 00000000000..9b837652852 --- /dev/null +++ b/ui/src/notifications/rules/components/TeamsMessage.tsx @@ -0,0 +1,32 @@ +// Libraries +import React, {FC, ChangeEvent} from 'react' + +// Components +import {Form, Input, TextArea} from '@influxdata/clockface' + +interface Props { + title: string + messageTemplate: string + onChange: (e: ChangeEvent) => void +} + +const TeamsMessage: FC = ({title, messageTemplate, onChange}) => { + return ( + <> + + + + +