UI support cloud storage

cvat-core/src/api.js

@@ -24,7 +24,6 @@ function build() {
     const { FrameData } = require('./frames');
     const { CloudStorage } = require('./cloud-storage');
 
-
     const enums = require('./enums');
 
     const {

cvat-ui/src/actions/cloud-storage-actions.ts

@@ -0,0 +1,175 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { Dispatch, ActionCreator } from 'redux';
+import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
+import getCore from 'cvat-core-wrapper';
+import { CloudStoragesQuery, CloudStorage } from 'reducers/interfaces';
+
+const cvat = getCore();
+
+export enum CloudStorageActionTypes {
+    UPDATE_CLOUD_STORAGES_GETTING_QUERY = 'UPDATE_CLOUD_STORAGES_GETTING_QUERY',
+    GET_CLOUD_STORAGES = 'GET_CLOUD_STORAGES',
+    GET_CLOUD_STORAGE_SUCCESS = 'GET_CLOUD_STORAGES_SUCCESS',
+    GET_CLOUD_STORAGE_FAILED = 'GET_CLOUD_STORAGES_FAILED',
+    GET_CLOUD_STORAGE_STATUS = 'GET_CLOUD_STORAGE_STATUS',
+    GET_CLOUD_STORAGE_STATUS_SUCCESS = 'GET_CLOUD_STORAGE_STATUS_SUCCESS',
+    GET_CLOUD_STORAGE_STATUS_FAILED = 'GET_CLOUD_STORAGE_STATUS_FAILED',
+    GET_CLOUD_STORAGE_PREVIEW_FAILED = 'GET_CLOUD_STORAGE_PREVIEW_FAILED',
+    CREATE_CLOUD_STORAGE = 'CREATE_CLOUD_STORAGE',
+    CREATE_CLOUD_STORAGE_SUCCESS = 'CREATE_CLOUD_STORAGE_SUCCESS',
+    CREATE_CLOUD_STORAGE_FAILED = 'CREATE_CLOUD_STORAGE_FAILED',
+    DELETE_CLOUD_STORAGE = 'DELETE_CLOUD_STORAGE',
+    DELETE_CLOUD_STORAGE_SUCCESS = 'DELETE_CLOUD_STORAGE_SUCCESS',
+    DELETE_CLOUD_STORAGE_FAILED = 'DELETE_CLOUD_STORAGE_FAILED',
+    UPDATE_CLOUD_STORAGE = 'UPDATE_CLOUD_STORAGE',
+    UPDATE_CLOUD_STORAGE_SUCCESS = 'UPDATE_CLOUD_STORAGE_SUCCESS',
+    UPDATE_CLOUD_STORAGE_FAILED = 'UPDATE_CLOUD_STORAGE_FAILED',
+    LOAD_CLOUD_STORAGE_CONTENT = 'LOAD_CLOUD_STORAGE_CONTENT',
+    LOAD_CLOUD_STORAGE_CONTENT_FAILED = 'LOAD_CLOUD_STORAGE_CONTENT_FAILED',
+    LOAD_CLOUD_STORAGE_CONTENT_SUCCESS = 'LOAD_CLOUD_STORAGE_CONTENT_SUCCESS',
+}
+
+const cloudStoragesActions = {
+    updateCloudStoragesGettingQuery: (query: Partial<CloudStoragesQuery>) =>
+        createAction(CloudStorageActionTypes.UPDATE_CLOUD_STORAGES_GETTING_QUERY, { query }),
+    getCloudStorages: () => createAction(CloudStorageActionTypes.GET_CLOUD_STORAGES),
+    getCloudStoragesSuccess: (array: any[], previews: string[], count: number, query: Partial<CloudStoragesQuery>) =>
+        createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_SUCCESS, {
+            array,
+            previews,
+            count,
+            query,
+        }),
+    getCloudStoragesFailed: (error: any, query: Partial<CloudStoragesQuery>) =>
+        createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_FAILED, { error, query }),
+    deleteCloudStorage: (cloudStorageID: number) =>
+        createAction(CloudStorageActionTypes.DELETE_CLOUD_STORAGE, { cloudStorageID }),
+    deleteCloudStorageSuccess: (cloudStorageID: number) =>
+        createAction(CloudStorageActionTypes.DELETE_CLOUD_STORAGE_SUCCESS, { cloudStorageID }),
+    deleteCloudStorageFailed: (error: any, cloudStorageID: number) =>
+        createAction(CloudStorageActionTypes.DELETE_CLOUD_STORAGE_FAILED, { error, cloudStorageID }),
+    createCloudStorage: () => createAction(CloudStorageActionTypes.CREATE_CLOUD_STORAGE),
+    createCloudStorageSuccess: (cloudStorageID: number) =>
+        createAction(CloudStorageActionTypes.CREATE_CLOUD_STORAGE_SUCCESS, { cloudStorageID }),
+    createCloudStorageFailed: (error: any) =>
+        createAction(CloudStorageActionTypes.CREATE_CLOUD_STORAGE_FAILED, { error }),
+    updateCloudStorage: () => createAction(CloudStorageActionTypes.UPDATE_CLOUD_STORAGE, {}),
+    updateCloudStorageSuccess: (cloudStorage: CloudStorage) =>
+        createAction(CloudStorageActionTypes.UPDATE_CLOUD_STORAGE_SUCCESS, { cloudStorage }),
+    updateCloudStorageFailed: (cloudStorage: CloudStorage, error: any) =>
+        createAction(CloudStorageActionTypes.UPDATE_CLOUD_STORAGE_FAILED, { cloudStorage, error }),
+    loadCloudStorageContent: () => createAction(CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT),
+    loadCloudStorageContentSuccess: (cloudStorageID: number, content: any) =>
+        createAction(CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT_SUCCESS, { cloudStorageID, content }),
+    loadCloudStorageContentFailed: (cloudStorageID: number, error: any) =>
+        createAction(CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT_FAILED, { cloudStorageID, error }),
+    getCloudStorageStatus: () => createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS),
+    getCloudStorageStatusSuccess: (cloudStorageID: number, status: string) =>
+        createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS_SUCCESS, { cloudStorageID, status }),
+    getCloudStorageStatusFailed: (cloudStorageID: number, error: any) =>
+        createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS_FAILED, { cloudStorageID, error }),
+    getCloudStoragePreiewFailed: (cloudStorageID: number, error: any) =>
+        createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_PREVIEW_FAILED, { cloudStorageID, error }),
+};
+
+export type CloudStorageActions = ActionUnion<typeof cloudStoragesActions>;
+
+export function getCloudStoragesAsync(query: Partial<CloudStoragesQuery>): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(cloudStoragesActions.getCloudStorages());
+        dispatch(cloudStoragesActions.updateCloudStoragesGettingQuery(query));
+
+        const filteredQuery = { ...query };
+        for (const key in filteredQuery) {
+            if (filteredQuery[key] === null) {
+                delete filteredQuery[key];
+            }
+        }
+
+        let result = null;
+        try {
+            result = await cvat.cloudStorages.get(filteredQuery);
+        } catch (error) {
+            dispatch(cloudStoragesActions.getCloudStoragesFailed(error, query));
+            return;
+        }
+
+        const array = Array.from(result);
+        const promises = array.map((cloudStorage: CloudStorage): string =>
+            (cloudStorage as any).getPreview().catch((error: any) => {
+                dispatch(cloudStoragesActions.getCloudStoragePreiewFailed(cloudStorage.id, error));
+                return '';
+            }));
+
+        dispatch(cloudStoragesActions.getCloudStoragesSuccess(array, await Promise.all(promises), result.count, query));
+    };
+}
+
+export function deleteCloudStorageAsync(cloudStorageInstance: any): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            dispatch(cloudStoragesActions.deleteCloudStorage(cloudStorageInstance.id));
+            await cloudStorageInstance.delete();
+        } catch (error) {
+            dispatch(cloudStoragesActions.deleteCloudStorageFailed(error, cloudStorageInstance.id));
+            return;
+        }
+
+        dispatch(cloudStoragesActions.deleteCloudStorageSuccess(cloudStorageInstance.id));
+    };
+}
+
+export function createCloudStorageAsync(data: any): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        const cloudStorageInstance = new cvat.classes.CloudStorage(data);
+
+        dispatch(cloudStoragesActions.createCloudStorage());
+        try {
+            const savedCloudStorage = await cloudStorageInstance.save();
+            dispatch(cloudStoragesActions.createCloudStorageSuccess(savedCloudStorage.id));
+        } catch (error) {
+            dispatch(cloudStoragesActions.createCloudStorageFailed(error));
+        }
+    };
+}
+
+export function updateCloudStorageAsync(data: any): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        const cloudStorageInstance = new cvat.classes.CloudStorage(data);
+
+        dispatch(cloudStoragesActions.updateCloudStorage());
+        try {
+            const savedCloudStorage = await cloudStorageInstance.save();
+            dispatch(cloudStoragesActions.updateCloudStorageSuccess(savedCloudStorage));
+        } catch (error) {
+            dispatch(cloudStoragesActions.updateCloudStorageFailed(data, error));
+        }
+    };
+}
+
+export function loadCloudStorageContentAsync(cloudStorage: CloudStorage): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(cloudStoragesActions.loadCloudStorageContent());
+        try {
+            const result = await cloudStorage.getContent();
+            dispatch(cloudStoragesActions.loadCloudStorageContentSuccess(cloudStorage.id, result));
+        } catch (error) {
+            dispatch(cloudStoragesActions.loadCloudStorageContentFailed(cloudStorage.id, error));
+        }
+    };
+}
+
+export function getCloudStorageStatusAsync(cloudStorage: CloudStorage): ThunkAction {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        dispatch(cloudStoragesActions.getCloudStorageStatus());
+        try {
+            const result = await cloudStorage.getStatus();
+            dispatch(cloudStoragesActions.getCloudStorageStatusSuccess(cloudStorage.id, result));
+        } catch (error) {
+            dispatch(cloudStoragesActions.getCloudStorageStatusFailed(cloudStorage.id, error));
+        }
+    };
+}

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

