diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json index 5493c743e..917e8c0a9 100644 --- a/opensearch_dashboards.json +++ b/opensearch_dashboards.json @@ -3,7 +3,7 @@ "version": "3.0.0.0", "opensearchDashboardsVersion": "3.0.0", "configPath": ["opensearch_index_management"], - "requiredPlugins": ["navigation", "opensearchDashboardsReact"], + "requiredPlugins": ["navigation", "opensearchDashboardsReact", "opensearchDashboardsUtils"], "optionalPlugins": ["managementOverview", "dataSource", "dataSourceManagement"], "server": true, "ui": true, diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index d3689f90c..5c205614f 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -68,19 +68,21 @@ const ContentPanel: React.SFC = ({ justifyContent="spaceBetween" alignItems="flexStart" > - - {typeof title === "string" ? ( - -

- {title} - {itemCount > 0 ? `(${itemCount})` : null} -

- - ) : ( - title - )} - {renderSubTitleText(subTitleText)} - + {title ? ( + + {typeof title === "string" ? ( + +

+ {title} + {itemCount > 0 ? `(${itemCount})` : null} +

+ + ) : ( + title + )} + {renderSubTitleText(subTitleText)} + + ) : null} {actions ? ( diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx index 02c73fac8..894557ffe 100644 --- a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx +++ b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx @@ -55,6 +55,8 @@ import Notification from "../../components/Notification"; import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext"; import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; +import { ExternalLink } from "../../../utils/display-utils"; interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties { snapshotManagementService: SnapshotManagementService; @@ -97,6 +99,7 @@ interface CreateSMPolicyState extends DataSourceMenuProperties { minCountError: string; repoError: string; timezoneError: string; + useNewUX: boolean; } export class CreateSnapshotPolicy extends MDSEnabledComponent { @@ -105,6 +108,8 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent + Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "} + + + ), + }, + ]; + const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" }; return ( -
- -

{isEdit ? "Edit" : "Create"} policy

