Web: ManualBackup: Added new options for Amazon storage.
This commit is contained in:
parent
39557164d8
commit
78c9bbbc3e
@ -41,6 +41,7 @@ const commonStyles = css`
|
||||
|
||||
.backup_combo {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
max-width: ${INPUT_LENGTH};
|
||||
.combo-button-label {
|
||||
@ -49,17 +50,26 @@ const commonStyles = css`
|
||||
}
|
||||
}
|
||||
.backup_text-input {
|
||||
margin: 10px 0;
|
||||
margin: 4px 0 10px 0;
|
||||
|
||||
width: 100%;
|
||||
max-width: ${INPUT_LENGTH};
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.backup-description {
|
||||
.backup_checkbox {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.backup_radio-button-settings {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.backup_radio-button {
|
||||
max-width: ${TEXT_LENGTH};
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -219,7 +229,8 @@ const StyledModules = styled.div`
|
||||
margin-bottom: 24px;
|
||||
|
||||
.backup-description {
|
||||
${(props) => props.isDisabled && `color: #A3A9AE`}
|
||||
${(props) => props.isDisabled && `color: #A3A9AE`};
|
||||
margin-left: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -3,6 +3,10 @@ import TextInput from "@appserver/components/text-input";
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import ComboBox from "@appserver/components/combobox";
|
||||
import RadioButton from "@appserver/components/radio-button";
|
||||
import { getPortalPasswordSettings } from "@appserver/common/api/settings";
|
||||
import { thirdParty } from "@appserver/common/api/files";
|
||||
import Text from "@appserver/components/text";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
const bucketInput = "bucket";
|
||||
const regionInput = "region";
|
||||
@ -10,15 +14,26 @@ const urlInput = "serviceurl";
|
||||
const forcePathStyleInput = "forcepathstyle";
|
||||
const httpInput = "usehttp";
|
||||
const sseInput = "sse";
|
||||
const sse_kms = "ssekms";
|
||||
const customKey = "customKey";
|
||||
const clientKey = "clientKey";
|
||||
|
||||
const StyledBody = styled.div`
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
class AmazonSettings extends React.Component {
|
||||
static formNames = () => {
|
||||
return {
|
||||
bucket: "",
|
||||
region: "",
|
||||
region: "0",
|
||||
serviceurl: "",
|
||||
customKey: "",
|
||||
clientKey: "",
|
||||
forcepathstyle: false,
|
||||
usehttp: false,
|
||||
sse: "none",
|
||||
sse: "0",
|
||||
kms: true,
|
||||
s3: false,
|
||||
};
|
||||
|
||||
// [
|
||||
@ -32,7 +47,7 @@ class AmazonSettings extends React.Component {
|
||||
};
|
||||
|
||||
static requiredFormsName = () => {
|
||||
return [bucketInput, regionInput, httpInput, sseInput];
|
||||
return [urlInput, bucketInput, customKey, clientKey];
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
@ -53,6 +68,9 @@ class AmazonSettings extends React.Component {
|
||||
this.SSEPlaceholder = t("ServerSideEncryptionMethod");
|
||||
this.useHttpPlaceholder = t("UseHttp");
|
||||
|
||||
this.sse_kms = "SSE-KMS";
|
||||
this.sse_s3 = "SSE-S3";
|
||||
|
||||
this.availableEncryptions = [
|
||||
{
|
||||
key: "0",
|
||||
@ -68,25 +86,90 @@ class AmazonSettings extends React.Component {
|
||||
},
|
||||
];
|
||||
|
||||
this.region = [
|
||||
{
|
||||
key: "0",
|
||||
label: "None",
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
label: "Example-1",
|
||||
},
|
||||
];
|
||||
|
||||
this.managedKeys = [
|
||||
{
|
||||
key: "0",
|
||||
label: "Default AWS managed CMK",
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
label: "Сustomer managed CMK ",
|
||||
},
|
||||
];
|
||||
this.state = {
|
||||
selectedEncryption: this.availableEncryptions[0],
|
||||
region: this.region[0],
|
||||
managedKeys: this.managedKeys[0],
|
||||
};
|
||||
}
|
||||
|
||||
setMaxCopies = (options) => {
|
||||
const key = options.key;
|
||||
this.selectedMaxCopiesNumber = key;
|
||||
};
|
||||
|
||||
onSelect = (options) => {
|
||||
onSelectEncryptionMethod = (options) => {
|
||||
const { onSelectAdditionalInfo } = this.props;
|
||||
const key = options.key;
|
||||
const label = options.label;
|
||||
|
||||
console.log("options", options);
|
||||
this.setState = {
|
||||
onSelectAdditionalInfo("sse", key);
|
||||
this.setState({
|
||||
selectedEncryption: { key, label },
|
||||
});
|
||||
};
|
||||
|
||||
onSelectRegion = (options) => {
|
||||
const { onSelectAdditionalInfo } = this.props;
|
||||
const key = options.key;
|
||||
const label = options.label;
|
||||
|
||||
onSelectAdditionalInfo("region", key);
|
||||
|
||||
this.setState({
|
||||
region: { key, label },
|
||||
});
|
||||
};
|
||||
|
||||
onSelectManagedKeys = (options) => {
|
||||
const { onSelectAdditionalInfo } = this.props;
|
||||
const key = options.key;
|
||||
const label = options.label;
|
||||
|
||||
onSelectAdditionalInfo("managedkeys", key);
|
||||
|
||||
this.setState({
|
||||
managedKeys: { key, label },
|
||||
});
|
||||
};
|
||||
|
||||
onSelectEncryptionMode = (e) => {
|
||||
const { onSelectSSEMode } = this.props;
|
||||
console.log("Hello");
|
||||
// let newStateObj = {};
|
||||
const name = e.target.name;
|
||||
// newStateObj[name] = true;
|
||||
|
||||
// const newState = this.state.selectedEncryptionMode.filter(
|
||||
// (el) => el !== name
|
||||
// );
|
||||
// newState.forEach((name) => (newStateObj[name] = false));
|
||||
const nonCheck = name === "s3" ? "kms" : "s3"; //TODO: names from api
|
||||
|
||||
onSelectSSEMode(name, nonCheck);
|
||||
// this.setState({
|
||||
// selectedEncryptionMode: {
|
||||
// ...newStateObj,
|
||||
// },
|
||||
// });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
isError,
|
||||
@ -94,16 +177,20 @@ class AmazonSettings extends React.Component {
|
||||
isLoading,
|
||||
onChange,
|
||||
formSettings,
|
||||
onChangeCheckbox,
|
||||
} = this.props;
|
||||
const { selectedEncryption } = this.state;
|
||||
console.log(
|
||||
"selectedEncryption",
|
||||
const {
|
||||
selectedEncryption,
|
||||
selectedEncryption.label
|
||||
);
|
||||
selectedEncryptionMode,
|
||||
region,
|
||||
managedKeys,
|
||||
} = this.state;
|
||||
console.log("formSettings", formSettings);
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledBody>
|
||||
<Text isBold>{this.bucketPlaceholder}</Text>
|
||||
<TextInput
|
||||
name={bucketInput}
|
||||
className="backup_text-input"
|
||||
@ -112,31 +199,46 @@ class AmazonSettings extends React.Component {
|
||||
hasError={isError?.bucket}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.bucketPlaceholder || ""}
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
name={regionInput}
|
||||
</StyledBody>
|
||||
<StyledBody>
|
||||
<Text isBold>{this.regionPlaceholder}</Text>
|
||||
<ComboBox
|
||||
className="backup_text-input"
|
||||
scale
|
||||
value={formSettings.region}
|
||||
hasError={isError?.region}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.regionPlaceholder || ""}
|
||||
options={this.region}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: region.label,
|
||||
}}
|
||||
onSelect={this.onSelectRegion}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
isDisabled={!!formSettings.serviceurl.trim()}
|
||||
tabIndex={2}
|
||||
/>
|
||||
</StyledBody>
|
||||
|
||||
<StyledBody>
|
||||
<Text isBold>{this.serviceUrlPlaceholder}</Text>
|
||||
<TextInput
|
||||
name={urlInput}
|
||||
className="backup_text-input"
|
||||
scale
|
||||
value={formSettings.serviceurl}
|
||||
hasError={isError?.serviceurl}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.serviceUrlPlaceholder || ""}
|
||||
isDisabled={
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.isDisabled ||
|
||||
region.key !== "0"
|
||||
}
|
||||
tabIndex={3}
|
||||
/>
|
||||
</StyledBody>
|
||||
|
||||
<Checkbox
|
||||
name={forcePathStyleInput}
|
||||
@ -144,55 +246,110 @@ class AmazonSettings extends React.Component {
|
||||
isChecked={formSettings.forcepathstyle}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={onChange}
|
||||
onChange={onChangeCheckbox}
|
||||
tabIndex={4}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
className="backup_checkbox"
|
||||
name={httpInput}
|
||||
label={this.useHttpPlaceholder}
|
||||
isChecked={formSettings.usehttp}
|
||||
isIndeterminate={false}
|
||||
isDisabled={false}
|
||||
onChange={onChange}
|
||||
onChange={onChangeCheckbox}
|
||||
tabIndex={5}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
hasError={isError?.sse}
|
||||
name={sseInput}
|
||||
className="backup_text-input"
|
||||
scale
|
||||
value={formSettings.sse}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
placeholder={this.SSEPlaceholder || ""}
|
||||
tabIndex={6}
|
||||
/>
|
||||
<StyledBody>
|
||||
<Text isBold>{this.SSEPlaceholder}</Text>
|
||||
|
||||
<ComboBox
|
||||
className="backup_text-input"
|
||||
options={this.availableEncryptions}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: selectedEncryption.label,
|
||||
}}
|
||||
onSelect={this.onSelect}
|
||||
onSelect={this.onSelectEncryptionMethod}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={300}
|
||||
dropDownMaxHeight={50}
|
||||
tabIndex={7}
|
||||
/>
|
||||
{/*
|
||||
{selectedEncryption.key === 1 && <RadioButton
|
||||
// fontSize="13px"
|
||||
// fontWeight="400"
|
||||
</StyledBody>
|
||||
{selectedEncryption.key === "1" && (
|
||||
<>
|
||||
<RadioButton
|
||||
value=""
|
||||
label=""
|
||||
isChecked={isChecked}
|
||||
onClick={onSelectFile}
|
||||
name=``
|
||||
/>} */}
|
||||
label={this.sse_kms}
|
||||
isChecked={formSettings.kms}
|
||||
onClick={this.onSelectEncryptionMode}
|
||||
name={"kms"}
|
||||
/>
|
||||
|
||||
<RadioButton
|
||||
className="backup_radio-button-settings"
|
||||
value=""
|
||||
label={this.sse_s3}
|
||||
isChecked={formSettings.s3}
|
||||
onClick={this.onSelectEncryptionMode}
|
||||
name={"s3"}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{formSettings.kms && selectedEncryption.key === "1" && (
|
||||
<>
|
||||
<Text isBold>{"Managed CMK"}</Text>
|
||||
<ComboBox
|
||||
className="backup_text-input"
|
||||
options={this.managedKeys}
|
||||
selectedOption={{
|
||||
key: 0,
|
||||
label: managedKeys.label,
|
||||
}}
|
||||
onSelect={this.onSelectManagedKeys}
|
||||
noBorder={false}
|
||||
scaled={true}
|
||||
scaledOptions={true}
|
||||
dropDownMaxHeight={50}
|
||||
tabIndex={8}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{managedKeys.key !== "0" && (
|
||||
<>
|
||||
<Text isBold>{"Key"}</Text>
|
||||
<TextInput
|
||||
name={customKey}
|
||||
className="backup_text-input"
|
||||
scale
|
||||
value={formSettings.customKey}
|
||||
hasError={isError?.customKey}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
tabIndex={9}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedEncryption.key === "2" && (
|
||||
<>
|
||||
<Text isBold>{"Key"}</Text>
|
||||
<TextInput
|
||||
name={clientKey}
|
||||
className="backup_text-input"
|
||||
scale
|
||||
value={formSettings.clientKey}
|
||||
hasError={isError?.clientKey}
|
||||
onChange={onChange}
|
||||
isDisabled={isLoadingData || isLoading || this.isDisabled}
|
||||
tabIndex={8}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -109,6 +109,9 @@ class ThirdPartyStorageModule extends React.PureComponent {
|
||||
|
||||
for (let key in formSettings) {
|
||||
const elem = formSettings[key];
|
||||
|
||||
if (typeof elem == "boolean") continue;
|
||||
|
||||
errors[key] = !elem.trim();
|
||||
|
||||
if (!elem.trim() && !firstError) {
|
||||
|
@ -27,15 +27,40 @@ class AmazonStorage extends React.Component {
|
||||
this.isDisabled = selectedStorage && !selectedStorage.isSet;
|
||||
}
|
||||
|
||||
onChange = (event) => {
|
||||
onChangeTextInput = (event) => {
|
||||
const { formSettings } = this.state;
|
||||
const { target } = event;
|
||||
const value = target.value || target.checked;
|
||||
const value = target.value;
|
||||
const name = target.name;
|
||||
console.log("target.value", target.value, target.checked);
|
||||
console.log("name", name, "value", value);
|
||||
this.setState({ formSettings: { ...formSettings, [name]: value } });
|
||||
};
|
||||
|
||||
onChangeCheckbox = (e) => {
|
||||
const { formSettings } = this.state;
|
||||
const { target } = e;
|
||||
const value = target.checked;
|
||||
const name = target.name;
|
||||
this.setState({ formSettings: { ...formSettings, [name]: value } });
|
||||
};
|
||||
|
||||
onSelectSSEMode = (name, nonCheckName) => {
|
||||
const { formSettings } = this.state;
|
||||
console.log("name", name, "nonCheckName", nonCheckName);
|
||||
this.setState({
|
||||
formSettings: {
|
||||
...formSettings,
|
||||
[name]: true,
|
||||
[nonCheckName]: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
onSelectAdditionalInfo = (name, value) => {
|
||||
const { formSettings } = this.state;
|
||||
|
||||
this.setState({ formSettings: { ...formSettings, [name]: value } });
|
||||
};
|
||||
onMakeCopy = () => {
|
||||
const { formSettings } = this.state;
|
||||
const { onMakeCopyIntoStorage, isInvalidForm } = this.props;
|
||||
@ -45,6 +70,22 @@ class AmazonStorage extends React.Component {
|
||||
(el) => (requiredSettings[el] = formSettings[el])
|
||||
);
|
||||
|
||||
if (formSettings.region !== "0") {
|
||||
const optional = this.requiredFields[0];
|
||||
delete requiredSettings[optional];
|
||||
}
|
||||
|
||||
if (
|
||||
(formSettings.kms && formSettings.managedkeys === "0") ||
|
||||
formSettings.sse === "2" ||
|
||||
formSettings.sse === "0"
|
||||
) {
|
||||
delete requiredSettings["customKey"];
|
||||
}
|
||||
if (formSettings.sse !== "2") {
|
||||
delete requiredSettings["clientKey"];
|
||||
}
|
||||
console.log("requiredSettings", requiredSettings);
|
||||
const isInvalid = isInvalidForm(requiredSettings);
|
||||
|
||||
const hasError = isInvalid[0];
|
||||
@ -54,10 +95,16 @@ class AmazonStorage extends React.Component {
|
||||
this.setState({ formErrors: errors });
|
||||
return;
|
||||
}
|
||||
let newSettings = { ...formSettings };
|
||||
|
||||
const arraySettings = Object.entries(formSettings);
|
||||
if (newSettings.sse === "0") {
|
||||
delete newSettings["kms"];
|
||||
delete newSettings["s3"];
|
||||
}
|
||||
|
||||
onMakeCopyIntoStorage(arraySettings);
|
||||
const arraySettings = Object.entries(newSettings);
|
||||
console.log("arraySettings", arraySettings);
|
||||
// onMakeCopyIntoStorage(arraySettings);
|
||||
this.setState({ formErrors: {} });
|
||||
};
|
||||
render() {
|
||||
@ -69,12 +116,15 @@ class AmazonStorage extends React.Component {
|
||||
selectedStorage,
|
||||
buttonSize,
|
||||
} = this.props;
|
||||
|
||||
console.log("formSettings", formSettings);
|
||||
return (
|
||||
<>
|
||||
<AmazonSettings
|
||||
formSettings={formSettings}
|
||||
onChange={this.onChange}
|
||||
onChange={this.onChangeTextInput}
|
||||
onChangeCheckbox={this.onChangeCheckbox}
|
||||
onSelectAdditionalInfo={this.onSelectAdditionalInfo}
|
||||
onSelectSSEMode={this.onSelectSSEMode}
|
||||
isLoadingData={isLoadingData}
|
||||
isError={formErrors}
|
||||
selectedStorage={selectedStorage}
|
||||
|
Loading…
Reference in New Issue
Block a user