Web: Settings: Backup: Added third party storage component.
This commit is contained in:
parent
2ecf3c8f9f
commit
6aca6e9944
@ -250,3 +250,11 @@ export function getCommonThirdPartyList() {
|
|||||||
};
|
};
|
||||||
return request(options);
|
return request(options);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getBackupStorage() {
|
||||||
|
const options = {
|
||||||
|
method: "get",
|
||||||
|
url: "/settings/storage/backup",
|
||||||
|
};
|
||||||
|
return request(options);
|
||||||
|
}
|
||||||
|
@ -7,13 +7,12 @@ import Button from "@appserver/components/button";
|
|||||||
import Checkbox from "@appserver/components/checkbox";
|
import Checkbox from "@appserver/components/checkbox";
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
|
|
||||||
import FileInputWithFolderPath from "@appserver/components/file-input-with-folder-path";
|
|
||||||
import ThirdPartyModule from "./sub-components/thirdPartyModule";
|
|
||||||
import OperationsDialog from "files/OperationsDialog";
|
|
||||||
import { getBackupProgress, startBackup } from "@appserver/common/api/portal";
|
import { getBackupProgress, startBackup } from "@appserver/common/api/portal";
|
||||||
import toastr from "@appserver/components/toast/toastr";
|
import toastr from "@appserver/components/toast/toastr";
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
import ThirdPartyModule from "./sub-components/thirdPartyModule";
|
||||||
import DocumentsModule from "./sub-components/documentsModule";
|
import DocumentsModule from "./sub-components/documentsModule";
|
||||||
|
import ThirdPartyStorageModule from "./sub-components/thirdPartyStorageModule";
|
||||||
|
|
||||||
const StyledComponent = styled.div`
|
const StyledComponent = styled.div`
|
||||||
${commonSettingsStyles}
|
${commonSettingsStyles}
|
||||||
@ -223,38 +222,7 @@ class ManualBackup extends React.Component {
|
|||||||
setInterval={this.setInterval}
|
setInterval={this.setInterval}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="category-item-wrapper temporary-storage">
|
<ThirdPartyStorageModule maxProgress={maxProgress} />
|
||||||
<div className="category-item-heading">
|
|
||||||
<Text className="inherit-title-link header">
|
|
||||||
{t("ThirdPartyStorage")}
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
<Text className="category-item-description">
|
|
||||||
{t("ThirdPartyStorageDescription")}
|
|
||||||
</Text>
|
|
||||||
<Text className="category-item-description note_description">
|
|
||||||
{t("ThirdPartyStorageNoteDescription")}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{/* <div className="backup-include_mail">
|
|
||||||
<Checkbox
|
|
||||||
name={"backupMailThirdPartyStorage"}
|
|
||||||
isChecked={backupMailThirdPartyStorage}
|
|
||||||
label={t("IncludeMail")}
|
|
||||||
onChange={this.onClickCheckbox}
|
|
||||||
/>
|
|
||||||
</div> */}
|
|
||||||
<div className="manual-backup_buttons">
|
|
||||||
<Button
|
|
||||||
label={t("MakeCopy")}
|
|
||||||
onClick={() => console.log("click")}
|
|
||||||
primary
|
|
||||||
isDisabled={!maxProgress}
|
|
||||||
size="medium"
|
|
||||||
tabIndex={10}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</StyledComponent>
|
</StyledComponent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -0,0 +1,129 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { withTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
import Button from "@appserver/components/button";
|
||||||
|
import Text from "@appserver/components/text";
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
class ThirdPartyStorageModule extends React.PureComponent {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
availableOptions: [],
|
||||||
|
availableStorage: [],
|
||||||
|
selectedOption: "",
|
||||||
|
isLoading: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
componentDidMount() {
|
||||||
|
this.setState(
|
||||||
|
{
|
||||||
|
isLoading: true,
|
||||||
|
},
|
||||||
|
function () {
|
||||||
|
getBackupStorage()
|
||||||
|
.then((storageBackup) => this.getOptions(storageBackup))
|
||||||
|
.finally(() => this.setState({ isLoading: false }));
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getOptions = (storageBackup) => {
|
||||||
|
let options = [];
|
||||||
|
let availableStorage = [];
|
||||||
|
//debugger;
|
||||||
|
for (let item = 0; item < storageBackup.length; item++) {
|
||||||
|
let obj = {
|
||||||
|
[storageBackup[item].title]: storageBackup[item].isSet,
|
||||||
|
};
|
||||||
|
let titleObj = {
|
||||||
|
key: item,
|
||||||
|
label: storageBackup[item].title,
|
||||||
|
disabled: false,
|
||||||
|
};
|
||||||
|
options.push(titleObj);
|
||||||
|
availableStorage.push(obj);
|
||||||
|
if (storageBackup[item].id === "GoogleCloud") {
|
||||||
|
this.setState({
|
||||||
|
selectedOption: storageBackup[item].title,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
availableOptions: options,
|
||||||
|
availableStorage: availableStorage,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { maxProgress, t, helpUrlCreatingBackup, storageBackup } = this.props;
|
||||||
|
const {
|
||||||
|
availableOptions,
|
||||||
|
availableStorage,
|
||||||
|
selectedOption,
|
||||||
|
isLoading,
|
||||||
|
} = this.state;
|
||||||
|
console.log("availableOptions", availableOptions);
|
||||||
|
console.log("availableStorage", availableStorage);
|
||||||
|
return isLoading ? (
|
||||||
|
<></>
|
||||||
|
) : (
|
||||||
|
<div className="category-item-wrapper temporary-storage">
|
||||||
|
<div className="category-item-heading">
|
||||||
|
<Text className="inherit-title-link header">
|
||||||
|
{t("ThirdPartyStorage")}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
<Text className="category-item-description">
|
||||||
|
{t("ThirdPartyStorageDescription")}
|
||||||
|
</Text>
|
||||||
|
<Text className="category-item-description note_description">
|
||||||
|
{t("ThirdPartyStorageNoteDescription")}
|
||||||
|
</Text>
|
||||||
|
<ComboBox
|
||||||
|
options={availableOptions}
|
||||||
|
selectedOption={{ key: 0, label: selectedOption }}
|
||||||
|
onSelect={() => ""}
|
||||||
|
isDisabled={false}
|
||||||
|
noBorder={false}
|
||||||
|
scaled={true}
|
||||||
|
scaledOptions={true}
|
||||||
|
dropDownMaxHeight={300}
|
||||||
|
className="team-template_text-input"
|
||||||
|
/>
|
||||||
|
<Box marginProp="16px 0 16px 0">
|
||||||
|
<Link
|
||||||
|
color="#316DAA"
|
||||||
|
target="_blank"
|
||||||
|
isHovered={true}
|
||||||
|
href={helpUrlCreatingBackup}
|
||||||
|
>
|
||||||
|
{t("LearnMore")}
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
|
<div className="manual-backup_buttons">
|
||||||
|
<Button
|
||||||
|
label={t("MakeCopy")}
|
||||||
|
onClick={() => console.log("click")}
|
||||||
|
primary
|
||||||
|
isDisabled={!maxProgress}
|
||||||
|
size="medium"
|
||||||
|
tabIndex={10}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default inject(({ auth }) => {
|
||||||
|
const { helpUrlCreatingBackup } = auth.settingsStore;
|
||||||
|
|
||||||
|
return {
|
||||||
|
helpUrlCreatingBackup,
|
||||||
|
};
|
||||||
|
})(withTranslation("Settings")(observer(ThirdPartyStorageModule)));
|
Loading…
Reference in New Issue
Block a user