update status filter

elastic · May 1, 2020 · 5dda388 · 5dda388
1 parent dc65962
commit 5dda388
Show file tree

Hide file tree

Showing 18 changed files with 140 additions and 167 deletions.
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
@@ -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
@@ -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/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
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
@@ -9,29 +9,37 @@ 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 = ({
   content,
   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
@@ -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
@@ -7,24 +7,43 @@
 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>
       </EuiFlexItem>
       <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -17,7 +17,6 @@ describe('snapshot reducer', () => {
       dateRangeStart: 'now-15m',
       dateRangeEnd: 'now',
       filters: 'foo: bar',
-      statusFilter: 'up',
     });
     expect(
       snapshotReducer(