Address couples of feedback. Issue: opendistro-for-elasticsearch#26, o…

…pendistro-for-elasticsearch#36, opendistro-for-elasticsearch#37, opendistro-for-elasticsearch#38
yizheliu-amazon · Apr 24, 2020 · 914b5b1 · 914b5b1
1 parent ab94bdf
commit 914b5b1
Show file tree

Hide file tree

Showing 9 changed files with 365 additions and 255 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -38,14 +38,16 @@ 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 }}
+    className={props.contentPanelClassName}
   >
     <EuiFlexGroup
-      style={{ padding: '0px 10px', ...props.titleContainerStyles }}
+      style={{ padding: '0px 20px', ...props.titleContainerStyles }}
       justifyContent="spaceBetween"
       alignItems="center"
     >
@@ -105,7 +107,7 @@ const ContentPanel = (props: ContentPanelProps) => (
         className={props.horizontalRuleClassName}
       />
     )}
-    <div style={{ padding: '0px 10px', ...props.bodyStyles }}>
+    <div style={{ padding: '0px 20px', ...props.bodyStyles }}>
       {props.children}
     </div>
   </EuiPanel>

diff --git a/public/components/ContentPanel/index.scss b/public/components/ContentPanel/index.scss
@@ -14,12 +14,11 @@
  */
 
 .content-panel-title {
-  color: #3f3f3f;
+  color: #000;
 }
 
 .content-panel-subTitle {
   color: #879196;
-  font-family: 'Helvetica Neue';
   font-size: 12px;
   letter-spacing: 0;
 }
diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/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,13 +146,14 @@ export const AnomaliesDistributionChart = (
         />
       }
     >
-      <EuiFlexGroup style={{ padding: '10px' }}>
+      <EuiFlexGroup style={{ marginTop: '0px' }}>
         <EuiFlexItem>
           <EuiStat
             description={'Indices with anomalies'}
             title={indicesNumber}
             isLoading={anomalyResultsLoading}
             titleSize="s"
+            style={{ color: '#000' }}
           />
         </EuiFlexItem>
         <EuiFlexItem>
@@ -156,85 +162,82 @@ export const AnomaliesDistributionChart = (
             title={finalDetectors.length}
             isLoading={anomalyResultsLoading}
             titleSize="s"
+            style={{ color: '#000' }}
           />
         </EuiFlexItem>
       </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>
       )}