You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@ozone.apache.org by "devabhishekpal (via GitHub)" <gi...@apache.org> on 2024/08/08 08:04:41 UTC
[PR] Initial Volumes commit [ozone]
devabhishekpal opened a new pull request, #7048:
URL: https://github.com/apache/ozone/pull/7048
## What changes were proposed in this pull request?
This PR will add a new Overview page which contains a better implementation for the UI
Please describe your PR in detail:
* This PR adds a new Volumes Page with improved layout and design.
* The new page would help to eventually improve the overall look and feel for Recon
* Currently the page is disabled to the user so as to not affect any existing functionality
* Apart from this it also shifts towards lazy loading pages so that we can efficiently split the build into smaller chunks
## What is the link to the Apache JIRA
https://issues.apache.org/jira/browse/HDDS-11155
## How was this patch tested?
This patch was tested manually via both localhost and building and running Ozone via docker
Screenshots:
| Screenshot | Description |
|-------------|------------|
|<img width="1726" alt="Screenshot 2024-08-07 at 12 14 53" src="https://github.com/user-attachments/assets/1e711028-b1e3-48ab-a3c6-f3f98e7320d4">|Volumes Page|
|<img width="1721" alt="Screenshot 2024-08-07 at 12 15 03" src="https://github.com/user-attachments/assets/be47c5c7-1e87-4069-95f6-7d12da277131">| Columns Selector Dropdown |
|<img width="1724" alt="Screenshot 2024-08-07 at 12 15 21" src="https://github.com/user-attachments/assets/c7819041-48ae-4af6-a8e6-51b9e5346439">| Limit Selector Dropdown
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719508179
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -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';
Review Comment:
Hi @ArafatKhan2198, thanks for pointing this out.
Fixed in [4947f05](https://github.com/apache/ozone/pull/7048/commits/4947f05588005938682fad69859a875a2141e2bf)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2291827378
Hi @smitajoshi12, current loader animation is attached below relative to screen size.
I think we won't require a larger loader size as it will occupy the screen space more than required and look odd.
Please do let me know what you think and I can go ahead with increasing the size/
Thanks
https://github.com/user-attachments/assets/02e7a1af-4f8a-41cb-9ec4-dd5ef6c6e6b9
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devmadhuu (via GitHub)" <gi...@apache.org>.
devmadhuu commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2295792563
I am getting below `NS_BINDING_ABORTED` error for the first time when we landup on volumes page from Overview page. Pls check this.
<img width="1713" alt="image" src="https://github.com/user-attachments/assets/b1c24d04-a28a-44a3-9351-27395e890976">
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2296432840
Hi @devmadhuu, thanks for your inputs, changed this in the latest PR.
Added a debounce with timeout of 300ms. Now we do not need to press any search button, but whatever we will be typing in that 300ms timeframe will be used as a search term till we type again.
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devmadhuu (via GitHub)" <gi...@apache.org>.
devmadhuu commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2295814484
> Hi @devmadhuu, thanks for pointing this out. So NS_BINDING_ABORTED is coming because when we are switching the context/page we are aborting any background requests that might be present. Since when we are switching the page from V1 to V2 we are by default mounting new components, this is being thrown as all background requests are being rejected. You might also be seeing the pop-up telling previous request was cancelled.
IMO, user might not be interested in that UI popup for error. Backend in F12 window for debugging is OK, but we shouldn't show on UI which is of no interest to user what we are doing technically. So whenever any background requests being cancelled or terminated, pls make sure we don't know this pop-up message. Its of no relevance to end user.
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714782429
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
+}) => {
+
+ let selectFilter = null;
+
+ if (searchColumn) {
+ selectFilter = <Select
+ defaultValue={searchColumn}
+ options={searchOptions}
+ onChange={onChange} />
+ }
Review Comment:
Addressed in the latest commit [1347224](https://github.com/apache/ozone/pull/7048/commits/13472245263b08e28aeda28b1f3597df5abc3396)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2295808835
Hi @devmadhuu, thanks for pointing this out.
So NS_BINDING_ABORTED is coming because when we are switching the context/page we are aborting any background requests that might be present.
Since when we are switching the page from V1 to V2 we are by default mounting new components, this is being thrown as all background requests are being rejected.
You might also be seeing the pop-up telling previous request was cancelled.
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714764990
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
Review Comment:
So Option is being imported for the type definitions for the search dropdown
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "ArafatKhan2198 (via GitHub)" <gi...@apache.org>.
ArafatKhan2198 merged PR #7048:
URL: https://github.com/apache/ozone/pull/7048
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714784515
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
Review Comment:
Addressed in [6923654](https://github.com/apache/ozone/pull/7048/commits/6923654ea73aa4a8848294c98e19dfd6ff49b77f)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2286151922
Hi @devmadhuu, thanks for the extensive review.
Could you please take another look?
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "ArafatKhan2198 (via GitHub)" <gi...@apache.org>.
ArafatKhan2198 commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2297988123
Thank you, @devabhishekpal, for your excellent work on this improvement—the new UI will greatly enhance the user experience & thanks @devmadhuu for the thorough review.
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714782168
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
+}) => {
+
+ let selectFilter = null;
Review Comment:
Addressed in the latest commit [1347224](https://github.com/apache/ozone/pull/7048/commits/13472245263b08e28aeda28b1f3597df5abc3396)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719468217
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -16,7 +16,7 @@
* limitations under the License.
*/
Review Comment:
Yes, currently we found that adding the tags is adding an extra step to a simple task, hence for the time being we have stuck with just using the dropdown to select/de-select until we find a better way to implement this selection which is more intuitive
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714787636
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
Review Comment:
When using defaultProps actually I tested with React v18 as well to future-proof the code.
I get warnings as React will deprecate the defaultProps in future releases.
Reference proposal for the same is [here](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md)
I believe it would be better to write the newer syntax so that we can seamlessly upgrade the libraries in the future
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1715219049
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
Review Comment:
Added the comments for the functions for other contributors to better understand
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2286152653
@smitajoshi12 Could you please take another look as well?
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2295846289
Thanks for your inputs @devmadhuu.
Yes I believe since this is already being logged inside the network tab as cancelled request, we can remove the notifications from the UI.
Removed it in the latest commit [94c1798](https://github.com/apache/ozone/pull/7048/commits/94c1798df41449e5057e9828e1fe5a30e2bdce49)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714787636
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
Review Comment:
When using defaultProps actually I tested with React v18 as well to future-proof the code.
I get the following warning as React will deprecate the defaultProps in future releases.
<img width="552" alt="Screenshot 2024-08-13 at 12 33 16" src="https://github.com/user-attachments/assets/98a28fa6-ddf4-42b3-9c5c-fef97b46ca08">
Reference proposal for the same is [here](https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md)
I believe it would be better to write the newer syntax so that we can seamlessly upgrade the libraries in the future
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719473390
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx:
##########
@@ -0,0 +1,342 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import moment from 'moment';
+import { Table } from 'antd';
+import { Link } from 'react-router-dom';
+import {
+ TablePaginationConfig,
+ ColumnsType
+} from 'antd/es/table';
+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/select/multiSelect';
+
+import { byteToSize, showDataFetchError } from '@/utils/common';
+import { AutoReloadHelper } from '@/utils/autoReloadHelper';
+import { AxiosGetHelper } from "@/utils/axiosRequestHelper";
+
+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 = [
+ {
+ label: 'Volume',
+ value: 'volume'
+ },
+ {
+ label: 'Owner',
+ value: 'owner'
+ },
+ {
+ label: 'Admin',
+ value: 'admin'
+ }
+]
+
+const LIMIT_OPTIONS: Option[] = [
+ { label: '1000', value: '1000' },
+ { label: '5000', value: "5000" },
+ { label: '10000', value: "10000" },
+ { label: '20000', value: "20000" }
+]
+
+const Volumes: React.FC<{}> = () => {
+
+ let cancelSignal: AbortController;
+
+ const COLUMNS: ColumnsType<Volume> = [
+ {
+ title: 'Volume',
+ dataIndex: 'volume',
+ key: 'volume',
+ sorter: (a: Volume, b: Volume) => a.volume.localeCompare(b.volume),
+ defaultSortOrder: 'ascend' as const,
+ width: '15%'
+ },
+ {
+ title: 'Owner',
+ dataIndex: 'owner',
+ key: 'owner',
+ sorter: (a: Volume, b: Volume) => a.owner.localeCompare(b.owner)
+ },
+ {
+ title: 'Admin',
+ dataIndex: 'admin',
+ key: 'admin',
+ sorter: (a: Volume, b: Volume) => a.admin.localeCompare(b.admin)
+ },
+ {
+ title: 'Creation Time',
+ dataIndex: 'creationTime',
+ key: 'creationTime',
+ sorter: (a: Volume, b: Volume) => a.creationTime - b.creationTime,
+ render: (creationTime: number) => {
+ return creationTime > 0 ? moment(creationTime).format('ll LTS') : 'NA';
+ }
+ },
+ {
+ title: 'Modification Time',
+ dataIndex: 'modificationTime',
+ key: 'modificationTime',
+ sorter: (a: Volume, b: Volume) => a.modificationTime - b.modificationTime,
+ render: (modificationTime: number) => {
+ return modificationTime > 0 ? moment(modificationTime).format('ll LTS') : 'NA';
+ }
+ },
+ {
+ title: 'Quota (Size)',
+ dataIndex: 'quotaInBytes',
+ key: 'quotaInBytes',
+ render: (quotaInBytes: number) => {
+ return quotaInBytes && quotaInBytes !== -1 ? byteToSize(quotaInBytes, 3) : 'NA';
+ }
+ },
+ {
+ title: 'Namespace Capacity',
+ key: 'namespaceCapacity',
+ sorter: (a: Volume, b: Volume) => a.usedNamespace - b.usedNamespace,
+ render: (text: string, record: Volume) => (
+ <QuotaBar
+ quota={record.quotaInNamespace}
+ used={record.usedNamespace}
+ quotaType='namespace'
+ />
+ )
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ render: (_: any, record: Volume) => {
+ const searchParams = new URLSearchParams();
+ searchParams.append('volume', record.volume);
+
+ return (
+ <>
+ <Link
+ key="listBuckets"
+ to={`/Buckets?${searchParams.toString()}`}
+ style={{
+ marginRight: '16px'
+ }}>
+ Show buckets
+ </Link>
+ <a
+ key='acl'
+ onClick={() => handleAclLinkClick(record)}>
+ Show ACL
+ </a>
+ </>
+ );
+ }
+ }
+ ];
+
+ const defaultColumns = COLUMNS.map(column => ({
+ label: column.title as string,
+ value: column.key as string,
+ }));
+
+ const [state, setState] = useState<VolumesState>({
+ data: [],
+ lastUpdated: 0,
+ columnOptions: defaultColumns,
+ showPanel: false,
+ currentRow: {}
+ });
+ const [loading, setLoading] = useState<boolean>(false);
+ const [selectedColumns, setSelectedColumns] = useState<Option[]>(defaultColumns);
+ const [selectedLimit, setSelectedLimit] = useState<Option>(LIMIT_OPTIONS[0]);
+ const [searchColumn, setSearchColumn] = useState<'volume' | 'owner' | 'admin'>('volume');
+ const [searchTerm, setSearchTerm] = useState<string>('');
+
+ const loadData = () => {
+ setLoading(true);
+
+ const { request, controller } = AxiosGetHelper(
+ '/api/v1/volumes',
Review Comment:
I believe this was intentionally removed to keep more in line with the design language.
We already do display the number of volumes in the pagination bar - so this information becomes redundant.
Hence we had removed this from the heading as it is already present in the table pagination
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719896143
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -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';
Review Comment:
Thanks for pointing this out @ArafatKhan2198 ,
fixed it in [40c2588](https://github.com/apache/ozone/pull/7048/commits/40c2588d021292463b1012006975ed2d33c33c22)
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "smitajoshi12 (via GitHub)" <gi...@apache.org>.
smitajoshi12 commented on PR #7048:
URL: https://github.com/apache/ozone/pull/7048#issuecomment-2286519904
Loader Can we increase so it will be clearly visiible
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719471723
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,68 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
Review Comment:
Yes, there won't be any backend changes required.
Previously we had a search icon beside every column which was searchable.
<img width="444" alt="Screenshot 2024-08-16 at 13 00 16" src="https://github.com/user-attachments/assets/f9643036-2b3e-42f6-967a-17ff5deb3aec">
But this would take up column space and was un-intuitive.
Hence we moved to a separate search where we can utilise the existing empty space in the heading to provide this search.
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "ArafatKhan2198 (via GitHub)" <gi...@apache.org>.
ArafatKhan2198 commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1719425157
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -16,7 +16,7 @@
* limitations under the License.
*/
Review Comment:
Weren’t we planning to add a button or icon that allows a column to be removed from the table when clicked? These icons should appear when we include a column in the table. Each icon has an 'X' mark, and clicking on it will remove the corresponding column from the view, as well as the icon itself? Did we plan on removing it?
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -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';
Review Comment:
In the UI, both the Columns dropdown and the Limit dropdown have downward-pointing arrows that allow us to select values. However, I've noticed an inconsistency: when I click anywhere on the Columns box, the dropdown appears correctly, but when I try clicking anywhere on the Limit box, the dropdown doesn't show up. It only appears when I click directly on the arrow. Could you please look into this and enable the dropdown to be triggered by clicking anywhere on the Limit box? I understand this isn’t a critical change, but it would contribute to a smoother user experience.
<img width="1650" alt="image" src="https://github.com/user-attachments/assets/424e94b9-f79c-40cc-8555-87d0f61fe6f3">
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,68 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
Review Comment:
This new search icon added will implement searching from the UI itself right and wont be requiring anything from the backend I hope?
<img width="1658" alt="image" src="https://github.com/user-attachments/assets/e62609e3-2789-4c28-b6c6-9d4b9d8f8879">
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx:
##########
@@ -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';
Review Comment:
I noticed that when we click on "Show ACL," the sidebar displaying the various ACLs associated with the volume appears, which is great. However, after clicking "Show ACL" and then closing it, if we try to add or remove a column from the table, the ACL sidebar keeps popping up repeatedly. Could you please fix this issue?
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/volumes/volumes.tsx:
##########
@@ -0,0 +1,342 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+import moment from 'moment';
+import { Table } from 'antd';
+import { Link } from 'react-router-dom';
+import {
+ TablePaginationConfig,
+ ColumnsType
+} from 'antd/es/table';
+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/select/multiSelect';
+
+import { byteToSize, showDataFetchError } from '@/utils/common';
+import { AutoReloadHelper } from '@/utils/autoReloadHelper';
+import { AxiosGetHelper } from "@/utils/axiosRequestHelper";
+
+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 = [
+ {
+ label: 'Volume',
+ value: 'volume'
+ },
+ {
+ label: 'Owner',
+ value: 'owner'
+ },
+ {
+ label: 'Admin',
+ value: 'admin'
+ }
+]
+
+const LIMIT_OPTIONS: Option[] = [
+ { label: '1000', value: '1000' },
+ { label: '5000', value: "5000" },
+ { label: '10000', value: "10000" },
+ { label: '20000', value: "20000" }
+]
+
+const Volumes: React.FC<{}> = () => {
+
+ let cancelSignal: AbortController;
+
+ const COLUMNS: ColumnsType<Volume> = [
+ {
+ title: 'Volume',
+ dataIndex: 'volume',
+ key: 'volume',
+ sorter: (a: Volume, b: Volume) => a.volume.localeCompare(b.volume),
+ defaultSortOrder: 'ascend' as const,
+ width: '15%'
+ },
+ {
+ title: 'Owner',
+ dataIndex: 'owner',
+ key: 'owner',
+ sorter: (a: Volume, b: Volume) => a.owner.localeCompare(b.owner)
+ },
+ {
+ title: 'Admin',
+ dataIndex: 'admin',
+ key: 'admin',
+ sorter: (a: Volume, b: Volume) => a.admin.localeCompare(b.admin)
+ },
+ {
+ title: 'Creation Time',
+ dataIndex: 'creationTime',
+ key: 'creationTime',
+ sorter: (a: Volume, b: Volume) => a.creationTime - b.creationTime,
+ render: (creationTime: number) => {
+ return creationTime > 0 ? moment(creationTime).format('ll LTS') : 'NA';
+ }
+ },
+ {
+ title: 'Modification Time',
+ dataIndex: 'modificationTime',
+ key: 'modificationTime',
+ sorter: (a: Volume, b: Volume) => a.modificationTime - b.modificationTime,
+ render: (modificationTime: number) => {
+ return modificationTime > 0 ? moment(modificationTime).format('ll LTS') : 'NA';
+ }
+ },
+ {
+ title: 'Quota (Size)',
+ dataIndex: 'quotaInBytes',
+ key: 'quotaInBytes',
+ render: (quotaInBytes: number) => {
+ return quotaInBytes && quotaInBytes !== -1 ? byteToSize(quotaInBytes, 3) : 'NA';
+ }
+ },
+ {
+ title: 'Namespace Capacity',
+ key: 'namespaceCapacity',
+ sorter: (a: Volume, b: Volume) => a.usedNamespace - b.usedNamespace,
+ render: (text: string, record: Volume) => (
+ <QuotaBar
+ quota={record.quotaInNamespace}
+ used={record.usedNamespace}
+ quotaType='namespace'
+ />
+ )
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ render: (_: any, record: Volume) => {
+ const searchParams = new URLSearchParams();
+ searchParams.append('volume', record.volume);
+
+ return (
+ <>
+ <Link
+ key="listBuckets"
+ to={`/Buckets?${searchParams.toString()}`}
+ style={{
+ marginRight: '16px'
+ }}>
+ Show buckets
+ </Link>
+ <a
+ key='acl'
+ onClick={() => handleAclLinkClick(record)}>
+ Show ACL
+ </a>
+ </>
+ );
+ }
+ }
+ ];
+
+ const defaultColumns = COLUMNS.map(column => ({
+ label: column.title as string,
+ value: column.key as string,
+ }));
+
+ const [state, setState] = useState<VolumesState>({
+ data: [],
+ lastUpdated: 0,
+ columnOptions: defaultColumns,
+ showPanel: false,
+ currentRow: {}
+ });
+ const [loading, setLoading] = useState<boolean>(false);
+ const [selectedColumns, setSelectedColumns] = useState<Option[]>(defaultColumns);
+ const [selectedLimit, setSelectedLimit] = useState<Option>(LIMIT_OPTIONS[0]);
+ const [searchColumn, setSearchColumn] = useState<'volume' | 'owner' | 'admin'>('volume');
+ const [searchTerm, setSearchTerm] = useState<string>('');
+
+ const loadData = () => {
+ setLoading(true);
+
+ const { request, controller } = AxiosGetHelper(
+ '/api/v1/volumes',
Review Comment:
Previously, we used to display the total count of volumes. Could you please add this feature to the new UI as well? However, let's enhance it by making it more visually appealing and including some informative text so that users clearly understand it's the total count of volumes present.
<img width="1651" alt="image" src="https://github.com/user-attachments/assets/a029bcff-ba93-403e-a50d-53ea66c1f5ac">
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devmadhuu (via GitHub)" <gi...@apache.org>.
devmadhuu commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1713902352
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
Review Comment:
Pls check if this import being used.
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
Review Comment:
While you've set default values for `onSearch` and `onChange`, it might be more explicit and clear to set them using default props. This can make the code easier to understand, especially for developers who might not be familiar with default parameters in function signatures.
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
+}) => {
+
+ let selectFilter = null;
+
+ if (searchColumn) {
+ selectFilter = <Select
+ defaultValue={searchColumn}
+ options={searchOptions}
+ onChange={onChange} />
+ }
Review Comment:
```suggestion
const selectFilter = searchColumn ? (
<Select
defaultValue={searchColumn}
options={searchOptions}
onChange={onChange}
/>
) : null;
```
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
Review Comment:
Both searchColumn and searchOptions are optional (?), but the code does not handle the scenario when searchOptions is not provided. Consider defaulting searchOptions to an empty array to avoid potential issues.
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx:
##########
@@ -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.
+ */
+
+import React from "react";
+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<Option, false> {
+ options: Option[];
+ placeholder: string;
+ onChange: (arg0: ValueType<Option, false>) => void;
+}
+
+const SingleSelect: React.FC<SingleSelectProps> = ({
+ options = [],
+ placeholder = 'Limit',
+ onChange = () => { },
+ ...props
+}) => {
+
+
+ const ValueContainer = ({ children, ...props }: ValueContainerProps<Option, false>) => {
+ const selectedLimit = props.getValue() as Option[]
+ return (
+ <components.ValueContainer {...props}>
+ Limit: {selectedLimit[0].label}
Review Comment:
The `selectedLimit[0].label `logic assumes that `selectedLimit` always has at least one selected option. This could lead to errors if `selectedLimit` is empty. Consider adding a conditional check.
```suggestion
const selectedLimit = props.getValue() as Option[];
const label = selectedLimit.length > 0 ? selectedLimit[0].label : '';
return (
<components.ValueContainer {...props}>
Limit: {label}
</components.ValueContainer>
);
```
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
+
+type SearchProps = {
+ searchColumn?: string;
+ searchOptions?: Option[];
+ onSearch: (
+ arg0: string,
+ arg1: React.ChangeEvent<HTMLInputElement>
+ | React.MouseEvent<HTMLElement, MouseEvent>
+ | React.KeyboardEvent<HTMLInputElement>
+ | undefined
+ ) => void;
+ onChange: (
+ value: string,
+ //OptionType, OptionGroupData and OptionData are not
+ //currently exported by AntD hence set to any
+ option: any
+ ) => void;
+}
+
+const Search: React.FC<SearchProps> = ({
+ searchColumn,
+ searchOptions,
+ onSearch = () => {},
+ onChange = () => {}
+}) => {
+
+ let selectFilter = null;
Review Comment:
Instead of initializing selectFilter with null, you can directly assign it within the if statement. This would make the code slightly more concise:
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714765271
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/search/search.tsx:
##########
@@ -0,0 +1,70 @@
+/*
+ * 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 { Input, Select } from 'antd';
+import { Option } from '@/v2/components/select/singleSelect';
Review Comment:
`searchOptions?: 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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org
Re: [PR] HDDS-11155. Improve Volumes page UI [ozone]
Posted by "devabhishekpal (via GitHub)" <gi...@apache.org>.
devabhishekpal commented on code in PR #7048:
URL: https://github.com/apache/ozone/pull/7048#discussion_r1714781659
##########
hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/singleSelect.tsx:
##########
@@ -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.
+ */
+
+import React from "react";
+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<Option, false> {
+ options: Option[];
+ placeholder: string;
+ onChange: (arg0: ValueType<Option, false>) => void;
+}
+
+const SingleSelect: React.FC<SingleSelectProps> = ({
+ options = [],
+ placeholder = 'Limit',
+ onChange = () => { },
+ ...props
+}) => {
+
+
+ const ValueContainer = ({ children, ...props }: ValueContainerProps<Option, false>) => {
+ const selectedLimit = props.getValue() as Option[]
+ return (
+ <components.ValueContainer {...props}>
+ Limit: {selectedLimit[0].label}
Review Comment:
Fixed in the latest commit [1347224](https://github.com/apache/ozone/pull/7048/commits/13472245263b08e28aeda28b1f3597df5abc3396).
Made it as
```
<components.ValueContainer {...props}>
Limit: {selectedLimit[0]?.label ?? ''}
</components.ValueContainer>
```
This will automatically assign `''` as the default value in case the limit is undefined
--
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: issues-unsubscribe@ozone.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@ozone.apache.org
For additional commands, e-mail: issues-help@ozone.apache.org