Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/search bar flint #3

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -25,25 +25,22 @@
import React, { ReactChild, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { last } from 'lodash';
import { VisualizationType } from 'common/types/custom_panels';
import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
import { ServicesContent } from '../../trace_analytics/components/services/services_content';
import {
filtersToDsl,
PanelTitle,
} from '../../../../public/components/trace_analytics/components/common/helper_functions';
import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
import { Explorer } from '../../event_analytics/explorer/explorer';
import { LegacyExplorer } from '../../event_analytics/explorer/legacy_explorer';
import { Configuration } from './configuration';
import {
TAB_CONFIG_ID,
TAB_CONFIG_TITLE,
TAB_LOG_ID,
TAB_LOG_TITLE,
TAB_OVERVIEW_ID,
TAB_OVERVIEW_TITLE,
TAB_PANEL_ID,
TAB_PANEL_TITLE,
TAB_SERVICE_ID,
@@ -66,7 +63,6 @@
import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
import { fetchAppById, initializeTabData } from '../helpers/utils';
import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
import { observabilityApplicationsID } from '../../../../common/constants/shared';

const searchBarConfigs = {
[TAB_EVENT_ID]: {
@@ -111,7 +107,7 @@
updateApp,
setAppConfigs,
setToasts,
toasts,

Check failure on line 110 in public/components/application_analytics/components/application.tsx

GitHub Actions / Lint

'toasts' is assigned a value but never used. Allowed unused vars must match /^_/u
setFilters,
callback,
queryManager,
@@ -136,7 +132,7 @@
const [serviceFlyoutName, setServiceFlyoutName] = useState<string>('');
const [traceFlyoutId, setTraceFlyoutId] = useState<string>('');
const [spanFlyoutId, setSpanFlyoutId] = useState<string>('');
const [spanDSL, setSpanDSL] = useState<any>({});

Check warning on line 135 in public/components/application_analytics/components/application.tsx

GitHub Actions / Lint

Unexpected any. Specify a different type
const [totalSpans, setTotalSpans] = useState<number>(0);
const [editVizId, setEditVizId] = useState<string>('');
const [visWithAvailability, setVisWithAvailability] = useState<EuiSelectOption[]>([]);
@@ -159,7 +155,7 @@
sessionStorage.setItem(`${application.name}EndTime`, newEndTime);
};

const addSpanFilter = (field: string, value: any) => {

Check warning on line 158 in public/components/application_analytics/components/application.tsx

GitHub Actions / Lint

Unexpected any. Specify a different type
const newFilters = [...filters];
const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
if (index === -1) {
@@ -285,7 +281,7 @@
},
];

const nameColumnAction = (item: any) => openServiceFlyout(item);

Check warning on line 284 in public/components/application_analytics/components/application.tsx

GitHub Actions / Lint

Unexpected any. Specify a different type
const traceColumnAction = () => switchToTrace();

const getService = () => {
@@ -312,7 +308,7 @@
setSelectedTab(TAB_TRACE_ID);
};

const traceIdColumnAction = (item: any) => openTraceFlyout(item);

Check warning on line 311 in public/components/application_analytics/components/application.tsx

GitHub Actions / Lint

Unexpected any. Specify a different type

const getTrace = () => {
return (
@@ -348,7 +344,7 @@

const getLog = () => {
return (
<Explorer
<LegacyExplorer
key={`explorer_application-analytics-tab`}
pplService={pplService}
dslService={dslService}
559 changes: 559 additions & 0 deletions public/components/common/search/search_bar.tsx

Large diffs are not rendered by default.

70 changes: 70 additions & 0 deletions public/components/event_analytics/explorer/context/context.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { useContext, createContext, createElement } from 'react';
import { createNotifications } from '../../../../../../../src/plugins/opensearch_dashboards_react/public';
import {
DashboardsObservabilityContext,
OpenSearchDashboardsServices,
ObservabilityDashboardsReactContextValue,
DashboardsObservabilityServices,
} from './types';
import { useMemo } from 'react';

Check failure on line 14 in public/components/event_analytics/explorer/context/context.tsx

GitHub Actions / Lint

`react` import should occur before import of `../../../../../../../src/plugins/opensearch_dashboards_react/public`
import React from 'react';

Check failure on line 15 in public/components/event_analytics/explorer/context/context.tsx

GitHub Actions / Lint

`react` import should occur before import of `../../../../../../../src/plugins/opensearch_dashboards_react/public`

const defaultObservabilityContextValue = {
services: {} as DashboardsObservabilityServices,
notifications: createNotifications({}),
};

export const observabilityContext = createContext<
ObservabilityDashboardsReactContextValue<DashboardsObservabilityServices>
>(defaultObservabilityContextValue);

export const useDashboardsObservability = (): ObservabilityDashboardsReactContextValue<
DashboardsObservabilityServices
> => useContext(observabilityContext);

export const createDashboardsObservabilityContext = <Services extends OpenSearchDashboardsServices>(
services: Services
): DashboardsObservabilityContext<Services> => {
// common context
const value = {
services,
notifications: createNotifications(services),
};

const Provider: React.FC<{ services?: Services; children: React.ReactDOM }> = ({
services: additionalServices = {},
children,
}) => {
const oldValue = useDashboardsObservability();
const { value: mergedValue } = useMemo(
() =>
createDashboardsObservabilityContext({
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Services is a generic type that extends OpenSearchDashboardsServices, how does it ensure that Observability specific services like pplService are passed in?

...services,
...oldValue.services,
...additionalServices,
}),
[services, oldValue, additionalServices]

Check warning on line 51 in public/components/event_analytics/explorer/context/context.tsx

GitHub Actions / Lint

React Hook useMemo has an unnecessary dependency: 'services'. Either exclude it or remove the dependency array. Outer scope values like 'services' aren't valid dependencies because mutating them doesn't re-render the component
);
return createElement(observabilityContext.Provider as React.ComponentType<any>, {

Check warning on line 53 in public/components/event_analytics/explorer/context/context.tsx

GitHub Actions / Lint

Unexpected any. Specify a different type
value: mergedValue,
children,
});
};

return {
value,
Provider,
Consumer: (observabilityContext.Consumer as unknown) as React.Consumer<
ObservabilityDashboardsReactContextValue<Services>
>,
};
};

export const {
Provider: DashboardsObservabilityContextProvider,
} = createDashboardsObservabilityContext({});
31 changes: 31 additions & 0 deletions public/components/event_analytics/explorer/context/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { CoreStart } from '../../../../../../../src/core/public';
import { OpenSearchDashboardsReactNotifications } from '../../../../../../../src/plugins/opensearch_dashboards_react/public';
import PPLService from '../../../../services/requests/ppl';
import DSLService from '../../../../services/requests/dsl';
import { QueryManager } from '../../../../../common/query_manager';

export type OpenSearchDashboardsServices = Partial<CoreStart>;
export type DashboardsObservabilityServices = OpenSearchDashboardsServices & {
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DashboardsObservabilityServices should contain CoreStart. would any services in core start be optional since it is defined as Partial<CoreStart>?

pplService: PPLService;
dslService: DSLService;
queryManager: QueryManager;
};

export interface ObservabilityDashboardsReactContextValue<
Services extends OpenSearchDashboardsServices
> {
Comment on lines +20 to +22
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why a separate generic Service instead of using DashboardsObservabilityServices defined above?

readonly services: Services;
readonly notifications: OpenSearchDashboardsReactNotifications;
}

export interface DashboardsObservabilityContext<T extends OpenSearchDashboardsServices> {
value: ObservabilityDashboardsReactContextValue<T>;
Provider: React.FC<{ services?: T; children: React.ReactDOM }>;
Consumer: React.Consumer<ObservabilityDashboardsReactContextValue<T>>;
}
2 changes: 1 addition & 1 deletion public/components/event_analytics/explorer/explorer.tsx
Original file line number Diff line number Diff line change
@@ -98,7 +98,7 @@ import { findMinInterval } from '../../common/query_utils';
import { onItemSelect, parseGetSuggestions } from '../../common/search/autocomplete_logic';
import { Search } from '../../common/search/search';
import { processMetricsData } from '../../custom_panels/helpers/utils';
import { selectSearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
import { selectSearchMetaData } from '../redux/slices/search_meta_data_slice';
import { getVizContainerProps } from '../../visualizations/charts/helpers';
import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
import {
1,033 changes: 1,033 additions & 0 deletions public/components/event_analytics/explorer/legacy_explorer.tsx

Large diffs are not rendered by default.

35 changes: 24 additions & 11 deletions public/components/index.tsx
Original file line number Diff line number Diff line change
@@ -7,8 +7,9 @@
import ReactDOM from 'react-dom';
import { QueryManager } from 'common/query_manager';
import { AppMountParameters, CoreStart } from '../../../../src/core/public';
import { AppPluginStartDependencies, SetupDependencies } from '../types';

Check failure on line 10 in public/components/index.tsx

GitHub Actions / Lint

'SetupDependencies' is defined but never used. Allowed unused vars must match /^_/u
import { App } from './app';
import { DashboardsObservabilityContextProvider } from './event_analytics/explorer/context/context';

export const Observability = (
CoreStartProp: CoreStart,
@@ -22,18 +23,30 @@
startPage: string,
dataSourcePluggables
) => {

Check failure on line 26 in public/components/index.tsx

GitHub Actions / Lint

Delete `⏎`
ReactDOM.render(
<App
CoreStartProp={CoreStartProp}
DepsStart={DepsStart}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
queryManager={queryManager}
startPage={startPage}
dataSourcePluggables={dataSourcePluggables}
/>,
<DashboardsObservabilityContextProvider services={{

Check failure on line 28 in public/components/index.tsx

GitHub Actions / Lint

Insert `⏎·····`
...CoreStartProp,

Check failure on line 29 in public/components/index.tsx

GitHub Actions / Lint

Replace `······` with `········`
...DepsStart,

Check failure on line 30 in public/components/index.tsx

GitHub Actions / Lint

Insert `··`
pplService,
dslService,
queryManager,
savedObjects,
timestampUtils,
dataSourcePluggables,
}}>
<App
CoreStartProp={CoreStartProp}
DepsStart={DepsStart}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
queryManager={queryManager}
startPage={startPage}
dataSourcePluggables={dataSourcePluggables}
/>
</DashboardsObservabilityContextProvider>,
AppMountParametersProp.element
);

3 changes: 2 additions & 1 deletion public/plugin.ts
Original file line number Diff line number Diff line change
@@ -54,6 +54,7 @@ import {
} from '../common/utils';
import { Search } from './components/common/search/search';
import { DirectSearch } from './components/common/search/sql_search';
import { SearchBar } from './components/common/search/search_bar';
import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers';
import { convertLegacyTraceAnalyticsUrl } from './components/trace_analytics/components/common/legacy_route_helpers';
import { registerAsssitantDependencies } from './dependencies/register_assistant';
@@ -154,7 +155,7 @@ export class ObservabilityPlugin
QueryEditor: null,
ConfigEditor: null,
SidePanel: null,
SearchBar: Search,
SearchBar,
},
services: {},
}