-
Notifications
You must be signed in to change notification settings - Fork 13k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ISSUE-3917] Enhance service detail console web, add metadata filter (#…
…4439) * add metadata filter at back-end of nacos naming console * code enhance * 添加input，tag等组件，初步布局 * 实现页面交互，可添加，删除filter * 更新filter向后端发起请求获取数据 * 实现更新更改过滤条件，刷新表格 * 添加国际化配置 * 输入完后按空格直接添加，没输入的input给出响应 * 提交单元测试，更新打包后的静态资源 * 修改配置 解决生产环境上sourcemap不生效的问题 * 用hook重构组件InstanceFilter * 多个集群各自使用过滤 * 解决多集群时，元数据过滤无法单独使用的问题 * revert backend code * revert metadata filter test * 只从客户端已获取到的实例中过滤 * 变动更新到打包后的mian.js Co-authored-by: jzhishu <john1994@foxmail.com>
- Loading branch information
Showing
12 changed files
with
602 additions
and
343 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 137 additions & 0 deletions
137
console-ui/src/pages/ServiceManagement/ServiceDetail/instanceFilter.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| /* | ||
| * Copyright 1999-2018 Alibaba Group Holding Ltd. | ||
| * | ||
| * Licensed 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 PropTypes from 'prop-types'; | ||
| import { Input, ConfigProvider, Button, Form, Tag, Card } from '@alifd/next'; | ||
| import { isDiff } from './util'; | ||
|
|
||
| const { Group: TagGroup, Closeable: CloseableTag } = Tag; | ||
| const FormItem = Form.Item; | ||
|
|
||
| function InstanceFilter(props) { | ||
| const [key, setKey] = useState(''); | ||
| const [value, setValue] = useState(''); | ||
| const [keyState, setKeyState] = useState(''); | ||
| const [valueState, setValueState] = useState(''); | ||
| const [filters, setFilters] = useState(new Map()); | ||
| const { locale = {} } = props; | ||
|
|
||
| const addFilter = () => { | ||
| updateInput(); | ||
|
|
||
| if (key && value) { | ||
| const newFilters = new Map(Array.from(filters)).set(key, value); | ||
|
|
||
| setFilters(newFilters); | ||
| setKeyState(''); | ||
| setValueState(''); | ||
|
|
||
| clearInput(); | ||
| } | ||
| }; | ||
|
|
||
| const removeFilter = key => { | ||
| const newFilters = new Map(Array.from(filters)); | ||
| newFilters.delete(key); | ||
|
|
||
| setFilters(newFilters); | ||
| }; | ||
|
|
||
| const clearFilters = () => { | ||
| setFilters(new Map()); | ||
| }; | ||
|
|
||
| const clearInput = () => { | ||
| setKey(''); | ||
| setValue(''); | ||
| }; | ||
|
|
||
| const updateInput = () => { | ||
| if (!key) { | ||
| setKeyState('error'); | ||
| } else { | ||
| setKeyState(''); | ||
| } | ||
|
|
||
| if (!value) { | ||
| setValueState('error'); | ||
| } else { | ||
| setValueState(''); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| props.setFilters(filters); | ||
| }, [filters]); | ||
|
|
||
| return ( | ||
| <Card contentHeight="auto" className="inner-card"> | ||
| <Form inline size="small"> | ||
| <FormItem label={locale.title}> | ||
| <FormItem> | ||
| <Input | ||
| placeholder={'key'} | ||
| value={key} | ||
| trim | ||
| onChange={key => setKey(key)} | ||
| onPressEnter={addFilter} | ||
| state={keyState} | ||
| /> | ||
| </FormItem> | ||
| <FormItem> | ||
| <Input | ||
| placeholder={'value'} | ||
| value={value} | ||
| trim | ||
| onChange={value => setValue(value)} | ||
| onPressEnter={addFilter} | ||
| state={valueState} | ||
| /> | ||
| </FormItem> | ||
| <FormItem label=""> | ||
| <Button type="primary" onClick={addFilter} style={{ marginRight: 10 }}> | ||
| {locale.addFilter} | ||
| </Button> | ||
| {filters.size > 0 ? ( | ||
| <Button type="primary" onClick={clearFilters}> | ||
| {locale.clear} | ||
| </Button> | ||
| ) : ( | ||
| '' | ||
| )} | ||
| </FormItem> | ||
| </FormItem> | ||
| </Form> | ||
| <TagGroup> | ||
| {Array.from(filters).map(filter => { | ||
| return ( | ||
| <CloseableTag size="medium" key={filter[0]} onClose={() => removeFilter(filter[0])}> | ||
| {`${filter[0]} : ${filter[1]}`} | ||
| </CloseableTag> | ||
| ); | ||
| })} | ||
| </TagGroup> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| InstanceFilter.propTypes = { | ||
| locale: PropTypes.object, | ||
| setFilters: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default ConfigProvider.config(InstanceFilter); |
26 changes: 26 additions & 0 deletions
26
console-ui/src/pages/ServiceManagement/ServiceDetail/util.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| /* | ||
| * Copyright 1999-2018 Alibaba Group Holding Ltd. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| export const isDiff = function(prev, next) { | ||
| if (prev.size !== next.size) return true; | ||
|
|
||
| let isDiff = false; | ||
| next.forEach((value, key) => { | ||
| isDiff = value !== prev.get(key); | ||
| }); | ||
|
|
||
| return isDiff; | ||
| }; |
Oops, something went wrong.