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.

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

Provide option to optimise cluster for Regional-DR #1095

Conversation

TimothyAsirJeyasing
Copy link
Contributor

No description provided.

@TimothyAsirJeyasing
Copy link
Contributor Author

@GowthamShanmugam Please review

@bipuladh bipuladh force-pushed the dr-brownfield-odf-cluster-overview branch from bcf9d6c to a9a2a9c Compare November 7, 2023 08:50
@bipuladh
Copy link
Contributor

bipuladh commented Nov 7, 2023

Please add screenshots

@TimothyAsirJeyasing
Copy link
Contributor Author

TimothyAsirJeyasing commented Nov 7, 2023

image

Comment on lines 46 to 47
export const DISASTER_RECOVERY_TARGET_ANNOTATION =
'ocs.openshift.io/clusterIsDisasterRecoveryTarget';
Copy link
Contributor

Choose a reason for hiding this comment

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

import this constant from odf core

Comment on lines 49 to 53
export enum DRSetupStatus {
InProgress = 'In Progress',
Pending = 'Pending',
Completed = 'Completed',
}
Copy link
Contributor

Choose a reason for hiding this comment

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

this is not belongs to common, move to new file

export const DISASTER_RECOVERY_TARGET_ANNOTATION =
'ocs.openshift.io/clusterIsDisasterRecoveryTarget';

