From e490df6564b06bace112ff3a354a269c87318ce6 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Thu, 8 Aug 2024 13:25:06 +0530 Subject: [PATCH 01/16] Initial Volumes commit --- .../webapps/recon/ozone-recon-web/src/app.tsx | 13 +- .../src/v2/components/loader/loader.less | 78 +++++ .../src/v2/components/loader/loader.tsx | 31 ++ .../v2/components/multiSelect/columnTag.tsx | 60 ++++ .../v2/components/multiSelect/multiSelect.tsx | 141 ++++++++ .../components/multiSelect/singleSelect.tsx | 86 +++++ .../src/v2/constants/select.constants.tsx | 62 ++++ .../src/v2/pages/volumes/volumes.less | 35 ++ .../src/v2/pages/volumes/volumes.tsx | 317 ++++++++++++++++++ .../ozone-recon-web/src/v2/routes-v2.tsx | 10 +- .../ozone-recon-web/src/v2/types/acl.types.ts | 47 +++ .../src/v2/types/bucket.types.ts | 55 +++ .../src/v2/types/volume.types.ts | 46 +++ 13 files changed, 974 insertions(+), 7 deletions(-) create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/select.constants.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.less create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/acl.types.ts create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/bucket.types.ts create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index c52fe9efa922..e082ded2d360 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { Suspense } from 'react'; import { Switch as AntDSwitch, Layout } from 'antd'; import NavBar from './components/navBar/navBar'; @@ -28,6 +28,8 @@ import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames'; import './app.less'; +import { GenerateRoutes } from '@/v2/generateRoutes'; +import Loader from '@/v2/components/loader/loader'; const { Header, Content, Footer @@ -65,7 +67,6 @@ class App extends React.Component, IAppState> {
New UI
} onChange={(checked: boolean) => { this.setState({ @@ -80,9 +81,11 @@ class App extends React.Component, IAppState> { {(enableNewUI) - ? routesV2.map( - (route, index) => - ) + ? Loading...}> + {routesV2.map( + (route, index) => + )} + : routes.map( (route, index) => ) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less new file mode 100644 index 000000000000..b228e26f3118 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less @@ -0,0 +1,78 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.loader-circle { + display: inline-block; + height: 4rem; + aspect-ratio: 1; + background: '#1AA57A'; + border-radius: 50%; + filter: blur(20px); +} + +.loader-circle:nth-child(1) { + animation: move-left 3s ease-in-out infinite; + transform: translatex(100%); + + @keyframes move-left { + 50% { + transform: translatex(-200px) + } + 100% { + rotate: 1turn; + } + } +} +.loader-circle:nth-child(2) { + animation: move-right 3s ease-in-out infinite; + transform: translatex(-100%); + + @keyframes move-right { + 50% { + transform: translatex(200px) + } + 100% { + rotate: 1turn; + } + } +} +.loader-circle:nth-child(3) { + animation: move-up 3s ease-in-out infinite; + transform: translatex(-100%); + + @keyframes move-up { + 50% { + transform: translatey(100px) + } + 100% { + rotate: 1turn; + } + } +} + +.main { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; + position: relative; + background: rgba(37, 37, 37); + filter: contrast(20); +} \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx new file mode 100644 index 000000000000..71d14940456e --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx @@ -0,0 +1,31 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from "react" + +const Loader: React.FC = () => { + return ( +
+
+
+
+
+ ) +} + +export default Loader; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx new file mode 100644 index 000000000000..5eb725ae44ea --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx @@ -0,0 +1,60 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from "react"; +import { Tag } from "antd"; +import { createPortal } from "react-dom"; + +export type TagProps = { + label: string; + closable: boolean; + tagRef: React.RefObject; + onClose: (arg0: string) => void; +} + +const ColumnTag: React.FC = ({ + label = '', + closable = true, + tagRef = null, + onClose = () => {} +}) => { + const onPreventMouseDown = (event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + }; + + const handleClose = (label: string) => { + return onClose(label); + } + + if (!tagRef?.current) return null; + + return createPortal( + handleClose(label)} + style={{marginRight: 3}}> + {label} + , + tagRef.current + ); +} + +export default ColumnTag; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx new file mode 100644 index 000000000000..c862867df617 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx @@ -0,0 +1,141 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useMemo } from "react"; +import { createPortal } from "react-dom"; +import { + default as ReactSelect, + Props as ReactSelectProps, + components, + OptionProps, + ValueType +} from 'react-select'; + +import ColumnTag from "@/v2/components/multiSelect/columnTag"; +import { selectStyles } from "@/v2/constants/select.constants"; + + +export type Option = { + label: string; + value: string; +} + +interface MultiSelectProps extends ReactSelectProps { + options: Option[]; + selected: Option[]; + placeholder: string; + fixedColumn: string; + columnLength: number; + parentRef: React.RefObject; + tagRef: React.RefObject; + onChange: (arg0: ValueType) => void; + onTagClose: (arg0: string) => void; +} + +function getColumnTags( + options: Option[], + tagRef: React.RefObject, + fixedColumn: string, + onClose: (arg0: string) => void) { + let tagsEl: React.ReactElement[] = []; + options.forEach((option) => { + tagsEl.push( + + ) + }); + return tagsEl; +} + +const MultiSelect: React.FC = ({ + options = [], + selected = [], + maxSelected = 5, + placeholder = 'Columns', + fixedColumn, + columnLength, + parentRef, + tagRef, + onTagClose = () => { }, + onChange = () => { }, + ...props +}) => { + + const columnTags = useMemo(() => + getColumnTags( + selected, + tagRef, + fixedColumn, + onTagClose, + ), + [selected] + ); + + const Option: React.FC> = (props) => { + return ( +
+ + null} /> + + +
+ ) + } + + + if (!parentRef?.current) return null; + + return createPortal( + <> + ) => { + if (selected?.length === options.length) return onChange!(options); + return onChange!(selected); + }} + styles={selectStyles} /> + {...columnTags} + , parentRef.current + ); +} + +export default MultiSelect; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx new file mode 100644 index 000000000000..291b5c075442 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx @@ -0,0 +1,86 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useMemo } from "react"; +import { createPortal } from "react-dom"; +import Select, { + Props as ReactSelectProps, + components, + ValueType, + ValueContainerProps, + StylesConfig +} from 'react-select'; + +import { selectStyles } from "@/v2/constants/select.constants"; + + +export type Option = { + label: string; + value: string; +} + +interface SingleSelectProps extends ReactSelectProps { + options: Option[]; + placeholder: string; + parentRef: React.RefObject; + onChange: (arg0: ValueType) => void; +} + + +const SingleSelect: React.FC = ({ + options = [], + placeholder = 'Limit', + parentRef, + onChange = () => { }, + ...props +}) => { + + + const ValueContainer = ({ children, ...props }: ValueContainerProps) => { + const selectedLimit = props.getValue() as Option[] + return ( + + Limit: {selectedLimit[0].label} + + ); + }; + + + if (!parentRef?.current) return null; + + return createPortal( + <> + + } + + return ( + + ) +} + +export default Search; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx similarity index 90% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx index f777370d851a..b208e8d9873e 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/columnTag.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx @@ -20,6 +20,12 @@ import React from "react"; import { Tag } from "antd"; import { createPortal } from "react-dom"; + +/** + * Due to design decisions we are currently not using the Tags + * Until we reach a concensus on a better way to display the filter + * Keeping the code in case we require it in the future + */ export type TagProps = { label: string; closable: boolean; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx similarity index 56% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx index c862867df617..26b324b47ce9 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/multiSelect.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx @@ -16,8 +16,7 @@ * limitations under the License. */ -import React, { useMemo } from "react"; -import { createPortal } from "react-dom"; +import React from "react"; import { default as ReactSelect, Props as ReactSelectProps, @@ -26,7 +25,6 @@ import { ValueType } from 'react-select'; -import ColumnTag from "@/v2/components/multiSelect/columnTag"; import { selectStyles } from "@/v2/constants/select.constants"; @@ -41,30 +39,10 @@ interface MultiSelectProps extends ReactSelectProps { placeholder: string; fixedColumn: string; columnLength: number; - parentRef: React.RefObject; - tagRef: React.RefObject; onChange: (arg0: ValueType) => void; onTagClose: (arg0: string) => void; } -function getColumnTags( - options: Option[], - tagRef: React.RefObject, - fixedColumn: string, - onClose: (arg0: string) => void) { - let tagsEl: React.ReactElement[] = []; - options.forEach((option) => { - tagsEl.push( - - ) - }); - return tagsEl; -} - const MultiSelect: React.FC = ({ options = [], selected = [], @@ -72,23 +50,12 @@ const MultiSelect: React.FC = ({ placeholder = 'Columns', fixedColumn, columnLength, - parentRef, tagRef, onTagClose = () => { }, onChange = () => { }, ...props }) => { - const columnTags = useMemo(() => - getColumnTags( - selected, - tagRef, - fixedColumn, - onTagClose, - ), - [selected] - ); - const Option: React.FC> = (props) => { return (
@@ -108,34 +75,28 @@ const MultiSelect: React.FC = ({ ) } - - if (!parentRef?.current) return null; - - return createPortal( - <> - ) => { - if (selected?.length === options.length) return onChange!(options); - return onChange!(selected); - }} - styles={selectStyles} /> - {...columnTags} - , parentRef.current - ); + return ( + ) => { + if (selected?.length === options.length) return onChange!(options); + return onChange!(selected); + }} + styles={selectStyles} /> + ) } export default MultiSelect; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx similarity index 72% rename from hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx rename to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx index 291b5c075442..60b0a7a432d0 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/multiSelect/singleSelect.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx @@ -16,8 +16,7 @@ * limitations under the License. */ -import React, { useMemo } from "react"; -import { createPortal } from "react-dom"; +import React from "react"; import Select, { Props as ReactSelectProps, components, @@ -37,15 +36,12 @@ export type Option = { interface SingleSelectProps extends ReactSelectProps { options: Option[]; placeholder: string; - parentRef: React.RefObject; onChange: (arg0: ValueType) => void; } - const SingleSelect: React.FC = ({ options = [], placeholder = 'Limit', - parentRef, onChange = () => { }, ...props }) => { @@ -60,26 +56,22 @@ const SingleSelect: React.FC = ({ ); }; - - if (!parentRef?.current) return null; - - return createPortal( - <> - ) => { + return onChange!(selected); + }} + styles={selectStyles as StylesConfig} /> ); } 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 74dffd1e8dfb..465c2533bc23 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 @@ -17,7 +17,7 @@ */ import { StylesConfig } from "react-select"; -import { Option } from "@/v2/components/multiSelect/multiSelect"; +import { Option } from "@/v2/components/select/multiSelect"; export const selectStyles: StylesConfig = { control: (baseStyles, state) => ({ diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.less index 80ae7bce623d..8f4c8ffaf9f2 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.less +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.less @@ -19,12 +19,18 @@ .content-div { min-height: unset; - .table-filter-section { - font-size: 14px; - font-weight: normal; + .table-header-section { display: flex; - column-gap: 8px; - padding: 16px 8px; + justify-content: space-between; + align-items: center; + + .table-filter-section { + font-size: 14px; + font-weight: normal; + display: flex; + column-gap: 8px; + padding: 16px 8px; + } } .tag-block { diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx index d1609fc030b9..2a56814fa2f1 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx @@ -29,7 +29,7 @@ import { ValueType } from 'react-select/src/types'; import QuotaBar from '@/components/quotaBar/quotaBar'; import { AclPanel } from '@/components/aclDrawer/aclDrawer'; import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; -import MultiSelect, { Option } from '@/v2/components/multiSelect/multiSelect'; +import MultiSelect, { Option } from '@/v2/components/select/multiSelect'; import { byteToSize, showDataFetchError } from '@/utils/common'; import { AutoReloadHelper } from '@/utils/autoReloadHelper'; @@ -38,7 +38,26 @@ import { AxiosGetHelper } from "@/utils/axiosRequestHelper"; import { Volume, VolumesState, VolumesResponse } from '@/v2/types/volume.types'; import './volumes.less'; -import SingleSelect from '@/v2/components/multiSelect/singleSelect'; +import SingleSelect from '@/v2/components/select/singleSelect'; +import Search from '@/v2/components/search/search'; + +const SearchableColumnOpts = [ + { + label: 'Volume', + value: 'volume' + }, + { + label: 'Owner', + value: 'owner' + } +] + +const LIMIT_OPTIONS: Option[] = [ + { label: '1000', value: '1000' }, + { label: '5000', value: "5000" }, + { label: '10000', value: "10000" }, + { label: '20000', value: "20000" } +] const Volumes: React.FC<{}> = () => { @@ -50,7 +69,8 @@ const Volumes: React.FC<{}> = () => { dataIndex: 'volume', key: 'volume', sorter: (a: Volume, b: Volume) => a.volume.localeCompare(b.volume), - defaultSortOrder: 'ascend' as const + defaultSortOrder: 'ascend' as const, + width: '15%' }, { title: 'Owner', @@ -135,13 +155,6 @@ const Volumes: React.FC<{}> = () => { value: column.key as string, })); - const LIMIT_OPTIONS: Option[] = [ - { label: '1000', value: '1000' }, - { label: '5000', value: "5000" }, - { label: '10000', value: "10000" }, - { label: '20000', value: "20000" } - ] - const [state, setState] = useState({ data: [], totalCount: 0, @@ -153,8 +166,8 @@ const Volumes: React.FC<{}> = () => { const [loading, setLoading] = useState(false); const [selectedColumns, setSelectedColumns] = useState(defaultColumns); const [selectedLimit, setSelectedLimit] = useState
-
- option.value === 'volume'} - columnLength={COLUMNS.length} /> - +
+
+ option.value === 'volume'} + columnLength={COLUMNS.length} /> + +
+ setSearchTerm(value)} + onChange={(value) => { + setSearchTerm(''); + setSearchColumn(value as 'volume' | 'owner'); + }} />
-
Date: Fri, 9 Aug 2024 11:25:36 +0530 Subject: [PATCH 05/16] Added simple loader, removed unused imports --- .../webapps/recon/ozone-recon-web/src/app.tsx | 6 +- .../src/v2/components/loader/loader.less | 78 ------------------- .../src/v2/components/loader/loader.tsx | 15 +++- .../src/v2/pages/volumes/volumes.tsx | 2 +- 4 files changed, 15 insertions(+), 86 deletions(-) delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index e082ded2d360..91a140847611 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -27,10 +27,10 @@ import { routesV2 } from '@/v2/routes-v2'; import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames'; -import './app.less'; -import { GenerateRoutes } from '@/v2/generateRoutes'; import Loader from '@/v2/components/loader/loader'; +import './app.less'; + const { Header, Content, Footer } = Layout; @@ -81,7 +81,7 @@ class App extends React.Component, IAppState> { {(enableNewUI) - ? Loading...}> + ? }> {routesV2.map( (route, index) => )} diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less deleted file mode 100644 index b228e26f3118..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.less +++ /dev/null @@ -1,78 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.loader-circle { - display: inline-block; - height: 4rem; - aspect-ratio: 1; - background: '#1AA57A'; - border-radius: 50%; - filter: blur(20px); -} - -.loader-circle:nth-child(1) { - animation: move-left 3s ease-in-out infinite; - transform: translatex(100%); - - @keyframes move-left { - 50% { - transform: translatex(-200px) - } - 100% { - rotate: 1turn; - } - } -} -.loader-circle:nth-child(2) { - animation: move-right 3s ease-in-out infinite; - transform: translatex(-100%); - - @keyframes move-right { - 50% { - transform: translatex(200px) - } - 100% { - rotate: 1turn; - } - } -} -.loader-circle:nth-child(3) { - animation: move-up 3s ease-in-out infinite; - transform: translatex(-100%); - - @keyframes move-up { - 50% { - transform: translatey(100px) - } - 100% { - rotate: 1turn; - } - } -} - -.main { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: 100vh; - width: 100vw; - position: relative; - background: rgba(37, 37, 37); - filter: contrast(20); -} \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx index 71d14940456e..488c72016d6b 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx @@ -17,13 +17,20 @@ */ import React from "react" +import { Spin } from "antd" +import { LoadingOutlined } from "@ant-design/icons" + +const loaderStyle: React.CSSProperties = { + height: '100%', + width: '100%', + textAlign: 'center', + paddingTop: '25%' +} const Loader: React.FC = () => { return ( -
-
-
-
+
+ }/>
) } diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx index 2a56814fa2f1..40f98909d5ce 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import moment from 'moment'; import { Table } from 'antd'; import { Link } from 'react-router-dom'; From 6937a05a9f99c3b897e3114c1e359dfa44c90c7f Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Mon, 12 Aug 2024 11:51:59 +0530 Subject: [PATCH 06/16] Removed unused totalCount, added search for Admin column --- .../src/v2/pages/volumes/volumes.tsx | 13 +++++++------ .../ozone-recon-web/src/v2/types/volume.types.ts | 1 - 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx index 40f98909d5ce..7f384b0f04be 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx @@ -49,6 +49,10 @@ const SearchableColumnOpts = [ { label: 'Owner', value: 'owner' + }, + { + label: 'Admin', + value: 'admin' } ] @@ -157,7 +161,6 @@ const Volumes: React.FC<{}> = () => { const [state, setState] = useState({ data: [], - totalCount: 0, lastUpdated: 0, columnOptions: defaultColumns, showPanel: false, @@ -166,7 +169,7 @@ const Volumes: React.FC<{}> = () => { const [loading, setLoading] = useState(false); const [selectedColumns, setSelectedColumns] = useState(defaultColumns); const [selectedLimit, setSelectedLimit] = useState
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts index 27e1d98dbee7..1ce3112ca026 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts @@ -38,7 +38,6 @@ export type VolumesResponse = { export type VolumesState = { data: Volume[]; - totalCount: number; lastUpdated: number; columnOptions: Option[]; currentRow: Volume | Record; From 13472245263b08e28aeda28b1f3597df5abc3396 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 13 Aug 2024 12:37:25 +0530 Subject: [PATCH 07/16] Addressed review comments --- .../src/v2/components/search/search.tsx | 10 ++++------ .../src/v2/components/select/singleSelect.tsx | 4 ++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx index 1b03a4794ce3..eac8ce748270 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx @@ -45,14 +45,12 @@ const Search: React.FC = ({ onChange = () => {} }) => { - let selectFilter = null; - - if (searchColumn) { - selectFilter =
+
+ +
+ ); +}; + +export default AclPanel; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx index 488c72016d6b..b05eaa5f0a59 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/loader/loader.tsx @@ -20,6 +20,7 @@ import React from "react" import { Spin } from "antd" import { LoadingOutlined } from "@ant-design/icons" +// ------------- Constants -------------- // const loaderStyle: React.CSSProperties = { height: '100%', width: '100%', @@ -27,6 +28,7 @@ const loaderStyle: React.CSSProperties = { paddingTop: '25%' } +// ------------- Component -------------- // const Loader: React.FC = () => { return (
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx index 541ffa176ddd..ebb247984b6a 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx @@ -20,6 +20,7 @@ import React from 'react'; import { Input, Select } from 'antd'; import { Option } from '@/v2/components/select/singleSelect'; +// ------------- Types -------------- // type SearchProps = { searchColumn?: string; searchOptions?: Option[]; @@ -38,6 +39,7 @@ type SearchProps = { ) => void; } +// ------------- Component -------------- // const Search: React.FC = ({ searchColumn, searchOptions = [], diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx index 30b26bcc4bdc..f367504286f2 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/columnTag.tsx @@ -21,6 +21,7 @@ import { Tag } from "antd"; import { createPortal } from "react-dom"; +// ------------- Types -------------- // /** * Due to design decisions we are currently not using the Tags * Until we reach a concensus on a better way to display the filter @@ -33,6 +34,7 @@ export type TagProps = { onClose: (arg0: string) => void; } +// ------------- Component -------------- // const ColumnTag: React.FC = ({ label = '', closable = true, 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 9e331bf7328c..7a6b494aaeb6 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 @@ -28,6 +28,7 @@ import { import { selectStyles } from "@/v2/constants/select.constants"; +// ------------- Types -------------- // export type Option = { label: string; value: string; @@ -43,6 +44,7 @@ interface MultiSelectProps extends ReactSelectProps { onTagClose: (arg0: string) => void; } +// ------------- Component -------------- // const MultiSelect: React.FC = ({ options = [], selected = [], diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx index d3761beb38d3..aad354d9c58f 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx @@ -28,6 +28,7 @@ import Select, { import { selectStyles } from "@/v2/constants/select.constants"; +// ------------- Types -------------- // export type Option = { label: string; value: string; @@ -39,6 +40,7 @@ interface SingleSelectProps extends ReactSelectProps { onChange: (arg0: ValueType) => void; } +// ------------- Component -------------- // const SingleSelect: React.FC = ({ options = [], placeholder = 'Limit', diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/acl.constants.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/acl.constants.tsx new file mode 100644 index 000000000000..d1cc54dab2cd --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/acl.constants.tsx @@ -0,0 +1,37 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export const AclIdColorMap = { + USER: 'green', + GROUP: 'blue', + WORLD: 'magenta', + ANONYMOUS: 'gray', + CLIENT_IP: 'gold' +}; + +export const AclRightsColorMap = { + READ: 'green', + WRITE: 'blue', + CREATE: 'orange', + LIST: 'magenta', + DELETE: 'red', + READ_ACL: 'lime', + WRITE_ACL: 'purple', + ALL: 'gold', + NONE: 'gray' +}; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx index 7f384b0f04be..f037a7a1f11e 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx @@ -27,7 +27,7 @@ import { import { ValueType } from 'react-select/src/types'; import QuotaBar from '@/components/quotaBar/quotaBar'; -import { AclPanel } from '@/components/aclDrawer/aclDrawer'; +import AclPanel from '@/v2/components/aclDrawer/aclDrawer'; import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; import MultiSelect, { Option } from '@/v2/components/select/multiSelect'; @@ -163,7 +163,6 @@ const Volumes: React.FC<{}> = () => { data: [], lastUpdated: 0, columnOptions: defaultColumns, - showPanel: false, currentRow: {} }); const [loading, setLoading] = useState(false); @@ -171,6 +170,7 @@ const Volumes: React.FC<{}> = () => { const [selectedLimit, setSelectedLimit] = useState
- + setShowPanel(false)}/>
); diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts index 1ce3112ca026..67f007706a44 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/volume.types.ts @@ -41,5 +41,4 @@ export type VolumesState = { lastUpdated: number; columnOptions: Option[]; currentRow: Volume | Record; - showPanel: boolean; } From 021c6d655e5334e5c8b0b505d7e86e85fde0cbe5 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Fri, 16 Aug 2024 19:40:58 +0530 Subject: [PATCH 12/16] Migrated fix for select dropdown on isSearchable false --- .../src/v2/components/select/singleSelect.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx index aad354d9c58f..41ab03f5982c 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import React, { Children } from "react"; +import React from "react"; import Select, { Props as ReactSelectProps, components, @@ -53,14 +53,13 @@ const SingleSelect: React.FC = ({ const selectedLimit = props.getValue() as Option[]; return ( - {Children.map(children, (child) => ( - !props.hasValue || - (child as React.ReactElement ( + ((child as React.ReactElement> - | React.ReactPortal)!.type === components.Input + | React.ReactPortal)?.type as React.JSXElementConstructor)).name === "DummyInput" ? child : null - ))} + )} Limit: {selectedLimit[0]?.label ?? ''} ); @@ -71,8 +70,8 @@ const SingleSelect: React.FC = ({ {...props} isClearable={false} closeMenuOnSelect={true} - isSearchable={false} classNamePrefix='single-select' + isSearchable={false} options={options} components={{ ValueContainer From ff742d99ed8ef565c82a1dce18cb0285f5eb2acb Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Mon, 19 Aug 2024 11:56:02 +0530 Subject: [PATCH 13/16] Disable the disable switch --- .../webapps/recon/ozone-recon-web/src/app.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index 91a140847611..c52fe9efa922 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import React, { Suspense } from 'react'; +import React from 'react'; import { Switch as AntDSwitch, Layout } from 'antd'; import NavBar from './components/navBar/navBar'; @@ -27,8 +27,6 @@ import { routesV2 } from '@/v2/routes-v2'; import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames'; -import Loader from '@/v2/components/loader/loader'; - import './app.less'; const { @@ -67,6 +65,7 @@ class App extends React.Component, IAppState> {
New UI
} onChange={(checked: boolean) => { this.setState({ @@ -81,11 +80,9 @@ class App extends React.Component, IAppState> { {(enableNewUI) - ? }> - {routesV2.map( - (route, index) => - )} - + ? routesV2.map( + (route, index) => + ) : routes.map( (route, index) => ) From 5858ec206341e510c0b8ce7dd8d01c1a3c31ae23 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Mon, 19 Aug 2024 11:58:20 +0530 Subject: [PATCH 14/16] Add suspense on routes --- .../webapps/recon/ozone-recon-web/src/app.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index c52fe9efa922..0ad6aa3f174c 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -16,7 +16,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { Suspense } from 'react'; import { Switch as AntDSwitch, Layout } from 'antd'; import NavBar from './components/navBar/navBar'; @@ -27,6 +27,8 @@ import { routesV2 } from '@/v2/routes-v2'; import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames'; +import Loader from '@/v2/components/loader/loader'; + import './app.less'; const { @@ -80,9 +82,11 @@ class App extends React.Component, IAppState> { {(enableNewUI) - ? routesV2.map( - (route, index) => - ) + ? }> + {routesV2.map( + (route, index) => + )} + : routes.map( (route, index) => ) From 94c1798df41449e5057e9828e1fe5a30e2bdce49 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Mon, 19 Aug 2024 12:52:30 +0530 Subject: [PATCH 15/16] Ignore network cancelled requests --- .../webapps/recon/ozone-recon-web/src/utils/common.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx index 6886fd189f6c..f641b8797d9e 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/common.tsx @@ -44,9 +44,8 @@ const showInfoNotification = (title: string, description: string) => { export const showDataFetchError = (error: string) => { let title = 'Error while fetching data'; - if (error.includes('CanceledError')) { - error = 'Previous request cancelled because context changed' - } + + if (error.includes('CanceledError')) return; if (error.includes('metadata')) { title = 'Metadata Initialization:'; showInfoNotification(title, error); From 837304d926c9070bcbbd5e6cd7e917e4523c9640 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Mon, 19 Aug 2024 17:43:40 +0530 Subject: [PATCH 16/16] Removed manual search, added debounce to auto search --- .../src/v2/components/search/search.tsx | 18 +++++----- .../src/v2/hooks/debounce.hook.tsx | 35 +++++++++++++++++++ .../src/v2/pages/volumes/volumes.tsx | 27 ++++++++------ 3 files changed, 61 insertions(+), 19 deletions(-) create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/hooks/debounce.hook.tsx diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx index ebb247984b6a..21d4341787ed 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx @@ -18,18 +18,16 @@ import React from 'react'; import { Input, Select } from 'antd'; + import { Option } from '@/v2/components/select/singleSelect'; // ------------- Types -------------- // type SearchProps = { searchColumn?: string; + searchInput: string; searchOptions?: Option[]; - onSearch: ( - arg0: string, - arg1: React.ChangeEvent - | React.MouseEvent - | React.KeyboardEvent - | undefined + onSearchChange: ( + arg0: React.ChangeEvent ) => void; onChange: ( value: string, @@ -42,8 +40,9 @@ type SearchProps = { // ------------- Component -------------- // const Search: React.FC = ({ searchColumn, + searchInput = '', searchOptions = [], - onSearch = () => {}, // Assign default value as a void function + onSearchChange = () => {}, onChange = () => {} // Assign default value as a void function }) => { @@ -55,11 +54,12 @@ const Search: React.FC = ({ : null return ( - (value: T, timeout: number): T { + const [debounceValue, setDebounceValue] = React.useState(value); + + React.useEffect(() => { + const timeoutHandler = setTimeout(() => { + setDebounceValue(value); + }, timeout); + + return () => { + clearTimeout(timeoutHandler); + } + }, [value, timeout]); // Need to set new timeout anytime the value or timeout duration changes + + return debounceValue; +} diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx index f037a7a1f11e..a5918ac6ce6c 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx @@ -30,16 +30,21 @@ import QuotaBar from '@/components/quotaBar/quotaBar'; import AclPanel from '@/v2/components/aclDrawer/aclDrawer'; import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; import MultiSelect, { Option } from '@/v2/components/select/multiSelect'; +import SingleSelect from '@/v2/components/select/singleSelect'; +import Search from '@/v2/components/search/search'; import { byteToSize, showDataFetchError } from '@/utils/common'; import { AutoReloadHelper } from '@/utils/autoReloadHelper'; import { AxiosGetHelper } from "@/utils/axiosRequestHelper"; +import { useDebounce } from '@/v2/hooks/debounce.hook'; -import { Volume, VolumesState, VolumesResponse } from '@/v2/types/volume.types'; +import { + Volume, + VolumesState, + VolumesResponse +} from '@/v2/types/volume.types'; import './volumes.less'; -import SingleSelect from '@/v2/components/select/singleSelect'; -import Search from '@/v2/components/search/search'; const SearchableColumnOpts = [ { @@ -172,6 +177,8 @@ const Volumes: React.FC<{}> = () => { const [searchTerm, setSearchTerm] = useState(''); const [showPanel, setShowPanel] = useState(false); + const debouncedSearch = useDebounce(searchTerm, 300); + const loadData = () => { setLoading(true); @@ -204,14 +211,9 @@ const Volumes: React.FC<{}> = () => { ...state, data, lastUpdated: Number(moment()), - showPanel: false }); setLoading(false); }).catch(error => { - setState({ - ...state, - showPanel: false - }); setLoading(false); showDataFetchError(error.toString()); }); @@ -266,7 +268,9 @@ const Volumes: React.FC<{}> = () => { } function getFilteredData(data: Volume[]) { - return data.filter((volume: Volume) => volume[searchColumn].includes(searchTerm)) + return data.filter( + (volume: Volume) => volume[searchColumn].includes(debouncedSearch) + ); } @@ -313,8 +317,11 @@ const Volumes: React.FC<{}> = () => {
setSearchTerm(value)} + onSearchChange={ + (e: React.ChangeEvent) => setSearchTerm(e.target.value) + } onChange={(value) => { setSearchTerm(''); setSearchColumn(value as 'volume' | 'owner' | 'admin');