Az/import export tasks

cvat-core/src/server-proxy.js

@@ -465,6 +465,63 @@
                 });
             }
 
+            async function backupTask(id) {
+                const { backendAPI } = config;
+                let url = `${backendAPI}/tasks/${id}`;
+
+                return new Promise((resolve, reject) => {
+                    async function request() {
+                        try {
+                            const response = await Axios.get(`${url}?action=export`, {
+                                proxy: config.proxy,
+                            });
+                            if (response.status === 202) {
+                                setTimeout(request, 3000);
+                            } else {
+                                resolve(`${url}?action=download`);
+                            }
+                        } catch (errorData) {
+                            reject(generateError(errorData));
+                        }
+                    }
+
+                    setTimeout(request);
+                });
+            }
+
+            async function importTask(file) {
+                const { backendAPI } = config;
+
+                let annotationData = new FormData();
+                annotationData.append('task_file', file);
+
+                return new Promise((resolve, reject) => {
+                    async function request() {
+                        try {
+                            const response = await Axios.post(
+                                `${backendAPI}/tasks?action=import`,
+                                annotationData,
+                                {
+                                    proxy: config.proxy,
+                                },
+                            );
+                            if (response.status === 202) {
+                                annotationData = new FormData();
+                                annotationData.append('rq_id', response.data.rq_id);
+                                setTimeout(request, 3000);
+                            } else {
+                                const importedTask = await getTasks(`?id=${response.data.id}`);
+                                resolve(importedTask[0]);
+                            }
+                        } catch (errorData) {
+                            reject(generateError(errorData));
+                        }
+                    }
+
+                    setTimeout(request);
+                });
+            }
+
             async function createTask(taskSpec, taskDataSpec, onUpdate) {
                 const { backendAPI } = config;
 
@@ -1046,6 +1103,8 @@
                             createTask,
                             deleteTask,
                             exportDataset,
+                            backupTask,
+                            importTask,
                         }),
                         writable: false,
                     },

cvat-core/src/session.js

@@ -1604,6 +1604,36 @@
             const result = await PluginRegistry.apiWrapper.call(this, Task.prototype.delete);
             return result;
         }
+
+        /**
+         * Method makes a backup of a task
+         * @method backup
+         * @memberof module:API.cvat.classes.Task
+         * @readonly
+         * @instance
+         * @async
+         * @throws {module:API.cvat.exceptions.ServerError}
+         * @throws {module:API.cvat.exceptions.PluginError}
+         */
+        async backup() {
+            const result = await PluginRegistry.apiWrapper.call(this, Task.prototype.backup);
+            return result;
+        }
+
+        /**
+         * Method imports a task from a backup
+         * @method import
+         * @memberof module:API.cvat.classes.Task
+         * @readonly
+         * @instance
+         * @async
+         * @throws {module:API.cvat.exceptions.ServerError}
+         * @throws {module:API.cvat.exceptions.PluginError}
+         */
+         async import(file) {
+            const result = await PluginRegistry.apiWrapper.call(this, Task.prototype.import, file);
+            return result;
+        }
     }
 
     module.exports = {
@@ -2005,6 +2035,16 @@
         return result;
     };
 
