Skip to content

Commit

Permalink
Update new header for datastreams and rollups jobs. (#1115)
Browse files Browse the repository at this point in the history 
* Update header for ISM rollup pages

Signed-off-by: Sandeep Kumawat <[email protected]>

* update new header for DataStreams and Rollups

Signed-off-by: Sandeep Kumawat <[email protected]>

* Fix PR test failures

Signed-off-by: Sandeep Kumawat <[email protected]>

---------

Signed-off-by: Sandeep Kumawat <[email protected]>
Co-authored-by: Sandeep Kumawat <[email protected]>
(cherry picked from commit a9719df)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@github-actions @SuZhou-Joe
2 people authored and SuZhou-Joe committed Aug 19, 2024
1 parent 3f29581 commit 0c3396b
Show file tree
Hide file tree
Showing 25 changed files with 1,132 additions and 367 deletions.
17 changes: 17 additions & 0 deletions public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@ import { ServicesContext } from "../../../../services";
import { browserServicesMock, coreServicesMock, apiCallerMock } from "../../../../../test/mocks";
import { ROUTES } from "../../../../utils/constants";
import { CoreServicesContext } from "../../../../components/core_services";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

function renderCreateDataStreamWithRouter(initialEntries = [ROUTES.DATA_STREAMS] as string[]) {
return {
Expand Down
32 changes: 25 additions & 7 deletions public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,31 @@ import { CoreServicesContext } from "../../../../components/core_services";
import { isEqual } from "lodash";
import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
import { getUISettings } from "../../../../services/Services";

interface CreateDataStreamProps extends RouteComponentProps<{ dataStream?: string }>, DataSourceMenuProperties {}

class CreateDataStream extends Component<CreateDataStreamProps> {
type CreateDataStreamState = {
useNewUX: boolean;
};

class CreateDataStream extends Component<CreateDataStreamProps, CreateDataStreamState> {
static contextType = CoreServicesContext;

constructor(props: CreateDataStreamProps) {
super(props);
const uiSettings = getUISettings();
const useNewUX = uiSettings.get("home:useNewHomePage");
this.state = {
useNewUX: useNewUX,
};
}

get dataStream() {
return this.props.match.params.dataStream;
}

setBreadCrumb() {
setBreadCrumb(useNewUX: boolean) {
const isEdit = this.dataStream;
let lastBread: typeof BREADCRUMBS.TEMPLATES;
if (isEdit) {
Expand All @@ -32,32 +46,36 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
} else {
lastBread = BREADCRUMBS.CREATE_DATA_STREAM;
}
this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread]);
let breadCrumbs = useNewUX
? [BREADCRUMBS.DATA_STREAMS, lastBread]
: [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread];
this.context.chrome.setBreadcrumbs(breadCrumbs);
}

componentDidUpdate(prevProps: Readonly<CreateDataStreamProps>): void {
if (!isEqual(prevProps, this.props)) {
this.setBreadCrumb();
this.setBreadCrumb(this.state.useNewUX);
}
}

componentDidMount = async (): Promise<void> => {
this.setBreadCrumb();
this.setBreadCrumb(this.state.useNewUX);
};

onCancel = (): void => {
this.props.history.push(ROUTES.DATA_STREAMS);
};

render() {
const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" };
return (
<div style={{ padding: "0px 50px" }}>
<div style={padding_style}>
<DataStreamDetail
history={this.props.history}
dataStream={this.dataStream}
onCancel={this.onCancel}
onSubmitSuccess={() => this.props.history.push(ROUTES.DATA_STREAMS)}
key={this.props.dataSourceId}
useNewUX={this.state.useNewUX}
/>
</div>
);
Expand Down
17 changes: 17 additions & 0 deletions public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
import { HashRouter, Route } from "react-router-dom";
import { ROUTES } from "../../../../utils/constants";
import userEvent from "@testing-library/user-event";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

function renderCreateDataStream(props: Omit<DataStreamDetailProps, "history">) {
return {
Expand Down
145 changes: 100 additions & 45 deletions public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui";
import { TemplateItemRemote } from "../../../../../models/interfaces";
import useField, { FieldInstance } from "../../../../lib/field";
import CustomFormRow from "../../../../components/CustomFormRow";
Expand All @@ -25,13 +25,17 @@ import { ContentPanel } from "../../../../components/ContentPanel";
import { DataStreamInEdit } from "../../interface";
import BackingIndices from "../BackingIndices";
import DataStreamsActions from "../../../DataStreams/containers/DataStreamsActions";
import { ExternalLink } from "../../../utils/display-utils";
import { getApplication, getNavigationUI } from "../../../../services/Services";
import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public";

export interface DataStreamDetailProps {
dataStream?: string;
onCancel?: () => void;
onSubmitSuccess?: (templateName: string) => void;
readonly?: boolean;
history: RouteComponentProps["history"];
useNewUX: boolean;
}

const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>) => {
Expand Down Expand Up @@ -107,52 +111,103 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
field,
};

const descriptionData = [
{
renderComponent: (
<EuiText size="s" color="subdued">
A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while indexing
requests <br></br>
are routed to the latest write index.
<ExternalLink href={coreServices.docLinks.links.opensearch.dataStreams} />
</EuiText>
),
},
];

const controlsData = [
{
renderComponent: (
<DataStreamsActions
selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
history={props.history}
onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
useNewUX={props.useNewUX}
/>
),
},
{
id: "viewJson",
label: "View JSON",
testId: "dataStreamJSONDetailModal",
run: () => {
Modal.show({
"data-test-subj": "dataStreamJSONDetailModal",
title: values.name,
content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
});
},
controlType: "button",
display: "base",
fill: true,
} as TopNavControlButtonData,
];

const { HeaderControl } = getNavigationUI();
const { setAppRightControls, setAppDescriptionControls } = getApplication();

return (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
{isEdit ? null : (
<CustomFormRow
fullWidth
label=""
helpText={
<div>
A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
indexing requests are routed to the latest write index.{" "}
<EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
Learn more
</EuiLink>
</div>
}
>
<></>
</CustomFormRow>
)}
</EuiFlexItem>
{isEdit ? (
<EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
<EuiButton
style={{ marginRight: 20 }}
onClick={() => {
Modal.show({
"data-test-subj": "dataStreamJSONDetailModal",
title: values.name,
content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
});
}}
>
View JSON
</EuiButton>
<DataStreamsActions
selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
history={props.history}
onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiSpacer />
{!isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
{isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppRightControls} controls={controlsData} />}
{!props.useNewUX && (
<>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
{isEdit ? null : (
<CustomFormRow
fullWidth
label=""
helpText={
<div>
A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
indexing requests are routed to the latest write index.{" "}
<EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
Learn more
</EuiLink>
</div>
}
>
<></>
</CustomFormRow>
)}
</EuiFlexItem>

{isEdit ? (
<EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
<EuiButton
style={{ marginRight: 20 }}
onClick={() => {
Modal.show({
"data-test-subj": "dataStreamJSONDetailModal",
title: values.name,
content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
});
}}
>
View JSON
</EuiButton>
<DataStreamsActions
selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
history={props.history}
onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
<EuiSpacer />
</>
)}
{!isLoading && !templates.length && !isEdit ? (
<>
<EuiCallOut title="No data stream templates created" color="warning">
Expand Down
22 changes: 17 additions & 5 deletions public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ interface CreateRollupProps extends RouteComponentProps, DataSourceMenuPropertie
onChangeTargetIndex: (options: EuiComboBoxOptionOption<IndexItem>[]) => void;
currentStep: number;
hasAggregation: boolean;
useNewUX: boolean;
}

export default class CreateRollup extends Component<CreateRollupProps> {
Expand All @@ -41,17 +42,28 @@ export default class CreateRollup extends Component<CreateRollupProps> {
return null;
}

const getTitle = !this.props.useNewUX
? () => {
return (
<>
<EuiTitle size="l">
<h1>Set up indices</h1>
</EuiTitle>
<EuiSpacer />
</>
);
}
: () => {};
const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };

return (
<div style={{ padding: "5px 50px" }}>
<div style={padding_style}>
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
<CreateRollupSteps step={1} />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="l">
<h1>Set up indices</h1>
</EuiTitle>
<EuiSpacer />
{getTitle()}
<ConfigureRollup isEdit={false} {...this.props} />
<EuiSpacer />
<RollupIndices key={this.props.dataSourceId} {...this.props} />
Expand Down
17 changes: 17 additions & 0 deletions public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,23 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
import CreateRollupForm from "./CreateRollupForm";
import { CoreServicesContext } from "../../../../components/core_services";
import { DataStream } from "../../../../../server/models/interfaces";
import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";

jest.mock("../../../../services/Services", () => ({
...jest.requireActual("../../../../services/Services"),
getUISettings: jest.fn(),
getApplication: jest.fn(),
getNavigationUI: jest.fn(),
}));

beforeEach(() => {
(getUISettings as jest.Mock).mockReturnValue({
get: jest.fn().mockReturnValue(false), // or false, depending on your test case
});
(getApplication as jest.Mock).mockReturnValue({});

(getNavigationUI as jest.Mock).mockReturnValue({});
});

const sampleMapping = {
index_1: {
Expand Down
Loading

0 comments on commit 0c3396b

Please sign in to comment.