- - {subTitleText} +
+ {this.state.useNewUX ? ( + + ) : ( + <> + +

{isEdit ? "Edit" : "Create"} policy

+ + {subTitleText} + + )} diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx index fc0590be7..72091dc11 100644 --- a/public/pages/Main/Main.tsx +++ b/public/pages/Main/Main.tsx @@ -71,6 +71,7 @@ import * as pluginManifest from "../../../opensearch_dashboards.json"; import { DataSourceAttributes } from "../../../../../src/plugins/data_source/common/data_sources"; import { BehaviorSubject } from "rxjs"; import { i18n } from "@osd/i18n"; +import { getUISettings } from "../../services/Services"; enum Navigation { IndexManagement = "Index Management", @@ -404,7 +405,9 @@ export default class Main extends Component { const { landingPage } = this.props; - const ROUTE_STYLE = { padding: "25px 25px" }; + const uiSettings = getUISettings(); + const showActionsInHeader = uiSettings.get("home:useNewHomePage"); + const ROUTE_STYLE = showActionsInHeader ? { padding: "0px 0px" } : { padding: "25px 25px" }; const DataSourceMenu = this.props.dataSourceManagement?.ui?.getDataSourceMenu(); const DataSourceViewer = this.props.dataSourceManagement?.ui?.getDataSourceMenu(); diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/NewSnapshotPolicy.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/NewSnapshotPolicy.tsx deleted file mode 100644 index bcd414a5e..000000000 --- a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/NewSnapshotPolicy.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; - -export default function NewSnapshotPolicy() { - const { HeaderControl } = getNavigationUI(); - const { setAppRightControls } = getApplication(); - const uiSettings = getUISettings(); - const showActionsInHeader = uiSettings.get("home:useNewHomePage"); - console.log("showActionsinHeaderFlag Value is -> " + showActionsInHeader); - - return; -} diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx index 21579fe90..18492b9b2 100644 --- a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx +++ b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx @@ -27,8 +27,12 @@ import { EuiTextColor, Pagination, Query, + EuiFlexItem, + EuiFlexGroup, + EuiButtonIcon, + EuiCompressedFieldSearch, } from "@elastic/eui"; -import { BREADCRUMBS, ROUTES, SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL } from "../../../../utils/constants"; +import { BREADCRUMBS, PLUGIN_NAME, ROUTES, SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL } from "../../../../utils/constants"; import { getMessagePrompt, getSMPoliciesQueryParamsFromURL, renderTimestampMillis } from "../../helpers"; import { SMPolicy } from "../../../../../models/interfaces"; import { SnapshotManagementService } from "../../../../services"; @@ -43,7 +47,7 @@ import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../ser import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; -import NewSnapshotPolicy from "./NewSnapshotPolicy"; +import { ExternalLink } from "../../../utils/display-utils"; interface SnapshotPoliciesProps extends RouteComponentProps, DataSourceMenuProperties { snapshotManagementService: SnapshotManagementService; @@ -69,6 +73,7 @@ interface SnapshotPoliciesState extends DataSourceMenuProperties { isPopoverOpen: boolean; isDeleteModalVisible: boolean; + useNewUx: boolean; } export class SnapshotPolicies extends MDSEnabledComponent { @@ -79,6 +84,8 @@ export class SnapshotPolicies extends MDSEnabledComponent { + this.closePopover(); + this.onClickEdit(); + }} + > + Edit + , + { + this.closePopover(); + this.showDeleteModal(); + }} + > + Delete + , + ]; + + const popoverActionItemsNew = [ { @@ -422,6 +460,7 @@ export class SnapshotPolicies extends MDSEnabledComponent Actions @@ -450,7 +489,6 @@ export class SnapshotPolicies extends MDSEnabledComponent Create policy , - , ]; const subTitleText = ( @@ -480,9 +518,59 @@ export class SnapshotPolicies extends MDSEnabledComponent ); - return ( + const { HeaderControl } = getNavigationUI(); + const { setAppRightControls, setAppDescriptionControls } = getApplication(); + + const descriptionData = [ + { + renderComponent: ( + + Define an automated snapshot schedule and retention period with a snapshot policy.{" "} + + + ), + }, + ]; + + const controlControlsData = [ + { + id: "Create policy", + label: "Create policy", + iconType: "plus", + fill: true, + href: `${PLUGIN_NAME}#${ROUTES.CREATE_SNAPSHOT_POLICY}`, + testId: "createButton", + controlType: "button", + }, + ]; + + const CommonTable = () => { + return ( + + ); + }; + + const CommonModal = () => { + return ( + isDeleteModalVisible && ( + + ) + ); + }; + + return !this.state.useNewUx ? ( <> - + - + {CommonTable()} - - {isDeleteModalVisible && ( - - )} + {CommonModal()} + + ) : ( + <> + + + + + + + + + + + + + + + + + {CommonTable()} + + {CommonModal()} ); } diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx index 11e7701bb..4dcd4137e 100644 --- a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx +++ b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx @@ -20,6 +20,7 @@ import { EuiTableFieldDataColumnType, EuiText, EuiTitle, + EuiHealth, } from "@elastic/eui"; import { NotificationService, SnapshotManagementService } from "../../../../services"; import { SMMetadata, SMPolicy } from "../../../../../models/interfaces"; @@ -39,6 +40,8 @@ import { NotificationConfig } from "../../../../../server/models/interfaces"; import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext"; import MDSEnabledComponent from "../../../../components/MDSEnabledComponent"; import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent"; +import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services"; +import { TopNavControlButtonData, TopNavControlTextData, TopNavControlIconData } from "../../../../../../../src/plugins/navigation/public"; interface SnapshotPolicyDetailsProps extends RouteComponentProps, DataSourceMenuProperties { snapshotManagementService: SnapshotManagementService; @@ -54,6 +57,7 @@ interface SnapshotPolicyDetailsState extends DataSourceMenuProperties { isDeleteModalVisible: boolean; channel: NotificationConfig | null; + useNewUX: boolean; } export class SnapshotPolicyDetails extends MDSEnabledComponent { @@ -63,6 +67,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent { + const { snapshotManagementService } = this.props; + const policyId = this.state.policyId; + try { + const response = await snapshotManagementService.stopPolicy(policyId); + if (response.ok) { + this.context.notifications.toasts.addSuccess(`"${policyId}" successfully stopped!`); + } else { + this.context.notifications.toasts.addDanger(`Could not stop policy "${policyId}" : ${response.error}`); + } + } catch (err) { + this.context.notifications.toasts.addDanger(getErrorMessage(err, "Could not stop the policy")); + } + this.componentDidMount(); + }; + + onClickStart = async () => { + const { snapshotManagementService } = this.props; + const policyId = this.state.policyId; + try { + const response = await snapshotManagementService.startPolicy(policyId); + if (response.ok) { + this.context.notifications.toasts.addSuccess(`"${policyId}" successfully started!`); + } else { + this.context.notifications.toasts.addDanger(`Could not start policy "${policyId}" : ${response.error}`); + } + } catch (err) { + this.context.notifications.toasts.addDanger(getErrorMessage(err, "Could not start the policy")); + } + this.componentDidMount(); + }; + + onClickPolicyStatusChange = async () => { + return this.state.policy?.enabled ? this.onClickStop() : this.onClickStart(); + }; + onEdit = () => { const { policyId } = this.state; if (policyId) { @@ -319,28 +369,81 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent + + {_.truncate(this.renderEnabledField(policy.enabled))} + + ), + }, + ]; + + const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" }; return ( -
- - - - {_.truncate(policyId)} - - - - - +
+ {this.state.useNewUX ? ( + <> + + + + + ) : ( + <> + - Edit + + {_.truncate(policyId)} + + - - Delete - + + + Edit + + + + Delete + + + - - + + )} diff --git a/public/pages/utils/display-utils.tsx b/public/pages/utils/display-utils.tsx new file mode 100644 index 000000000..1e6265e67 --- /dev/null +++ b/public/pages/utils/display-utils.tsx @@ -0,0 +1,15 @@ +import { EuiLink } from "@elastic/eui"; + +import React from "react"; + +export interface UIProps { + cssClassName: string; +} + +export function ExternalLink(props: { href: string }) { + return ( + + Learn more. + + ); +} diff --git a/public/plugin.ts b/public/plugin.ts index b82ee5810..a79081a6c 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -25,7 +25,7 @@ import { DataSourceManagementPluginSetup } from "../../../src/plugins/data_sourc import { dataSourceObservable } from "./pages/Main/Main"; import { BehaviorSubject } from "rxjs"; import { NavigationPublicPluginStart } from "../../../src/plugins/navigation/public"; -import { setApplication, setNavigationUI } from "./services/Services"; +import { setApplication, setNavigationUI, setUISettings } from "./services/Services"; interface IndexManagementSetupDeps { managementOverview?: ManagementOverViewPluginSetup; @@ -383,11 +383,11 @@ export class IndexManagementPlugin implements Plugin("UISettings"); - -// console.log(' -> ' + getUISettings1()); - export const [getUISettings, setUISettings] = createGetterSetter("UISettings"); export const [getNavigationUI, setNavigationUI] = createGetterSetter("navigation");