Add other changes related to historical workbench

public/models/interfaces.ts

@@ -110,6 +110,9 @@ export type Detector = {
   stateError: string;
   initProgress?: InitProgress;
   categoryField?: string[];
+  detectionDateRange?: DetectionDateRange;
+  taskId?: string;
+  taskProgress?: number;
 };
 
 export type DetectorListItem = {
@@ -124,6 +127,16 @@ export type DetectorListItem = {
   enabledTime?: number;
 };
 
+export type HistoricalDetectorListItem = {
+  id: string;
+  name: string;
+  curState: DETECTOR_STATE;
+  indices: string[];
+  totalAnomalies: number;
+  dataStartTime: number;
+  dataEndTime: number;
+};
+
 export type EntityData = {
   name: string;
   value: string;
@@ -179,6 +192,7 @@ export type AnomalySummary = {
   anomalyOccurrence: number;
   minAnomalyGrade: number;
   maxAnomalyGrade: number;
+  avgAnomalyGrade?: number;
   minConfidence: number;
   maxConfidence: number;
   lastAnomalyOccurrence: string;
@@ -188,3 +202,8 @@ export type DateRange = {
   startDate: number;
   endDate: number;
 };
+
+export type DetectionDateRange = {
+  startTime: number;
+  endTime: number;
+};

public/pages/AnomalyCharts/containers/AnomaliesChart.tsx

@@ -51,6 +51,7 @@ import {
 } from '../utils/constants';
 import { AnomalyOccurrenceChart } from './AnomalyOccurrenceChart';
 import { FeatureBreakDown } from './FeatureBreakDown';
+import { convertTimestampToString } from '../../../utils/utils';
 
 interface AnomaliesChartProps {
   onDateRangeChange(
@@ -65,10 +66,12 @@ interface AnomaliesChartProps {
   dateRange: DateRange;
   isLoading: boolean;
   showAlerts?: boolean;
+  isNotSample?: boolean;
   detector: Detector;
   monitor?: Monitor;
   children: React.ReactNode | React.ReactNode[];
   isHCDetector?: boolean;
+  isHistorical?: boolean;
   detectorCategoryField?: string[];
   onHeatmapCellSelected?(heatmapCell: HeatmapCell): void;
   selectedHeatmapCell?: HeatmapCell;
@@ -79,8 +82,12 @@ interface AnomaliesChartProps {
 
 export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
   const [datePickerRange, setDatePickerRange] = useState({
-    start: 'now-7d',
-    end: 'now',
+    start: props.isHistorical
+      ? convertTimestampToString(props.dateRange.startDate)
+      : 'now-7d',
+    end: props.isHistorical
+      ? convertTimestampToString(props.dateRange.endDate)
+      : 'now',
   });
 
   const anomalies = get(props.anomaliesResult, 'anomalies', []);
@@ -240,20 +247,21 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
                               anomalySummary={INITIAL_ANOMALY_SUMMARY}
                               isLoading={props.isLoading}
                               anomalyGradeSeriesName={getAnomalyGradeWording(
-                                props.showAlerts
+                                props.isNotSample
                               )}
                               confidenceSeriesName={getConfidenceWording(
-                                props.showAlerts
+                                props.isNotSample
                               )}
                               showAlerts={props.showAlerts}
+                              isNotSample={props.isNotSample}
                               detector={props.detector}
                               isHCDetector={props.isHCDetector}
                               selectedHeatmapCell={props.selectedHeatmapCell}
                             />,
                             <EuiSpacer size="m" />,
                             <FeatureBreakDown
                               title={getFeatureBreakdownWording(
-                                props.showAlerts
+                                props.isNotSample
                               )}
                               //@ts-ignore
                               detector={props.newDetector}
@@ -266,7 +274,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
                               //@ts-ignore
                               dateRange={props.zoomRange}
                               featureDataSeriesName={getFeatureDataWording(
-                                props.showAlerts
+                                props.isNotSample
                               )}
                               isHCDetector={props.isHCDetector}
                               selectedHeatmapCell={props.selectedHeatmapCell}
@@ -287,12 +295,14 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
               bucketizedAnomalies={props.bucketizedAnomalies}
               anomalySummary={props.anomalySummary}
               isLoading={props.isLoading}
-              anomalyGradeSeriesName={getAnomalyGradeWording(props.showAlerts)}
-              confidenceSeriesName={getConfidenceWording(props.showAlerts)}
+              anomalyGradeSeriesName={getAnomalyGradeWording(props.isNotSample)}
+              confidenceSeriesName={getConfidenceWording(props.isNotSample)}
               showAlerts={props.showAlerts}
+              isNotSample={props.isNotSample}
               detector={props.detector}
               monitor={props.monitor}
               isHCDetector={props.isHCDetector}
+              isHistorical={props.isHistorical}
               onDatePickerRangeChange={handleDatePickerRangeChange}
             />
           )}

public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

@@ -86,11 +86,13 @@ interface AnomalyDetailsChartProps {
   dateRange: DateRange;
   isLoading: boolean;
   showAlerts?: boolean;
+  isNotSample?: boolean;
   anomalyGradeSeriesName: string;
   confidenceSeriesName: string;
   detector: Detector;
   monitor?: Monitor;
   isHCDetector?: boolean;
+  isHistorical?: boolean;
   selectedHeatmapCell?: HeatmapCell;
   onDatePickerRangeChange?(startDate: number, endDate: number): void;
 }
@@ -200,7 +202,7 @@ export const AnomalyDetailsChart = React.memo(
           <EuiFlexItem>
             <EuiStat
               title={isLoading ? '-' : anomalySummary.anomalyOccurrence}
-              description={getAnomalyOccurrenceWording(props.showAlerts)}
+              description={getAnomalyOccurrenceWording(props.isNotSample)}
               titleSize="s"
             />
           </EuiFlexItem>
@@ -209,26 +211,42 @@ export const AnomalyDetailsChart = React.memo(
               isLoading={isLoading}
               minValue={anomalySummary.minAnomalyGrade}
               maxValue={anomalySummary.maxAnomalyGrade}
-              description={getAnomalyGradeWording(props.showAlerts)}
-              tooltip="Indicates to what extent this data point is anomalous. The scale ranges from 0 to 1."
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <AnomalyStatWithTooltip
-              isLoading={isLoading}
-              minValue={anomalySummary.minConfidence}
-              maxValue={anomalySummary.maxConfidence}
-              description={getConfidenceWording(props.showAlerts)}
-              tooltip="Indicates the level of confidence in the anomaly result."
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiStat
-              title={isLoading ? '' : anomalySummary.lastAnomalyOccurrence}
-              description={getLastAnomalyOccurrenceWording(props.showAlerts)}
-              titleSize="s"
+              description={getAnomalyGradeWording(props.isNotSample)}
+              tooltip="Indicates the extent to which a data point is anomalous. Higher grades indicate more unusual data."
             />
           </EuiFlexItem>
+          {
+            // If historical: only show the average grade, and don't show the confidence or last anomaly occurrence stats
+          }
+          {props.isHistorical ? (
+            <EuiFlexItem>
+              <EuiStat
+                title={isLoading ? '-' : anomalySummary.avgAnomalyGrade}
+                description={'Average anomaly grade'}
+                titleSize="s"
+              />
+            </EuiFlexItem>
+          ) : null}
+          {props.isHistorical ? null : (
+            <EuiFlexItem>
+              <AnomalyStatWithTooltip
+                isLoading={isLoading}
+                minValue={anomalySummary.minConfidence}
+                maxValue={anomalySummary.maxConfidence}
+                description={getConfidenceWording(props.isNotSample)}
+                tooltip="Indicates the level of confidence in the anomaly result."
+              />
+            </EuiFlexItem>
+          )}
+          {props.isHistorical ? null : (
+            <EuiFlexItem>
+              <EuiStat
+                title={isLoading ? '' : anomalySummary.lastAnomalyOccurrence}
+                description={getLastAnomalyOccurrenceWording(props.isNotSample)}
+                titleSize="s"
+              />
+            </EuiFlexItem>
+          )}
           {props.showAlerts && !props.isHCDetector ? (
             <EuiFlexItem>
               <AlertsStat
@@ -326,15 +344,20 @@ export const AnomalyDetailsChart = React.memo(
                     domain={{ min: 0, max: 1 }}
                     showGridLines
                   />
-                  <LineSeries
-                    id="confidence"
-                    name={props.confidenceSeriesName}
-                    xScaleType={ScaleType.Time}
-                    yScaleType={ScaleType.Linear}
-                    xAccessor={CHART_FIELDS.PLOT_TIME}
-                    yAccessors={[CHART_FIELDS.CONFIDENCE]}
-                    data={zoomedAnomalies}
-                  />
+                  {
+                    // If historical: don't show the confidence line chart
+                  }
+                  {props.isHistorical ? null : (
+                    <LineSeries
+                      id="confidence"
+                      name={props.confidenceSeriesName}
+                      xScaleType={ScaleType.Time}
+                      yScaleType={ScaleType.Linear}
+                      xAccessor={CHART_FIELDS.PLOT_TIME}
+                      yAccessors={[CHART_FIELDS.CONFIDENCE]}
+                      data={zoomedAnomalies}
+                    />
+                  )}
                   <LineSeries
                     id="anomalyGrade"
                     name={props.anomalyGradeSeriesName}

public/pages/AnomalyCharts/containers/AnomalyHeatmapChart.tsx

@@ -370,7 +370,7 @@ export const AnomalyHeatmapChart = React.memo(
                           <EuiText size="xs" style={{ margin: '0px' }}>
                             Anomaly grade{' '}
                             <EuiIconTip
-                              content="Indicates to what extent this data point is anomalous. The scale ranges from 0 to 1."
+                              content="Indicates the extent to which a data point is anomalous. Higher grades indicate more unusual data."
                               position="top"
                               type="iInCircle"
                             />

public/pages/AnomalyCharts/containers/AnomalyOccurrenceChart.tsx

@@ -39,6 +39,7 @@ interface AnomalyOccurrenceChartProps {
   dateRange: DateRange;
   isLoading: boolean;
   showAlerts?: boolean;
+  isNotSample?: boolean;
   anomalyGradeSeriesName: string;
   confidenceSeriesName: string;
   detector: Detector;
@@ -94,6 +95,7 @@ export const AnomalyOccurrenceChart = React.memo(
           anomalyGradeSeriesName={props.anomalyGradeSeriesName}
           confidenceSeriesName={props.confidenceSeriesName}
           showAlerts={props.showAlerts}
+          isNotSample={props.isNotSample}
           detector={props.detector}
           monitor={props.monitor}
           isHCDetector={props.isHCDetector}

public/pages/AnomalyCharts/utils/__tests__/anomalyChartUtils.test.ts

@@ -13,7 +13,7 @@
  * permissions and limitations under the License.
  */
 
- //@ts-ignore
+//@ts-ignore
 import moment from 'moment';
 import { getAnomalySummary } from '../anomalyChartUtils';
 
@@ -48,6 +48,7 @@ describe('anomalyChartUtils', () => {
         anomalyOccurrence: 3,
         minAnomalyGrade: 0.1,
         maxAnomalyGrade: 0.7,
+        avgAnomalyGrade: 0.4,
         minConfidence: 0.86,
         maxConfidence: 0.98,
         lastAnomalyOccurrence: moment(1589313164793).format('MM/DD/YY hh:mm A'),

public/pages/AnomalyCharts/utils/anomalyChartUtils.ts

@@ -28,6 +28,7 @@ import { Datum, PlotData } from 'plotly.js';
 import moment from 'moment';
 import { calculateTimeWindowsWithMaxDataPoints } from '../../utils/anomalyResultUtils';
 import { HeatmapCell } from '../containers/AnomalyHeatmapChart';
+import { toFixedNumberForAnomaly } from '../../../../server/utils/helpers';
 
 export const convertAlerts = (response: any): MonitorAlert[] => {
   const alerts = get(response, 'response.alerts', []);
@@ -73,31 +74,29 @@ const findLatestAnomaly = (anomalies: any[]) => {
   return latestAnomaly;
 };
 
+const getAverageAnomalyGrade = (anomalyGrades: any[]) => {
+  return anomalyGrades.length > 0
+    ? toFixedNumberForAnomaly(
+        anomalyGrades.reduce((prevGrade, curGrade) => prevGrade + curGrade, 0) /
+          anomalyGrades.length
+      )
+    : 0;
+};
+
 export const getAnomalySummary = (totalAnomalies: any[]): AnomalySummary => {
   if (totalAnomalies == undefined || totalAnomalies.length === 0) {
     return DEFAULT_ANOMALY_SUMMARY;
   }
   const anomalies = totalAnomalies.filter(
     (anomaly) => anomaly.anomalyGrade > 0
   );
-  const maxConfidence = Math.max(
-    ...anomalies.map((anomaly) => anomaly.confidence),
-    0.0
-  );
-  const minConfidence = Math.min(
-    ...anomalies.map((anomaly) => anomaly.confidence),
-    1.0
-  );
-
-  const maxAnomalyGrade = Math.max(
-    ...anomalies.map((anomaly) => anomaly.anomalyGrade),
-    0.0
-  );
-  const minAnomalyGrade = Math.min(
-    ...anomalies.map((anomaly) => anomaly.anomalyGrade),
-    1.0
-  );
-
+  const anomalyGrades = anomalies.map((anomaly) => anomaly.anomalyGrade);
+  const anomalyConfidences = anomalies.map((anomaly) => anomaly.confidence);
+  const maxConfidence = Math.max(...anomalyConfidences, 0.0);
+  const minConfidence = Math.min(...anomalyConfidences, 1.0);
+  const maxAnomalyGrade = Math.max(...anomalyGrades, 0.0);
+  const minAnomalyGrade = Math.min(...anomalyGrades, 1.0);
+  const avgAnomalyGrade = getAverageAnomalyGrade(anomalyGrades);
   const lastAnomalyOccurrence =
     anomalies.length > 0
       ? minuteDateFormatter(findLatestAnomaly(anomalies).endTime)
@@ -107,6 +106,7 @@ export const getAnomalySummary = (totalAnomalies: any[]): AnomalySummary => {
     anomalyOccurrence: anomalies.length,
     minAnomalyGrade: minAnomalyGrade > maxAnomalyGrade ? 0 : minAnomalyGrade,
     maxAnomalyGrade: maxAnomalyGrade,
+    avgAnomalyGrade: avgAnomalyGrade,
     minConfidence: minConfidence > maxConfidence ? 0 : minConfidence,
     maxConfidence: maxConfidence,
     lastAnomalyOccurrence: lastAnomalyOccurrence,

public/pages/Dashboard/Components/AnomaliesDistribution.tsx

@@ -125,8 +125,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 detectors.'}
+              {'The inner circle shows anomaly distribution by index. ' +
+                'The outer circle shows distribution by detector.'}
             </p>
           </EuiText>
         </EuiFlexItem>

public/pages/Dashboard/Components/AnomaliesLiveChart.tsx

@@ -46,9 +46,7 @@ import {
 } from '@elastic/charts';
 import { EuiText, EuiTitle } from '@elastic/eui';
 import React from 'react';
-import {
-  TIME_NOW_LINE_STYLE
-} from '../utils/constants';
+import { TIME_NOW_LINE_STYLE } from '../utils/constants';
 import { SHOW_DECIMAL_NUMBER_THRESHOLD } from '../../../../server/utils/helpers';
 import {
   visualizeAnomalyResultForXYChart,
@@ -278,7 +276,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
             </EuiFlexItem>
             <EuiFlexItem style={{ minWidth: '310px' }}>
               <EuiStat
-                description={'Detector with most recent anomaly occurrence'}
+                description={'Detector with the most recent anomaly'}
                 title={
                   lastAnomalyResult === undefined
                     ? '-'

public/pages/Dashboard/Container/DashboardOverview.tsx

@@ -41,7 +41,7 @@ import { AppState } from '../../../redux/reducers';
 import { CatIndex, IndexAlias } from '../../../../server/models/types';
 import { getVisibleOptions } from '../../utils/helpers';
 import { BREADCRUMBS } from '../../../utils/constants';
-import { DETECTOR_STATE } from '../../../../server/utils/constants'
+import { DETECTOR_STATE } from '../../../../server/utils/constants';
 import { getDetectorStateOptions } from '../../DetectorsList/utils/helpers';
 import { DashboardHeader } from '../Components/utils/DashboardHeader';
 import { EmptyDashboard } from '../Components/EmptyDashboard/EmptyDashboard';
@@ -186,7 +186,7 @@ export function DashboardOverview() {
         typeof errorGettingDetectors === 'string' &&
           errorGettingDetectors.includes(NO_PERMISSIONS_KEY_WORD)
           ? prettifyErrorMessage(errorGettingDetectors)
-          : 'Unable to get all detectors.'
+          : 'Unable to get all detectors'
       );
       setIsLoadingDetectors(false);
     }