Skip to content

Commit

Permalink
header redesign (opensearch-project#841)
Browse files Browse the repository at this point in the history 
* header redesign

Signed-off-by: Jackie Han <[email protected]>

* update snapshot

Signed-off-by: Jackie Han <[email protected]>

---------

Signed-off-by: Jackie Han <[email protected]>
  • Loading branch information
@jackiehanyang
jackiehanyang authored Aug 19, 2024
1 parent 3203e43 commit 399025a
Show file tree
Hide file tree
Showing 15 changed files with 347 additions and 68 deletions.
3 changes: 2 additions & 1 deletion opensearch_dashboards.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
"opensearchDashboardsReact",
"savedObjects",
"visAugmenter",
"opensearchDashboardsUtils"
"opensearchDashboardsUtils",
"navigation"
],
"server": true,
"ui": true,
Expand Down
27 changes: 25 additions & 2 deletions public/pages/Dashboard/Components/utils/DashboardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,12 @@ import {
import {
PLUGIN_NAME,
APP_PATH,
USE_NEW_HOME_PAGE,
} from '../../../../utils/constants';
import { useLocation } from 'react-router-dom';
import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../../pages/utils/helpers';
import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
export interface DashboardHeaderProps {
hasDetectors: boolean;
}
Expand All @@ -32,8 +35,27 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
const MDSQueryParams = getDataSourceFromURL(location);
const dataSourceId = MDSQueryParams.dataSourceId;
const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(APP_PATH.CREATE_DETECTOR, dataSourceId, false);
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
const { HeaderControl } = getNavigationUI();
const { setAppRightControls } = getApplication();

return (
return useUpdatedUX ? (
<HeaderControl
setMountPoint={setAppRightControls}
controls={[
{
id: 'Create detector',
label: 'Create detector',
iconType: 'plus',
fill: true,
href: createDetectorUrl,
testId: 'add_detector',
controlType: 'button',
} as TopNavControlButtonData,
]}
/>
) : (
<>
<EuiPageHeader>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand All @@ -54,5 +76,6 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
) : null}
</EuiFlexGroup>
</EuiPageHeader>
</>
);
};
}
39 changes: 29 additions & 10 deletions public/pages/Dashboard/Container/DashboardOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import {
getVisibleOptions,
isDataSourceCompatible,
} from '../../utils/helpers';
import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
import { DETECTOR_STATE } from '../../../../server/utils/constants';
import {
getDetectorStateOptions,
Expand All @@ -64,6 +64,7 @@ import {
getDataSourceEnabled,
getNotifications,
getSavedObjectsClient,
getUISettings,
} from '../../../services';
import { RouteComponentProps } from 'react-router-dom';

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

const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);

const handleIndicesFilterChange = (
options: EuiComboBoxOptionProps[]
): void => {
Expand Down Expand Up @@ -242,16 +245,32 @@ export function DashboardOverview(props: OverviewProps) {
}, [errorGettingDetectors]);

