Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update new header for datastreams and rollups jobs. #1115

Merged
merged 3 commits into from
Aug 17, 2024
Merged

Update new header for datastreams and rollups jobs. #1115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e51f3c
Update header for ISM rollup pages
Aug 15, 2024
e882052
update new header for DataStreams and Rollups
Aug 16, 2024
bf30f38
Fix PR test failures
Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading