Maria Khrustaleva
4 years ago
committed by
GitHub
parent
6df808dfce
commit
9a53879a8d
@ -0,0 +1,194 @@
|
||||
// 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[],
|
||||
statuses: string[],
|
||||
count: number,
|
||||
query: Partial<CloudStoragesQuery>,
|
||||
) =>
|
||||
createAction(CloudStorageActionTypes.GET_CLOUD_STORAGE_SUCCESS, {
|
||||
array,
|
||||
previews,
|
||||
statuses,
|
||||
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 '';
|
||||
}));
|
||||
|
||||
const statusPromises = array.map((cloudStorage: CloudStorage): string =>
|
||||
(cloudStorage as any).getStatus().catch((error: any) => {
|
||||
dispatch(cloudStoragesActions.getCloudStorageStatusFailed(cloudStorage.id, error));
|
||||
return '';
|
||||
}));
|
||||
|
||||
dispatch(cloudStoragesActions.getCloudStoragesSuccess(
|
||||
array,
|
||||
await Promise.all(promises),
|
||||
await Promise.all(statusPromises),
|
||||
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));
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
@ -0,0 +1,21 @@
|
||||
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M1.289 2.771L0 3.30333V12.6463L1.289 13.1755L1.29675 13.1678V2.77833L1.289 2.771Z" fill="#8C3123"/>
|
||||
<path d="M8.18756 11.8195L1.28906 13.1755V2.771L8.18756 4.0975V11.8195Z" fill="#E05243"/>
|
||||
<path d="M5.07349 9.69626L7.99961 10.0039L8.01798 9.96888L8.03442 6.00655L7.99961 5.97559L5.07349 6.27876V9.69626Z" fill="#8C3123"/>
|
||||
<path d="M7.99976 11.8347L14.7104 13.1784L14.721 13.1645L14.7208 2.78029L14.7102 2.771L7.99976 4.11273V11.8347Z" fill="#8C3123"/>
|
||||
<path d="M10.9267 9.69626L7.99976 10.0039V5.97559L10.9267 6.27876V9.69626Z" fill="#E05243"/>
|
||||
<path d="M10.9265 4.62622L7.99961 5.06674L5.07349 4.62622L7.99592 3.99365L10.9265 4.62622Z" fill="#5E1F18"/>
|
||||
<path d="M10.9265 11.3448L7.99961 10.9014L5.07349 11.3448L7.99605 12.0185L10.9265 11.3448Z" fill="#F2B0A9"/>
|
||||
<path d="M5.07349 4.62612L7.99961 4.02813L8.0233 4.02209V0.0161548L7.99961 0L5.07349 1.20841V4.62612Z" fill="#8C3123"/>
|
||||
<path d="M10.9267 4.62612L7.99976 4.02813V0L10.9267 1.20841V4.62612Z" fill="#E05243"/>
|
||||
<path d="M7.99968 15.9704L5.07324 14.7624V11.3447L7.99968 11.9425L8.04274 11.9829L8.03106 15.9006L7.99968 15.9704Z" fill="#8C3123"/>
|
||||
<path d="M7.99976 15.9704L10.9264 14.7624V11.3447L7.99976 11.9425V15.9704Z" fill="#E05243"/>
|
||||
<path d="M14.7104 2.771L16 3.30333V12.6463L14.7104 13.1784V2.771Z" fill="#E05243"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="1em" height="1em" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.98 25.9939C18.55 25.2679 21.498 24.6669 21.532 24.6589L21.594 24.6439L18.224 20.0289C16.37 17.4909 14.854 15.4039 14.854 15.3919C14.854 15.3799 18.334 4.3359 18.354 4.2969C18.361 4.2839 20.729 8.9909 24.095 15.7079L29.869 27.2289L29.913 27.3169H8.49097L14.98 25.9939Z" fill="#0089D6"/>
|
||||
<path d="M2.125 24.586C2.125 24.58 3.713 21.406 5.654 17.533L9.183 10.492L13.3 6.52002C15.562 4.33502 17.419 2.54402 17.426 2.54102C17.4112 2.60727 17.3891 2.67167 17.36 2.73302L12.89 13.759L8.5 24.589H5.311C4.24902 24.5999 3.18696 24.5989 2.125 24.586V24.586Z" fill="#0089D6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 683 B |
@ -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, status}
|
||||
const { cloudStorageInstance } = props;
|
||||
const {
|
||||
id,
|
||||
displayName,
|
||||
providerType,
|
||||
owner,
|
||||
createdDate,
|
||||
updatedDate,
|
||||
description,
|
||||
} = cloudStorageInstance.storage;
|
||||
const { preview, status } = 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.storage.id]);
|
||||
|
||||
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 status={status} />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import Paragraph from 'antd/lib/typography/Paragraph';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { StorageStatuses } from '../../utils/enums';
|
||||
|
||||
interface Props {
|
||||
status: string;
|
||||
}
|
||||
|
||||
export default function Status(props: Props): JSX.Element {
|
||||
const { status } = props;
|
||||
// TODO: make dynamic loading of statuses separately in the future
|
||||
|
||||
return (
|
||||
<Paragraph>
|
||||
<Text type='secondary'>Status: </Text>
|
||||
{status ? (
|
||||
<Text type={status === StorageStatuses.AVAILABLE ? 'success' : 'danger'}>{status}</Text>
|
||||
) : (
|
||||
<Text type='warning'>Loading ...</Text>
|
||||
)}
|
||||
</Paragraph>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import Pagination from 'antd/lib/pagination';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
|
||||
import { CloudStorage } from 'reducers/interfaces';
|
||||
import CloudStorageItemComponent from './cloud-storage-item';
|
||||
|
||||
interface Props {
|
||||
storages: CloudStorage[];
|
||||
previews: string[];
|
||||
statuses: string[];
|
||||
totalCount: number;
|
||||
page: number;
|
||||
onChangePage(page: number): void;
|
||||
}
|
||||
|
||||
export default function StoragesList(props: Props): JSX.Element {
|
||||
const {
|
||||
storages, previews, statuses, totalCount, page, onChangePage,
|
||||
} = props;
|
||||
|
||||
const groupedStorages = storages.reduce(
|
||||
(acc: CloudStorage[][], storage: CloudStorage, index: number): CloudStorage[][] => {
|
||||
if (index && index % 4) {
|
||||
acc[acc.length - 1].push({
|
||||
storage,
|
||||
preview: previews[index],
|
||||
status: statuses[index],
|
||||
});
|
||||
} else {
|
||||
acc.push([{
|
||||
storage,
|
||||
preview: previews[index],
|
||||
status: statuses[index],
|
||||
}]);
|
||||
}
|
||||
|
||||
return acc;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row justify='center' align='middle'>
|
||||
<Col span={24} className='cvat-cloud-storages-list'>
|
||||
{groupedStorages.map(
|
||||
(instances: CloudStorage[]): JSX.Element => (
|
||||
<Row key={instances[0].storage.id} gutter={[8, 8]}>
|
||||
{instances.map((instance: CloudStorage) => (
|
||||
<Col span={6} key={instance.storage.id}>
|
||||
<CloudStorageItemComponent cloudStorageInstance={instance} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
),
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row justify='center' align='middle'>
|
||||
<Col>
|
||||
<Pagination
|
||||
className='cvat-cloud-storages-pagination'
|
||||
onChange={onChangePage}
|
||||
showSizeChanger={false}
|
||||
total={totalCount}
|
||||
pageSize={12}
|
||||
current={page}
|
||||
showQuickJumper
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,111 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useHistory } from 'react-router';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Spin from 'antd/lib/spin';
|
||||
|
||||
import { CloudStorage, CloudStoragesQuery, CombinedState } from 'reducers/interfaces';
|
||||
import { getCloudStoragesAsync } from 'actions/cloud-storage-actions';
|
||||
import CloudStoragesListComponent from './cloud-storages-list';
|
||||
import EmptyCloudStorageListComponent from './empty-cloud-storages-list';
|
||||
import TopBarComponent from './top-bar';
|
||||
|
||||
export default function StoragesPageComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
const { search } = history.location;
|
||||
const totalCount = useSelector((state: CombinedState) => state.cloudStorages.count);
|
||||
const isFetching = useSelector((state: CombinedState) => state.cloudStorages.fetching);
|
||||
const current = useSelector((state: CombinedState) => state.cloudStorages.current)
|
||||
.map((cloudStrage: CloudStorage) => cloudStrage.instance);
|
||||
const previews = useSelector((state: CombinedState) => state.cloudStorages.current)
|
||||
.map((cloudStrage: CloudStorage) => cloudStrage.preview as string);
|
||||
const statuses = useSelector((state: CombinedState) => state.cloudStorages.current)
|
||||
.map((cloudStrage: CloudStorage) => cloudStrage.status as string);
|
||||
const query = useSelector((state: CombinedState) => state.cloudStorages.gettingQuery);
|
||||
const onSearch = useCallback(
|
||||
(_query: CloudStoragesQuery) => {
|
||||
if (!isFetching) dispatch(getCloudStoragesAsync(_query));
|
||||
},
|
||||
[isFetching],
|
||||
);
|
||||
|
||||
const onChangePage = useCallback(
|
||||
(page: number) => {
|
||||
if (!isFetching && page !== query.page) dispatch(getCloudStoragesAsync({ ...query, page }));
|
||||
},
|
||||
[query],
|
||||
);
|
||||
|
||||
const dimensions = {
|
||||
md: 22,
|
||||
lg: 18,
|
||||
xl: 16,
|
||||
xxl: 16,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const searchParams = new URLSearchParams();
|
||||
for (const [key, value] of Object.entries(query)) {
|
||||
if (value !== null && typeof value !== 'undefined') {
|
||||
searchParams.append(key, value.toString());
|
||||
}
|
||||
}
|
||||
|
||||
history.push({
|
||||
pathname: '/cloudstorages',
|
||||
search: `?${searchParams.toString()}`,
|
||||
});
|
||||
}, [query]);
|
||||
|
||||
useEffect(() => {
|
||||
const searchParams = { ...query };
|
||||
for (const [key, value] of new URLSearchParams(search)) {
|
||||
if (key in searchParams) {
|
||||
searchParams[key] = ['page', 'id'].includes(key) ? +value : value;
|
||||
}
|
||||
}
|
||||
onSearch(searchParams);
|
||||
}, []);
|
||||
|
||||
const searchWasUsed = Object.entries(query).some(([key, value]) => {
|
||||
if (key === 'page') {
|
||||
return value && Number.isInteger(value) && value > 1;
|
||||
}
|
||||
|
||||
return !!value;
|
||||
});
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<Row className='cvat-cloud-storages-page' justify='center' align='middle'>
|
||||
<Spin size='large' />
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row className='cvat-cloud-storages-page' justify='center' align='top'>
|
||||
<Col {...dimensions}>
|
||||
<TopBarComponent query={query} onSearch={onSearch} />
|
||||
{current.length ? (
|
||||
<CloudStoragesListComponent
|
||||
totalCount={totalCount}
|
||||
page={query.page}
|
||||
storages={current}
|
||||
previews={previews}
|
||||
statuses={statuses}
|
||||
onChangePage={onChangePage}
|
||||
/>
|
||||
) : (
|
||||
<EmptyCloudStorageListComponent notFound={searchWasUsed} />
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import Empty from 'antd/lib/empty';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { CloudTwoTone } from '@ant-design/icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface Props {
|
||||
notFound: boolean;
|
||||
}
|
||||
|
||||
export default function EmptyStoragesListComponent(props: Props): JSX.Element {
|
||||
const { notFound } = props;
|
||||
|
||||
const description = notFound ? (
|
||||
<Row justify='center' align='middle'>
|
||||
<Col>
|
||||
<Text strong>No results matched your search found...</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
) : (
|
||||
<>
|
||||
<Row justify='center' align='middle'>
|
||||
<Col>
|
||||
<Text strong>No cloud storages attached yet ...</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row justify='center' align='middle'>
|
||||
<Col>
|
||||
<Text type='secondary'>To get started with your cloud storage</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row justify='center' align='middle'>
|
||||
<Col>
|
||||
<Link to='/cloudstorages/create'>attach a new one</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='cvat-empty-cloud-storages-list'>
|
||||
<Empty description={description} image={<CloudTwoTone className='cvat-empty-cloud-storages-list-icon' />} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-cloud-storages-page {
|
||||
padding: $grid-unit-size * 2;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.ant-spin {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-empty-cloud-storages-list-icon {
|
||||
font-size: $grid-unit-size * 14;
|
||||
}
|
||||
|
||||
.cvat-cloud-storages-pagination {
|
||||
margin-top: $grid-unit-size * 2;
|
||||
}
|
||||
|
||||
.cvat-cloud-storages-list-top-bar {
|
||||
> div:first-child {
|
||||
.cvat-title {
|
||||
margin-right: $grid-unit-size;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-cloud-storages-list,
|
||||
.cvat-empty-cloud-storages-list {
|
||||
margin-top: $grid-unit-size * 2;
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-item {
|
||||
div.ant-typography {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-item-empty-preview {
|
||||
font-size: $grid-unit-size * 15;
|
||||
text-align: center;
|
||||
height: $grid-unit-size * 24;
|
||||
}
|
||||
|
||||
img {
|
||||
height: $grid-unit-size * 24;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-item-menu-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-description-icon {
|
||||
position: absolute;
|
||||
top: $grid-unit-size;
|
||||
width: auto;
|
||||
right: $grid-unit-size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Button from 'antd/lib/button';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import SearchField from 'components/search-field/search-field';
|
||||
import { CloudStoragesQuery } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
onSearch(query: CloudStoragesQuery): void;
|
||||
query: CloudStoragesQuery;
|
||||
}
|
||||
|
||||
export default function StoragesTopBar(props: Props): JSX.Element {
|
||||
const { onSearch, query } = props;
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<Row justify='space-between' align='middle' className='cvat-cloud-storages-list-top-bar'>
|
||||
<Col md={11} lg={9} xl={9} xxl={9}>
|
||||
<Text className='cvat-title'>Cloud Storages</Text>
|
||||
<SearchField instance='cloudstorage' onSearch={onSearch} query={query} />
|
||||
</Col>
|
||||
<Col md={{ span: 11 }} lg={{ span: 9 }} xl={{ span: 9 }} xxl={{ span: 9 }}>
|
||||
<Button
|
||||
size='large'
|
||||
className='cvat-attach-cloud-storage-button'
|
||||
type='primary'
|
||||
onClick={(): void => history.push('/cloudstorages/create')}
|
||||
icon={<PlusOutlined />}
|
||||
>
|
||||
Attach a new storage
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,515 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, {
|
||||
useState, useEffect, useRef,
|
||||
} from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useHistory } from 'react-router';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Button from 'antd/lib/button';
|
||||
import Form from 'antd/lib/form';
|
||||
import Select from 'antd/lib/select';
|
||||
import Input from 'antd/lib/input';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
import notification from 'antd/lib/notification';
|
||||
|
||||
import { CombinedState, CloudStorage } from 'reducers/interfaces';
|
||||
import { createCloudStorageAsync, updateCloudStorageAsync } from 'actions/cloud-storage-actions';
|
||||
import { ProviderType, CredentialsType } from 'utils/enums';
|
||||
import { AzureProvider, S3Provider } from '../../icons';
|
||||
import S3Region from './s3-region';
|
||||
import ManifestsManager from './manifests-manager';
|
||||
|
||||
export interface Props {
|
||||
cloudStorage?: CloudStorage;
|
||||
}
|
||||
|
||||
type CredentialsFormNames = 'key' | 'secret_key' | 'account_name' | 'session_token';
|
||||
type CredentialsCamelCaseNames = 'key' | 'secretKey' | 'accountName' | 'sessionToken';
|
||||
|
||||
interface CloudStorageForm {
|
||||
credentials_type: CredentialsType;
|
||||
display_name: string;
|
||||
provider_type: ProviderType;
|
||||
resource: string;
|
||||
account_name?: string;
|
||||
session_token?: string;
|
||||
key?: string;
|
||||
secret_key?: string;
|
||||
SAS_token?: string;
|
||||
description?: string;
|
||||
region?: string;
|
||||
manifests: string[];
|
||||
}
|
||||
|
||||
export default function CreateCloudStorageForm(props: Props): JSX.Element {
|
||||
const { cloudStorage } = props;
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
const [form] = Form.useForm();
|
||||
const shouldShowCreationNotification = useRef(false);
|
||||
const shouldShowUpdationNotification = useRef(false);
|
||||
const [providerType, setProviderType] = useState<ProviderType | null>(null);
|
||||
const [credentialsType, setCredentialsType] = useState<CredentialsType | null>(null);
|
||||
const [selectedRegion, setSelectedRegion] = useState<string | undefined>(undefined);
|
||||
const newCloudStorageId = useSelector((state: CombinedState) => state.cloudStorages.activities.creates.id);
|
||||
const attaching = useSelector((state: CombinedState) => state.cloudStorages.activities.creates.attaching);
|
||||
const updating = useSelector((state: CombinedState) => state.cloudStorages.activities.updates.updating);
|
||||
const updatedCloudStorageId = useSelector(
|
||||
(state: CombinedState) => state.cloudStorages.activities.updates.cloudStorageID,
|
||||
);
|
||||
const loading = cloudStorage ? updating : attaching;
|
||||
const fakeCredentialsData = {
|
||||
accountName: 'X'.repeat(24),
|
||||
sessionToken: 'X'.repeat(300),
|
||||
key: 'X'.repeat(20),
|
||||
secretKey: 'X'.repeat(40),
|
||||
};
|
||||
|
||||
const [keyVisibility, setKeyVisibility] = useState(false);
|
||||
const [secretKeyVisibility, setSecretKeyVisibility] = useState(false);
|
||||
const [sessionTokenVisibility, setSessionTokenVisibility] = useState(false);
|
||||
const [accountNameVisibility, setAccountNameVisibility] = useState(false);
|
||||
|
||||
const [manifestNames, setManifestNames] = useState<string[]>([]);
|
||||
|
||||
function initializeFields(): void {
|
||||
setManifestNames(cloudStorage.manifests);
|
||||
const fieldsValue: CloudStorageForm = {
|
||||
credentials_type: cloudStorage.credentialsType,
|
||||
display_name: cloudStorage.displayName,
|
||||
description: cloudStorage.description,
|
||||
provider_type: cloudStorage.providerType,
|
||||
resource: cloudStorage.resourceName,
|
||||
manifests: manifestNames,
|
||||
};
|
||||
|
||||
setProviderType(cloudStorage.providerType);
|
||||
setCredentialsType(cloudStorage.credentialsType);
|
||||
|
||||
if (cloudStorage.credentialsType === CredentialsType.ACCOUNT_NAME_TOKEN_PAIR) {
|
||||
fieldsValue.account_name = fakeCredentialsData.accountName;
|
||||
fieldsValue.SAS_token = fakeCredentialsData.sessionToken;
|
||||
} else if (cloudStorage.credentialsType === CredentialsType.KEY_SECRET_KEY_PAIR) {
|
||||
fieldsValue.key = fakeCredentialsData.key;
|
||||
fieldsValue.secret_key = fakeCredentialsData.secretKey;
|
||||
}
|
||||
|
||||
if (cloudStorage.providerType === ProviderType.AWS_S3_BUCKET && cloudStorage.specificAttributes) {
|
||||
const region = new URLSearchParams(cloudStorage.specificAttributes).get('region');
|
||||
if (region) {
|
||||
setSelectedRegion(region);
|
||||
}
|
||||
}
|
||||
|
||||
form.setFieldsValue(fieldsValue);
|
||||
}
|
||||
|
||||
function onReset(): void {
|
||||
if (cloudStorage) {
|
||||
initializeFields();
|
||||
} else {
|
||||
setManifestNames([]);
|
||||
setSelectedRegion(undefined);
|
||||
form.resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
const onCancel = (): void => {
|
||||
if (history.length) {
|
||||
history.goBack();
|
||||
} else {
|
||||
history.push('/cloudstorages');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onReset();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
Number.isInteger(newCloudStorageId) &&
|
||||
shouldShowCreationNotification &&
|
||||
shouldShowCreationNotification.current
|
||||
) {
|
||||
// Clear form
|
||||
onReset();
|
||||
|
||||
notification.info({
|
||||
message: 'The cloud storage has been attached',
|
||||
className: 'cvat-notification-create-cloud-storage-success',
|
||||
});
|
||||
}
|
||||
if (shouldShowCreationNotification !== undefined) {
|
||||
shouldShowCreationNotification.current = true;
|
||||
}
|
||||
}, [newCloudStorageId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (updatedCloudStorageId && shouldShowUpdationNotification && shouldShowUpdationNotification.current) {
|
||||
notification.info({
|
||||
message: 'The cloud storage has been updated',
|
||||
className: 'cvat-notification-update-cloud-storage-success',
|
||||
});
|
||||
}
|
||||
if (shouldShowUpdationNotification !== undefined) {
|
||||
shouldShowUpdationNotification.current = true;
|
||||
}
|
||||
}, [updatedCloudStorageId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cloudStorage && cloudStorage.credentialsType !== CredentialsType.ANONYMOUS_ACCESS) {
|
||||
notification.info({
|
||||
message: `For security reasons, your credentials are hidden and represented by fake values
|
||||
that will not be taken into account when updating the cloud storage.
|
||||
If you want to replace the original credentials, simply enter new ones.`,
|
||||
className: 'cvat-notification-update-info-cloud-storage',
|
||||
duration: 15,
|
||||
});
|
||||
}
|
||||
}, [cloudStorage]);
|
||||
|
||||
const onSubmit = async (): Promise<void> => {
|
||||
let cloudStorageData: Record<string, any> = {};
|
||||
const formValues = await form.validateFields();
|
||||
cloudStorageData = { ...formValues };
|
||||
if (formValues.region !== undefined) {
|
||||
delete cloudStorageData.region;
|
||||
cloudStorageData.specific_attributes = `region=${selectedRegion}`;
|
||||
}
|
||||
|
||||
if (cloudStorageData.credentials_type === CredentialsType.ACCOUNT_NAME_TOKEN_PAIR) {
|
||||
delete cloudStorageData.SAS_token;
|
||||
cloudStorageData.session_token = formValues.SAS_token;
|
||||
}
|
||||
|
||||
if (cloudStorageData.manifests && cloudStorageData.manifests.length) {
|
||||
delete cloudStorageData.manifests;
|
||||
cloudStorageData.manifests = form
|
||||
.getFieldValue('manifests')
|
||||
.map((manifest: any): string => manifest.name);
|
||||
}
|
||||
|
||||
if (cloudStorage) {
|
||||
cloudStorageData.id = cloudStorage.id;
|
||||
if (cloudStorageData.account_name === fakeCredentialsData.accountName) {
|
||||
delete cloudStorageData.account_name;
|
||||
}
|
||||
if (cloudStorageData.key === fakeCredentialsData.key) {
|
||||
delete cloudStorageData.key;
|
||||
}
|
||||
if (cloudStorageData.secret_key === fakeCredentialsData.secretKey) {
|
||||
delete cloudStorageData.secret_key;
|
||||
}
|
||||
if (cloudStorageData.session_token === fakeCredentialsData.sessionToken) {
|
||||
delete cloudStorageData.session_token;
|
||||
}
|
||||
dispatch(updateCloudStorageAsync(cloudStorageData));
|
||||
} else {
|
||||
dispatch(createCloudStorageAsync(cloudStorageData));
|
||||
}
|
||||
};
|
||||
|
||||
const resetCredentialsValues = (): void => {
|
||||
form.setFieldsValue({
|
||||
key: undefined,
|
||||
secret_key: undefined,
|
||||
session_token: undefined,
|
||||
account_name: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
const onFocusCredentialsItem = (credential: CredentialsCamelCaseNames, key: CredentialsFormNames): void => {
|
||||
// reset fake credential when updating a cloud storage and cursor is in this field
|
||||
if (cloudStorage && form.getFieldValue(key) === fakeCredentialsData[credential]) {
|
||||
form.setFieldsValue({
|
||||
[key]: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onBlurCredentialsItem = (
|
||||
credential: CredentialsCamelCaseNames,
|
||||
key: CredentialsFormNames,
|
||||
setVisibility: any,
|
||||
): void => {
|
||||
// set fake credential when updating a cloud storage and cursor disappears from the field and value not changed
|
||||
if (cloudStorage && !form.getFieldValue(key)) {
|
||||
form.setFieldsValue({
|
||||
[key]: fakeCredentialsData[credential],
|
||||
});
|
||||
setVisibility(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onChangeCredentialsType = (value: CredentialsType): void => {
|
||||
setCredentialsType(value);
|
||||
resetCredentialsValues();
|
||||
};
|
||||
|
||||
const onSelectRegion = (key: string): void => {
|
||||
setSelectedRegion(key);
|
||||
};
|
||||
|
||||
const commonProps = {
|
||||
className: 'cvat-cloud-storage-form-item',
|
||||
labelCol: { span: 5 },
|
||||
wrapperCol: { offset: 1 },
|
||||
};
|
||||
|
||||
const credentialsBlok = (): JSX.Element => {
|
||||
const internalCommonProps = {
|
||||
...commonProps,
|
||||
labelCol: { span: 8, offset: 2 },
|
||||
wrapperCol: { offset: 1 },
|
||||
};
|
||||
|
||||
if (providerType === ProviderType.AWS_S3_BUCKET && credentialsType === CredentialsType.KEY_SECRET_KEY_PAIR) {
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label='ACCESS KEY ID'
|
||||
name='key'
|
||||
rules={[{ required: true, message: 'Please, specify your access_key_id' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input.Password
|
||||
maxLength={20}
|
||||
visibilityToggle={keyVisibility}
|
||||
onChange={() => setKeyVisibility(true)}
|
||||
onFocus={() => onFocusCredentialsItem('key', 'key')}
|
||||
onBlur={() => onBlurCredentialsItem('key', 'key', setKeyVisibility)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label='SECRET ACCESS KEY ID'
|
||||
name='secret_key'
|
||||
rules={[{ required: true, message: 'Please, specify your secret_access_key_id' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input.Password
|
||||
maxLength={40}
|
||||
visibilityToggle={secretKeyVisibility}
|
||||
onChange={() => setSecretKeyVisibility(true)}
|
||||
onFocus={() => onFocusCredentialsItem('secretKey', 'secret_key')}
|
||||
onBlur={() => onBlurCredentialsItem('secretKey', 'secret_key', setSecretKeyVisibility)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
providerType === ProviderType.AZURE_CONTAINER &&
|
||||
credentialsType === CredentialsType.ACCOUNT_NAME_TOKEN_PAIR
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label='Account name'
|
||||
name='account_name'
|
||||
rules={[{ required: true, message: 'Please, specify your account name' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input.Password
|
||||
minLength={3}
|
||||
maxLength={24}
|
||||
visibilityToggle={accountNameVisibility}
|
||||
onChange={() => setAccountNameVisibility(true)}
|
||||
onFocus={() => onFocusCredentialsItem('accountName', 'account_name')}
|
||||
onBlur={() =>
|
||||
onBlurCredentialsItem('accountName', 'account_name', setAccountNameVisibility)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label='SAS token'
|
||||
name='SAS_token'
|
||||
rules={[{ required: true, message: 'Please, specify your SAS token' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input.Password
|
||||
visibilityToggle={sessionTokenVisibility}
|
||||
maxLength={437}
|
||||
onChange={() => setSessionTokenVisibility(true)}
|
||||
onFocus={() => onFocusCredentialsItem('sessionToken', 'session_token')}
|
||||
onBlur={() =>
|
||||
onBlurCredentialsItem('sessionToken', 'session_token', setSessionTokenVisibility)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (providerType === ProviderType.AZURE_CONTAINER && credentialsType === CredentialsType.ANONYMOUS_ACCESS) {
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label='Account name'
|
||||
name='account_name'
|
||||
rules={[{ required: true, message: 'Please, specify your account name' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input.Password
|
||||
minLength={3}
|
||||
maxLength={24}
|
||||
visibilityToggle={accountNameVisibility}
|
||||
onChange={() => setAccountNameVisibility(true)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
const AWSS3Configuration = (): JSX.Element => {
|
||||
const internalCommonProps = {
|
||||
...commonProps,
|
||||
labelCol: { span: 6, offset: 1 },
|
||||
wrapperCol: { offset: 1 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label='Bucket name'
|
||||
name='resource'
|
||||
rules={[{ required: true, message: 'Please, specify a bucket name' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input disabled={!!cloudStorage} maxLength={63} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label='Authorization type'
|
||||
name='credentials_type'
|
||||
rules={[{ required: true, message: 'Please, specify credentials type' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Select onSelect={(value: CredentialsType) => onChangeCredentialsType(value)}>
|
||||
<Select.Option value={CredentialsType.KEY_SECRET_KEY_PAIR}>
|
||||
Key id and secret access key pair
|
||||
</Select.Option>
|
||||
<Select.Option value={CredentialsType.ANONYMOUS_ACCESS}>Anonymous access</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{credentialsBlok()}
|
||||
<S3Region
|
||||
selectedRegion={selectedRegion}
|
||||
onSelectRegion={onSelectRegion}
|
||||
internalCommonProps={internalCommonProps}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const AzureBlobStorageConfiguration = (): JSX.Element => {
|
||||
const internalCommonProps = {
|
||||
...commonProps,
|
||||
labelCol: { span: 6, offset: 1 },
|
||||
wrapperCol: { offset: 1 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
label='Container name'
|
||||
name='resource'
|
||||
rules={[{ required: true, message: 'Please, specify a container name' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Input disabled={!!cloudStorage} maxLength={63} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label='Authorization type'
|
||||
name='credentials_type'
|
||||
rules={[{ required: true, message: 'Please, specify credentials type' }]}
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Select onSelect={(value: CredentialsType) => onChangeCredentialsType(value)}>
|
||||
<Select.Option value={CredentialsType.ACCOUNT_NAME_TOKEN_PAIR}>
|
||||
Account name and SAS token
|
||||
</Select.Option>
|
||||
<Select.Option value={CredentialsType.ANONYMOUS_ACCESS}>Anonymous access</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
{credentialsBlok()}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form className='cvat-cloud-storage-form' layout='horizontal' form={form}>
|
||||
<Form.Item
|
||||
{...commonProps}
|
||||
label='Display name'
|
||||
name='display_name'
|
||||
rules={[{ required: true, message: 'Please, specify a display name' }]}
|
||||
>
|
||||
<Input maxLength={63} />
|
||||
</Form.Item>
|
||||
<Form.Item {...commonProps} label='Description' name='description'>
|
||||
<TextArea autoSize={{ minRows: 1, maxRows: 5 }} placeholder='Any useful description' />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...commonProps}
|
||||
label='Provider'
|
||||
name='provider_type'
|
||||
rules={[{ required: true, message: 'Please, specify a cloud storage provider' }]}
|
||||
>
|
||||
<Select
|
||||
disabled={!!cloudStorage}
|
||||
onSelect={(value: ProviderType) => {
|
||||
setProviderType(value);
|
||||
setCredentialsType(null);
|
||||
form.resetFields(['credentials_type']);
|
||||
}}
|
||||
>
|
||||
<Select.Option value={ProviderType.AWS_S3_BUCKET}>
|
||||
<span className='cvat-cloud-storage-select-provider'>
|
||||
<S3Provider />
|
||||
AWS S3
|
||||
</span>
|
||||
</Select.Option>
|
||||
<Select.Option value={ProviderType.AZURE_CONTAINER}>
|
||||
<span className='cvat-cloud-storage-select-provider'>
|
||||
<AzureProvider />
|
||||
Azure Blob Container
|
||||
</span>
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
{providerType === ProviderType.AWS_S3_BUCKET && AWSS3Configuration()}
|
||||
{providerType === ProviderType.AZURE_CONTAINER && AzureBlobStorageConfiguration()}
|
||||
<ManifestsManager form={form} manifestNames={manifestNames} setManifestNames={setManifestNames} />
|
||||
<Row justify='end'>
|
||||
<Col>
|
||||
<Button
|
||||
htmlType='button'
|
||||
onClick={() => onCancel()}
|
||||
className='cvat-cloud-storage-reset-button'
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Button
|
||||
type='primary'
|
||||
htmlType='submit'
|
||||
onClick={onSubmit}
|
||||
className='cvat-cloud-storage-submit-button'
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
{cloudStorage ? 'Update' : 'Submit'}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
import CreateCloudStorageForm from './cloud-storage-form';
|
||||
|
||||
export default function CreateCloudStoragePageComponent(): JSX.Element {
|
||||
return (
|
||||
<Row justify='center' align='top' className='cvat-attach-cloud-storage-form-wrapper'>
|
||||
<Col md={20} lg={16} xl={14} xxl={9}>
|
||||
<Text className='cvat-title'>Create a cloud storage</Text>
|
||||
<CreateCloudStorageForm />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import Button from 'antd/lib/button';
|
||||
import Col from 'antd/lib/col';
|
||||
import Form from 'antd/lib/form';
|
||||
import Input from 'antd/lib/input';
|
||||
import Row from 'antd/lib/row';
|
||||
import notification from 'antd/lib/notification';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
interface Props {
|
||||
form: any;
|
||||
manifestNames: string[];
|
||||
setManifestNames: (manifestNames: string[]) => void;
|
||||
}
|
||||
|
||||
export default function ManifestsManager(props: Props): JSX.Element {
|
||||
const { form, manifestNames, setManifestNames } = props;
|
||||
const maxManifestsCount = useRef(5);
|
||||
const [limitingAddingManifestNotification, setLimitingAddingManifestNotification] = useState(false);
|
||||
|
||||
const updateManifestFields = (): void => {
|
||||
const newManifestFormItems = manifestNames.map((name, idx) => ({
|
||||
id: idx,
|
||||
name,
|
||||
}));
|
||||
form.setFieldsValue({
|
||||
manifests: [...newManifestFormItems],
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
updateManifestFields();
|
||||
}, [manifestNames]);
|
||||
|
||||
useEffect(() => {
|
||||
if (limitingAddingManifestNotification) {
|
||||
notification.warning({
|
||||
message: `Unable to add manifest. The maximum number of files is ${maxManifestsCount.current}`,
|
||||
className: 'cvat-notification-limiting-adding-manifest',
|
||||
});
|
||||
}
|
||||
}, [limitingAddingManifestNotification]);
|
||||
|
||||
const onChangeManifestPath = (manifestName: string | undefined, manifestId: number): void => {
|
||||
if (manifestName !== undefined) {
|
||||
setManifestNames(manifestNames.map((name, idx) => (idx !== manifestId ? name : manifestName)));
|
||||
}
|
||||
};
|
||||
|
||||
const onDeleteManifestItem = (key: number): void => {
|
||||
if (maxManifestsCount.current === manifestNames.length && limitingAddingManifestNotification) {
|
||||
setLimitingAddingManifestNotification(false);
|
||||
}
|
||||
setManifestNames(manifestNames.filter((name, idx) => idx !== key));
|
||||
};
|
||||
|
||||
const onAddManifestItem = (): void => {
|
||||
if (maxManifestsCount.current <= manifestNames.length) {
|
||||
setLimitingAddingManifestNotification(true);
|
||||
} else {
|
||||
setManifestNames(manifestNames.concat(['']));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form.Item
|
||||
name='manifests'
|
||||
label={(
|
||||
<>
|
||||
Manifests
|
||||
<Tooltip title='More information'>
|
||||
<Button
|
||||
type='link'
|
||||
target='_blank'
|
||||
className='cvat-cloud-storage-help-button'
|
||||
href='https://openvinotoolkit.github.io/cvat/docs/manual/advanced/dataset_manifest/'
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
rules={[{ required: true, message: 'Please, specify at least one manifest file' }]}
|
||||
/>
|
||||
<Form.List name='manifests'>
|
||||
{
|
||||
(fields) => (
|
||||
<>
|
||||
{fields.map((field, idx): JSX.Element => (
|
||||
<Form.Item key={idx} shouldUpdate>
|
||||
<Row justify='space-between' align='top'>
|
||||
<Col>
|
||||
<Form.Item
|
||||
name={[idx, 'name']}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please specify a manifest name',
|
||||
},
|
||||
]}
|
||||
initialValue={field.name}
|
||||
>
|
||||
<Input
|
||||
placeholder='manifest.jsonl'
|
||||
onChange={(event) => onChangeManifestPath(event.target.value, idx)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col>
|
||||
<Form.Item>
|
||||
<Button type='link' onClick={() => onDeleteManifestItem(idx)}>
|
||||
<MinusCircleOutlined />
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form.Item>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Form.List>
|
||||
<Row justify='start'>
|
||||
<Col>
|
||||
<Button type='ghost' onClick={onAddManifestItem} className='cvat-add-manifest-button'>
|
||||
Add manifest
|
||||
<PlusCircleOutlined />
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,119 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import Divider from 'antd/lib/divider';
|
||||
import Select from 'antd/lib/select';
|
||||
import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||||
import Input from 'antd/lib/input';
|
||||
import Button from 'antd/lib/button';
|
||||
import Form from 'antd/lib/form';
|
||||
import notification from 'antd/lib/notification';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import consts from '../../consts';
|
||||
|
||||
const { Option } = Select;
|
||||
interface Props {
|
||||
selectedRegion: undefined | string;
|
||||
onSelectRegion: any;
|
||||
internalCommonProps: any;
|
||||
}
|
||||
|
||||
function prepareDefaultRegions(): Map<string, string> {
|
||||
const temp = new Map<string, string>();
|
||||
for (const [key, value] of consts.DEFAULT_AWS_S3_REGIONS) {
|
||||
temp.set(key, value);
|
||||
}
|
||||
return temp;
|
||||
}
|
||||
|
||||
export default function S3Region(props: Props): JSX.Element {
|
||||
const { selectedRegion, onSelectRegion, internalCommonProps } = props;
|
||||
const [regions, setRegions] = useState<Map<string, string>>(() => prepareDefaultRegions());
|
||||
const [newRegionKey, setNewRegionKey] = useState<string>('');
|
||||
const [newRegionName, setNewRegionName] = useState<string>('');
|
||||
|
||||
const handleAddingRegion = (): void => {
|
||||
if (!newRegionKey || !newRegionName) {
|
||||
notification.warning({
|
||||
message: 'Incorrect region',
|
||||
className: 'cvat-incorrect-add-region-notification',
|
||||
});
|
||||
} else if (regions.has(newRegionKey)) {
|
||||
notification.warning({
|
||||
message: 'This region already exists',
|
||||
className: 'cvat-incorrect-add-region-notification',
|
||||
});
|
||||
} else {
|
||||
const regionsCopy = regions;
|
||||
setRegions(regionsCopy.set(newRegionKey, newRegionName));
|
||||
setNewRegionKey('');
|
||||
setNewRegionName('');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form.Item
|
||||
label={(
|
||||
<>
|
||||
Region
|
||||
<Tooltip title='More information'>
|
||||
<Button
|
||||
className='cvat-cloud-storage-help-button'
|
||||
type='link'
|
||||
target='_blank'
|
||||
href='https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-regions-availability-zones.html#concepts-available-regions'
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
name='region'
|
||||
{...internalCommonProps}
|
||||
>
|
||||
<Select
|
||||
placeholder='Select region'
|
||||
defaultValue={selectedRegion ? regions.get(selectedRegion) : undefined}
|
||||
dropdownRender={(menu) => (
|
||||
<div>
|
||||
{menu}
|
||||
<Divider className='cvat-divider' />
|
||||
<div className='cvat-cloud-storage-region-creator'>
|
||||
<Input
|
||||
value={newRegionKey}
|
||||
onChange={(event: any) => setNewRegionKey(event.target.value)}
|
||||
maxLength={14}
|
||||
placeholder='key'
|
||||
/>
|
||||
<Input
|
||||
value={newRegionName}
|
||||
onChange={(event: any) => setNewRegionName(event.target.value)}
|
||||
placeholder='name'
|
||||
/>
|
||||
<Button
|
||||
type='link'
|
||||
onClick={handleAddingRegion}
|
||||
>
|
||||
Add region
|
||||
<PlusCircleOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
onSelect={(_, instance) => onSelectRegion(instance.key)}
|
||||
>
|
||||
{
|
||||
Array.from(regions.entries()).map(
|
||||
([key, value]): JSX.Element => (
|
||||
<Option key={key} value={value}>
|
||||
{value}
|
||||
</Option>
|
||||
),
|
||||
)
|
||||
}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-update-cloud-storage-form-wrapper,
|
||||
.cvat-attach-cloud-storage-form-wrapper {
|
||||
text-align: center;
|
||||
padding-top: $grid-unit-size * 5;
|
||||
overflow-y: auto;
|
||||
height: 90%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
> div > span {
|
||||
font-size: $grid-unit-size * 4;
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-form {
|
||||
margin-top: $grid-unit-size * 2;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid $border-color-1;
|
||||
border-radius: $grid-unit-size / 2;
|
||||
padding: $grid-unit-size * 2;
|
||||
background: $background-color-1;
|
||||
text-align: initial;
|
||||
|
||||
.cvat-cloud-storage-form-item {
|
||||
justify-content: space-between;
|
||||
|
||||
> div:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
> div:not(first-child) {
|
||||
margin-top: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-attach-cloud-storage-reset-button,
|
||||
.cvat-attach-cloud-storage-submit-button {
|
||||
width: $grid-unit-size * 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-region-creator {
|
||||
display: flex;
|
||||
padding: $grid-unit-size;
|
||||
|
||||
> * {
|
||||
margin: 0 $grid-unit-size;
|
||||
}
|
||||
|
||||
> button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-cloud-storage-help-button {
|
||||
padding-left: $grid-unit-size * 0.5;
|
||||
padding-right: 0;
|
||||
}
|
||||
@ -0,0 +1,239 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { ReactText, useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Row } from 'antd/lib/grid';
|
||||
import Tree from 'antd/lib/tree/Tree';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import Alert from 'antd/lib/alert';
|
||||
import Empty from 'antd/lib/empty';
|
||||
import { EventDataNode } from 'antd/lib/tree';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Divider from 'antd/lib/divider';
|
||||
import { CloudStorage, CombinedState } from 'reducers/interfaces';
|
||||
import { loadCloudStorageContentAsync } from 'actions/cloud-storage-actions';
|
||||
|
||||
interface Props {
|
||||
cloudStorage: CloudStorage;
|
||||
selectedManifest: string;
|
||||
onSelectFiles: (checkedKeysValue: string[]) => void;
|
||||
selectedFiles: string[];
|
||||
}
|
||||
|
||||
interface DataNode {
|
||||
title: string;
|
||||
key: string;
|
||||
isLeaf: boolean;
|
||||
disabled: boolean;
|
||||
children: DataNode[];
|
||||
}
|
||||
|
||||
interface DataStructure {
|
||||
name: string;
|
||||
children: Map<string, DataStructure> | null;
|
||||
unparsedChildren: string[] | null;
|
||||
}
|
||||
|
||||
type Files =
|
||||
| ReactText[]
|
||||
| {
|
||||
checked: ReactText[];
|
||||
halfChecked: ReactText[];
|
||||
};
|
||||
|
||||
export default function CloudStorageFiles(props: Props): JSX.Element {
|
||||
const {
|
||||
cloudStorage, selectedManifest, selectedFiles, onSelectFiles,
|
||||
} = props;
|
||||
const dispatch = useDispatch();
|
||||
const isFetching = useSelector((state: CombinedState) => state.cloudStorages.activities.contentLoads.fetching);
|
||||
const content = useSelector((state: CombinedState) => state.cloudStorages.activities.contentLoads.content);
|
||||
const error = useSelector((state: CombinedState) => state.cloudStorages.activities.contentLoads.error);
|
||||
const [treeData, setTreeData] = useState<DataNode[]>([]);
|
||||
const [initialData, setInitialData] = useState<DataStructure>({
|
||||
name: 'root',
|
||||
children: null,
|
||||
unparsedChildren: null,
|
||||
});
|
||||
|
||||
const [checkedAll, setCheckedAll] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(loadCloudStorageContentAsync(cloudStorage));
|
||||
}, [cloudStorage.id, selectedManifest]);
|
||||
|
||||
const parseContent = (mass: string[], root = ''): Map<string, DataStructure> => {
|
||||
const data: Map<string, DataStructure> = new Map();
|
||||
// define directories
|
||||
const upperDirs: Set<string> = new Set(
|
||||
mass.filter((path: string) => path.includes('/')).map((path: string) => path.split('/', 1)[0]),
|
||||
);
|
||||
|
||||
for (const dir of upperDirs) {
|
||||
const child: DataStructure = {
|
||||
name: dir,
|
||||
children: null,
|
||||
unparsedChildren: mass
|
||||
.filter((path: string) => path.startsWith(`${dir}/`))
|
||||
.map((path: string) => path.replace(`${dir}/`, '')),
|
||||
};
|
||||
data.set(`${root}${dir}/`, child);
|
||||
}
|
||||
|
||||
// define files
|
||||
const rootFiles = mass.filter((path: string) => !path.includes('/'));
|
||||
|
||||
for (const rootFile of rootFiles) {
|
||||
const child: DataStructure = {
|
||||
name: rootFile,
|
||||
children: null,
|
||||
unparsedChildren: null,
|
||||
};
|
||||
data.set(`${root}${rootFile}`, child);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const updateData = (key: string, data: Map<string, DataStructure> | null): Map<string, DataStructure> | null => {
|
||||
if (data === null) {
|
||||
return data;
|
||||
}
|
||||
|
||||
for (const [dataItemKey, dataItemValue] of data) {
|
||||
if (key.startsWith(dataItemKey) && key.replace(dataItemKey, '')) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
data = updateData(key, dataItemValue.children);
|
||||
} else if (dataItemKey === key) {
|
||||
const unparsedDataItemChildren = dataItemValue.unparsedChildren;
|
||||
if (dataItemValue && unparsedDataItemChildren) {
|
||||
dataItemValue.children = parseContent(unparsedDataItemChildren, dataItemKey);
|
||||
dataItemValue.unparsedChildren = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const onLoadData = (key: string): Promise<void> =>
|
||||
new Promise((resolve) => {
|
||||
if (initialData.children === null) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
setInitialData({
|
||||
...initialData,
|
||||
children: updateData(key, initialData.children),
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (content) {
|
||||
const children = parseContent(content);
|
||||
|
||||
setInitialData({
|
||||
...initialData,
|
||||
children,
|
||||
});
|
||||
} else {
|
||||
setInitialData({
|
||||
name: 'root',
|
||||
children: null,
|
||||
unparsedChildren: null,
|
||||
});
|
||||
}
|
||||
}, [content]);
|
||||
|
||||
const prepareNodes = (data: Map<string, DataStructure>, nodes: DataNode[]): DataNode[] => {
|
||||
for (const [key, value] of data) {
|
||||
const node: DataNode = {
|
||||
title: value.name,
|
||||
key,
|
||||
isLeaf: !value.children && !value.unparsedChildren,
|
||||
disabled: !!value.unparsedChildren,
|
||||
children: [],
|
||||
};
|
||||
if (value.children) {
|
||||
node.children = prepareNodes(value.children, []);
|
||||
}
|
||||
nodes.push(node);
|
||||
}
|
||||
return nodes;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (initialData.children && content) {
|
||||
const nodes = prepareNodes(initialData.children, []);
|
||||
setTreeData(nodes);
|
||||
} else {
|
||||
setTreeData([]);
|
||||
}
|
||||
}, [initialData]);
|
||||
|
||||
const onChangeCheckedAll = (checked: boolean): void => {
|
||||
setCheckedAll(checked);
|
||||
if (checked) {
|
||||
onSelectFiles((content as string[]).concat([selectedManifest]));
|
||||
} else {
|
||||
onSelectFiles([]);
|
||||
}
|
||||
};
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<Row className='cvat-create-task-page-empty-cloud-storage' justify='center' align='middle'>
|
||||
<Spin size='large' />
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert
|
||||
className='cvat-cloud-storage-alert-fetching-failed'
|
||||
message='Could not fetch cloud storage data'
|
||||
type='error'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{treeData.length ? (
|
||||
<>
|
||||
<Checkbox
|
||||
className='cvat-cloud-storage-files-checkbox'
|
||||
onChange={(event: CheckboxChangeEvent) => onChangeCheckedAll(event.target.checked)}
|
||||
checked={checkedAll}
|
||||
>
|
||||
Select all
|
||||
</Checkbox>
|
||||
<Divider className='cvat-divider' />
|
||||
<Tree.DirectoryTree
|
||||
selectable={false}
|
||||
multiple
|
||||
checkable
|
||||
height={256}
|
||||
onCheck={(checkedKeys: Files) => {
|
||||
const checkedFiles = (checkedKeys as string[]).filter((f) => !f.endsWith('/'));
|
||||
if (checkedFiles.length === (content as string[]).length) {
|
||||
setCheckedAll(true);
|
||||
} else if (checkedAll) {
|
||||
setCheckedAll(false);
|
||||
}
|
||||
onSelectFiles(checkedFiles.concat([selectedManifest]));
|
||||
}}
|
||||
loadData={(event: EventDataNode): Promise<void> => onLoadData(event.key.toLocaleString())}
|
||||
treeData={treeData}
|
||||
checkedKeys={selectedFiles}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Empty className='cvat-empty-cloud-storages-tree' description='The storage is empty' />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Form from 'antd/lib/form';
|
||||
import notification from 'antd/lib/notification';
|
||||
import AutoComplete from 'antd/lib/auto-complete';
|
||||
import Input from 'antd/lib/input';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
import Select from 'antd/lib/select';
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
import { CloudStorage } from 'reducers/interfaces';
|
||||
import { AzureProvider, S3Provider } from 'icons';
|
||||
import { ProviderType } from 'utils/enums';
|
||||
import CloudStorageFiles from './cloud-storages-files';
|
||||
|
||||
interface Props {
|
||||
formRef: any;
|
||||
cloudStorage: CloudStorage | null;
|
||||
searchPhrase: string;
|
||||
setSearchPhrase: (searchPhrase: string) => void;
|
||||
selectedFiles: string[];
|
||||
onSelectFiles: (files: string[]) => void;
|
||||
onSelectCloudStorage: (cloudStorageId: number | null) => void;
|
||||
}
|
||||
|
||||
async function searchCloudStorages(filter: Record<string, string>): Promise<CloudStorage[]> {
|
||||
try {
|
||||
const data = await getCore().cloudStorages.get(filter);
|
||||
return data;
|
||||
} catch (error) {
|
||||
notification.error({
|
||||
message: 'Could not fetch a list of cloud storages',
|
||||
description: error.toString(),
|
||||
});
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const searchCloudStoragesWrapper = debounce((phrase, setList) => {
|
||||
const filter = { displayName: phrase };
|
||||
searchCloudStorages(filter).then((list) => {
|
||||
setList(list);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
export default function CloudStorageTab(props: Props): JSX.Element {
|
||||
const { searchPhrase, setSearchPhrase } = props;
|
||||
const [initialList, setInitialList] = useState<CloudStorage[]>([]);
|
||||
const [list, setList] = useState<CloudStorage[]>([]);
|
||||
const {
|
||||
formRef, cloudStorage, selectedFiles, onSelectFiles, onSelectCloudStorage,
|
||||
} = props;
|
||||
const [selectedManifest, setSelectedManifest] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
searchCloudStorages({}).then((data) => {
|
||||
setInitialList(data);
|
||||
if (!list.length) {
|
||||
setList(data);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchPhrase) {
|
||||
setList(initialList);
|
||||
} else {
|
||||
searchCloudStoragesWrapper(searchPhrase, setList);
|
||||
}
|
||||
}, [searchPhrase, initialList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cloudStorage) {
|
||||
setSelectedManifest(cloudStorage.manifests[0]);
|
||||
}
|
||||
}, [cloudStorage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedManifest) {
|
||||
cloudStorage.manifestPath = selectedManifest;
|
||||
}
|
||||
}, [selectedManifest]);
|
||||
|
||||
const onBlur = (): void => {
|
||||
if (!searchPhrase && cloudStorage) {
|
||||
onSelectCloudStorage(null);
|
||||
} else if (searchPhrase) {
|
||||
const potentialStorages = list.filter((_cloudStorage) => _cloudStorage.displayName.includes(searchPhrase));
|
||||
if (potentialStorages.length === 1) {
|
||||
const potentialStorage = potentialStorages[0];
|
||||
setSearchPhrase(potentialStorage.displayName);
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
potentialStorage.manifestPath = potentialStorage.manifests[0];
|
||||
onSelectCloudStorage(potentialStorage);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form ref={formRef} className='cvat-create-task-page-cloud-storages-tab-form' layout='vertical'>
|
||||
<Form.Item
|
||||
label='Select cloud storage'
|
||||
name='cloudStorageSelect'
|
||||
rules={[{ required: true, message: 'Please, specify a cloud storage' }]}
|
||||
valuePropName='label'
|
||||
>
|
||||
<AutoComplete
|
||||
onBlur={onBlur}
|
||||
value={searchPhrase}
|
||||
placeholder='Search...'
|
||||
showSearch
|
||||
onSearch={(phrase: string) => {
|
||||
setSearchPhrase(phrase);
|
||||
}}
|
||||
options={list.map((_cloudStorage) => ({
|
||||
value: _cloudStorage.id.toString(),
|
||||
label: (
|
||||
<span
|
||||
className='cvat-cloud-storage-select-provider'
|
||||
>
|
||||
{_cloudStorage.providerType === ProviderType.AWS_S3_BUCKET ? (
|
||||
<S3Provider />
|
||||
) : (
|
||||
<AzureProvider />
|
||||
)}
|
||||
{_cloudStorage.displayName}
|
||||
</span>
|
||||
),
|
||||
}))}
|
||||
onSelect={(value: string) => {
|
||||
const selectedCloudStorage =
|
||||
list.filter((_cloudStorage: CloudStorage) => _cloudStorage.id === +value)[0] || null;
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
selectedCloudStorage.manifestPath = selectedCloudStorage.manifests[0];
|
||||
onSelectCloudStorage(selectedCloudStorage);
|
||||
setSearchPhrase(selectedCloudStorage?.displayName || '');
|
||||
}}
|
||||
allowClear
|
||||
>
|
||||
<Input />
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
|
||||
{cloudStorage ? (
|
||||
<Form.Item
|
||||
label='Select manifest file'
|
||||
name='manifestSelect'
|
||||
rules={[{ required: true, message: 'Please, specify a manifest file' }]}
|
||||
initialValue={cloudStorage.manifests[0]}
|
||||
>
|
||||
<Select
|
||||
onSelect={(value: string) => setSelectedManifest(value)}
|
||||
>
|
||||
{cloudStorage.manifests.map(
|
||||
(manifest: string): JSX.Element => (
|
||||
<Option key={manifest} value={manifest}>
|
||||
{manifest}
|
||||
</Option>
|
||||
),
|
||||
)}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
) : null}
|
||||
|
||||
{cloudStorage && selectedManifest ? (
|
||||
<Form.Item
|
||||
label='Files'
|
||||
name='cloudStorageFiles'
|
||||
rules={[{ required: true, message: 'Please, select a files' }]}
|
||||
>
|
||||
<CloudStorageFiles
|
||||
cloudStorage={cloudStorage}
|
||||
selectedManifest={selectedManifest}
|
||||
selectedFiles={selectedFiles}
|
||||
onSelectFiles={onSelectFiles}
|
||||
/>
|
||||
</Form.Item>
|
||||
) : null}
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
// Copyright (C) 2020-2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Search from 'antd/lib/input/Search';
|
||||
|
||||
import SearchTooltip from 'components/search-tooltip/search-tooltip';
|
||||
import { CombinedState, ProjectsQuery } from 'reducers/interfaces';
|
||||
import { getProjectsAsync } from 'actions/projects-actions';
|
||||
|
||||
function getSearchField(gettingQuery: ProjectsQuery): string {
|
||||
let searchString = '';
|
||||
for (const field of Object.keys(gettingQuery)) {
|
||||
if (gettingQuery[field] !== null && field !== 'page') {
|
||||
if (field === 'search') {
|
||||
return (gettingQuery[field] as any) as string;
|
||||
}
|
||||
|
||||
// not constant condition
|
||||
// eslint-disable-next-line
|
||||
if (typeof (gettingQuery[field] === 'number')) {
|
||||
searchString += `${field}:${gettingQuery[field]} AND `;
|
||||
} else {
|
||||
searchString += `${field}:"${gettingQuery[field]}" AND `;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return searchString.slice(0, -5);
|
||||
}
|
||||
|
||||
export default function ProjectSearchField(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const gettingQuery = useSelector((state: CombinedState) => state.projects.gettingQuery);
|
||||
|
||||
const handleSearch = (value: string): void => {
|
||||
const query = { ...gettingQuery };
|
||||
const search = value
|
||||
.replace(/\s+/g, ' ')
|
||||
.replace(/\s*:+\s*/g, ':')
|
||||
.trim();
|
||||
|
||||
const fields = Object.keys(query).filter((key) => key !== 'page');
|
||||
for (const field of fields) {
|
||||
query[field] = null;
|
||||
}
|
||||
query.search = null;
|
||||
|
||||
let specificRequest = false;
|
||||
for (const param of search.split(/[\s]+and[\s]+|[\s]+AND[\s]+/)) {
|
||||
if (param.includes(':')) {
|
||||
const [field, fieldValue] = param.split(':');
|
||||
if (fields.includes(field) && !!fieldValue) {
|
||||
specificRequest = true;
|
||||
if (field === 'id') {
|
||||
if (Number.isInteger(+fieldValue)) {
|
||||
query[field] = +fieldValue;
|
||||
}
|
||||
} else {
|
||||
query[field] = fieldValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
query.page = 1;
|
||||
if (!specificRequest && value) {
|
||||
query.search = value;
|
||||
}
|
||||
|
||||
dispatch(getProjectsAsync(query));
|
||||
};
|
||||
|
||||
return (
|
||||
<SearchTooltip instance='project'>
|
||||
<Search
|
||||
defaultValue={getSearchField(gettingQuery)}
|
||||
onSearch={handleSearch}
|
||||
size='large'
|
||||
placeholder='Search'
|
||||
/>
|
||||
</SearchTooltip>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import Search from 'antd/lib/input/Search';
|
||||
import SearchTooltip from 'components/search-tooltip/search-tooltip';
|
||||
|
||||
interface Query {
|
||||
[key: string]: string | number | boolean | null | undefined;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
query: Query;
|
||||
instance: 'task' | 'project' | 'cloudstorage';
|
||||
onSearch(query: object): void;
|
||||
}
|
||||
|
||||
export default function SearchField(props: Props): JSX.Element {
|
||||
const { onSearch, query, instance } = props;
|
||||
function parse(_query: Query): string {
|
||||
let searchString = '';
|
||||
for (const field of Object.keys(_query)) {
|
||||
const value = _query[field];
|
||||
if (value !== null && typeof value !== 'undefined' && field !== 'page') {
|
||||
if (field === 'search') {
|
||||
return _query[field] as string;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
if (typeof (_query[field] === 'number')) {
|
||||
searchString += `${field}: ${_query[field]} AND `;
|
||||
} else {
|
||||
searchString += `${field}: "${_query[field]}" AND `;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return searchString.slice(0, -5);
|
||||
}
|
||||
|
||||
const handleSearch = (value: string): void => {
|
||||
const currentQuery = { ...query };
|
||||
const search = value
|
||||
.replace(/\s+/g, ' ')
|
||||
.replace(/\s*:+\s*/g, ':')
|
||||
.trim();
|
||||
|
||||
const fields = Object.keys(query).filter((key) => key !== 'page');
|
||||
for (const field of fields) {
|
||||
currentQuery[field] = null;
|
||||
}
|
||||
currentQuery.search = null;
|
||||
|
||||
let specificRequest = false;
|
||||
for (const param of search.split(/[\s]+and[\s]+|[\s]+AND[\s]+/)) {
|
||||
if (param.includes(':')) {
|
||||
const [field, fieldValue] = param.split(':');
|
||||
if (fields.includes(field) && !!fieldValue) {
|
||||
specificRequest = true;
|
||||
if (field === 'id') {
|
||||
if (Number.isInteger(+fieldValue)) {
|
||||
currentQuery[field] = +fieldValue;
|
||||
}
|
||||
} else {
|
||||
currentQuery[field] = fieldValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
currentQuery.page = 1;
|
||||
if (!specificRequest && value) {
|
||||
currentQuery.search = value;
|
||||
}
|
||||
|
||||
onSearch(currentQuery);
|
||||
};
|
||||
|
||||
return (
|
||||
<SearchTooltip instance={instance}>
|
||||
<Search
|
||||
className='cvat-search-field'
|
||||
defaultValue={parse(query)}
|
||||
onSearch={handleSearch}
|
||||
size='large'
|
||||
placeholder='Search'
|
||||
/>
|
||||
</SearchTooltip>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-search-field {
|
||||
width: $grid-unit-size * 30;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-update-cloud-storage-form-wrapper {
|
||||
text-align: center;
|
||||
padding-top: $grid-unit-size * 5;
|
||||
overflow-y: auto;
|
||||
height: 90%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
> div > span {
|
||||
font-size: $grid-unit-size * 4;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Spin from 'antd/lib/spin';
|
||||
import Result from 'antd/lib/result';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { getCloudStoragesAsync } from 'actions/cloud-storage-actions';
|
||||
import CreateCloudStorageForm from 'components/create-cloud-storage-page/cloud-storage-form';
|
||||
|
||||
interface ParamType {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export default function UpdateCloudStoragePageComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const cloudStorageId = +useParams<ParamType>().id;
|
||||
const isFetching = useSelector((state: CombinedState) => state.cloudStorages.fetching);
|
||||
const isInitialized = useSelector((state: CombinedState) => state.cloudStorages.initialized);
|
||||
const cloudStorages = useSelector((state: CombinedState) => state.cloudStorages.current)
|
||||
.map((cloudStrage) => cloudStrage.instance);
|
||||
const [cloudStorage] = cloudStorages.filter((_cloudStorage) => _cloudStorage.id === cloudStorageId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cloudStorage && !isFetching) {
|
||||
dispatch(getCloudStoragesAsync({ id: cloudStorageId }));
|
||||
}
|
||||
}, [isFetching]);
|
||||
|
||||
if (!cloudStorage && !isInitialized) {
|
||||
return <Spin size='large' className='cvat-spinner' />;
|
||||
}
|
||||
|
||||
if (!cloudStorage) {
|
||||
return (
|
||||
<Result
|
||||
className='cvat-not-found'
|
||||
status='404'
|
||||
title={`Sorry, but the cloud storage #${cloudStorageId} was not found`}
|
||||
subTitle='Please, be sure id you requested exists and you have appropriate permissions'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row justify='center' align='top' className='cvat-update-cloud-storage-form-wrapper'>
|
||||
<Col md={20} lg={16} xl={14} xxl={9}>
|
||||
<Text className='cvat-title'>{`Update cloud storage #${cloudStorageId}`}</Text>
|
||||
<CreateCloudStorageForm cloudStorage={cloudStorage} />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,343 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { CloudStorageActions, CloudStorageActionTypes } from 'actions/cloud-storage-actions';
|
||||
import { AuthActions, AuthActionTypes } from 'actions/auth-actions';
|
||||
import { CloudStoragesState, CloudStorage } from './interfaces';
|
||||
|
||||
const defaultState: CloudStoragesState = {
|
||||
initialized: false,
|
||||
fetching: false,
|
||||
count: 0,
|
||||
current: [],
|
||||
// currentStatuses: [],
|
||||
gettingQuery: {
|
||||
page: 1,
|
||||
id: null,
|
||||
search: null,
|
||||
owner: null,
|
||||
displayName: null,
|
||||
description: null,
|
||||
resourceName: null,
|
||||
providerType: null,
|
||||
credentialsType: null,
|
||||
status: null,
|
||||
},
|
||||
activities: {
|
||||
creates: {
|
||||
attaching: false,
|
||||
id: null,
|
||||
error: '',
|
||||
},
|
||||
updates: {
|
||||
updating: false,
|
||||
cloudStorageID: null,
|
||||
error: '',
|
||||
},
|
||||
deletes: {},
|
||||
contentLoads: {
|
||||
cloudStorageID: null,
|
||||
content: null,
|
||||
fetching: false,
|
||||
error: '',
|
||||
},
|
||||
// getsStatus: {
|
||||
// cloudStorageID: null,
|
||||
// status: null,
|
||||
// fetching: false,
|
||||
// error: '',
|
||||
// },
|
||||
},
|
||||
};
|
||||
|
||||
export default (
|
||||
state: CloudStoragesState = defaultState,
|
||||
action: CloudStorageActions | AuthActions,
|
||||
): CloudStoragesState => {
|
||||
switch (action.type) {
|
||||
case CloudStorageActionTypes.UPDATE_CLOUD_STORAGES_GETTING_QUERY:
|
||||
return {
|
||||
...state,
|
||||
gettingQuery: {
|
||||
...defaultState.gettingQuery,
|
||||
...action.payload.query,
|
||||
},
|
||||
};
|
||||
case CloudStorageActionTypes.GET_CLOUD_STORAGES:
|
||||
return {
|
||||
...state,
|
||||
initialized: false,
|
||||
fetching: true,
|
||||
count: 0,
|
||||
current: [],
|
||||
// currentStatuses: [],
|
||||
};
|
||||
case CloudStorageActionTypes.GET_CLOUD_STORAGE_SUCCESS: {
|
||||
const { count, query } = action.payload;
|
||||
|
||||
const combined = action.payload.array.map(
|
||||
(cloudStorage: any, index: number): CloudStorage => ({
|
||||
instance: cloudStorage,
|
||||
preview: action.payload.previews[index],
|
||||
status: action.payload.statuses[index],
|
||||
}),
|
||||
);
|
||||
return {
|
||||
...state,
|
||||
initialized: true,
|
||||
fetching: false,
|
||||
count,
|
||||
gettingQuery: {
|
||||
...defaultState.gettingQuery,
|
||||
...query,
|
||||
},
|
||||
current: combined,
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.GET_CLOUD_STORAGE_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
initialized: true,
|
||||
fetching: false,
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.CREATE_CLOUD_STORAGE: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
creates: {
|
||||
attaching: true,
|
||||
id: null,
|
||||
error: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.CREATE_CLOUD_STORAGE_SUCCESS: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
creates: {
|
||||
attaching: false,
|
||||
id: action.payload.cloudStorageID,
|
||||
error: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.CREATE_CLOUD_STORAGE_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
creates: {
|
||||
...state.activities.creates,
|
||||
attaching: false,
|
||||
error: action.payload.error.toString(),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.UPDATE_CLOUD_STORAGE: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
updates: {
|
||||
updating: true,
|
||||
cloudStorageID: null,
|
||||
error: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.UPDATE_CLOUD_STORAGE_SUCCESS: {
|
||||
const { cloudStorage } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
updates: {
|
||||
updating: false,
|
||||
cloudStorageID: cloudStorage.id,
|
||||
error: '',
|
||||
},
|
||||
},
|
||||
current: state.current.map(
|
||||
(_cloudStorage: CloudStorage): CloudStorage => {
|
||||
if (_cloudStorage.id === cloudStorage.id) {
|
||||
return cloudStorage;
|
||||
}
|
||||
|
||||
return _cloudStorage;
|
||||
},
|
||||
),
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.UPDATE_CLOUD_STORAGE_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
updates: {
|
||||
...state.activities.updates,
|
||||
updating: false,
|
||||
error: action.payload.error.toString(),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.DELETE_CLOUD_STORAGE: {
|
||||
const { cloudStorageID } = action.payload;
|
||||
const { deletes } = state.activities;
|
||||
|
||||
deletes[cloudStorageID] = false;
|
||||
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
deletes: {
|
||||
...deletes,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.DELETE_CLOUD_STORAGE_SUCCESS: {
|
||||
const { cloudStorageID } = action.payload;
|
||||
const { deletes } = state.activities;
|
||||
|
||||
deletes[cloudStorageID] = true;
|
||||
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
deletes: {
|
||||
...deletes,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.DELETE_CLOUD_STORAGE_FAILED: {
|
||||
const { cloudStorageID } = action.payload;
|
||||
const { deletes } = state.activities;
|
||||
|
||||
delete deletes[cloudStorageID];
|
||||
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
deletes: {
|
||||
...deletes,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT:
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
contentLoads: {
|
||||
cloudStorageID: null,
|
||||
content: null,
|
||||
error: '',
|
||||
fetching: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
case CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT_SUCCESS: {
|
||||
const { cloudStorageID, content } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
contentLoads: {
|
||||
cloudStorageID,
|
||||
content,
|
||||
error: '',
|
||||
fetching: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
case CloudStorageActionTypes.LOAD_CLOUD_STORAGE_CONTENT_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
activities: {
|
||||
...state.activities,
|
||||
contentLoads: {
|
||||
...state.activities.contentLoads,
|
||||
error: action.payload.error.toString(),
|
||||
fetching: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
// case CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS:
|
||||
// return {
|
||||
// ...state,
|
||||
// activities: {
|
||||
// ...state.activities,
|
||||
// getsStatus: {
|
||||
// cloudStorageID: null,
|
||||
// status: null,
|
||||
// error: '',
|
||||
// fetching: true,
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// case CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS_SUCCESS: {
|
||||
// const { cloudStorageID, status } = action.payload;
|
||||
// const statuses = state.currentStatuses;
|
||||
// const index = statuses.findIndex((item) => item.id === cloudStorageID);
|
||||
// if (index !== -1) {
|
||||
// statuses[index] = {
|
||||
// ...statuses[index],
|
||||
// status,
|
||||
// };
|
||||
// } else {
|
||||
// statuses.push({
|
||||
// id: cloudStorageID,
|
||||
// status,
|
||||
// });
|
||||
// }
|
||||
// return {
|
||||
// ...state,
|
||||
// currentStatuses: statuses,
|
||||
// activities: {
|
||||
// ...state.activities,
|
||||
// getsStatus: {
|
||||
// cloudStorageID,
|
||||
// status,
|
||||
// error: '',
|
||||
// fetching: false,
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
// case CloudStorageActionTypes.GET_CLOUD_STORAGE_STATUS_FAILED: {
|
||||
// return {
|
||||
// ...state,
|
||||
// activities: {
|
||||
// ...state.activities,
|
||||
// getsStatus: {
|
||||
// ...state.activities.getsStatus,
|
||||
// error: action.payload.error.toString(),
|
||||
// fetching: false,
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
case AuthActionTypes.LOGOUT_SUCCESS: {
|
||||
return { ...defaultState };
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
// Copyright (C) 2021 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
export enum ProviderType {
|
||||
AWS_S3_BUCKET = 'AWS_S3_BUCKET',
|
||||
AZURE_CONTAINER = 'AZURE_CONTAINER',
|
||||
}
|
||||
|
||||
export enum CredentialsType {
|
||||
KEY_SECRET_KEY_PAIR = 'KEY_SECRET_KEY_PAIR',
|
||||
ACCOUNT_NAME_TOKEN_PAIR = 'ACCOUNT_NAME_TOKEN_PAIR',
|
||||
ANONYMOUS_ACCESS = 'ANONYMOUS_ACCESS',
|
||||
}
|
||||
|
||||
export enum StorageStatuses {
|
||||
AVAILABLE = 'AVAILABLE',
|
||||
FORBIDDEN = 'FORBIDDEN',
|
||||
NOT_FOUND = 'NOT_FOUND',
|
||||
}
|
||||
Loading…
Reference in New Issue