[Forward port to main] removed duplicate popout icon and ran prettier (#379)

global-setup.js

@@ -1,3 +1,3 @@
 export default () => {
-    process.env.TZ = 'UTC';
-  }
+  process.env.TZ = 'UTC';
+};

public/components/FormattedFormRow/FormattedFormRow.tsx

@@ -35,7 +35,7 @@ export const FormattedFormRow = (props: FormattedFormRowProps) => {
           {props.hintLink ? ' ' : null}
           {props.hintLink ? (
             <EuiLink href={props.hintLink} target="_blank">
-              Learn more <EuiIcon size="s" type="popout" />
+              Learn more
             </EuiLink>
           ) : null}
         </EuiText>

public/models/interfaces.ts

@@ -82,27 +82,27 @@ export type FeatureAttributes = {
 
 // all possible valid units accepted by the backend
 export enum UNITS {
-  NANOS = "Nanos",
-  MICROS = "Micros",
-  MILLIS = "Millis",
-  SECONDS = "Seconds",
+  NANOS = 'Nanos',
+  MICROS = 'Micros',
+  MILLIS = 'Millis',
+  SECONDS = 'Seconds',
   MINUTES = 'Minutes',
-  HOURS = "Hours",
-  HALF_DAYS = "HalfDays",
-  DAYS = "Days",
-  WEEKS = "Weeks",
-  MONTHS = "Months",
-  YEARS = "Years",
-  DECADES = "Decades",
-  CENTURIES = "Centuries",
-  MILLENNIA = "Millennia",
-  ERAS = "Eras",
-  FOREVER = "Forever"
+  HOURS = 'Hours',
+  HALF_DAYS = 'HalfDays',
+  DAYS = 'Days',
+  WEEKS = 'Weeks',
+  MONTHS = 'Months',
+  YEARS = 'Years',
+  DECADES = 'Decades',
+  CENTURIES = 'Centuries',
+  MILLENNIA = 'Millennia',
+  ERAS = 'Eras',
+  FOREVER = 'Forever',
 }
 
 // cannot create a method in enum, have to write function separately
 export function toDuration(units: UNITS): Duration {
-  switch(units) {
+  switch (units) {
     case UNITS.NANOS: {
       // Duration in moment library does not support
       return moment.duration(0.000000001, 'seconds');
@@ -155,7 +155,7 @@ export function toDuration(units: UNITS): Duration {
     default:
       break;
   }
-  throw new Error("Unexpected unit: " + units);
+  throw new Error('Unexpected unit: ' + units);
 }
 
 export type Schedule = {
@@ -235,7 +235,7 @@ export type AnomalyData = {
   entity?: EntityData[];
   features?: { [key: string]: FeatureAggregationData };
   contributions?: { [key: string]: FeatureContributionData };
-  aggInterval?: string; 
+  aggInterval?: string;
 };
 
 export type FeatureAggregationData = {

public/pages/AnomalyCharts/components/AnomaliesStat/AnomalyStat.tsx

@@ -91,7 +91,7 @@ export const AlertsStat = (props: {
             target="_blank"
             style={{ fontSize: '14px' }}
           >
-            View monitor <EuiIcon type="popout"></EuiIcon>
+            View monitor
           </EuiLink>
         ) : null}
       </Fragment>

public/pages/AnomalyCharts/components/AnomaliesStat/__tests__/__snapshots__/AnomalyStat.test.tsx.snap

@@ -38,21 +38,7 @@ exports[`<AlertsStat /> spec Alert Stat renders component with monitor and loadi
         style="font-size: 14px;"
         target="_blank"
       >
-        View monitor 
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
-          />
-        </svg>
+        View monitor
         <svg
           aria-label="External link"
           class="euiIcon euiIcon--small euiLink__externalIcon"
@@ -116,17 +102,7 @@ exports[`<AlertsStat /> spec Alert Stat renders component with monitor and not l
         style="font-size: 14px;"
         target="_blank"
       >
-        View monitor 
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
+        View monitor
         <svg
           aria-hidden="true"
           aria-label="External link"

public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx

@@ -205,7 +205,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
            * and thus show different annotations per feature chart (currently all annotations
            * shown equally across all enabled feature charts for a given detector).
            */}
-           
+
           {props.feature.featureEnabled ? (
             <RectAnnotation
               dataValues={flattenData(props.annotations)}
@@ -265,7 +265,7 @@ export const FeatureChart = (props: FeatureChartProps) => {
                     ', '
                   )})`
                 : props.featureDataSeriesName;
-                timeSeriesList.push(
+              timeSeriesList.push(
                 <LineSeries
                   id={seriesKey}
                   name={seriesKey}
@@ -280,29 +280,28 @@ export const FeatureChart = (props: FeatureChartProps) => {
                   yAccessors={[CHART_FIELDS.DATA]}
                   data={featureTimeSeries}
                 />
-              )
-              if (featureTimeSeries.map(
-                (item: FeatureAggregationData) => {
-                  if(item.hasOwnProperty('expectedValue')) {
+              );
+              if (
+                featureTimeSeries.map((item: FeatureAggregationData) => {
+                  if (item.hasOwnProperty('expectedValue')) {
                     timeSeriesList.push(
                       <LineSeries
-                        id={"ExpectedValue"}
-                        name={"Expected Value"}
-                        color={"#0475a2"}
+                        id={'ExpectedValue'}
+                        name={'Expected Value'}
+                        color={'#0475a2'}
                         xScaleType={ScaleType.Time}
                         yScaleType={ScaleType.Linear}
                         xAccessor={CHART_FIELDS.PLOT_TIME}
                         yAccessors={[CHART_FIELDS.EXPECTED_VALUE]}
                         data={featureTimeSeries}
                       />
-                    )
+                    );
                   }
-                }
-              ))
-              return timeSeriesList;
+                })
+              )
+                return timeSeriesList;
             }
           )}
-
         </Chart>
         {showCustomExpression ? (
           <CodeModal

public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx

@@ -348,66 +348,67 @@ export const AnomalyDetailsChart = React.memo(
       zoomRange.endDate,
     ]);
 
-
     const customAnomalyContributionTooltip = (details?: string) => {
       const anomaly = details ? JSON.parse(details) : undefined;
-      const contributionData = get(anomaly, `contributions`, [])  
+      const contributionData = get(anomaly, `contributions`, []);
 
-      const featureData = get(anomaly, `features`, {}) 
+      const featureData = get(anomaly, `features`, {});
       let featureAttributionList = [] as any[];
       if (Array.isArray(contributionData)) {
         contributionData.map((contribution: any) => {
-          const featureName = get(get(featureData, contribution.feature_id, ""), "name", "") 
-          const dataString = (contribution.data * 100) + "%"
+          const featureName = get(
+            get(featureData, contribution.feature_id, ''),
+            'name',
+            ''
+          );
+          const dataString = contribution.data * 100 + '%';
           featureAttributionList.push(
             <div>
               {featureName}: {dataString} <br />
             </div>
-          )
-        })
+          );
+        });
       } else {
         for (const [, value] of Object.entries(contributionData)) {
           featureAttributionList.push(
             <div>
               {value.name}: {value.attribution} <br />
             </div>
-          )
+          );
         }
       }
       return (
         <div>
           <EuiText size="xs">
             <EuiIcon type="list" /> <b>Feature Contribution: </b>
             {anomaly ? (
-            <p>
-              <hr style={{ color: '#E0E0E0' }}></hr>
-              {featureAttributionList}
-            </p>
-          ) : null}
+              <p>
+                <hr style={{ color: '#E0E0E0' }}></hr>
+                {featureAttributionList}
+              </p>
+            ) : null}
           </EuiText>
         </div>
       );
     };
 
-
     const generateContributionAnomalyAnnotations = (
       anomalies: AnomalyData[][]
     ): any[][] => {
       let annotations = [] as any[];
       anomalies.forEach((anomalyTimeSeries: AnomalyData[]) => {
         annotations.push(
-          Array.isArray(anomalyTimeSeries) ? (
-            anomalyTimeSeries
-            .filter((anomaly: AnomalyData) => anomaly.anomalyGrade > 0)
-            .map((anomaly: AnomalyData) => (              
-              {
-              coordinates: {
-                x0: anomaly.startTime,
-                x1: anomaly.endTime + (anomaly.endTime - anomaly.startTime),
-              },
-              details: `${JSON.stringify(anomaly)}`
-            }))
-          ) : [] 
+          Array.isArray(anomalyTimeSeries)
+            ? anomalyTimeSeries
+                .filter((anomaly: AnomalyData) => anomaly.anomalyGrade > 0)
+                .map((anomaly: AnomalyData) => ({
+                  coordinates: {
+                    x0: anomaly.startTime,
+                    x1: anomaly.endTime + (anomaly.endTime - anomaly.startTime),
+                  },
+                  details: `${JSON.stringify(anomaly)}`,
+                }))
+            : []
         );
       });
       return annotations;
@@ -601,7 +602,9 @@ export const AnomalyDetailsChart = React.memo(
                     />
                   )}
                   <RectAnnotation
-                    dataValues={flattenData(generateContributionAnomalyAnnotations(zoomedAnomalies))}
+                    dataValues={flattenData(
+                      generateContributionAnomalyAnnotations(zoomedAnomalies)
+                    )}
                     id="featureAttributionAnnotation"
                     style={{
                       stroke: CHART_COLORS.ANOMALY_GRADE_COLOR,
@@ -610,8 +613,8 @@ export const AnomalyDetailsChart = React.memo(
                       fill: CHART_COLORS.ANOMALY_GRADE_COLOR,
                     }}
                     renderTooltip={customAnomalyContributionTooltip}
-                  />  
-                
+                  />
+
                   {alertAnnotations ? (
                     <LineAnnotation
                       id="alertAnnotation"
@@ -683,31 +686,31 @@ export const AnomalyDetailsChart = React.memo(
                             get(anomalySeries, '0.entity', []),
                             ', '
                           )})`
-                        : props.anomalyGradeSeriesName; 
-                        return (
-                          <LineSeries
-                            id={seriesKey}
-                            name={seriesKey}
-                            color={
-                              multipleTimeSeries
-                                ? ENTITY_COLORS[index]
-                                : CHART_COLORS.ANOMALY_GRADE_COLOR
-                            }
-                            data={anomalySeries}
-                            xScaleType={
-                              showAggregateResults
-                                ? ScaleType.Ordinal
-                                : ScaleType.Time
-                            }
-                            yScaleType={ScaleType.Linear}
-                            xAccessor={
-                              showAggregateResults
-                                ? CHART_FIELDS.AGG_INTERVAL
-                                : CHART_FIELDS.PLOT_TIME
-                            }
-                            yAccessors={[CHART_FIELDS.ANOMALY_GRADE]}
-                          />
-                        )
+                        : props.anomalyGradeSeriesName;
+                      return (
+                        <LineSeries
+                          id={seriesKey}
+                          name={seriesKey}
+                          color={
+                            multipleTimeSeries
+                              ? ENTITY_COLORS[index]
+                              : CHART_COLORS.ANOMALY_GRADE_COLOR
+                          }
+                          data={anomalySeries}
+                          xScaleType={
+                            showAggregateResults
+                              ? ScaleType.Ordinal
+                              : ScaleType.Time
+                          }
+                          yScaleType={ScaleType.Linear}
+                          xAccessor={
+                            showAggregateResults
+                              ? CHART_FIELDS.AGG_INTERVAL
+                              : CHART_FIELDS.PLOT_TIME
+                          }
+                          yAccessors={[CHART_FIELDS.ANOMALY_GRADE]}
+                        />
+                      );
                     }
                   )}
                 </Chart>

public/pages/AnomalyCharts/containers/FeatureBreakDown.tsx

@@ -176,11 +176,9 @@ export const FeatureBreakDown = React.memo((props: FeatureBreakDownProps) => {
               detectorEnabledTime={props.detector.enabledTime}
               entityData={getEntityDataForChart(props.anomalyAndFeatureResults)}
               isHCDetector={props.isHCDetector}
-              windowDelay={
-                get(props, `detector.windowDelay.period`,  {
-                  period: { interval: 0, unit: UNITS.MINUTES },
-                })
-              }
+              windowDelay={get(props, `detector.windowDelay.period`, {
+                period: { interval: 0, unit: UNITS.MINUTES },
+              })}
             />
             {index + 1 ===
             get(props, 'detector.featureAttributes', []).length ? null : (

public/pages/AnomalyCharts/utils/anomalyChartUtils.tsx

@@ -640,9 +640,7 @@ export const getFeatureBreakdownWording = (
   return isNotSample ? 'Feature breakdown' : 'Sample feature breakdown';
 };
 
-export const getFeatureDataWording = (
-  isNotSample: boolean | undefined
-) => {
+export const getFeatureDataWording = (isNotSample: boolean | undefined) => {
   return isNotSample ? 'Feature output' : 'Sample feature output';
 };