Added the ability to configure custom pageViewHit (may useful for web analytics)

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - cvat-ui: added cookie policy drawer for login page (<https://github.com/opencv/cvat/pull/1511>)
 - Added `datumaro_project` export format (https://github.com/opencv/cvat/pull/1352)
 - Ability to configure user agreements for the user registration form (https://github.com/opencv/cvat/pull/1464)
+- Ability to configure custom pageViewHit, which can be useful for web analytics integration (https://github.com/opencv/cvat/pull/1566)
 
 ### Changed
 - Downloaded file name in annotations export became more informative (https://github.com/opencv/cvat/pull/1352)

Dockerfile.ui

@@ -5,6 +5,7 @@ ARG https_proxy
 ARG no_proxy
 ARG socks_proxy
 ARG PUBLIC_INSTANCE
+ARG WA_PAGE_VIEW_HIT
 
 ENV TERM=xterm \
     http_proxy=${http_proxy}   \

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/annotation-page.tsx

@@ -4,6 +4,7 @@
 
 import './styles.scss';
 import React, { useEffect } from 'react';
+import { useLocation } from "react-router-dom";
 import Layout from 'antd/lib/layout';
 import Spin from 'antd/lib/spin';
 import Result from 'antd/lib/result';
@@ -13,6 +14,7 @@ import AnnotationTopBarContainer from 'containers/annotation-page/top-bar/top-ba
 import StatisticsModalContainer from 'containers/annotation-page/top-bar/statistics-modal';
 import StandardWorkspaceComponent from './standard-workspace/standard-workspace';
 import AttributeAnnotationWorkspace from './attribute-annotation-workspace/attribute-annotation-workspace';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface Props {
     job: any | null | undefined;
@@ -31,9 +33,12 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
         workspace,
     } = props;
 
+    const location = useLocation();
+
     useEffect(() => {
         saveLogs();
         const root = window.document.getElementById('root');
+        customWaViewHit(location.pathname);
         if (root) {
             root.style.minHeight = '768px';
         }

cvat-ui/src/components/create-model-page/create-model-page.tsx

@@ -3,12 +3,14 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from "react-router-dom";
 import { Row, Col } from 'antd/lib/grid';
 import Text from 'antd/lib/typography/Text';
 
 import { ModelFiles } from 'reducers/interfaces';
 import CreateModelContent from './create-model-content';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface Props {
     createModel(name: string, files: ModelFiles, global: boolean): void;
@@ -23,6 +25,12 @@ export default function CreateModelPageComponent(props: Props): JSX.Element {
         createModel,
     } = props;
 
+    const location = useLocation();
+
+    useEffect(() => {
+        customWaViewHit(location.pathname);
+    });
+
     return (
         <Row type='flex' justify='center' align='top' className='cvat-create-model-form-wrapper'>
             <Col md={20} lg={16} xl={14} xxl={9}>

cvat-ui/src/components/create-task-page/create-task-page.tsx

@@ -4,13 +4,15 @@
 
 import './styles.scss';
 import React, { useEffect } from 'react';
+import { useLocation } from "react-router-dom";
 import { Row, Col } from 'antd/lib/grid';
 import Modal from 'antd/lib/modal';
 import Text from 'antd/lib/typography/Text';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import TextArea from 'antd/lib/input/TextArea';
 
 import CreateTaskContent, { CreateTaskData } from './create-task-content';
+import { customWaViewHit } from 'utils/enviroment';
 
 
 interface Props {
@@ -27,8 +29,11 @@ export default function CreateTaskPage(props: Props): JSX.Element {
         onCreate,
         installedGit,
     } = props;
+    const location = useLocation();
 
     useEffect(() => {
+        customWaViewHit(location.pathname);
+
         if (error) {
             let errorCopy = error;
             const sshKeys: string[] = [];

cvat-ui/src/components/login-page/login-page.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
@@ -11,6 +11,7 @@ import { Row, Col } from 'antd/lib/grid';
 
 import LoginForm, { LoginData } from './login-form';
 import CookieDrawer from './cookie-policy-drawer';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface LoginPageComponentProps {
     fetching: boolean;
@@ -29,8 +30,13 @@ function LoginPageComponent(props: LoginPageComponentProps & RouteComponentProps
     const {
         fetching,
         onLogin,
+        location,
     } = props;
 
+    useEffect(() => {
+        customWaViewHit(location.pathname);
+    });
+
     return (
         <>
             <Row type='flex' justify='center' align='middle'>

cvat-ui/src/components/models-page/models-page.tsx

@@ -3,7 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from "react-router-dom";
 import Spin from 'antd/lib/spin';
 
 import TopBarComponent from './top-bar';
@@ -12,6 +13,7 @@ import BuiltModelsList from './built-models-list';
 import EmptyListComponent from './empty-list';
 import FeedbackComponent from '../feedback/feedback';
 import { Model } from '../../reducers/interfaces';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface Props {
     installedAutoAnnotation: boolean;
@@ -38,6 +40,12 @@ export default function ModelsPageComponent(props: Props): JSX.Element {
         deleteModel,
     } = props;
 
+    const location = useLocation();
+
+    useEffect(() => {
+        customWaViewHit(location.pathname);
+    });
+
     if (!modelsInitialized) {
         if (!modelsFetching) {
             props.getModels();

cvat-ui/src/components/register-page/register-page.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
 import Title from 'antd/lib/typography/Title';
@@ -12,6 +12,7 @@ import { Row, Col } from 'antd/lib/grid';
 import { UserAgreement } from 'reducers/interfaces'
 import RegisterForm, { RegisterData, UserConfirmation } from './register-form';
 import CookieDrawer from 'components/login-page/cookie-policy-drawer';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface RegisterPageComponentProps {
     fetching: boolean;
@@ -37,8 +38,13 @@ function RegisterPageComponent(
         fetching,
         userAgreements,
         onRegister,
+        location,
     } = props;
 
+    useEffect(() => {
+        customWaViewHit(location.pathname);
+    });
+
     return (
         <>
             <Row type='flex' justify='center' align='middle'>

cvat-ui/src/components/settings-page/settings-page.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import Tabs from 'antd/lib/tabs';
 import Icon from 'antd/lib/icon';
@@ -14,8 +14,15 @@ import { RouteComponentProps } from 'react-router';
 
 import WorkspaceSettingsContainer from 'containers/settings-page/workspace-settings';
 import PlayerSettingsContainer from 'containers/settings-page/player-settings';
+import { customWaViewHit } from 'utils/enviroment';
 
 function SettingsPage(props: RouteComponentProps): JSX.Element {
+    const { location } = props;
+
+    useEffect(() => {
+        customWaViewHit(location.pathname);
+    });
+
     return (
         <div className='cvat-settings-page'>
             <Row type='flex' justify='center'>

cvat-ui/src/components/task-page/task-page.tsx

@@ -15,6 +15,7 @@ import JobListContainer from 'containers/task-page/job-list';
 import ModelRunnerModalContainer from 'containers/model-runner-dialog/model-runner-dialog';
 import { Task } from 'reducers/interfaces';
 import TopBarComponent from './top-bar';
+import { customWaViewHit } from 'utils/enviroment';
 
 interface TaskPageComponentProps {
     task: Task | null | undefined;
@@ -27,6 +28,11 @@ interface TaskPageComponentProps {
 type Props = TaskPageComponentProps & RouteComponentProps<{id: string}>;
 
 class TaskPageComponent extends React.PureComponent<Props> {
+    public componentDidMount(): void {
+        const { location } = this.props;
+
+        customWaViewHit(location.pathname);
+    }
     public componentDidUpdate(): void {
         const {
             deleteActivity,

cvat-ui/src/components/tasks-page/tasks-page.tsx

@@ -16,6 +16,7 @@ import FeedbackComponent from 'components/feedback/feedback';
 import TaskListContainer from 'containers/tasks-page/tasks-list';
 import TopBar from './top-bar';
 import EmptyListComponent from './empty-list';
+import { customWaViewHit } from 'utils/enviroment';
 
 
 interface TasksPageProps {
@@ -84,6 +85,7 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
 
         const query = updateQuery(gettingQuery, location.search);
         onGetTasks(query);
+        customWaViewHit(location.pathname, location.search);
     }
 
     public componentDidUpdate(prevProps: TasksPageProps & RouteComponentProps): void {
@@ -100,6 +102,7 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
             const query = updateQuery(gettingQuery, location.search);
             message.destroy();
             onGetTasks(query);
+            customWaViewHit(location.pathname, location.search);
             return;
         }
 

cvat-ui/src/utils/enviroment.ts

@@ -9,3 +9,14 @@ export function isDev(): boolean {
 export function isPublic(): boolean {
     return process.env.PUBLIC_INSTANCE === 'true';
 }
+
+export function customWaViewHit(pageName?: string, queryString?: string, hashInfo?: string) {
+    const waHitFunctionName = process.env.WA_PAGE_VIEW_HIT
+    if (waHitFunctionName) {
+        const waHitFunction = new Function('pageName', 'queryString', 'hashInfo',
+            `if (typeof ${waHitFunctionName} === 'function') {
+                ${waHitFunctionName}(pageName, queryString, hashInfo);
+            }`);
+        waHitFunction(pageName, queryString, hashInfo);
+    }
+}