Skip to content

Commit 6883490

Browse files
opensearch-trigger-bot[bot]jackiehanyang
opensearch-trigger-bot[bot]
and
jackiehanyang
authored
header redesign (#841) (#845)
* header redesign Signed-off-by: Jackie Han <jkhanjob@gmail.com> * update snapshot Signed-off-by: Jackie Han <jkhanjob@gmail.com> --------- Signed-off-by: Jackie Han <jkhanjob@gmail.com> (cherry picked from commit 399025a) Co-authored-by: Jackie Han <jkhanjob@gmail.com>
1 parent 95cd499 commit 6883490

File tree

15 files changed

+347
-68
lines changed

15 files changed

+347
-68
lines changed

‎opensearch_dashboards.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"opensearchDashboardsReact",
2121
"savedObjects",
2222
"visAugmenter",
23-
"opensearchDashboardsUtils"
23+
"opensearchDashboardsUtils",
24+
"navigation"
2425
],
2526
"server": true,
2627
"ui": true,

‎public/pages/Dashboard/Components/utils/DashboardHeader.tsx

+25-2
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,12 @@ import {
2020
import {
2121
PLUGIN_NAME,
2222
APP_PATH,
23+
USE_NEW_HOME_PAGE,
2324
} from '../../../../utils/constants';
2425
import { useLocation } from 'react-router-dom';
2526
import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../../pages/utils/helpers';
27+
import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
28+
import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
2629
export interface DashboardHeaderProps {
2730
hasDetectors: boolean;
2831
}
@@ -32,8 +35,27 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
3235
const MDSQueryParams = getDataSourceFromURL(location);
3336
const dataSourceId = MDSQueryParams.dataSourceId;
3437
const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(APP_PATH.CREATE_DETECTOR, dataSourceId, false);
38+
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
39+
const { HeaderControl } = getNavigationUI();
40+
const { setAppRightControls } = getApplication();
3541

36-
return (
42+
return useUpdatedUX ? (
43+
<HeaderControl
44+
setMountPoint={setAppRightControls}
45+
controls={[
46+
{
47+
id: 'Create detector',
48+
label: 'Create detector',
49+
iconType: 'plus',
50+
fill: true,
51+
href: createDetectorUrl,
52+
testId: 'add_detector',
53+
controlType: 'button',
54+
} as TopNavControlButtonData,
55+
]}
56+
/>
57+
) : (
58+
<>
3759
<EuiPageHeader>
3860
<EuiFlexGroup justifyContent="spaceBetween">
3961
<EuiFlexItem grow={false}>
@@ -54,5 +76,6 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
5476
) : null}
5577
</EuiFlexGroup>
5678
</EuiPageHeader>
79+
</>
5780
);
58-
};
81+
}

‎public/pages/Dashboard/Container/DashboardOverview.tsx

