IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: ManualBackup: Added new options for Amazon storage.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2022-06-21 09:07:57 +03:00
parent 39557164d8
commit 78c9bbbc3e
4 changed files with 318 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/StyledBackup.js
View File

@ -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;
}
`;

327
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/consumer-storage-settings/AmazonSettings.js
View File

@ -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,49 +177,68 @@ 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 (
<>
<TextInput
name={bucketInput}
className="backup_text-input"
scale
value={formSettings.bucket}
hasError={isError?.bucket}
onChange={onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.bucketPlaceholder || ""}
tabIndex={1}
/>
<StyledBody>
<Text isBold>{this.bucketPlaceholder}</Text>
<TextInput
name={bucketInput}
className="backup_text-input"
scale
value={formSettings.bucket}
hasError={isError?.bucket}
onChange={onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
tabIndex={1}
/>
</StyledBody>
<StyledBody>
<Text isBold>{this.regionPlaceholder}</Text>
<ComboBox
className="backup_text-input"
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>
<TextInput
name={regionInput}
className="backup_text-input"
scale
value={formSettings.region}
hasError={isError?.region}
onChange={onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.regionPlaceholder || ""}
tabIndex={2}
/>
<TextInput
name={urlInput}
className="backup_text-input"
scale
value={formSettings.serviceurl}
onChange={onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.serviceUrlPlaceholder || ""}
tabIndex={3}
/>
<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 ||
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}
/>
<StyledBody>
<Text isBold>{this.SSEPlaceholder}</Text>
<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}
/>
<ComboBox
className="backup_text-input"
options={this.availableEncryptions}
selectedOption={{
key: 0,
label: selectedEncryption.label,
}}
onSelect={this.onSelectEncryptionMethod}
noBorder={false}
scaled={true}
scaledOptions={true}
dropDownMaxHeight={50}
tabIndex={7}
/>
</StyledBody>
{selectedEncryption.key === "1" && (
<>
<RadioButton
value=""
label={this.sse_kms}
isChecked={formSettings.kms}
onClick={this.onSelectEncryptionMode}
name={"kms"}
/>
<ComboBox
options={this.availableEncryptions}
selectedOption={{
key: 0,
label: selectedEncryption.label,
}}
onSelect={this.onSelect}
noBorder={false}
scaled={true}
scaledOptions={true}
dropDownMaxHeight={300}
tabIndex={7}
/>
{/*
{selectedEncryption.key === 1 && <RadioButton
// fontSize="13px"
// fontWeight="400"
value=""
label=""
isChecked={isChecked}
onClick={onSelectFile}
name=``
/>} */}
<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}
/>
</>
)}
</>
);
}

3
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/sub-components/ThirdPartyStorageModule.js
View File

@ -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) {

66
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/backup/manual-backup/sub-components/storages/AmazonStorage.js
View File

@ -10,7 +10,7 @@ class AmazonStorage extends React.Component {
const formSettings = {};
// this.namesArray = AmazonSettings.formNames();
// this.namesArray.forEach((elem) => (formSettings[elem] = ""));
// this.namesArray.forEach((elem) => (formSettings[elem] = ""));
for (const [key, value] of Object.entries(AmazonSettings.formNames())) {
formSettings[key] = value;
@ -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}