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 or an HTTP server?
+        PagerDuty, Teams or an HTTP server?
         <br />
         <br />
         Try creating a <b>Notification Endpoint</b>

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

@@ -5,13 +5,15 @@ import React, {FC, ChangeEvent} from 'react'
 import EndpointOptionsSlack from './EndpointOptionsSlack'
 import EndpointOptionsPagerDuty from './EndpointOptionsPagerDuty'
 import EndpointOptionsHTTP from './EndpointOptionsHTTP'
+import EndpointOptionsTeams from './EndpointOptionsTeams'
 
 // Types
 import {
   NotificationEndpoint,
   SlackNotificationEndpoint,
   PagerDutyNotificationEndpoint,
   HTTPNotificationEndpoint,
+  TeamsNotificationEndpoint,
 } from 'src/types'
 
 interface Props {
@@ -65,6 +67,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,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

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<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, or an HTTP server
+      like Slack, PagerDuty, Teams, or an HTTP server
       <br />
       <br />
       <a

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

@@ -5,6 +5,7 @@ import React, {FC} from 'react'
 import SlackMessage from './SlackMessage'
 import SMTPMessage from './SMTPMessage'
 import PagerDutyMessage from './PagerDutyMessage'
+import TeamsMessage from './TeamsMessage'
 
 // Utils
 import {useRuleDispatch} from './RuleOverlayProvider'
@@ -61,6 +62,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

@@ -14,6 +14,7 @@ import {
   RuleStatusLevel,
   PostNotificationRule,
   GenRule,
+  TeamsNotificationRuleBase,
 } from 'src/types'
 import {RemoteDataState} from '@influxdata/clockface'
 
@@ -22,6 +23,7 @@ type RuleVariantFields =
   | SMTPNotificationRuleBase
   | PagerDutyNotificationRuleBase
   | HTTPNotificationRuleBase
+  | TeamsNotificationRuleBase
 
 const defaultMessage =
   'Notification Rule: ${ r._notification_rule_name } triggered by check: ${ r._check_name }: ${ r._message }'
@@ -45,6 +47,14 @@ export const getRuleVariantDefaults = (
       return {type: 'http', url: ''}
     }
 
+    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

@@ -19,6 +19,8 @@ import {
   Threshold,
   CheckBase as GenCheckBase,
   NotificationEndpointBase as GenEndpointBase,
+  TeamsNotificationEndpoint,
+  TeamsNotificationRuleBase,
 } from 'src/client'
 import {RemoteDataState} from 'src/types'
 
@@ -43,6 +45,7 @@ export type NotificationEndpoint =
   | (Omit<PagerDutyNotificationEndpoint, 'status' | 'labels'> &
       EndpointOverrides)
   | (Omit<HTTPNotificationEndpoint, 'status' | 'labels'> & EndpointOverrides)
+  | (Omit<TeamsNotificationEndpoint, 'status' | 'labels'> & EndpointOverrides)
 export type NotificationEndpointBase = Omit<GenEndpointBase, 'labels'> &
   EndpointOverrides
 
@@ -69,7 +72,7 @@ export type NotificationRuleBaseDraft = Overwrite<
   }
 >
 
-type RuleDraft = SlackRule | SMTPRule | PagerDutyRule | HTTPRule
+type RuleDraft = SlackRule | SMTPRule | PagerDutyRule | HTTPRule | TeamsRule
 
 export type NotificationRuleDraft = RuleDraft
 
@@ -89,6 +92,10 @@ type HTTPRule = NotificationRuleBaseDraft &
   HTTPNotificationRuleBase &
   RuleOverrides
 
+type TeamsRule = NotificationRuleBaseDraft &
+  TeamsNotificationRuleBase &
+  RuleOverrides
+
 export type LowercaseCheckStatusLevel =
   | 'crit'
   | 'warn'
@@ -182,4 +189,7 @@ export {
   PostNotificationRule,
   CheckPatch,
   TaskStatusType,
+  TeamsNotificationRuleBase,
+  TeamsNotificationRule,
+  TeamsNotificationEndpoint,
 } from '../client'