From 599447072f7fa86c8c8faa0cd71478a2a0922c25 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Fri, 1 May 2020 16:05:35 +0200
Subject: [PATCH 01/14] remove status filter

---
 .../common/runtime_types/ping/histogram.ts    |  1 -
 .../ping_histogram_container.tsx              |  4 +--
 .../__tests__/filter_status_button.test.tsx   |  5 ++-
 .../overview/filter_group/filter_group.tsx    | 18 +---------
 .../filter_status_button.tsx                  |  0
 .../overview/monitor_list/monitor_list.tsx    | 10 ++----
 .../monitor_list/monitor_list_header.tsx      | 30 ++++++++++++++++
 .../overview/monitor_list/status_filter.tsx   | 36 +++++++++++++++++++
 .../overview/snapshot/snapshot_container.tsx  |  6 ++--
 .../uptime/public/state/actions/snapshot.ts   |  1 -
 .../server/lib/requests/get_ping_histogram.ts |  8 ++---
 .../lib/requests/get_snapshot_counts.ts       | 17 ++-------
 .../rest_api/pings/get_ping_histogram.ts      |  4 +--
 .../rest_api/snapshot/get_snapshot_count.ts   |  4 +--
 14 files changed, 84 insertions(+), 60 deletions(-)
 rename x-pack/plugins/uptime/public/components/overview/{filter_group => monitor_list}/filter_status_button.tsx (100%)
 create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
 create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx

diff --git a/x-pack/plugins/uptime/common/runtime_types/ping/histogram.ts b/x-pack/plugins/uptime/common/runtime_types/ping/histogram.ts
index 2c3b52051be0f..209770a19f4aa 100644
--- a/x-pack/plugins/uptime/common/runtime_types/ping/histogram.ts
+++ b/x-pack/plugins/uptime/common/runtime_types/ping/histogram.ts
@@ -21,7 +21,6 @@ export interface GetPingHistogramParams {
   dateEnd: string;
   filters?: string;
   monitorId?: string;
-  statusFilter?: string;
 }
 
 export interface HistogramResult {
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
index c0e17966f5b9f..3642611393b4f 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
@@ -32,8 +32,8 @@ const Container: React.FC<Props & ResponsiveWrapperProps> = ({ height }) => {
   const { loading, data, esKuery, lastRefresh } = useSelector(selectPingHistogram);
 
   useEffect(() => {
-    dispatch(getPingHistogram({ monitorId, dateStart, dateEnd, statusFilter, filters: esKuery }));
-  }, [dateStart, dateEnd, monitorId, statusFilter, lastRefresh, esKuery, dispatch]);
+    dispatch(getPingHistogram({ monitorId, dateStart, dateEnd, filters: esKuery }));
+  }, [dateStart, dateEnd, monitorId, lastRefresh, esKuery, dispatch]);
   return (
     <PingHistogramComponent
       data={data}
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx
index 2ad4d971cf3b0..676fdd92f2966 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx
@@ -5,7 +5,10 @@
  */
 
 import React from 'react';
-import { FilterStatusButton, FilterStatusButtonProps } from '../filter_status_button';
+import {
+  FilterStatusButton,
+  FilterStatusButtonProps,
+} from '../../monitor_list/filter_status_button';
 import { shallowWithRouter } from '../../../../lib';
 
 describe('FilterStatusButton', () => {
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
index ff73554c8f07c..aa53c96482474 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiFilterGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FilterPopoverProps, FilterPopover } from './filter_popover';
-import { FilterStatusButton } from './filter_status_button';
+import { FilterStatusButton } from '../monitor_list/filter_status_button';
 import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
 
 interface PresentationalComponentProps {
@@ -106,22 +106,6 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
 
   return (
     <EuiFilterGroup>
-      <FilterStatusButton
-        content={i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
-          defaultMessage: 'Up',
-        })}
-        dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
-        value="up"
-        withNext={true}
-      />
-      <FilterStatusButton
-        content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {
-          defaultMessage: 'Down',
-        })}
-        dataTestSubj="xpack.uptime.filterBar.filterStatusDown"
-        value="down"
-        withNext={false}
-      />
       {filterPopoverProps.map(item => (
         <FilterPopover key={item.id} {...item} />
       ))}
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
similarity index 100%
rename from x-pack/plugins/uptime/public/components/overview/filter_group/filter_status_button.tsx
rename to x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index 7e9536689470e..4d91ac75643f6 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -31,6 +31,7 @@ import { MonitorListDrawer } from './monitor_list_drawer/list_drawer_container';
 import { MonitorListProps } from './monitor_list_container';
 import { MonitorList } from '../../../state/reducers/monitor_list';
 import { useUrlParams } from '../../../hooks';
+import { MonitorListHeader } from './monitor_list_header';
 
 interface Props extends MonitorListProps {
   lastRefresh: number;
@@ -181,14 +182,7 @@ export const MonitorListComponent: React.FC<Props> = ({
 
   return (
     <EuiPanel>
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.uptime.monitorList.monitoringStatusTitle"
-            defaultMessage="Monitor status"
-          />
-        </h5>
-      </EuiTitle>
+      <MonitorListHeader />
       <EuiSpacer size="s" />
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
new file mode 100644
index 0000000000000..2169c9ccdedf2
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { StatusFilter } from './status_filter';
+
+export const MonitorListHeader = () => {
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h5>
+            <FormattedMessage
+              id="xpack.uptime.monitorList.monitoringStatusTitle"
+              defaultMessage="Monitor status"
+            />
+          </h5>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <StatusFilter />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
new file mode 100644
index 0000000000000..02377baee7e09
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
+import { FilterStatusButton } from './filter_status_button';
+
+export const StatusFilter: React.FC = () => {
+  return (
+    <EuiFilterGroup>
+      <EuiFilterButton hasActiveFilters={true} onClick={() => {}}>
+        All monitors
+      </EuiFilterButton>
+      <FilterStatusButton
+        content={i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
+          defaultMessage: 'Up',
+        })}
+        dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
+        value="up"
+        withNext={true}
+      />
+      <FilterStatusButton
+        content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {
+          defaultMessage: 'Down',
+        })}
+        dataTestSubj="xpack.uptime.filterBar.filterStatusDown"
+        value="down"
+        withNext={false}
+      />
+    </EuiFilterGroup>
+  );
+};
diff --git a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
index 09d30e049175c..c6b7949907e90 100644
--- a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
@@ -26,9 +26,7 @@ export const Snapshot: React.FC<Props> = ({ height }: Props) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(
-      getSnapshotCountAction({ dateRangeStart, dateRangeEnd, filters: esKuery, statusFilter })
-    );
-  }, [dateRangeStart, dateRangeEnd, esKuery, lastRefresh, statusFilter, dispatch]);
+    dispatch(getSnapshotCountAction({ dateRangeStart, dateRangeEnd, filters: esKuery }));
+  }, [dateRangeStart, dateRangeEnd, esKuery, lastRefresh, dispatch]);
   return <SnapshotComponent count={count} height={height} loading={loading} />;
 };
