[improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target.

webapp/packages/supersonic-fe/config/routes.ts

@@ -66,6 +66,33 @@ const ROUTES = [
       },
     ],
   },
+
+  {
+    path: '/tag',
+    name: 'tag',
+    component: './SemanticModel/Insights',
+    envEnableList: [ENV_KEY.SEMANTIC],
+    routes: [
+      {
+        path: '/tag',
+        redirect: '/tag/market',
+      },
+      {
+        path: '/tag/market',
+        component: './SemanticModel/Insights/Market',
+        hideInMenu: true,
+        envEnableList: [ENV_KEY.SEMANTIC],
+      },
+      {
+        path: '/tag/detail/:tagId',
+        name: 'tagDetail',
+        hideInMenu: true,
+        component: './SemanticModel/Insights/Detail',
+        envEnableList: [ENV_KEY.SEMANTIC],
+      },
+    ],
+  },
+
   {
     path: '/plugin',
     name: 'plugin',

webapp/packages/supersonic-fe/package.json

@@ -100,6 +100,7 @@
     "react-syntax-highlighter": "^15.4.3",
     "sql-formatter": "^2.3.3",
     "supersonic-chat-sdk": "0.0.0",
+    "supersonic-insights-flow-components": "^1.4.6",
     "umi": "3.5",
     "umi-request": "^1.4.0"
   },

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

