Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
spacemonkd merged PR #9928: URL: https://github.com/apache/ozone/pull/9928 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
spacemonkd commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4152819091 Thanks for the patch @arunsarin85. Merging this -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
spacemonkd commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r3007515323
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx:
##
@@ -262,16 +262,19 @@ const Buckets: React.FC<{}> = () => {
onChange={handleVolumeChange}
fixedColumn=''
onTagClose={() => { }}
-columnLength={volumeOptions.length} />
+columnLength={volumeOptions.length}
+showSearch={true}
+showSelectAll={true} />
{ }}
-fixedColumn='name'
-columnLength={COLUMNS.length} />
+fixedColumn={['name', 'volumeName']}
+columnLength={COLUMNS.length}
+showSelectAll={true} />
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
arunsarin85 commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4148540157 > @arunsarin85 could you please take a look at the given issue, once it is fixed it'll be good to go @spacemonkd All the above comments are taken care of . Instead of adding z-index . I have added the comment for the approach followed - https://github.com/apache/ozone/pull/9928#discussion_r3002494282 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
spacemonkd commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4147528240 @adoroszlai sorry about that, it makes sense. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
adoroszlai commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4147526639 @spacemonkd It's confusing to see an approved PR with changes requested, even if those changes are simple. The PR list only reflects approved status, not inline comments like that. Please approve only if no more changes are needed, i.e. if workflow should be triggered and PR merged after successful CI. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840. User Experience improvements on Buckets tab [ozone]
arunsarin85 commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r3002494282
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx:
##
@@ -262,16 +262,19 @@ const Buckets: React.FC<{}> = () => {
onChange={handleVolumeChange}
fixedColumn=''
onTagClose={() => { }}
-columnLength={volumeOptions.length} />
+columnLength={volumeOptions.length}
+showSearch={true}
+showSelectAll={true} />
{ }}
-fixedColumn='name'
-columnLength={COLUMNS.length} />
+fixedColumn={['name', 'volumeName']}
+columnLength={COLUMNS.length}
+showSelectAll={true} />
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
spacemonkd commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2996373586
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/buckets/buckets.tsx:
##
@@ -262,16 +262,19 @@ const Buckets: React.FC<{}> = () => {
onChange={handleVolumeChange}
fixedColumn=''
onTagClose={() => { }}
-columnLength={volumeOptions.length} />
+columnLength={volumeOptions.length}
+showSearch={true}
+showSelectAll={true} />
{ }}
-fixedColumn='name'
-columnLength={COLUMNS.length} />
+fixedColumn={['name', 'volumeName']}
+columnLength={COLUMNS.length}
+showSelectAll={true} />
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
arunsarin85 commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4136234862 > Hi @arunsarin85, thanks for addressing my reviews. Just some final inputs. > > * For the COLUMNS dropdown do you think we should allow removing the "Volume" column? Since this is also sticky it might make more sense to keep Volume and Buckets as the mandatory columns. > * Also do we need search field in the COLUMNS dropdown? For the Volumes dropdown it makes sense as users might want to quickly search a volume and select that only or exclude it, but for the columns maybe we can remove the searchbar. Hi @spacemonkd , Thanks for the suggestion . I have dropped the search box from the coloumns drop - review comment as part of second comment . Regarding comment 1 , its already taken care of and column and volumes are not displayed as search option. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
spacemonkd commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4127886855 Hi @arunsarin85, thanks for addressing my reviews. Just some final inputs. - For the COLUMNS dropdown do you think we should allow removing the "Volume" column? Since this is also sticky it might make more sense to keep Volume and Buckets as the mandatory columns. - Also do we need search field in the COLUMNS dropdown? For the Volumes dropdown it makes sense as users might want to quickly search a volume and select that only or exclude it, but for the columns maybe we can remove the searchbar. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
arunsarin85 commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2972839120
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
- const fixedOption = fixedColumn ? options.find((opt) => opt.value ===
fixedColumn) : undefined;
- const selectableOptions = fixedColumn ? options.filter((opt) => opt.value
!== fixedColumn) : options;
+ // Stable MenuList — created once, reads current values from stateRef at
+ // call time to avoid stale closures without re-creating the component type.
+ const MenuListComponent = useMemo(
+() => ({ children, ...menuListProps }: any) => {
+ const {
+searchTerm,
+setSearchTerm,
+showSearch,
+showSelectAll,
+selected,
+selectableOptions,
+fixedOptions,
+options,
+onChange
+ } = stateRef.current;
- return (
+ const allSelected = selectableOptions.length > 0 &&
+selectableOptions.every((opt: Option) => selected.some((s: Option) =>
s.value === opt.value));
+
+ const handleSelectAll = () => {
+onChange([...fixedOptions, ...selectableOptions]);
+ };
+
+ const handleUnselectAll = () => {
+onChange(fixedOptions as Option[]);
+ };
+
+ return (
+
+ {showSearch && (
+ {
+searchInteracting.current = true;
+e.preventDefault();
+ }}
+ onClick={() => {
+const input = (e: any) =>
e?.target?.closest('[data-search-wrapper]')?.querySelector('input');
+const el = document.querySelector('[data-search-wrapper]
input') as HTMLInputElement | null;
+if (el) el.focus();
+ }}
+ onFocus={() => { searchInteracting.current = true; }}
+ onBlur={() => {
+searchInteracting.current = false;
+setTimeout(() => {
+ const container = stateRef.current.containerRef.current;
+ if (container &&
!container.contains(document.activeElement)) {
+stateRef.current.setIsMenuOpen(false);
+stateRef.current.setSearchTerm('');
+ }
+}, 150);
+ }}
+ onKeyDown={(e) => {
+if (e.key === 'Escape') {
+ searchInteracting.current = false;
+ stateRef.current.setIsMenuOpen(false);
+ stateRef.current.setSearchTerm('');
+}
+e.stopPropagation();
+ }}
+ data-search-wrapper='true'
+>
+ ) =>
setSearchTerm(e.target.value)}
+onClick={(e: React.MouseEvent) => e.stopPropagation()}
+style={{
+ width: '100%',
+ padding: '6px 8px',
+ borderRadius: '4px',
+ border: '1px solid #d9d9d9',
+ fontSize: '14px',
+ boxSizing: 'border-box',
+ outline: 'none'
+}}
+ />
+
+ )}
+ {showSelectAll && (
+ e.preventDefault()}
+ onClick={() => allSelected ? handleUnselectAll() :
handleSelectAll()}
+>
+ null}
+style={{ marginRight: '8px', accentColor: '#1AA57A' }}
+ />
+
+{allSelected ? 'Unselect All' : 'Select All'}
+
+
+ )}
+ {children}
+
+ );
+},
+[] // Stable reference — reads current values from stateRef
+ );
+
+ // Only intercept onMenuClose when showSearch is active so we can keep
+ // the dropdown open while the user interacts with the search box.
+ const handleMenuClose = useCallback(() => {
Review Comment:
handleMenuClose is a plain function - no useCallback, didn't import it.
--
This is an automated message from the Apache Git Service.
To respond t
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
arunsarin85 commented on PR #9928: URL: https://github.com/apache/ozone/pull/9928#issuecomment-4107996377 > Added a few comments @arunsarin85, could you take a look? Hi @spacemonkd , I have raised a patch to address these review comments . Please review the changes. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] - To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
arunsarin85 commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2972837031
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
Review Comment:
InputComponent moved out to its own component
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
-
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
arunsarin85 commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2972836629
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
- const fixedOption = fixedColumn ? options.find((opt) => opt.value ===
fixedColumn) : undefined;
- const selectableOptions = fixedColumn ? options.filter((opt) => opt.value
!== fixedColumn) : options;
+ // Stable MenuList — created once, reads current values from stateRef at
+ // call time to avoid stale closures without re-creating the component type.
+ const MenuListComponent = useMemo(
+() => ({ children, ...menuListProps }: any) => {
+ const {
+searchTerm,
+setSearchTerm,
+showSearch,
+showSelectAll,
+selected,
+selectableOptions,
+fixedOptions,
+options,
+onChange
+ } = stateRef.current;
Review Comment:
MenuListComponent moved out of multiSelect.tsx to avoid useMemo
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
-
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
spacemonkd commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2954809158
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
Review Comment:
Similarly for this we can move out to it's own component
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
- const fixedOption = fixedColumn ? options.find((opt) => opt.value ===
fixedColumn) : undefined;
- const selectableOptions = fixedColumn ? options.filter((opt) => opt.value
!== fixedColumn) : options;
+ // Stable MenuList — created once, reads current values from stateRef at
+ // call time to avoid stale closures without re-creating the component type.
+ const MenuListComponent = useMemo(
+() => ({ children, ...menuListProps }: any) => {
+ const {
+searchTerm,
+setSearchTerm,
+showSearch,
+showSelectAll,
+selected,
+selectableOptions,
+fixedOptions,
+options,
+onChange
+ } = stateRef.current;
- return (
+ const allSelected = selectableOptions.length > 0 &&
+selectableOptions.every((opt: Option) => selected.some((s: Option) =>
s.value === opt.value));
+
+ const handleSelectAll = () => {
+onChange([...fixedOptions, ...selectableOptions]);
+ };
+
+ const handleUnselectAll = () => {
+onChange(fixedOptions as Option[]);
+ };
+
+ return (
+
+ {showSearch && (
+ {
+searchInteracting.current = true;
+e.preventDefault();
+ }}
+ onClick={() => {
+const input = (e: any) =>
e?.target?.closest('[data-search-wrapper]')?.querySelector('input');
+const el = document.querySelector('[data-search-wrapper]
input') as HTMLInputElement | null;
+if (el) el.focus();
+ }}
+ onFocus={() => { searchInteracting.current = true; }}
+ onBlur={() => {
+searchInteracting.current = false;
+setTimeout(() => {
+ const container = stateRef.current.containerRef.current;
+ if (container &&
!container.contains(document.activeElement)) {
+stateRef.current.setIsMenuOpen(false);
+stateRef.current.setSearchTerm('');
+ }
+}, 150);
+ }}
+ onKeyDown={(e) => {
+if (e.key === 'Escape') {
+ searchInteracting.current = false;
+ stateRef.current.setIsMenuOpen(false);
+ stateRef.current.setSearchTerm('');
+}
+e.stopPropagation();
+ }}
+ data-search-wrapper='true'
+>
+ ) =>
setSearchTerm(e.target.value)}
+onClick={(e: React.MouseEvent) => e.stopPropagation()}
+style={{
+ width: '100%',
+ padding: '6px 8px',
+ borderRadius: '4px',
+
Re: [PR] HDDS-14840 User Experience Improvements on buckets tab. [ozone]
spacemonkd commented on code in PR #9928:
URL: https://github.com/apache/ozone/pull/9928#discussion_r2954801397
##
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx:
##
@@ -97,44 +155,190 @@ const MultiSelect: React.FC = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ : `${placeholder}: ${selected.filter((opt) =>
!fixedKeys.includes(opt.value)).length} selected`
}
);
};
- const finalStyles = {...selectStyles, ...style ?? {}}
+ // Stable custom Input — suppresses react-select's blur-driven menu close
+ // while the user interacts with the search box inside the menu.
+ const InputComponent = useMemo(
+() => (({ onBlur, ...inputProps }: any) => {
+ const handleBlur = (e: React.FocusEvent) => {
+if (searchInteracting.current) return;
+if (onBlur) onBlur(e);
+ };
+ return ;
+}) as React.FC,
+[] // searchInteracting captured by ref — always current
+ );
- const fixedOption = fixedColumn ? options.find((opt) => opt.value ===
fixedColumn) : undefined;
- const selectableOptions = fixedColumn ? options.filter((opt) => opt.value
!== fixedColumn) : options;
+ // Stable MenuList — created once, reads current values from stateRef at
+ // call time to avoid stale closures without re-creating the component type.
+ const MenuListComponent = useMemo(
+() => ({ children, ...menuListProps }: any) => {
+ const {
+searchTerm,
+setSearchTerm,
+showSearch,
+showSelectAll,
+selected,
+selectableOptions,
+fixedOptions,
+options,
+onChange
+ } = stateRef.current;
Review Comment:
Might be better to move this out to it's own component under select/ to
avoid memoization.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
-
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