useEffect(() => {
if (dataSourceEnabled) {
core.chrome.setBreadcrumbs([
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
]);
if (useUpdatedUX) {
if (dataSourceEnabled) {
core.chrome.setBreadcrumbs([
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
]);
} else {
core.chrome.setBreadcrumbs([
BREADCRUMBS.ANOMALY_DETECTOR,
BREADCRUMBS.DASHBOARD,
BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
]);
}
} else {
core.chrome.setBreadcrumbs([
BREADCRUMBS.ANOMALY_DETECTOR,
BREADCRUMBS.DASHBOARD,
]);
if (dataSourceEnabled) {
core.chrome.setBreadcrumbs([
MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
]);
} else {
core.chrome.setBreadcrumbs([
BREADCRUMBS.ANOMALY_DETECTOR,
BREADCRUMBS.DASHBOARD,
]);
}
}
});

Expand Down
29 changes: 23 additions & 6 deletions public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,30 @@ import {
testDetectorDefinitionValues,
} from '../../utils/constants';

jest.mock('../../../../services', () => ({
...jest.requireActual('../../../../services'),
jest.mock('../../../../services', () => {
const originalModule = jest.requireActual('../../../../services');

getDataSourceEnabled: () => ({
enabled: false
})
}));
return {
...originalModule,
getDataSourceEnabled: () => ({
enabled: false
}),
getUISettings: () => ({
get: (flag) => {
if (flag === 'home:useNewHomePage') {
return false;
}
return originalModule.getUISettings().get(flag);
}
}),
getNavigationUI: () => ({
HeaderControl: null
}),
getApplication: () => ({
setAppRightControls: null,
})
};
});

const renderWithRouterEmpty = (isEdit: boolean = false) => ({
...render(
Expand Down
26 changes: 25 additions & 1 deletion public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
EuiPopover,
} from '@elastic/eui';
import { Detector } from '../../../../models/interfaces';
import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
import { USE_NEW_HOME_PAGE } from '../../../../utils/constants';

interface DetectorControls {
onEditDetector(): void;
Expand All @@ -30,7 +32,11 @@ interface DetectorControls {
}
export const DetectorControls = (props: DetectorControls) => {
const [isOpen, setIsOpen] = useState(false);
return (
const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
const { HeaderControl } = getNavigationUI();
const { setAppRightControls } = getApplication();

const ActionsPopover = (
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiPopover
Expand Down Expand Up @@ -80,4 +86,22 @@ export const DetectorControls = (props: DetectorControls) => {
</EuiFlexItem>
</EuiFlexGroup>
);
const renderActionsPopover = () => {
return useUpdatedUX ? (
<HeaderControl
setMountPoint={setAppRightControls}
controls={[
{
renderComponent: ActionsPopover
}
]}
/>
) : (
ActionsPopover
);
};

return (
renderActionsPopover()
);
};
22 changes: 22 additions & 0 deletions public/pages/DetectorDetail/components/DetectorControls/__tests__/DetectorControls.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,28 @@ import { render } from '@testing-library/react';
import { DetectorControls } from '../DetectorControls';
import { UNITS } from '../../../../../models/interfaces';

jest.mock('../../../../../services', () => {
const originalModule = jest.requireActual('../../../../../services');

return {
...originalModule,
getUISettings: () => ({
get: (flag) => {
if (flag === 'home:useNewHomePage') {
return false;
}
return originalModule.getUISettings().get(flag);
}
}),
getNavigationUI: () => ({
HeaderControl: null
}),
getApplication: () => ({
setAppRightControls: null,
})
};
});

describe('<DetectorControls /> spec', () => {
const detector = {
primaryTerm: 1,
Expand Down
26 changes: 19 additions & 7 deletions public/pages/DetectorDetail/containers/DetectorDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import {
import { getAliases, getIndices } from '../../../redux/reducers/opensearch';
import { getErrorMessage, Listener } from '../../../utils/utils';
import { darkModeEnabled } from '../../../utils/opensearchDashboardsUtils';
import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
import { DetectorControls } from '../components/DetectorControls';
import { ConfirmModal } from '../components/ConfirmModal/ConfirmModal';
import { useFetchMonitorInfo } from '../hooks/useFetchMonitorInfo';
Expand All @@ -70,6 +70,7 @@ import {
getDataSourceEnabled,
getNotifications,
getSavedObjectsClient,
getUISettings,
} from '../../../services';
import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../pages/utils/helpers';

Expand Down Expand Up @@ -195,6 +196,8 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
deleteTyped: false,
});

const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);

useHideSideNavBar(true, false);

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

const renderPageHeader = () => {
if (useUpdatedUX) {
return null;
} else {
return (
<EuiFlexItem grow={false}>
<EuiTitle size="l" data-test-subj="detectorNameHeader">
<h1>{detector && detector.name}</h1>
</EuiTitle>
</EuiFlexItem>
);
}
};

return (
<React.Fragment>
{!isEmpty(detector) && !hasError ? (
Expand All @@ -451,12 +468,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
justifyContent="spaceBetween"
style={{ padding: '10px' }}
>
<EuiFlexItem grow={false}>
<EuiTitle size="l" data-test-subj="detectorNameHeader">
{<h1>{detector && detector.name} </h1>}
</EuiTitle>
</EuiFlexItem>

{renderPageHeader()}
<EuiFlexItem grow={false}>
<DetectorControls
onEditDetector={handleEditDetector}
Expand Down
31 changes: 24 additions & 7 deletions public/pages/DetectorDetail/containers/__tests__/CustomIndexErrorMsg.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,30 @@ jest.mock('../../../CreateDetectorSteps/hooks/useFetchDetectorInfo', () => ({
useFetchDetectorInfo: jest.fn(),
}));

jest.mock('../../../../services', () => ({
...jest.requireActual('../../../../services'),

getDataSourceEnabled: () => ({
enabled: false,
}),
}));
jest.mock('../../../../services', () => {
const originalModule = jest.requireActual('../../../../services');

return {
...originalModule,
getDataSourceEnabled: () => ({
enabled: false,
}),
getUISettings: () => ({
get: (flag) => {
if (flag === 'home:useNewHomePage') {
return false;
}
return originalModule.getUISettings().get(flag);
}
}),
getNavigationUI: () => ({
HeaderControl: null
}),
getApplication: () => ({
setAppRightControls: null,
})
};
});

const detectorId = '4QY4YHEB5W9C7vlb3Mou';

Expand Down
Loading

0 comments on commit 399025a

Please sign in to comment.