Skip to content

Commit 530dd12

Browse files
jackiehanyangjackiehanyang
authored
AD side navigation redesign (#810)
* update snapshot Signed-off-by: Jackie Han <jkhanjob@gmail.com> * AD side navigation redesign Signed-off-by: Jackie Han <jkhanjob@gmail.com> * update ut and snapshot Signed-off-by: Jackie Han <jkhanjob@gmail.com> --------- Signed-off-by: Jackie Han <jkhanjob@gmail.com>
1 parent 7e6cdfd commit 530dd12

File tree

7 files changed

+126
-14
lines changed

7 files changed

+126
-14
lines changed

‎public/anomaly_detection_app.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Provider } from 'react-redux';
1818
import configureStore from './redux/configureStore';
1919
import { CoreServicesContext } from './components/CoreServices/CoreServices';
2020

21-
export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
21+
export function renderApp(coreStart: CoreStart, params: AppMountParameters, landingPage: string | undefined, hideInAppSideNavBar: boolean) {
2222
const http = coreStart.http;
2323
const store = configureStore(http);
2424

@@ -38,6 +38,8 @@ export function renderApp(coreStart: CoreStart, params: AppMountParameters) {
3838
<CoreServicesContext.Provider value={coreStart}>
3939
<Main
4040
setHeaderActionMenu={params.setHeaderActionMenu}
41+
landingPage={landingPage}
42+
hideInAppSideNavBar={hideInAppSideNavBar}
4143
{...props}
4244
/>
4345
</CoreServicesContext.Provider>

‎public/pages/Overview/containers/AnomalyDetectionOverview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) {
282282
<EuiFlexGroup justifyContent="spaceBetween">
283283
<EuiFlexItem grow={false}>
284284
<EuiTitle size="l" data-test-subj="overviewTitle">
285-
<h1>Anomaly detection</h1>
285+
<h1>Get started</h1>
286286
</EuiTitle>
287287
</EuiFlexItem>
288288
<EuiFlexItem grow={false}>

‎public/pages/Overview/containers/__tests__/AnomalyDetectionOverview.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
7878
});
7979
const { container, getByText, queryByText } = renderWithRouter();
8080
expect(container).toMatchSnapshot();
81-
getByText('Anomaly detection');
81+
getByText('Get started');
8282
getByText('Monitor HTTP responses');
8383
getByText('Monitor eCommerce orders');
8484
getByText('Monitor host health');
@@ -109,7 +109,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
109109
const { container, getByText, getAllByText } = renderWithRouter();
110110
await waitFor(() => {});
111111
expect(container).toMatchSnapshot();
112-
getByText('Anomaly detection');
112+
getByText('Get started');
113113
getByText('Monitor HTTP responses');
114114
getByText('Monitor eCommerce orders');
115115
getByText('Monitor host health');
@@ -136,7 +136,7 @@ describe('<AnomalyDetectionOverview /> spec', () => {
136136
const { container, getByText, queryByText } = renderWithRouter();
137137
await waitFor(() => {});
138138
expect(container).toMatchSnapshot();
139-
getByText('Anomaly detection');
139+
getByText('Get started');
140140
getByText('Monitor HTTP responses');
141141
getByText('Monitor eCommerce orders');
142142
getByText('Monitor host health');

‎public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ exports[`<AnomalyDetectionOverview /> spec No sample detectors created renders c
1515
class="euiTitle euiTitle--large"
1616
data-test-subj="overviewTitle"
1717
>
18-
Anomaly detection
18+
Get started
1919
</h1>
2020
</div>
2121
<div
@@ -775,7 +775,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
775775
class="euiTitle euiTitle--large"
776776
data-test-subj="overviewTitle"
777777
>
778-
Anomaly detection
778+
Get started
779779
</h1>
780780
</div>
781781
<div
@@ -1530,7 +1530,7 @@ exports[`<AnomalyDetectionOverview /> spec Some detectors created renders compon
15301530
class="euiTitle euiTitle--large"
15311531
data-test-subj="overviewTitle"
15321532
>
1533-
Anomaly detection
1533+
Get started
15341534
</h1>
15351535
</div>
15361536
<div

‎public/pages/main/Main.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* GitHub history for details.
1010
*/
1111

12-
import { Switch, Route, RouteComponentProps } from 'react-router-dom';
12+
import { Switch, Route, RouteComponentProps, Redirect } from 'react-router-dom';
1313
import React from 'react';
1414
import { AppState } from '../../redux/reducers';
1515
import { DetectorList } from '../DetectorsList';
@@ -36,14 +36,16 @@ enum Navigation {
3636

3737
interface MainProps extends RouteComponentProps {
3838
setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
39+
landingPage: string | undefined;
40+
hideInAppSideNavBar: boolean;
3941
}
4042

4143
export function Main(props: MainProps) {
42-
const { setHeaderActionMenu } = props;
44+
const { setHeaderActionMenu, landingPage, hideInAppSideNavBar} = props;
4345

4446
const hideSideNavBar = useSelector(
4547
(state: AppState) => state.adApp.hideSideNavBar
46-
);
48+
) || hideInAppSideNavBar;
4749

4850
const adState = useSelector((state: AppState) => state.ad);
4951
const totalDetectors = adState.totalDetectors;
@@ -164,7 +166,9 @@ export function Main(props: MainProps) {
164166
<Route
165167
path="/"
166168
render={(props: RouteComponentProps) =>
167-
totalDetectors > 0 ? (
169+
landingPage ? (
170+
<Redirect from="/" to={landingPage} />
171+
) : totalDetectors > 0 ? (
168172
<DashboardOverview
169173
setActionMenu={setHeaderActionMenu}
170174
landingDataSourceId={dataSourceId}

‎public/plugin.ts

+102-2
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,20 @@ import {
1313
AppMountParameters,
1414
CoreSetup,
1515
CoreStart,
16+
DEFAULT_APP_CATEGORIES,
17+
DEFAULT_NAV_GROUPS,
1618
NotificationsSetup,
1719
NotificationsStart,
1820
Plugin,
21+
WorkspaceAvailability,
1922
} from '../../../src/core/public';
2023
import {
2124
CONTEXT_MENU_TRIGGER,
2225
EmbeddableSetup,
2326
EmbeddableStart,
2427
} from '../../../src/plugins/embeddable/public';
2528
import { ACTION_AD } from './action/ad_dashboard_action';
26-
import { PLUGIN_NAME } from './utils/constants';
29+
import { APP_PATH, DASHBOARD_PAGE_NAV_ID, DETECTORS_PAGE_NAV_ID, OVERVIEW_PAGE_NAV_ID, PLUGIN_NAME } from './utils/constants';
2730
import { getActions } from './utils/contextMenu/getActions';
2831
import { overlayAnomaliesFunction } from './expressions/overlay_anomalies';
2932
import {
@@ -76,6 +79,8 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
7679
implements Plugin<AnomalyDetectionSetupDeps, AnomalyDetectionStartDeps>
7780
{
7881
public setup(core: CoreSetup, plugins: any) {
82+
const hideInAppSideNavBar = core.chrome.navGroup.getNavGroupEnabled();
83+
7984
core.application.register({
8085
id: PLUGIN_NAME,
8186
title: 'Anomaly Detection',
@@ -88,10 +93,105 @@ export class AnomalyDetectionOpenSearchDashboardsPlugin
8893
mount: async (params: AppMountParameters) => {
8994
const { renderApp } = await import('./anomaly_detection_app');
9095
const [coreStart] = await core.getStartServices();
91-
return renderApp(coreStart, params);
96+
return renderApp(coreStart, params, undefined, hideInAppSideNavBar);
9297
},
9398
});
9499

100+
// register applications with category and use case information
101+
core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability,[
102+
{
103+
id: PLUGIN_NAME,
104+
category: DEFAULT_APP_CATEGORIES.detect,
105+
showInAllNavGroup: true
106+
}
107+
])
108+
core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS['security-analytics'],[
109+
{
110+
id: PLUGIN_NAME,
111+
category: DEFAULT_APP_CATEGORIES.detect,
112+
showInAllNavGroup: true
113+
}
114+
])
115+
116+
// register sub applications as standard OSD applications with use case
117+
if (core.chrome.navGroup.getNavGroupEnabled()) {
118+
core.application.register({
119+
id: OVERVIEW_PAGE_NAV_ID,
120+
title: 'Get started',
121+
order: 8040,
122+
category: DEFAULT_APP_CATEGORIES.detect,
123+
workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
124+
mount: async (params: AppMountParameters) => {
125+
const { renderApp } = await import('./anomaly_detection_app');
126+
const [coreStart] = await core.getStartServices();
127+
return renderApp(coreStart, params, APP_PATH.OVERVIEW, hideInAppSideNavBar);
128+
},
129+
});
130+
}
131+
132+
if (core.chrome.navGroup.getNavGroupEnabled()) {
133+
core.application.register({
134+
id: DASHBOARD_PAGE_NAV_ID,
135+
title: 'Dashboard',
136+
order: 8040,
137+
category: DEFAULT_APP_CATEGORIES.detect,
138+
workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
139+
mount: async (params: AppMountParameters) => {
140+
const { renderApp } = await import('./anomaly_detection_app');
141+
const [coreStart] = await core.getStartServices();
142+
return renderApp(coreStart, params, APP_PATH.DASHBOARD, hideInAppSideNavBar);
143+
},
144+
});
145+
}
146+
147+
if (core.chrome.navGroup.getNavGroupEnabled()) {
148+
core.application.register({
149+
id: DETECTORS_PAGE_NAV_ID,
150+
title: 'Detectors',
151+
order: 8040,
152+
category: DEFAULT_APP_CATEGORIES.detect,
153+
workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
154+
mount: async (params: AppMountParameters) => {
155+
const { renderApp } = await import('./anomaly_detection_app');
156+
const [coreStart] = await core.getStartServices();
157+
return renderApp(coreStart, params, APP_PATH.LIST_DETECTORS, hideInAppSideNavBar);
158+
},
159+
});
160+
}
161+
162+
// link the sub applications to the parent application
163+
core.chrome.navGroup.addNavLinksToGroup(
164+
DEFAULT_NAV_GROUPS.observability,
165+
[{
166+
id: OVERVIEW_PAGE_NAV_ID,
167+
parentNavLinkId: PLUGIN_NAME
168+
},
169+
{
170+
id: DASHBOARD_PAGE_NAV_ID,
171+
parentNavLinkId: PLUGIN_NAME
172+
},
173+
{
174+
id: DETECTORS_PAGE_NAV_ID,
175+
parentNavLinkId: PLUGIN_NAME
176+
}]
177+
);
178+
179+
core.chrome.navGroup.addNavLinksToGroup(
180+
DEFAULT_NAV_GROUPS['security-analytics'],
181+
[{
182+
id: OVERVIEW_PAGE_NAV_ID,
183+
parentNavLinkId: PLUGIN_NAME
184+
},
185+
{
186+
id: DASHBOARD_PAGE_NAV_ID,
187+
parentNavLinkId: PLUGIN_NAME
188+
},
189+
{
190+
id: DETECTORS_PAGE_NAV_ID,
191+
parentNavLinkId: PLUGIN_NAME
192+
}]
193+
);
194+
95195
setUISettings(core.uiSettings);
96196

97197
// Set the HTTP client so it can be pulled into expression fns to make

‎public/utils/constants.ts

+6
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,9 @@ export const SPACE_STR = ' ';
108108
export const ANOMALY_DETECTION_ICON = 'anomalyDetection';
109109

110110
export const DATA_SOURCE_ID = 'dataSourceId';
111+
112+
export const OVERVIEW_PAGE_NAV_ID = `anomaly_detection_dashboard-overview`;
113+
114+
export const DASHBOARD_PAGE_NAV_ID = `anomaly_detection_dashboard-dashboard`;
115+
116+
export const DETECTORS_PAGE_NAV_ID = `anomaly_detection_dashboard-detectors`;

0 commit comments

Comments
 (0)