@@ -386,10 +386,13 @@ export function createTaskAsync(data: any): ThunkAction<Promise<void>, {}, {}, A
         if (data.subset) {
             description.subset = data.subset;
         }
+        if (data.cloudStorageId) {
+            description.cloud_storage_id = data.cloudStorageId;
+        }
 
         const taskInstance = new cvat.classes.Task(description);
         taskInstance.clientFiles = data.files.local;
-        taskInstance.serverFiles = data.files.share;
+        taskInstance.serverFiles = data.files.share.concat(data.files.cloudStorage);
         taskInstance.remoteFiles = data.files.remote;
 
         if (data.advanced.repository) {

cvat-ui/src/base.scss

@@ -24,6 +24,8 @@ $border-color-3: #242424;
 $border-color-hover: #40a9ff;
 $background-color-1: white;
 $background-color-2: #f1f1f1;
+$notification-background-color-1: #d9ecff;
+$notification-border-color-1: #1890ff;
 $transparent-color: rgba(0, 0, 0, 0);
 $player-slider-color: #979797;
 $player-buttons-color: #242424;

cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx

@@ -0,0 +1,145 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router';
+import { CloudSyncOutlined, MoreOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import Card from 'antd/lib/card';
+import Meta from 'antd/lib/card/Meta';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import Text from 'antd/lib/typography/Text';
+import Button from 'antd/lib/button';
+import Dropdown from 'antd/lib/dropdown';
+import Menu from 'antd/lib/menu';
+import Modal from 'antd/lib/modal';
+import moment from 'moment';
+
+import { CloudStorage, CombinedState } from 'reducers/interfaces';
+import { deleteCloudStorageAsync } from 'actions/cloud-storage-actions';
+import CVATTooltip from 'components/common/cvat-tooltip';
+import Status from './cloud-storage-status';
+
+interface Props {
+    cloudStorageInstance: CloudStorage;
+}
+
+export default function CloudStorageItemComponent(props: Props): JSX.Element {
+    const history = useHistory();
+    const dispatch = useDispatch();
+
+    // cloudStorageInstance: {storage, preview}
+    const { cloudStorageInstance } = props;
+    const {
+        id,
+        displayName,
+        providerType,
+        owner,
+        createdDate,
+        updatedDate,
+        description,
+    } = cloudStorageInstance.storage;
+    const { preview } = cloudStorageInstance;
+    const deletes = useSelector((state: CombinedState) => state.cloudStorages.activities.deletes);
+    const deleted = cloudStorageInstance.storage.id in deletes ? deletes[cloudStorageInstance.storage.id] : false;
+
+    const style: React.CSSProperties = {};
+
+    if (deleted) {
+        style.pointerEvents = 'none';
+        style.opacity = 0.5;
+    }
+
+    const onUpdate = useCallback(() => {
+        history.push(`/cloudstorages/update/${id}`);
+    }, []);
+
+    const onDelete = useCallback(() => {
+        Modal.confirm({
+            title: 'Please, confirm your action',
+            content: `You are going to remove the cloudstorage "${displayName}". Continue?`,
+            className: 'cvat-delete-cloud-storage-modal',
+            onOk: () => {
+                dispatch(deleteCloudStorageAsync(cloudStorageInstance.storage));
+            },
+            okButtonProps: {
+                type: 'primary',
+                danger: true,
+            },
+            okText: 'Delete',
+        });
+    }, [cloudStorageInstance]);
+
+    return (
+        <Card
+            cover={(
+                <>
+                    {preview ? (
+                        <img
+                            className='cvat-cloud-storage-item-preview'
+                            src={preview}
+                            alt='Preview image'
+                            aria-hidden
+                        />
+                    ) : (
+                        <div className='cvat-cloud-storage-item-empty-preview' aria-hidden>
+                            <CloudSyncOutlined />
+                        </div>
+                    )}
+                    {description ? (
+                        <CVATTooltip overlay={description}>
+                            <QuestionCircleOutlined className='cvat-cloud-storage-description-icon' />
+                        </CVATTooltip>
+                    ) : null}
+                </>
+            )}
+            size='small'
+            style={style}
+            className='cvat-cloud-storage-item'
+        >
+            <Meta
+                title={(
+                    <Paragraph>
+                        <Text strong>{`#${id}: `}</Text>
+                        <Text>{displayName}</Text>
+                    </Paragraph>
+                )}
+                description={(
+                    <>
+                        <Paragraph>
+                            <Text type='secondary'>Provider: </Text>
+                            <Text>{providerType}</Text>
+                        </Paragraph>
+                        <Paragraph>
+                            <Text type='secondary'>Created </Text>
+                            {owner ? <Text type='secondary'>{`by ${owner.username}`}</Text> : null}
+                            <Text type='secondary'> on </Text>
+                            <Text type='secondary'>{moment(createdDate).format('MMMM Do YYYY')}</Text>
+                        </Paragraph>
+                        <Paragraph>
+                            <Text type='secondary'>Last updated </Text>
+                            <Text type='secondary'>{moment(updatedDate).fromNow()}</Text>
+                        </Paragraph>
+                        <Status cloudStorage={cloudStorageInstance.storage} />
+                        <Dropdown
+                            overlay={(
+                                <Menu className='cvat-project-actions-menu'>
+                                    <Menu.Item onClick={onUpdate}>Update</Menu.Item>
+                                    <Menu.Item onClick={onDelete}>Delete</Menu.Item>
+                                </Menu>
+                            )}
+                        >
+                            <Button
+                                className='cvat-cloud-storage-item-menu-button'
+                                type='link'
+                                size='large'
+                                icon={<MoreOutlined />}
+                            />
+                        </Dropdown>
+                    </>
+                )}
+            />
+        </Card>
+    );
+}