Add about CVAT

cvat-ui/src/actions/about-actions.ts

@@ -0,0 +1,55 @@
+import { AnyAction, Dispatch, ActionCreator } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+
+import getCore from '../core';
+
+const core = getCore();
+
+export enum AboutActionTypes {
+    GET_ABOUT = 'GET_ABOUT',
+    GET_ABOUT_SUCCESS = 'GET_ABOUT_SUCCESS',
+    GET_ABOUT_FAILED = 'GET_ABOUT_FAILED',
+}
+
+function getAbout(): AnyAction {
+    const action = {
+        type: AboutActionTypes.GET_ABOUT,
+        payload: {},
+    };
+
+    return action;
+}
+
+function getAboutSuccess(about: any): AnyAction {
+    const action = {
+        type: AboutActionTypes.GET_ABOUT_SUCCESS,
+        payload: { about },
+    };
+
+    return action;
+}
+
+function getAboutFailed(error: any): AnyAction {
+    const action = {
+        type: AboutActionTypes.GET_ABOUT_FAILED,
+        payload: { error },
+    };
+
+    return action;
+}
+
+export function getAboutAsync():
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(getAbout());
+
+        try {
+            const about = await core.server.about();
+            dispatch(
+                getAboutSuccess(about),
+            );
+        } catch (error) {
+            dispatch(getAboutFailed(error));
+        }
+    };
+}

cvat-ui/src/actions/serverInfo-actions.ts

@@ -0,0 +1,55 @@
+import { AnyAction, Dispatch, ActionCreator } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+
+import getCore from '../core';
+
+const core = getCore();
+
+export enum ServerInfoActionTypes {
+    GET_SERVER_INFO = 'GET_SERVER_INFO',
+    GET_SERVER_INFO_SUCCESS = 'GET_SERVER_INFO_SUCCESS',
+    GET_SERVER_INFO_FAILED = 'GET_SERVER_INFO_FAILED',
+}
+
+function getServerInfo(): AnyAction {
+    const action = {
+        type: ServerInfoActionTypes.GET_SERVER_INFO,
+        payload: {},
+    };
+
+    return action;
+}
+
+function getServerInfoSuccess(serverInfo: string): AnyAction {
+    const action = {
+        type: ServerInfoActionTypes.GET_SERVER_INFO_SUCCESS,
+        payload: { serverInfo },
+    };
+
+    return action;
+}
+
+function getServerInfoFailed(error: any): AnyAction {
+    const action = {
+        type: ServerInfoActionTypes.GET_SERVER_INFO_FAILED,
+        payload: { error },
+    };
+
+    return action;
+}
+
+export function getServerInfoAsync():
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(getServerInfo());
+
+        try {
+            const about = await core.server.about();
+            dispatch(
+                getServerInfoSuccess(about),
+            );
+        } catch (error) {
+            dispatch(getServerInfoFailed(error));
+        }
+    };
+}

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

