[improvement][semantic-fe] Refactor database settings functionality.

This commit is contained in:
tristanliu
2023-09-04 12:29:07 +08:00
parent d5c5c63a75
commit f5a7068d5e
34 changed files with 1222 additions and 441 deletions

View File

@@ -1,4 +1,4 @@
import { Form, Input } from 'antd';
import { Form, Input, Space, Row, Col } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import React, { useEffect } from 'react';
@@ -32,17 +32,17 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
};
const filterList = [
{
title: '指标类型',
key: 'type',
options: [
{
value: 'ATOMIC',
label: '原子指标',
},
{ value: 'DERIVED', label: '衍生指标' },
],
},
// {
// title: '指标类型',
// key: 'type',
// options: [
// {
// value: 'ATOMIC',
// label: '原子指标',
// },
// { value: 'DERIVED', label: '衍生指标' },
// ],
// },
{
title: '敏感度',
key: 'sensitiveLevel',
@@ -56,7 +56,7 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
form={form}
colon={false}
onValuesChange={(value, values) => {
if (value.name) {
if (value.key) {
return;
}
handleValuesChange(value, values);
@@ -64,38 +64,60 @@ const MetricFilter: React.FC<Props> = ({ filterValues = {}, onFiltersChange }) =
>
<StandardFormRow key="search" block>
<div className={styles.searchBox}>
<FormItem name={'key'} noStyle>
<div className={styles.searchInput}>
<Input.Search
placeholder="请输入需要查询指标的ID、指标名称、字段名称"
enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
onSearch={onSearch}
/>
</div>
</FormItem>
<Row>
<Col flex="100px">
<span
style={{
fontSize: '18px',
fontWeight: 'bold',
position: 'relative',
top: '12px',
}}
>
</span>
</Col>
<Col flex="auto">
<FormItem name="key" noStyle>
<div className={styles.searchInput}>
<Input.Search
placeholder="请输入需要查询指标的ID、指标名称、字段名称"
enterButton={<SearchOutlined style={{ marginTop: 5 }} />}
onSearch={(value) => {
onSearch(value);
}}
/>
</div>
</FormItem>
</Col>
</Row>
</div>
</StandardFormRow>
{filterList.map((item) => {
const { title, key, options } = item;
return (
<StandardFormRow key={key} title={title} block>
<FormItem name={key}>
<TagSelect reverseCheckAll single>
{options.map((item: any) => (
<TagSelect.Option key={item.value} value={item.value}>
{item.label}
</TagSelect.Option>
))}
</TagSelect>
</FormItem>
</StandardFormRow>
);
})}
<StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
<Space size={80}>
<StandardFormRow key="domainIds" title="所属主题域" block>
<FormItem name="domainIds">
<DomainTreeSelect />
</FormItem>
</StandardFormRow>
{filterList.map((item) => {
const { title, key, options } = item;
return (
<StandardFormRow key={key} title={title} block>
<div style={{ marginLeft: -30 }}>
<FormItem name={key}>
<TagSelect reverseCheckAll single>
{options.map((item: any) => (
<TagSelect.Option key={item.value} value={item.value}>
{item.label}
</TagSelect.Option>
))}
</TagSelect>
</FormItem>
</div>
</StandardFormRow>
);
})}
</Space>
</Form>
);
};