feat(ui): Show users saving errors from check time machine (#16333)

2019-12-27 02:05:08 +00:00 · 2019-12-27 02:05:08 +00:00 · 142fbcbb3f
parent dd41af3d7a
commit 142fbcbb3f
4 changed files with 61 additions and 104 deletions
--- a/ui/src/alerting/actions/checks.ts
+++ b/ui/src/alerting/actions/checks.ts
@ -23,6 +23,7 @@ import {
  setActiveTimeMachine,
  updateTimeMachineCheck,
  setCheckStatus,
+  setTimeMachineCheck,
 } from 'src/timeMachine/actions'
 import {executeQueries} from 'src/timeMachine/actions/queries'
 import {checkChecksLimits} from 'src/cloud/actions/limits'
@ -140,50 +141,59 @@ export const saveCheckFromTimeMachine = () => async (
  dispatch: Dispatch<any>,
  getState: GetState
 ) => {
-  const state = getState()
-  const {
-    orgs: {
-      org: {id: orgID},
-    },
-  } = state
+  try {
+    const state = getState()
+    const {
+      orgs: {
+        org: {id: orgID},
+      },
+    } = state

-  const {
-    draftQueries,
-    alerting: {check},
-  } = getActiveTimeMachine(state)
+    const {
+      draftQueries,
+      alerting: {check},
+    } = getActiveTimeMachine(state)

-  const labels = get(check, 'labels', []) as Label[]
-  const checkWithOrg = {
-    ...check,
-    query: draftQueries[0],
-    orgID,
-    labels: labels.map(l => l.id),
-  } as PostCheck
+    const labels = get(check, 'labels', []) as Label[]

-  const resp = check.id
-    ? await api.patchCheck({checkID: check.id, data: checkWithOrg})
-    : await api.postCheck({data: checkWithOrg})
+    const checkWithOrg = {
+      ...check,
+      query: draftQueries[0],
+      orgID,
+      labels: labels.map(l => l.id),
+    } as PostCheck

-  if (resp.status === 201 || resp.status === 200) {
-    dispatch(setCheck(resp.data))
-    dispatch(checkChecksLimits())
-  } else {
-    throw new Error(resp.data.message)
+    const resp = check.id
+      ? await updateCheckFromTimeMachine(checkWithOrg)
+      : await api.postCheck({data: checkWithOrg})
+
+    if (resp.status === 200 || resp.status === 201) {
+      dispatch(setCheck(resp.data))
+      dispatch(checkChecksLimits())
+
+      dispatch(push(`/orgs/${orgID}/alerting`))
+      dispatch(setTimeMachineCheck(RemoteDataState.NotStarted, null))
+    } else {
+      throw new Error(resp.data.message)
+    }
+  } catch (e) {
+    console.error(e)
+    dispatch(notify(copy.createCheckFailed(e.message)))
  }
 }

-export const updateCheck = (check: Partial<Check>) => async (
-  dispatch: Dispatch<Action | NotificationAction>
-) => {
-  const resp = await api.putCheck({checkID: check.id, data: check as Check})
+const updateCheckFromTimeMachine = async (check: Check) => {
+  // todo: refactor after https://github.com/influxdata/influxdb/issues/16317
+  const getCheckResponse = await api.getCheck({checkID: check.id})

-  if (resp.status === 200) {
-    dispatch(setCheck(resp.data))
-  } else {
-    throw new Error(resp.data.message)
+  if (getCheckResponse.status !== 200) {
+    throw new Error(getCheckResponse.data.message)
  }

-  dispatch(setCheck(resp.data))
+  return api.putCheck({
+    checkID: check.id,
+    data: {...check, ownerID: getCheckResponse.data.ownerID},
+  })
 }

 export const deleteCheck = (checkID: string) => async (
--- a/ui/src/alerting/components/EditCheckEO.tsx
+++ b/ui/src/alerting/components/EditCheckEO.tsx
@ -12,40 +12,38 @@ import TimeMachine from 'src/timeMachine/components/TimeMachine'
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'

 // Actions
-import {updateCheck, getCheckForTimeMachine} from 'src/alerting/actions/checks'
+import {
+  getCheckForTimeMachine,
+  saveCheckFromTimeMachine,
+} from 'src/alerting/actions/checks'
 import {
  setActiveTimeMachine,
  setTimeMachineCheck,
  updateTimeMachineCheck,
 } from 'src/timeMachine/actions'
 import {executeQueries} from 'src/timeMachine/actions/queries'
-import {notify} from 'src/shared/actions/notifications'
-import {updateCheckFailed} from 'src/shared/copy/notifications'

 // Types
 import {
  Check,
  AppState,
  RemoteDataState,
-  DashboardDraftQuery,
  TimeMachineID,
  QueryView,
 } from 'src/types'

 interface DispatchProps {
-  onUpdateCheck: typeof updateCheck
  onGetCheckForTimeMachine: typeof getCheckForTimeMachine
  onUpdateTimeMachineCheck: typeof updateTimeMachineCheck
  onSetActiveTimeMachine: typeof setActiveTimeMachine
  onSetTimeMachineCheck: typeof setTimeMachineCheck
  onExecuteQueries: typeof executeQueries
-  onNotify: typeof notify
+  onSaveCheckFromTimeMachine: typeof saveCheckFromTimeMachine
 }

 interface StateProps {
  view: QueryView | null
  check: Partial<Check>
-  query: DashboardDraftQuery
  checkStatus: RemoteDataState
  activeTimeMachineID: TimeMachineID
 }
@ -53,17 +51,15 @@ interface StateProps {
 type Props = WithRouterProps & DispatchProps & StateProps

 const EditCheckEditorOverlay: FunctionComponent<Props> = ({
-  onUpdateCheck,
  onExecuteQueries,
  onGetCheckForTimeMachine,
+  onSaveCheckFromTimeMachine,
  onUpdateTimeMachineCheck,
  onSetTimeMachineCheck,
-  onNotify,
  activeTimeMachineID,
  checkStatus,
  router,
  params: {checkID, orgID},
-  query,
  check,
  view,
 }) => {
@ -84,17 +80,6 @@ const EditCheckEditorOverlay: FunctionComponent<Props> = ({
    onSetTimeMachineCheck(RemoteDataState.NotStarted, null)
  }

-  const handleSave = () => {
-    // todo: update view when check has own view
-    try {
-      onUpdateCheck({...check, query})
-      handleClose()
-    } catch (e) {
-      console.error(e)
-      onNotify(updateCheckFailed(e.message))
-    }
-  }
-
  let loadingStatus = RemoteDataState.Loading

  if (checkStatus === RemoteDataState.Error) {
@ -120,7 +105,7 @@ const EditCheckEditorOverlay: FunctionComponent<Props> = ({
            name={check && check.name}
            onSetName={handleUpdateName}
            onCancel={handleClose}
-            onSave={handleSave}
+            onSave={onSaveCheckFromTimeMachine}
          />
          <div className="veo-contents">
            <TimeMachine />
@ -137,23 +122,21 @@ const mstp = (state: AppState): StateProps => {
  } = state

  const {
-    draftQueries,
    alerting: {check, checkStatus},
  } = getActiveTimeMachine(state)

  const {view} = getActiveTimeMachine(state)

-  return {check, checkStatus, activeTimeMachineID, query: draftQueries[0], view}
+  return {check, checkStatus, activeTimeMachineID, view}
 }

 const mdtp: DispatchProps = {
-  onUpdateCheck: updateCheck,
  onSetTimeMachineCheck: setTimeMachineCheck,
  onUpdateTimeMachineCheck: updateTimeMachineCheck,
  onSetActiveTimeMachine: setActiveTimeMachine,
  onGetCheckForTimeMachine: getCheckForTimeMachine,
+  onSaveCheckFromTimeMachine: saveCheckFromTimeMachine,
  onExecuteQueries: executeQueries,
-  onNotify: notify,
 }

 export default connect<StateProps, DispatchProps, {}>(
--- a/ui/src/alerting/components/NewDeadmanCheckEO.tsx
+++ b/ui/src/alerting/components/NewDeadmanCheckEO.tsx
@ -15,8 +15,6 @@ import {
  updateTimeMachineCheck,
  setTimeMachineCheck,
 } from 'src/timeMachine/actions'
-import {createCheckFailed} from 'src/shared/copy/notifications'
-import {notify} from 'src/shared/actions/notifications'

 // Utils
 import {createView} from 'src/shared/utils/view'
@ -30,8 +28,7 @@ interface DispatchProps {
  setTimeMachineCheck: typeof setTimeMachineCheck
  updateTimeMachineCheck: typeof updateTimeMachineCheck
  onSetActiveTimeMachine: typeof setActiveTimeMachine
-  saveCheckFromTimeMachine: typeof saveCheckFromTimeMachine
-  notify: typeof notify
+  onSaveCheckFromTimeMachine: typeof saveCheckFromTimeMachine
 }

 interface StateProps {
@ -45,12 +42,11 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
  onSetActiveTimeMachine,
  updateTimeMachineCheck,
  setTimeMachineCheck,
-  saveCheckFromTimeMachine,
+  onSaveCheckFromTimeMachine,
  params,
  router,
  checkStatus,
  check,
-  notify,
 }) => {
  useEffect(() => {
    const view = createView<CheckViewProperties>('deadman')
@ -72,19 +68,6 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
    router.push(`/orgs/${params.orgID}/alerting`)
  }

-  const handleSave = () => {
-    // todo: when check has own view
-    // save view as view
-    // put view.id on check.viewID
-    try {
-      saveCheckFromTimeMachine()
-      handleClose()
-    } catch (e) {
-      console.error(e)
-      notify(createCheckFailed(e.message))
-    }
-  }
-
  return (
    <Overlay visible={true} className="veo-overlay">
      <div className="veo">
@ -97,7 +80,7 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
            name={check && check.name}
            onSetName={handleUpdateName}
            onCancel={handleClose}
-            onSave={handleSave}
+            onSave={onSaveCheckFromTimeMachine}
          />
          <div className="veo-contents">
            <TimeMachine />
@ -120,8 +103,7 @@ const mdtp: DispatchProps = {
  setTimeMachineCheck: setTimeMachineCheck,
  updateTimeMachineCheck: updateTimeMachineCheck,
  onSetActiveTimeMachine: setActiveTimeMachine,
-  saveCheckFromTimeMachine: saveCheckFromTimeMachine,
-  notify: notify,
+  onSaveCheckFromTimeMachine: saveCheckFromTimeMachine,
 }

 export default connect<StateProps, DispatchProps, {}>(
--- a/ui/src/alerting/components/NewThresholdCheckEO.tsx
+++ b/ui/src/alerting/components/NewThresholdCheckEO.tsx
@ -15,8 +15,6 @@ import {
  updateTimeMachineCheck,
  setTimeMachineCheck,
 } from 'src/timeMachine/actions'
-import {createCheckFailed} from 'src/shared/copy/notifications'
-import {notify} from 'src/shared/actions/notifications'

 // Utils
 import {createView} from 'src/shared/utils/view'
@ -30,8 +28,7 @@ interface DispatchProps {
  setTimeMachineCheck: typeof setTimeMachineCheck
  updateTimeMachineCheck: typeof updateTimeMachineCheck
  onSetActiveTimeMachine: typeof setActiveTimeMachine
-  saveCheckFromTimeMachine: typeof saveCheckFromTimeMachine
-  notify: typeof notify
+  onSaveCheckFromTimeMachine: typeof saveCheckFromTimeMachine
 }

 interface StateProps {
@ -45,12 +42,11 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
  onSetActiveTimeMachine,
  updateTimeMachineCheck,
  setTimeMachineCheck,
-  saveCheckFromTimeMachine,
+  onSaveCheckFromTimeMachine,
  params,
  router,
  checkStatus,
  check,
-  notify,
 }) => {
  useEffect(() => {
    const view = createView<CheckViewProperties>('threshold')
@ -72,19 +68,6 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
    router.push(`/orgs/${params.orgID}/alerting`)
  }

-  const handleSave = () => {
-    // todo: when check has own view
-    // save view as view
-    // put view.id on check.viewID
-    try {
-      saveCheckFromTimeMachine()
-      handleClose()
-    } catch (e) {
-      console.error(e)
-      notify(createCheckFailed(e.message))
-    }
-  }
-
  return (
    <Overlay visible={true} className="veo-overlay">
      <div className="veo">
@ -97,7 +80,7 @@ const NewCheckOverlay: FunctionComponent<Props> = ({
            name={check && check.name}
            onSetName={handleUpdateName}
            onCancel={handleClose}
-            onSave={handleSave}
+            onSave={onSaveCheckFromTimeMachine}
          />
          <div className="veo-contents">
            <TimeMachine />
@ -120,8 +103,7 @@ const mdtp: DispatchProps = {
  setTimeMachineCheck: setTimeMachineCheck,
  updateTimeMachineCheck: updateTimeMachineCheck,
  onSetActiveTimeMachine: setActiveTimeMachine,
-  saveCheckFromTimeMachine: saveCheckFromTimeMachine,
-  notify: notify,
+  onSaveCheckFromTimeMachine: saveCheckFromTimeMachine,
 }

 export default connect<StateProps, DispatchProps, {}>(