+29-10
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ import {
4545
getVisibleOptions,
4646
isDataSourceCompatible,
4747
} from '../../utils/helpers';
48-
import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
48+
import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
4949
import { DETECTOR_STATE } from '../../../../server/utils/constants';
5050
import {
5151
getDetectorStateOptions,
@@ -64,6 +64,7 @@ import {
6464
getDataSourceEnabled,
6565
getNotifications,
6666
getSavedObjectsClient,
67+
getUISettings,
6768
} from '../../../services';
6869
import { RouteComponentProps } from 'react-router-dom';
6970

@@ -163,6 +164,8 @@ export function DashboardOverview(props: OverviewProps) {
163164
const visibleIndices = get(opensearchState, 'indices', []) as CatIndex[];
164165
const visibleAliases = get(opensearchState, 'aliases', []) as IndexAlias[];
165166

167+
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
168+
166169
const handleIndicesFilterChange = (
167170
options: EuiComboBoxOptionProps[]
168171
): void => {
@@ -242,16 +245,32 @@ export function DashboardOverview(props: OverviewProps) {
242245
}, [errorGettingDetectors]);
243246

244247
useEffect(() => {
245-
if (dataSourceEnabled) {
246-
core.chrome.setBreadcrumbs([
247-
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
248-
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
249-
]);
248+
if (useUpdatedUX) {
249+
if (dataSourceEnabled) {
250+
core.chrome.setBreadcrumbs([
251+
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
252+
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
253+
BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
254+
]);
255+
} else {
256+
core.chrome.setBreadcrumbs([
257+
BREADCRUMBS.ANOMALY_DETECTOR,
258+
BREADCRUMBS.DASHBOARD,
259+
BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
260+
]);
261+
}
250262
} else {
251-
core.chrome.setBreadcrumbs([
252-
BREADCRUMBS.ANOMALY_DETECTOR,
253-
BREADCRUMBS.DASHBOARD,
254-
]);
263+
if (dataSourceEnabled) {
264+
core.chrome.setBreadcrumbs([
265+
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
266+
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
267+
]);
268+
} else {
269+
core.chrome.setBreadcrumbs([
270+
BREADCRUMBS.ANOMALY_DETECTOR,
271+
BREADCRUMBS.DASHBOARD,
272+
]);
273+
}
255274
}
256275
});
257276

‎public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx

+23-6
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,30 @@ import {
2727
testDetectorDefinitionValues,
2828
} from '../../utils/constants';
2929

30-
jest.mock('../../../../services', () => ({
31-
...jest.requireActual('../../../../services'),
30+
jest.mock('../../../../services', () => {
31+
const originalModule = jest.requireActual('../../../../services');
3232

33-
getDataSourceEnabled: () => ({
34-
enabled: false
35-
})
36-
}));
33+
return {
34+
...originalModule,
35+
getDataSourceEnabled: () => ({
36+
enabled: false
37+
}),
38+
getUISettings: () => ({
39+
get: (flag) => {
40+
if (flag === 'home:useNewHomePage') {
41+
return false;
42+
}
43+
return originalModule.getUISettings().get(flag);
44+
}
45+
}),
46+
getNavigationUI: () => ({
47+
HeaderControl: null
48+
}),
49+
getApplication: () => ({
50+
setAppRightControls: null,
51+
})
52+
};
53+
});
3754

3855
const renderWithRouterEmpty = (isEdit: boolean = false) => ({
3956
...render(

‎public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx

+25-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
EuiPopover,
2020
} from '@elastic/eui';
2121
import { Detector } from '../../../../models/interfaces';
22+
import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
23+
import { USE_NEW_HOME_PAGE } from '../../../../utils/constants';
2224

2325
interface DetectorControls {
2426
onEditDetector(): void;
@@ -30,7 +32,11 @@ interface DetectorControls {
3032
}
3133
export const DetectorControls = (props: DetectorControls) => {
3234
const [isOpen, setIsOpen] = useState(false);
33-
return (
35+
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
36+
const { HeaderControl } = getNavigationUI();
37+
const { setAppRightControls } = getApplication();
38+
39+
const ActionsPopover = (
3440
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
3541
<EuiFlexItem grow={false}>
3642
<EuiPopover
@@ -80,4 +86,22 @@ export const DetectorControls = (props: DetectorControls) => {
8086
</EuiFlexItem>
8187
</EuiFlexGroup>
8288
);
89+
const renderActionsPopover = () => {
90+
return useUpdatedUX ? (
91+
<HeaderControl
92+
setMountPoint={setAppRightControls}
93+
controls={[
94+
{
95+
renderComponent: ActionsPopover
96+
}
97+
]}
98+
/>
99+
) : (
100+
ActionsPopover
101+
);
102+
};
103+
104+
return (
105+
renderActionsPopover()
106+
);
83107
};

‎public/pages/DetectorDetail/components/DetectorControls/__tests__/DetectorControls.test.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,28 @@ import { render } from '@testing-library/react';
1414
import { DetectorControls } from '../DetectorControls';
1515
import { UNITS } from '../../../../../models/interfaces';
1616

17+
jest.mock('../../../../../services', () => {
18+
const originalModule = jest.requireActual('../../../../../services');
19+
20+
return {
21+
...originalModule,
22+
getUISettings: () => ({
23+
get: (flag) => {
24+
if (flag === 'home:useNewHomePage') {
25+
return false;
26+
}
27+
return originalModule.getUISettings().get(flag);
28+
}
29+
}),
30+
getNavigationUI: () => ({
31+
HeaderControl: null
32+
}),
33+
getApplication: () => ({
34+
setAppRightControls: null,
35+
})
36+
};
37+
});
38+
1739
describe('<DetectorControls /> spec', () => {
1840
const detector = {
1941
primaryTerm: 1,

‎public/pages/DetectorDetail/containers/DetectorDetail.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {
4848
import { getAliases, getIndices } from '../../../redux/reducers/opensearch';
4949
import { getErrorMessage, Listener } from '../../../utils/utils';
5050
import { darkModeEnabled } from '../../../utils/opensearchDashboardsUtils';
51-
import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
51+
import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
5252
import { DetectorControls } from '../components/DetectorControls';
5353
import { ConfirmModal } from '../components/ConfirmModal/ConfirmModal';
5454
import { useFetchMonitorInfo } from '../hooks/useFetchMonitorInfo';
@@ -70,6 +70,7 @@ import {
7070
getDataSourceEnabled,
7171
getNotifications,
7272
getSavedObjectsClient,
73+
getUISettings,
7374
} from '../../../services';
7475
import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../pages/utils/helpers';
7576

@@ -195,6 +196,8 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
195196
deleteTyped: false,
196197
});
197198

199+
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
200+
198201
useHideSideNavBar(true, false);
199202

200203
// Jump to top of page on first load
@@ -435,6 +438,20 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
435438
);
436439
}
437440

441+
const renderPageHeader = () => {
442+
if (useUpdatedUX) {
443+
return null;
444+
} else {
445+
return (
446+
<EuiFlexItem grow={false}>
447+
<EuiTitle size="l" data-test-subj="detectorNameHeader">
448+
<h1>{detector && detector.name}</h1>
449+
</EuiTitle>
450+
</EuiFlexItem>
451+
);
452+
}
453+
};
454+
438455
return (
439456
<React.Fragment>
440457
{!isEmpty(detector) && !hasError ? (
@@ -451,12 +468,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
451468
justifyContent="spaceBetween"
452469
style={{ padding: '10px' }}
453470
>
454-
<EuiFlexItem grow={false}>
455-
<EuiTitle size="l" data-test-subj="detectorNameHeader">
456-
{<h1>{detector && detector.name} </h1>}
457-
</EuiTitle>
458-
</EuiFlexItem>
459-
471+
{renderPageHeader()}
460472
<EuiFlexItem grow={false}>
461473
<DetectorControls
462474
onEditDetector={handleEditDetector}

‎public/pages/DetectorDetail/containers/__tests__/CustomIndexErrorMsg.test.tsx

+24-7
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,30 @@ jest.mock('../../../CreateDetectorSteps/hooks/useFetchDetectorInfo', () => ({
3737
useFetchDetectorInfo: jest.fn(),
3838
}));
3939

40-
jest.mock('../../../../services', () => ({
41-
...jest.requireActual('../../../../services'),
42-
43-
getDataSourceEnabled: () => ({
44-
enabled: false,
45-
}),
46-
}));
40+
jest.mock('../../../../services', () => {
41+
const originalModule = jest.requireActual('../../../../services');
42+
43+
return {
44+
...originalModule,
45+
getDataSourceEnabled: () => ({
46+
enabled: false,
47+
}),
48+
getUISettings: () => ({
49+
get: (flag) => {
50+
if (flag === 'home:useNewHomePage') {
51+
return false;
52+
}
53+
return originalModule.getUISettings().get(flag);
54+
}
55+
}),
56+
getNavigationUI: () => ({
57+
HeaderControl: null
58+
}),
59+
getApplication: () => ({
60+
setAppRightControls: null,
61+
})
62+
};
63+
});
4764

4865
const detectorId = '4QY4YHEB5W9C7vlb3Mou';
4966

0 commit comments

Comments
 (0)