fix(3629): cannot create rules from deactive endpoints (#3832)

* 3629: use overlay controller to create new rule, remove older connector pattern in favor of new selector pattern, create selectors to fetch needed state, make selector for only activeEndpoints (the bug). follow resource state pattern in selector.

Author: wiedld

src/alerting/components/AlertingIndex.tsx

@@ -17,7 +17,6 @@ import GetAssetLimits from 'src/cloud/components/GetAssetLimits'
 import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 import GetResources from 'src/resources/components/GetResources'
 import EditCheckEO from 'src/checks/components/EditCheckEO'
-import NewRuleOverlay from 'src/notifications/rules/components/NewRuleOverlay'
 import EditRuleOverlay from 'src/notifications/rules/components/EditRuleOverlay'
 import NewEndpointOverlay from 'src/notifications/endpoints/components/NewEndpointOverlay'
 import EditEndpointOverlay from 'src/notifications/endpoints/components/EditEndpointOverlay'
@@ -168,7 +167,6 @@ const AlertingIndex: FunctionComponent = () => {
           path={`${alertsPath}/checks/:checkID/edit`}
           component={EditCheckEO}
         />
-        <Route path={`${alertsPath}/rules/new`} component={NewRuleOverlay} />
         <Route
           path={`${alertsPath}/rules/:ruleID/edit`}
           component={EditRuleOverlay}

src/notifications/endpoints/selectors/index.ts

@@ -13,3 +13,16 @@ export const sortEndpointsByName = (
   endpoints.sort((a, b) =>
     a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
   )
+
+export const getAllActiveEndpoints = (
+  state: AppState
+): NotificationEndpoint[] => {
+  const endpoints = state.resources.endpoints.allIDs.reduce(
+    (acc, id) =>
+      state.resources.endpoints.byID[id]?.activeStatus == 'active'
+        ? acc.concat([state.resources.endpoints.byID[id]])
+        : acc,
+    []
+  )
+  return !!endpoints.length ? sortEndpointsByName(endpoints) : []
+}

src/notifications/rules/components/NewRuleOverlay.tsx

@@ -1,10 +1,13 @@
 // Libraries
-import React, {useMemo, FC} from 'react'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
-import {connect, ConnectedProps} from 'react-redux'
+import React, {useMemo, FC, useContext} from 'react'
+import {useDispatch, useSelector} from 'react-redux'
 
-// Actions
+// Actions, Selectors
 import {createRule} from 'src/notifications/rules/actions/thunks'
+import {getOrg} from 'src/organizations/selectors'
+
+// Contexts
+import {OverlayContext} from 'src/overlays/components/OverlayController'
 
 // Components
 import RuleOverlayContents from 'src/notifications/rules/components/RuleOverlayContents'
@@ -17,24 +20,14 @@ import {initRuleDraft} from 'src/notifications/rules/utils'
 // Types
 import {NotificationRuleDraft} from 'src/types'
 
-type ReduxProps = ConnectedProps<typeof connector>
-type Props = RouteComponentProps<{orgID: string}> & ReduxProps
-
-const NewRuleOverlay: FC<Props> = ({
-  match: {
-    params: {orgID},
-  },
-  history,
-  onCreateRule,
-}) => {
-  const handleDismiss = () => {
-    history.push(`/orgs/${orgID}/alerting`)
-  }
+const NewRuleOverlay: FC = () => {
+  const dispatch = useDispatch()
+  const {onClose} = useContext(OverlayContext)
+  const orgID = useSelector(getOrg)?.id
 
   const handleCreateRule = async (rule: NotificationRuleDraft) => {
-    await onCreateRule(rule)
-
-    handleDismiss()
+    await dispatch(createRule(rule))
+    onClose()
   }
 
   const initialState = useMemo(() => initRuleDraft(orgID), [orgID])
@@ -45,7 +38,7 @@ const NewRuleOverlay: FC<Props> = ({
         <Overlay.Container maxWidth={800}>
           <Overlay.Header
             title="Create a Notification Rule"
-            onDismiss={handleDismiss}
+            onDismiss={onClose}
             testID="dismiss-overlay"
           />
           <Overlay.Body>
@@ -60,10 +53,4 @@ const NewRuleOverlay: FC<Props> = ({
   )
 }
 
-const mdtp = {
-  onCreateRule: createRule,
-}
-
-const connector = connect(null, mdtp)
-
-export default connector(withRouter(NewRuleOverlay))
+export default NewRuleOverlay

src/notifications/rules/components/RuleMessage.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FC, useEffect} from 'react'
-import {connect} from 'react-redux'
+import {useSelector} from 'react-redux'
 
 // Components
 import {
@@ -16,29 +16,19 @@ import RuleMessageContents from 'src/notifications/rules/components/RuleMessageC
 
 // Utils
 import {getRuleVariantDefaults} from 'src/notifications/rules/utils'
-import {getAll} from 'src/resources/selectors'
+import {getAllActiveEndpoints} from 'src/notifications/endpoints/selectors'
 import {useRuleDispatch} from './RuleOverlayProvider'
 
 // Types
-import {
-  NotificationEndpoint,
-  NotificationRuleDraft,
-  AppState,
-  ResourceType,
-} from 'src/types'
-
-interface StateProps {
-  endpoints: NotificationEndpoint[]
-}
+import {NotificationRuleDraft} from 'src/types'
 
-interface OwnProps {
+interface Props {
   rule: NotificationRuleDraft
 }
 
-type Props = OwnProps & StateProps
-
-const RuleMessage: FC<Props> = ({endpoints, rule}) => {
+const RuleMessage: FC<Props> = ({rule}) => {
   const dispatch = useRuleDispatch()
+  const endpoints = useSelector(getAllActiveEndpoints)
 
   const onSelectEndpoint = endpointID => {
     dispatch({
@@ -80,15 +70,4 @@ const RuleMessage: FC<Props> = ({endpoints, rule}) => {
   )
 }
 
-const mstp = (state: AppState) => {
-  const endpoints = getAll<NotificationEndpoint>(
-    state,
-    ResourceType.NotificationEndpoints
-  )
-
-  return {
-    endpoints,
-  }
-}
-
-export default connect(mstp)(RuleMessage)
+export default RuleMessage

src/notifications/rules/components/RulesColumn.tsx

@@ -1,15 +1,9 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {connect} from 'react-redux'
-import {withRouter, RouteComponentProps} from 'react-router-dom'
+import {useDispatch, useSelector} from 'react-redux'
 
 // Types
-import {
-  NotificationEndpoint,
-  NotificationRuleDraft,
-  AppState,
-  ResourceType,
-} from 'src/types'
+import {ResourceType} from 'src/types'
 
 // Components
 import {
@@ -20,34 +14,30 @@ import {
 } from '@influxdata/clockface'
 import NotificationRuleCards from 'src/notifications/rules/components/RuleCards'
 import AlertsColumn from 'src/alerting/components/AlertsColumn'
+import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 
 // Constants
 import {DOCS_URL_VERSION} from 'src/shared/constants/fluxFunctions'
 
 // Selectors
-import {getAll} from 'src/resources/selectors'
+import {getAllActiveEndpoints} from 'src/notifications/endpoints/selectors'
+import {getAllRules} from 'src/notifications/rules/selectors'
 
-interface OwnProps {
-  tabIndex: number
-}
+// Utils
+import {event} from 'src/cloud/utils/reporting'
 
-interface StateProps {
-  rules: NotificationRuleDraft[]
-  endpoints: NotificationEndpoint[]
+interface Props {
+  tabIndex: number
 }
 
-type Props = OwnProps & StateProps & RouteComponentProps<{orgID: string}>
+const NotificationRulesColumn: FunctionComponent<Props> = ({tabIndex}) => {
+  const dispatch = useDispatch()
+  const endpoints = useSelector(getAllActiveEndpoints)
+  const rules = useSelector(getAllRules)
 
-const NotificationRulesColumn: FunctionComponent<Props> = ({
-  rules,
-  history,
-  match,
-  endpoints,
-  tabIndex,
-}) => {
   const handleOpenOverlay = () => {
-    const newRuleRoute = `/orgs/${match.params.orgID}/alerting/rules/new`
-    history.push(newRuleRoute)
+    event('Create Notification Rule opened')
+    dispatch(showOverlay('create-rule', null, () => dispatch(dismissOverlay())))
   }
 
   const tooltipContents = (
@@ -106,21 +96,4 @@ const NotificationRulesColumn: FunctionComponent<Props> = ({
   )
 }
 
-const mstp = (state: AppState) => {
-  const rules = getAll<NotificationRuleDraft>(
-    state,
-    ResourceType.NotificationRules
-  )
-
-  const endpoints = getAll<NotificationEndpoint>(
-    state,
-    ResourceType.NotificationEndpoints
-  )
-
-  return {rules, endpoints}
-}
-
-export default connect<StateProps>(
-  mstp,
-  null
-)(withRouter(NotificationRulesColumn))
+export default NotificationRulesColumn

src/notifications/rules/selectors/index.ts

@@ -1,4 +1,5 @@
-import {AppState, NotificationRuleDraft} from 'src/types'
+import {AppState, ResourceType, NotificationRuleDraft} from 'src/types'
+import {getAll} from 'src/resources/selectors'
 
 export const getRuleIDs = (state: AppState): {[x: string]: boolean} => {
   return state.resources.rules.allIDs.reduce(
@@ -7,7 +8,13 @@ export const getRuleIDs = (state: AppState): {[x: string]: boolean} => {
   )
 }
 
-export const sortRulesByName = (
-  rules: NotificationRuleDraft[]
-): NotificationRuleDraft[] =>
+export const sortRulesByName = <T extends {name: string}>(rules: T[]): T[] =>
   rules.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1))
+
+export const getAllRules = (state: AppState) => {
+  const rules = getAll<NotificationRuleDraft>(
+    state,
+    ResourceType.NotificationRules
+  )
+  return !!rules.length ? sortRulesByName(rules) : []
+}

src/overlays/components/OverlayController.tsx

@@ -35,6 +35,7 @@ import AutoRefreshOverlay from 'src/dashboards/components/AutoRefreshOverlay'
 import CellCloneOverlay from 'src/shared/components/cells/CellCloneOverlay'
 import CustomApiTokenOverlay from 'src/authorizations/components/CustomApiTokenOverlay'
 import DisplayTokenOverlay from 'src/authorizations/components/DisplayTokenOverlay'
+import NewRuleOverlay from 'src/notifications/rules/components/NewRuleOverlay'
 import CreateSecretOverlay from 'src/secrets/components/CreateSecret/CreateSecretOverlay'
 
 // Actions
@@ -132,6 +133,9 @@ export const OverlayController: FunctionComponent = () => {
       case 'cell-copy-overlay':
         activeOverlay.current = <CellCloneOverlay />
         break
+      case 'create-rule':
+        activeOverlay.current = <NewRuleOverlay />
+        break
       case 'create-secret':
         activeOverlay.current = <CreateSecretOverlay />
         break

src/overlays/reducers/overlays.ts

@@ -27,6 +27,7 @@ export type OverlayID =
   | 'toggle-auto-refresh'
   | 'cell-copy-overlay'
   | 'bucket-schema-show'
+  | 'create-rule'
   | 'create-secret'
 
 export interface OverlayState {