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

* [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

webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx

@@ -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;

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

@@ -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(

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx

@@ -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;

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

@@ -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 { message, Row, Col, Button, Space, Select, Form } from 'antd';
-import { queryStruct, downloadCosFile } from '@/pages/SemanticModel/service';
+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 });
               }}
             >
               下载

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

@@ -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;

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

@@ -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);

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

@@ -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>
+          <Space className={styles.ctrlBtnContainer}>
-            <a
+            <Button
               key="dimensionEditBtn"
+              type="link"
               onClick={() => {
                 setDimensionItem(record);
                 setCreateModalVisible(true);
               }}
             >
               编辑
-            </a>
+            </Button>
-            <a
+            <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>,
         ]}
       />
 

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

@@ -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 { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
-import React, { useRef, useState, useEffect } from 'react';
+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>
+          <Space className={styles.ctrlBtnContainer}>
-            <a
+            <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 && (

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

@@ -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 {

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

@@ -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 [formVals, setFormVals] = useState<ISemantic.IModelItem>(basicInfo);
-  const [saveLoading, setSaveLoading] = useState(false);
+  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>

webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx

@@ -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);

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

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

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

@@ -360,3 +360,11 @@
     color: #296DF3;
   }
 }
+
+.ctrlBtnContainer {
+  :global {
+    .ant-btn-link {
+      padding: 0;
+    }
+  }
+}

webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts

@@ -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;

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

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

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

@@ -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: {