Skip to content

Commit

Permalink
Observability - Dashboard Lists Integration
Browse files Browse the repository at this point in the history
* Register App Analytics, Panels as "Dashboard List Providers" (requires opensearch-project/OpenSearch-Dashboards#2149)

* Register App Analytics, Event Analytics as "Dashboard Left-Nav Links", using existing app.register functions of OSD.  Create a new "top-level" Left-Nav section "Observability"

Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
  • Loading branch information
Peter Fitzgibbons committed Nov 30, 2022
1 parent 503a378 commit beac240
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 159 deletions.
9 changes: 8 additions & 1 deletion common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* SPDX-License-Identifier: Apache-2.0
*/
import CSS from 'csstype';
import { IField } from '../../common/types/explorer';

// Client route
export const PPL_BASE = '/api/ppl';
Expand All @@ -27,6 +26,14 @@ export const observabilityID = 'observability-dashboards';
export const observabilityTitle = 'Observability';
export const observabilityPluginOrder = 6000;

export const observabilityApplicationsID = 'observability-applications';
export const observabilityApplicationsTitle = 'Application Analytics';
export const observabilityApplicationsPluginOrder = 5090;

export const observabilityEventsID = 'observability-events';
export const observabilityEventsTitle = 'Event Analytics';
export const observabilityEventsPluginOrder = 5091;

// Shared Constants
export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
export const PPL_DOCUMENTATION_URL =
Expand Down
147 changes: 18 additions & 129 deletions public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,24 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { I18nProvider } from '@osd/i18n/react';
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { HashRouter } from 'react-router-dom';
import { QueryManager } from 'common/query_manager';
import { CoreStart } from '../../../../src/core/public';
import { observabilityID, observabilityTitle } from '../../common/constants/shared';
import store from '../framework/redux/store';
import { AppPluginStartDependencies } from '../types';
import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
import { Home as CustomPanelsHome } from './custom_panels/home';
import { EventAnalytics } from './event_analytics';
import { Main as NotebooksHome } from './notebooks/components/main';
import { Home as TraceAnalyticsHome } from './trace_analytics/home';
import { Home as MetricsHome } from './metrics/index';
import { AppRoutesWrapper } from './routes_wrapper';

interface ObservabilityAppDeps {
CoreStartProp: CoreStart;
DepsStart: AppPluginStartDependencies;
coreStart: CoreStart;
depsStart: AppPluginStartDependencies;
pplService: any;
dslService: any;
savedObjects: any;
timestampUtils: any;
queryManager: QueryManager;
startPage?: String;
}

// for cypress to test redux store
Expand All @@ -35,133 +29,28 @@ if (window.Cypress) {
}

export const App = ({
CoreStartProp,
DepsStart,
coreStart,
depsStart,
pplService,
dslService,
savedObjects,
timestampUtils,
queryManager,
startPage,
}: ObservabilityAppDeps) => {
const { chrome, http, notifications } = CoreStartProp;
const parentBreadcrumb = {
text: observabilityTitle,
href: `${observabilityID}#/`,
};

const customPanelBreadcrumb = {
text: 'Operational panels',
href: '#/operational_panels/',
};

return (
<Provider store={store}>
<HashRouter>
<I18nProvider>
<>
<Switch>
<Route
path="/metrics_analytics/"
render={(props) => {
chrome.setBreadcrumbs([
parentBreadcrumb,
{ text: 'Metrics analytics', href: '#/metrics_analytics/' },
]);
return (
<MetricsHome
http={http}
chrome={chrome}
parentBreadcrumb={parentBreadcrumb}
renderProps={props}
pplService={pplService}
savedObjects={savedObjects}
/>
);
}}
/>
<Route
path={'/application_analytics'}
render={(props) => {
return (
<ApplicationAnalyticsHome
{...props}
chrome={chrome}
http={http}
notifications={notifications}
parentBreadcrumbs={[parentBreadcrumb]}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
/>
);
}}
/>
<Route
path="/notebooks"
render={(props) => (
<NotebooksHome
{...props}
DashboardContainerByValueRenderer={
DepsStart.dashboard.DashboardContainerByValueRenderer
}
http={http}
pplService={pplService}
setBreadcrumbs={chrome.setBreadcrumbs}
parentBreadcrumb={parentBreadcrumb}
notifications={notifications}
/>
)}
/>
<Route
path="/operational_panels"
render={(props) => {
chrome.setBreadcrumbs([parentBreadcrumb, customPanelBreadcrumb]);
return (
<CustomPanelsHome
http={http}
chrome={chrome}
parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
pplService={pplService}
dslService={dslService}
renderProps={props}
/>
);
}}
/>
<Route
path={['/trace_analytics', '/trace_analytics/home']}
render={(props) => (
<TraceAnalyticsHome
{...props}
chrome={chrome}
http={http}
parentBreadcrumbs={[parentBreadcrumb]}
/>
)}
/>
<Route
path={['/', '/event_analytics']}
render={(props) => {
return (
<EventAnalytics
chrome={chrome}
parentBreadcrumbs={[parentBreadcrumb]}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
http={http}
notifications={notifications}
queryManager={queryManager}
{...props}
/>
);
}}
/>
</Switch>
</>
</I18nProvider>
<AppRoutesWrapper
coreStart={coreStart}
depsStart={depsStart}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
queryManager={queryManager}
startPage={startPage}
></AppRoutesWrapper>{' '}
</HashRouter>
</Provider>
);
Expand Down
6 changes: 6 additions & 0 deletions public/components/application_analytics/helpers/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ import {
init as initPatterns,
remove as removePatterns,
} from '../../event_analytics/redux/slices/patterns_slice';
import { from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

// Name validation
export const isNameValid = (name: string, existingNames: string[]) => {
Expand Down Expand Up @@ -182,6 +184,10 @@ export const initializeTabData = async (dispatch: Dispatch<any>, tabId: string,
});
};

export const fetchAppsList = (http: HttpSetup) => {
return from(http.get(`${APP_ANALYTICS_API_PREFIX}/`)).pipe(mergeMap((res) => res.data));
};

export const fetchPanelsVizIdList = async (http: HttpSetup, appPanelId: string) => {
return await http
.get(`${CUSTOM_PANELS_API_PREFIX}/panels/${appPanelId}`)
Expand Down
14 changes: 14 additions & 0 deletions public/components/custom_panels/helpers/utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,14 @@ import { Visualization } from '../../visualizations/visualization';
import { getVizContainerProps } from '../../../components/visualizations/charts/helpers';
import { QueryManager } from '../../../../common/query_manager';
import { getDefaultVisConfig } from '../../event_analytics/utils';
import { from } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpSetup } from '../../src/core/target/types/public';

/*
* "Utils" This file contains different reused functions in operational panels
*
* fetchPanelsList - Get list of Observability Panel from Custom Panels API
* isNameValid - Validates string to length > 0 and < 50
* convertDateTime - Converts input datetime string to required format
* mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
Expand All @@ -35,6 +39,16 @@ import { getDefaultVisConfig } from '../../event_analytics/utils';
* displayVisualization - Function to render the visualzation based of its type
*/

export const fetchPanelsList = (http: HttpSetup) => {
return from(http.get(`${CUSTOM_PANELS_API_PREFIX}/panels`)).pipe(
map((res) => res.panels),
catchError((err) => {
console.error('Issue in fetching the operational panels', err.body.message);
return from([]);
})
);
};

// Name validation 0>Name<=50
export const isNameValid = (name: string) => {
return name.length >= 50 || name.length === 0 ? false : true;
Expand Down
8 changes: 5 additions & 3 deletions public/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ export const Observability = (
dslService: any,
savedObjects: any,
timestampUtils: any,
queryManager: QueryManager
queryManager: QueryManager,
startPage?: String
) => {
ReactDOM.render(
<App
CoreStartProp={CoreStartProp}
DepsStart={DepsStart}
coreStart={CoreStartProp}
depsStart={DepsStart}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
queryManager={queryManager}
startPage={startPage}
/>,
AppMountParametersProp.element
);
Expand Down
Loading

0 comments on commit beac240

Please sign in to comment.