Skip to content

Commit

Permalink
Fix side nav minor bugs (#365)
Browse files Browse the repository at this point in the history
* fix side nav minor bugs
* fix notebook clone link
* add event changes
* Add /explorer to router path to indicate query result page
* Remove /trace_analytics from redirects
* fix trace correlation link

---------

Signed-off-by: Shenoy Pratik <[email protected]>
Signed-off-by: Joshua Li <[email protected]>
Co-authored-by: Joshua Li <[email protected]>
  • Loading branch information
ps48 and joshuali925 authored Apr 17, 2023
1 parent b0a87fc commit 34b0311
Show file tree
Hide file tree
Showing 22 changed files with 70 additions and 349 deletions.
2 changes: 1 addition & 1 deletion common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const PPL_ENDPOINT = '/_plugins/_ppl';
export const SQL_ENDPOINT = '/_plugins/_sql';
export const DSL_ENDPOINT = '/_plugins/_dsl';

export const observabilityID = 'observability-dashboards';
export const observabilityID = 'observability-logs';
export const observabilityTitle = 'Observability';
export const observabilityPluginOrder = 6000;

Expand Down
4 changes: 2 additions & 2 deletions common/types/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -319,15 +319,15 @@ export interface Breadcrumbs {

export interface EventAnalyticsProps {
chrome: CoreSetup;
parentBreadcrumbs: ChromeBreadcrumb;
parentBreadcrumbs: ChromeBreadcrumb[];
pplService: any;
dslService: any;
savedObjects: SavedObjectsStart;
timestampUtils: TimestampUtils;
http: HttpStart;
notifications: NotificationsStart;
queryManager: QueryManager;
setBreadcrumbs:(newBreadcrumbs: ChromeBreadcrumb[]) => void;
setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
}

export interface DataConfigPanelProps {
Expand Down
130 changes: 1 addition & 129 deletions public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@
import { I18nProvider } from '@osd/i18n/react';
import { QueryManager } from 'common/query_manager';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { AppMountParameters, CoreStart } from '../../../../src/core/public';
import { CoreStart } from '../../../../src/core/public';
import { observabilityID, observabilityTitle } from '../../common/constants/shared';
import { store } from '../framework/redux/store';
import { AppPluginStartDependencies } from '../types';
Expand All @@ -30,7 +28,6 @@ interface ObservabilityAppDeps {
timestampUtils: any;
queryManager: QueryManager;
startPage: string;
// mountParams: AppMountParameters;
}

// for cypress to test redux store
Expand All @@ -55,7 +52,6 @@ export const App = ({
savedObjects,
timestampUtils,
queryManager,
// mountParams,
startPage,
}: ObservabilityAppDeps) => {
const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
Expand All @@ -64,11 +60,6 @@ export const App = ({
href: `${observabilityID}#/`,
};

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

const ModuleComponent = pages[startPage];

return (
Expand Down Expand Up @@ -98,122 +89,3 @@ export const App = ({
</Provider>
);
};

// // redirect legacy notebooks URL to current URL under observability
// if (window.location.pathname.includes('application_analytics')) {
// window.location.assign(convertLegacyAppAnalyticsUrl(window.location));
// }

// return (
// <Provider store={store}>
// <HashRouter>
// <I18nProvider>
// <MetricsListener http={http}>
// <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}
// queryManager={queryManager}
// />
// );
// }}
// />
// <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>
// </MetricsListener>
// </I18nProvider>
// </HashRouter>
// </Provider>
// );
// };
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,7 @@ export function AppTable(props: AppTableProps) {

useEffect(() => {
chrome.setBreadcrumbs([
{
text: observabilityTitle,
href: `${observabilityID}#/`,
},
...parentBreadcrumbs,
{
text: 'Applications',
href: '#/',
Expand Down
16 changes: 10 additions & 6 deletions public/components/application_analytics/components/application.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ import {
} from '../../../../common/constants/application_analytics';
import { TAB_EVENT_ID, TAB_CHART_ID, NEW_TAB } from '../../../../common/constants/explorer';
import { IQueryTab } from '../../../../common/types/explorer';
import { NotificationsStart } from '../../../../../../src/core/public';
import { NotificationsStart, Toast } from '../../../../../../src/core/public';
import { AppAnalyticsComponentDeps } from '../home';
import { CustomPanelView } from '../../../../public/components/custom_panels/custom_panel_view';
import {
Expand All @@ -66,6 +66,7 @@ import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/
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]: {
Expand All @@ -90,6 +91,7 @@ interface AppDetailProps extends AppAnalyticsComponentDeps {
updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
setToasts: (title: string, color?: string, text?: ReactChild) => void;
callback: (childfunction: () => void) => void;
toasts: Toast[];
}

export function Application(props: AppDetailProps) {
Expand All @@ -109,6 +111,7 @@ export function Application(props: AppDetailProps) {
updateApp,
setAppConfigs,
setToasts,
toasts,
setFilters,
callback,
queryManager,
Expand Down Expand Up @@ -213,21 +216,21 @@ export function Application(props: AppDetailProps) {
callback(switchToEvent);
}, [appId]);

/* useEffect(() => {
useEffect(() => {
chrome.setBreadcrumbs([
...parentBreadcrumbs,
{
text: 'Application analytics',
href: '#/application_analytics',
text: 'Applications',
href: '#/',
},
{
text: application.name,
href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
href: `${observabilityApplicationsID}/${appId}`,
},
]);
setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now');
}, [appId, application.name]); */
}, [appId, application.name]);

useEffect(() => {
const DSL = filtersToDsl(mode, filters, query, appStartTime, appEndTime, 'app', appConfigs);
Expand Down Expand Up @@ -293,6 +296,7 @@ export function Application(props: AppDetailProps) {
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
childBreadcrumbs={childBreadcrumbs}
toasts={toasts}
/>
</>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,7 @@ export const CreateApp = (props: CreateAppProps) => {

useEffect(() => {
chrome.setBreadcrumbs([
{
text: observabilityTitle,
href: `${observabilityID}#/`,
},
...parentBreadcrumbs,
{
text: 'Applications',
href: '#/',
Expand Down
7 changes: 5 additions & 2 deletions public/components/application_analytics/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { CreateApp } from './components/create';
import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_analytics/home';
import { FilterType } from '../trace_analytics/components/common/filters/filters';
import { handleDataPrepperIndicesExistRequest } from '../trace_analytics/requests/request_handler';
import { ObservabilitySideBar } from '../common/side_nav';
import { ChromeBreadcrumb, NotificationsStart } from '../../../../../src/core/public';
import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
import {
Expand All @@ -38,6 +37,7 @@ import {
CUSTOM_PANELS_DOCUMENTATION_URL,
} from '../../../common/constants/custom_panels';
import { QueryManager } from '../../../common/query_manager/ppl_query_manager';
import { observabilityApplicationsID } from '../../../common/constants/shared';

export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;

Expand All @@ -48,6 +48,7 @@ interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
timestampUtils: TimestampUtils;
notifications: NotificationsStart;
queryManager: QueryManager;
parentBreadcrumbs: ChromeBreadcrumb[];
}

export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
Expand All @@ -58,6 +59,7 @@ export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
setQueryWithStorage: (newQuery: string) => void;
setFiltersWithStorage: (newFilters: FilterType[]) => void;
setAppConfigs: (newAppConfigs: FilterType[]) => void;
parentBreadcrumbs: ChromeBreadcrumb[];
}

export const Home = (props: HomeProps) => {
Expand Down Expand Up @@ -153,7 +155,7 @@ export const Home = (props: HomeProps) => {
};

const moveToApp = (id: string, type: string) => {
window.location.assign(`${last(parentBreadcrumbs)!.href}/${id}`);
window.location.assign(`${observabilityApplicationsID}#/${id}`);
if (type === 'createSetAvailability') {
setTriggerSwitchToEvent(2);
}
Expand Down Expand Up @@ -434,6 +436,7 @@ export const Home = (props: HomeProps) => {
savedObjects={savedObjects}
timestampUtils={timestampUtils}
notifications={notifications}
toasts={toasts}
setToasts={setToast}
updateApp={updateApp}
callback={callback}
Expand Down
Loading

0 comments on commit 34b0311

Please sign in to comment.