[Uptime] For filters, use shared component (#105739)

Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Sep 16, 2021 · 0353d5e · 0353d5e
1 parent dbcc75b
commit 0353d5e
Show file tree

Hide file tree

Showing 98 changed files with 1,080 additions and 1,767 deletions.
diff --git a/.../observability/public/components/shared/field_value_suggestions/field_value_selection.tsx b/.../observability/public/components/shared/field_value_suggestions/field_value_selection.tsx
@@ -71,6 +71,7 @@ export function FieldValueSelection({
   selectedValue,
   excludedValue,
   compressed = true,
+  allowExclusions = true,
   onChange: onSelectionChange,
 }: FieldValueSelectionProps) {
   const [options, setOptions] = useState<EuiSelectableOption[]>(() =>
@@ -142,7 +143,7 @@ export function FieldValueSelection({
       .filter((opt) => opt?.checked === 'off')
       .map(({ label: labelN }) => labelN);
 
-    return isEqual(selectedValue ?? [], currSelected) && isEqual(excludedValue, currExcluded);
+    return isEqual(selectedValue ?? [], currSelected) && isEqual(excludedValue ?? [], currExcluded);
   };
 
   return (
@@ -174,7 +175,7 @@ export function FieldValueSelection({
           options={options}
           onChange={onChange}
           isLoading={loading && !query && options.length === 0}
-          allowExclusions={true}
+          allowExclusions={allowExclusions}
         >
           {(list, search) => (
             <div style={{ width: 240 }}>
@@ -190,6 +191,13 @@ export function FieldValueSelection({
               )}
               <EuiPopoverFooter paddingSize="s">
                 <EuiButton
+                  aria-label={i18n.translate(
+                    'xpack.observability.fieldValueSelection.apply.label',
+                    {
+                      defaultMessage: 'Apply the selected filters for {label}',
+                      values: { label },
+                    }
+                  )}
                   fill
                   fullWidth
                   size="s"

diff --git a/x-pack/plugins/observability/public/components/shared/field_value_suggestions/index.tsx b/x-pack/plugins/observability/public/components/shared/field_value_suggestions/index.tsx
@@ -29,6 +29,8 @@ export function FieldValueSuggestions({
   compressed,
   asFilterButton,
   allowAllValuesSelection,
+  cardinalityField,
+  allowExclusions,
   asCombobox = true,
   onChange: onSelectionChange,
 }: FieldValueSuggestionsProps) {
@@ -40,6 +42,7 @@ export function FieldValueSuggestions({
     sourceField,
     filters,
     time,
+    cardinalityField,
     keepHistory: true,
   });
 
@@ -65,6 +68,7 @@ export function FieldValueSuggestions({
       compressed={compressed}
       asFilterButton={asFilterButton}
       allowAllValuesSelection={allowAllValuesSelection}
+      allowExclusions={allowExclusions}
     />
   );
 }

diff --git a/x-pack/plugins/observability/public/components/shared/field_value_suggestions/types.ts b/x-pack/plugins/observability/public/components/shared/field_value_suggestions/types.ts
@@ -24,6 +24,9 @@ interface CommonProps {
   asFilterButton?: boolean;
   showCount?: boolean;
   allowAllValuesSelection?: boolean;
+  cardinalityField?: string;
+  required?: boolean;
+  allowExclusions?: boolean;
 }
 
 export type FieldValueSuggestionsProps = CommonProps & {

diff --git a/x-pack/plugins/observability/public/hooks/use_values_list.ts b/x-pack/plugins/observability/public/hooks/use_values_list.ts
@@ -18,6 +18,7 @@ export interface Props {
   filters?: ESFilter[];
   time?: { from: string; to: string };
   keepHistory?: boolean;
+  cardinalityField?: string;
 }
 
 export interface ListItem {
@@ -32,6 +33,7 @@ export const useValuesList = ({
   filters,
   time,
   keepHistory,
+  cardinalityField,
 }: Props): { values: ListItem[]; loading?: boolean } => {
   const [debouncedQuery, setDebounceQuery] = useState<string>(query);
   const [values, setValues] = useState<ListItem[]>([]);
@@ -93,9 +95,20 @@ export const useValuesList = ({
           values: {
             terms: {
               field: sourceField,
-              size: 100,
+              size: 50,
               ...(query ? { include: includeClause } : {}),
             },
+            ...(cardinalityField
+              ? {
+                  aggs: {
+                    count: {
+                      cardinality: {
+                        field: cardinalityField,
+                      },
+                    },
+                  },
+                }
+              : {}),
           },
         },
       },
@@ -105,10 +118,20 @@ export const useValuesList = ({
 
   useEffect(() => {
     const newValues =
-      data?.aggregations?.values.buckets.map(({ key: value, doc_count: count }) => ({
-        count,
-        label: String(value),
-      })) ?? [];
+      data?.aggregations?.values.buckets.map(
+        ({ key: value, doc_count: count, count: aggsCount }) => {
+          if (aggsCount) {
+            return {
+              count: aggsCount.value,
+              label: String(value),
+            };
+          }
+          return {
+            count,
+            label: String(value),
+          };
+        }
+      ) ?? [];
 
     if (keepHistory && query) {
       setValues((prevState) => {

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -26159,10 +26159,6 @@
     "xpack.uptime.filterBar.options.portLabel": "ポート",
     "xpack.uptime.filterBar.options.schemeLabel": "スキーム",
     "xpack.uptime.filterBar.options.tagsLabel": "タグ",
-    "xpack.uptime.filterPopout.loadingMessage": "読み込み中...",
-    "xpack.uptime.filterPopout.searchMessage": "{title} の検索",
-    "xpack.uptime.filterPopout.searchMessage.ariaLabel": "{title} を検索",
-    "xpack.uptime.filterPopover.filterItem.label": "{title} {item}でフィルタリングします。",
     "xpack.uptime.fleetIntegration.assets.description": "アップタイムでモニターを表示",
     "xpack.uptime.fleetIntegration.assets.name": "監視",
     "xpack.uptime.integrationLink.missingDataMessage": "この統合に必要なデータが見つかりませんでした。",
@@ -26313,7 +26309,6 @@
     "xpack.uptime.overview.alerts.enabled.failed": "ルールを有効にできません。",
     "xpack.uptime.overview.alerts.enabled.success": "ルールが正常に有効にされました。 ",
     "xpack.uptime.overview.alerts.enabled.success.description": "この監視が停止しているときには、メッセージが {actionConnectors} に送信されます。",
-    "xpack.uptime.overview.filterButton.label": "{title}フィルターのフィルターグループを展開",
     "xpack.uptime.overview.heading": "監視",
     "xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink": "お知らせを読む",
     "xpack.uptime.overview.pageHeader.syntheticsCallout.content": "アップタイムは、スクリプト化された複数ステップの可用性チェックのサポートをプレビューしています。つまり、単に単一のページのアップ/ダウンのチェックだけではなく、Webページの要素を操作したり、全体的な可用性を確認したりできます（購入やシステムへのサインインなど）。詳細については以下をクリックしてください。これらの機能を先駆けて使用したい場合は、プレビュー合成エージェントをダウンロードし、アップタイムでチェックを表示できます。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -26595,10 +26595,6 @@
     "xpack.uptime.filterBar.options.portLabel": "端口",
     "xpack.uptime.filterBar.options.schemeLabel": "方案",
     "xpack.uptime.filterBar.options.tagsLabel": "标签",
-    "xpack.uptime.filterPopout.loadingMessage": "正在加载……",
-    "xpack.uptime.filterPopout.searchMessage": "搜索 {title}",
-    "xpack.uptime.filterPopout.searchMessage.ariaLabel": "搜索 {title}",
-    "xpack.uptime.filterPopover.filterItem.label": "按 {title} {item} 筛选。",
     "xpack.uptime.fleetIntegration.assets.description": "在 Uptime 中查看监测",
     "xpack.uptime.fleetIntegration.assets.name": "监测",
     "xpack.uptime.integrationLink.missingDataMessage": "未找到此集成的所需数据。",
@@ -26749,7 +26745,6 @@
     "xpack.uptime.overview.alerts.enabled.failed": "无法启用规则！",
     "xpack.uptime.overview.alerts.enabled.success": "已成功启用规则 ",
     "xpack.uptime.overview.alerts.enabled.success.description": "此监测关闭时，将有消息发送到 {actionConnectors}。",
-    "xpack.uptime.overview.filterButton.label": "展开筛选 {title} 的筛选组",
     "xpack.uptime.overview.heading": "监测",
     "xpack.uptime.overview.pageHeader.syntheticsCallout.announcementLink": "阅读公告",
     "xpack.uptime.overview.pageHeader.syntheticsCallout.content": "Uptime 现在正在预览对脚本化多步骤可用性检查的支持。这意味着您可以与网页元素进行交互，并检查整个过程（例如购买或登录系统）的可用性，而不仅仅是简单的单个页面启动/关闭检查。请单击下面的内容以了解详情，如果您想率先使用这些功能，则可以下载我们的预览组合代理，并在 Uptime 中查看组合检查。",

diff --git a/x-pack/plugins/uptime/common/constants/rest_api.ts b/x-pack/plugins/uptime/common/constants/rest_api.ts
@@ -6,7 +6,6 @@
  */
 
 export enum API_URLS {
-  INDEX_PATTERN = `/api/uptime/index_pattern`,
   INDEX_STATUS = '/api/uptime/index_status',
   MONITOR_LIST = `/api/uptime/monitor/list`,
   MONITOR_LOCATIONS = `/api/uptime/monitor/locations`,
@@ -16,7 +15,6 @@ export enum API_URLS {
   PINGS = '/api/uptime/pings',
   PING_HISTOGRAM = `/api/uptime/ping/histogram`,
   SNAPSHOT_COUNT = `/api/uptime/snapshot/count`,
-  FILTERS = `/api/uptime/filters`,
   LOG_PAGE_VIEW = `/api/uptime/log_page_view`,
 
   ML_MODULE_JOBS = `/api/ml/modules/jobs_exist/`,

diff --git a/x-pack/plugins/uptime/common/constants/ui.ts b/x-pack/plugins/uptime/common/constants/ui.ts
@@ -67,3 +67,10 @@ export enum CERT_STATUS {
 }
 
 export const KQL_SYNTAX_LOCAL_STORAGE = 'xpack.uptime.kql.syntax';
+
+export const FILTER_FIELDS = {
+  TAGS: 'tags',
+  PORT: 'url.port',
+  LOCATION: 'observer.geo.name',
+  TYPE: 'monitor.type',
+};
diff --git a/x-pack/plugins/uptime/common/runtime_types/index.ts b/x-pack/plugins/uptime/common/runtime_types/index.ts
@@ -10,7 +10,6 @@ export * from './certs';
 export * from './common';
 export * from './dynamic_settings';
 export * from './monitor';
-export * from './overview_filters';
 export * from './ping';
 export * from './snapshot';
 export * from './network_events';
diff --git a/x-pack/plugins/uptime/common/runtime_types/overview_filters/index.ts b/x-pack/plugins/uptime/common/runtime_types/overview_filters/index.ts
diff --git a/x-pack/plugins/uptime/common/runtime_types/overview_filters/overview_filters.ts b/x-pack/plugins/uptime/common/runtime_types/overview_filters/overview_filters.ts
diff --git a/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts b/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts
@@ -304,6 +304,7 @@ export const GetPingsParamsType = t.intersection([
     dateRange: DateRangeType,
   }),
   t.partial({
+    excludedLocations: t.string,
     index: t.number,
     size: t.number,
     locations: t.string,

diff --git a/x-pack/plugins/uptime/public/apps/uptime_app.tsx b/x-pack/plugins/uptime/public/apps/uptime_app.tsx
@@ -32,6 +32,7 @@ import { kibanaService } from '../state/kibana_service';
 import { ActionMenu } from '../components/common/header/action_menu';
 import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
+import { UptimeIndexPatternContextProvider } from '../contexts/uptime_index_pattern_context';
 
 export interface UptimeAppColors {
   danger: string;
@@ -119,16 +120,20 @@ const Application = (props: UptimeAppProps) => {
                   <UptimeSettingsContextProvider {...props}>
                     <UptimeThemeContextProvider darkMode={darkMode}>
                       <UptimeStartupPluginsContextProvider {...startPlugins}>
-                        <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
-                          <RedirectAppLinks
-                            className={APP_WRAPPER_CLASS}
-                            application={core.application}
-                          >
-                            <UptimeAlertsFlyoutWrapper />
-                            <PageRouter />
-                            <ActionMenu appMountParameters={appMountParameters} />
-                          </RedirectAppLinks>
-                        </div>
+                        <UptimeIndexPatternContextProvider data={startPlugins.data}>
+                          <div className={APP_WRAPPER_CLASS} data-test-subj="uptimeApp">
+                            <RedirectAppLinks
+                              className={APP_WRAPPER_CLASS}
+                              application={core.application}
+                            >
+                              <main>
+                                <UptimeAlertsFlyoutWrapper />
+                                <PageRouter />
+                                <ActionMenu appMountParameters={appMountParameters} />
+                              </main>
+                            </RedirectAppLinks>
+                          </div>
+                        </UptimeIndexPatternContextProvider>
                       </UptimeStartupPluginsContextProvider>
                     </UptimeThemeContextProvider>
                   </UptimeSettingsContextProvider>

diff --git a/x-pack/plugins/uptime/public/components/common/monitor_tags.tsx b/x-pack/plugins/uptime/public/components/common/monitor_tags.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { EuiBadge, EuiBadgeGroup, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useHistory } from 'react-router-dom';
@@ -69,9 +69,14 @@ export const MonitorTags = ({ ping, summary }: Props) => {
 
   const currFilters = parseCurrentFilters(params.filters);
 
-  const [filterType, setFilterType] = useState<string[]>(currFilters.get('tags') ?? []);
+  const [tagFilters, setTagFilters] = useState<string[]>(currFilters.get('tags') ?? []);
 
-  useFilterUpdate('tags', filterType);
+  const excludedTagFilters = useMemo(() => {
+    const currExcludedFilters = parseCurrentFilters(params.excludedFilters);
+    return currExcludedFilters.get('tags') ?? [];
+  }, [params.excludedFilters]);
+
+  useFilterUpdate('tags', tagFilters, excludedTagFilters);
 
   if (tags.length === 0) {
     return summary ? null : (
@@ -93,7 +98,7 @@ export const MonitorTags = ({ ping, summary }: Props) => {
             key={tag}
             title={getFilterLabel(tag)}
             onClick={() => {
-              setFilterType([tag]);
+              setTagFilters([tag]);
             }}
             onClickAriaLabel={getFilterLabel(tag)}
             color="hollow"

diff --git a/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx b/x-pack/plugins/uptime/public/components/common/uptime_date_picker.test.tsx
@@ -56,7 +56,7 @@ describe('UptimeDatePicker component', () => {
 
     expect(customHistory.push).toHaveBeenCalledWith({
       pathname: '/',
-      search: 'dateRangeStart=now-30m&dateRangeEnd=now-15m',
+      search: 'dateRangeEnd=now-15m&dateRangeStart=now-30m',
     });
   });
 

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_header.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list_header.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { StatusFilter } from '../../overview/monitor_list/status_filter';
-import { FilterGroup } from '../../overview/filter_group';
+import { FilterGroup } from '../../overview/filter_group/filter_group';
 
 export const PingListHeader = () => {
   return (
@@ -27,7 +27,7 @@ export const PingListHeader = () => {
       <EuiFlexItem grow={false}>
         <StatusFilter />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} style={{ maxWidth: '135px' }}>
         <FilterGroup />
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/use_pings.ts b/x-pack/plugins/uptime/public/components/monitor/ping_list/use_pings.ts
@@ -35,7 +35,7 @@ export const usePingsList = ({ pageSize, pageIndex }: Props) => {
 
   const { statusFilter } = useGetUrlParams();
 
-  const { selectedLocations } = useSelectedFilters();
+  const selectedFilters = useSelectedFilters();
 
   const dispatch = useDispatch();
 
@@ -45,14 +45,18 @@ export const usePingsList = ({ pageSize, pageIndex }: Props) => {
     dispatch,
   ]);
 
+  const locations = JSON.stringify(selectedFilters.selectedLocations);
+  const excludedLocations = JSON.stringify(selectedFilters.excludedLocations);
+
   useEffect(() => {
     getPings({
       monitorId,
       dateRange: {
         from,
         to,
       },
-      locations: JSON.stringify(selectedLocations),
+      excludedLocations,
+      locations,
       index: pageIndex,
       size: pageSize,
       status: statusFilter !== 'all' ? statusFilter : '',
@@ -66,7 +70,8 @@ export const usePingsList = ({ pageSize, pageIndex }: Props) => {
     pageIndex,
     pageSize,
     statusFilter,
-    selectedLocations,
+    locations,
+    excludedLocations,
   ]);
 
   const { data } = useFetcher(() => {