diff --git a/x-pack/plugins/uptime/public/state/actions/snapshot.ts b/x-pack/plugins/uptime/public/state/actions/snapshot.ts
index e819a553e61f5..cbb7095eabb6c 100644
--- a/x-pack/plugins/uptime/public/state/actions/snapshot.ts
+++ b/x-pack/plugins/uptime/public/state/actions/snapshot.ts
@@ -11,7 +11,6 @@ export interface GetSnapshotPayload {
   dateRangeStart: string;
   dateRangeEnd: string;
   filters?: string;
-  statusFilter?: string;
 }
 
 export const getSnapshotCountAction = createAction<GetSnapshotPayload>('GET_SNAPSHOT_COUNT');
diff --git a/x-pack/plugins/uptime/server/lib/requests/get_ping_histogram.ts b/x-pack/plugins/uptime/server/lib/requests/get_ping_histogram.ts
index 299913c8dff08..d33e98c7ba8e7 100644
--- a/x-pack/plugins/uptime/server/lib/requests/get_ping_histogram.ts
+++ b/x-pack/plugins/uptime/server/lib/requests/get_ping_histogram.ts
@@ -18,14 +18,12 @@ export interface GetPingHistogramParams {
   filters?: string | null;
   /** @member monitorId optional limit to monitorId */
   monitorId?: string | null;
-  /** @member statusFilter special filter targeting the latest status of each monitor */
-  statusFilter?: string | null;
 }
 
 export const getPingHistogram: UMElasticsearchQueryFn<
   GetPingHistogramParams,
   HistogramResult