@@ -28,6 +28,7 @@ import { NotificationsState } from '../reducers/interfaces';
 type CVATAppProps = {
     loadFormats: () => void;
     loadUsers: () => void;
+    loadAbout: () => void;
     verifyAuthorized: () => void;
     initPlugins: () => void;
     resetErrors: () => void;
@@ -39,11 +40,14 @@ type CVATAppProps = {
     formatsFetching: boolean;
     usersInitialized: boolean;
     usersFetching: boolean;
+    aboutInitialized: boolean;
+    aboutFetching: boolean;
     installedAutoAnnotation: boolean;
     installedTFAnnotation: boolean;
     installedTFSegmentation: boolean;
     notifications: NotificationsState;
     user: any;
+    about: any;
 };
 
 export default class CVATApplication extends React.PureComponent<CVATAppProps> {
@@ -56,12 +60,15 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
         const {
             loadFormats,
             loadUsers,
+            loadAbout,
             initPlugins,
             userInitialized,
             formatsInitialized,
             formatsFetching,
             usersInitialized,
             usersFetching,
+            aboutInitialized,
+            aboutFetching,
             pluginsInitialized,
             pluginsFetching,
             user,
@@ -83,6 +90,10 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
             loadUsers();
         }
 
+        if (!aboutInitialized && !aboutFetching) {
+            loadAbout();
+        }
+
         if (!pluginsInitialized && !pluginsFetching) {
             initPlugins();
         }
@@ -152,13 +163,14 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
         const { tasks } = notifications.errors;
         const { formats } = notifications.errors;
         const { users } = notifications.errors;
+        const { about } = notifications.errors;
         const { share } = notifications.errors;
         const { models } = notifications.errors;
 
         const shown = !!auth.authorized || !!auth.login || !!auth.logout || !!auth.register
             || !!tasks.fetching || !!tasks.updating || !!tasks.dumping || !!tasks.loading
             || !!tasks.exporting || !!tasks.deleting || !!tasks.creating || !!formats.fetching
-            || !!users.fetching || !!share.fetching || !!models.creating || !!models.starting
+            || !!users.fetching || !!about.fetching || !!share.fetching || !!models.creating || !!models.starting
             || !!models.fetching || !!models.deleting || !!models.inferenceStatusFetching
             || !!models.metaFetching;
 
@@ -201,6 +213,9 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
         if (users.fetching) {
             showError(users.fetching.message, users.fetching.reason);
         }
+        if (about.fetching) {
+            showError(about.fetching.message, about.fetching.reason);
+        }
         if (share.fetching) {
             showError(share.fetching.message, share.fetching.reason);
         }
@@ -236,6 +251,7 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
         const {
             userInitialized,
             usersInitialized,
+            aboutInitialized,
             pluginsInitialized,
             formatsInitialized,
             installedAutoAnnotation,
@@ -246,7 +262,7 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
 
         const readyForRender = (userInitialized && user == null)
             || (userInitialized && formatsInitialized
-            && pluginsInitialized && usersInitialized);
+            && pluginsInitialized && usersInitialized && aboutInitialized);
 
         const withModels = installedAutoAnnotation
             || installedTFAnnotation || installedTFSegmentation;

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

@@ -3,13 +3,23 @@ import React from 'react';
 
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
+import {
+    BrowserRouter as Router,
+    Link,
+    Switch,
+    Route,
+  } from "react-router-dom";
+
 
 import {
     Layout,
     Icon,
     Button,
     Menu,
     Dropdown,
+    Modal,
+    Row,
+    Col,
 } from 'antd';
 
 import Text from 'antd/lib/typography/Text';
@@ -31,6 +41,7 @@ interface HeaderContainerProps {
     installedTFAnnotation: boolean;
     installedTFSegmentation: boolean;
     username: string;
+    about: any;
 }
 
 type Props = HeaderContainerProps & RouteComponentProps;
@@ -42,6 +53,7 @@ function HeaderContainer(props: Props): JSX.Element {
         installedTFAnnotation,
         installedAnalytics,
         username,
+        about,
         onLogout,
         logoutFetching,
     } = props;
@@ -50,13 +62,54 @@ function HeaderContainer(props: Props): JSX.Element {
         || installedTFAnnotation
         || installedTFSegmentation;
 
+    function aboutModal() {
+        Modal.info({
+            title: `${about.name}`,
+            content: (
+                <div>
+                    <p>
+                        {`${about.description}`}
+                    </p>
+                    <p>
+                        <Text strong>
+                            Server version:
+                        </Text>
+                        <Text type='secondary'>
+                            {` ${about.version}`}
+                        </Text>
+                    </p>
+                    <p>
+                        <Text strong>
+                            Client version:
+                        </Text>
+                        <Text type='secondary'>
+                            {` ${core.client.version}`}
+                        </Text>
+                    </p>
+                    <Row type='flex' justify='space-around'>
+                        <Col span={4}><a href= 'https://github.com/opencv/cvat/blob/develop/CHANGELOG.md' target='_blank' rel="noopener noreferrer" >What's new?</a></Col>
+                        <Col span={4}><a href='https://github.com/opencv/cvat/blob/develop/LICENSE' target='_blank' rel="noopener noreferrer" >License</a></Col>
+                        <Col span={4}><a href='https://gitter.im/opencv-cvat' target='_blank' rel="noopener noreferrer" >Need help?</a></Col>
+                        <Col span={4}><a href='https://software.intel.com/en-us/forums/intel-distribution-of-openvino-toolkit' target='_blank' rel="noopener noreferrer" >Forum on Intel Developer Zone</a></Col>
+                    </Row>  
+                </div>
+            ),
+            width : 800,
+            okButtonProps: {
+                style: {
+                    width: '100px',
+                },
+            },
+        })
+    }
+
     const menu = (
         <Menu className='cvat-header-menu' mode='vertical'>
             <Menu.Item>
                 <Icon type='setting' />
                 Settings
             </Menu.Item>
-            <Menu.Item>
+            <Menu.Item onClick={() => aboutModal()}>
                 <Icon type='info-circle' />
                 About
             </Menu.Item>

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

@@ -16,6 +16,7 @@ interface StateToProps {
     installedTFSegmentation: boolean;
     installedTFAnnotation: boolean;
     username: string;
+    about: any;
 }
 
 interface DispatchToProps {
@@ -25,13 +26,15 @@ interface DispatchToProps {
 function mapStateToProps(state: CombinedState): StateToProps {
     const { auth } = state;
     const { plugins } = state.plugins;
+    const { about } = state.about;
     return {
         logoutFetching: state.auth.fetching,
         installedAnalytics: plugins[SupportedPlugins.ANALYTICS],
         installedAutoAnnotation: plugins[SupportedPlugins.AUTO_ANNOTATION],
         installedTFSegmentation: plugins[SupportedPlugins.TF_SEGMENTATION],
         installedTFAnnotation: plugins[SupportedPlugins.TF_ANNOTATION],
         username: auth.user.username,
+        about: about,
     };
 }
 

cvat-ui/src/index.tsx

@@ -11,6 +11,7 @@ import { authorizedAsync } from './actions/auth-actions';
 import { getFormatsAsync } from './actions/formats-actions';
 import { checkPluginsAsync } from './actions/plugins-actions';
 import { getUsersAsync } from './actions/users-actions';
+import { getAboutAsync } from './actions/about-actions';
 import {
     resetErrors,
     resetMessages,
@@ -30,19 +31,23 @@ interface StateToProps {
     userInitialized: boolean;
     usersInitialized: boolean;
     usersFetching: boolean;
+    aboutInitialized: boolean;
+    aboutFetching: boolean;
     formatsInitialized: boolean;
     formatsFetching: boolean;
     installedAutoAnnotation: boolean;
     installedTFSegmentation: boolean;
     installedTFAnnotation: boolean;
     notifications: NotificationsState;
     user: any;
+    about: any;
 }
 
 interface DispatchToProps {
     loadFormats: () => void;
     verifyAuthorized: () => void;
     loadUsers: () => void;
+    loadAbout: () => void;
     initPlugins: () => void;
     resetErrors: () => void;
     resetMessages: () => void;
@@ -53,20 +58,24 @@ function mapStateToProps(state: CombinedState): StateToProps {
     const { auth } = state;
     const { formats } = state;
     const { users } = state;
+    const { about } = state;
 
     return {
         userInitialized: auth.initialized,
         pluginsInitialized: plugins.initialized,
         pluginsFetching: plugins.fetching,
         usersInitialized: users.initialized,
         usersFetching: users.fetching,
+        aboutInitialized: about.initialized,
+        aboutFetching: about.fetching,
         formatsInitialized: formats.initialized,
         formatsFetching: formats.fetching,
         installedAutoAnnotation: plugins.plugins.AUTO_ANNOTATION,
         installedTFSegmentation: plugins.plugins.TF_SEGMENTATION,
         installedTFAnnotation: plugins.plugins.TF_ANNOTATION,
         notifications: { ...state.notifications },
         user: auth.user,
+        about: state.about,
     };
 }
 
@@ -76,6 +85,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
         verifyAuthorized: (): void => dispatch(authorizedAsync()),
         initPlugins: (): void => dispatch(checkPluginsAsync()),
         loadUsers: (): void => dispatch(getUsersAsync()),
+        loadAbout: (): void => dispatch(getAboutAsync()),
         resetErrors: (): void => dispatch(resetErrors()),
         resetMessages: (): void => dispatch(resetMessages()),
     };