[Uptime] Add functional test to cover more filter functionality

x-pack/legacy/plugins/uptime/public/components/functional/charts/__tests__/get_histogram_aria_label.test.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { HistogramDataPoint } from '../../../../../common/types';
+import { getHistogramAriaLabelData } from '../ping_histogram';
+
+describe('getHistogramAriaLabelData', () => {
+  it('creates expected object from array', () => {
+    const dataPoints: HistogramDataPoint[] = [
+      {
+        x: 1581022144000,
+        downCount: 3,
+        upCount: 2,
+      },
+      {
+        x: 1581022174000,
+        downCount: 4,
+        upCount: 0,
+      },
+      {
+        x: 1581022204000,
+        downCount: 3,
+        upCount: 1,
+      },
+    ];
+
+    expect(getHistogramAriaLabelData(dataPoints)).toEqual({
+      max: 5,
+      maxDownCount: 3,
+      maxTimestamp: 1581022144000,
+      maxUpCount: 2,
+      latestDownCount: 3,
+      latestMax: 4,
+      latestUpCount: 1,
+      latestTimestamp: 1581022204000,
+      totalDown: 10,
+      totalUp: 3,
+    });
+  });
+});

x-pack/legacy/plugins/uptime/public/components/functional/charts/chart_wrapper/chart_wrapper.tsx

