mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate retention option during bucket creation on UI (#509)

Browse Source
This commit is contained in:
Cesar N
2020-12-14 17:31:37 -06:00
committed by GitHub
parent d97d18ebab
commit d5c01fcd7d
4 changed files with 243 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
View File

@@ -23,6 +23,7 @@ import api from "../../../../common/api";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
import { factorForDropdown, getBytes } from "../../../../common/utils";
import { AppState } from "../../../../store";
import { connect } from "react-redux";
@@ -33,6 +34,10 @@ import {
addBucketQuotaType,
addBucketQuotaUnit,
addBucketVersioned,
addBucketRetention,
addBucketRetentionMode,
addBucketRetentionUnit,
addBucketRetentionValidity,
} from "../actions";
import { useDebounce } from "use-debounce";
import { MakeBucketRequest } from "../types";
@@ -71,12 +76,20 @@ interface IAddBucketProps {
addBucketQuotaType: typeof addBucketQuotaType;
addBucketQuotaSize: typeof addBucketQuotaSize;
addBucketQuotaUnit: typeof addBucketQuotaUnit;
addBucketRetention: typeof addBucketRetention;
addBucketRetentionMode: typeof addBucketRetentionMode;
addBucketRetentionUnit: typeof addBucketRetentionUnit;
addBucketRetentionValidity: typeof addBucketRetentionValidity;
bucketName: string;
versioned: boolean;
enableQuota: boolean;
quotaType: string;
quotaSize: string;
quotaUnit: string;
enableRetention: boolean;
retentionMode: string;
retentionUnit: string;
retentionValidity: number;
}
const AddBucket = ({
@@ -89,14 +102,21 @@ const AddBucket = ({
addBucketQuotaType,
addBucketQuotaSize,
addBucketQuotaUnit,
addBucketRetention,
addBucketRetentionMode,
addBucketRetentionUnit,
addBucketRetentionValidity,
bucketName,
versioned,
enableQuota,
quotaType,
quotaSize,
quotaUnit,
enableRetention,
retentionMode,
retentionUnit,
retentionValidity,
}: IAddBucketProps) => {
const [bName, setBName] = useState<string>(bucketName);
const [addLoading, setAddLoading] = useState<boolean>(false);
const [addError, setAddError] = useState<string>("");
const [sendEnabled, setSendEnabled] = useState<boolean>(false);
@@ -122,6 +142,14 @@ const AddBucket = ({
};
}
if (enableRetention) {
request.retention = {
mode: retentionMode,
unit: retentionUnit,
validity: retentionValidity,
};
}
api
.invoke("POST", "/api/v1/buckets", request)
.then((res) => {
@@ -133,27 +161,33 @@ const AddBucket = ({
setAddLoading(false);
setAddError(err);
});
resetForm();
};
const [value] = useDebounce(bName, 1000);
const [value] = useDebounce(bucketName, 1000);
useEffect(() => {
addBucketName(value);
}, [value, addBucketName]);
const resetForm = () => {
setBName("");
addBucketName("");
addBucketVersioned(false);
addBucketQuota(false);
addBucketQuotaType("hard");
addBucketQuotaSize("1");
addBucketQuotaUnit("TiB");
addBucketRetention(false);
addBucketRetentionMode("compliance");
addBucketRetentionUnit("days");
addBucketRetentionValidity(1);
};
useEffect(() => {
let valid = false;
if (bName.trim() !== "") {
if (bucketName.trim() !== "") {
valid = true;
}
@@ -163,8 +197,35 @@ const AddBucket = ({
}
}
if (!versioned || !enableRetention) {
addBucketRetention(false);
addBucketRetentionMode("compliance");
addBucketRetentionUnit("days");
addBucketRetentionValidity(1);
}
if (
enableRetention &&
(Number.isNaN(retentionValidity) || retentionValidity < 1)
) {
valid = false;
}
setSendEnabled(valid);
}, [bName, versioned, quotaType, quotaSize, quotaUnit, enableQuota]);
}, [
bucketName,
versioned,
quotaType,
quotaSize,
quotaUnit,
enableQuota,
enableRetention,
addBucketRetention,
addBucketRetentionMode,
addBucketRetentionUnit,
addBucketRetentionValidity,
retentionValidity,
]);
return (
<ModalWrapper
@@ -196,10 +257,10 @@ const AddBucket = ({
id="bucket-name"
name="bucket-name"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setBName(event.target.value);
addBucketName(event.target.value);
}}
label="Bucket Name"
value={bName}
value={bucketName}
/>
</Grid>
<Grid item xs={12}>
@@ -231,15 +292,15 @@ const AddBucket = ({
{enableQuota && (
<React.Fragment>
<Grid item xs={12}>
<SelectWrapper
value={quotaType}
label="Quota Type"
<RadioGroupSelector
currentSelection={quotaType}
id="quota_type"
name="quota_type"
label="Quota Type"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
addBucketQuotaType(e.target.value as string);
}}
options={[
selectorOptions={[
{ value: "hard", label: "Hard" },
{ value: "fifo", label: "FIFO" },
]}
@@ -279,6 +340,69 @@ const AddBucket = ({
</Grid>
</React.Fragment>
)}
{versioned && (
<Grid item xs={12}>
<FormSwitchWrapper
value="bucket_retention"
id="bucket_retention"
name="bucket_retention"
checked={enableRetention}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
addBucketRetention(event.target.checked);
}}
label={"Enable Bucket Retention"}
indicatorLabels={["On", "Off"]}
/>
</Grid>
)}
{enableRetention && (
<React.Fragment>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={retentionMode}
id="retention_mode"
name="retention_mode"
label="Retention Mode"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
addBucketRetentionMode(e.target.value as string);
}}
selectorOptions={[
{ value: "compliance", label: "Compliance" },
{ value: "governance", label: "Governance" },
]}
/>
</Grid>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={retentionUnit}
id="retention_unit"
name="retention_unit"
label="Retention Unit"
onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
addBucketRetentionUnit(e.target.value as string);
}}
selectorOptions={[
{ value: "days", label: "Days" },
{ value: "years", label: "Years" },
]}
/>
</Grid>
<Grid item xs={12}>
<InputBoxWrapper
type="number"
id="retention_validity"
name="retention_validity"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
addBucketRetentionValidity(e.target.valueAsNumber);
}}
label="Retention Validity"
value={String(retentionValidity)}
required
min="1"
/>
</Grid>
</React.Fragment>
)}
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<button
@@ -317,6 +441,10 @@ const mapState = (state: AppState) => ({
quotaType: state.buckets.addBucketQuotaType,
quotaSize: state.buckets.addBucketQuotaSize,
quotaUnit: state.buckets.addBucketQuotaUnit,
enableRetention: state.buckets.addBucketRetentionEnabled,
retentionMode: state.buckets.addBucketRetentionMode,
retentionUnit: state.buckets.addBucketRetentionUnit,
retentionValidity: state.buckets.addBucketRetentionValidity,
});
const connector = connect(mapState, {
@@ -326,6 +454,10 @@ const connector = connect(mapState, {
addBucketQuotaType: addBucketQuotaType,
addBucketQuotaSize: addBucketQuotaSize,
addBucketQuotaUnit: addBucketQuotaUnit,
addBucketRetention: addBucketRetention,
addBucketRetentionMode: addBucketRetentionMode,
addBucketRetentionUnit: addBucketRetentionUnit,
addBucketRetentionValidity: addBucketRetentionValidity,
});
export default connector(withStyles(styles)(AddBucket));

57
portal-ui/src/screens/Console/Buckets/actions.ts
View File

@@ -22,6 +22,10 @@ export const ADD_BUCKET_QUOTA_TYPE = "ADD_BUCKET_QUOTA_TYPE";
export const ADD_BUCKET_QUOTA_SIZE = "ADD_BUCKET_QUOTA_SIZE";
export const ADD_BUCKET_QUOTA_UNIT = "ADD_BUCKET_QUOTA_UNIT";
export const ADD_BUCKET_RESET = "ADD_BUCKET_RESET";
export const ADD_BUCKET_RETENTION = "ADD_BUCKET_RETENTION";
export const ADD_BUCKET_RETENTION_MODE = "ADD_BUCKET_RETENTION_MODE";
export const ADD_BUCKET_RETENTION_UNIT = "ADD_BUCKET_RETENTION_UNIT";
export const ADD_BUCKET_RETENTION_VALIDITY = "ADD_BUCKET_RETENTION_VALIDITY";
interface AddBucketOpenAction {
type: typeof ADD_BUCKET_OPEN;
@@ -61,6 +65,25 @@ interface AddBucketResetAction {
type: typeof ADD_BUCKET_RESET;
}
interface AddBucketRetentionAction {
type: typeof ADD_BUCKET_RETENTION;
retention: boolean;
}
interface AddBucketRetentionModeAction {
type: typeof ADD_BUCKET_RETENTION_MODE;
retentionMode: string;
}
interface AddBucketRetentionUnitAction {
type: typeof ADD_BUCKET_RETENTION_UNIT;
retentionUnit: string;
}
interface AddBucketRetentionValidityAction {
type: typeof ADD_BUCKET_RETENTION_VALIDITY;
retentionValidity: number;
}
export type BucketActionTypes =
| AddBucketOpenAction
| AddBucketNameAction
@@ -69,7 +92,11 @@ export type BucketActionTypes =
| AddBucketQuotaTypeAction
| AddBucketQuotaSizeAction
| AddBucketQuotaUnitAction
| AddBucketResetAction;
| AddBucketResetAction
| AddBucketRetentionAction
| AddBucketRetentionModeAction
| AddBucketRetentionUnitAction
| AddBucketRetentionValidityAction;
export function addBucketOpen(open: boolean) {
return {
@@ -124,3 +151,31 @@ export function addBucketReset() {
type: ADD_BUCKET_RESET,
};
}
export function addBucketRetention(retention: boolean) {
return {
type: ADD_BUCKET_RETENTION,
retention: retention,
};
}
export function addBucketRetentionMode(mode: string) {
return {
type: ADD_BUCKET_RETENTION_MODE,
retentionMode: mode,
};
}
export function addBucketRetentionUnit(unit: string) {
return {
type: ADD_BUCKET_RETENTION_UNIT,
retentionUnit: unit,
};
}
export function addBucketRetentionValidity(validity: number) {
return {
type: ADD_BUCKET_RETENTION_VALIDITY,
retentionValidity: validity,
};
}

37
portal-ui/src/screens/Console/Buckets/reducers.ts
View File

@@ -23,6 +23,10 @@ import {
ADD_BUCKET_QUOTA_UNIT,
ADD_BUCKET_RESET,
ADD_BUCKET_VERSIONED,
ADD_BUCKET_RETENTION,
ADD_BUCKET_RETENTION_MODE,
ADD_BUCKET_RETENTION_UNIT,
ADD_BUCKET_RETENTION_VALIDITY,
BucketActionTypes,
} from "./actions";
@@ -34,6 +38,10 @@ export interface BucketsState {
addBucketQuotaType: string;
addBucketQuotaSize: string;
addBucketQuotaUnit: string;
addBucketRetentionEnabled: boolean;
addBucketRetentionMode: string;
addBucketRetentionUnit: string;
addBucketRetentionValidity: number;
}
const initialState: BucketsState = {
@@ -44,6 +52,10 @@ const initialState: BucketsState = {
addBucketQuotaType: "hard",
addBucketQuotaSize: "1",
addBucketQuotaUnit: "TiB",
addBucketRetentionEnabled: false,
addBucketRetentionMode: "compliance",
addBucketRetentionUnit: "days",
addBucketRetentionValidity: 1,
};
export function bucketsReducer(
@@ -86,6 +98,27 @@ export function bucketsReducer(
...state,
addBucketQuotaUnit: action.quotaUnit,
};
case ADD_BUCKET_RETENTION:
return {
...state,
addBucketRetentionEnabled: action.retention,
};
case ADD_BUCKET_RETENTION_MODE:
return {
...state,
addBucketRetentionMode: action.retentionMode,
};
case ADD_BUCKET_RETENTION_UNIT:
return {
...state,
addBucketRetentionUnit: action.retentionUnit,
};
case ADD_BUCKET_RETENTION_VALIDITY:
return {
...state,
addBucketRetentionValidity: action.retentionValidity,
};
case ADD_BUCKET_RESET:
return {
...state,
@@ -95,6 +128,10 @@ export function bucketsReducer(
addBucketQuotaType: "hard",
addBucketQuotaSize: "1",
addBucketQuotaUnit: "TiB",
addBucketRetentionEnabled: false,
addBucketRetentionMode: "compliance",
addBucketRetentionUnit: "days",
addBucketRetentionValidity: 1,
};
default:
return state;

7
portal-ui/src/screens/Console/Buckets/types.tsx
View File

@@ -79,10 +79,17 @@ export interface QuotaRequest {
amount: number;
}
export interface RetentionRequest {
mode: string;
unit: string;
validity: number;
}
export interface MakeBucketRequest {
name: string;
versioning: boolean;
quota?: QuotaRequest;
retention?: RetentionRequest;
}
export interface ChangePasswordRequest {