+    Task.prototype.backup.implementation = async function () {
+        const result = await serverProxy.tasks.backupTask(this.id);
+        return result;
+    };
+
+    Task.prototype.import.implementation = async function (file) {
+        const result = await serverProxy.tasks.importTask(file);
+        return result;
+    };
+
     Task.prototype.frames.get.implementation = async function (frame, isPlaying, step) {
         if (!Number.isInteger(frame) || frame < 0) {
             throw new ArgumentError(`Frame must be a positive integer. Got: "${frame}"`);

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

@@ -35,6 +35,12 @@ export enum TasksActionTypes {
     UPDATE_TASK_SUCCESS = 'UPDATE_TASK_SUCCESS',
     UPDATE_TASK_FAILED = 'UPDATE_TASK_FAILED',
     HIDE_EMPTY_TASKS = 'HIDE_EMPTY_TASKS',
+    BACKUP_TASK = 'BACKUP_TASK',
+    BACKUP_TASK_SUCCESS = 'BACKUP_TASK_SUCCESS',
+    BACKUP_TASK_FAILED = 'BACKUP_TASK_FAILED',
+    IMPORT_TASK = 'IMPORT_TASK',
+    IMPORT_TASK_SUCCESS = 'IMPORT_TASK_SUCCESS',
+    IMPORT_TASK_FAILED = 'IMPORT_TASK_FAILED',
 }
 
 function getTasks(): AnyAction {
@@ -213,6 +219,55 @@ export function loadAnnotationsAsync(
     };
 }
 
+function importTask(): AnyAction {
+    const action = {
+        type: TasksActionTypes.IMPORT_TASK,
+        payload: {},
+        importing: true,
+    };
+
+    return action;
+}
+
+function importTaskSuccess(taskId: number): AnyAction {
+    const action = {
+        type: TasksActionTypes.IMPORT_TASK_SUCCESS,
+        payload: {
+            taskId,
+            importing: false,
+        },
+    };
+
+    return action;
+}
+
+function importTaskFailed(error: any): AnyAction {
+    const action = {
+        type: TasksActionTypes.IMPORT_TASK_FAILED,
+        payload: {
+            error,
+            importing: false,
+        },
+    };
+
+    return action;
+}
+
+export function importTaskAsync(
+    file: File,
+): ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            dispatch(importTask());
+            let taskInstance = new cvat.classes.Task({});
+            taskInstance = await taskInstance.import(file);
+            dispatch(importTaskSuccess(taskInstance));
+        } catch (error) {
+            dispatch(importTaskFailed(error));
+        }
+    };
+}
+
 function exportDataset(task: any, exporter: any): AnyAction {
     const action = {
         type: TasksActionTypes.EXPORT_DATASET,
@@ -267,6 +322,57 @@ export function exportDatasetAsync(task: any, exporter: any): ThunkAction<Promis
     };
 }
 
