Remove UI filters from UI (#89793) (#90321)

elastic · Feb 4, 2021 · 4e94a58 · 4e94a58
1 parent 21c7eca
commit 4e94a58
Show file tree

Hide file tree

Showing 79 changed files with 350 additions and 669 deletions.
diff --git a/x-pack/plugins/apm/common/projections.ts b/x-pack/plugins/apm/common/projections.ts
diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -16,7 +16,7 @@ import { useTraceOverviewHref } from '../../shared/Links/apm/TraceOverviewLink';
 import { MainTabs } from '../../shared/main_tabs';
 import { ServiceMap } from '../ServiceMap';
 import { ServiceInventory } from '../service_inventory';
-import { TraceOverview } from '../TraceOverview';
+import { TraceOverview } from '../trace_overview';
 
 interface Tab {
   key: string;

diff --git a/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx b/x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx
@@ -23,7 +23,7 @@ import { AnomalyDetection } from '../../Settings/anomaly_detection';
 import { ApmIndices } from '../../Settings/ApmIndices';
 import { CustomizeUI } from '../../Settings/CustomizeUI';
 import { TraceLink } from '../../TraceLink';
-import { TransactionDetails } from '../../TransactionDetails';
+import { TransactionDetails } from '../../transaction_details';
 import {
   CreateAgentConfigurationRouteHandler,
   EditAgentConfigurationRouteHandler,

diff --git a/...LocalUIFilters/Filter/FilterBadgeList.tsx → ...LocalUIFilters/Filter/FilterBadgeList.tsx b/...LocalUIFilters/Filter/FilterBadgeList.tsx → ...LocalUIFilters/Filter/FilterBadgeList.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '@elastic/eui';
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
-import { unit, px, truncate } from '../../../../style/variables';
+import { unit, px, truncate } from '../../../../../style/variables';
 
 const BadgeText = styled.div`
   display: inline-block;

diff --git a/...calUIFilters/Filter/FilterTitleButton.tsx → ...calUIFilters/Filter/FilterTitleButton.tsx b/...calUIFilters/Filter/FilterTitleButton.tsx → ...calUIFilters/Filter/FilterTitleButton.tsx
diff --git a/...ts/shared/LocalUIFilters/Filter/index.tsx → ...Dashboard/LocalUIFilters/Filter/index.tsx b/...ts/shared/LocalUIFilters/Filter/index.tsx → ...Dashboard/LocalUIFilters/Filter/index.tsx
@@ -21,7 +21,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { FilterBadgeList } from './FilterBadgeList';
-import { unit, px } from '../../../../style/variables';
+import { unit, px } from '../../../../../style/variables';
 import { FilterTitleButton } from './FilterTitleButton';
 
 const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(

diff --git a/...omponents/shared/LocalUIFilters/index.tsx → ...app/RumDashboard/LocalUIFilters/index.tsx b/...omponents/shared/LocalUIFilters/index.tsx → ...app/RumDashboard/LocalUIFilters/index.tsx
@@ -15,12 +15,10 @@ import {
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 import { Filter } from './Filter';
-import { useLocalUIFilters } from '../../../hooks/useLocalUIFilters';
-import { Projection } from '../../../../common/projections';
-import { LocalUIFilterName } from '../../../../common/ui_filter';
+import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
+import { LocalUIFilterName } from '../../../../../common/ui_filter';
 
 interface Props {
-  projection: Projection;
   filterNames: LocalUIFilterName[];
   params?: Record<string, string | number | boolean | undefined>;
   showCount?: boolean;
@@ -33,7 +31,6 @@ const ButtonWrapper = styled.div`
 `;
 
 function LocalUIFilters({
-  projection,
   params,
   filterNames,
   children,
@@ -42,7 +39,6 @@ function LocalUIFilters({
 }: Props) {
   const { filters, setFilterValue, clearValues } = useLocalUIFilters({
     filterNames,
-    projection,
     params,
     shouldFetch,
   });

diff --git a/...ins/apm/public/hooks/useLocalUIFilters.ts → ...p/RumDashboard/hooks/useLocalUIFilters.ts b/...ins/apm/public/hooks/useLocalUIFilters.ts → ...p/RumDashboard/hooks/useLocalUIFilters.ts
@@ -7,19 +7,21 @@
 
 import { omit } from 'lodash';
 import { useHistory } from 'react-router-dom';
-import { Projection } from '../../common/projections';
-import { pickKeys } from '../../common/utils/pick_keys';
+import { LocalUIFilterName } from '../../../../../common/ui_filter';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { LocalUIFiltersAPIResponse } from '../../server/lib/ui_filters/local_ui_filters';
+import { LocalUIFiltersAPIResponse } from '../../../../../server/lib/ui_filters/local_ui_filters';
 import {
   localUIFilters,
   // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-} from '../../server/lib/ui_filters/local_ui_filters/config';
-import { fromQuery, toQuery } from '../components/shared/Links/url_helpers';
-import { removeUndefinedProps } from '../context/url_params_context/helpers';
-import { useFetcher } from './use_fetcher';
-import { useUrlParams } from '../context/url_params_context/use_url_params';
-import { LocalUIFilterName } from '../../common/ui_filter';
+} from '../../../../../server/lib/ui_filters/local_ui_filters/config';
+import {
+  fromQuery,
+  toQuery,
+} from '../../../../components/shared/Links/url_helpers';
+import { removeUndefinedProps } from '../../../../context/url_params_context/helpers';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { useFetcher } from '../../../../hooks/use_fetcher';
 
 const getInitialData = (
   filterNames: LocalUIFilterName[]
@@ -31,12 +33,10 @@ const getInitialData = (
 };
 
 export function useLocalUIFilters({
-  projection,
   filterNames,
   params,
   shouldFetch,
 }: {
-  projection: Projection;
   filterNames: LocalUIFilterName[];
   params?: Record<string, string | number | boolean | undefined>;
   shouldFetch: boolean;
@@ -72,7 +72,7 @@ export function useLocalUIFilters({
     (callApmApi) => {
       if (shouldFetch && urlParams.start && urlParams.end) {
         return callApmApi({
-          endpoint: `GET /api/apm/ui_filters/local_filters/${projection}` as const,
+          endpoint: `GET /api/apm/ui_filters/local_filters/rumOverview`,
           params: {
             query: {
               uiFilters: JSON.stringify(uiFilters),
@@ -87,7 +87,6 @@ export function useLocalUIFilters({
       }
     },
     [
-      projection,
       uiFilters,
       urlParams.start,
       urlParams.end,

diff --git a/...ck/plugins/apm/public/hooks/useCallApi.ts → ...ts/app/RumDashboard/hooks/use_call_api.ts b/...ck/plugins/apm/public/hooks/useCallApi.ts → ...ts/app/RumDashboard/hooks/use_call_api.ts
@@ -6,9 +6,9 @@
  */
 
 import { useMemo } from 'react';
-import { callApi } from '../services/rest/callApi';
-import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
-import { FetchOptions } from '../../common/fetch_options';
+import { callApi } from '../../../../services/rest/callApi';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { FetchOptions } from '../../../../../common/fetch_options';
 
 export function useCallApi() {
   const { http } = useApmPluginContext().core;

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/index.tsx
@@ -5,13 +5,11 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import React, { useMemo } from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
+import { LocalUIFilters } from './LocalUIFilters';
 import { RumDashboard } from './RumDashboard';
-
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { URLFilter } from './URLFilter';
 
 export function RumOverview() {
@@ -21,7 +19,6 @@ export function RumOverview() {
   const localUIFiltersConfig = useMemo(() => {
     const config: React.ComponentProps<typeof LocalUIFilters> = {
       filterNames: ['location', 'device', 'os', 'browser'],
-      projection: Projection.rumOverview,
     };
 
     return config;

diff --git a/...app/ErrorGroupOverview/List/List.test.tsx → ...p/error_group_overview/List/List.test.tsx b/...app/ErrorGroupOverview/List/List.test.tsx → ...p/error_group_overview/List/List.test.tsx
diff --git a/...roupOverview/List/__fixtures__/props.json → ...oup_overview/List/__fixtures__/props.json b/...roupOverview/List/__fixtures__/props.json → ...oup_overview/List/__fixtures__/props.json
diff --git a/...iew/List/__snapshots__/List.test.tsx.snap → ...iew/List/__snapshots__/List.test.tsx.snap b/...iew/List/__snapshots__/List.test.tsx.snap → ...iew/List/__snapshots__/List.test.tsx.snap
diff --git a/...nts/app/ErrorGroupOverview/List/index.tsx → ...s/app/error_group_overview/List/index.tsx b/...nts/app/ErrorGroupOverview/List/index.tsx → ...s/app/error_group_overview/List/index.tsx
diff --git a/...mponents/app/ErrorGroupOverview/index.tsx → ...onents/app/error_group_overview/index.tsx b/...mponents/app/ErrorGroupOverview/index.tsx → ...onents/app/error_group_overview/index.tsx
@@ -7,29 +7,26 @@
 
 import {
   EuiFlexGroup,
-  EuiFlexItem,
   EuiPage,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
-import { useFetcher } from '../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
+import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
+import { useFetcher } from '../../../hooks/use_fetcher';
 import { SearchBar } from '../../shared/search_bar';
 import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
 import { ErrorGroupList } from './List';
-import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 
 interface ErrorGroupOverviewProps {
   serviceName: string;
 }
 
-function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
+export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   const { urlParams, uiFilters } = useUrlParams();
   const { start, end, sortField, sortDirection } = urlParams;
   const { errorDistributionData } = useErrorGroupDistributionFetcher({
@@ -68,18 +65,6 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   });
   useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 });
 
-  const localUIFiltersConfig = useMemo(() => {
-    const config: React.ComponentProps<typeof LocalUIFilters> = {
-      filterNames: ['host', 'containerId', 'podName', 'serviceVersion'],
-      params: {
-        serviceName,
-      },
-      projection: Projection.errorGroups,
-    };
-
-    return config;
-  }, [serviceName]);
-
   if (!errorDistributionData || !errorGroupListData) {
     return null;
   }
@@ -88,41 +73,34 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
     <>
       <SearchBar />
       <EuiPage>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={1}>
-            <LocalUIFilters {...localUIFiltersConfig} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={7}>
-            <EuiPanel>
-              <ErrorDistribution
-                distribution={errorDistributionData}
-                title={i18n.translate(
-                  'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
-                  {
-                    defaultMessage: 'Error occurrences',
-                  }
-                )}
-              />
-            </EuiPanel>
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiPanel>
+            <ErrorDistribution
+              distribution={errorDistributionData}
+              title={i18n.translate(
+                'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
+                {
+                  defaultMessage: 'Error occurrences',
+                }
+              )}
+            />
+          </EuiPanel>
 
-            <EuiSpacer size="s" />
+          <EuiSpacer size="s" />
 
-            <EuiPanel>
-              <EuiTitle size="xs">
-                <h3>Errors</h3>
-              </EuiTitle>
-              <EuiSpacer size="s" />
+          <EuiPanel>
+            <EuiTitle size="xs">
+              <h3>Errors</h3>
+            </EuiTitle>
+            <EuiSpacer size="s" />
 
-              <ErrorGroupList
-                items={errorGroupListData}
-                serviceName={serviceName}
-              />
-            </EuiPanel>
-          </EuiFlexItem>
+            <ErrorGroupList
+              items={errorGroupListData}
+              serviceName={serviceName}
+            />
+          </EuiPanel>
         </EuiFlexGroup>
       </EuiPage>
     </>
   );
 }
-
-export { ErrorGroupOverview };
diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -20,9 +20,9 @@ import { useServiceNodeOverviewHref } from '../../shared/Links/apm/ServiceNodeOv
 import { useServiceOverviewHref } from '../../shared/Links/apm/service_overview_link';
 import { useTransactionsOverviewHref } from '../../shared/Links/apm/transaction_overview_link';
 import { MainTabs } from '../../shared/main_tabs';
-import { ErrorGroupOverview } from '../ErrorGroupOverview';
+import { ErrorGroupOverview } from '../error_group_overview';
 import { ServiceMap } from '../ServiceMap';
-import { ServiceNodeOverview } from '../ServiceNodeOverview';
+import { ServiceNodeOverview } from '../service_node_overview';
 import { ServiceMetrics } from '../service_metrics';
 import { ServiceOverview } from '../service_overview';
 import { TransactionOverview } from '../transaction_overview';