Skip to content

Commit

Permalink
Add MDS support to snapshot pages (opensearch-project#1084)
Browse files Browse the repository at this point in the history 
Signed-off-by: Sandeep Kumawat <[email protected]>
Co-authored-by: Sandeep Kumawat <[email protected]>
  • Loading branch information
@skumawat2025
skumawat2025 and Sandeep Kumawat authored Jul 15, 2024
1 parent 456213f commit edf1e40
Show file tree
Hide file tree
Showing 14 changed files with 508 additions and 180 deletions.
74 changes: 70 additions & 4 deletions public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
EuiButtonIcon,
EuiLink,
} from "@elastic/eui";
import React, { ChangeEvent, Component } from "react";
import React, { ChangeEvent, Component, useContext } from "react";
import { RouteComponentProps } from "react-router-dom";
import { CoreServicesContext } from "../../../../components/core_services";
import { CatRepository, CreateRepositoryBody, CreateRepositorySettings, FeatureChannelList } from "../../../../../server/models/interfaces";
Expand All @@ -52,15 +52,18 @@ import SnapshotIndicesRepoInput from "../../components/SnapshotIndicesRepoInput"
import CronSchedule from "../../components/CronSchedule";
import SnapshotAdvancedSettings from "../../components/SnapshotAdvancedSettings";
import Notification from "../../components/Notification";
import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";

