You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@ozone.apache.org by GitBox <gi...@apache.org> on 2020/07/18 20:26:10 UTC
[GitHub] [hadoop-ozone] vivekratnavel commented on a change in pull request #1218: HDDS-3984. Support filter and search the columns in recon UI
vivekratnavel commented on a change in pull request #1218:
URL: https://github.com/apache/hadoop-ozone/pull/1218#discussion_r456824126
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
Review comment:
This can be a React.PureComponent, since no state change is involved.
```suggestion
class ColumnSearch extends React.PureComponent {
```
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
+ <Input
+ ref={node => {
+ this.searchInput = node;
+ }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ style={{width: 188, marginBottom: 8, display: 'block'}}
+ onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+ onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+ />
+ <Button
+ type='primary'
+ icon='search'
+ size='small'
+ style={{width: 90, marginRight: 8}}
+ onClick={() => this.handleSearch(selectedKeys, confirm)}
+ >
+ Search
+ </Button>
+ <Button size='small' style={{width: 90}} onClick={() => this.handleReset(clearFilters)}>
+ Reset
+ </Button>
+ </div>
+ ),
+ filterIcon: filtered => (
+ <Icon type='search' style={{color: filtered ? '#1890ff' : undefined}}/>
+ ),
+ onFilter: (value, record) =>
Review comment:
Add types to params
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
Review comment:
Please move this file to `utils/columnSearch.tsx`
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
Review comment:
Add types for the parameters:
```suggestion
filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}
: {
setSelectedKeys: (keys: string[]) => void,
selectedKeys: string[],
confirm: () => void,
clearFilters: () => void}) => (
```
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
Review comment:
You can also add it to `app.less` and the styles should automatically reflect without import in this file.
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
+ <Input
+ ref={node => {
+ this.searchInput = node;
+ }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ style={{width: 188, marginBottom: 8, display: 'block'}}
Review comment:
Move to a stylesheet
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
+ <Input
+ ref={node => {
+ this.searchInput = node;
+ }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ style={{width: 188, marginBottom: 8, display: 'block'}}
+ onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+ onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+ />
+ <Button
+ type='primary'
+ icon='search'
+ size='small'
+ style={{width: 90, marginRight: 8}}
+ onClick={() => this.handleSearch(selectedKeys, confirm)}
+ >
+ Search
+ </Button>
+ <Button size='small' style={{width: 90}} onClick={() => this.handleReset(clearFilters)}>
+ Reset
+ </Button>
+ </div>
+ ),
+ filterIcon: filtered => (
+ <Icon type='search' style={{color: filtered ? '#1890ff' : undefined}}/>
+ ),
+ onFilter: (value, record) =>
+ record[dataIndex]
+ .toString()
+ .toLowerCase()
+ .includes(value.toLowerCase()),
+ onFilterDropdownVisibleChange: visible => {
Review comment:
Add type
```suggestion
onFilterDropdownVisibleChange: (visible: boolean) => {
```
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
Review comment:
To satisfy Eslint
```suggestion
searchInput: Input | null = null;
getColumnSearchProps = (dataIndex: string) => ({
```
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
+ <Input
+ ref={node => {
+ this.searchInput = node;
+ }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ style={{width: 188, marginBottom: 8, display: 'block'}}
+ onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+ onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+ />
+ <Button
+ type='primary'
+ icon='search'
+ size='small'
+ style={{width: 90, marginRight: 8}}
+ onClick={() => this.handleSearch(selectedKeys, confirm)}
+ >
+ Search
+ </Button>
+ <Button size='small' style={{width: 90}} onClick={() => this.handleReset(clearFilters)}>
+ Reset
+ </Button>
+ </div>
+ ),
+ filterIcon: filtered => (
+ <Icon type='search' style={{color: filtered ? '#1890ff' : undefined}}/>
+ ),
+ onFilter: (value, record) =>
+ record[dataIndex]
+ .toString()
+ .toLowerCase()
+ .includes(value.toLowerCase()),
+ onFilterDropdownVisibleChange: visible => {
+ if (visible) {
+ setTimeout(() => this.searchInput.select());
+ }
+ }
+ });
+
+ handleSearch = (selectedKeys, confirm) => {
Review comment:
Add types
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
Review comment:
Please assign class names and move all inline styles to a stylesheet and import the `.less` file.
##########
File path: hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/components/columnSearch/columnSearch.tsx
##########
@@ -0,0 +1,74 @@
+/*
+ * 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, Button, Icon} from 'antd';
+
+class ColumnSearch extends React.Component {
+ getColumnSearchProps = (dataIndex: string) => ({
+ filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+ <div style={{padding: 8}}>
+ <Input
+ ref={node => {
+ this.searchInput = node;
+ }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ style={{width: 188, marginBottom: 8, display: 'block'}}
+ onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+ onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+ />
+ <Button
+ type='primary'
+ icon='search'
+ size='small'
+ style={{width: 90, marginRight: 8}}
+ onClick={() => this.handleSearch(selectedKeys, confirm)}
+ >
+ Search
+ </Button>
+ <Button size='small' style={{width: 90}} onClick={() => this.handleReset(clearFilters)}>
+ Reset
+ </Button>
+ </div>
+ ),
+ filterIcon: filtered => (
+ <Icon type='search' style={{color: filtered ? '#1890ff' : undefined}}/>
+ ),
+ onFilter: (value, record) =>
+ record[dataIndex]
+ .toString()
+ .toLowerCase()
+ .includes(value.toLowerCase()),
+ onFilterDropdownVisibleChange: visible => {
+ if (visible) {
+ setTimeout(() => this.searchInput.select());
+ }
+ }
+ });
+
+ handleSearch = (selectedKeys, confirm) => {
+ confirm();
+ };
+
+ handleReset = clearFilters => {
Review comment:
Add type
----------------------------------------------------------------
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.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: ozone-issues-unsubscribe@hadoop.apache.org
For additional commands, e-mail: ozone-issues-help@hadoop.apache.org