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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
