Separate default filters and extra filters

dashboards-observability/public/components/application_analytics/components/application.tsx

@@ -112,9 +112,10 @@ export function Application(props: AppDetailProps) {
     endTime,
     query,
     filters,
+    appConfigs,
+    setAppConfigs,
     setStartTimeWithStorage,
     setEndTimeWithStorage,
-    setFilters,
     setToasts,
   } = props;
   const [application, setApplication] = useState<ApplicationType>({
@@ -158,7 +159,7 @@ export function Application(props: AppDetailProps) {
   };
 
   useEffect(() => {
-    fetchAppById(http, appId, setApplication, setFilters, setToasts);
+    fetchAppById(http, appId, setApplication, setAppConfigs, setToasts);
   }, [appId]);
 
   useEffect(() => {
@@ -178,9 +179,9 @@ export function Application(props: AppDetailProps) {
   }, [appId, application.name]);
 
   useEffect(() => {
-    const DSL = filtersToDsl(filters, query, startTime, endTime, 'app');
+    const DSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
     setSpanDSL(DSL);
-  }, [filters, query, startTime, endTime]);
+  }, [filters, appConfigs, query, startTime, endTime]);
 
   const openServiceFlyout = (serviceName: string) => {
     setSpanFlyoutId('');

dashboards-observability/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx

@@ -40,6 +40,7 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
     startTime,
     endTime,
     filters,
+    appConfigs,
     query,
     closeServiceFlyout,
     openSpanFlyout,
@@ -114,10 +115,10 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
   }, [serviceName, fields, serviceMap, DSL]);
 
   useEffect(() => {
-    const serviceDSL = filtersToDsl(filters, query, startTime, endTime, 'app');
+    const serviceDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
     handleServiceViewRequest(serviceName, http, serviceDSL, fields, setFields);
     handleServiceMapRequest(http, serviceDSL, serviceMap, setServiceMap, serviceName);
-    const spanDSL = filtersToDsl(filters, query, startTime, endTime, 'app');
+    const spanDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
     spanDSL.query.bool.must.push({
       term: {
         serviceName,

dashboards-observability/public/components/application_analytics/home.tsx

@@ -47,6 +47,7 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
   setDescriptionWithStorage: (newDescription: string) => void;
   setQueryWithStorage: (newQuery: string) => void;
   setFiltersWithStorage: (newFilters: FilterType[]) => void;
+  setAppConfigs: (newAppConfigs: FilterType[]) => void;
   setStartTimeWithStorage: (newStartTime: string, itemName?: string) => void;
   setEndTimeWithStorage: (newEndTime: string, itemName?: string) => void;
 }
@@ -65,6 +66,7 @@ export const Home = (props: HomeProps) => {
   const [applicationList, setApplicationList] = useState<ApplicationListType[]>([]);
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [indicesExist, setIndicesExist] = useState(true);
+  const [appConfigs, setAppConfigs] = useState<FilterType[]>([]);
   const storedFilters = sessionStorage.getItem('AppAnalyticsFilters');
   const [filters, setFilters] = useState<FilterType[]>(
     storedFilters ? JSON.parse(storedFilters) : []
@@ -125,6 +127,8 @@ export const Home = (props: HomeProps) => {
     query,
     setQuery,
     setQueryWithStorage,
+    appConfigs,
+    setAppConfigs,
     filters,
     setFilters,
     setFiltersWithStorage,
@@ -221,13 +225,12 @@ export const Home = (props: HomeProps) => {
 
   // Rename an existing application
   const renameApp = (newAppName: string, appId: string) => {
-    if (
-      !isNameValid(
-        newAppName,
-        applicationList.map((obj) => obj.name)
-      )
-    ) {
-      setToast('Invalid Application name', 'danger');
+    const toast = isNameValid(
+      newAppName,
+      applicationList.map((obj) => obj.name)
+    );
+    if (toast.length > 0) {
+      setToast(toast.join(', '), 'danger');
       return;
     }
 

dashboards-observability/public/components/explorer/explorer.tsx

@@ -117,7 +117,7 @@ export const Explorer = ({
   const [isOverridingTimestamp, setIsOverridingTimestamp] = useState(false);
   const [tempQuery, setTempQuery] = useState(query[RAW_QUERY]);
 
-  const fromAppAnalytics = tabId === 'application-analytics-tab';
+  const appLogEvents = tabId === 'application-analytics-tab';
 
   const queryRef = useRef();
   const selectedPanelNameRef = useRef('');
@@ -359,7 +359,7 @@ export const Explorer = ({
     toggleFields(field, SELECTED_FIELDS, AVAILABLE_FIELDS);
 
   const handleTimePickerChange = async (timeRange: string[]) => {
-    if (fromAppAnalytics) {
+    if (appLogEvents) {
       setStartTime(timeRange[0]);
       setEndTime(timeRange[1]);
     } else {
@@ -842,7 +842,7 @@ export const Explorer = ({
                 })
               );
             });
-            if (fromAppAnalytics) {
+            if (appLogEvents) {
               addVisualizationToPanel(res.objectId, selectedPanelNameRef.current);
             } else {
               history.replace(`/event_analytics/explorer/${res.objectId}`);
@@ -892,7 +892,7 @@ export const Explorer = ({
     <div className="dscAppContainer">
       <Search
         key="search-component"
-        query={fromAppAnalytics ? appBaseQuery : query[RAW_QUERY]}
+        query={appLogEvents ? appBaseQuery : query[RAW_QUERY]}
         tempQuery={tempQuery}
         handleQueryChange={handleQueryChange}
         handleQuerySearch={handleQuerySearch}
@@ -911,7 +911,7 @@ export const Explorer = ({
         handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
         selectedSubTabId={selectedContentTabId}
         searchBarConfigs={searchBarConfigs}
-        getSuggestions={fromAppAnalytics ? getSuggestionsAfterSource : getFullSuggestions}
+        getSuggestions={appLogEvents ? getSuggestionsAfterSource : getFullSuggestions}
         onItemSelect={onItemSelect}
         tabId={tabId}
         baseQuery={appBaseQuery}

dashboards-observability/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap

@@ -382,6 +382,7 @@ exports[`Search bar components renders date picker 1`] = `
 
 exports[`Search bar components renders search bar 1`] = `
 <SearchBar
+  appConfigs={Array []}
   endTime="now"
   filters={Array []}
   page="dashboard"
@@ -980,6 +981,7 @@ exports[`Search bar components renders search bar 1`] = `
     />
   </EuiSpacer>
   <Filters
+    appConfigs={Array []}
     filters={Array []}
     page="dashboard"
     setFilters={[MockFunction]}

dashboards-observability/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx

@@ -39,6 +39,7 @@ describe('Search bar components', () => {
         setEndTime={setEndTime}
         filters={[]}
         setFilters={setFilters}
+        appConfigs={[]}
       />
     );
     expect(wrapper).toMatchSnapshot();

dashboards-observability/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Filter component renders filters 1`] = `
 <Filters
+  appConfigs={Array []}
   filters={Array []}
   page="dashboard"
   setFilters={[MockFunction]}

dashboards-observability/public/components/trace_analytics/components/common/filters/__tests__/filters.test.tsx

@@ -14,7 +14,9 @@ describe('Filter component', () => {
 
   it('renders filters', () => {
     const setFilters = jest.fn();
-    const wrapper = mount(<Filters page="dashboard" filters={[]} setFilters={setFilters} />);
+    const wrapper = mount(
+      <Filters page="dashboard" filters={[]} setFilters={setFilters} appConfigs={[]} />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 });

dashboards-observability/public/components/trace_analytics/components/common/filters/filters.tsx

@@ -16,7 +16,7 @@ import {
   EuiPopoverTitle,
   EuiTextColor,
 } from '@elastic/eui';
-import React, { Dispatch, SetStateAction, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { FilterEditPopover } from './filter_edit_popover';
 import { getFilterFields, getValidFilterFields } from './filter_helpers';
 
@@ -32,6 +32,7 @@ export interface FilterType {
 
 export interface FiltersProps {
   filters: FilterType[];
+  appConfigs: FilterType[];
   setFilters: (filters: FilterType[]) => void;
 }
 

dashboards-observability/public/components/trace_analytics/components/common/helper_functions.tsx

@@ -287,6 +287,7 @@ export const filtersToDsl = (
   startTime: string,
   endTime: string,
   page?: string,
+  appConfigs: FilterType[] = []
 ) => {
   const DSL: any = {
     query: {
@@ -395,13 +396,24 @@ export const filtersToDsl = (
         default:
           break;
       }
-      if (page === 'app') {
-        DSL.query.bool.minimum_should_match = 1;
-        DSL.query.bool.should.push(filterQuery);
-      } else {
-        DSL.query.bool[filter.inverted ? 'must_not' : 'must'].push(filterQuery);
-      }
+      DSL.query.bool[filter.inverted ? 'must_not' : 'must'].push(filterQuery);
+    });
+
+  if (page === 'app') {
+    DSL.query.bool.minimum_should_match = 1;
+    appConfigs.forEach((config) => {
+      let appQuery = {};
+      const appField = config.field;
+      const appValue = config.value;
+      appQuery = {
+        term: {
+          [appField]: appValue,
+        },
+      };
+      DSL.query.bool.minimum_should_match = 1;
+      DSL.query.bool.should.push(appQuery);
     });
+  }
 
   return DSL;
 };

dashboards-observability/public/components/trace_analytics/components/common/search_bar.tsx

@@ -11,9 +11,9 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
 } from '@elastic/eui';
-import { uiSettingsService } from '../../../../../common/utils';
 import _ from 'lodash';
 import React, { useState } from 'react';
+import { uiSettingsService } from '../../../../../common/utils';
 import { Filters, FiltersProps } from './filters/filters';
 
 export const renderDatePicker = (
@@ -93,7 +93,12 @@ export function SearchBar(props: SearchBarOwnProps) {
       {!props.datepickerOnly && (
         <>
           <EuiSpacer size="s" />
-          <Filters page={props.page} filters={props.filters} setFilters={props.setFilters} />
+          <Filters
+            page={props.page}
+            filters={props.filters}
+            setFilters={props.setFilters}
+            appConfigs={props.appConfigs}
+          />
         </>
       )}
     </>

dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Dashboard component renders dashboard 1`] = `
 <Dashboard
+  appConfigs={Array []}
   chrome={
     Object {
       "getIsNavDrawerLocked$": [MockFunction],
@@ -80,6 +81,7 @@ exports[`Dashboard component renders dashboard 1`] = `
     </h2>
   </EuiTitle>
   <SearchBar
+    appConfigs={Array []}
     endTime="now"
     filters={Array []}
     page="dashboard"
@@ -700,6 +702,7 @@ exports[`Dashboard component renders dashboard 1`] = `
       />
     </EuiSpacer>
     <Filters
+      appConfigs={Array []}
       filters={Array []}
       page="dashboard"
       setFilters={
@@ -1989,6 +1992,7 @@ exports[`Dashboard component renders dashboard 1`] = `
 
 exports[`Dashboard component renders empty dashboard 1`] = `
 <Dashboard
+  appConfigs={Array []}
   chrome={
     Object {
       "getIsNavDrawerLocked$": [MockFunction],
@@ -2067,6 +2071,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
     </h2>
   </EuiTitle>
   <SearchBar
+    appConfigs={Array []}
     endTime="now"
     filters={Array []}
     page="dashboard"
@@ -2669,6 +2674,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       />
     </EuiSpacer>
     <Filters
+      appConfigs={Array []}
       filters={Array []}
       page="dashboard"
       setFilters={

dashboards-observability/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx

@@ -30,6 +30,7 @@ describe('Dashboard component', () => {
         query=""
         setQuery={setQuery}
         filters={[]}
+        appConfigs={[]}
         setFilters={setFilters}
         startTime="now-5m"
         setStartTime={setStartTime}
@@ -57,6 +58,7 @@ describe('Dashboard component', () => {
         query=""
         setQuery={setQuery}
         filters={[]}
+        appConfigs={[]}
         setFilters={setFilters}
         startTime="now-5m"
         setStartTime={setStartTime}

dashboards-observability/public/components/trace_analytics/components/dashboard/dashboard.tsx

@@ -84,18 +84,25 @@ export function Dashboard(props: DashboardProps) {
 
   useEffect(() => {
     if (!redirect && props.indicesExist) refresh();
-  }, [props.filters, props.startTime, props.endTime]);
+  }, [props.filters, props.startTime, props.endTime, props.appConfigs]);
 
   const refresh = async () => {
     setLoading(true);
-    const DSL = filtersToDsl(props.filters, props.query, props.startTime, props.endTime, page);
+    const DSL = filtersToDsl(
+      props.filters,
+      props.query,
+      props.startTime,
+      props.endTime,
+      page,
+      appOverview ? props.appConfigs : []
+    );
     const timeFilterDSL = filtersToDsl([], '', props.startTime, props.endTime, page);
     const latencyTrendStartTime = dateMath
       .parse(props.endTime)
       ?.subtract(24, 'hours')
       .toISOString()!;
     const latencyTrendDSL = filtersToDsl(
-      props.filters,
+      appOverview ? props.appConfigs : props.filters,
       props.query,
       latencyTrendStartTime,
       props.endTime,
@@ -193,6 +200,7 @@ export function Dashboard(props: DashboardProps) {
       <SearchBar
         query={appOverview ? '' : props.query}
         filters={props.filters}
+        appConfigs={props.appConfigs}
         setFilters={props.setFilters}
         setQuery={props.setQuery}
         startTime={props.startTime}