remove overflowY from modal; fix feature breakdown tab (#84)

public/app.scss

@@ -19,3 +19,4 @@
 @import 'pages/DetectorConfig/index.scss';
 @import 'pages/AnomalyCharts/index.scss';
 @import 'pages/DetectorResults/index.scss';
+@import 'pages/DetectorDetail/index.scss';

public/pages/AnomalyCharts/containers/AnomaliesChart.tsx

@@ -96,6 +96,7 @@ interface AnomaliesChartProps {
   detectorInterval?: number;
   unit?: string;
   monitor?: Monitor;
+  children: React.ReactNode | React.ReactNode[];
 }
 export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
   const dispatch = useDispatch();
@@ -405,6 +406,9 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexGroup>
+        <div style={{ paddingTop: '10px', margin: '0px -20px -30px -20px'}}>
+          {props.children}
+        </div>
       </ContentPanel>
 
       {showAlertsFlyout ? (

public/pages/AnomalyCharts/containers/FeatureBreakDown.tsx

@@ -46,11 +46,11 @@ export const FeatureBreakDown = React.memo((props: FeatureBreakDownProps) => {
             <EuiTitle size="s" className="preview-title">
               <h4>{props.title}</h4>
             </EuiTitle>
+          <EuiSpacer size="s" />
           </EuiFlexItem>
         </EuiFlexGroup>
       ) : null}
 
-      <EuiSpacer size="s" />
       {get(props, 'detector.featureAttributes', []).map(
         (feature: FeatureAttributes, index: number) => (
           <React.Fragment key={`${feature.featureName}-${feature.featureId}`}>
@@ -98,7 +98,7 @@ export const FeatureBreakDown = React.memo((props: FeatureBreakDownProps) => {
                 focusOnFeatureAccordion(index);
               }}
             />
-            <EuiSpacer />
+            <EuiSpacer size='m'/>
           </React.Fragment>
         )
       )}

public/pages/AnomalyCharts/index.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License").
  * You may not use this file except in compliance with the License.

public/pages/DetectorDetail/index.scss

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License").
+ * You may not use this file except in compliance with the License.
+ * A copy of the License is located at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * or in the "license" file accompanying this file. This file is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ * express or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+.euiModalBody__overflow {
+  overflow-y: hidden !important;
+}

public/pages/DetectorResults/containers/AnomalyHistory.tsx

@@ -17,7 +17,6 @@ import React, { useState, useEffect, useCallback, Fragment } from 'react';
 import {
   EuiFlexItem,
   EuiFlexGroup,
-  EuiSpacer,
   EuiTabs,
   EuiTab,
   EuiLoadingSpinner,
@@ -161,42 +160,42 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => {
         )}
         unit={get(props.detector, 'detectionInterval.period.unit')}
         monitor={props.monitor}
-      />
-      <EuiTabs>{renderTabs()}</EuiTabs>
-      <EuiSpacer />
+      >
+        <EuiTabs>{renderTabs()}</EuiTabs>
 
-      {isLoading ? (
-        <EuiFlexGroup
-          justifyContent="spaceAround"
-          style={{ height: '200px', paddingTop: '100px' }}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiLoadingSpinner size="xl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ) : (
-        <Fragment>
-          {selectedTabId === 'featureBreakdown' ? (
-            <FeatureBreakDown
-              detector={props.detector}
-              // @ts-ignore
-              anomaliesResult={anomalyResults}
-              annotations={annotations}
-              isLoading={isLoading}
-              dateRange={zoomRange}
-              featureDataSeriesName="Feature output"
-            />
-          ) : (
-            <AnomalyResultsTable
-              anomalies={filterWithDateRange(
-                anomalyResults.anomalies,
-                zoomRange,
-                'plotTime'
-              )}
-            />
-          )}
-        </Fragment>
-      )}
+        {isLoading ? (
+          <EuiFlexGroup
+            justifyContent="spaceAround"
+            style={{ height: '200px', paddingTop: '100px' }}
+          >
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="xl" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <div style={{ padding: '20px', backgroundColor: '#F7F7F7' }}>
+            {selectedTabId === 'featureBreakdown' ? (
+              <FeatureBreakDown
+                detector={props.detector}
+                // @ts-ignore
+                anomaliesResult={anomalyResults}
+                annotations={annotations}
+                isLoading={isLoading}
+                dateRange={zoomRange}
+                featureDataSeriesName="Feature output"
+              />
+            ) : (
+              <AnomalyResultsTable
+                anomalies={filterWithDateRange(
+                  anomalyResults.anomalies,
+                  zoomRange,
+                  'plotTime'
+                )}
+              />
+            )}
+          </div>
+        )}
+      </AnomaliesChart>
     </Fragment>
   );
 };