topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-10 19:38:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][semantic-fe] Adding batch operations for indicators/dimensions/models (#313)

Browse Source 
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models
This commit is contained in:
tristanliu
2023-11-02 06:11:12 -05:00
committed by GitHub
parent 70784598e1
commit 9f813ca1c0
16 changed files with 1232 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx Normal file
View File

@@ -0,0 +1,139 @@
import React, {
useState,
useRef,
useMemo,
useEffect,
forwardRef,
useImperativeHandle,
Ref,
} from 'react';
import { Select, Spin, Empty } from 'antd';
import debounce from 'lodash/debounce';
// import type { ValueTextType } from '@/constants';
import isFunction from 'lodash/isFunction';
type Props = {
fetchOptions: (...restParams: any[]) => Promise<{ label: any; value: any }[]>;
debounceTimeout?: number;
formatPropsValue?: (value: any) => any;
formatFetchOptionsParams?: (inputValue: string, ctx?: any) => any[];
formatOptions?: (data: any, ctx: any) => any[];
autoInit?: boolean;
disabledSearch?: boolean;
[key: string]: any;
};
type SelectOptions = {
label: string;
} & {
text: string;
} & {
value: any;
};
export type RemoteSelectImperativeHandle = {
emitSearch: (value: string) => void;
};
const { Option } = Select;
const DebounceSelect = forwardRef(
(
{
autoInit = false,
fetchOptions,
debounceTimeout = 500,
formatPropsValue,
formatFetchOptionsParams,
formatOptions,
disabledSearch = false,
...restProps
}: Props,
ref: Ref<any>,
) => {
const props = { ...restProps };
const { ctx, filterOption } = props;
if (isFunction(formatPropsValue)) {
props.value = formatPropsValue(props.value);
}
const [fetching, setFetching] = useState(false);
const [options, setOptions] = useState(props.options || props.source || []);
useImperativeHandle(ref, () => ({
emitSearch: (value: string) => {
loadOptions(value, true);
},
}));
useEffect(() => {
if (autoInit) {
loadOptions('', true);
}
}, []);
useEffect(() => {
setOptions(props.source || []);
}, [props.source]);
const fetchRef = useRef(0);
const loadOptions = (value: string, allowEmptyValue?: boolean) => {
setOptions([]);
if (disabledSearch) {
return;
}
if (!allowEmptyValue && !value) return;
fetchRef.current += 1;
const fetchId = fetchRef.current;
setFetching(true);
const fetchParams = formatFetchOptionsParams ? formatFetchOptionsParams(value, ctx) : [value];
// eslint-disable-next-line prefer-spread
fetchOptions.apply(null, fetchParams).then((newOptions) => {
if (fetchId !== fetchRef.current || !Array.isArray(newOptions)) {
return;
}
let finalOptions = newOptions;
if (formatOptions && isFunction(formatOptions)) {
finalOptions = formatOptions(newOptions, ctx);
}
finalOptions =
filterOption && Array.isArray(finalOptions)
? filterOption?.(finalOptions, ctx)
: finalOptions;
setOptions(finalOptions);
setFetching(false);
});
};
const debounceFetcher = useMemo(() => {
return debounce(loadOptions, debounceTimeout, {
trailing: true,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetchOptions, debounceTimeout]);
return (
<Select
style={{ minWidth: '100px' }}
showSearch
allowClear
mode="multiple"
onClear={() => {
setOptions([]);
}}
onSearch={debounceFetcher}
{...props}
filterOption={false} // 保持对props中filterOption属性的复写，不可变更位置
notFoundContent={
fetching ? <Spin size="small" /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
loading={fetching}
>
{options.map((option: SelectOptions) => (
<Option value={option.value} key={option.value}>
{option.text || option.label}
</Option>
))}
</Select>
);
},
);
export default DebounceSelect;

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrend.tsx
View File

@@ -145,7 +145,7 @@ const TrendChart: React.FC<Props> = ({
},
tooltip: {
trigger: 'axis',
formatter: function (params: any[]) {
formatter: function (params: any) {
const param = params[0];
const valueLabels = params
.map(

88
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { Form, Input, Select, Space, Row, Col, Switch, Tag } from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import React, { useEffect, useState, useRef } from 'react';
import { SENSITIVE_LEVEL_OPTIONS } from '../../constant';
import { SearchOutlined } from '@ant-design/icons';
import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteSelect';
import { queryDimValue } from '@/pages/SemanticModel/service';
import styles from '../style.less';
const FormItem = Form.Item;
type Props = {
dimensionOptions: { value: string; label: string }[];
modelId: number;
initFilterValues?: any;
onFiltersChange: (_: any, values: any) => void;
};
const MetricTrendDimensionFilter: React.FC<Props> = ({
dimensionOptions,
modelId,
initFilterValues = {},
onFiltersChange,
}) => {
// const [form] = Form.useForm();
const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>();
const queryParams = useRef<{ dimensionBizName?: string }>({});
const [dimensionValue, setDimensionValue] = useState<string>('');
// const [queryParams, setQueryParams] = useState<any>({});
const loadSiteName = async (searchValue: string) => {
if (!queryParams.current?.dimensionBizName) {
// return [];
return;
}
const { dimensionBizName } = queryParams.current;
const { code, data } = await queryDimValue({
...queryParams.current,
value: searchValue,
modelId,
limit: 50,
});
if (code === 200 && Array.isArray(data?.resultList)) {
return data.resultList.slice(0, 50).map((item: any) => ({
value: item[dimensionBizName],
label: item[dimensionBizName],
}));
}
return [];
};
return (
<Space>
<Select
style={{ minWidth: 150 }}
options={dimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
allowClear
placeholder="请选择筛选维度"
onChange={(value) => {
queryParams.current = { dimensionBizName: value };
if (value) {
dimensionValueSearchRef.current?.emitSearch('');
}
}}
/>
<Tag color="processing" style={{ margin: 0 }}>
=
</Tag>
<RemoteSelect
value={dimensionValue}
onChange={(value) => {
setDimensionValue(value);
}}
ref={dimensionValueSearchRef}
style={{ minWidth: 150 }}
mode={undefined}
placeholder="维度值搜索"
fetchOptions={loadSiteName}
/>
</Space>
);
};
export default MetricTrendDimensionFilter;

148
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
View File

@@ -1,14 +1,25 @@
import React, { useState, useEffect, useRef } from 'react';
import { SemanticNodeType } from '../../enum';
import moment from 'moment';
import { message, Row, Col, Button } from 'antd';
import { queryStruct, downloadCosFile } from '@/pages/SemanticModel/service';
import { message, Row, Col, Button, Space, Select, Form } from 'antd';
import {
queryStruct,
downloadCosFile,
getDrillDownDimension,
getDimensionList,
} from '@/pages/SemanticModel/service';
import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
import MDatePicker from '@/components/MDatePicker';
import { useModel } from 'umi';
import { DateRangeType, DateSettingType } from '@/components/MDatePicker/type';
import StandardFormRow from '@/components/StandardFormRow';
import { ISemantic } from '../../data';
const FormItem = Form.Item;
type Props = {
nodeData: any;
[key: string]: any;
@@ -26,6 +37,10 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
const [authMessage, setAuthMessage] = useState<string>('');
const [downloadLoding, setDownloadLoding] = useState<boolean>(false);
const [relationDimensionOptions, setRelationDimensionOptions] = useState<
{ value: string; label: string }[]
>([]);
const [queryParams, setQueryParams] = useState<any>({});
const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
const [periodDate, setPeriodDate] = useState<{
startDate: string;
@@ -37,7 +52,8 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
dateField: dateFieldMap[DateRangeType.DAY],
});
const getMetricTrendData = async (download = false) => {
const getMetricTrendData = async (params: any = { download: false }) => {
const { download, dimensionGroup, dimensionFilters } = params;
if (download) {
setDownloadLoding(true);
} else {
@@ -49,6 +65,8 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
const res = await queryStruct({
modelId,
bizName,
groups: dimensionGroup,
dimensionFilters,
dateField: periodDate.dateField,
startDate: periodDate.startDate,
endDate: periodDate.endDate,
@@ -86,15 +104,103 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
}
};
const queryDimensionList = async (modelId: number) => {
const { code, data, msg } = await getDimensionList({ modelId });
if (code === 200 && Array.isArray(data?.list)) {
return data.list;
}
message.error(msg);
return [];
};
const queryDrillDownDimension = async (metricId: number) => {
const { code, data, msg } = await getDrillDownDimension(metricId);
if (code === 200 && Array.isArray(data)) {
return data;
}
message.error(msg);
return [];
};
const initDimensionData = async (metricItem: ISemantic.IMetricItem) => {
const dimensionList = await queryDimensionList(metricItem.modelId);
const drillDownDimension = await queryDrillDownDimension(metricItem.id);
const drillDownDimensionIds = drillDownDimension.map(
(item: ISemantic.IDrillDownDimensionItem) => item.dimensionId,
);
const drillDownDimensionList = dimensionList.filter((metricItem: ISemantic.IMetricItem) => {
return drillDownDimensionIds.includes(metricItem.id);
});
setRelationDimensionOptions(
drillDownDimensionList.map((item: ISemantic.IMetricItem) => {
return { label: item.name, value: item.bizName };
}),
);
};
useEffect(() => {
if (nodeData.id && nodeData?.nodeType === SemanticNodeType.METRIC) {
if (nodeData?.id && nodeData?.nodeType === SemanticNodeType.METRIC) {
getMetricTrendData();
initDimensionData(nodeData);
}
}, [nodeData, periodDate]);
return (
<>
<div style={{ marginBottom: 5 }}>
<div style={{ marginBottom: 5, display: 'grid', gap: 10 }}>
{/* <StandardFormRow key="showType" title="维度下钻" block>
<FormItem name="showType" valuePropName="checked">
<Select
style={{ minWidth: 150 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择下钻维度"
onChange={(value) => {
const params = { ...queryParams, dimensionGroup: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/>
</FormItem>
</StandardFormRow> */}
{/* <Row>
<Col flex="1 1 200px">
<Space>
<span>维度下钻: </span>
<Select
style={{ minWidth: 150 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择下钻维度"
onChange={(value) => {
const params = { ...queryParams, dimensionGroup: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/>
</Space>
</Col>
</Row>
<Row>
<Col flex="1 1 200px">
<Space>
<span>维度筛选: </span>
<MetricTrendDimensionFilter
modelId={nodeData.modelId}
dimensionOptions={relationDimensionOptions}
onFiltersChange={() => {}}
/>
</Space>
</Col>
</Row> */}
<Row>
<Col flex="1 1 200px">
<MDatePicker
@@ -126,6 +232,36 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
}}
disabledAdvanceSetting={true}
/>
{/* <Select
style={{ minWidth: 150 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择下钻维度"
onChange={(value) => {
const params = { ...queryParams, dimensionGroup: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/>
<Select
style={{ minWidth: 150 }}
options={relationDimensionOptions}
showSearch
filterOption={(input, option) =>
((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
}
mode="multiple"
placeholder="请选择筛选维度"
onChange={(value) => {
const params = { ...queryParams, dimensionFilters: value || [] };
setQueryParams(params);
getMetricTrendData({ ...params });
}}
/> */}
</Col>
<Col flex="0 1">
<Button
@@ -133,7 +269,7 @@ const MetricTrendSection: React.FC<Props> = ({ nodeData }) => {
loading={downloadLoding}
disabled={downloadBtnDisabledState}
onClick={() => {
getMetricTrendData(true);
getMetricTrendData({ download: true, ...queryParams });
}}
>
下载

115
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/index.tsx
View File

@@ -1,17 +1,17 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Space, Popconfirm, Tag, Spin } from 'antd';
import { message, Space, Popconfirm, Tag, Spin, Dropdown } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect, history, useModel } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { queryMetric, deleteMetric } from '../service';
import { queryMetric, deleteMetric, batchUpdateMetricStatus } from '../service';
import MetricFilter from './components/MetricFilter';
import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import MetricCardList from './components/MetricCardList';
import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
import { SemanticNodeType } from '../enum';
import { SemanticNodeType, StatusEnum } from '../enum';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
@@ -46,6 +46,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const [loading, setLoading] = useState<boolean>(false);
const [dataSource, setDataSource] = useState<ISemantic.IMetricItem[]>([]);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [filterParams, setFilterParams] = useState<Record<string, any>>({
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
@@ -56,6 +57,21 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
queryMetricList(filterParams);
}, []);
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateMetricStatus({
ids,
status,
});
if (code === 200) {
queryMetricList(filterParams);
return;
}
message.error(msg);
};
const queryMetricList = async (params: QueryMetricListParams = {}, disabledLoading = false) => {
if (!disabledLoading) {
setLoading(true);
@@ -155,6 +171,26 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
title: '敏感度',
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
@@ -209,7 +245,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
编辑
</a>
<Popconfirm title="确认删除？" okText="是" cancelText="否" onConfirm={() => {}}>
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
deleteMetricQuery(record.id);
}}
>
<a
key="metricDeleteBtn"
onClick={() => {
@@ -244,6 +287,52 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
await queryMetricList(params, filterParams.key ? false : true);
};
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
getCheckboxProps: (record: ISemantic.IMetricItem) => ({
disabled: !record.hasAdminRes,
}),
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量禁用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<div className={styles.metricFilterWrapper}>
@@ -264,14 +353,14 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
<MetricCardList
metricList={dataSource}
disabledEdit={true}
onMetricChange={(metricItem) => {
onMetricChange={(metricItem: ISemantic.IMetricItem) => {
setInfoDrawerVisible(true);
setMetricItem(metricItem);
}}
onDeleteBtnClick={(metricItem) => {
onDeleteBtnClick={(metricItem: ISemantic.IMetricItem) => {
deleteMetricQuery(metricItem.id);
}}
onEditBtnClick={(metricItem) => {
onEditBtnClick={(metricItem: ISemantic.IMetricItem) => {
setMetricItem(metricItem);
setCreateModalVisible(true);
}}
@@ -289,6 +378,18 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
tableAlertRender={() => {
return false;
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
toolBarRender={() => [
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
loading={loading}
onChange={(data: any) => {
const { current, pageSize, total } = data;

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx
View File

@@ -26,7 +26,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
const menuKey = params.menuKey ? params.menuKey : !Number(modelId) ? 'overview' : '';
const { selectDomainId, selectModelId, selectDomainName, selectModelName, domainList } =
domainManger;
const [modelList, setModelList] = useState<ISemantic.IDomainItem[]>([]);
const [modelList, setModelList] = useState<ISemantic.IModelItem[]>([]);
const [isModel, setIsModel] = useState<boolean>(false);
const [open, setOpen] = useState(false);
const [activeKey, setActiveKey] = useState<string>(menuKey);

178
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
View File

@@ -1,15 +1,22 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input } from 'antd';
import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { StateType } from '../model';
import { StatusEnum } from '../enum';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { getDatasourceList, getDimensionList, deleteDimension } from '../service';
import {
getDatasourceList,
getDimensionList,
deleteDimension,
batchUpdateDimensionStatus,
} from '../service';
import DimensionInfoModal from './DimensionInfoModal';
import DimensionValueSettingModal from './DimensionValueSettingModal';
import { ISemantic } from '../data';
import { updateDimension } from '../service';
import { ISemantic, IDataSource } from '../data';
import moment from 'moment';
import styles from './style.less';
@@ -22,7 +29,9 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
const [dataSourceList, setDataSourceList] = useState<any[]>([]);
const [dataSourceList, setDataSourceList] = useState<IDataSource.IDataSourceItem[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
ISemantic.IDimensionValueSettingItem[]
>([]);
@@ -37,11 +46,13 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const actionRef = useRef<ActionType>();
const queryDimensionList = async (params: any) => {
setLoading(true);
const { code, data, msg } = await getDimensionList({
...params,
...pagination,
modelId,
});
setLoading(false);
const { list, pageSize, pageNum, total } = data || {};
let resData: any = {};
if (code === 200) {
@@ -80,6 +91,44 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
queryDataSourceList();
}, [modelId]);
const updateDimensionStatus = async (dimensionData: ISemantic.IDimensionItem) => {
const { code, msg } = await updateDimension(dimensionData);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
setLoading(true);
const { code, msg } = await batchUpdateDimensionStatus({
ids,
status,
});
setLoading(false);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
@@ -118,7 +167,26 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
width: 80,
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'datasourceName',
title: '数据源名称',
@@ -127,6 +195,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'createdBy',
title: '创建人',
width: 100,
search: false,
},
@@ -139,6 +208,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'updatedAt',
title: '更新时间',
width: 180,
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
@@ -151,18 +221,20 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
valueType: 'option',
render: (_, record) => {
return (
<Space>
<a
<Space className={styles.ctrlBtnContainer}>
<Button
key="dimensionEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setCreateModalVisible(true);
}}
>
编辑
</a>
<a
</Button>
<Button
key="dimensionValueEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setDimensionValueSettingModalVisible(true);
@@ -174,7 +246,34 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}}
>
维度值设置
</a>
</Button>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateDimensionStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateDimensionStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
@@ -189,14 +288,15 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
}}
>
<a
<Button
type="link"
key="dimensionDeleteEditBtn"
onClick={() => {
setDimensionItem(record);
}}
>
删除
</a>
</Button>
</Popconfirm>
</Space>
);
@@ -204,6 +304,49 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
];
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量禁用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<ProTable
@@ -213,6 +356,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
columns={columns}
request={queryDimensionList}
pagination={pagination}
loading={loading}
search={{
span: 4,
defaultCollapsed: false,
@@ -220,6 +364,10 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
return <></>;
},
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
onChange={(data: any) => {
const { current, pageSize, total } = data;
setPagination({
@@ -244,6 +392,12 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建维度
</Button>,
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
/>

168
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
View File

@@ -1,12 +1,13 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
import React, { useRef, useState } from 'react';
import type { Dispatch } from 'umi';
import { StatusEnum } from '../enum';
import { connect } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { queryMetric, deleteMetric } from '../service';
import { queryMetric, deleteMetric, updateExprMetric, batchUpdateMetricStatus } from '../service';
import MetricInfoCreateForm from './MetricInfoCreateForm';
@@ -23,6 +24,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 20,
@@ -30,6 +32,42 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
});
const actionRef = useRef<ActionType>();
const updateStatus = async (data: ISemantic.IMetricItem) => {
const { code, msg } = await updateExprMetric(data);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateMetricStatus({
ids,
status,
});
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const queryMetricList = async (params: any) => {
const { code, data, msg } = await queryMetric({
...params,
@@ -97,9 +135,30 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
width: 80,
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
width: 100,
search: false,
},
{
@@ -126,18 +185,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
title: '描述',
search: false,
},
// {
// dataIndex: 'type',
// title: '指标类型',
// valueEnum: {
// ATOMIC: '原子指标',
// DERIVED: '衍生指标',
// },
// },
{
dataIndex: 'updatedAt',
title: '更新时间',
width: 180,
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
@@ -149,8 +200,9 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
valueType: 'option',
render: (_, record) => {
return (
<Space>
<a
<Space className={styles.ctrlBtnContainer}>
<Button
type="link"
key="metricEditBtn"
onClick={() => {
setMetricItem(record);
@@ -158,8 +210,34 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}}
>
编辑
</a>
</Button>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
@@ -174,14 +252,15 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
}}
>
<a
<Button
type="link"
key="metricDeleteBtn"
onClick={() => {
setMetricItem(record);
}}
>
删除
</a>
</Button>
</Popconfirm>
</Space>
);
@@ -189,6 +268,49 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
];
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量禁用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<ProTable
@@ -202,6 +324,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
return <></>;
},
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={columns}
params={{ modelId }}
request={queryMetricList}
@@ -230,6 +356,12 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建指标
</Button>,
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
/>
{createModalVisible && (

5
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
View File

@@ -29,10 +29,11 @@ type Props = {
const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
metricItem,
relationsInitialValue,
domainManger,
onChange,
}) => {
const [targetKeys, setTargetKeys] = useState<string[]>([]);
const { selectModelId: modelId, selectDomainId } = domainManger;
const [checkedMap, setCheckedMap] = useState<Record<string, ISemantic.IDrillDownDimensionItem>>(
{},
);
@@ -44,7 +45,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
}, []);
const queryDimensionList = async () => {
const { code, data, msg } = await getDimensionList(metricItem.modelId);
const { code, data, msg } = await getDimensionList({ modelId: metricItem?.modelId || modelId });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {

61
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelCreateFormModal.tsx
View File

@@ -3,7 +3,9 @@ import { Form, Button, Modal, Input, Switch, Select } from 'antd';
import styles from './style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createModel, updateModel } from '../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { createModel, updateModel, getDimensionList } from '../service';
import { ISemantic } from '../data';
const FormItem = Form.Item;
@@ -17,24 +19,59 @@ export type ModelCreateFormModalProps = {
const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
const { basicInfo, domainId, onCancel, onSubmit } = props;
const [formVals, setFormVals] = useState<any>(basicInfo);
const [saveLoading, setSaveLoading] = useState(false);
const [formVals, setFormVals] = useState<ISemantic.IModelItem>(basicInfo);
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [form] = Form.useForm();
const [dimensionOptions, setDimensionOptions] = useState<{ label: string; value: number }[]>([]);
useEffect(() => {
if (basicInfo?.id) {
queryDimensionList();
}
}, []);
const queryDimensionList = async () => {
const { code, data, msg } = await getDimensionList({ modelId: basicInfo.id });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionOptions(
data.list.map((item: ISemantic.IDimensionItem) => {
return {
label: item.name,
value: item.id,
};
}),
);
} else {
message.error(msg);
}
};
useEffect(() => {
form.setFieldsValue({
...basicInfo,
alias: basicInfo?.alias && basicInfo.alias.trim() ? basicInfo.alias.split(',') : [],
drillDownDimensionsIds: Array.isArray(basicInfo?.drillDownDimensions)
? basicInfo.drillDownDimensions.map(
(item: ISemantic.IDrillDownDimensionItem) => item.dimensionId,
)
: [],
});
}, [basicInfo]);
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const columnsValue = { ...fieldsValue, isUnique: 1, domainId };
const submitData = {
const submitData: ISemantic.IModelItem = {
...formVals,
...columnsValue,
alias: Array.isArray(fieldsValue.alias) ? fieldsValue.alias.join(',') : '',
drillDownDimensions: Array.isArray(fieldsValue.drillDownDimensionsIds)
? fieldsValue.drillDownDimensionsIds.map((id: number) => {
return {
dimensionId: id,
};
})
: [],
};
setFormVals(submitData);
setSaveLoading(true);
@@ -99,6 +136,22 @@ const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
<FormItem name="description" label="模型描述">
<Input.TextArea placeholder="模型描述" />
</FormItem>
<FormItem
name="drillDownDimensionsIds"
label={
<FormItemTitle
title={'默认下钻维度'}
subTitle={'配置之后,可在指标主页和问答指标卡处选择用来对指标进行下钻和过滤'}
/>
}
>
<Select
mode="multiple"
options={dimensionOptions}
placeholder="请选择默认下钻维度"
maxTagCount={9}
/>
</FormItem>
<FormItem name="isUnique" label="是否唯一" hidden={true}>
<Switch size="small" checked={true} />
</FormItem>

245
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx Normal file
View File

@@ -0,0 +1,245 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { StatusEnum } from '../enum';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { StateType } from '../model';
import { deleteModel, updateModel } from '../service';
import ModelCreateFormModal from './ModelCreateFormModal';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
type Props = {
disabledEdit?: boolean;
modelList: ISemantic.IModelItem[];
onModelChange?: (model?: ISemantic.IModelItem) => void;
dispatch: Dispatch;
domainManger: StateType;
};
const ModelTable: React.FC<Props> = ({
modelList,
domainManger,
disabledEdit = false,
onModelChange,
dispatch,
}) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
const [modelItem, setModelItem] = useState<ISemantic.IModelItem>();
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const updateModelStatus = async (modelData: ISemantic.IModelItem) => {
setSaveLoading(true);
const { code, msg } = await updateModel({
...modelData,
});
setSaveLoading(false);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
width: 80,
search: false,
},
{
dataIndex: 'name',
title: '指标名称',
search: false,
render: (_, record) => {
return (
<a
onClick={() => {
onModelChange?.(record);
}}
>
{_}
</a>
);
},
},
{
dataIndex: 'key',
title: '指标搜索',
hideInTable: true,
renderFormItem: () => <Input placeholder="请输入ID/指标名称/字段名称/标签" />,
},
{
dataIndex: 'alias',
title: '别名',
width: 150,
ellipsis: true,
search: false,
},
{
dataIndex: 'bizName',
title: '英文名称',
search: false,
},
{
dataIndex: 'status',
title: '状态',
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
search: false,
},
{
dataIndex: 'description',
title: '描述',
search: false,
},
{
dataIndex: 'updatedAt',
title: '更新时间',
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
},
},
];
if (!disabledEdit) {
columns.push({
title: '操作',
dataIndex: 'x',
valueType: 'option',
render: (_, record) => {
return (
<Space className={styles.ctrlBtnContainer}>
<a
key="metricEditBtn"
onClick={() => {
setModelItem(record);
setModelCreateFormModalVisible(true);
}}
>
编辑
</a>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateModelStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateModelStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
const { code, msg } = await deleteModel(record.id);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
}}
>
<a key="modelDeleteBtn">删除</a>
</Popconfirm>
</Space>
);
},
});
}
return (
<>
<ProTable
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
actionRef={actionRef}
rowKey="id"
search={false}
columns={columns}
dataSource={modelList}
tableAlertRender={() => {
return false;
}}
size="small"
options={{ reload: false, density: false, fullScreen: false }}
toolBarRender={() =>
disabledEdit
? [<></>]
: [
<Button
key="create"
type="primary"
onClick={() => {
setModelItem(undefined);
setModelCreateFormModalVisible(true);
}}
>
创建模型
</Button>,
]
}
/>
{modelCreateFormModalVisible && (
<ModelCreateFormModal
domainId={selectDomainId}
basicInfo={modelItem}
onSubmit={() => {
setModelCreateFormModalVisible(false);
onModelChange?.();
}}
onCancel={() => {
setModelCreateFormModalVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(ModelTable);

156
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
View File

@@ -10,6 +10,7 @@ import type { StateType } from '../model';
import { formatNumber } from '../../../utils/utils';
import { deleteModel } from '../service';
import ModelCreateFormModal from './ModelCreateFormModal';
import ModelTable from './ModelTable';
import styles from './style.less';
type Props = {
@@ -26,85 +27,86 @@ const OverView: React.FC<Props> = ({
onModelChange,
domainManger,
}) => {
const { selectDomainId, selectModelId } = domainManger;
const [currentModel, setCurrentModel] = useState<any>({});
const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
// const { selectDomainId, selectModelId } = domainManger;
// const [currentModel, setCurrentModel] = useState<any>({});
// const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
const descNode = (model: ISemantic.IDomainItem) => {
const { metricCnt, dimensionCnt } = model;
return (
<div className={styles.overviewExtraContainer}>
<div className={styles.extraWrapper}>
<div className={styles.extraStatistic}>
<div className={styles.extraTitle}>维度数</div>
<div className={styles.extraValue}>
<span className="ant-statistic-content-value">{formatNumber(dimensionCnt || 0)}</span>
</div>
</div>
</div>
<div className={styles.extraWrapper}>
<div className={styles.extraStatistic}>
<div className={styles.extraTitle}>指标数</div>
<div className={styles.extraValue}>
<span className="ant-statistic-content-value">{formatNumber(metricCnt || 0)}</span>
</div>
</div>
</div>
</div>
);
};
// const descNode = (model: ISemantic.IDomainItem) => {
// const { metricCnt, dimensionCnt } = model;
// return (
// <div className={styles.overviewExtraContainer}>
// <div className={styles.extraWrapper}>
// <div className={styles.extraStatistic}>
// <div className={styles.extraTitle}>维度数</div>
// <div className={styles.extraValue}>
// <span className="ant-statistic-content-value">{formatNumber(dimensionCnt || 0)}</span>
// </div>
// </div>
// </div>
// <div className={styles.extraWrapper}>
// <div className={styles.extraStatistic}>
// <div className={styles.extraTitle}>指标数</div>
// <div className={styles.extraValue}>
// <span className="ant-statistic-content-value">{formatNumber(metricCnt || 0)}</span>
// </div>
// </div>
// </div>
// </div>
// );
// };
const extraNode = (model: ISemantic.IDomainItem) => {
return (
<Dropdown
placement="top"
menu={{
onClick: ({ key, domEvent }) => {
domEvent.stopPropagation();
if (key === 'edit') {
setCurrentModel(model);
setModelCreateFormModalVisible(true);
}
},
items: [
{
label: '编辑',
key: 'edit',
},
{
label: (
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
const { code, msg } = await deleteModel(model.id);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
}}
>
<a key="modelDeleteBtn">删除</a>
</Popconfirm>
),
key: 'delete',
},
],
}}
>
<EllipsisOutlined
style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
onClick={(e) => e.stopPropagation()}
/>
</Dropdown>
);
};
// const extraNode = (model: ISemantic.IDomainItem) => {
// return (
// <Dropdown
// placement="top"
// menu={{
// onClick: ({ key, domEvent }) => {
// domEvent.stopPropagation();
// if (key === 'edit') {
// setCurrentModel(model);
// setModelCreateFormModalVisible(true);
// }
// },
// items: [
// {
// label: '编辑',
// key: 'edit',
// },
// {
// label: (
// <Popconfirm
// title="确认删除？"
// okText="是"
// cancelText="否"
// onConfirm={async () => {
// const { code, msg } = await deleteModel(model.id);
// if (code === 200) {
// onModelChange?.();
// } else {
// message.error(msg);
// }
// }}
// >
// <a key="modelDeleteBtn">删除</a>
// </Popconfirm>
// ),
// key: 'delete',
// },
// ],
// }}
// >
// <EllipsisOutlined
// style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
// onClick={(e) => e.stopPropagation()}
// />
// </Dropdown>
// );
// };
return (
<div style={{ padding: '0px 20px 20px' }}>
{!disabledEdit && (
<ModelTable modelList={modelList} disabledEdit={disabledEdit} onModelChange={onModelChange} />
{/* {!disabledEdit && (
<div style={{ paddingBottom: '20px' }}>
<Button
onClick={() => {
@@ -135,8 +137,8 @@ const OverView: React.FC<Props> = ({
/>
);
})}
</CheckCard.Group>
{modelCreateFormModalVisible && (
</CheckCard.Group> */}
{/* {modelCreateFormModalVisible && (
<ModelCreateFormModal
domainId={selectDomainId}
basicInfo={currentModel}
@@ -148,7 +150,7 @@ const OverView: React.FC<Props> = ({
setModelCreateFormModalVisible(false);
}}
/>
)}
)} */}
</div>
);
};

8
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
View File

@@ -359,4 +359,12 @@
&:hover {
color: #296DF3;
}
}
.ctrlBtnContainer {
:global {
.ant-btn-link {
padding: 0;
}
}
}

9
webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts vendored
View File

@@ -1,4 +1,5 @@
import { TreeGraphData } from '@antv/g6-core';
import { StatusEnum } from './enum';
export type ISODateString =
`${number}-${number}-${number}T${number}:${number}:${number}.${number}+${number}:${number}`;
@@ -105,7 +106,7 @@ export declare namespace ISemantic {
name: string;
bizName: string;
description: any;
status?: number;
status?: StatusEnum;
typeEnum?: any;
sensitiveLevel?: number;
parentId: number;
@@ -118,6 +119,7 @@ export declare namespace ISemantic {
entity?: { entityId: number; names: string[] };
dimensionCnt?: number;
metricCnt?: number;
drillDownDimensions: IDrillDownDimensionItem[];
}
interface IDimensionItem {
@@ -169,7 +171,7 @@ export declare namespace ISemantic {
interface IDrillDownDimensionItem {
dimensionId: number;
necessary: boolean;
necessary?: boolean;
}
interface IRelateDimension {
@@ -185,13 +187,14 @@ export declare namespace ISemantic {
name: string;
bizName: string;
description: string;
status: number;
status: StatusEnum;
typeEnum: string;
sensitiveLevel: number;
domainId: number;
domainName: string;
modelName: string;
modelId: number;
hasAdminRes?: boolean;
type: string;
typeParams: ITypeParams;
fullPath: string;

8
webapp/packages/supersonic-fe/src/pages/SemanticModel/enum.ts
View File

@@ -26,3 +26,11 @@ export enum DictTaskState {
SUCCESS = '成功',
UNKNOWN = '未知',
}
export enum StatusEnum {
INITIALIZED = 0,
ONLINE = 1,
OFFLINE = 2,
DELETED = 3,
UNKNOWN = -1,
}

33
webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
View File

@@ -116,6 +116,18 @@ export function updateExprMetric(data: any): Promise<any> {
});
}
export function batchUpdateMetricStatus(data: any): Promise<any> {
return request.post(`${process.env.API_BASE_URL}metric/batchUpdateStatus`, {
data,
});
}
export function batchUpdateDimensionStatus(data: any): Promise<any> {
return request.post(`${process.env.API_BASE_URL}dimension/batchUpdateStatus`, {
data,
});
}
export function mockMetricAlias(data: any): Promise<any> {
return request.post(`${process.env.API_BASE_URL}metric/mockMetricAlias`, {
data,
@@ -126,6 +138,12 @@ export function getMetricTags(): Promise<any> {
return request.get(`${process.env.API_BASE_URL}metric/getMetricTags`);
}
export function getDrillDownDimension(metricId: number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}metric/getDrillDownDimension`, {
params: { metricId },
});
}
export function getMeasureListByModelId(modelId: number): Promise<any> {
return request.get(`${process.env.API_BASE_URL}datasource/getMeasureListOfModel/${modelId}`);
}
@@ -380,6 +398,13 @@ const downloadStruct = (blob: Blob) => {
document.body.removeChild(link);
};
export function queryDimValue(data: any): Promise<any> {
return request(`${process.env.API_BASE_URL}query/queryDimValue`, {
method: 'POST',
data,
});
}
export async function queryStruct({
modelId,
bizName,
@@ -387,6 +412,8 @@ export async function queryStruct({
startDate,
endDate,
download = false,
groups = [],
dimensionFilters = [],
}: {
modelId: number;
bizName: string;
@@ -394,6 +421,8 @@ export async function queryStruct({
startDate: string;
endDate: string;
download?: boolean;
groups?: string[];
dimensionFilters?: string[];
}): Promise<any> {
const response = await request(
`${process.env.API_BASE_URL}query/${download ? 'download/' : ''}struct`,
@@ -402,7 +431,8 @@ export async function queryStruct({
...(download ? { responseType: 'blob', getResponse: true } : {}),
data: {
modelId,
groups: [dateField],
groups: [dateField, ...groups],
dimensionFilters,
aggregators: [
{
column: bizName,
@@ -412,7 +442,6 @@ export async function queryStruct({
},
],
orders: [],
dimensionFilters: [],
metricFilters: [],
params: [],
dateInfo: {