mod: add track (#347) (#348)

Co-authored-by: Nut He <18328704+hetao92@users.noreply.github.com>

app/config/service.ts

@@ -50,37 +50,37 @@ const service = {
   uploadFiles: (params?, config?) => {
     put('/api/files')(params, { ...config, headers: { 'Content-Type': 'multipart/form-data' } });
   },
-  initSketch: (params) => {
-    return post(`/api/sketches/sketch`)(params);
+  initSketch: (params, config?) => {
+    return post(`/api/sketches/sketch`)(params, config);
   },
-  getSketchList: (params) => {
-    return get(`/api/sketches/list`)(params);
+  getSketchList: (params, config?) => {
+    return get(`/api/sketches/list`)(params, config);
   },
-  updateSketch: (params) => {
+  updateSketch: (params, config?) => {
     const { id, ...restParams } = params;
-    return put(`/api/sketches/${id}`)(restParams);
+    return put(`/api/sketches/${id}`)(restParams, config);
   },
-  deleteSketch: (id: string) => {
-    return _delete(`/api/sketches/${id}`)();
+  deleteSketch: (id: string, config?) => {
+    return _delete(`/api/sketches/${id}`)(undefined, config);
   },
-  getSchemaSnapshot: (space) => {
-    return get(`/api/schema/${encodeURIComponent(space)}/snapshot`)();
+  getSchemaSnapshot: (space, config?) => {
+    return get(`/api/schema/${encodeURIComponent(space)}/snapshot`)(undefined, config);
   },
-  updateSchemaSnapshot: (params) => {
+  updateSchemaSnapshot: (params, config?) => {
     const { space, ...restParams } = params;
-    return put(`/api/schema/${encodeURIComponent(space)}/snapshot`)(restParams);
+    return put(`/api/schema/${encodeURIComponent(space)}/snapshot`)(restParams, config);
   },
-  deleteFavorite: (id) => {
-    return _delete(`/api/favorites/${id}`)();
+  deleteFavorite: (id, config?) => {
+    return _delete(`/api/favorites/${id}`)(undefined, config);
   },
   deleteAllFavorites: () => {
     return _delete(`/api/favorites`)();
   },
   getFavoriteList: () => {
     return get(`/api/favorites/list`)();
   },
-  saveFavorite: (params) => {
-    return post(`/api/favorites`)(params);
+  saveFavorite: (params, config?) => {
+    return post(`/api/favorites`)(params, config);
   },
 };
 

app/index.tsx

@@ -1,15 +1,17 @@
 import { hot } from 'react-hot-loader/root';
 import { Spin, message } from 'antd';
-import React, { Suspense, lazy, useState } from 'react';
+import React, { Suspense, lazy, useState, useEffect } from 'react';
 import ReactDom from 'react-dom';
 import { Route, BrowserRouter as Router, Switch, useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import dayjs from 'dayjs';
 import intl from 'react-intl-universal';
 import duration from 'dayjs/plugin/duration';
 import Cookie from 'js-cookie';
+import { trackPageView } from '@app/utils/stat';
 import { INTL_LOCALES } from '@app/config/constants';
 import { LanguageContext } from '@app/context';
+import { useStore } from '@app/stores';
 import AuthorizedRoute from './AuthorizedRoute';
 import rootStore, { StoreProvider } from './stores';
 const Login = lazy(() => import('@app/pages/Login'));
@@ -29,6 +31,7 @@ intl.init({
 
 
 const PageRoot = observer(() => {
+  const { global: { version } } = useStore();
   const [currentLocale, setCurrentLocale] = useState(
     defaultLanguage || 'EN-US',
   );
@@ -43,6 +46,10 @@ const PageRoot = observer(() => {
       });
   };
 
+  useEffect(() => {
+    trackPageView(`Studio/v${version}`);
+  }, []);
+
   return (
     <StoreProvider value={rootStore}>
       <LanguageContext.Provider

app/pages/SketchModeling/SketchConfigHeader/ApplySpacePopover.tsx

@@ -10,6 +10,7 @@ import { getSpaceCreateGQL, getTagOrEdgeCreateGQL } from '@app/utils/gql';
 import { ISketchEdge, ISketchNode } from '@app/interfaces/sketch';
 import { useHistory } from 'react-router-dom';
 import { getVidType } from '@app/pages/Schema/SpaceCreate';
+import { trackEvent } from '@app/utils/stat';
 import styles from './index.module.less';
 
 const Option = Select.Option;
@@ -104,6 +105,7 @@ const PopoverContent = (props: IContentProps) => {
           return;
         }
         switchSpaceAndApply(values.name, schemaInfo);
+        trackEvent('sketch', 'apply_sketch');
       } else {
         const { space } = values;
         await updateSpaceInfo(space);
@@ -114,6 +116,7 @@ const PopoverContent = (props: IContentProps) => {
         }
         setLoading(true);
         batchApplySchema(schemaInfo);
+        trackEvent('sketch', 'batch_apply_sketch');
       }
     });
   }, [mode]);

app/pages/SketchModeling/SketchConfigHeader/index.tsx

@@ -5,6 +5,7 @@ import { useStore } from '@app/stores';
 import Icon from '@app/components/Icon';
 import intl from 'react-intl-universal';
 import domtoimage from 'dom-to-image';
+import { trackEvent } from '@app/utils/stat';
 import styles from './index.module.less';
 import SketchTitleInput from './SketchTitleInput';
 import ApplySpacePopover from './ApplySpacePopover';
@@ -72,6 +73,7 @@ const SketchConfigHeader: React.FC = () => {
   };
 
   const handleDownloadImg = async () => {
+    trackEvent('sketch', 'download_sketch_img');
     const url = await domtoimage.toPng(document.getElementById('sketchContainer'), { bgcolor: '#F8F8F8' });
     const a = document.createElement('a');
     a.href = url;

app/pages/SketchModeling/SketchList/index.tsx

@@ -26,39 +26,34 @@ const SketchList: React.FC = () => {
       }
       const isModified = checkModified();
       if(!isModified) {
-        // sketchModel.destroy();
         update({ currentSketch: list.items[0], active: null });
         return;
       }
     }
   }, []);
   const handleDelete = useCallback(async (id: string, e) => {
-    const { currentSketch, destroy } = sketchModel;
+    const { currentSketch } = sketchModel;
     e.stopPropagation();
     const result = await deleteSketch(id);
     if (result) {
       message.success(intl.get('common.deleteSuccess'));
       if(currentSketch?.id === id) {
-        // destroy();
         update({ currentSketch: null });
       }
       await getSketchList();
     }
   }, []);
 
   const handleSelect = useCallback((item: ISketch) => {
-    const { destroy } = sketchModel;
     if(item.id === sketchModel.currentSketch?.id) {
       return;
     }
     if (!sketchModel.currentSketch) {
-      // destroy();
       update({ currentSketch: item });
       return;
     }
     const isModified = checkModified();
     if(!isModified) {
-      // destroy();
       update({ currentSketch: item, active: null });
       return;
     }
@@ -67,7 +62,6 @@ const SketchList: React.FC = () => {
       okText: intl.get('common.confirm'),
       cancelText: intl.get('common.cancel'),
       onOk() {
-        // destroy();
         update({ currentSketch: item, active: null });
       },
       onCancel() {

app/stores/console.ts

@@ -111,7 +111,12 @@ export class ConsoleStore {
     });
   };
   saveFavorite = async (content: string) => {
-    const res = await service.saveFavorite({ content });
+    const res = await service.saveFavorite({ content }, {
+      trackEventConfig: {
+        category: 'console',
+        action: 'save_favorite',
+      },
+    });
     if(res.code === 0) {
       message.success(intl.get('sketch.saveSuccess'));
     }

app/stores/schema.ts

@@ -709,15 +709,25 @@ export class SchemaStore {
   };
 
   getSchemaSnapshot = async (space) => {
-    const res = await service.getSchemaSnapshot(space);
+    const res = await service.getSchemaSnapshot(space, {
+      trackEventConfig: {
+        category: 'schema',
+        action: 'get_schema_visualization',
+      },
+    });
     return res;
   };
 
   updateSchemaSnapshot = async (params: {
     space: string, 
     snapshot: string
   }) => {
-    const res = await service.updateSchemaSnapshot(params);
+    const res = await service.updateSchemaSnapshot(params, {
+      trackEventConfig: {
+        category: 'sketch',
+        action: 'refresh_schema_visualization',
+      },
+    });
     return res;
   };
 }

app/stores/sketchModel.ts

@@ -14,6 +14,7 @@ import { ARROW_STYLE, LINE_STYLE, makeLineSort, NODE_RADIUS } from '@app/config/
 import { uniqBy } from 'lodash';
 import { MAX_COMMENT_BYTES } from '@app/utils/constant';
 import { getByteLength } from '@app/utils/function';
+import { trackEvent } from '@app/utils/stat';
 
 interface IHoveringItem {
   data: ISketchNode | ISketchEdge;
@@ -139,15 +140,25 @@ export class SketchStore {
       schema: '',
       snapshot: '',
     };
-    const { code, data } = await service.initSketch(initData);
+    const { code, data } = await service.initSketch(initData, {
+      trackEventConfig: {
+        category: 'sketch',
+        action: 'init_sketch',
+      },
+    });
     if (code === 0) {
       return data.id;
     }
     return null;
   };
 
   deleteSketch = async (id: string) => {
-    const { code } = await service.deleteSketch(id);
+    const { code } = await service.deleteSketch(id, {
+      trackEventConfig: {
+        category: 'sketch',
+        action: 'delete_sketch',
+      },
+    });
     return code === 0;
   };
 
@@ -160,7 +171,12 @@ export class SketchStore {
       snapshot,
       ...params,
     };
-    const { code } = await service.updateSketch(_params);
+    const { code } = await service.updateSketch(_params, {
+      trackEventConfig: {
+        category: 'sketch',
+        action: 'update_sketch',
+      },
+    });
     if(code === 0) {
       runInAction(() => {
         const item = this.sketchList.items.find(item => item.id === id);
@@ -184,7 +200,12 @@ export class SketchStore {
     };
     const newFilter = { keyword: params?.keyword ?? filter.keyword };
     this.update({ loading: true });
-    const res = await service.getSketchList(_params);
+    const res = await service.getSketchList(_params, {
+      trackEventConfig: {
+        category: 'sketch',
+        action: 'get_sketch_list',
+      },
+    });
     this.update({ loading: false });
     if (res.code === 0) {
       const sketchList = { ...res.data, filter: newFilter };
@@ -249,6 +270,7 @@ export class SketchStore {
         this.update({ active: line.data });
         this.clearActive();
         this.editor.graph.line.setActiveLine(line);
+        trackEvent('sketch', 'add_line');
       });
       this.editor.graph.on('paper:click', () => {
         this.update({ active: undefined });
@@ -266,6 +288,7 @@ export class SketchStore {
           param.hoveringItem = undefined;
         }
         this.update(param);
+        trackEvent('sketch', 'remove_node');
       });
       this.editor.graph.on('line:remove', ({ line }) => {
         const data = this.editor.schema.getData();
@@ -276,6 +299,7 @@ export class SketchStore {
           param.hoveringItem = undefined;
         }
         this.update(param);
+        trackEvent('sketch', 'remove_line');
       });
     }
   };
@@ -306,6 +330,7 @@ export class SketchStore {
       };
       this.editor.graph.node.addNode(node);
       this.draggingNewTag = undefined;
+      trackEvent('sketch', 'add_node');
     }
   };
 
@@ -319,6 +344,7 @@ export class SketchStore {
 
   duplicateNode = () => {
     const { x, y, name, ...others } = this.active as ISketchNode;
+    trackEvent('sketch', 'duplicate_node');
     this.editor.graph.node.addNode({
       ...others,
       x: x + 40,