Web: Settings: Manual/Auto Backup: Splitted third-party storage module for manual and auto modules.
This commit is contained in:
parent
948ee10020
commit
28c5325137
@ -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;
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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,8 +243,7 @@ class AmazonStorage extends React.Component {
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
{(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
@ -287,34 +253,9 @@ class AmazonStorage extends React.Component {
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.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>
|
||||
)}
|
||||
</>
|
||||
);
|
@ -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,8 +105,7 @@ class GoogleCloudStorage extends React.Component {
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
{(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
@ -134,28 +116,6 @@ class GoogleCloudStorage extends React.Component {
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
);
|
@ -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,8 +158,7 @@ class RackspaceStorage extends React.Component {
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
{(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
@ -186,34 +168,9 @@ class RackspaceStorage extends React.Component {
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.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>
|
||||
)}
|
||||
</>
|
||||
);
|
@ -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,8 +135,7 @@ class SelectelStorage extends React.Component {
|
||||
tabIndex={1}
|
||||
/>
|
||||
|
||||
{!isManualBackup ? (
|
||||
(isChanged || isChangedInput) && (
|
||||
{(isChanged || isChangedInput) && (
|
||||
<SaveCancelButtons
|
||||
className="team-template_buttons"
|
||||
onSaveClick={this.onSaveSettings}
|
||||
@ -163,34 +145,9 @@ class SelectelStorage extends React.Component {
|
||||
saveButtonLabel={t("SaveButton")}
|
||||
cancelButtonLabel={t("CancelButton")}
|
||||
isDisabled={
|
||||
isCopyingToLocal ||
|
||||
isLoadingData ||
|
||||
isLoading ||
|
||||
this.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>
|
||||
)}
|
||||
</>
|
||||
);
|
@ -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,7 +838,6 @@ class ThirdPartyStorageModule extends React.PureComponent {
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isManualBackup && (
|
||||
<ScheduleComponent
|
||||
weeklySchedule={weeklySchedule}
|
||||
monthlySchedule={monthlySchedule}
|
||||
@ -873,14 +859,11 @@ class ThirdPartyStorageModule extends React.PureComponent {
|
||||
onSelectWeekDay={this.onSelectWeekDay}
|
||||
onSelectPeriod={this.onSelectPeriod}
|
||||
/>
|
||||
)}
|
||||
</StyledComponent>
|
||||
);
|
||||
}
|
||||
}
|
||||
ThirdPartyStorageModule.defaultProps = {
|
||||
isManualBackup: false,
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { helpUrlCreatingBackup } = auth.settingsStore;
|
||||
|
@ -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);
|
@ -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);
|
@ -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);
|
@ -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);
|
@ -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)));
|
Loading…
Reference in New Issue
Block a user