+function backupTask(taskID: number): AnyAction {
+    const action = {
+        type: TasksActionTypes.BACKUP_TASK,
+        payload: {
+            taskID,
+        },
+    };
+
+    return action;
+}
+
+function backupTaskSuccess(taskID: any): AnyAction {
+    const action = {
+        type: TasksActionTypes.BACKUP_TASK_SUCCESS,
+        payload: {
+            taskID,
+        },
+    };
+
+    return action;
+}
+
+function backupTaskFailed(taskID: any, error: any): AnyAction {
+    const action = {
+        type: TasksActionTypes.BACKUP_TASK_FAILED,
+        payload: {
+            taskID,
+            error,
+        },
+    };
+
+    return action;
+}
+
+export function backupTaskAsync(taskInstance: any): ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(backupTask(taskInstance.id));
+
+        try {
+            const url = await taskInstance.backup();
+            const downloadAnchor = window.document.getElementById('downloadAnchor') as HTMLAnchorElement;
+            downloadAnchor.href = url;
+            downloadAnchor.click();
+        } catch (error) {
+            dispatch(backupTaskFailed(taskInstance.id, error));
+        }
+
+        dispatch(backupTaskSuccess(taskInstance.id));
+    };
+}
+
 function deleteTask(taskID: number): AnyAction {
     const action = {
         type: TasksActionTypes.DELETE_TASK,

cvat-ui/src/components/actions-menu/actions-menu.tsx

@@ -6,6 +6,7 @@ import './styles.scss';
 import React from 'react';
 import Menu from 'antd/lib/menu';
 import Modal from 'antd/lib/modal';
+import { LoadingOutlined } from '@ant-design/icons';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MenuInfo } from 'rc-menu/lib/interface';
 import DumpSubmenu from './dump-submenu';
@@ -25,6 +26,7 @@ interface Props {
     inferenceIsActive: boolean;
     taskDimension: DimensionType;
     onClickMenu: (params: MenuInfo, file?: File) => void;
+    backupIsActive: boolean;
 }
 
 export enum Actions {
@@ -34,6 +36,7 @@ export enum Actions {
     DELETE_TASK = 'delete_task',
     RUN_AUTO_ANNOTATION = 'run_auto_annotation',
     OPEN_BUG_TRACKER = 'open_bug_tracker',
+    BACKUP_TASK = 'backup_task',
 }
 
 export default function ActionsMenuComponent(props: Props): JSX.Element {
@@ -49,6 +52,7 @@ export default function ActionsMenuComponent(props: Props): JSX.Element {
         exportActivities,
         loadActivity,
         taskDimension,
+        backupIsActive,
     } = props;
 
     let latestParams: MenuInfo | null = null;
@@ -127,6 +131,10 @@ export default function ActionsMenuComponent(props: Props): JSX.Element {
             <Menu.Item disabled={inferenceIsActive} key={Actions.RUN_AUTO_ANNOTATION}>
                 Automatic annotation
             </Menu.Item>
+            <Menu.Item key={Actions.BACKUP_TASK}>
+                {backupIsActive && <LoadingOutlined style={{ marginLeft: 10 }} />}
+                Backup Task
+            </Menu.Item>
             <hr />
             <Menu.Item key={Actions.DELETE_TASK}>Delete</Menu.Item>
         </Menu>

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

@@ -25,6 +25,8 @@ interface TasksPageProps {
     numberOfHiddenTasks: number;
     onGetTasks: (gettingQuery: TasksQuery) => void;
     hideEmptyTasks: (hideEmpty: boolean) => void;
+    onImportTask: (file: File) => void;
+    taskImporting: boolean;
 }
 
 function getSearchField(gettingQuery: TasksQuery): string {
@@ -186,15 +188,20 @@ class TasksPageComponent extends React.PureComponent<TasksPageProps & RouteCompo
     }
 
     public render(): JSX.Element {
-        const { tasksFetching, gettingQuery, numberOfVisibleTasks } = this.props;
+        const { tasksFetching, gettingQuery, numberOfVisibleTasks, onImportTask, taskImporting } = this.props;
 
         if (tasksFetching) {
             return <Spin size='large' className='cvat-spinner' />;
         }
 
         return (
             <div className='cvat-tasks-page'>
-                <TopBar onSearch={this.handleSearch} searchValue={getSearchField(gettingQuery)} />
+                <TopBar
+                    onSearch={this.handleSearch}
+                    searchValue={getSearchField(gettingQuery)}
+                    onFileUpload={onImportTask}
+                    taskImporting={taskImporting}
+                 />
                 {numberOfVisibleTasks ? (
                     <TaskListContainer onSwitchPage={this.handlePagination} />
                 ) : (

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

@@ -9,16 +9,20 @@ import { PlusOutlined } from '@ant-design/icons';
 import Button from 'antd/lib/button';
 import Input from 'antd/lib/input';
 import Text from 'antd/lib/typography/Text';
+import Upload from 'antd/lib/upload';
+import { UploadOutlined, LoadingOutlined } from '@ant-design/icons';
 
 import SearchTooltip from 'components/search-tooltip/search-tooltip';
 
 interface VisibleTopBarProps {
     onSearch: (value: string) => void;
+    onFileUpload(file: File): void;
     searchValue: string;
+    taskImporting: boolean;
 }
 
 export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element {
-    const { searchValue, onSearch } = props;
+    const { searchValue, onSearch, onFileUpload, taskImporting } = props;
 
     const history = useHistory();
 
@@ -37,6 +41,29 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
                         />
                     </SearchTooltip>
                 </Col>
+                <Col md={{ span: 11 }} lg={{ span: 9 }} xl={{ span: 8 }} xxl={{ span: 7 }}>
+                    <Upload
+                        accept='.zip'
+                        multiple={false}
+                        showUploadList={false}
+                        beforeUpload={(file: File): boolean => {
+                            onFileUpload(file);
+                            return false;
+                        }}
+                    >
+                        <Button
+                            size='large'
+                            id='cvat-import-task-button'
+                            type='primary'
+                            disabled={taskImporting}
+                            icon={<UploadOutlined />}
+                        >
+
+                            Import Task
+                            {taskImporting && <LoadingOutlined style={{ marginLeft: 10 }} />}
+                        </Button>
+                    </Upload>
+                </Col>
                 <Col md={{ span: 11 }} lg={{ span: 9 }} xl={{ span: 8 }} xxl={{ span: 7 }}>
                     <Button
                         size='large'