@@ -5,6 +5,7 @@ import {
   StopOutlined,
   CloudDownloadOutlined,
   DeleteOutlined,
+  ExportOutlined,
 } from '@ant-design/icons';
 
 export type BatchCtrlDropDownButtonProps = {
@@ -14,6 +15,7 @@ export type BatchCtrlDropDownButtonProps = {
   downloadLoading?: boolean;
   disabledList?: string[];
   hiddenList?: string[];
+  extenderEnable?: boolean;
 };
 const { RangePicker } = DatePicker;
 
@@ -24,10 +26,21 @@ const BatchCtrlDropDownButton: FC<BatchCtrlDropDownButtonProps> = ({
   downloadLoading,
   disabledList = [],
   hiddenList = [],
+  extenderEnable = false,
 }) => {
   const [popoverOpenState, setPopoverOpenState] = useState<boolean>(false);
   const [pickerType, setPickerType] = useState<string>('day');
   const dateRangeRef = useRef<any>([]);
+
+  const exportTagButton = {
+    key: 'exportTagButton',
+    label: '导出为标签',
+    icon: <ExportOutlined />,
+    disabled: disabledList?.includes('exportTagButton'),
+  };
+
+  const extenderList: any[] = extenderEnable ? [exportTagButton] : [];
+
   const dropdownButtonItems: any[] = [
     {
       key: 'batchStart',
@@ -55,6 +68,11 @@ const BatchCtrlDropDownButton: FC<BatchCtrlDropDownButtonProps> = ({
       icon: <CloudDownloadOutlined />,
       disabled: disabledList?.includes('batchDownload'),
     },
+    {
+      key: 'divider',
+      type: 'divider',
+    },
+    ...extenderList,
     {
       key: 'batchDeleteDivider',
       type: 'divider',

webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts

@@ -10,6 +10,8 @@ export default {
   'menu.semanticModel': '语义建模',
   'menu.metric': '指标市场',
   'menu.metric.metricDetail': '指标详情页',
+  'menu.tag': '标签市场',
+  'menu.tag.tagDetail': '标签详情页',
   'menu.database': '数据库管理',
   'menu.chatSetting': '问答设置',
   'menu.plugin': '插件市场',

webapp/packages/supersonic-fe/src/pages/SemanticModel/Insights/Detail.tsx

@@ -0,0 +1,151 @@
+import { message, Tabs, Button, Space } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { getTagData } from '../service';
+import { connect, useParams, history } from 'umi';
+import type { StateType } from '../model';
+import styles from './style.less';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import TagTrendSection from './components/TagTrendSection';
+import { ISemantic } from '../data';
+import TagInfoSider from './components/TagInfoSider';
+import { getDimensionList, queryMetric } from '../service';
+import type { TabsProps } from 'antd';
+
+type Props = Record<string, any>;
+
+const TagDetail: React.FC<Props> = () => {
+  const params: any = useParams();
+  const tagId = params.tagId;
+  const [tagData, setTagData] = useState<ISemantic.IMetricItem>();
+  const [dimensionMap, setDimensionMap] = useState<Record<string, ISemantic.IDimensionItem>>({});
+
+  const [metricMap, setMetricMap] = useState<Record<string, ISemantic.IMetricItem>>({});
+
+  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
+    { value: string; label: string; modelId: number }[]
+  >([]);
+
+  useEffect(() => {
+    queryTagData(tagId);
+  }, [tagId]);
+
+  const queryTagData = async (tagId: number) => {
+    const { code, data, msg } = await getTagData(tagId);
+    if (code === 200) {
+      queryDimensionList(data.modelId);
+      queryMetricList(data.modelId);
+      setTagData({ ...data });
+      return;
+    }
+    message.error(msg);
+  };
+
+  const tabItems: TabsProps['items'] = [
+    {
+      key: 'trend',
+      label: '图表',
+      children: (
+        // <></>
+        <TagTrendSection
+          tagData={tagData}
+          relationDimensionOptions={relationDimensionOptions}
+          dimensionList={[]}
+        />
+      ),
+    },
+    // {
+    //   key: 'metricCaliberInput',
+    //   label: '基础信息',
+    //   children: <></>,
+    // },
+    // {
+    //   key: 'metricDataRemark',
+    //   label: '备注',
+    //   children: <></>,
+    // },
+  ];
+
+  const queryDimensionList = async (modelId: number) => {
+    const { code, data, msg } = await getDimensionList({ modelId });
+    if (code === 200 && Array.isArray(data?.list)) {
+      const { list } = data;
+      setDimensionMap(
+        list.reduce(
+          (infoMap: Record<string, ISemantic.IDimensionItem>, item: ISemantic.IDimensionItem) => {
+            infoMap[`${item.id}`] = item;
+            return infoMap;
+          },
+          {},
+        ),
+      );
+    } else {
+      message.error(msg);
+    }
+  };
+
+  const queryMetricList = async (modelId: number) => {
+    const { code, data, msg } = await queryMetric({
+      modelId: modelId,
+    });
+    const { list } = data || {};
+    if (code === 200) {
+      setMetricMap(
+        list.reduce(
+          (infoMap: Record<string, ISemantic.IMetricItem>, item: ISemantic.IMetricItem) => {
+            infoMap[`${item.id}`] = item;
+            return infoMap;
+          },
+          {},
+        ),
+      );
+    } else {
+      message.error(msg);
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.tagDetailWrapper}>
+        <div className={styles.tagDetail}>
+          <div className={styles.tabContainer}>
+            <Tabs
+              defaultActiveKey="trend"
+              items={tabItems}
+              tabBarExtraContent={{
+                right: (
+                  <Button
+                    size="middle"
+                    type="link"
+                    key="backListBtn"
+                    onClick={() => {
+                      history.push('/tag/market');
+                    }}
+                  >
+                    <Space>
+                      <ArrowLeftOutlined />
+                      返回列表页
+                    </Space>
+                  </Button>
+                ),
+              }}
+              size="large"
+              className={styles.tagDetailTab}
+            />
+          </div>
+          <div className={styles.siderContainer}>
+            <TagInfoSider
+              dimensionMap={dimensionMap}
+              metricMap={metricMap}
+              // relationDimensionOptions={relationDimensionOptions}
+              tagData={tagData}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default connect(({ domainManger }: { domainManger: StateType }) => ({
+  domainManger,
+}))(TagDetail);