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

Web: Settings: Manual/Auto Backup: Splitted third-party storage module for manual and auto modules.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-06-02 13:19:42 +03:00
parent 948ee10020
commit 28c5325137
12 changed files with 912 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ import {
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
import toastr from "@appserver/components/toast/toastr";
import SelectedFolder from "files/SelectedFolder";
import ThirdPartyStorageModule from "./sub-components/thirdPartyStorageModule";
import Loader from "@appserver/components/loader";
import { AppServerConfig } from "@appserver/common/constants";
import { combineUrl } from "@appserver/common/utils";
@ -25,6 +25,7 @@ import FloatingButton from "@appserver/common/components/FloatingButton";
import { StyledModules, StyledComponent } from "./styled-backup";
import ThirdPartyModule from "./sub-components-automatic-backup/thirdPartyModule";
import DocumentsModule from "./sub-components-automatic-backup/documentsModule";
import ThirdPartyStorageModule from "./sub-components-automatic-backup/thirdPartyStorageModule";
const { proxyURL } = AppServerConfig;

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

@ -7,7 +7,8 @@ import { getBackupProgress, startBackup } from "@appserver/common/api/portal";
import toastr from "@appserver/components/toast/toastr";
import ThirdPartyModule from "./sub-components-manual-backup/thirdPartyModule";
import DocumentsModule from "./sub-components-manual-backup/documentsModule";
import ThirdPartyStorageModule from "./sub-components/thirdPartyStorageModule";
import ThirdPartyStorageModule from "./sub-components-manual-backup/thirdPartyStorageModule";
import FloatingButton from "@appserver/common/components/FloatingButton";
import RadioButton from "@appserver/components/radio-button";
import { StyledModules, StyledComponent } from "./styled-backup";

85
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/amazonStorage.js → web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/amazonStorage.js
View File

@ -1,6 +1,5 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
@ -156,36 +155,6 @@ class AmazonStorage extends React.Component {
onCancelSettings();
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const {
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
} = this.state;
if (this.isInvalidForm()) return;
const valuesArray = [
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
];
const inputNumber = valuesArray.length;
this.setState({
isChangedInput: false,
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const {
isChangedInput,
@ -201,8 +170,6 @@ class AmazonStorage extends React.Component {
t,
isLoadingData,
isLoading,
isManualBackup,
maxProgress,
isCopyingToLocal,
isChanged,
} = this.props;
@ -276,45 +243,19 @@ class AmazonStorage extends React.Component {
tabIndex={1}
/>
{!isManualBackup ? (
(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal ||
isLoadingData ||
isLoading ||
this.isDisabled
}
/>
)
) : (
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
{(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal || isLoadingData || isLoading || this.isDisabled
}
/>
)}
</>
);

64
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/googleCloudStorage.js → web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/googleCloudStorage.js
View File

@ -1,7 +1,6 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
import TextInput from "@appserver/components/text-input";
@ -81,33 +80,17 @@ class GoogleCloudStorage extends React.Component {
});
onCancelSettings();
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { bucket } = this.state;
if (this.isInvalidForm()) return;
const inputNumber = 1;
const valuesArray = [bucket];
this.setState({
isChangedInput: false,
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const { bucket, isChangedInput, isError } = this.state;
const {
t,
isLoadingData,
isLoading,
isManualBackup,
maxProgress,
isCopyingToLocal,
isChanged,
} = this.props;
console.log("isLoadingData", isLoadingData);
return (
<>
<TextInput
@ -122,40 +105,17 @@ class GoogleCloudStorage extends React.Component {
tabIndex={1}
/>
{!isManualBackup ? (
(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={isCopyingToLocal || isLoadingData || isLoading}
/>
)
) : (
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
{(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={isCopyingToLocal || isLoadingData || isLoading}
/>
)}
</>
);

71
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/rackspaceStorage.js → web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/rackspaceStorage.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
@ -105,22 +105,7 @@ class RackspaceStorage extends React.Component {
});
onCancelSettings();
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { private_container, public_container, region } = this.state;
if (this.isInvalidForm()) return;
const valuesArray = [private_container, public_container, region];
const inputNumber = valuesArray.length;
this.setState({
isChangedInput: false,
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const {
private_container,
@ -133,8 +118,6 @@ class RackspaceStorage extends React.Component {
t,
isLoadingData,
isLoading,
isManualBackup,
maxProgress,
isCopyingToLocal,
isChanged,
} = this.props;
@ -175,45 +158,19 @@ class RackspaceStorage extends React.Component {
tabIndex={1}
/>
{!isManualBackup ? (
(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal ||
isLoadingData ||
isLoading ||
this.isDisabled
}
/>
)
) : (
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
{(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal || isLoadingData || isLoading || this.isDisabled
}
/>
)}
</>
);

73
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/selectelStorage.js → web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/selectelStorage.js
View File

@ -1,6 +1,6 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
@ -94,22 +94,6 @@ class SelectelStorage extends React.Component {
onCancelSettings();
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { private_container, public_container } = this.state;
if (this.isInvalidForm()) return;
const valuesArray = [private_container, public_container];
const inputNumber = valuesArray.length;
this.setState({
isChangedInput: false,
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const {
private_container,
@ -121,8 +105,7 @@ class SelectelStorage extends React.Component {
t,
isLoadingData,
isLoading,
isManualBackup,
maxProgress,
isCopyingToLocal,
isChanged,
} = this.props;
@ -152,45 +135,19 @@ class SelectelStorage extends React.Component {
tabIndex={1}
/>
{!isManualBackup ? (
(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal ||
isLoadingData ||
isLoading ||
this.isDisabled
}
/>
)
) : (
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
{(isChanged || isChangedInput) && (
<SaveCancelButtons
className="team-template_buttons"
onSaveClick={this.onSaveSettings}
onCancelClick={this.onCancelSettings}
showReminder={false}
reminderTest={t("YouHaveUnsavedChanges")}
saveButtonLabel={t("SaveButton")}
cancelButtonLabel={t("CancelButton")}
isDisabled={
isCopyingToLocal || isLoadingData || isLoading || this.isDisabled
}
/>
)}
</>
);

65
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components/thirdPartyStorageModule.js → web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/thirdPartyStorageModule.js
View File

@ -105,13 +105,6 @@ class ThirdPartyStorageModule extends React.PureComponent {
selectedId: "",
isLoading: false,
isChanged: false,
isError: false,
input_1: "",
input_2: "",
input_3: "",
input_4: "",
input_5: "",
input_6: "",
monthlySchedule: monthOption,
dailySchedule: false,
@ -159,11 +152,6 @@ class ThirdPartyStorageModule extends React.PureComponent {
this._isMounted = false;
}
getOptions = (storageBackup) => {
const {
isManualBackup,
onSetDisableOptions,
isDisableOptions,
} = this.props;
this.setState({
isLoading: true,
});
@ -192,7 +180,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
//debugger;
console.log("availableStorage", availableStorage);
if (!isManualBackup && storageBackup[item].current) {
if (storageBackup[item].current) {
this.isSetDefaultIdStorage = true;
this.setState({
@ -261,7 +249,6 @@ class ThirdPartyStorageModule extends React.PureComponent {
};
fillInputValueArray = (inputNumber, valuesArray) => {
const { isManualBackup } = this.props;
const { selectedId, availableStorage } = this.state;
let obj = {};
inputValueArray = [];
@ -275,7 +262,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
};
inputValueArray.push(obj);
}
isManualBackup ? this.onMakeCopy() : this.onSaveModuleSettings();
this.onSaveModuleSettings();
};
onSelectPeriod = (options) => {
@ -851,36 +838,32 @@ class ThirdPartyStorageModule extends React.PureComponent {
/>
)}
{!isManualBackup && (
<ScheduleComponent
weeklySchedule={weeklySchedule}
monthlySchedule={monthlySchedule}
weekOptions={weekOptions}
selectedOption={selectedOption}
selectedWeekdayOption={selectedWeekdayOption}
selectedTimeOption={selectedTimeOption}
selectedMonthOption={selectedMonthOption}
selectedMaxCopies={selectedMaxCopies}
isLoadingData={isLoadingData}
periodOptions={periodOptions}
monthNumberOptionsArray={monthNumberOptionsArray}
timeOptionsArray={timeOptionsArray}
maxNumberCopiesArray={maxNumberCopiesArray}
onSelectMaxCopies={this.onSelectMaxCopies}
onSelectMonthNumberAndTimeOptions={
this.onSelectMonthNumberAndTimeOptions
}
onSelectWeekDay={this.onSelectWeekDay}
onSelectPeriod={this.onSelectPeriod}
/>
)}
<ScheduleComponent
weeklySchedule={weeklySchedule}
monthlySchedule={monthlySchedule}
weekOptions={weekOptions}
selectedOption={selectedOption}
selectedWeekdayOption={selectedWeekdayOption}
selectedTimeOption={selectedTimeOption}
selectedMonthOption={selectedMonthOption}
selectedMaxCopies={selectedMaxCopies}
isLoadingData={isLoadingData}
periodOptions={periodOptions}
monthNumberOptionsArray={monthNumberOptionsArray}
timeOptionsArray={timeOptionsArray}
maxNumberCopiesArray={maxNumberCopiesArray}
onSelectMaxCopies={this.onSelectMaxCopies}
onSelectMonthNumberAndTimeOptions={
this.onSelectMonthNumberAndTimeOptions
}
onSelectWeekDay={this.onSelectWeekDay}
onSelectPeriod={this.onSelectPeriod}
/>
</StyledComponent>
);
}
}
ThirdPartyStorageModule.defaultProps = {
isManualBackup: false,
};
export default inject(({ auth }) => {
const { helpUrlCreatingBackup } = auth.settingsStore;

206
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/amazonStorage.js Normal file
View File

@ -0,0 +1,206 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import { saveToSessionStorage } from "../../../utils";
class AmazonStorage extends React.Component {
constructor(props) {
super(props);
const { t, availableStorage, selectedId } = this.props;
this.state = {
bucket: "",
forcePathStyle: "",
region: "",
serviceUrl: "",
sse: "",
useHttp: "",
isError: false,
isChangedInput: false,
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
this.defaultBucketPlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[0].title;
this.defaultForcePathStylePlaceholder = t("ForcePathStyle");
this.defaultRegionPlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[2].title;
this.defaultServiceUrlPlaceholder = t("ServiceUrl");
this.defaultSSEPlaceholder = t("SSE");
this.defaultUseHttpPlaceholder = t("UseHttp");
this._isMounted = false;
}
onChange = (event) => {
const { target } = event;
const value = target.value;
const name = target.name;
this.setState({ [name]: value });
};
isInvalidForm = () => {
const {
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
} = this.state;
if (bucket || forcePathStyle || region || serviceUrl || sse || useHttp)
return false;
this.setState({
isError: true,
});
return true;
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const {
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
} = this.state;
if (this.isInvalidForm()) return;
saveToSessionStorage("selectedManualStorageType", "thirdPartyStorage");
const valuesArray = [
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
];
const inputNumber = valuesArray.length;
this.setState({
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const {
isError,
bucket,
forcePathStyle,
region,
serviceUrl,
sse,
useHttp,
} = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
return (
<>
<TextInput
name="bucket"
className="backup_text-input"
scale={true}
value={bucket}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultBucketPlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="region"
className="backup_text-input"
scale={true}
value={region}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultRegionPlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="serviceUrl"
className="backup_text-input"
scale={true}
value={serviceUrl}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultServiceUrlPlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="forcePathStyle"
className="backup_text-input"
scale={true}
value={forcePathStyle}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultForcePathStylePlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="useHttp"
className="backup_text-input"
scale={true}
value={useHttp}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultUseHttpPlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="sse"
className="backup_text-input"
scale={true}
value={sse}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.defaultSSEPlaceholder || ""}
tabIndex={1}
/>
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
</>
);
}
}
export default withTranslation("Settings")(AmazonStorage);

103
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/googleCloudStorage.js Normal file
View File

@ -0,0 +1,103 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import { saveToSessionStorage } from "../../../utils";
class GoogleCloudStorage extends React.Component {
constructor(props) {
super(props);
const { availableStorage, selectedId } = this.props;
this.state = {
bucket: "",
isError: false,
isChangedInput: false,
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
this.placeholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[0].title;
this._isMounted = false;
}
onChange = (event) => {
const { target } = event;
const value = target.value;
const name = target.name;
this.setState({ [name]: value });
};
isInvalidForm = () => {
const { bucket } = this.state;
if (bucket) return false;
this.setState({
isError: true,
});
return true;
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { bucket } = this.state;
if (this.isInvalidForm()) return;
saveToSessionStorage("selectedManualStorageType", "thirdPartyStorage");
const inputNumber = 1;
const valuesArray = [bucket];
this.setState({
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const { bucket, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
return (
<>
<TextInput
name="bucket"
className="backup_text-input"
scale={true}
value={bucket}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.placeholder}
tabIndex={1}
/>
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
</>
);
}
}
export default withTranslation("Settings")(GoogleCloudStorage);

134
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/rackspaceStorage.js Normal file
View File

@ -0,0 +1,134 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
class RackspaceStorage extends React.Component {
constructor(props) {
super(props);
const { availableStorage, selectedId } = this.props;
this.state = {
private_container: "",
public_container: "",
region: "",
isError: false,
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
this.privatePlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[0].title;
this.publicPlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[1].title;
this.regionPlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[2].title;
this._isMounted = false;
}
onChange = (event) => {
const { target } = event;
const value = target.value;
const name = target.name;
this.setState({ [name]: value });
};
isInvalidForm = () => {
const { private_container, public_container, region } = this.state;
if (private_container || public_container || region) return false;
this.setState({
isError: true,
});
return true;
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { private_container, public_container, region } = this.state;
if (this.isInvalidForm()) return;
saveToSessionStorage("selectedManualStorageType", "thirdPartyStorage");
const valuesArray = [private_container, public_container, region];
const inputNumber = valuesArray.length;
this.setState({
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const { private_container, public_container, region, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
return (
<>
<TextInput
name="private_container"
className="backup_text-input"
scale={true}
value={private_container}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.privatePlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="public_container"
className="backup_text-input"
scale={true}
value={public_container}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.publicPlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="region"
className="backup_text-input"
scale={true}
value={region}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.regionPlaceholder || ""}
tabIndex={1}
/>
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
</>
);
}
}
export default withTranslation("Settings")(RackspaceStorage);

120
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/selectelStorage.js Normal file
View File

@ -0,0 +1,120 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import TextInput from "@appserver/components/text-input";
import { saveToSessionStorage } from "../../../utils";
class SelectelStorage extends React.Component {
constructor(props) {
super(props);
const { availableStorage, selectedId } = this.props;
this.state = {
private_container: "",
public_container: "",
isError: false,
};
this.isDisabled =
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
this.privatePlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[0].title;
this.publicPlaceholder =
availableStorage[selectedId] &&
availableStorage[selectedId].properties[1].title;
}
onChange = (event) => {
const { target } = event;
const value = target.value;
const name = target.name;
this.setState({ [name]: value });
};
isInvalidForm = () => {
const { private_container, public_container } = this.state;
if (private_container || public_container) return false;
this.setState({
isError: true,
});
return true;
};
onMakeCopy = () => {
const { fillInputValueArray } = this.props;
const { private_container, public_container } = this.state;
if (this.isInvalidForm()) return;
saveToSessionStorage("selectedManualStorageType", "thirdPartyStorage");
const valuesArray = [private_container, public_container];
const inputNumber = valuesArray.length;
this.setState({
isChangedInput: false,
isError: false,
});
fillInputValueArray(inputNumber, valuesArray);
};
render() {
const { private_container, public_container, isError } = this.state;
const { t, isLoadingData, isLoading, maxProgress } = this.props;
return (
<>
<TextInput
name="private_container"
className="backup_text-input"
scale={true}
value={private_container}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.privatePlaceholder || ""}
tabIndex={1}
/>
<TextInput
name="public_container"
className="backup_text-input"
scale={true}
value={public_container}
hasError={isError}
onChange={this.onChange}
isDisabled={isLoadingData || isLoading || this.isDisabled}
placeholder={this.publicPlaceholder || ""}
tabIndex={1}
/>
<div className="manual-backup_buttons">
<Button
label={t("MakeCopy")}
onClick={this.onMakeCopy}
primary
isDisabled={!maxProgress || this.isDisabled}
size="medium"
tabIndex={10}
/>
{!maxProgress && (
<Button
label={t("Copying")}
onClick={() => console.log("click")}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
tabIndex={11}
/>
)}
</div>
</>
);
}
}
export default withTranslation("Settings")(SelectelStorage);

267
web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-manual-backup/thirdPartyStorageModule.js Normal file
View File

@ -0,0 +1,267 @@
import React from "react";
import styled from "styled-components";
import { withTranslation } from "react-i18next";
import { inject, observer } from "mobx-react";
import Box from "@appserver/components/box";
import Link from "@appserver/components/link";
import ComboBox from "@appserver/components/combobox";
import { getBackupStorage } from "@appserver/common/api/settings";
import { startBackup } from "@appserver/common/api/portal";
import GoogleCloudStorage from "./googleCloudStorage";
import RackspaceStorage from "./rackspaceStorage";
import SelectelStorage from "./selectelStorage";
import AmazonStorage from "./amazonStorage";
const StyledComponent = styled.div`
.backup_combo {
margin-top: 16px;
width: 100%;
max-width: 820px;
}
.backup_text-input {
margin: 10px 0;
width: 100%;
max-width: 820px;
}
`;
let googleStorageId = "GoogleCloud";
let inputValueArray;
class ThirdPartyStorageModule extends React.PureComponent {
constructor(props) {
super(props);
this.isSetDefaultIdStorage = false;
this.state = {
availableOptions: [],
availableStorage: {},
selectedStorage: "",
selectedId: "",
isLoading: false,
};
this.isFirstSet = false;
this.firstSetId = "";
this._isMounted = false;
}
componentDidMount() {
this._isMounted = true;
const { onSetLoadingData } = this.props;
onSetLoadingData && onSetLoadingData(true);
this.setState(
{
isLoading: true,
},
function () {
getBackupStorage()
.then((storageBackup) => this.getOptions(storageBackup))
.finally(() => {
onSetLoadingData && onSetLoadingData(false);
this.setState({ isLoading: false });
});
}
);
}
componentWillUnmount() {
this._isMounted = false;
}
getOptions = (storageBackup) => {
this.setState({
isLoading: true,
});
let options = [];
let availableStorage = {};
//debugger;
for (let item = 0; item < storageBackup.length; item++) {
// debugger;
let obj = {
[storageBackup[item].id]: {
isSet: storageBackup[item].isSet,
properties: storageBackup[item].properties,
title: storageBackup[item].title,
id: storageBackup[item].id,
},
};
let titleObj = {
key: storageBackup[item].id,
label: storageBackup[item].title,
disabled: false,
};
options.push(titleObj);
availableStorage = { ...availableStorage, ...obj };
if (!this.isFirstSet && storageBackup[item].isSet) {
this.isFirstSet = true;
this.firstSetId = storageBackup[item].id;
}
}
if (!this.isFirstSet) {
this.setState({
selectedStorage: availableStorage[googleStorageId].title,
selectedId: availableStorage[googleStorageId].id,
});
}
if (this.isFirstSet) {
this.setState({
selectedStorage: availableStorage[this.firstSetId].title,
selectedId: availableStorage[this.firstSetId].id,
});
}
this.setState({
availableOptions: options,
availableStorage: availableStorage,
isLoading: false,
});
};
onSelect = (option) => {
const selectedStorageId = option.key;
const { availableStorage } = this.state;
this.setState({
selectedStorage: availableStorage[selectedStorageId].title,
selectedId: availableStorage[selectedStorageId].id,
});
};
fillInputValueArray = (inputNumber, valuesArray) => {
const { selectedId, availableStorage } = this.state;
let obj = {};
inputValueArray = [];
const selectedStorage = availableStorage[selectedId];
for (let i = 1; i <= inputNumber; i++) {
obj = {
key: selectedStorage.properties[i - 1].name,
value: valuesArray[i - 1],
};
inputValueArray.push(obj);
}
this.onMakeCopy();
};
onMakeCopy = () => {
const { setInterval } = this.props;
const { selectedId } = this.state;
let storageParams = [
{
key: "module",
value: selectedId,
},
];
let obj = {};
for (let i = 0; i < inputValueArray.length; i++) {
obj = {
key: inputValueArray[i].key,
value: inputValueArray[i].value,
};
storageParams.push(obj);
}
startBackup("5", storageParams);
setInterval();
};
render() {
const { t, helpUrlCreatingBackup, isLoadingData, maxProgress } = this.props;
const {
availableOptions,
availableStorage,
selectedStorage,
isLoading,
selectedId,
} = this.state;
return (
<StyledComponent>
<Box marginProp="16px 0 16px 0">
<Link
color="#316DAA"
target="_blank"
isHovered={true}
href={helpUrlCreatingBackup}
>
{t("LearnMore")}
</Link>
</Box>
<ComboBox
options={availableOptions}
selectedOption={{ key: 0, label: selectedStorage }}
onSelect={this.onSelect}
isDisabled={isLoadingData || isLoading}
noBorder={false}
scaled={true}
scaledOptions={true}
dropDownMaxHeight={300}
className="backup_combo"
/>
{selectedId === "GoogleCloud" && !isLoading && (
<GoogleCloudStorage
isLoadingData={isLoadingData}
isLoading={isLoading}
availableStorage={availableStorage}
maxProgress={maxProgress}
selectedId={selectedId}
fillInputValueArray={this.fillInputValueArray}
/>
)}
{selectedId === "Rackspace" && !isLoading && (
<RackspaceStorage
isLoadingData={isLoadingData}
isLoading={isLoading}
availableStorage={availableStorage}
maxProgress={maxProgress}
selectedId={selectedId}
fillInputValueArray={this.fillInputValueArray}
/>
)}
{selectedId === "Selectel" && !isLoading && (
<SelectelStorage
isLoadingData={isLoadingData}
isLoading={isLoading}
availableStorage={availableStorage}
maxProgress={maxProgress}
selectedId={selectedId}
fillInputValueArray={this.fillInputValueArray}
/>
)}
{selectedId === "S3" && !isLoading && (
<AmazonStorage
isLoadingData={isLoadingData}
isLoading={isLoading}
availableStorage={availableStorage}
maxProgress={maxProgress}
selectedId={selectedId}
fillInputValueArray={this.fillInputValueArray}
/>
)}
</StyledComponent>
);
}
}
export default inject(({ auth }) => {
const { helpUrlCreatingBackup } = auth.settingsStore;
return {
helpUrlCreatingBackup,
};
})(withTranslation("Settings")(observer(ThirdPartyStorageModule)));