feat(notifications/teams): add UI to manage teams endpoints and rules

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 = {

ui/src/notifications/endpoints/components/EndpointCards.tsx

@@ -57,7 +57,7 @@ const EmptyEndpointList: FC<{searchTerm: string}> = ({searchTerm}) => {
       <EmptyState.Text>
         Want to send notifications to Slack,
         <br />
-        PagerDuty, Telegram or an HTTP server?
+        PagerDuty, Telegram, Teams or an HTTP server?
         <br />
         <br />
         Try creating a <b>Notification Endpoint</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<Props> = ({
       )
     }
 
+    case 'teams': {
+      const {url, secretURLSuffix} = endpoint as TeamsNotificationEndpoint
+      return (
+        <EndpointOptionsTeams
+          url={url}
+          secretURLSuffix={secretURLSuffix}
+          onChange={onChange}
+        />
+      )
+    }
+
     default:
       throw new Error(
         `Unknown endpoint type for endpoint: ${JSON.stringify(

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<HTMLInputElement>) => void
+}
+
+const EndpointOptionsTeams: FC<Props> = ({url, secretURLSuffix, onChange}) => {
+  return (
+    <Panel>
+      <Panel.Header>
+        <h4>Teams Options</h4>
+      </Panel.Header>
+      <Panel.Body>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="Incoming Webhook URL">
+                <Input
+                  name="url"
+                  value={url}
+                  testID="teams-url"
+                  onChange={onChange}
+                />
+              </FormElement>
+            </Grid.Column>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <FormElement label="Webhook URL Secret Suffix">
+                <Input
+                  name="secretURLSuffix"
+                  value={secretURLSuffix}
+                  testID="teams-secretURLSuffix"
+                  onChange={onChange}
+                  type={InputType.Password}
+                />
+              </FormElement>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Panel.Body>
+    </Panel>
+  )
+}
+
+export default EndpointOptionsTeams

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

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<Props> = ({

ui/src/notifications/endpoints/components/EndpointsColumn.tsx

@@ -30,7 +30,7 @@ const EndpointsColumn: FC<Props> = ({history, match, endpoints}) => {
       <br />
       to a third party service that can receive notifications
       <br />
-      like Slack, PagerDuty, Telegram, or an HTTP server
+      like Slack, PagerDuty, Telegram, Teams or an HTTP server
       <br />
       <br />
       <a

ui/src/notifications/rules/components/RuleMessageContents.tsx

@@ -6,6 +6,7 @@ import SlackMessage from './SlackMessage'
 import SMTPMessage from './SMTPMessage'
 import PagerDutyMessage from './PagerDutyMessage'
 import TelegramMessage from './TelegramMessage'
+import TeamsMessage from './TeamsMessage'
 
 // Utils
 import {useRuleDispatch} from './RuleOverlayProvider'
@@ -71,6 +72,18 @@ const RuleMessageContents: FC<Props> = ({rule}) => {
         />
       )
     }
+
+    case 'teams': {
+      const {title, messageTemplate} = rule
+      return (
+        <TeamsMessage
+          messageTemplate={messageTemplate}
+          title={title}
+          onChange={onChange}
+        />
+      )
+    }
+
     case 'http': {
       return <></>
     }

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<Props> = ({title, messageTemplate, onChange}) => {
+  return (
+    <>
+      <Form.Element label="Title">
+        <Input value={title} name="title" onChange={onChange} />
+      </Form.Element>
+      <Form.Element label="Message Template">
+        <TextArea
+          name="messageTemplate"
+          testID="teams-message-template--textarea"
+          value={messageTemplate}
+          onChange={onChange}
+          rows={3}
+        />
+      </Form.Element>
+    </>
+  )
+}
+
+export default TeamsMessage

ui/src/notifications/rules/utils/index.ts

@@ -15,6 +15,7 @@ import {
   RuleStatusLevel,
   PostNotificationRule,
   GenRule,
+  TeamsNotificationRuleBase,
 } from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 
@@ -24,6 +25,7 @@ type RuleVariantFields =
   | PagerDutyNotificationRuleBase
   | HTTPNotificationRuleBase
   | TelegramNotificationRuleBase
+  | TeamsNotificationRuleBase
 
 const defaultMessage =
   'Notification Rule: ${ r._notification_rule_name } triggered by check: ${ r._check_name }: ${ r._message }'
@@ -60,6 +62,14 @@ export const getRuleVariantDefaults = (
         type: 'telegram',
       }
     }
+
+    case 'teams': {
+      return {
+        messageTemplate: defaultMessage,
+        title: '${ r._notification_rule_name }',
+        type: 'teams',
+      }
+    }
 
     default: {
       throw new Error(`Could not find NotificationEndpoint with id "${id}"`)

ui/src/types/alerting.ts

@@ -21,6 +21,8 @@ import {
   NotificationEndpointBase as GenEndpointBase,
   TelegramNotificationRuleBase,
   TelegramNotificationEndpoint,
+  TeamsNotificationEndpoint,
+  TeamsNotificationRuleBase,
 } from 'src/client'
 import {RemoteDataState} from 'src/types'
 
@@ -47,6 +49,7 @@ export type NotificationEndpoint =
   | (Omit<HTTPNotificationEndpoint, 'status' | 'labels'> & EndpointOverrides)
   | (Omit<TelegramNotificationEndpoint, 'status' | 'labels'> &
       EndpointOverrides)
+  | (Omit<TeamsNotificationEndpoint, 'status' | 'labels'> & EndpointOverrides)
 export type NotificationEndpointBase = Omit<GenEndpointBase, 'labels'> &
   EndpointOverrides
 
@@ -73,7 +76,7 @@ export type NotificationRuleBaseDraft = Overwrite<
   }
 >
 
-type RuleDraft = SlackRule | SMTPRule | PagerDutyRule | HTTPRule | TelegramRule
+type RuleDraft = SlackRule | SMTPRule | PagerDutyRule | HTTPRule | TelegramRule | TeamsRule
 
 export type NotificationRuleDraft = RuleDraft
 
@@ -97,6 +100,10 @@ type TelegramRule = NotificationRuleBaseDraft &
   TelegramNotificationRuleBase &
   RuleOverrides
 
+type TeamsRule = NotificationRuleBaseDraft &
+  TeamsNotificationRuleBase &
+  RuleOverrides
+
 export type LowercaseCheckStatusLevel =
   | 'crit'
   | 'warn'
@@ -193,4 +200,7 @@ export {
   TelegramNotificationEndpoint,
   TelegramNotificationRuleBase,
   TelegramNotificationRule,
+  TeamsNotificationRuleBase,
+  TeamsNotificationRule,
+  TeamsNotificationEndpoint,
 } from '../client'