[Uptime] Allow filter dropdown search for id, remove client-side size limits (#29557)

* Fix filter bug for IDs, remove limits.

* Add name, URL as searchable fields.

* Update outdated API test fixture.

x-pack/plugins/uptime/common/graphql/introspection.json

@@ -1998,6 +1998,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "names",
+            "description": "",
+            "args": [],
+            "type": {
+              "kind": "LIST",
+              "name": null,
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "SCALAR", "name": "String", "ofType": null }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "ports",
             "description": "",

x-pack/plugins/uptime/common/graphql/types.ts

@@ -399,6 +399,8 @@ export interface StatusData {
 export interface FilterBar {
   ids?: MonitorKey[] | null;
 
+  names?: string[] | null;
+
   ports?: number[] | null;
 
   schemes?: string[] | null;

x-pack/plugins/uptime/public/components/queries/filter_bar/filter_bar.tsx

@@ -7,10 +7,9 @@
 // @ts-ignore No typings for EuiSearchBar
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSearchBar, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { take } from 'lodash';
 import React from 'react';
 import { Query } from 'react-apollo';
-import { FilterBar as FilterBarType } from '../../../../common/graphql/types';
+import { FilterBar as FilterBarType, MonitorKey } from '../../../../common/graphql/types';
 import { UptimeCommonProps } from '../../../uptime_app';
 import { getFilterBarQuery } from './get_filter_bar';
 import { filterBarSearchSchema } from './search_schema';
@@ -21,8 +20,7 @@ interface FilterBarProps {
 
 type Props = FilterBarProps & UptimeCommonProps;
 
-const MAX_SELECTION_LENGTH = 20;
-const SEARCH_THRESHOLD = 2;
+const SEARCH_THRESHOLD = 8;
 
 export const FilterBar = ({
   autorefreshInterval,
@@ -49,11 +47,8 @@ export const FilterBar = ({
         });
       }
       const {
-        filterBar: { ports, ids, schemes },
+        filterBar: { names, ports, ids, schemes },
       }: { filterBar: FilterBarType } = data;
-      const showFilterDisclaimer =
-        (ids && ids.length && ids.length > MAX_SELECTION_LENGTH) ||
-        (ports && ports.length && ports.length > MAX_SELECTION_LENGTH);
 
       // TODO: add a factory function + type for these filter options
       const filters = [
@@ -84,13 +79,35 @@ export const FilterBar = ({
           }),
           multiSelect: false,
           options: ids
-            ? take(ids, MAX_SELECTION_LENGTH).map(({ key, url }: any) => ({
+            ? ids.map(({ key }: MonitorKey) => ({
                 value: key,
-                view: url,
+                view: key,
               }))
             : [],
           searchThreshold: SEARCH_THRESHOLD,
         },
+        {
+          type: 'field_value_selection',
+          field: 'monitor.name',
+          name: i18n.translate('xpack.uptime.filterBar.options.nameLabel', {
+            defaultMessage: 'Name',
+          }),
+          multiSelect: false,
+          options: names
+            ? names.map((nameValue: string) => ({ value: nameValue, view: nameValue }))
+            : [],
+          searchThreshold: SEARCH_THRESHOLD,
+        },
+        {
+          type: 'field_value_selection',
+          field: 'url.full',
+          name: i18n.translate('xpack.uptime.filterBar.options.urlLabel', {
+            defaultMessage: 'URL',
+          }),
+          multiSelect: false,
+          options: ids ? ids.map(({ url }: MonitorKey) => ({ value: url, view: url })) : [],
+          searchThreshold: SEARCH_THRESHOLD,
+        },
         {
           type: 'field_value_selection',
           field: 'url.port',
@@ -99,7 +116,7 @@ export const FilterBar = ({
           }),
           multiSelect: false,
           options: ports
-            ? take(ports, MAX_SELECTION_LENGTH).map((portValue: any) => ({
+            ? ports.map((portValue: any) => ({
                 value: portValue,
                 view: portValue,
               }))
@@ -143,23 +160,6 @@ export const FilterBar = ({
               schema={filterBarSearchSchema}
             />
           </EuiFlexItem>
-          {showFilterDisclaimer && (
-            <EuiFlexItem grow={false}>
-              <EuiToolTip
-                position="left"
-                title={i18n.translate('xpack.uptime.filterBar.filterLimitationsTooltipTitle', {
-                  defaultMessage: 'Filter limitations',
-                })}
-                content={i18n.translate('xpack.uptime.filterBar.filterLimitationsTooltipText', {
-                  values: { selectionLength: MAX_SELECTION_LENGTH },
-                  defaultMessage:
-                    'The top {selectionLength} filter options for each field are displayed, but you can modify the filters manually or search for additional values.',
-                })}
-              >
-                <EuiIcon type="iInCircle" size="l" />
-              </EuiToolTip>
-            </EuiFlexItem>
-          )}
         </EuiFlexGroup>
       );
     }}

x-pack/plugins/uptime/public/components/queries/filter_bar/get_filter_bar.ts

@@ -14,6 +14,7 @@ query FilterBar($dateRangeStart: String!, $dateRangeEnd: String!) {
         key
         url
       }
+      names
       schemes
     }
   }

x-pack/plugins/uptime/server/graphql/monitors/resolvers.ts

@@ -7,6 +7,7 @@
 import { UMGqlRange } from '../../../common/domain_types';
 import { UMResolver } from '../../../common/graphql/resolver_types';
 import {
+  FilterBar,
   GetErrorsListQueryArgs,
   GetFilterBarQueryArgs,
   GetLatestMonitorsQueryArgs,
@@ -122,7 +123,7 @@ export const createMonitorsResolvers: CreateUMGraphQLResolvers = (
     ): Promise<Ping[]> {
       return libs.pings.getLatestMonitorDocs(req, dateRangeStart, dateRangeEnd, monitorId);
     },
-    async getFilterBar(resolver, { dateRangeStart, dateRangeEnd }, { req }): Promise<any> {
+    async getFilterBar(resolver, { dateRangeStart, dateRangeEnd }, { req }): Promise<FilterBar> {
       return libs.monitors.getFilterBar(req, dateRangeStart, dateRangeEnd);
     },
     async getErrorsList(

x-pack/plugins/uptime/server/graphql/monitors/schema.gql.ts

@@ -9,6 +9,7 @@ import gql from 'graphql-tag';
 export const monitorsSchema = gql`
   type FilterBar {
     ids: [MonitorKey!]
+    names: [String!]
     ports: [Int!]
     schemes: [String!]
     statuses: [String!]

x-pack/plugins/uptime/server/lib/adapters/monitors/elasticsearch_monitors_adapter.ts

@@ -351,7 +351,7 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
     const params = {
       index: INDEX_NAMES.HEARTBEAT,
       body: {
-        _source: ['monitor.id', 'monitor.type', 'url.full', 'url.port'],
+        _source: ['monitor.id', 'monitor.type', 'url.full', 'url.port', 'monitor.name'],
         size: 1000,
         query: {
           range: {
@@ -373,6 +373,7 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
     const ids: MonitorKey[] = [];
     const ports = new Set<number>();
     const types = new Set<string>();
+    const names = new Set<string>();
 
     const hits = get(result, 'hits.hits', []);
     hits.forEach((hit: any) => {
@@ -380,6 +381,7 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
       const url: string | null = get(hit, '_source.url.full', null);
       const port: number | undefined = get(hit, '_source.url.port', undefined);
       const type: string | undefined = get(hit, '_source.monitor.type', undefined);
+      const name: string | null = get(hit, '_source.monitor.name', null);
 
       if (key) {
         ids.push({ key, url });
@@ -390,12 +392,16 @@ export class ElasticsearchMonitorsAdapter implements UMMonitorsAdapter {
       if (type) {
         types.add(type);
       }
+      if (name) {
+        names.add(name);
+      }
     });
 
     return {
       ids,
       ports: Array.from(ports),
       schemes: Array.from(types),
+      names: Array.from(names),
       statuses: ['up', 'down'],
     };
   }

x-pack/test/api_integration/apis/uptime/graphql/fixtures/filter_list.json

@@ -13,6 +13,7 @@
       { "key": "auto-http-0XC9CDA429418EDC2B", "url": "https://www.wikipedia.org/" },
       { "key": "auto-http-0XE3B163481423197D", "url": "https://news.google.com/" }
     ],
+    "names": [],
     "schemes": ["tcp", "http"]
   }
 }