From 2b9968456d6dd9acda16d9b072bef0ddd85a0a9d Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 21 May 2020 14:57:39 -0700
Subject: [PATCH] Handle error on detector detail pages

---
 .../containers/DetectorDetail.tsx             | 35 ++++++++++++++-----
 public/redux/reducers/__tests__/ad.test.ts    |  9 ++---
 public/redux/reducers/ad.ts                   |  2 +-
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/public/pages/DetectorDetail/containers/DetectorDetail.tsx b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
index 4a303617..1d4f7665 100644
--- a/public/pages/DetectorDetail/containers/DetectorDetail.tsx
+++ b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
@@ -91,8 +91,12 @@ interface DetectorDetailModel {
 export const DetectorDetail = (props: DetectorDetailProps) => {
   const dispatch = useDispatch();
   const detectorId = get(props, 'match.params.detectorId', '') as string;
-  const { detector, hasError, isLoadingDetector } = useFetchDetectorInfo(detectorId);
-  const { monitor, fetchMonitorError, isLoadingMonitor } = useFetchMonitorInfo(detectorId);
+  const { detector, hasError, isLoadingDetector } = useFetchDetectorInfo(
+    detectorId
+  );
+  const { monitor, fetchMonitorError, isLoadingMonitor } = useFetchMonitorInfo(
+    detectorId
+  );
 
   //TODO: test dark mode once detector configuration and AD result page merged
   const isDark = darkModeEnabled();
@@ -266,7 +270,10 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
               : { ...lightStyles, flexGrow: 'unset' }),
           }}
         >
-          <EuiFlexGroup justifyContent="spaceBetween" style={{ padding: '10px' }}>
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
+            style={{ padding: '10px' }}
+          >
             <EuiFlexItem grow={false}>
               <EuiTitle size="l">
                 <h1>
@@ -282,19 +289,29 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
                     </EuiHealth>
                   ) : detector.enabled &&
                     detector.curState === DETECTOR_STATE.INIT ? (
-                    <EuiHealth color={DETECTOR_STATE_COLOR.INIT}>Initializing</EuiHealth>
+                    <EuiHealth color={DETECTOR_STATE_COLOR.INIT}>
+                      Initializing
+                    </EuiHealth>
                   ) : detector.curState === DETECTOR_STATE.INIT_FAILURE ||
                     detector.curState === DETECTOR_STATE.UNEXPECTED_FAILURE ? (
-                    <EuiHealth color={DETECTOR_STATE_COLOR.INIT_FAILURE}>Initialization failure</EuiHealth>
+                    <EuiHealth color={DETECTOR_STATE_COLOR.INIT_FAILURE}>
+                      Initialization failure
+                    </EuiHealth>
                   ) : detector.curState === DETECTOR_STATE.DISABLED ? (
                     <EuiHealth color={DETECTOR_STATE_COLOR.DISABLED}>
                       {detector.disabledTime
-                      ? `Stopped at ${moment(detector.disabledTime).format('MM/DD/YY h:mm A')}`
-                      : 'Detector is stopped'}
+                        ? `Stopped at ${moment(detector.disabledTime).format(
+                            'MM/DD/YY h:mm A'
+                          )}`
+                        : 'Detector is stopped'}
                     </EuiHealth>
                   ) : detector.curState === DETECTOR_STATE.FEATURE_REQUIRED ? (
-                    <EuiHealth color={DETECTOR_STATE_COLOR.FEATURE_REQUIRED}>Feature required to start the detector</EuiHealth>
-                  ) : ''}
+                    <EuiHealth color={DETECTOR_STATE_COLOR.FEATURE_REQUIRED}>
+                      Feature required to start the detector
+                    </EuiHealth>
+                  ) : (
+                    ''
+                  )}
                 </h1>
               </EuiTitle>
             </EuiFlexItem>
diff --git a/public/redux/reducers/__tests__/ad.test.ts b/public/redux/reducers/__tests__/ad.test.ts
index d577db69..d8b3df16 100644
--- a/public/redux/reducers/__tests__/ad.test.ts
+++ b/public/redux/reducers/__tests__/ad.test.ts
@@ -48,9 +48,7 @@ describe('detector reducer actions', () => {
     });
     test('should invoke [REQUEST, FAILURE]', async () => {
       const detectorId = 'randomDetectorID';
-      httpMockedClient.get = jest
-        .fn()
-        .mockRejectedValue({ data: { ok: false, error: 'Not found' } });
+      httpMockedClient.get = jest.fn().mockRejectedValue('Not found');
       try {
         await store.dispatch(getDetector(detectorId));
       } catch (e) {
@@ -206,7 +204,10 @@ describe('detector reducer actions', () => {
           [detectorId]: {
             ...randomDetector,
             id: detectorId,
-            lastUpdateTime: get(result, `detectors.${detectorId}.lastUpdateTime`)
+            lastUpdateTime: get(
+              result,
+              `detectors.${detectorId}.lastUpdateTime`
+            ),
           },
         },
       });
diff --git a/public/redux/reducers/ad.ts b/public/redux/reducers/ad.ts
index a3bc8592..4e5462a7 100644
--- a/public/redux/reducers/ad.ts
+++ b/public/redux/reducers/ad.ts
@@ -94,7 +94,7 @@ const reducer = handleActions<Detectors>(
       FAILURE: (state: Detectors, action: APIErrorAction): Detectors => ({
         ...state,
         requesting: false,
-        errorMessage: action.error.data.error,
+        errorMessage: action.error,
       }),
     },
     [START_DETECTOR]: {