Web: Settings: Manual/Auto: Splitted third-party storage module into components and separated of logic for repositories.
This commit is contained in:
parent
d9bac1abdf
commit
1c3a37508d
@ -142,7 +142,6 @@ class AutomaticBackup extends React.PureComponent {
|
|||||||
|
|
||||||
.then((selectedSchedule) => {
|
.then((selectedSchedule) => {
|
||||||
if (selectedSchedule) {
|
if (selectedSchedule) {
|
||||||
// debugger;
|
|
||||||
const folderId = selectedSchedule.storageParams.folderId;
|
const folderId = selectedSchedule.storageParams.folderId;
|
||||||
this.setState({
|
this.setState({
|
||||||
defaultSelectedFolder: folderId,
|
defaultSelectedFolder: folderId,
|
||||||
@ -819,15 +818,40 @@ class AutomaticBackup extends React.PureComponent {
|
|||||||
{isShowThirdPartyStorage && (
|
{isShowThirdPartyStorage && (
|
||||||
<>
|
<>
|
||||||
<ThirdPartyStorageModule
|
<ThirdPartyStorageModule
|
||||||
fillStorageFields={this.fillStorageFields}
|
|
||||||
onCancelModuleSettings={this.onCancelModuleSettings}
|
|
||||||
isCopyingToLocal={isCopyingToLocal}
|
isCopyingToLocal={isCopyingToLocal}
|
||||||
isLoadingData={isLoadingData}
|
isLoadingData={isLoadingData}
|
||||||
isDisableOptions={isDisableOptions}
|
isDisableOptions={isDisableOptions}
|
||||||
isChanged={isChanged}
|
weeklySchedule={weeklySchedule}
|
||||||
onSetDisableOptions={this.onSetDisableOptions}
|
monthlySchedule={monthlySchedule}
|
||||||
|
weekOptions={weekOptions}
|
||||||
|
selectedWeekdayOption={selectedWeekdayOption}
|
||||||
|
weekdaysOptions={this.weekdaysOptions}
|
||||||
|
periodOptions={this.periodOptions}
|
||||||
|
lng={this.lng}
|
||||||
|
monthNumberOptionsArray={this.monthNumberOptionsArray}
|
||||||
|
timeOptionsArray={this.timeOptionsArray}
|
||||||
|
maxNumberCopiesArray={this.maxNumberCopiesArray}
|
||||||
|
defaultStorageType={defaultStorageType}
|
||||||
|
defaultSelectedFolder={defaultSelectedFolder}
|
||||||
|
defaultSelectedOption={defaultSelectedOption}
|
||||||
|
defaultHour={defaultHour}
|
||||||
|
defaultMaxCopies={defaultMaxCopies}
|
||||||
|
defaultPeriod={defaultPeriod}
|
||||||
|
defaultDay={defaultDay}
|
||||||
|
defaultSelectedWeekdayOption={defaultSelectedWeekdayOption}
|
||||||
|
defaultWeekly={defaultWeekly}
|
||||||
|
defaultDaily={defaultDaily}
|
||||||
|
defaultMonthly={defaultMonthly}
|
||||||
|
monthlySchedule={monthlySchedule}
|
||||||
|
dailySchedule={dailySchedule}
|
||||||
|
weeklySchedule={weeklySchedule}
|
||||||
|
isCopyingToLocal={isCopyingToLocal}
|
||||||
|
onCancelModuleSettings={this.onCancelModuleSettings}
|
||||||
|
changedDefaultOptions={this.changedDefaultOptions}
|
||||||
|
onSetDefaultOptions={this.onSetDefaultOptions}
|
||||||
|
onSetLoadingData={this.onSetLoadingData}
|
||||||
/>
|
/>
|
||||||
<ScheduleComponent
|
{/* <ScheduleComponent
|
||||||
weeklySchedule={weeklySchedule}
|
weeklySchedule={weeklySchedule}
|
||||||
monthlySchedule={monthlySchedule}
|
monthlySchedule={monthlySchedule}
|
||||||
weekOptions={weekOptions}
|
weekOptions={weekOptions}
|
||||||
@ -849,7 +873,7 @@ class AutomaticBackup extends React.PureComponent {
|
|||||||
}
|
}
|
||||||
onSelectWeedDay={this.onSelectWeedDay}
|
onSelectWeedDay={this.onSelectWeedDay}
|
||||||
onSelectPeriod={this.onSelectPeriod}
|
onSelectPeriod={this.onSelectPeriod}
|
||||||
/>
|
/> */}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</StyledModules>
|
</StyledModules>
|
||||||
|
@ -310,7 +310,7 @@ class ManualBackup extends React.Component {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
const { t, commonThirdPartyList } = this.props;
|
const { t } = this.props;
|
||||||
const {
|
const {
|
||||||
downloadingProgress,
|
downloadingProgress,
|
||||||
link,
|
link,
|
||||||
@ -467,6 +467,7 @@ class ManualBackup extends React.Component {
|
|||||||
{isCheckedThirdPartyStorage && (
|
{isCheckedThirdPartyStorage && (
|
||||||
<ThirdPartyStorageModule
|
<ThirdPartyStorageModule
|
||||||
maxProgress={maxProgress}
|
maxProgress={maxProgress}
|
||||||
|
isLoadingData={isLoadingData}
|
||||||
isManualBackup
|
isManualBackup
|
||||||
setInterval={this.setInterval}
|
setInterval={this.setInterval}
|
||||||
/>
|
/>
|
||||||
|
@ -0,0 +1,323 @@
|
|||||||
|
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";
|
||||||
|
|
||||||
|
class AmazonStorage extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const { t, availableStorage, selectedId, currentStorageId } = this.props;
|
||||||
|
|
||||||
|
this.defaultBucketValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[0].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.defaultForcePathStyleValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[1].value
|
||||||
|
: "";
|
||||||
|
this.defaultRegionValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[2].value
|
||||||
|
: "";
|
||||||
|
this.defaultServiceUrlValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[3].value
|
||||||
|
: "";
|
||||||
|
this.defaultSSEValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[4].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.defaultUseHttpValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[5].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
bucket: this.defaultBucketValue,
|
||||||
|
forcePathStyle: this.defaultForcePathStyleValue,
|
||||||
|
region: this.defaultRegionValue,
|
||||||
|
serviceUrl: this.defaultServiceUrlValue,
|
||||||
|
sse: this.defaultSSEValue,
|
||||||
|
useHttp: this.defaultUseHttpValue,
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._isMounted = true;
|
||||||
|
}
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (event) => {
|
||||||
|
const { target } = event;
|
||||||
|
const value = target.value;
|
||||||
|
const name = target.name;
|
||||||
|
|
||||||
|
this.setState({ [name]: value, isChangedInput: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
onSaveSettings = () => {
|
||||||
|
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.defaultBucketValue = bucket;
|
||||||
|
|
||||||
|
this.defaultForcePathStyleValue = forcePathStyle;
|
||||||
|
this.defaultRegionValue = region;
|
||||||
|
this.defaultServiceUrlValue = serviceUrl;
|
||||||
|
this.defaultSSEValue = sse;
|
||||||
|
|
||||||
|
this.defaultUseHttpValue = useHttp;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
});
|
||||||
|
fillInputValueArray(inputNumber, valuesArray);
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelSettings = () => {
|
||||||
|
const { onCancelSettings } = this.props;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
bucket: this.defaultBucketValue,
|
||||||
|
forcePathStyle: this.defaultForcePathStyleValue,
|
||||||
|
region: this.defaultRegionValue,
|
||||||
|
serviceUrl: this.defaultServiceUrlValue,
|
||||||
|
sse: this.defaultSSEValue,
|
||||||
|
useHttp: this.defaultUseHttpValue,
|
||||||
|
});
|
||||||
|
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,
|
||||||
|
isError,
|
||||||
|
bucket,
|
||||||
|
forcePathStyle,
|
||||||
|
region,
|
||||||
|
serviceUrl,
|
||||||
|
sse,
|
||||||
|
useHttp,
|
||||||
|
} = this.state;
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
isLoadingData,
|
||||||
|
isLoading,
|
||||||
|
isManualBackup,
|
||||||
|
maxProgress,
|
||||||
|
isCopyingToLocal,
|
||||||
|
isChanged,
|
||||||
|
} = 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}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default withTranslation("Settings")(AmazonStorage);
|
@ -0,0 +1,174 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
import Button from "@appserver/components/button";
|
||||||
|
|
||||||
|
import { startBackup } from "@appserver/common/api/portal";
|
||||||
|
import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
|
||||||
|
import ScheduleComponent from "../sub-components-automatic-backup/scheduleComponent";
|
||||||
|
import TextInput from "@appserver/components/text-input";
|
||||||
|
import {
|
||||||
|
createBackupSchedule,
|
||||||
|
getBackupSchedule,
|
||||||
|
} from "@appserver/common/api/portal";
|
||||||
|
|
||||||
|
import toastr from "@appserver/components/toast/toastr";
|
||||||
|
import { saveToSessionStorage, getFromSessionStorage } from "../.././../utils";
|
||||||
|
|
||||||
|
class GoogleCloudStorage extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||||
|
|
||||||
|
this.defaultBucketValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[0].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
bucket: this.defaultBucketValue,
|
||||||
|
isError: false,
|
||||||
|
isChangedInput: false,
|
||||||
|
};
|
||||||
|
this.isDisabled =
|
||||||
|
availableStorage[selectedId] && !availableStorage[selectedId].isSet;
|
||||||
|
|
||||||
|
this.placeholder =
|
||||||
|
availableStorage[selectedId] &&
|
||||||
|
availableStorage[selectedId].properties[0].title;
|
||||||
|
this._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._isMounted = true;
|
||||||
|
}
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (event) => {
|
||||||
|
const { target } = event;
|
||||||
|
const value = target.value;
|
||||||
|
const name = target.name;
|
||||||
|
|
||||||
|
this.setState({ [name]: value, isChangedInput: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
isInvalidForm = () => {
|
||||||
|
const { bucket } = this.state;
|
||||||
|
if (bucket) return false;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isError: true,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
onSaveSettings = () => {
|
||||||
|
const { fillInputValueArray } = this.props;
|
||||||
|
const { bucket } = this.state;
|
||||||
|
|
||||||
|
if (this.isInvalidForm()) return;
|
||||||
|
|
||||||
|
const inputNumber = 1;
|
||||||
|
const valuesArray = [bucket];
|
||||||
|
|
||||||
|
this.defaultBucketValue = bucket;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
});
|
||||||
|
fillInputValueArray(inputNumber, valuesArray);
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelSettings = () => {
|
||||||
|
const { onCancelSettings } = this.props;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
bucket: this.defaultBucketValue,
|
||||||
|
});
|
||||||
|
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
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default withTranslation("Settings")(GoogleCloudStorage);
|
@ -0,0 +1,222 @@
|
|||||||
|
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";
|
||||||
|
|
||||||
|
class RackspaceStorage extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||||
|
|
||||||
|
this.defaultPrivateValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[0].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.defaultPublicValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[1].value
|
||||||
|
: "";
|
||||||
|
this.defaultRegion =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[2].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
private_container: this.defaultPrivateValue,
|
||||||
|
public_container: this.defaultPublicValue,
|
||||||
|
region: this.defaultRegion,
|
||||||
|
isError: false,
|
||||||
|
isChangedInput: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._isMounted = true;
|
||||||
|
}
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (event) => {
|
||||||
|
const { target } = event;
|
||||||
|
const value = target.value;
|
||||||
|
const name = target.name;
|
||||||
|
|
||||||
|
this.setState({ [name]: value, isChangedInput: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
isInvalidForm = () => {
|
||||||
|
const { private_container, public_container, region } = this.state;
|
||||||
|
if (private_container || public_container || region) return false;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isError: true,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
onSaveSettings = () => {
|
||||||
|
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.defaultPrivateValue = private_container;
|
||||||
|
this.defaultPublicValue = public_container;
|
||||||
|
this.defaultRegion = region;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
});
|
||||||
|
fillInputValueArray(inputNumber, valuesArray);
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelSettings = () => {
|
||||||
|
const { onCancelSettings } = this.props;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
private_container: this.defaultPrivateValue,
|
||||||
|
public_container: this.defaultPublicValue,
|
||||||
|
region: this.defaultRegion,
|
||||||
|
});
|
||||||
|
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,
|
||||||
|
public_container,
|
||||||
|
region,
|
||||||
|
isChangedInput,
|
||||||
|
isError,
|
||||||
|
} = this.state;
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
isLoadingData,
|
||||||
|
isLoading,
|
||||||
|
isManualBackup,
|
||||||
|
maxProgress,
|
||||||
|
isCopyingToLocal,
|
||||||
|
isChanged,
|
||||||
|
} = 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}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default withTranslation("Settings")(RackspaceStorage);
|
@ -0,0 +1,199 @@
|
|||||||
|
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";
|
||||||
|
|
||||||
|
class SelectelStorage extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
const { availableStorage, selectedId, currentStorageId } = this.props;
|
||||||
|
|
||||||
|
this.defaultPrivateValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[0].value
|
||||||
|
: "";
|
||||||
|
this.defaultPublicValue =
|
||||||
|
currentStorageId && availableStorage && selectedId === currentStorageId
|
||||||
|
? availableStorage[currentStorageId].properties[1].value
|
||||||
|
: "";
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
private_container: this.defaultPrivateValue,
|
||||||
|
public_container: this.defaultPublicValue,
|
||||||
|
isError: false,
|
||||||
|
isChangedInput: 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._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this._isMounted = true;
|
||||||
|
}
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._isMounted = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange = (event) => {
|
||||||
|
const { target } = event;
|
||||||
|
const value = target.value;
|
||||||
|
const name = target.name;
|
||||||
|
|
||||||
|
this.setState({ [name]: value, isChangedInput: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
isInvalidForm = () => {
|
||||||
|
const { private_container, public_container } = this.state;
|
||||||
|
if (private_container || public_container) return false;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isError: true,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
onSaveSettings = () => {
|
||||||
|
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.defaultPrivateValue = private_container;
|
||||||
|
this.defaultPublicValue = public_container;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
});
|
||||||
|
fillInputValueArray(inputNumber, valuesArray);
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelSettings = () => {
|
||||||
|
const { onCancelSettings } = this.props;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isChangedInput: false,
|
||||||
|
isError: false,
|
||||||
|
private_container: this.defaultPrivateValue,
|
||||||
|
public_container: this.defaultPublicValue,
|
||||||
|
});
|
||||||
|
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,
|
||||||
|
public_container,
|
||||||
|
isChangedInput,
|
||||||
|
isError,
|
||||||
|
} = this.state;
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
isLoadingData,
|
||||||
|
isLoading,
|
||||||
|
isManualBackup,
|
||||||
|
maxProgress,
|
||||||
|
isCopyingToLocal,
|
||||||
|
isChanged,
|
||||||
|
} = 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}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!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>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default withTranslation("Settings")(SelectelStorage);
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user