chore(ui/alerts): change notificationRule to rule (#14506)

* chore(ui): change notification rule to rule

* chore(ui/alerts/actions): change from notificationRule to rule

* feat flag

* fix: component name

* fix: no console.log

ui/src/alerting/actions/notificationRules.ts → ui/src/alerting/actions/notifications/rules.ts

@@ -19,34 +19,34 @@ import {NotificationRule, GetState} from 'src/types'
 
 export type Action =
   | ReturnType<typeof setAllNotificationRules>
-  | ReturnType<typeof setNotificationRule>
-  | ReturnType<typeof setCurrentNotificationRule>
-  | ReturnType<typeof removeNotificationRule>
+  | ReturnType<typeof setRule>
+  | ReturnType<typeof setCurrentRule>
+  | ReturnType<typeof removeRule>
 
 export const setAllNotificationRules = (
   status: RemoteDataState,
-  notificationRules?: NotificationRule[]
+  rules?: NotificationRule[]
 ) => ({
   type: 'SET_ALL_NOTIFICATION_RULES' as 'SET_ALL_NOTIFICATION_RULES',
-  payload: {status, notificationRules},
+  payload: {status, rules},
 })
 
-export const setNotificationRule = (notificationRule: NotificationRule) => ({
+export const setRule = (rule: NotificationRule) => ({
   type: 'SET_NOTIFICATION_RULE' as 'SET_NOTIFICATION_RULE',
-  payload: {notificationRule},
+  payload: {rule},
 })
 
-export const setCurrentNotificationRule = (
+export const setCurrentRule = (
   status: RemoteDataState,
-  notificationRule?: NotificationRule
+  rule?: NotificationRule
 ) => ({
   type: 'SET_CURRENT_NOTIFICATION_RULE' as 'SET_CURRENT_NOTIFICATION_RULE',
-  payload: {status, notificationRule},
+  payload: {status, rule},
 })
 
-export const removeNotificationRule = (notificationRuleID: string) => ({
+export const removeRule = (ruleID: string) => ({
   type: 'REMOVE_NOTIFICATION_RULE' as 'REMOVE_NOTIFICATION_RULE',
-  payload: {notificationRuleID},
+  payload: {ruleID},
 })
 
 export const getNotificationRules = () => async (
@@ -67,86 +67,84 @@ export const getNotificationRules = () => async (
       throw new Error(resp.data.message)
     }
 
-    dispatch(
-      setAllNotificationRules(RemoteDataState.Done, resp.data.notificationRules)
-    )
+    dispatch(setAllNotificationRules(RemoteDataState.Done, resp.data.rules))
   } catch (e) {
     console.error(e)
     dispatch(setAllNotificationRules(RemoteDataState.Error))
     dispatch(notify(copy.getNotificationRulesFailed(e.message)))
   }
 }
 
-export const getCurrentNotificationRule = (
-  notificationRuleID: string
-) => async (dispatch: Dispatch<Action | NotificationAction>) => {
+export const getCurrentRule = (ruleID: string) => async (
+  dispatch: Dispatch<Action | NotificationAction>
+) => {
   try {
-    dispatch(setCurrentNotificationRule(RemoteDataState.Loading))
+    dispatch(setCurrentRule(RemoteDataState.Loading))
 
-    const resp = await api.getNotificationRule({ruleID: notificationRuleID})
+    const resp = await api.getNotificationRule({ruleID})
 
     if (resp.status !== 200) {
       throw new Error(resp.data.message)
     }
 
-    dispatch(setCurrentNotificationRule(RemoteDataState.Done, resp.data))
+    dispatch(setCurrentRule(RemoteDataState.Done, resp.data))
   } catch (e) {
     console.error(e)
-    dispatch(setCurrentNotificationRule(RemoteDataState.Error))
+    dispatch(setCurrentRule(RemoteDataState.Error))
     dispatch(notify(copy.getNotificationRuleFailed(e.message)))
   }
 }
 
-export const createNotificationRule = (
-  notificationRule: Partial<NotificationRule>
-) => async (dispatch: Dispatch<Action | NotificationAction>) => {
+export const createRule = (rule: Partial<NotificationRule>) => async (
+  dispatch: Dispatch<Action | NotificationAction>
+) => {
   try {
     const resp = await api.postNotificationRule({
-      data: notificationRule as NotificationRule,
+      data: rule as NotificationRule,
     })
 
     if (resp.status !== 201) {
       throw new Error(resp.data.message)
     }
   } catch (e) {
     console.error(e)
-    dispatch(notify(copy.createNotificationRuleFailed(e.message)))
+    dispatch(notify(copy.createRuleFailed(e.message)))
   }
 }
 
-export const updateNotificationRule = (
-  notificationRule: Partial<NotificationRule>
-) => async (dispatch: Dispatch<Action | NotificationAction>) => {
+export const updateRule = (rule: Partial<NotificationRule>) => async (
+  dispatch: Dispatch<Action | NotificationAction>
+) => {
   try {
     const resp = await api.putNotificationRule({
-      ruleID: notificationRule.id,
-      data: notificationRule as NotificationRule,
+      ruleID: rule.id,
+      data: rule as NotificationRule,
     })
 
     if (resp.status !== 200) {
       throw new Error(resp.data.message)
     }
 
-    dispatch(setNotificationRule(resp.data))
+    dispatch(setRule(resp.data))
   } catch (e) {
     console.error(e)
-    dispatch(notify(copy.updateNotificationRuleFailed(e.message)))
+    dispatch(notify(copy.updateRuleFailed(e.message)))
   }
 }
 
-export const deleteNotificationRule = (notificationRuleID: string) => async (
+export const deleteRule = (ruleID: string) => async (
   dispatch: Dispatch<Action | NotificationAction>
 ) => {
   try {
-    const resp = await api.deleteNotificationRule({ruleID: notificationRuleID})
+    const resp = await api.deleteNotificationRule({ruleID: ruleID})
 
     if (resp.status !== 204) {
       throw new Error(resp.data.message)
     }
 
-    dispatch(removeNotificationRule(notificationRuleID))
+    dispatch(removeRule(ruleID))
   } catch (e) {
     console.error(e)
-    dispatch(notify(copy.deleteNotificationRuleFailed(e.message)))
+    dispatch(notify(copy.deleteRuleFailed(e.message)))
   }
 }

ui/src/alerting/components/AlertsColumnHeader.tsx

@@ -0,0 +1,27 @@
+// Libraries
+import React, {FC} from 'react'
+
+// Components
+import {Button, IconFont} from '@influxdata/clockface'
+
+const style = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+}
+
+interface Props {
+  title: string
+  onCreate: () => void
+}
+
+const AlertsColumnHeader: FC<Props> = ({onCreate, title}) => {
+  return (
+    <div style={style}>
+      {title}
+      <Button text="Create" icon={IconFont.AddCell} onClick={onCreate} />
+    </div>
+  )
+}
+
+export default AlertsColumnHeader

ui/src/alerting/components/notifications/NewRuleOverlay.tsx

@@ -0,0 +1,28 @@
+// Libraries
+import React, {FC} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+
+// Components
+import {Overlay} from '@influxdata/clockface'
+
+type Props = WithRouterProps
+
+const NewRuleOverlay: FC<Props> = ({params, router}) => {
+  const handleDismiss = () => {
+    router.push(`/orgs/${params.orgID}/alerting`)
+  }
+
+  return (
+    <Overlay visible={true}>
+      <Overlay.Container>
+        <Overlay.Header
+          title="Create a Notification Rule"
+          onDismiss={handleDismiss}
+        />
+        <Overlay.Body>hai</Overlay.Body>
+      </Overlay.Container>
+    </Overlay>
+  )
+}
+
+export default withRouter<Props>(NewRuleOverlay)

ui/src/alerting/components/NotificationRuleCard.tsx → ui/src/alerting/components/notifications/RuleCard.tsx

@@ -5,104 +5,101 @@ import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
 import {SlideToggle, ComponentSize, ResourceCard} from '@influxdata/clockface'
-import NotificationRuleCardContext from 'src/alerting/components/NotificationRuleCardContext'
+import NotificationRuleCardContext from 'src/alerting/components/notifications/RuleCardContext'
 
 // Constants
 import {DEFAULT_NOTIFICATION_RULE_NAME} from 'src/alerting/constants'
 
 // Actions
-import {
-  updateNotificationRule,
-  deleteNotificationRule,
-} from 'src/alerting/actions/notificationRules'
+import {updateRule, deleteRule} from 'src/alerting/actions/notifications/rules'
 
 // Types
 import {NotificationRule} from 'src/types'
 
 interface DispatchProps {
-  updateNotificationRule: typeof updateNotificationRule
-  deleteNotificationRule: typeof deleteNotificationRule
+  updateRule: typeof updateRule
+  deleteNotificationRule: typeof deleteRule
 }
 
 interface OwnProps {
-  notificationRule: NotificationRule
+  rule: NotificationRule
 }
 
 type Props = OwnProps & DispatchProps & WithRouterProps
 
-const NotificationRuleCard: FunctionComponent<Props> = ({
-  notificationRule,
-  updateNotificationRule,
+const RuleCard: FunctionComponent<Props> = ({
+  rule,
+  updateRule,
   deleteNotificationRule,
   params: {orgID},
   router,
 }) => {
   const onUpdateName = (name: string) => {
-    updateNotificationRule({id: notificationRule.id, name})
+    updateRule({id: rule.id, name})
   }
 
   const onDelete = () => {
-    deleteNotificationRule(notificationRule.id)
+    deleteNotificationRule(rule.id)
   }
 
   const onExport = () => {}
 
   const onClone = () => {}
 
   const onToggle = () => {
-    const status = notificationRule.status === 'active' ? 'inactive' : 'active'
+    const status = rule.status === 'active' ? 'inactive' : 'active'
 
-    updateNotificationRule({id: notificationRule.id, status})
+    updateRule({id: rule.id, status})
   }
 
   const onRuleClick = () => {
-    router.push(`/orgs/${orgID}/notificationRules/${notificationRule.id}`)
+    router.push(`/orgs/${orgID}/rules/${rule.id}`)
   }
 
   return (
     <ResourceCard
-      key={`notificationRule-id--${notificationRule.id}`}
-      testID="notificationRule-card"
+      key={`rule-id--${rule.id}`}
+      testID="rule-card"
       name={
         <ResourceCard.EditableName
           onUpdate={onUpdateName}
           onClick={onRuleClick}
-          name={notificationRule.name}
+          name={rule.name}
           noNameString={DEFAULT_NOTIFICATION_RULE_NAME}
-          testID="notificationRule-card--name"
-          buttonTestID="notificationRule-card--name-button"
-          inputTestID="notificationRule-card--input"
+          testID="rule-card--name"
+          buttonTestID="rule-card--name-button"
+          inputTestID="rule-card--input"
         />
       }
       toggle={
         <SlideToggle
-          active={notificationRule.status === 'active'}
+          active={rule.status === 'active'}
           size={ComponentSize.ExtraSmall}
           onChange={onToggle}
-          testID="notificationRule-card--slide-toggle"
+          testID="rule-card--slide-toggle"
         />
       }
       // description
       // labels
-      disabled={notificationRule.status === 'inactive'}
+      disabled={rule.status === 'inactive'}
       contextMenu={
         <NotificationRuleCardContext
           onDelete={onDelete}
           onExport={onExport}
           onClone={onClone}
         />
       }
-      metaData={[<>{notificationRule.updatedAt.toString()}</>]}
+      metaData={[<>{rule.updatedAt.toString()}</>]}
     />
   )
 }
 
 const mdtp: DispatchProps = {
-  updateNotificationRule: updateNotificationRule,
-  deleteNotificationRule: deleteNotificationRule,
+  updateRule: updateRule,
+  deleteNotificationRule: deleteRule,
 }
 
 export default connect<{}, DispatchProps, {}>(
   null,
   mdtp
-)(withRouter(NotificationRuleCard))
+)(withRouter(RuleCard))

ui/src/alerting/components/NotificationRuleCardContext.tsx → ui/src/alerting/components/notifications/RuleCardContext.tsx

@@ -11,7 +11,7 @@ interface Props {
   onExport: () => void
 }
 
-const NotificationRuleCardContext: FunctionComponent<Props> = ({
+const RuleCardContext: FunctionComponent<Props> = ({
   onDelete,
   onClone,
   onExport,
@@ -39,4 +39,4 @@ const NotificationRuleCardContext: FunctionComponent<Props> = ({
   )
 }
 
-export default NotificationRuleCardContext
+export default RuleCardContext