@@ -20,6 +20,10 @@ interface Props {
    * aria-label for accessibility
    */
   'aria-label'?: string;
+  /**
+   * attribute to find in functional tests
+   */
+  'data-test-subj'?: string;
 }
 
 export const ChartWrapper: FC<Props> = ({

x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx

@@ -13,7 +13,7 @@ import moment from 'moment';
 import { getChartDateLabel } from '../../../lib/helper';
 import { ChartWrapper } from './chart_wrapper';
 import { UptimeThemeContext } from '../../../contexts';
-import { HistogramResult } from '../../../../common/types';
+import { HistogramResult, HistogramDataPoint } from '../../../../common/types';
 import { useUrlParams } from '../../../hooks';
 
 export interface PingHistogramComponentProps {
@@ -36,6 +36,55 @@ export interface PingHistogramComponentProps {
   loading?: boolean;
 }
 
+interface HistogramDataSummary {
+  max: number;
+  maxDownCount: number;
+  maxUpCount: number;
+  maxTimestamp: number;
+  latestTimestamp: number;
+  latestDownCount: number;
+  latestUpCount: number;
+  latestMax: number;
+  totalUp: number;
+  totalDown: number;
+}
+
+export const getHistogramAriaLabelData = (
+  histogram: HistogramDataPoint[]
+): HistogramDataSummary => {
+  return histogram.reduce(
+    (ret, cur) => {
+      const up = cur.upCount ?? 0;
+      const down = cur.downCount ?? 0;
+      if (ret.max === 0 || ret.max < up + down) {
+        ret.max = up + down;
+        ret.maxDownCount = down;
+        ret.maxUpCount = up;
+        ret.maxTimestamp = cur.x ?? 0;
+      }
+      ret.latestTimestamp = cur.x;
+      ret.latestDownCount = cur.downCount ?? 0;
+      ret.latestUpCount = cur.upCount ?? 0;
+      ret.latestMax = up + down;
+      ret.totalUp += up;
+      ret.totalDown += down;
+      return ret;
+    },
+    {
+      max: 0,
+      maxDownCount: 0,
+      maxUpCount: 0,
+      maxTimestamp: 0,
+      latestTimestamp: 0,
+      latestDownCount: 0,
+      latestUpCount: 0,
+      latestMax: 0,
+      totalUp: 0,
+      totalDown: 0,
+    }
+  );
+};
+
 export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
   absoluteStartDate,
   absoluteEndDate,
@@ -89,6 +138,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
       </>
     );
   const { histogram } = data;
+  const { maxTimestamp, latestTimestamp, ...summaryRest } = getHistogramAriaLabelData(histogram);
 
   const downSpecId = i18n.translate('xpack.uptime.snapshotHistogram.downMonitorsId', {
     defaultMessage: 'Down Monitors',
@@ -117,14 +167,24 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
       <ChartWrapper
         height={height}
         loading={loading}
-        aria-label={i18n.translate('xpack.uptime.snapshotHistogram.description', {
-          defaultMessage:
-            'Bar Chart showing uptime status over time from {startTime} to {endTime}.',
-          values: {
-            startTime: moment(new Date(absoluteStartDate).valueOf()).fromNow(),
-            endTime: moment(new Date(absoluteEndDate).valueOf()).fromNow(),
-          },
-        })}
+        aria-label={
+          histogram.length
+            ? i18n.translate('xpack.uptime.snapshotHistogram.description', {
+                defaultMessage: `Bar Chart showing uptime status over time from {startTime} to {endTime}. The maximum value is {max} pings, with {maxUpCount} up and {maxDownCount} down {maxTimestamp}. The most recent count is {latestMax}, with {latestUpCount} up and {latestDownCount} down {latestTimestamp}. Total up: {totalUp}, total down: {totalDown}.`,
+                values: {
+                  startTime: moment(new Date(absoluteStartDate).valueOf()).fromNow(),
+                  endTime: moment(new Date(absoluteEndDate).valueOf()).fromNow(),
+                  maxTimestamp: moment(new Date(maxTimestamp).valueOf()).fromNow(),
+                  latestTimestamp: moment(new Date(latestTimestamp).valueOf()).fromNow(),
+                  ...summaryRest,
+                },
+              })
+            : i18n.translate('xpack.uptime.snapshotHistogram.emptyDescription', {
+                defaultMessage:
+                  'Bar Chart that shows the uptime status over time. There are no data for the selected time range',
+              })
+        }
+        data-test-subj="xpack.uptime.charts.pingHistogram"
       >
         <Chart>
           <Settings

x-pack/test/functional/apps/uptime/locations.ts

@@ -4,17 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import expect from '@kbn/expect';
 import { makeChecksWithStatus } from '../../../api_integration/apis/uptime/graphql/helpers/make_checks';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const pageObjects = getPageObjects(['uptime']);
+  const retry = getService('retry');
 
   describe('location', () => {
     const start = new Date().toISOString();
     const end = new Date().toISOString();
 
     const MONITOR_ID = 'location-testing-id';
+    const CUSTOM_GEO_NAME = 'filter-test';
     before(async () => {
       /**
        * This mogrify function will strip the documents of their location
@@ -28,21 +31,31 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         }
         return d;
       };
-      await makeChecksWithStatus(
-        getService('legacyEs'),
-        MONITOR_ID,
-        5,
-        2,
-        10000,
-        {},
-        'up',
-        mogrifyNoLocation
-      );
+      const esService = getService('legacyEs');
+      await makeChecksWithStatus(esService, MONITOR_ID, 5, 2, 10000, {}, 'up', mogrifyNoLocation);
+      await makeChecksWithStatus(esService, 'filter-testing', 50, 1, 10000, {}, 'up', (d: any) => {
+        d.observer.geo.name = CUSTOM_GEO_NAME;
+        return d;
+      });
     });
 
     it('renders the location missing popover when monitor has location name, but no geo data', async () => {
       await pageObjects.uptime.loadDataAndGoToMonitorPage(start, end, MONITOR_ID);
       await pageObjects.uptime.locationMissingIsDisplayed();
     });
+
+    it('adds a second location filter option and filters the overview', async () => {
+      await pageObjects.uptime.goToUptimePageAndSetDateRange(start, end);
+      await pageObjects.uptime.selectFilterItems({ location: [CUSTOM_GEO_NAME] });
+      await retry.tryForTime(12000, async () => {
+        const ariaLabel = await pageObjects.uptime.getAriaLabelForKey(
+          'xpack.uptime.charts.pingHistogram'
+        );
+        expect(ariaLabel).to.contain('Total up: 26, total down: 0.');
+
+        const snapshotCount = await pageObjects.uptime.getSnapshotCount();
+        expect(snapshotCount).to.eql({ up: '1', down: '0' });
+      });
+    });
   });
 };

x-pack/test/functional/page_objects/uptime_page.ts

@@ -96,5 +96,9 @@ export function UptimePageProvider({ getPageObjects, getService }: FtrProviderCo
     public locationMissingIsDisplayed() {
       return uptimeService.locationMissingExists();
     }
+
+    public getAriaLabelForKey(key: string) {
+      return uptimeService.getAriaLabelForKey(key);
+    }
   })();
 }

x-pack/test/functional/services/uptime.ts

@@ -72,5 +72,8 @@ export function UptimeProvider({ getService }: FtrProviderContext) {
         timeout: 3000,
       });
     },
+    async getAriaLabelForKey(key: string) {
+      return await testSubjects.getAttribute(key, 'aria-label', 5000);
+    },
   };
 }