Address couples of feedback. Issue: #26, #36, #37, #38 (#45)

* Address couples of feedback. Issue: #26, #36, #37, #38

public/components/ContentPanel/ContentPanel.tsx

@@ -14,8 +14,9 @@
  */
 
 import React from 'react';
-//@ts-ignore
+
 import {
+  //@ts-ignore
   EuiTitleSize,
   EuiFlexGroup,
   EuiFlexItem,
@@ -38,22 +39,27 @@ type ContentPanelProps = {
   titleContainerStyles?: React.CSSProperties;
   actions?: React.ReactNode | React.ReactNode[];
   children: React.ReactNode | React.ReactNode[];
+  contentPanelClassName?: string;
 };
 
 const ContentPanel = (props: ContentPanelProps) => (
   <EuiPanel
-    style={{ paddingLeft: '0px', paddingRight: '0px', ...props.panelStyles }}
+    style={{
+      padding: '20px 0px',
+      ...props.panelStyles,
+    }}
+    className={props.contentPanelClassName}
   >
     <EuiFlexGroup
-      style={{ padding: '0px 10px', ...props.titleContainerStyles }}
+      style={{ padding: '0px 20px', ...props.titleContainerStyles }}
       justifyContent="spaceBetween"
       alignItems="center"
     >
       <EuiFlexItem>
         {typeof props.title === 'string' ? (
           <EuiTitle
             size={props.titleSize || 'l'}
-            className={props.titleClassName || 'content-panel-title'}
+            className={props.titleClassName || ''}
           >
             <h3>{props.title}</h3>
           </EuiTitle>
@@ -105,7 +111,14 @@ const ContentPanel = (props: ContentPanelProps) => (
         className={props.horizontalRuleClassName}
       />
     )}
-    <div style={{ padding: '0px 10px', ...props.bodyStyles }}>
+    <div
+      style={{
+        paddingTop: '12px',
+        paddingLeft: '20px',
+        paddingRight: '20px',
+        ...props.bodyStyles,
+      }}
+    >
       {props.children}
     </div>
   </EuiPanel>

public/components/ContentPanel/__snapshots__/ContentPanel.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
       class="euiFlexItem"
     >
       <h3
-        class="euiTitle euiTitle--large content-panel-title"
+        class="euiTitle euiTitle--large"
       >
         Testing
       </h3>

public/components/ContentPanel/index.scss

@@ -13,13 +13,8 @@
  * permissions and limitations under the License.
  */
 
-.content-panel-title {
-  color: #3f3f3f;
-}
-
 .content-panel-subTitle {
   color: #879196;
-  font-family: 'Helvetica Neue';
   font-size: 12px;
   letter-spacing: 0;
 }

public/pages/Dashboard/Components/AnomaliesDistribution.tsx

@@ -34,9 +34,9 @@ import { useDispatch } from 'react-redux';
 import { Datum } from '@elastic/charts/dist/utils/commons';
 import React from 'react';
 import { TIME_RANGE_OPTIONS } from '../../Dashboard/utils/constants';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { searchES } from '../../../redux/reducers/elasticsearch';
-import { MAX_DETECTORS } from '../../../utils/constants';
+import { MAX_DETECTORS, MAX_ANOMALIES } from '../../../utils/constants';
 import { AD_DOC_FIELDS } from '../../../../server/utils/constants';
 export interface AnomaliesDistributionChartProps {
   allDetectorsSelected: boolean;
@@ -64,17 +64,23 @@ export const AnomaliesDistributionChart = (
   const [timeRange, setTimeRange] = useState(TIME_RANGE_OPTIONS[0].value);
 
   const getAnomalyResult = async (currentDetectors: DetectorListItem[]) => {
-    const finalAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
+    const latestAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
       searchES,
       props.selectedDetectors,
       timeRange,
-      MAX_DETECTORS,
-      dispatch
+      dispatch,
+      0,
+      MAX_ANOMALIES,
+      MAX_DETECTORS
     );
-    setAnomalyResults(finalAnomalyResult);
+
+    const nonZeroAnomalyResult = latestAnomalyResult.filter(
+      anomalyData => get(anomalyData, AD_DOC_FIELDS.ANOMALY_GRADE, 0) > 0
+    );
+    setAnomalyResults(nonZeroAnomalyResult);
 
     const resultDetectors = getFinalDetectors(
-      finalAnomalyResult,
+      nonZeroAnomalyResult,
       props.selectedDetectors
     );
     setIndicesNumber(getFinalIndices(resultDetectors).size);
@@ -123,9 +129,8 @@ export const AnomaliesDistributionChart = (
         <EuiFlexItem>
           <EuiText className={'anomaly-distribution-subtitle'}>
             <p>
-              {
-                'The inner circle shows the anomaly distribution by your indices. The outer circle shows the anomaly distribution by your detector'
-              }
+              {'The inner circle shows the anomaly distribution by your indices. ' +
+                'The outer circle shows the anomaly distribution by your detectors.'}
             </p>
           </EuiText>
         </EuiFlexItem>
@@ -141,7 +146,7 @@ export const AnomaliesDistributionChart = (
         />
       }
     >
-      <EuiFlexGroup style={{ padding: '10px' }}>
+      <EuiFlexGroup>
         <EuiFlexItem>
           <EuiStat
             description={'Indices with anomalies'}
@@ -161,80 +166,76 @@ export const AnomaliesDistributionChart = (
       </EuiFlexGroup>
       {anomalyResultsLoading ? (
         <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false}>
-            <EuiLoadingChart size="m" />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiLoadingChart size="l" />
-          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiLoadingChart size="xl" />
           </EuiFlexItem>
         </EuiFlexGroup>
       ) : (
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
-            <Chart className="anomalies-distribution-sunburst">
-              <Partition
-                id="Anomalies by index and detector"
-                data={visualizeAnomalyResultForSunburstChart(
-                  anomalyResults,
-                  finalDetectors
-                )}
-                valueAccessor={(d: Datum) => d.count as number}
-                valueFormatter={(d: number) => d.toString()}
-                layers={[
-                  {
-                    groupByRollup: (d: Datum) => d.indices,
-                    nodeLabel: (d: Datum) => {
-                      return d;
-                    },
-                    fillLabel: {
-                      textInvertible: true,
-                    },
-                    shape: {
-                      fillColor: d => {
-                        return fillOutColors(
-                          d,
-                          (d.x0 + d.x1) / 2 / (2 * Math.PI),
-                          []
-                        );
+            {isEmpty(anomalyResults) ? null : (
+              <Chart className="anomalies-distribution-sunburst">
+                <Partition
+                  id="Anomalies by index and detector"
+                  data={visualizeAnomalyResultForSunburstChart(
+                    anomalyResults,
+                    finalDetectors
+                  )}
+                  valueAccessor={(d: Datum) => d.count as number}
+                  valueFormatter={(d: number) => d.toString()}
+                  layers={[
+                    {
+                      groupByRollup: (d: Datum) => d.indices,
+                      nodeLabel: (d: Datum) => {
+                        return d;
+                      },
+                      fillLabel: {
+                        textInvertible: true,
+                      },
+                      shape: {
+                        fillColor: d => {
+                          return fillOutColors(
+                            d,
+                            (d.x0 + d.x1) / 2 / (2 * Math.PI),
+                            []
+                          );
+                        },
                       },
                     },
-                  },
-                  {
-                    groupByRollup: (d: Datum) => d.name,
-                    nodeLabel: (d: Datum) => {
-                      return d;
+                    {
+                      groupByRollup: (d: Datum) => d.name,
+                      nodeLabel: (d: Datum) => {
+                        return d;
+                      },
+                      fillLabel: {
+                        textInvertible: true,
+                      },
+                      shape: {
+                        fillColor: d => {
+                          return fillOutColors(
+                            d,
+                            (d.x0 + d.x1) / 2 / (2 * Math.PI),
+                            []
+                          );
+                        },
+                      },
                     },
+                  ]}
+                  config={{
+                    partitionLayout: PartitionLayout.sunburst,
+                    fontFamily: 'Arial',
+                    outerSizeRatio: 1,
                     fillLabel: {
                       textInvertible: true,
                     },
-                    shape: {
-                      fillColor: d => {
-                        return fillOutColors(
-                          d,
-                          (d.x0 + d.x1) / 2 / (2 * Math.PI),
-                          []
-                        );
-                      },
-                    },
-                  },
-                ]}
-                config={{
-                  partitionLayout: PartitionLayout.sunburst,
-                  fontFamily: 'Arial',
-                  outerSizeRatio: 1,
-                  fillLabel: {
-                    textInvertible: true,
-                  },
-                  // TODO: Given only 1 detector exists, the inside Index circle will have issue in following scenarios:
-                  // 1: if Linked Label is configured for identifying index, label of Index circle will be invisible;
-                  // 2: if Fill Label is configured for identifying index, label of it will be overlapped with outer Detector circle
-                  // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/24
-                }}
-              />
-            </Chart>
+                    // TODO: Given only 1 detector exists, the inside Index circle will have issue in following scenarios:
+                    // 1: if Linked Label is configured for identifying index, label of Index circle will be invisible;
+                    // 2: if Fill Label is configured for identifying index, label of it will be overlapped with outer Detector circle
+                    // Issue link: https://github.com/opendistro-for-elasticsearch/anomaly-detection-kibana-plugin/issues/24
+                  }}
+                />
+              </Chart>
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
       )}