export enum DRSetupStatus {
Copy link
Contributor

Choose a reason for hiding this comment

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

It is not DR status, it is migration status, please check with Santhos once

@@ -60,6 +60,7 @@ export const DetailsCard: React.FC = () => {
: t('Disabled');

const ocsName = getName(resourcesObj['ocs'].data?.[0]);
//const disasterRecoveryStatus = getDRsetupStatus();
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
//const disasterRecoveryStatus = getDRsetupStatus();

Copy link
Contributor

Choose a reason for hiding this comment

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

delete this line

Comment on lines 40 to 37
const [data, loaded, loadError] = useK8sList<CephClusterKind>(
CephClusterModel,
CEPH_NS
);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const [data, loaded, loadError] = useK8sList<CephClusterKind>(
CephClusterModel,
CEPH_NS
);
const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>(
CephClusterModel,
CEPH_NS
);

<div
style={{ display: 'flex', justifyContent: 'space-between' }}
>
<p>{dRSetupStatus}</p>
Copy link
Contributor

Choose a reason for hiding this comment

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

dRSetupStatus is not translated

{loaded && !loadError ? (
<div>
<div
style={{ display: 'flex', justifyContent: 'space-between' }}
Copy link
Contributor

Choose a reason for hiding this comment

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

We dont need flux here

Comment on lines 198 to 229
<Modal
variant={ModalVariant.medium}
title={t('Configure cluster for Regional-DR?')}
isOpen={isOpen}
onClose={closeModal}
actions={[
<Button
key="close"
variant="secondary"
onClick={closeModal}
>
Close
</Button>,
<Button
key="optimize"
variant="primary"
onClick={handleOptimize}
>
Optimize
</Button>,
]}
>
<Trans t={t}>
<p>
Optimise the cluster for a Regional-DR setup by migrating
OSDs. Migration may take sometime depending on several
factors. To learn more about OSDs migration best practices
and its consequences refer to the documentation
</p>
</Trans>
</Modal>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

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

move this as separate component

</Button>,
]}
>
<Trans t={t}>
Copy link
Contributor

Choose a reason for hiding this comment

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

simply use t('') here

Comment on lines 233 to 237
{updateError && (
<Alert isInline variant="danger" title={t('An error occurred')}>
{updateError}
</Alert>
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

displaying alert on details card is not correct

@SanjalKatiyar
Copy link
Collaborator

are these brownfield changes only for internal mode dashboard or external mode as well ??

Comment on lines 194 to 216
{dRSetupStatus === DRSetupStatus.Pending && (
<a onClick={openModal}>Optimize</a>
)}
</div>
<Modal
variant={ModalVariant.medium}
title={t('Configure cluster for Regional-DR?')}
isOpen={isOpen}
onClose={closeModal}
actions={[
<Button
key="close"
variant="secondary"
onClick={closeModal}
>
Close
</Button>,
<Button
key="optimize"
variant="primary"
onClick={handleOptimize}
>
Optimize
Copy link
Collaborator

Choose a reason for hiding this comment

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

move all this to separate component... instead of polluting existing one (these changes are temporary as well)...

Comment on lines 58 to 75

updatedResource.metadata.annotations = {
...getAnnotations(updatedResource, {}),
[DISASTER_RECOVERY_TARGET_ANNOTATION]: 'true',
};

const updateData = {
model: CephClusterModel,
data: updatedResource,
};

k8sUpdate(updateData)
.then(() => {
closeModal();
})
.catch((err) => {
setUpdateError(err.message);
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

move all this to separate entity... instead of polluting existing component (these changes are temporary as well)...

@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from a9a2a9c to 4be4ca7 Compare November 17, 2023 15:32
@TimothyAsirJeyasing
Copy link
Contributor Author

Screenshot from 2023-11-17 21-00-06

@@ -0,0 +1,109 @@
import * as React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename this file as osdMigrationModal.tsx and move this inside the modals folder with some subfolder.

} from '@patternfly/react-core';
import { MigrationStatus, getMigrationStatus } from './constants/osd-migration';

const OptimizeModal: React.FC<OptimizeModalProps> = ({ cephData }) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const OptimizeModal: React.FC<OptimizeModalProps> = ({ cephData }) => {
const OSDMigrationModal: React.FC<OSDMigrationModalProps> = ({ cephData }) => {

Unknown = '',
}

export const getMigrationStatus = (cephData) => {
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 20, 2023

Choose a reason for hiding this comment

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

move this inside utils folder under ocs.ts, And rename this function as getOSDMigrationStatus

Comment on lines 5 to 8
InProgress = 'In Progress',
Pending = 'Pending',
Completed = 'Completed',
Unknown = '',
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
InProgress = 'In Progress',
Pending = 'Pending',
Completed = 'Completed',
Unknown = '',
IN_PROGRESS = 'In Progress',
PENDING = 'Pending',
COMPLETED = 'Completed',
UNKNOWN = '',

Unknown = '',
}

export const getMigrationStatus = (cephData) => {
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 20, 2023

Choose a reason for hiding this comment

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

Suggested change
export const getMigrationStatus = (cephData) => {
export const getMigrationStatus = (ceph: CephClusterKind) => {

pass ceph object directly , dont pass list

}

export const getMigrationStatus = (cephData) => {
if (cephData && cephData.length > 0) {
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 20, 2023

Choose a reason for hiding this comment

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

Suggested change
if (cephData && cephData.length > 0) {
if (!!ceph) {


export const getMigrationStatus = (cephData) => {
if (cephData && cephData.length > 0) {
const ceph = cephData[0];
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const ceph = cephData[0];

return MigrationStatus.Completed;
}

return MigrationStatus.Unknown;
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
return MigrationStatus.Unknown;

export const getMigrationStatus = (cephData) => {
if (cephData && cephData.length > 0) {
const ceph = cephData[0];
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore'];
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore'];
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.[BLUESTORE];

use constant

const ceph = cephData[0];
const bluestoreCount = ceph?.status?.storage?.osd?.storeType?.['bluestore'];
const bluestoreRdrCount =
ceph?.status?.storage?.osd?.storeType?.['bluestore-rdr'];
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
ceph?.status?.storage?.osd?.storeType?.['bluestore-rdr'];
ceph?.status?.storage?.osd?.storeType?.[BLUESTORE_RDR];

use constant


const DetailsCard: React.FC = () => {
const { t } = useCustomTranslation();
const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>(
CephClusterModel,
CEPH_NS
Copy link
Contributor

Choose a reason for hiding this comment

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

what is the plan for multi storage cluster, here CEPH_NS is called a constant?

@@ -100,6 +112,14 @@ const DetailsCard: React.FC = () => {
>
{inTransitEncryptionStatus}
</DetailItem>
<DetailItem
key="dr_setup_state"
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
key="dr_setup_state"
key="osd_migration"

isLoading={!cephLoaded}
error={cephLoadError}
>
<OptimizeModal cephData={cephData} />
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<OptimizeModal cephData={cephData} />
<OptimizeModal cephData={cephData?.[0]} />

@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch 3 times, most recently from 1034dbc to 72ce5b7 Compare November 21, 2023 12:15

const [cephData, cephLoaded, cephLoadError] = useK8sList<CephClusterKind>(
CephClusterModel,
ocsData?.[0].metadata?.namespace
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
ocsData?.[0].metadata?.namespace
getNamespace(ocsData?.[0])

const { t } = useCustomTranslation();
const dRSetupStatus: string = getOSDMigrationStatus(cephData);
const [isOpen, setOpen] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
const [errorMessage, setErrorMessage] = React.useState<string>('');

cephData,
}) => {
const { t } = useCustomTranslation();
const dRSetupStatus: string = getOSDMigrationStatus(cephData);
Copy link
Contributor

Choose a reason for hiding this comment

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

this line will render again and again, use useMemo to prevent


const closeModal = () => {
setOpen(false);
setErrorMessage(null);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
setErrorMessage(null);
setErrorMessage('');

};

return (
<div>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<div>
<>

onClose={closeModal}
actions={[
<Button key="close" variant="secondary" onClick={closeModal}>
Close
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
Close
t('Close')

Close
</Button>,
<Button key="optimize" variant="primary" onClick={handleOptimize}>
Optimize
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
Optimize
t('Optimize')

Comment on lines 15 to 16
ModalBoxHeader,
ModalBoxBody,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
ModalBoxHeader,
ModalBoxBody,

Comment on lines 92 to 104
<p>
{t(
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.'
)}
</p>
{errorMessage && (
<ModalBoxHeader>
<Title headingLevel="h2" size="lg">
Error
</Title>
</ModalBoxHeader>
)}
<ModalBoxBody>{errorMessage}</ModalBoxBody>
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<p>
{t(
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.'
)}
</p>
{errorMessage && (
<ModalBoxHeader>
<Title headingLevel="h2" size="lg">
Error
</Title>
</ModalBoxHeader>
)}
<ModalBoxBody>{errorMessage}</ModalBoxBody>

use the title & description prop of the modal to pass this text.

Comment on lines 92 to 104
<p>
{t(
'Configure the cluster for a Regional-DR setup by migrating OSDs. Migration may take sometime depending on several factors. To learn more about OSDs migration best practices and its consequences refer to the documentation.'
)}
</p>
{errorMessage && (
<ModalBoxHeader>
<Title headingLevel="h2" size="lg">
Error
</Title>
</ModalBoxHeader>
)}
<ModalBoxBody>{errorMessage}</ModalBoxBody>
Copy link
Contributor

Choose a reason for hiding this comment

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

the modal body should be inside <ModalBody> tag

Copy link
Contributor

Choose a reason for hiding this comment

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

Also are simply displaying error messages as a text inside modal body ?

Comment on lines 5 to 8
export const IN_PROGRESS = 'In Progress';
export const PENDING = 'Pending';
export const COMPLETED = 'Completed';
export const FAILED = 'Failed';
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 21, 2023

Choose a reason for hiding this comment

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

I think you misunderstood to keep it as constants,, Convert this status as enum and move it to the constant directory. under dataProtection.ts

Comment on lines 9 to 10
export const BLUESTORE_RDR = 'bluestore-rdr';
export const BLUESTORE = 'bluestore';
Copy link
Contributor

@GowthamShanmugam GowthamShanmugam Nov 21, 2023

Choose a reason for hiding this comment

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

move this to a constant file dataProtection.ts

@@ -0,0 +1,71 @@
import React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

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

Rename this file as osdMigrationModal.spec.tsx and keep it along with original file. Move this to same directory of osdMigrationModal.tsx

@openshift-ci openshift-ci bot removed the lgtm label Nov 27, 2023
Comment on lines 9 to 13
return ceph.status?.storage?.osd?.storeType?.[BLUESTORE] || 0;
};

const getBluestoreRdrCount = (ceph: CephClusterKind): number => {
return ceph.status?.storage?.osd?.storeType?.[BLUESTORE_RDR] || 0;
Copy link
Collaborator

Choose a reason for hiding this comment

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

create a separate function under utils which returns ceph.status?.storage?.osd?.storeType, and use that every where needed... this will be used in another files as well related to this epic...

Copy link
Collaborator

Choose a reason for hiding this comment

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

eg:

const getBluestoreCount = (ceph: CephClusterKind): number => {
  return getCephStoreType(ceph)?.[BLUESTORE] || 0;
};

@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from 6494c93 to 464be9d Compare November 28, 2023 05:48
@SanjalKatiyar
Copy link
Collaborator

/approve

@SanjalKatiyar
Copy link
Collaborator

/approve cancel

@openshift-ci openshift-ci bot removed the approved label Nov 28, 2023
@SanjalKatiyar
Copy link
Collaborator

plz update PR and commit title, this PR is not for "enable DR support"

@TimothyAsirJeyasing
Copy link
Contributor Author

/retitle Provide option to optimise cluster for Regional-DR

@openshift-ci openshift-ci bot changed the title Provide option to enable DR support Provide option to optimise cluster for Regional-DR Nov 28, 2023
@SanjalKatiyar
Copy link
Collaborator

/retitle Provide option to optimise cluster for Regional-DR

as suggested above, plz update commit title as well (not just PR title)...

@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from 464be9d to 19d72b1 Compare November 29, 2023 07:08
@openshift-ci openshift-ci bot added the lgtm label Nov 29, 2023
@GowthamShanmugam
Copy link
Contributor

/approve cancel

@SanjalKatiyar
Copy link
Collaborator

LGTM

type OSDMigrationDetailsProps = {
cephData: CephClusterKind;
ocsData: StorageClusterKind;
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

rename file to osd-migration-details.tsx

).toBeInTheDocument();
});
});
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

rename file to osd-migration-details...

}

export const BLUESTORE_RDR = 'bluestore-rdr';
export const BLUESTORE = 'bluestore';
Copy link
Collaborator

Choose a reason for hiding this comment

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

plz rename this file to data-protection...

@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from 19d72b1 to 3ad33a6 Compare November 30, 2023 04:56
@openshift-ci openshift-ci bot removed the lgtm label Nov 30, 2023
@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from 3ad33a6 to 1422907 Compare November 30, 2023 17:07
@TimothyAsirJeyasing TimothyAsirJeyasing force-pushed the dr-brownfield-odf-cluster-overview branch from 1422907 to 74e1979 Compare December 1, 2023 14:44
@SanjalKatiyar
Copy link
Collaborator

/approve
/lgtm

Copy link
Contributor

openshift-ci bot commented Dec 3, 2023

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: SanjalKatiyar, TimothyAsirJeyasing

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci openshift-ci bot added the approved label Dec 3, 2023
@openshift-merge-bot openshift-merge-bot bot merged commit 046ef75 into red-hat-storage:master Dec 3, 2023
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants