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

Jump to bottom

Update newHeader for Snapshot pages #1105

Merged
merged 4 commits into from
Aug 15, 2024
Merged

Update newHeader for Snapshot pages #1105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
863e385
PoC for ism
Aug 5, 2024
125c439
Update newHeader for snapshot policies page
Aug 13, 2024
3f634e7
new page header update for index snapshot and repository pages
Aug 14, 2024
58cc80a
triger gh workflows
Aug 14, 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
2 changes: 1 addition & 1 deletion opensearch_dashboards.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
28 changes: 15 additions & 13 deletions public/components/ContentPanel/ContentPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
58 changes: 40 additions & 18 deletions public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -97,6 +99,7 @@ interface CreateSMPolicyState extends DataSourceMenuProperties {
minCountError: string;
repoError: string;
timezoneError: string;
useNewUX: boolean;
}

export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProps, CreateSMPolicyState> {
Expand All @@ -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(),
Expand Down Expand Up @@ -139,30 +144,28 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
repoError: "",
minCountError: "",
timezoneError: "",
useNewUX: useNewUx,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps move it to a context state?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SuZhou-Joe I'm of the opinion that its better to check for feature flag in main.tsx and pass it as a prop to components, we won't need context since its just a single level prop drilling. Wdyt?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am just thinking we are copy

const uiSettings = getUISettings();
const useNewUx = uiSettings.get("home:useNewHomePage");

in multiple place, maybe we can consider to move that to a util or somewhere.

};
}

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();
}
Expand Down Expand Up @@ -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" />
Expand Down
5 changes: 4 additions & 1 deletion public/pages/Main/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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>();
Expand Down
86 changes: 83 additions & 3 deletions public/pages/Repositories/containers/Repositories/Repositories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiTableFieldDataColumnType,
EuiText,
EuiTextColor,
EuiButtonIcon,
} from "@elastic/eui";
import { getErrorMessage } from "../../../../utils/helpers";
import React, { Component, useContext } from "react";
Expand All @@ -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;
Expand All @@ -44,6 +46,7 @@ interface RepositoriesState extends DataSourceMenuProperties {
editRepo: string | null;

isDeleteModalVisible: boolean;
useNewUX: boolean;
}

export class Repositories extends MDSEnabledComponent<RepositoriesProps, RepositoriesState> {
Expand All @@ -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: [],
Expand All @@ -62,6 +67,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
isPopoverOpen: false,
editRepo: null,
isDeleteModalVisible: false,
useNewUX: useNewUX,
};

this.columns = [
Expand Down Expand Up @@ -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();
}

Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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: [
{
Expand All @@ -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"
Expand Down
Loading
Loading