React UI: Added displayed versions of core, canvas, and ui in about

cvat-canvas/README.md

@@ -134,6 +134,8 @@ Standard JS events are used.
     // Create an instance of a canvas
     const canvas = new window.canvas.Canvas();
 
+    console.log('Version', window.canvas.CanvasVersion);
+
     // Put canvas to a html container
     htmlContainer.appendChild(canvas.html());
     canvas.fitCanvas();

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "0.1.0",
+  "version": "0.5.2",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/typescript/canvas.ts

@@ -28,6 +28,9 @@ import {
 } from './canvasView';
 
 import '../scss/canvas.scss';
+import pjson from '../../package.json';
+
+const CanvasVersion = pjson.version;
 
 interface Canvas {
     html(): HTMLDivElement;
@@ -130,8 +133,8 @@ class CanvasImpl implements Canvas {
     }
 }
 
-
 export {
     CanvasImpl as Canvas,
     Rotation,
+    CanvasVersion,
 };

cvat-canvas/tsconfig.json

@@ -7,6 +7,8 @@
         "noImplicitAny": true,
         "preserveConstEnums": true,
         "declaration": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
         "moduleResolution": "node",
         "declarationDir": "dist/declaration",
         "paths": {

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core.js",
-  "version": "0.1.0",
+  "version": "0.5.2",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "babel.config.js",
   "scripts": {

cvat-ui/package.json

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

cvat-ui/src/components/header/header.tsx

@@ -16,24 +16,26 @@ import {
 
 import Text from 'antd/lib/typography/Text';
 
-import getCore from 'cvat-core';
 import {
     CVATLogo,
     AccountIcon,
 } from 'icons';
 
-const core = getCore();
-const serverHost = core.config.backendAPI.slice(0, -7);
-
 interface HeaderContainerProps {
     onLogout: () => void;
     logoutFetching: boolean;
     installedAnalytics: boolean;
     installedAutoAnnotation: boolean;
     installedTFAnnotation: boolean;
     installedTFSegmentation: boolean;
+    serverHost: string;
     username: string;
-    serverAbout: any;
+    toolName: string;
+    serverVersion: string;
+    serverDescription: string;
+    coreVersion: string;
+    canvasVersion: string;
+    uiVersion: string;
 }
 
 type Props = HeaderContainerProps & RouteComponentProps;
@@ -45,7 +47,13 @@ function HeaderContainer(props: Props): JSX.Element {
         installedTFAnnotation,
         installedAnalytics,
         username,
-        serverAbout,
+        toolName,
+        serverHost,
+        serverVersion,
+        serverDescription,
+        coreVersion,
+        canvasVersion,
+        uiVersion,
         onLogout,
         logoutFetching,
     } = props;
@@ -61,26 +69,42 @@ function HeaderContainer(props: Props): JSX.Element {
         const FORUM = 'https://software.intel.com/en-us/forums/intel-distribution-of-openvino-toolkit';
 
         Modal.info({
-            title: `${serverAbout.name}`,
+            title: `${toolName}`,
             content: (
                 <div>
                     <p>
-                        {`${serverAbout.description}`}
+                        {`${serverDescription}`}
                     </p>
                     <p>
                         <Text strong>
                             Server version:
                         </Text>
                         <Text type='secondary'>
-                            {` ${serverAbout.version}`}
+                            {` ${serverVersion}`}
+                        </Text>
+                    </p>
+                    <p>
+                        <Text strong>
+                            Core version:
+                        </Text>
+                        <Text type='secondary'>
+                            {` ${coreVersion}`}
+                        </Text>
+                    </p>
+                    <p>
+                        <Text strong>
+                            Canvas version:
+                        </Text>
+                        <Text type='secondary'>
+                            {` ${canvasVersion}`}
                         </Text>
                     </p>
                     <p>
                         <Text strong>
-                            Client version:
+                            UI version:
                         </Text>
                         <Text type='secondary'>
-                            {` ${core.client.version}`}
+                            {` ${uiVersion}`}
                         </Text>
                     </p>
                     <Row type='flex' justify='space-around'>

cvat-ui/src/containers/header/header.tsx

@@ -5,36 +5,63 @@ import {
     CombinedState,
 } from 'reducers/interfaces';
 
+import getCore from 'cvat-core';
 import HeaderComponent from 'components/header/header';
 import { logoutAsync } from 'actions/auth-actions';
 
+const core = getCore();
+
 interface StateToProps {
     logoutFetching: boolean;
     installedAnalytics: boolean;
     installedAutoAnnotation: boolean;
     installedTFSegmentation: boolean;
     installedTFAnnotation: boolean;
     username: string;
-    serverAbout: any;
+    toolName: string;
+    serverHost: string;
+    serverVersion: string;
+    serverDescription: string;
+    coreVersion: string;
+    canvasVersion: string;
+    uiVersion: string;
 }
 
 interface DispatchToProps {
     onLogout: typeof logoutAsync;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
-    const { auth } = state;
-    const { list } = state.plugins;
-    const { about } = state;
+    const {
+        auth: {
+            fetching: logoutFetching,
+            user: {
+                username,
+            },
+        },
+        plugins: {
+            list,
+        },
+        about: {
+            server,
+            packageVersion,
+        },
+    } = state;
 
     return {
-        logoutFetching: state.auth.fetching,
+        logoutFetching,
         installedAnalytics: list[SupportedPlugins.ANALYTICS],
         installedAutoAnnotation: list[SupportedPlugins.AUTO_ANNOTATION],
         installedTFSegmentation: list[SupportedPlugins.TF_SEGMENTATION],
         installedTFAnnotation: list[SupportedPlugins.TF_ANNOTATION],
-        username: auth.user.username,
-        serverAbout: about.server,
+        username,
+        toolName: server.name as string,
+        serverHost: core.config.backendAPI.slice(0, -7),
+        serverDescription: server.description as string,
+        serverVersion: server.version as string,
+        coreVersion: packageVersion.core,
+        canvasVersion: packageVersion.canvas,
+        uiVersion: packageVersion.ui,
     };
 }
 

cvat-ui/src/cvat-canvas.ts

@@ -1,9 +1,11 @@
 import {
     Canvas,
     Rotation,
+    CanvasVersion,
 } from '../../cvat-canvas/src/typescript/canvas';
 
 export {
     Canvas,
     Rotation,
+    CanvasVersion,
 };

cvat-ui/src/reducers/about-reducer.ts

@@ -2,9 +2,17 @@ import { AboutActions, AboutActionTypes } from 'actions/about-actions';
 import { AuthActions, AuthActionTypes } from 'actions/auth-actions';
 import { AboutState } from './interfaces';
 
+import { CanvasVersion } from '../cvat-canvas';
+import getCore from '../cvat-core';
+import pjson from '../../package.json';
 
 const defaultState: AboutState = {
     server: {},
+    packageVersion: {
+        core: getCore().client.version,
+        canvas: CanvasVersion,
+        ui: pjson.version,
+    },
     fetching: false,
     initialized: false,
 };

cvat-ui/src/reducers/interfaces.ts

@@ -88,6 +88,11 @@ export interface UsersState {
 
 export interface AboutState {
     server: any;
+    packageVersion: {
+        core: string;
+        canvas: string;
+        ui: string;
+    };
     fetching: boolean;
     initialized: boolean;
 }

cvat-ui/tsconfig.json

@@ -8,13 +8,13 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "esModuleInterop": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",