interface CreateSMPolicyProps extends RouteComponentProps {
interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties {
snapshotManagementService: SnapshotManagementService;
isEdit: boolean;
notificationService: NotificationService;
indexService: IndexService;
}

interface CreateSMPolicyState {
interface CreateSMPolicyState extends DataSourceMenuProperties {
policy: SMPolicy;
policyId: string;
policySeqNo: number | undefined;
Expand Down Expand Up @@ -96,13 +99,14 @@ interface CreateSMPolicyState {
timezoneError: string;
}

export default class CreateSnapshotPolicy extends Component<CreateSMPolicyProps, CreateSMPolicyState> {
export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProps, CreateSMPolicyState> {
static contextType = CoreServicesContext;

constructor(props: CreateSMPolicyProps) {
super(props);

this.state = {
...this.state,
policy: getDefaultSMPolicy(),
policyId: "",
policySeqNo: undefined,
Expand Down Expand Up @@ -160,11 +164,67 @@ export default class CreateSnapshotPolicy extends Component<CreateSMPolicyProps,
BREADCRUMBS.CREATE_SNAPSHOT_POLICY,
]);
}
this.updateOptions();
}

async updateOptions() {
await this.getIndexOptions("");
await this.getRepos();
await this.getChannels();
}

static getQueryObjectFromState({ dataSourceId, multiDataSourceEnabled }: CreateSMPolicyState) {
return {
...(multiDataSourceEnabled ? { dataSourceId } : {}),
};
}

resetState() {
this.setState({
policy: getDefaultSMPolicy(),
policyId: "",
policySeqNo: undefined,
policyPrimaryTerm: undefined,

isSubmitting: false,

channels: [],
loadingChannels: false,

indexOptions: DEFAULT_INDEX_OPTIONS,
selectedIndexOptions: [],

repositories: [],
selectedRepoValue: "",

maxAgeNum: 1,
maxAgeUnit: "d",

creationScheduleFrequencyType: "daily",
deletionScheduleFrequencyType: "daily",

deleteConditionEnabled: false,
deletionScheduleEnabled: false,

advancedSettingsOpen: false,
showCreateRepoFlyout: false,

policyIdError: "",
repoError: "",
minCountError: "",
timezoneError: "",
});
}

async componentDidUpdate(prevProps: CreateSMPolicyProps, prevState: CreateSMPolicyState) {
const prevQuery = CreateSnapshotPolicy.getQueryObjectFromState(prevState);
const currQuery = CreateSnapshotPolicy.getQueryObjectFromState(this.state);
if (!_.isEqual(prevQuery, currQuery)) {
this.resetState();
this.updateOptions();
}
}

getPolicy = async (policyId: string): Promise<void> => {
try {
const { snapshotManagementService } = this.props;
Expand Down Expand Up @@ -877,3 +937,9 @@ export default class CreateSnapshotPolicy extends Component<CreateSMPolicyProps,
return _.set(this.state.policy, path, newValue);
};
}

export default function (props: Omit<CreateSMPolicyProps, keyof DataSourceMenuProperties>) {
const dataSourceMenuProps = useContext(DataSourceMenuContext);
useUpdateUrlWithDataSourceProperties();
return <CreateSnapshotPolicy {...props} {...dataSourceMenuProps} />;
}
23 changes: 23 additions & 0 deletions public/pages/Main/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,16 @@ const dataSourceEnabledPaths: string[] = [
ROUTES.CREATE_TRANSFORM,
ROUTES.EDIT_TRANSFORM,
ROUTES.TRANSFORM_DETAILS,
ROUTES.SNAPSHOT_POLICIES,
ROUTES.SNAPSHOT_POLICY_DETAILS,
ROUTES.CREATE_SNAPSHOT_POLICY,
ROUTES.EDIT_SNAPSHOT_POLICY,
ROUTES.SNAPSHOTS,
ROUTES.CREATE_SNAPSHOT,
ROUTES.EDIT_SNAPSHOT,
ROUTES.REPOSITORIES,
ROUTES.CREATE_REPOSITORY,
ROUTES.EDIT_REPOSITORY,
];

export default class Main extends Component<MainProps, MainState> {
Expand Down Expand Up @@ -241,6 +251,7 @@ export default class Main extends Component<MainProps, MainState> {
services.notificationService = new NotificationService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
services.rollupService = new RollupService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
services.transformService = new TransformService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
services.snapshotManagementService = new SnapshotManagementService(http, this.state.dataSourceId, this.props.multiDataSourceEnabled);
}
return services;
}
Expand Down Expand Up @@ -447,6 +458,8 @@ export default class Main extends Component<MainProps, MainState> {
ROUTES.ROLLUP_DETAILS,
ROUTES.TRANSFORM_DETAILS,
ROUTES.EDIT_TRANSFORM,
ROUTES.EDIT_SNAPSHOT_POLICY,
ROUTES.SNAPSHOT_POLICY_DETAILS,
]}
render={() => (
<DataSourceViewer
Expand Down Expand Up @@ -477,6 +490,16 @@ export default class Main extends Component<MainProps, MainState> {
ROUTES.CHANGE_POLICY,
ROUTES.ROLLUPS,
ROUTES.TRANSFORMS,
ROUTES.SNAPSHOT_POLICIES,
ROUTES.SNAPSHOT_POLICY_DETAILS,
ROUTES.CREATE_SNAPSHOT_POLICY,
ROUTES.EDIT_SNAPSHOT_POLICY,
ROUTES.SNAPSHOTS,
ROUTES.CREATE_SNAPSHOT,
ROUTES.EDIT_SNAPSHOT,
ROUTES.REPOSITORIES,
ROUTES.CREATE_REPOSITORY,
ROUTES.EDIT_REPOSITORY,
]}
render={() => (
<DataSourceMenu
Expand Down
35 changes: 31 additions & 4 deletions public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
} from "@elastic/eui";
import _ from "lodash";
import { CreateRepositorySettings } from "../../../../../server/models/interfaces";
import React, { Component } from "react";
import React, { Component, useContext } from "react";
import FlyoutFooter from "../../../VisualCreatePolicy/components/FlyoutFooter";
import { CoreServicesContext } from "../../../../components/core_services";
import { SnapshotManagementService } from "../../../../services";
Expand All @@ -36,15 +36,17 @@ import {
S3_REPOSITORY_DOCUMENTATION_URL,
SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL,
} from "../../../../utils/constants";
import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";

interface CreateRepositoryProps {
interface CreateRepositoryProps extends DataSourceMenuProperties {
service: SnapshotManagementService;
editRepo: string | null;
onCloseFlyout: () => void;
createRepo: (repoName: string, repoType: string, settings: CreateRepositorySettings) => void;
}

interface CreateRepositoryState {
interface CreateRepositoryState extends DataSourceMenuProperties {
repoName: string;
location: string;
// repoTypeOptions: EuiComboBoxOptionOption<string>[];
Expand All @@ -59,13 +61,14 @@ interface CreateRepositoryState {
locationError: string;
}

export default class CreateRepositoryFlyout extends Component<CreateRepositoryProps, CreateRepositoryState> {
export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepositoryProps, CreateRepositoryState> {
static contextType = CoreServicesContext;

constructor(props: CreateRepositoryProps) {
super(props);

this.state = {
...this.state,
repoName: "",
location: "",
// repoTypeOptions: [],
Expand All @@ -85,6 +88,25 @@ export default class CreateRepositoryFlyout extends Component<CreateRepositoryPr
}
}

async componentDidUpdate(prevProps: CreateRepositoryProps, prevState: CreateRepositoryState) {
if (prevState.dataSourceId != this.state.dataSourceId) {
const { editRepo } = this.props;
this.setState({
repoName: "",
location: "",
selectedRepoTypeOption: REPO_SELECT_OPTIONS[0].value as string,
fsSettingsJsonString: JSON.stringify(FS_ADVANCED_SETTINGS, null, 4),
customSettingsJsonString: JSON.stringify(CUSTOM_CONFIGURATION, null, 4),
repoNameError: "",
repoTypeError: "",
locationError: "",
});
if (!!editRepo) {
await this.getRepo(editRepo);
}
}
}

getRepo = async (repoName: string) => {
const { service } = this.props;
try {
Expand Down Expand Up @@ -291,3 +313,8 @@ export default class CreateRepositoryFlyout extends Component<CreateRepositoryPr
);
}
}

export default function (props: Omit<CreateRepositoryProps, keyof DataSourceMenuProperties>) {
const dataSourceMenuProps = useContext(DataSourceMenuContext);
return <CreateRepositoryFlyout {...props} {...dataSourceMenuProps} />;
}
33 changes: 28 additions & 5 deletions public/pages/Repositories/containers/Repositories/Repositories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
EuiTextColor,
} from "@elastic/eui";
import { getErrorMessage } from "../../../../utils/helpers";
import React, { Component } from "react";
import React, { Component, useContext } from "react";
import { RouteComponentProps } from "react-router-dom";
import { CatRepository, CreateRepositoryBody, CreateRepositorySettings } from "../../../../../server/models/interfaces";
import { CoreServicesContext } from "../../../../components/core_services";
Expand All @@ -24,12 +24,15 @@ import { FieldValueSelectionFilterConfigType } from "@elastic/eui/src/components
import { BREADCRUMBS } from "../../../../utils/constants";
import DeleteModal from "../../components/DeleteModal";
import { truncateSpan } from "../../../Snapshots/helper";
import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";

interface RepositoriesProps extends RouteComponentProps {
interface RepositoriesProps extends RouteComponentProps, DataSourceMenuProperties {
snapshotManagementService: SnapshotManagementService;
}

interface RepositoriesState {
interface RepositoriesState extends DataSourceMenuProperties {
repositories: CatRepository[];
loading: boolean;
selectedItems: CatRepository[];
Expand All @@ -43,14 +46,15 @@ interface RepositoriesState {
isDeleteModalVisible: boolean;
}

export default class Repositories extends Component<RepositoriesProps, RepositoriesState> {
export class Repositories extends MDSEnabledComponent<RepositoriesProps, RepositoriesState> {
static contextType = CoreServicesContext;
columns: EuiTableFieldDataColumnType<CatRepository>[];

constructor(props: RepositoriesProps) {
super(props);

this.state = {
...this.state,
repositories: [],
loading: false,
selectedItems: [],
Expand Down Expand Up @@ -93,6 +97,20 @@ export default class Repositories extends Component<RepositoriesProps, Repositor
await this.getRepos();
}

async componentDidUpdate(prevProps: RepositoriesProps, prevState: RepositoriesState) {
const prevQuery = Repositories.getQueryObjectFromState(prevState);
const currQuery = Repositories.getQueryObjectFromState(this.state);
if (!_.isEqual(prevQuery, currQuery)) {
await this.getRepos();
}
}

static getQueryObjectFromState({ dataSourceId, multiDataSourceEnabled }: RepositoriesState) {
return {
...(multiDataSourceEnabled ? { dataSourceId } : {}),
};
}

getRepos = async () => {
this.setState({ loading: true });

Expand Down Expand Up @@ -177,7 +195,6 @@ export default class Repositories extends Component<RepositoriesProps, Repositor

render() {
const { repositories, loading, selectedItems, showFlyout, isPopoverOpen, editRepo, isDeleteModalVisible } = this.state;

const popoverActionItems = [
<EuiContextMenuItem
key="Edit"
Expand Down Expand Up @@ -319,3 +336,9 @@ export default class Repositories extends Component<RepositoriesProps, Repositor
.join(", ");
};
}

export default function (props: Omit<RepositoriesProps, keyof DataSourceMenuProperties>) {
const dataSourceMenuProps = useContext(DataSourceMenuContext);
useUpdateUrlWithDataSourceProperties();
return <Repositories {...props} {...dataSourceMenuProps} />;
}
Loading

0 comments on commit edf1e40

Please sign in to comment.