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 <sgguruda@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Joshua Li <joshuali925@gmail.com>

(cherry picked from commit 34b0311)
Signed-off-by: Peter Fitzgibbons <pjfitz@amazon.com>
  • Loading branch information
2 people authored and Peter Fitzgibbons committed Apr 18, 2023
1 parent 5dd0c74 commit 3e976d5
Show file tree
Hide file tree
Showing 22 changed files with 166 additions and 410 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: 3 additions & 1 deletion common/types/explorer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
SavedObjectAttributes,
SavedObjectsStart,
} from '../../../../src/core/public/saved_objects';
import { ChromeBreadcrumb } from '../../../../src/core/public/chrome';

export interface IQueryTab {
id: string;
Expand Down Expand Up @@ -318,14 +319,15 @@ export interface Breadcrumbs {

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

export interface DataConfigPanelProps {
Expand Down
149 changes: 34 additions & 115 deletions public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { I18nProvider } from '@osd/i18n/react';
import { QueryManager } from 'common/query_manager';
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { CoreStart } from '../../../../src/core/public';
import { observabilityID, observabilityTitle } from '../../common/constants/shared';
import { store } from '../framework/redux/store';
Expand All @@ -28,13 +27,23 @@ interface ObservabilityAppDeps {
savedObjects: any;
timestampUtils: any;
queryManager: QueryManager;
startPage: string;
}

// for cypress to test redux store
if (window.Cypress) {
window.store = store;
}

const pages = {
applications: ApplicationAnalyticsHome,
logs: EventAnalytics,
metrics: MetricsHome,
traces: TraceAnalyticsHome,
notebooks: NotebooksHome,
dashboards: CustomPanelsHome,
};

export const App = ({
CoreStartProp,
DepsStart,
Expand All @@ -43,130 +52,40 @@ export const App = ({
savedObjects,
timestampUtils,
queryManager,
startPage,
}: ObservabilityAppDeps) => {
const { chrome, http, notifications, savedObjects: coreSavedObjects } = CoreStartProp;
const parentBreadcrumb = {
text: observabilityTitle,
href: `${observabilityID}#/`,
};

const customPanelBreadcrumb = {
text: 'Operational panels',
href: '#/operational_panels/',
};
const ModuleComponent = pages[startPage];

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}
savedObjects={savedObjects}
coreSavedObjects={coreSavedObjects}
/>
);
}}
/>
<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>
<I18nProvider>
<MetricsListener http={http}>
<ModuleComponent
http={http}
chrome={chrome}
notifications={notifications}
CoreStartProp={CoreStartProp}
DepsStart={DepsStart}
DashboardContainerByValueRenderer={
DepsStart.dashboard.DashboardContainerByValueRenderer
}
pplService={pplService}
dslService={dslService}
savedObjects={savedObjects}
timestampUtils={timestampUtils}
queryManager={queryManager}
parentBreadcrumb={parentBreadcrumb}
parentBreadcrumbs={[parentBreadcrumb]}
setBreadcrumbs={chrome.setBreadcrumbs}
/>
</MetricsListener>
</I18nProvider>
</Provider>
);
};
20 changes: 11 additions & 9 deletions public/components/application_analytics/components/app_table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ import moment from 'moment';
import { DeleteModal } from '../../common/helpers/delete_modal';
import { AppAnalyticsComponentDeps } from '../home';
import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
import {
observabilityID,
observabilityTitle,
pageStyles,
UI_DATE_FORMAT,
} from '../../../../common/constants/shared';
import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';

interface AppTableProps extends AppAnalyticsComponentDeps {
Expand Down Expand Up @@ -72,8 +77,8 @@ export function AppTable(props: AppTableProps) {
chrome.setBreadcrumbs([
...parentBreadcrumbs,
{
text: 'Application analytics',
href: '#/application_analytics',
text: 'Applications',
href: '#/',
},
]);
clear();
Expand Down Expand Up @@ -216,10 +221,7 @@ export function AppTable(props: AppTableProps) {
sortable: true,
truncateText: true,
render: (value, record) => (
<EuiLink
data-test-subj={`${record.name}ApplicationLink`}
href={`#/application_analytics/${record.id}`}
>
<EuiLink data-test-subj={`${record.name}ApplicationLink`} href={`#/${record.id}`}>
{_.truncate(record.name, { length: 100 })}
</EuiLink>
),
Expand Down Expand Up @@ -284,7 +286,7 @@ export function AppTable(props: AppTableProps) {
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton fill href="#/application_analytics/create">
<EuiButton fill href="#/create">
{createButtonText}
</EuiButton>
</EuiFlexItem>
Expand Down Expand Up @@ -324,7 +326,7 @@ export function AppTable(props: AppTableProps) {
<EuiSpacer size="m" />
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButton fullWidth={false} href={`#/application_analytics/create`}>
<EuiButton fullWidth={false} href={`#/create`}>
{createButtonText}
</EuiButton>
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,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 @@ -67,6 +67,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 @@ -91,6 +92,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 @@ -110,6 +112,7 @@ export function Application(props: AppDetailProps) {
updateApp,
setAppConfigs,
setToasts,
toasts,
setFilters,
callback,
queryManager,
Expand Down Expand Up @@ -218,12 +221,12 @@ export function Application(props: AppDetailProps) {
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');
Expand Down Expand Up @@ -294,6 +297,7 @@ export function Application(props: AppDetailProps) {
setStartTime={setStartTimeForApp}
setEndTime={setEndTimeForApp}
childBreadcrumbs={childBreadcrumbs}
toasts={toasts}
/>
</>
);
Expand Down
7 changes: 4 additions & 3 deletions public/components/application_analytics/components/create.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
OptionType,
} from '../../../../common/types/application_analytics';
import { fetchAppById } from '../helpers/utils';
import { observabilityID, observabilityTitle } from '../../../../common/constants/shared';

interface CreateAppProps extends AppAnalyticsComponentDeps {
dslService: DSLService;
Expand Down Expand Up @@ -90,12 +91,12 @@ export const CreateApp = (props: CreateAppProps) => {
chrome.setBreadcrumbs([
...parentBreadcrumbs,
{
text: 'Application analytics',
href: '#/application_analytics',
text: 'Applications',
href: '#/',
},
{
text: editMode ? 'Edit' : 'Create',
href: `#/application_analytics/${editMode ? 'edit' : 'create'}`,
href: `#/${editMode ? 'edit' : 'create'}`,
},
]);
}, []);
Expand Down
Loading

0 comments on commit 3e976d5

Please sign in to comment.