Update newHeader for Snapshot pages (#1105)

* PoC for ism Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> * Update newHeader for snapshot policies page Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> * new page header update for index snapshot and repository pages Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> * triger gh workflows Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> --------- Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> Co-authored-by: Sandeep Kumawat <skumwt@amazon.com>
opensearch-project · Aug 15, 2024 · c486b61 · c486b61
1 parent c8cea51
commit c486b61
Show file tree

Hide file tree

Showing 13 changed files with 673 additions and 149 deletions.
diff --git 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
@@ -68,19 +68,21 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       justifyContent="spaceBetween"
       alignItems="flexStart"
     >
-      <EuiFlexItem>
-        {typeof title === "string" ? (
-          <EuiTitle size={titleSize}>
-            <h3>
-              {title}
-              <span className="panel-header-count"> {itemCount > 0 ? `(${itemCount})` : null} </span>
-            </h3>
-          </EuiTitle>
-        ) : (
-          title
-        )}
-        {renderSubTitleText(subTitleText)}
-      </EuiFlexItem>
+      {title ? (
+        <EuiFlexItem>
+          {typeof title === "string" ? (
+            <EuiTitle size={titleSize}>
+              <h3>
+                {title}
+                <span className="panel-header-count"> {itemCount > 0 ? `(${itemCount})` : null} </span>
+              </h3>
+            </EuiTitle>
+          ) : (
+            title
+          )}
+          {renderSubTitleText(subTitleText)}
+        </EuiFlexItem>
+      ) : null}
       {actions ? (
         <EuiFlexItem grow={false}>
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">

diff --git 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<CreateSMPolicyProps, CreateSMPolicyState> {
@@ -105,6 +108,8 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
   constructor(props: CreateSMPolicyProps) {
     super(props);
 
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
     this.state = {
       ...this.state,
       policy: getDefaultSMPolicy(),
@@ -139,30 +144,28 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
       repoError: "",
       minCountError: "",
       timezoneError: "",
+      useNewUX: useNewUx,
     };
   }
 
   async componentDidMount() {
     if (this.props.isEdit) {
       const { id } = queryString.parse(this.props.location.search);
       if (typeof id === "string" && !!id) {
-        this.context.chrome.setBreadcrumbs([
-          BREADCRUMBS.SNAPSHOT_MANAGEMENT,
-          BREADCRUMBS.SNAPSHOT_POLICIES,
-          BREADCRUMBS.EDIT_SNAPSHOT_POLICY,
-          { text: id },
-        ]);
+        const breadCrumbs = this.state.useNewUX
+          ? [BREADCRUMBS.SNAPSHOT_POLICIES, { text: id }]
+          : [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.EDIT_SNAPSHOT_POLICY, { text: id }];
+        this.context.chrome.setBreadcrumbs(breadCrumbs);
         await this.getPolicy(id);
       } else {
         this.context.notifications.toasts.addDanger(`Invalid policy id: ${id}`);
         this.props.history.push(ROUTES.SNAPSHOT_POLICIES);
       }
     } else {
-      this.context.chrome.setBreadcrumbs([
-        BREADCRUMBS.SNAPSHOT_MANAGEMENT,
-        BREADCRUMBS.SNAPSHOT_POLICIES,
-        BREADCRUMBS.CREATE_SNAPSHOT_POLICY,
-      ]);
+      const breadCrumbs = this.state.useNewUX
+        ? [BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.CREATE_SNAPSHOT_POLICY]
+        : [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.SNAPSHOT_POLICIES, BREADCRUMBS.CREATE_SNAPSHOT_POLICY];
+      this.context.chrome.setBreadcrumbs(breadCrumbs);
     }
     this.updateOptions();
   }
@@ -551,14 +554,33 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
     const showNotificationChannel = showNotification(policy);
 
-    return (
-      <div style={{ padding: "5px 50px" }}>
-        <EuiTitle size="l">
-          <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-        </EuiTitle>
-        {subTitleText}
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
 
-        <EuiSpacer />
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
+            Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "}
+            <ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
+          </EuiText>
+        ),
+      },
+    ];
+    const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+    return (
+      <div style={padding_style}>
+        {this.state.useNewUX ? (
+          <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+        ) : (
+          <>
+            <EuiTitle size="l">
+              <h1>{isEdit ? "Edit" : "Create"} policy</h1>
+            </EuiTitle>
+            {subTitleText}
+            <EuiSpacer />
+          </>
+        )}
 
         <ContentPanel title="Policy settings" titleSize="m">
           <CustomLabel title="Policy name" />

diff --git 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<MainProps, MainState> {
 
     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<DataSourceSelectableConfig>();
     const DataSourceViewer = this.props.dataSourceManagement?.ui?.getDataSourceMenu<DataSourceViewConfig>();

diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx
@@ -11,6 +11,7 @@ import {
   EuiTableFieldDataColumnType,
   EuiText,
   EuiTextColor,
+  EuiButtonIcon,
 } from "@elastic/eui";
 import { getErrorMessage } from "../../../../utils/helpers";
 import React, { Component, useContext } from "react";
@@ -27,6 +28,7 @@ import { truncateSpan } from "../../../Snapshots/helper";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 interface RepositoriesProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -44,6 +46,7 @@ interface RepositoriesState extends DataSourceMenuProperties {
   editRepo: string | null;
 
   isDeleteModalVisible: boolean;
+  useNewUX: boolean;
 }
 
 export class Repositories extends MDSEnabledComponent<RepositoriesProps, RepositoriesState> {
@@ -53,6 +56,8 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
   constructor(props: RepositoriesProps) {
     super(props);
 
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       ...this.state,
       repositories: [],
@@ -62,6 +67,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       isPopoverOpen: false,
       editRepo: null,
       isDeleteModalVisible: false,
+      useNewUX: useNewUX,
     };
 
     this.columns = [
@@ -93,7 +99,10 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.REPOSITORIES]);
+    const breadCrumbs = this.state.useNewUX
+      ? [BREADCRUMBS.SNAPSHOT_REPOSITORIES]
+      : [BREADCRUMBS.SNAPSHOT_MANAGEMENT, BREADCRUMBS.REPOSITORIES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getRepos();
   }
 
@@ -194,7 +203,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
   };
 
   render() {
-    const { repositories, loading, selectedItems, showFlyout, isPopoverOpen, editRepo, isDeleteModalVisible } = this.state;
+    const { repositories, loading, selectedItems, showFlyout, isPopoverOpen, editRepo, isDeleteModalVisible, useNewUX } = this.state;
     const popoverActionItems = [
       <EuiContextMenuItem
         key="Edit"
@@ -246,9 +255,45 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       </EuiButton>,
     ];
 
+    const renderToolsRight = () => {
+      return [
+        <EuiButtonIcon
+          iconType="refresh"
+          onClick={this.getRepos}
+          data-test-subj="refreshButton"
+          aria-label="refresh"
+          size="s"
+          display="base"
+        />,
+      ];
+    };
+
+    const renderToolsLeft = () => {
+      return [
+        <EuiButton
+          iconType="trash"
+          iconSide="left"
+          iconSize="s"
+          disabled={!selectedItems.length}
+          onClick={this.showDeleteModal}
+          data-test-subj="deleteButton"
+          aria-label="delete"
+          color="danger"
+          size="s"
+          minWidth={75}
+        >
+          Delete
+        </EuiButton>,
+      ];
+    };
+
     const search = {
+      toolsRight: useNewUX ? renderToolsRight() : undefined,
+      toolsLeft: useNewUX ? renderToolsLeft() : undefined,
       box: {
         placeholder: "Search repository",
+        compressed: useNewUX ? true : false,
+        increamental: true,
       },
       filters: [
         {
@@ -273,9 +318,44 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
     } else {
       additionalWarning += " in the repository.";
     }
+
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
+            Repositories are remote storage locations used to store snapshots.
+          </EuiText>
+        ),
+      },
+    ];
+
+    const controlControlsData = [
+      {
+        id: "Create repository",
+        label: "Create repository",
+        iconType: "plus",
+        fill: true,
+        run: this.onClickCreate,
+        testId: "createRepo",
+        controlType: "button",
+      },
+    ];
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls, setAppDescriptionControls } = getApplication();
+    const useTitle = useNewUX ? undefined : "Repositories";
+    const useActions = useNewUX ? undefined : actions;
+    const useSubTitleText = useNewUX ? undefined : subTitleText;
+
     return (
       <>
-        <ContentPanel title="Repositories" actions={actions} subTitleText={subTitleText}>
+        {useNewUX ? (
+          <>
+            <HeaderControl setMountPoint={setAppRightControls} controls={controlControlsData} />
+            <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+          </>
+        ) : null}
+        <ContentPanel title={useTitle} actions={useActions} subTitleText={useSubTitleText}>
           <EuiInMemoryTable
             items={repositories}
             itemId="id"