From e4b0129fbaa42748f21e517ea74245ac875e7de7 Mon Sep 17 00:00:00 2001
From: tristanliu <37809633+sevenliu1896@users.noreply.github.com>
Date: Mon, 11 Sep 2023 12:26:04 +0800
Subject: [PATCH] [improvement][semantic-fe] Add time granularity setting in
 the data source configuration. (#70)

* [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.
---
 .../packages/supersonic-fe/config/routes.ts   |  3 +-
 .../components/DataSourceFieldForm.tsx        | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/webapp/packages/supersonic-fe/config/routes.ts b/webapp/packages/supersonic-fe/config/routes.ts
index 0f2655218..c9bb6a33e 100644
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -34,7 +34,7 @@ const ROUTES = [
     component: './Agent',
     envEnableList: [ENV_KEY.CHAT],
   },
- {
+  {
     path: '/model',
     name: 'semanticModel',
     envEnableList: [ENV_KEY.SEMANTIC],
@@ -53,6 +53,7 @@ const ROUTES = [
       },
     ],
   },
+
   {
     path: '/database',
     name: 'database',
diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
index c72cfab83..6d8c7a6b4 100644
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
@@ -4,7 +4,13 @@ import TableTitleTooltips from '../../components/TableTitleTooltips';
 import { isUndefined } from 'lodash';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import Marquee from 'react-fast-marquee';
-import { TYPE_OPTIONS, DATE_FORMATTER, AGG_OPTIONS, EnumDataSourceType } from '../constants';
+import {
+  TYPE_OPTIONS,
+  DATE_FORMATTER,
+  AGG_OPTIONS,
+  EnumDataSourceType,
+  DATE_OPTIONS,
+} from '../constants';
 import styles from '../style.less';
 
 type FieldItem = {
@@ -15,6 +21,7 @@ type FieldItem = {
   agg?: string;
   checked?: number;
   dateFormat?: string;
+  timeGranularity?: string;
 };
 
 type Props = {
@@ -106,7 +113,7 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
     {
       title: '扩展配置',
       dataIndex: 'extender',
-      width: 100,
+      width: 180,
       render: (_: any, record: FieldItem) => {
         const { type } = record;
         if (type === EnumDataSourceType.MEASURES) {
@@ -131,6 +138,9 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
         }
         if (type === EnumDataSourceType.TIME) {
           const dateFormat = fields.find((field) => field.bizName === record.bizName)?.dateFormat;
+          const timeGranularity = fields.find(
+            (field) => field.bizName === record.bizName,
+          )?.timeGranularity;
           return (
             <Space>
               <Select
@@ -140,7 +150,7 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
                   handleFieldChange(record, 'dateFormat', value);
                 }}
                 defaultValue={DATE_FORMATTER[0]}
-                style={{ minWidth: 180 }}
+                style={{ minWidth: 150 }}
               >
                 {DATE_FORMATTER.map((item) => (
                   <Option key={item} value={item}>
@@ -151,6 +161,22 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
               <Tooltip title="请选择数据库中时间字段对应格式">
                 <ExclamationCircleOutlined />
               </Tooltip>
+              <span>时间粒度:</span>
+              <Select
+                placeholder="时间粒度"
+                value={timeGranularity}
+                onChange={(value) => {
+                  handleFieldChange(record, 'timeGranularity', value);
+                }}
+                defaultValue={DATE_OPTIONS[0]}
+                style={{ minWidth: 50 }}
+              >
+                {DATE_OPTIONS.map((item) => (
+                  <Option key={item} value={item}>
+                    {item}
+                  </Option>
+                ))}
+              </Select>
             </Space>
           );
         }