From 581fea846a496ef0f07cb94db4c5334136214421 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 | 8 +++ .../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, 148 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 e83f5645c2d..464151fa42f 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 or an HTTP server? + PagerDuty, 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 fedcb54b40a..cd26b0e91be 100644 --- a/ui/src/notifications/endpoints/components/EndpointOptions.tsx +++ b/ui/src/notifications/endpoints/components/EndpointOptions.tsx @@ -5,6 +5,7 @@ import React, {FC, ChangeEvent} from 'react' import EndpointOptionsSlack from './EndpointOptionsSlack' import EndpointOptionsPagerDuty from './EndpointOptionsPagerDuty' import EndpointOptionsHTTP from './EndpointOptionsHTTP' +import EndpointOptionsTeams from './EndpointOptionsTeams' // Types import { @@ -12,6 +13,7 @@ import { SlackNotificationEndpoint, PagerDutyNotificationEndpoint, HTTPNotificationEndpoint, + TeamsNotificationEndpoint, } from 'src/types' interface Props { @@ -65,6 +67,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 4e2febfa3ad..17530b2ccc6 100644 --- a/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts +++ b/ui/src/notifications/endpoints/components/EndpointOverlay.reducer.ts @@ -34,6 +34,7 @@ export const reducer = ( 'headers', 'clientURL', 'routingKey', + 'secretURLSuffix', ]) switch (endpoint.type) { @@ -59,6 +60,13 @@ export const reducer = ( url: DEFAULT_ENDPOINT_URLS.slack, token: '', } + 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 379f026e765..5de5d0fb189 100644 --- a/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx +++ b/ui/src/notifications/endpoints/components/EndpointTypeDropdown.tsx @@ -32,6 +32,7 @@ const types: EndpointType[] = [ {name: 'HTTP', type: 'http', id: 'http'}, {name: 'Slack', type: 'slack', id: 'slack'}, {name: 'Pagerduty', type: 'pagerduty', id: 'pagerduty'}, + {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 ea5eeb0c338..28a3c185722 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, or an HTTP server + like Slack, PagerDuty, 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 ( + <> + + + + +