-> = async ({ callES, dynamicSettings, from, to, filters, monitorId, statusFilter }) => {
+> = async ({ callES, dynamicSettings, from, to, filters, monitorId }) => {
   const boolFilters = filters ? JSON.parse(filters) : null;
   const additionalFilters = [];
   if (monitorId) {
@@ -81,8 +79,8 @@ export const getPingHistogram: UMElasticsearchQueryFn<
     const upCount: number = bucket.up.doc_count;
     return {
       x,
-      downCount: statusFilter && statusFilter !== 'down' ? 0 : downCount,
-      upCount: statusFilter && statusFilter !== 'up' ? 0 : upCount,
+      downCount,
+      upCount,
       y: 1,
     };
   });
diff --git a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
index b57bc87d45418..2d7c30df5383a 100644
--- a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
+++ b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
@@ -13,7 +13,6 @@ export interface GetSnapshotCountParams {
   dateRangeStart: string;
   dateRangeEnd: string;
   filters?: string | null;
-  statusFilter?: string;
 }
 
 export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Snapshot> = async ({
@@ -22,12 +21,7 @@ export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Sn
   dateRangeStart,
   dateRangeEnd,
   filters,
-  statusFilter,
 }): Promise<Snapshot> => {
-  if (!(statusFilter === 'up' || statusFilter === 'down' || statusFilter === undefined)) {
-    throw new Error(`Invalid status filter value '${statusFilter}'`);
-  }
-
   const context = new QueryContext(
     callES,
     heartbeatIndices,
@@ -35,18 +29,11 @@ export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Sn
     dateRangeEnd,
     CONTEXT_DEFAULTS.CURSOR_PAGINATION,
     filters && filters !== '' ? JSON.parse(filters) : null,
-    Infinity,
-    statusFilter
+    Infinity
   );
 
   // Calculate the total, up, and down counts.
-  const counts = await statusCount(context);
-
-  return {
-    total: statusFilter ? counts[statusFilter] : counts.total,
-    up: statusFilter === 'down' ? 0 : counts.up,
-    down: statusFilter === 'up' ? 0 : counts.down,
-  };
+  return await statusCount(context);
 };
 
 const statusCount = async (context: QueryContext): Promise<Snapshot> => {
diff --git a/x-pack/plugins/uptime/server/rest_api/pings/get_ping_histogram.ts b/x-pack/plugins/uptime/server/rest_api/pings/get_ping_histogram.ts
index 41078f735920b..a589997889069 100644
--- a/x-pack/plugins/uptime/server/rest_api/pings/get_ping_histogram.ts
+++ b/x-pack/plugins/uptime/server/rest_api/pings/get_ping_histogram.ts
@@ -17,12 +17,11 @@ export const createGetPingHistogramRoute: UMRestApiRouteFactory = (libs: UMServe
       dateStart: schema.string(),
       dateEnd: schema.string(),
       monitorId: schema.maybe(schema.string()),
-      statusFilter: schema.maybe(schema.string()),
       filters: schema.maybe(schema.string()),
     }),
   },
   handler: async ({ callES, dynamicSettings }, _context, request, response): Promise<any> => {
-    const { dateStart, dateEnd, statusFilter, monitorId, filters } = request.query;
+    const { dateStart, dateEnd, monitorId, filters } = request.query;
 
     const result = await libs.requests.getPingHistogram({
       callES,
@@ -30,7 +29,6 @@ export const createGetPingHistogramRoute: UMRestApiRouteFactory = (libs: UMServe
       from: dateStart,
       to: dateEnd,
       monitorId,
-      statusFilter,
       filters,
     });
 
diff --git a/x-pack/plugins/uptime/server/rest_api/snapshot/get_snapshot_count.ts b/x-pack/plugins/uptime/server/rest_api/snapshot/get_snapshot_count.ts
index 7809e102a499f..9502335e4e5a8 100644
--- a/x-pack/plugins/uptime/server/rest_api/snapshot/get_snapshot_count.ts
+++ b/x-pack/plugins/uptime/server/rest_api/snapshot/get_snapshot_count.ts
@@ -17,18 +17,16 @@ export const createGetSnapshotCount: UMRestApiRouteFactory = (libs: UMServerLibs
       dateRangeStart: schema.string(),
       dateRangeEnd: schema.string(),
       filters: schema.maybe(schema.string()),
-      statusFilter: schema.maybe(schema.string()),
     }),
   },
   handler: async ({ callES, dynamicSettings }, _context, request, response): Promise<any> => {
-    const { dateRangeStart, dateRangeEnd, filters, statusFilter } = request.query;
+    const { dateRangeStart, dateRangeEnd, filters } = request.query;
     const result = await libs.requests.getSnapshotCount({
       callES,
       dynamicSettings,
       dateRangeStart,
       dateRangeEnd,
       filters,
-      statusFilter,
     });
     return response.ok({
       body: {

From 5dda388f9ce28d72bcafbdee2672243f3f7d387f Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Fri, 1 May 2020 20:12:34 +0200
Subject: [PATCH 02/14] update status filter

---
 .../ping_histogram_container.tsx              |  1 -
 .../overview/filter_group/filter_group.tsx    |  1 -
 .../__snapshots__/monitor_list.test.tsx.snap  | 82 ++++++++++++++++++-
 .../monitor_list/filter_status_button.tsx     | 14 +++-
 .../overview/monitor_list/monitor_list.tsx    | 30 +------
 .../monitor_list/monitor_list_header.tsx      | 25 +++++-
 .../overview/monitor_list/status_filter.tsx   | 26 ++++--
 .../overview/snapshot/snapshot_container.tsx  |  2 +-
 .../state/api/__tests__/snapshot.test.ts      |  3 -
 .../plugins/uptime/public/state/api/ping.ts   |  2 -
 .../state/reducers/__tests__/snapshot.test.ts |  1 -
 .../get_ping_histogram.test.ts.snap           | 46 +----------
 .../__tests__/get_ping_histogram.test.ts      | 41 ----------
 .../lib/requests/get_snapshot_counts.ts       |  4 +-
 .../fixtures/snapshot_filtered_by_down.json   |  5 --
 .../fixtures/snapshot_filtered_by_up.json     |  5 --
 .../apis/uptime/rest/snapshot.ts              | 17 ----
 x-pack/test/functional/apps/uptime/index.ts   |  2 +-
 18 files changed, 140 insertions(+), 167 deletions(-)
 delete mode 100644 x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json
 delete mode 100644 x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
index 3642611393b4f..ad855419d8865 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_histogram/ping_histogram_container.tsx
@@ -19,7 +19,6 @@ interface Props {
 
 const Container: React.FC<Props & ResponsiveWrapperProps> = ({ height }) => {
   const {
-    statusFilter,
     absoluteDateRangeStart,
     absoluteDateRangeEnd,
     dateRangeStart: dateStart,
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
index aa53c96482474..6d1d749c6cace 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
@@ -8,7 +8,6 @@ import React from 'react';
 import { EuiFilterGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FilterPopoverProps, FilterPopover } from './filter_popover';
-import { FilterStatusButton } from '../monitor_list/filter_status_button';
 import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
 
 interface PresentationalComponentProps {
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index 0d6638e7070d6..a170f77e519a9 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -557,28 +557,102 @@ exports[`MonitorList component renders the monitor list 1`] = `
   class="euiPanel euiPanel--paddingMedium"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
-      class="euiFlexItem"
+      class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <h5
         class="euiTitle euiTitle--xsmall"
       >
-        Monitor status
+        Monitors
       </h5>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiFilterGroup"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+          data-test-subj="xpack.uptime.filterBar.filterStatusUp"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <span
+                class="euiFilterButton__textShift"
+                data-text="All"
+                title="All"
+              >
+                All
+              </span>
+            </span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--withNext"
+          data-test-subj="xpack.uptime.filterBar.filterStatusUp"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <span
+                class="euiFilterButton__textShift"
+              >
+                <span
+                  class="euiTextColor euiTextColor--default"
+                >
+                  Up
+                </span>
+              </span>
+            </span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+          data-test-subj="xpack.uptime.filterBar.filterStatusDown"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              <span
+                class="euiFilterButton__textShift"
+                data-text="Down"
+                title="Down"
+              >
+                Down
+              </span>
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem"
     >
       <h5
         class="euiTitle euiTitle--xsmall"
+        style="margin-left:auto"
       >
         <a
           data-test-subj="uptimeCertificatesLink"
           href="/certificates"
         >
-          View certificates status
+          Certificates status
         </a>
       </h5>
     </div>
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
index abbe72530fd80..4145331250417 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
@@ -9,11 +9,12 @@ import React from 'react';
 import { useUrlParams } from '../../../hooks';
 
 export interface FilterStatusButtonProps {
-  content: string;
+  content: string | JSX.Element;
   dataTestSubj: string;
   isDisabled?: boolean;
   value: string;
   withNext: boolean;
+  color?: string;
 }
 
 export const FilterStatusButton = ({
@@ -21,17 +22,24 @@ export const FilterStatusButton = ({
   dataTestSubj,
   isDisabled,
   value,
+  color,
   withNext,
 }: FilterStatusButtonProps) => {
   const [getUrlParams, setUrlParams] = useUrlParams();
   const { statusFilter: urlValue } = getUrlParams();
+
+  const isActive = (value === 'all' && urlValue === '') || urlValue === value;
   return (
     <EuiFilterButton
+      color={(isActive ? color : undefined) as any}
       data-test-subj={dataTestSubj}
-      hasActiveFilters={urlValue === value}
+      hasActiveFilters={isActive}
       isDisabled={isDisabled}
       onClick={() => {
-        const nextFilter = { statusFilter: urlValue === value ? '' : value, pagination: '' };
+        const nextFilter = {
+          statusFilter: urlValue === value || value === 'all' ? '' : value,
+          pagination: '',
+        };
         setUrlParams(nextFilter);
       }}
       withNext={withNext}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index c8cdf77d92adb..de53c52cd7f75 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -13,12 +13,9 @@ import {
   EuiLink,
   EuiPanel,
   EuiSpacer,
-  EuiTitle,
 } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { HistogramPoint, FetchMonitorStatesQueryArgs } from '../../../../common/runtime_types';
 import { MonitorSummary } from '../../../../common/runtime_types';
 import { MonitorListStatusColumn } from './monitor_list_status_column';
@@ -32,7 +29,6 @@ import { MonitorListDrawer } from './monitor_list_drawer/list_drawer_container';
 import { MonitorListProps } from './monitor_list_container';
 import { MonitorList } from '../../../state/reducers/monitor_list';
 import { useUrlParams } from '../../../hooks';
-import { CERTIFICATES_ROUTE } from '../../../../common/constants';
 import { CertStatusColumn } from './cert_status_column';
 import { MonitorListHeader } from './monitor_list_header';
 
@@ -191,31 +187,7 @@ export const MonitorListComponent: React.FC<Props> = ({
 
   return (
     <EuiPanel>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTitle size="xs">
-            <h5>
-              <FormattedMessage
-                id="xpack.uptime.monitorList.monitoringStatusTitle"
-                defaultMessage="Monitor status"
-              />
-            </h5>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="xs">
-            <h5>
-              <Link to={CERTIFICATES_ROUTE} data-test-subj="uptimeCertificatesLink">
-                <FormattedMessage
-                  id="xpack.uptime.monitorList.viewCertificateTitle"
-                  defaultMessage="View certificates status"
-                />
-              </Link>
-            </h5>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
+      <MonitorListHeader />
       <EuiSpacer size="m" />
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
index 2169c9ccdedf2..69522b4ffc61d 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -7,17 +7,24 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { StatusFilter } from './status_filter';
+import { CERTIFICATES_ROUTE } from '../../../../common/constants';
+
+const TitleStyle = styled(EuiTitle)`
+  margin-left: auto;
+`;
 
 export const MonitorListHeader = () => {
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}>
         <EuiTitle size="xs">
           <h5>
             <FormattedMessage
               id="xpack.uptime.monitorList.monitoringStatusTitle"
-              defaultMessage="Monitor status"
+              defaultMessage="Monitors"
             />
           </h5>
         </EuiTitle>
@@ -25,6 +32,18 @@ export const MonitorListHeader = () => {
       <EuiFlexItem grow={false}>
         <StatusFilter />
       </EuiFlexItem>
+      <EuiFlexItem grow={true}>
+        <TitleStyle size="xs">
+          <h5>
+            <Link to={CERTIFICATES_ROUTE} data-test-subj="uptimeCertificatesLink">
+              <FormattedMessage
+                id="xpack.uptime.monitorList.viewCertificateTitle"
+                defaultMessage="Certificates status"
+              />
+            </Link>
+          </h5>
+        </TitleStyle>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index 02377baee7e09..a3b1b6a91684b 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -6,22 +6,35 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
+import { EuiFilterGroup, EuiTextColor } from '@elastic/eui';
 import { FilterStatusButton } from './filter_status_button';
+import { useGetUrlParams } from '../../../hooks';
 
 export const StatusFilter: React.FC = () => {
+  const { statusFilter } = useGetUrlParams();
+
   return (
     <EuiFilterGroup>
-      <EuiFilterButton hasActiveFilters={true} onClick={() => {}}>
-        All monitors
-      </EuiFilterButton>
       <FilterStatusButton
-        content={i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
-          defaultMessage: 'Up',
+        content={i18n.translate('xpack.uptime.filterBar.filterAllLabel', {
+          defaultMessage: 'All',
         })}
         dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
+        value="all"
+        withNext={true}
+      />
+      <FilterStatusButton
+        content={
+          <EuiTextColor color={statusFilter === 'up' ? 'secondary' : undefined}>
+            {i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
+              defaultMessage: 'Up',
+            })}
+          </EuiTextColor>
+        }
+        dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
         value="up"
         withNext={true}
+        color={'#secondary'}
       />
       <FilterStatusButton
         content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {
@@ -30,6 +43,7 @@ export const StatusFilter: React.FC = () => {
         dataTestSubj="xpack.uptime.filterBar.filterStatusDown"
         value="down"
         withNext={false}
+        color={'danger'}
       />
     </EuiFilterGroup>
   );
diff --git a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
index c6b7949907e90..0fd52f0a0be4f 100644
--- a/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/snapshot/snapshot_container.tsx
@@ -19,7 +19,7 @@ interface Props {
 }
 
 export const Snapshot: React.FC<Props> = ({ height }: Props) => {
-  const { dateRangeStart, dateRangeEnd, statusFilter } = useGetUrlParams();
+  const { dateRangeStart, dateRangeEnd } = useGetUrlParams();
 
   const { count, lastRefresh, loading, esKuery } = useSelector(snapshotDataSelector);
 
diff --git a/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts b/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts
index ff9fcd0573257..89f3373dacdd3 100644
--- a/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts
+++ b/x-pack/plugins/uptime/public/state/api/__tests__/snapshot.test.ts
@@ -30,14 +30,12 @@ describe('snapshot API', () => {
       dateRangeStart: 'now-15m',
       dateRangeEnd: 'now',
       filters: 'monitor.id:"auto-http-0X21EE76EAC459873F"',
-      statusFilter: 'up',
     });
     expect(fetchMock).toHaveBeenCalledWith('/api/uptime/snapshot/count', {
       query: {
         dateRangeEnd: 'now',
         dateRangeStart: 'now-15m',
         filters: 'monitor.id:"auto-http-0X21EE76EAC459873F"',
-        statusFilter: 'up',
       },
     });
     expect(resp).toEqual({ up: 3, down: 12, total: 15 });
@@ -50,7 +48,6 @@ describe('snapshot API', () => {
       dateRangeStart: 'now-15m',
       dateRangeEnd: 'now',
       filters: 'monitor.id: baz',
-      statusFilter: 'up',
     });
 
     expect(result).toMatchSnapshot();
diff --git a/x-pack/plugins/uptime/public/state/api/ping.ts b/x-pack/plugins/uptime/public/state/api/ping.ts
index 6de27879a49f5..a2937c9c794dd 100644
--- a/x-pack/plugins/uptime/public/state/api/ping.ts
+++ b/x-pack/plugins/uptime/public/state/api/ping.ts
@@ -24,14 +24,12 @@ export const fetchPingHistogram: APIFn<GetPingHistogramParams, HistogramResult>
   monitorId,
   dateStart,
   dateEnd,
-  statusFilter,
   filters,
 }) => {
   const queryParams = {
     dateStart,
     dateEnd,
     monitorId,
-    statusFilter,
     filters,
   };
 
diff --git a/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts b/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts
index 3650422571ce8..40e365f0a13a7 100644
--- a/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts
+++ b/x-pack/plugins/uptime/public/state/reducers/__tests__/snapshot.test.ts
@@ -17,7 +17,6 @@ describe('snapshot reducer', () => {
       dateRangeStart: 'now-15m',
       dateRangeEnd: 'now',
       filters: 'foo: bar',
-      statusFilter: 'up',
     });
     expect(
       snapshotReducer(
diff --git a/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap b/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap
index 0dafa5144c25a..37dec410664ef 100644
--- a/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap
+++ b/x-pack/plugins/uptime/server/lib/requests/__tests__/__snapshots__/get_ping_histogram.test.ts.snap
@@ -31,19 +31,19 @@ Object {
   "histogram": Array [
     Object {
       "downCount": 1,
-      "upCount": 0,
+      "upCount": 2,
       "x": 1,
       "y": 1,
     },
     Object {
       "downCount": 2,
-      "upCount": 0,
+      "upCount": 2,
       "x": 2,
       "y": 1,
     },
     Object {
       "downCount": 1,
-      "upCount": 0,
+      "upCount": 3,
       "x": 3,
       "y": 1,
     },
@@ -52,46 +52,6 @@ Object {
 }
 `;
 
-exports[`getPingHistogram returns a down-filtered array for when filtered by down status 1`] = `
-Object {
-  "histogram": Array [
-    Object {
-      "downCount": 1,
-      "upCount": 0,
-      "x": 1,
-      "y": 1,
-    },
-    Object {
-      "downCount": undefined,
-      "upCount": 0,
-      "x": 2,
-      "y": 1,
-    },
-  ],
-  "interval": "1d",
-}
-`;
-
-exports[`getPingHistogram returns a down-filtered array for when filtered by up status 1`] = `
-Object {
-  "histogram": Array [
-    Object {
-      "downCount": 0,
-      "upCount": 2,
-      "x": 1,
-      "y": 1,
-    },
-    Object {
-      "downCount": 0,
-      "upCount": 2,
-      "x": 2,
-      "y": 1,
-    },
-  ],
-  "interval": "1s",
-}
-`;
-
 exports[`getPingHistogram returns a single bucket if array has 1 1`] = `
 Object {
   "histogram": Array [
diff --git a/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts b/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts
index e456670a5e68d..9042186145eb7 100644
--- a/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts
+++ b/x-pack/plugins/uptime/server/lib/requests/__tests__/get_ping_histogram.test.ts
@@ -145,7 +145,6 @@ describe('getPingHistogram', () => {
       to: '5678',
       filters: JSON.stringify(searchFilter),
       monitorId: undefined,
-      statusFilter: 'down',
     });
 
     expect(mockEsClient).toHaveBeenCalledTimes(1);
@@ -205,44 +204,4 @@ describe('getPingHistogram', () => {
     expect(mockEsClient).toHaveBeenCalledTimes(1);
     expect(result).toMatchSnapshot();
   });
-
-  it('returns a down-filtered array for when filtered by down status', async () => {
-    expect.assertions(2);
-    const mockEsClient = jest.fn();
-    standardMockResponse.aggregations.timeseries.interval = '1d';
-    mockEsClient.mockReturnValue(standardMockResponse);
-    const result = await getPingHistogram({
-      callES: mockEsClient,
-      dynamicSettings: DYNAMIC_SETTINGS_DEFAULTS,
-      from: '1234',
-      to: '5678',
-      filters: '',
-      monitorId: undefined,
-      statusFilter: 'down',
-    });
-
-    expect(mockEsClient).toHaveBeenCalledTimes(1);
-    expect(result).toMatchSnapshot();
-  });
-
-  it('returns a down-filtered array for when filtered by up status', async () => {
-    expect.assertions(2);
-    const mockEsClient = jest.fn();
-
-    standardMockResponse.aggregations.timeseries.interval = '1s';
-    mockEsClient.mockReturnValue(standardMockResponse);
-
-    const result = await getPingHistogram({
-      callES: mockEsClient,
-      dynamicSettings: DYNAMIC_SETTINGS_DEFAULTS,
-      from: '1234',
-      to: '5678',
-      filters: '',
-      monitorId: undefined,
-      statusFilter: 'up',
-    });
-
-    expect(mockEsClient).toHaveBeenCalledTimes(1);
-    expect(result).toMatchSnapshot();
-  });
 });
diff --git a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
index 2d7c30df5383a..9caa5d9d9dcb2 100644
--- a/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
+++ b/x-pack/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
@@ -33,7 +33,9 @@ export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Sn
   );
 
   // Calculate the total, up, and down counts.
-  return await statusCount(context);
+  const count = await statusCount(context);
+
+  return { total: count.total, up: count.up, down: count.down };
 };
 
 const statusCount = async (context: QueryContext): Promise<Snapshot> => {
diff --git a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json b/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json
deleted file mode 100644
index 27ba69411f88d..0000000000000
--- a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_down.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "total": 7,
-  "up": 0,
-  "down": 7
-}
\ No newline at end of file
diff --git a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json b/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json
deleted file mode 100644
index 33e60a4340a13..0000000000000
--- a/x-pack/test/api_integration/apis/uptime/rest/fixtures/snapshot_filtered_by_up.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "total": 10,
-  "up": 10,
-  "down": 0
-}
\ No newline at end of file
diff --git a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
index 9a8951741948e..0d70844650369 100644
--- a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
+++ b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
@@ -80,23 +80,6 @@ export default function({ getService }: FtrProviderContext) {
 
               expectFixtureEql(apiResponse.body, 'snapshot');
             });
-
-            it('will fetch a monitor snapshot filtered by down status', async () => {
-              const statusFilter = 'down';
-              const apiResponse = await supertest.get(
-                `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
-              );
-
-              expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_down');
-            });
-
-            it('will fetch a monitor snapshot filtered by up status', async () => {
-              const statusFilter = 'up';
-              const apiResponse = await supertest.get(
-                `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
-              );
-              expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_up');
-            });
           });
         });
       });
diff --git a/x-pack/test/functional/apps/uptime/index.ts b/x-pack/test/functional/apps/uptime/index.ts
index 6ecd39f696312..86a9afd9c9659 100644
--- a/x-pack/test/functional/apps/uptime/index.ts
+++ b/x-pack/test/functional/apps/uptime/index.ts
@@ -67,7 +67,7 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => {
       loadTestFile(require.resolve('./overview'));
       loadTestFile(require.resolve('./monitor'));
       loadTestFile(require.resolve('./ml_anomaly'));
-      loadTestFile(require.resolve('./feature_controls'));
+      // loadTestFile(require.resolve('./feature_controls'));
     });
   });
 };

From cce528dd7e52cfc4bdbb0d394ded24850fca0515 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Fri, 1 May 2020 20:14:50 +0200
Subject: [PATCH 03/14] revert

---
 x-pack/test/functional/apps/uptime/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/test/functional/apps/uptime/index.ts b/x-pack/test/functional/apps/uptime/index.ts
index 86a9afd9c9659..6ecd39f696312 100644
--- a/x-pack/test/functional/apps/uptime/index.ts
+++ b/x-pack/test/functional/apps/uptime/index.ts
@@ -67,7 +67,7 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => {
       loadTestFile(require.resolve('./overview'));
       loadTestFile(require.resolve('./monitor'));
       loadTestFile(require.resolve('./ml_anomaly'));
-      // loadTestFile(require.resolve('./feature_controls'));
+      loadTestFile(require.resolve('./feature_controls'));
     });
   });
 };

From 4d8ec8557ce5ea357cdfad849a24f966f13b2f7e Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Mon, 4 May 2020 17:55:58 +0200
Subject: [PATCH 04/14] update func test

---
 .../overview/monitor_list/status_filter.tsx       |  2 +-
 x-pack/test/functional/apps/uptime/overview.ts    | 15 +++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index a3b1b6a91684b..666f9043acfc8 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -19,7 +19,7 @@ export const StatusFilter: React.FC = () => {
         content={i18n.translate('xpack.uptime.filterBar.filterAllLabel', {
           defaultMessage: 'All',
         })}
-        dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
+        dataTestSubj="xpack.uptime.filterBar.filterStatusAll"
         value="all"
         withNext={true}
       />
diff --git a/x-pack/test/functional/apps/uptime/overview.ts b/x-pack/test/functional/apps/uptime/overview.ts
index d0dfca64634f6..625566be44197 100644
--- a/x-pack/test/functional/apps/uptime/overview.ts
+++ b/x-pack/test/functional/apps/uptime/overview.ts
@@ -7,14 +7,21 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
+const ARCHIVE = 'uptime/full_heartbeat';
+
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const { uptime } = getPageObjects(['uptime']);
   const retry = getService('retry');
+  const esArchiver = getService('esArchiver');
 
   describe('overview page', function() {
     const DEFAULT_DATE_START = 'Sep 10, 2019 @ 12:40:08.078';
     const DEFAULT_DATE_END = 'Sep 11, 2019 @ 19:40:08.078';
 
+    before(async () => {
+      await esArchiver.loadIfNeeded(ARCHIVE);
+    });
+
     beforeEach(async () => {
       await uptime.goToRoot();
       await uptime.setDateRange(DEFAULT_DATE_START, DEFAULT_DATE_END);
@@ -159,20 +166,20 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
 
     describe('snapshot counts', () => {
-      it('updates the snapshot count when status filter is set to down', async () => {
+      it('should not update  when status filter is set to down', async () => {
         await uptime.setStatusFilter('down');
 
         await retry.tryForTime(12000, async () => {
           const counts = await uptime.getSnapshotCount();
-          expect(counts).to.eql({ up: '0', down: '7' });
+          expect(counts).to.eql({ up: '93', down: '7' });
         });
       });
 
-      it('updates the snapshot count when status filter is set to up', async () => {
+      it('should not update when status filter is set to up', async () => {
         await uptime.setStatusFilter('up');
         await retry.tryForTime(12000, async () => {
           const counts = await uptime.getSnapshotCount();
-          expect(counts).to.eql({ up: '93', down: '0' });
+          expect(counts).to.eql({ up: '93', down: '7' });
         });
       });
 

From 3ab22f2691cc13a02da474b05de3626dc1a0891f Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Mon, 4 May 2020 18:08:50 +0200
Subject: [PATCH 05/14] remove unnecessary

---
 .../public/components/overview/monitor_list/status_filter.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index 666f9043acfc8..f515c7f7b8578 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -34,7 +34,6 @@ export const StatusFilter: React.FC = () => {
         dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
         value="up"
         withNext={true}
-        color={'#secondary'}
       />
       <FilterStatusButton
         content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {

From 9fe7ae5e36715d2725103b709301d957dd81c690 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Mon, 4 May 2020 20:00:40 +0200
Subject: [PATCH 06/14] snaps

---
 .../__snapshots__/monitor_list.test.tsx.snap  | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index a170f77e519a9..7772b886f7a4f 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -533,22 +533,26 @@ exports[`MonitorList component renders loading state 1`] = `
 `;
 
 exports[`MonitorList component renders the monitor list 1`] = `
-.c1 {
+.c2 {
   padding-left: 17px;
 }
 
-.c3 {
+.c4 {
   padding-top: 12px;
 }
 
-.c2 {
+.c0 {
+  margin-left: auto;
+}
+
+.c3 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @media (max-width:574px) {
-  .c0 {
+  .c1 {
     min-width: 230px;
   }
 }
@@ -575,8 +579,8 @@ exports[`MonitorList component renders the monitor list 1`] = `
         class="euiFilterGroup"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
-          data-test-subj="xpack.uptime.filterBar.filterStatusUp"
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+          data-test-subj="xpack.uptime.filterBar.filterStatusAll"
           type="button"
         >
           <span
@@ -645,8 +649,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
       class="euiFlexItem"
     >
       <h5
-        class="euiTitle euiTitle--xsmall"
-        style="margin-left:auto"
+        class="euiTitle euiTitle--xsmall c0"
       >
         <a
           data-test-subj="uptimeCertificatesLink"
@@ -800,7 +803,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c0"
+                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrow1"
@@ -827,7 +830,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                       </div>
                     </div>
                     <span
-                      class="c1"
+                      class="c2"
                     >
                       <span
                         class="euiToolTipAnchor"
@@ -892,7 +895,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  class="euiLink euiLink--text c2"
+                  class="euiLink euiLink--text c3"
                   type="button"
                 >
                    
@@ -976,7 +979,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c0"
+                  class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
                 >
                   <div
                     class="euiFlexItem euiFlexItem--flexGrow1"
@@ -1003,7 +1006,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                       </div>
                     </div>
                     <span
-                      class="c1"
+                      class="c2"
                     >
                       <span
                         class="euiToolTipAnchor"
@@ -1068,7 +1071,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
                 class="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  class="euiLink euiLink--text c2"
+                  class="euiLink euiLink--text c3"
                   type="button"
                 >
                    
@@ -1190,7 +1193,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
         >
           <button
             aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c3"
+            class="euiButtonIcon euiButtonIcon--text c4"
             data-test-subj="xpack.uptime.monitorList.prevButton"
             disabled=""
             type="button"
@@ -1207,7 +1210,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
         >
           <button
             aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
-            class="euiButtonIcon euiButtonIcon--text c3"
+            class="euiButtonIcon euiButtonIcon--text c4"
             data-test-subj="xpack.uptime.monitorList.nextButton"
             disabled=""
             type="button"

From 8370e8411f0305a2d69fd6d50f5dc38e484cd335 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 12:29:01 +0200
Subject: [PATCH 07/14] PR feedback

---
 .../overview/monitor_list/filter_status_button.tsx     |  3 ++-
 .../components/overview/monitor_list/monitor_list.tsx  |  2 +-
 .../overview/monitor_list/monitor_list_header.tsx      |  8 ++++++--
 .../components/overview/monitor_list/status_filter.tsx | 10 +++++++---
 x-pack/test/functional/apps/uptime/overview.ts         |  4 +---
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
index 4145331250417..684c7c5adb588 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
@@ -12,6 +12,7 @@ export interface FilterStatusButtonProps {
   content: string | JSX.Element;
   dataTestSubj: string;
   isDisabled?: boolean;
+  isActive: boolean;
   value: string;
   withNext: boolean;
   color?: string;
@@ -21,6 +22,7 @@ export const FilterStatusButton = ({
   content,
   dataTestSubj,
   isDisabled,
+  isActive,
   value,
   color,
   withNext,
@@ -28,7 +30,6 @@ export const FilterStatusButton = ({
   const [getUrlParams, setUrlParams] = useUrlParams();
   const { statusFilter: urlValue } = getUrlParams();
 
-  const isActive = (value === 'all' && urlValue === '') || urlValue === value;
   return (
     <EuiFilterButton
       color={(isActive ? color : undefined) as any}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index de53c52cd7f75..4d6aea4877b3d 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -187,7 +187,7 @@ export const MonitorListComponent: React.FC<Props> = ({
 
   return (
     <EuiPanel>
-      <MonitorListHeader />
+      <MonitorListHeader statusFilter={statusFilter} />
       <EuiSpacer size="m" />
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
index 69522b4ffc61d..fcb6212007585 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -16,7 +16,11 @@ const TitleStyle = styled(EuiTitle)`
   margin-left: auto;
 `;
 
-export const MonitorListHeader = () => {
+interface Props {
+  statusFilter: string;
+}
+
+export const MonitorListHeader: React.FC<Props> = ({ statusFilter }) => {
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>
@@ -30,7 +34,7 @@ export const MonitorListHeader = () => {
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <StatusFilter />
+        <StatusFilter statusFilter={statusFilter} />
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
         <TitleStyle size="xs">
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index f515c7f7b8578..96153f6b113bb 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -8,11 +8,12 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFilterGroup, EuiTextColor } from '@elastic/eui';
 import { FilterStatusButton } from './filter_status_button';
-import { useGetUrlParams } from '../../../hooks';
 
-export const StatusFilter: React.FC = () => {
-  const { statusFilter } = useGetUrlParams();
+interface Props {
+  statusFilter: string;
+}
 
+export const StatusFilter: React.FC<Props> = ({ statusFilter }) => {
   return (
     <EuiFilterGroup>
       <FilterStatusButton
@@ -22,6 +23,7 @@ export const StatusFilter: React.FC = () => {
         dataTestSubj="xpack.uptime.filterBar.filterStatusAll"
         value="all"
         withNext={true}
+        isActive={statusFilter === ''}
       />
       <FilterStatusButton
         content={
@@ -34,6 +36,7 @@ export const StatusFilter: React.FC = () => {
         dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
         value="up"
         withNext={true}
+        isActive={statusFilter === 'up'}
       />
       <FilterStatusButton
         content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {
@@ -43,6 +46,7 @@ export const StatusFilter: React.FC = () => {
         value="down"
         withNext={false}
         color={'danger'}
+        isActive={statusFilter === 'down'}
       />
     </EuiFilterGroup>
   );
diff --git a/x-pack/test/functional/apps/uptime/overview.ts b/x-pack/test/functional/apps/uptime/overview.ts
index 625566be44197..98d432668a285 100644
--- a/x-pack/test/functional/apps/uptime/overview.ts
+++ b/x-pack/test/functional/apps/uptime/overview.ts
@@ -7,8 +7,6 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-const ARCHIVE = 'uptime/full_heartbeat';
-
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const { uptime } = getPageObjects(['uptime']);
   const retry = getService('retry');
@@ -19,7 +17,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     const DEFAULT_DATE_END = 'Sep 11, 2019 @ 19:40:08.078';
 
     before(async () => {
-      await esArchiver.loadIfNeeded(ARCHIVE);
+      await esArchiver.loadIfNeeded('uptime/full_heartbeat');
     });
 
     beforeEach(async () => {

From e8d61e0ba0e3a4c37154482197c4b85cc1c51f47 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 14:17:41 +0200
Subject: [PATCH 08/14] added tests

---
 .../filter_status_button.test.tsx.snap        |  25 ++++
 .../__snapshots__/status_filter.test.tsx.snap | 128 ++++++++++++++++++
 .../__tests__/filter_status_button.test.tsx   |  15 +-
 .../__tests__/status_filter.test.tsx          |  64 +++++++++
 .../overview/monitor_list/monitor_list.tsx    |   2 +-
 .../monitor_list/monitor_list_header.tsx      |   8 +-
 .../overview/monitor_list/status_filter.tsx   |   7 +-
 7 files changed, 232 insertions(+), 17 deletions(-)
 rename x-pack/plugins/uptime/public/components/overview/{filter_group => monitor_list}/__tests__/__snapshots__/filter_status_button.test.tsx.snap (71%)
 create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
 rename x-pack/plugins/uptime/public/components/overview/{filter_group => monitor_list}/__tests__/filter_status_button.test.tsx (64%)
 create mode 100644 x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx

diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_status_button.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
similarity index 71%
rename from x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_status_button.test.tsx.snap
rename to x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
index 2d21c4d2fe2a2..b5d1b1d8ff60e 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/__snapshots__/filter_status_button.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/filter_status_button.test.tsx.snap
@@ -1,6 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FilterStatusButton renders without errors for valid props 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+  data-test-subj="foo"
+  type="button"
+>
+  <span
+    class="euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    >
+      <span
+        class="euiFilterButton__textShift"
+        data-text="Up"
+        title="Up"
+      >
+        Up
+      </span>
+    </span>
+  </span>
+</button>
+`;
+
+exports[`FilterStatusButton shallow renders without errors for valid props 1`] = `
 <ContextProvider
   value={
     Object {
@@ -54,6 +78,7 @@ exports[`FilterStatusButton renders without errors for valid props 1`] = `
   <FilterStatusButton
     content="Up"
     dataTestSubj="foo"
+    isActive={true}
     value="up"
     withNext={true}
   />
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
new file mode 100644
index 0000000000000..e8b9326d360e8
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/status_filter.test.tsx.snap
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusFilterComponent renders without errors for valid props 1`] = `
+<div
+  class="euiFilterGroup"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton--withNext"
+    data-test-subj="xpack.uptime.filterBar.filterStatusAll"
+    type="button"
+  >
+    <span
+      class="euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <span
+          class="euiFilterButton__textShift"
+          data-text="All"
+          title="All"
+        >
+          All
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--withNext"
+    data-test-subj="xpack.uptime.filterBar.filterStatusUp"
+    type="button"
+  >
+    <span
+      class="euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <span
+          class="euiFilterButton__textShift"
+        >
+          <span
+            class="euiTextColor euiTextColor--default"
+          >
+            Up
+          </span>
+        </span>
+      </span>
+    </span>
+  </button>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton"
+    data-test-subj="xpack.uptime.filterBar.filterStatusDown"
+    type="button"
+  >
+    <span
+      class="euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <span
+          class="euiFilterButton__textShift"
+          data-text="Down"
+          title="Down"
+        >
+          Down
+        </span>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`StatusFilterComponent shallow renders without errors for valid props 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "history": Object {
+        "action": "POP",
+        "block": [Function],
+        "canGo": [Function],
+        "createHref": [Function],
+        "entries": Array [
+          Object {
+            "hash": "",
+            "key": "TestKeyForTesting",
+            "pathname": "/",
+            "search": "",
+            "state": undefined,
+          },
+        ],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "index": 0,
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "key": "TestKeyForTesting",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      },
+      "location": Object {
+        "hash": "",
+        "key": "TestKeyForTesting",
+        "pathname": "/",
+        "search": "",
+        "state": undefined,
+      },
+      "match": Object {
+        "isExact": true,
+        "params": Object {},
+        "path": "/",
+        "url": "/",
+      },
+      "staticContext": undefined,
+    }
+  }
+>
+  <StatusFilter />
+</ContextProvider>
+`;
diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx
similarity index 64%
rename from x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx
rename to x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx
index 676fdd92f2966..58c305f0d15a0 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/__tests__/filter_status_button.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/filter_status_button.test.tsx
@@ -5,11 +5,8 @@
  */
 
 import React from 'react';
-import {
-  FilterStatusButton,
-  FilterStatusButtonProps,
-} from '../../monitor_list/filter_status_button';
-import { shallowWithRouter } from '../../../../lib';
+import { FilterStatusButton, FilterStatusButtonProps } from '../filter_status_button';
+import { renderWithRouter, shallowWithRouter } from '../../../../lib';
 
 describe('FilterStatusButton', () => {
   let props: FilterStatusButtonProps;
@@ -19,11 +16,17 @@ describe('FilterStatusButton', () => {
       dataTestSubj: 'foo',
       value: 'up',
       withNext: true,
+      isActive: true,
     };
   });
 
-  it('renders without errors for valid props', () => {
+  it('shallow renders without errors for valid props', () => {
     const wrapper = shallowWithRouter(<FilterStatusButton {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders without errors for valid props', () => {
+    const wrapper = renderWithRouter(<FilterStatusButton {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx
new file mode 100644
index 0000000000000..a1288513eb785
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/status_filter.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 React from 'react';
+import { mountWithRouter, renderWithRouter, shallowWithRouter } from '../../../../lib';
+import { createMemoryHistory } from 'history';
+import { StatusFilter } from '../status_filter';
+import { FilterStatusButton } from '../filter_status_button';
+
+describe('StatusFilterComponent', () => {
+  beforeEach(() => {});
+
+  const getStatusBtns = (status: string) => {
+    const history = createMemoryHistory({
+      initialEntries: [`/?g=%22%22&statusFilter=${status}`],
+    });
+
+    const wrapper = mountWithRouter(<StatusFilter />, history);
+    const filterBtns = wrapper.find(FilterStatusButton);
+
+    const allBtn = filterBtns.at(0);
+    const upBtn = filterBtns.at(1);
+    const downBtn = filterBtns.at(2);
+
+    return { allBtn, upBtn, downBtn, wrapper };
+  };
+
+  it('shallow renders without errors for valid props', () => {
+    const wrapper = shallowWithRouter(<StatusFilter />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders without errors for valid props', () => {
+    const wrapper = renderWithRouter(<StatusFilter />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('checks if it properly validates url state when filter is up', () => {
+    const { allBtn, upBtn, downBtn } = getStatusBtns('up');
+
+    expect(allBtn.props().isActive).toBe(false);
+    expect(upBtn.props().isActive).toBe(true);
+    expect(downBtn.props().isActive).toBe(false);
+  });
+
+  it('checks if it properly validates url state when filter is down', () => {
+    const { allBtn, upBtn, downBtn } = getStatusBtns('down');
+
+    expect(allBtn.props().isActive).toBe(false);
+    expect(upBtn.props().isActive).toBe(false);
+    expect(downBtn.props().isActive).toBe(true);
+  });
+
+  it('checks if it properly validates url state when filter is all', () => {
+    const { allBtn, upBtn, downBtn } = getStatusBtns('');
+
+    expect(allBtn.props().isActive).toBe(true);
+    expect(upBtn.props().isActive).toBe(false);
+    expect(downBtn.props().isActive).toBe(false);
+  });
+});
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index 4d6aea4877b3d..de53c52cd7f75 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -187,7 +187,7 @@ export const MonitorListComponent: React.FC<Props> = ({
 
   return (
     <EuiPanel>
-      <MonitorListHeader statusFilter={statusFilter} />
+      <MonitorListHeader />
       <EuiSpacer size="m" />
       <EuiBasicTable
         aria-label={labels.getDescriptionLabel(items.length)}
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
index fcb6212007585..1839a9a20759f 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -16,11 +16,7 @@ const TitleStyle = styled(EuiTitle)`
   margin-left: auto;
 `;
 
-interface Props {
-  statusFilter: string;
-}
-
-export const MonitorListHeader: React.FC<Props> = ({ statusFilter }) => {
+export const MonitorListHeader: React.FC<Props> = () => {
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>
@@ -34,7 +30,7 @@ export const MonitorListHeader: React.FC<Props> = ({ statusFilter }) => {
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <StatusFilter statusFilter={statusFilter} />
+        <StatusFilter />
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
         <TitleStyle size="xs">
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index 96153f6b113bb..a3c2b51c0376a 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -8,12 +8,11 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFilterGroup, EuiTextColor } from '@elastic/eui';
 import { FilterStatusButton } from './filter_status_button';
+import { useGetUrlParams } from '../../../hooks';
 
-interface Props {
-  statusFilter: string;
-}
+export const StatusFilter: React.FC = () => {
+  const { statusFilter } = useGetUrlParams();
 
-export const StatusFilter: React.FC<Props> = ({ statusFilter }) => {
   return (
     <EuiFilterGroup>
       <FilterStatusButton

From 86e7d6a9177dacb185a641146c35097adb3d0847 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 14:19:13 +0200
Subject: [PATCH 09/14] fix type

---
 .../public/components/overview/filter_group/filter_group.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
index 46790d8e7b050..b881dfcdd2e00 100644
--- a/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
@@ -6,7 +6,6 @@
 
 import React, { useState } from 'react';
 import { EuiFilterGroup } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { FilterPopoverProps, FilterPopover } from './filter_popover';
 import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
 import { filterLabels } from './translations';

From 20f2ead5e4e8969a3cbe734cb52926a7c4e10286 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 14:20:55 +0200
Subject: [PATCH 10/14] type

---
 .../components/overview/monitor_list/monitor_list_header.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
index 1839a9a20759f..2c5677e32e325 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -16,7 +16,7 @@ const TitleStyle = styled(EuiTitle)`
   margin-left: auto;
 `;
 
-export const MonitorListHeader: React.FC<Props> = () => {
+export const MonitorListHeader: React.FC = () => {
   return (
     <EuiFlexGroup alignItems="center">
       <EuiFlexItem grow={false}>

From 9345d309505e0a60e55ee2a645db74a30b9884fc Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 14:58:29 +0200
Subject: [PATCH 11/14] update filter vals

---
 .../overview/monitor_list/filter_status_button.tsx         | 7 +++----
 .../components/overview/monitor_list/status_filter.tsx     | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
index 684c7c5adb588..00521a35cab60 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
@@ -13,7 +13,7 @@ export interface FilterStatusButtonProps {
   dataTestSubj: string;
   isDisabled?: boolean;
   isActive: boolean;
-  value: string;
+  value: 'up' | 'down' | '';
   withNext: boolean;
   color?: string;
 }
@@ -27,8 +27,7 @@ export const FilterStatusButton = ({
   color,
   withNext,
 }: FilterStatusButtonProps) => {
-  const [getUrlParams, setUrlParams] = useUrlParams();
-  const { statusFilter: urlValue } = getUrlParams();
+  const [setUrlParams] = useUrlParams();
 
   return (
     <EuiFilterButton
@@ -38,7 +37,7 @@ export const FilterStatusButton = ({
       isDisabled={isDisabled}
       onClick={() => {
         const nextFilter = {
-          statusFilter: urlValue === value || value === 'all' ? '' : value,
+          statusFilter: value,
           pagination: '',
         };
         setUrlParams(nextFilter);
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index a3c2b51c0376a..42e7a0fd278f5 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -20,7 +20,8 @@ export const StatusFilter: React.FC = () => {
           defaultMessage: 'All',
         })}
         dataTestSubj="xpack.uptime.filterBar.filterStatusAll"
-        value="all"
+        // Empty string for all filter, since we dont store it in url, so keeping it in sync
+        value=""
         withNext={true}
         isActive={statusFilter === ''}
       />

From e9984b650cd01798dd9e6f187f7012db5a58b95d Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 15:07:15 +0200
Subject: [PATCH 12/14] up

---
 .../components/overview/monitor_list/status_filter.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
index 42e7a0fd278f5..43a7ffcea0867 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/status_filter.tsx
@@ -13,6 +13,9 @@ import { useGetUrlParams } from '../../../hooks';
 export const StatusFilter: React.FC = () => {
   const { statusFilter } = useGetUrlParams();
 
+  // Empty string for all filter button value, since we dont store it in url, so keeping it in sync
+  const ALL = '';
+
   return (
     <EuiFilterGroup>
       <FilterStatusButton
@@ -20,8 +23,7 @@ export const StatusFilter: React.FC = () => {
           defaultMessage: 'All',
         })}
         dataTestSubj="xpack.uptime.filterBar.filterStatusAll"
-        // Empty string for all filter, since we dont store it in url, so keeping it in sync
-        value=""
+        value={ALL}
         withNext={true}
         isActive={statusFilter === ''}
       />

From 6c425254a14945f2b59c6a40de443c0783f79074 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 15:19:39 +0200
Subject: [PATCH 13/14] up

---
 .../components/overview/monitor_list/filter_status_button.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
index 00521a35cab60..c10c67e10eeb6 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
@@ -27,7 +27,7 @@ export const FilterStatusButton = ({
   color,
   withNext,
 }: FilterStatusButtonProps) => {
-  const [setUrlParams] = useUrlParams();
+  const setUrlParams = useUrlParams()[1];
 
   return (
     <EuiFilterButton

From 52361876054ab165d32b84a7fe31740053a3e8b9 Mon Sep 17 00:00:00 2001
From: shahzad <shahzad31comp@gmail.com>
Date: Tue, 5 May 2020 16:29:05 +0200
Subject: [PATCH 14/14] revert unncessary changes

---
 .../overview/monitor_list/filter_status_button.tsx       | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
index c10c67e10eeb6..6e63c21d08ca9 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/filter_status_button.tsx
@@ -27,8 +27,8 @@ export const FilterStatusButton = ({
   color,
   withNext,
 }: FilterStatusButtonProps) => {
-  const setUrlParams = useUrlParams()[1];
-
+  const [getUrlParams, setUrlParams] = useUrlParams();
+  const { statusFilter: urlValue } = getUrlParams();
   return (
     <EuiFilterButton
       color={(isActive ? color : undefined) as any}
@@ -36,10 +36,7 @@ export const FilterStatusButton = ({
       hasActiveFilters={isActive}
       isDisabled={isDisabled}
       onClick={() => {
-        const nextFilter = {
-          statusFilter: value,
-          pagination: '',
-        };
+        const nextFilter = { statusFilter: urlValue === value ? '' : value, pagination: '' };
         setUrlParams(nextFilter);
       }}
       withNext={withNext}