React & Antd UI: Create task (#840)

* Separated component user selector * Change job assignee * Basic create task window * Bug fixes and refactoring * Create task connected with a server * Loading status for a button * Reset loading on error response * UI improvements * Github/feedback/share window
cvat-ai · Nov 15, 2019 · 3b6961f · 3b6961f
1 parent 690ecf9
commit 3b6961f
Show file tree

Hide file tree

Showing 32 changed files with 1,637 additions and 213 deletions.
diff --git a/cvat-core/src/session.js b/cvat-core/src/session.js
@@ -1205,6 +1205,7 @@
         if (this.id) {
             const jobData = {
                 status: this.status,
+                assignee: this.assignee ? this.assignee.id : null,
             };
 
             await serverProxy.jobs.saveJob(this.id, jobData);

diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -38,6 +38,7 @@
     "@types/react-redux": "^7.1.2",
     "@types/react-router": "^5.0.5",
     "@types/react-router-dom": "^5.1.0",
+    "@types/react-share": "^3.0.1",
     "antd": "^3.24.2",
     "dotenv-webpack": "^1.7.0",
     "moment": "^2.24.0",
@@ -47,6 +48,7 @@
     "react-redux": "^7.1.1",
     "react-router": "^5.1.0",
     "react-router-dom": "^5.1.0",
+    "react-share": "^3.0.1",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0"
   }

diff --git a/cvat-ui/src/actions/share-actions.ts b/cvat-ui/src/actions/share-actions.ts
@@ -0,0 +1,60 @@
+import { AnyAction, Dispatch, ActionCreator } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+
+import { ShareFileInfo } from '../reducers/interfaces';
+import getCore from '../core';
+
+const core = getCore();
+
+export enum ShareActionTypes {
+    LOAD_SHARE_DATA = 'LOAD_SHARE_DATA',
+    LOAD_SHARE_DATA_SUCCESS = 'LOAD_SHARE_DATA_SUCCESS',
+    LOAD_SHARE_DATA_FAILED = 'LOAD_SHARE_DATA_FAILED',
+}
+
+function loadShareData(): AnyAction {
+    const action = {
+        type: ShareActionTypes.LOAD_SHARE_DATA,
+        payload: {},
+    };
+
+    return action;
+}
+
+function loadShareDataSuccess(values: ShareFileInfo[], directory: string): AnyAction {
+    const action = {
+        type: ShareActionTypes.LOAD_SHARE_DATA_SUCCESS,
+        payload: {
+            values,
+            directory,
+        },
+    };
+
+    return action;
+}
+
+function loadShareDataFailed(error: any): AnyAction {
+    const action = {
+        type: ShareActionTypes.LOAD_SHARE_DATA_FAILED,
+        payload: {
+            error,
+        },
+    };
+
+    return action;
+}
+
+export function loadShareDataAsync(directory: string, success: () => void, failure: () => void):
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            dispatch(loadShareData());
+            const values = await core.server.share(directory);
+            success();
+            dispatch(loadShareDataSuccess(values as ShareFileInfo[], directory));
+        } catch (error) {
+            dispatch(loadShareDataFailed(error));
+            failure();
+        }
+    };
+}
diff --git a/cvat-ui/src/actions/task-actions.ts b/cvat-ui/src/actions/task-actions.ts
@@ -109,9 +109,34 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
             let task = null;
             try {
                 [task] = await core.tasks.get({ id: taskInstance.id });
-            } catch (_) {
-                // server error?
+            } catch (fetchError) {
                 dispatch(updateTaskFailed(error, taskInstance));
+                return;
+            }
+
+            dispatch(updateTaskFailed(error, task));
+        }
+    };
+}
+
+// a job is a part of a task, so for simplify we consider
+// updating the job as updating a task
+export function updateJobAsync(jobInstance: any):
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            dispatch(updateTask());
+            await jobInstance.save();
+            const [task] = await core.tasks.get({ id: jobInstance.task.id });
+            dispatch(updateTaskSuccess(task));
+        } catch (error) {
+            // try abort all changes
+            let task = null;
+            try {
+                [task] = await core.tasks.get({ id: jobInstance.task.id });
+            } catch (fetchError) {
+                dispatch(updateTaskFailed(error, jobInstance.task));
+                return;
             }
 
             dispatch(updateTaskFailed(error, task));

diff --git a/cvat-ui/src/actions/tasks-actions.ts b/cvat-ui/src/actions/tasks-actions.ts
@@ -19,6 +19,10 @@ export enum TasksActionTypes {
     DELETE_TASK = 'DELETE_TASK',
     DELETE_TASK_SUCCESS = 'DELETE_TASK_SUCCESS',
     DELETE_TASK_FAILED = 'DELETE_TASK_FAILED',
+    CREATE_TASK = 'CREATE_TASK',
+    CREATE_TASK_STATUS_UPDATED = 'CREATE_TASK_STATUS_UPDATED',
+    CREATE_TASK_SUCCESS = 'CREATE_TASK_SUCCESS',
+    CREATE_TASK_FAILED = 'CREATE_TASK_FAILED',
 }
 
 function getTasks(): AnyAction {
@@ -251,3 +255,92 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
         dispatch(deleteTaskSuccess(taskInstance.id));
     };
 }
+
+function createTask(): AnyAction {
+    const action = {
+        type: TasksActionTypes.CREATE_TASK,
+        payload: {},
+    };
+
+    return action;
+}
+
+function createTaskSuccess(): AnyAction {
+    const action = {
+        type: TasksActionTypes.CREATE_TASK_SUCCESS,
+        payload: {},
+    };
+
+    return action;
+}
+
+function createTaskFailed(error: any): AnyAction {
+    const action = {
+        type: TasksActionTypes.CREATE_TASK_FAILED,
+        payload: {
+            error,
+        },
+    };
+
+    return action;
+}
+
+function createTaskUpdateStatus(status: string): AnyAction {
+    const action = {
+        type: TasksActionTypes.CREATE_TASK_STATUS_UPDATED,
+        payload: {
+            status,
+        },
+    };
+
+    return action;
+}
+
+export function createTaskAsync(data: any):
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        const description: any = {
+            name: data.basic.name,
+            labels: data.labels,
+            z_order: data.advanced.zOrder,
+            image_quality: 70,
+        };
+
+        if (data.advanced.bugTracker) {
+            description.bug_tracker = data.advanced.bugTracker;
+        }
+        if (data.advanced.segmentSize) {
+            description.segment_size = data.advanced.segmentSize;
+        }
+        if (data.advanced.overlapSize) {
+            description.overlap = data.advanced.overlapSize;
+        }
+        if (data.advanced.startFrame) {
+            description.start_frame = data.advanced.startFrame;
+        }
+        if (data.advanced.stopFrame) {
+            description.stop_frame = data.advanced.stopFrame;
+        }
+        if (data.advanced.frameFilter) {
+            description.frame_filter = data.advanced.frameFilter;
+        }
+        if (data.advanced.imageQuality) {
+            description.image_quality = data.advanced.imageQuality;
+        }
+
+        const taskInstance = new cvat.classes.Task(description);
+        taskInstance.clientFiles = data.files.local;
+        taskInstance.serverFiles = data.files.share;
+        taskInstance.remoteFiles = data.files.remote;
+
+        dispatch(createTask());
+        try {
+            await taskInstance.save((status: string): void => {
+                dispatch(createTaskUpdateStatus(status));
+            });
+            dispatch(createTaskSuccess());
+        } catch (error) {
+            dispatch(createTaskFailed(error));
+        }
+    };
+}