This is an automated email from the ASF dual-hosted git repository.
adoroszlai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new 39a234752b1 HDDS-14823. Make PipelineID column sticky on Pipeline Tab
(#9910)
39a234752b1 is described below
commit 39a234752b19a8fffadb69ff622888cb611658c1
Author: Arun Sarin <[email protected]>
AuthorDate: Sun Mar 15 00:43:22 2026 +0530
HDDS-14823. Make PipelineID column sticky on Pipeline Tab (#9910)
---
.../src/v2/components/select/multiSelect.tsx | 18 ++++++++++++------
.../src/v2/components/tables/pipelinesTable.tsx | 2 +-
.../src/v2/constants/select.constants.tsx | 4 ++++
3 files changed, 17 insertions(+), 7 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
index 03dd12b5698..400b2d3c290 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
@@ -97,14 +97,17 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
)}
{isDisabled
? placeholder
- : `${placeholder}: ${selected.length} selected`
-}
+ : `${placeholder}: ${selected.filter((opt) => opt.value !==
fixedColumn).length} selected`
+ }
</components.ValueContainer>
);
};
const finalStyles = {...selectStyles, ...style ?? {}}
+ const fixedOption = fixedColumn ? options.find((opt) => opt.value ===
fixedColumn) : undefined;
+ const selectableOptions = fixedColumn ? options.filter((opt) => opt.value
!== fixedColumn) : options;
+
return (
<ReactSelect
{...props}
@@ -115,17 +118,20 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
isSearchable={false}
controlShouldRenderValue={false}
classNamePrefix='multi-select'
- options={options.map((opt) => ({...opt, isDisabled: (opt.value ===
fixedColumn)}))}
+ options={selectableOptions}
components={{
ValueContainer,
Option
}}
+ menuPortalTarget={document.body}
placeholder={placeholder}
- value={selected}
+ value={selected.filter((opt) => opt.value !== fixedColumn)}
isDisabled={isDisabled}
onChange={(selected: ValueType<Option, true>) => {
- if (selected?.length === options.length) return onChange!(options);
- return onChange!(selected);
+ const selectedOpts = (selected as Option[]) ?? [];
+ const withFixed = fixedOption ? [fixedOption, ...selectedOpts] :
selectedOpts;
+ if (selectedOpts.length === selectableOptions.length) return
onChange!(options);
+ return onChange!(withFixed);
}}
styles={finalStyles} />
)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/pipelinesTable.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/pipelinesTable.tsx
index 9d0a8704a1e..92c1e424400 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/pipelinesTable.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/tables/pipelinesTable.tsx
@@ -64,8 +64,8 @@ export const COLUMNS: ColumnsType<Pipeline> = [
title: 'Pipeline ID',
dataIndex: 'pipelineId',
key: 'pipelineId',
+ fixed: 'left',
sorter: (a: Pipeline, b: Pipeline) =>
a.pipelineId.localeCompare(b.pipelineId),
-
},
{
title: 'Replication Type & Factor',
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/select.constants.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/select.constants.tsx
index 465c2533bc2..6b434ac8e87 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/select.constants.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/select.constants.tsx
@@ -58,5 +58,9 @@ export const selectStyles: StylesConfig<Option, true> = {
}),
indicatorSeparator: () => ({
display: 'none'
+ }),
+ menuPortal: (baseStyles) => ({
+ ...baseStyles,
+ zIndex: 9999
})
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
