Web: Backup: Moved backup progress to the store, refactoring.

This commit is contained in:
Tatiana Lopaeva 2022-03-05 14:30:07 +03:00
parent 1fce535cfb
commit ef2d2e5a1c
7 changed files with 281 additions and 562 deletions

View File

@ -1,19 +1,12 @@
import React from "react";
import Link from "@appserver/components/link";
import Text from "@appserver/components/text";
import { AppServerConfig } from "@appserver/common/constants";
import { combineUrl } from "@appserver/common/utils";
import { withTranslation, Trans } from "react-i18next";
import { inject, observer } from "mobx-react";
import ArrowRightIcon from "../../../../../../../public/images/arrow.right.react.svg";
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
import Box from "@appserver/components/box";
import styled from "styled-components";
import FloatingButton from "@appserver/common/components/FloatingButton";
import {
enableAutoBackup,
enableRestore,
getBackupProgress,
getBackupSchedule,
} from "@appserver/common/api/portal";
import Loader from "@appserver/components/loader";
@ -37,73 +30,61 @@ class BackupDesktopView extends React.Component {
moment.locale(this.lng);
this.state = {
downloadingProgress: 100,
enableRestore: false,
enableAutoBackup: false,
backupSchedule: {},
commonThirdPartyList: {},
isLoading: true,
isInitialLoading: true,
};
this._isMounted = false;
this.timerId = null;
}
componentDidMount() {
this._isMounted = true;
this.setBasicSettings();
}
componentWillUnmount() {
this._isMounted = false;
clearInterval(this.timerId);
const { clearProgressInterval } = this.props;
clearProgressInterval();
}
setBasicSettings = async () => {
const { setThirdPartyStorage, setBackupSchedule } = this.props;
const {
setThirdPartyStorage,
setBackupSchedule,
getProgress,
t,
} = this.props;
const requests = [
enableRestore(),
enableAutoBackup(),
getBackupProgress(),
getBackupSchedule(),
getBackupStorage(),
SelectFolderDialog.getCommonThirdPartyList(),
];
try {
getProgress(t);
const [
canRestore,
canAutoBackup,
backupProgress,
backupSchedule,
backupStorage,
commonThirdPartyList,
] = await Promise.all(requests);
if (backupProgress && !backupProgress.error) {
this._isMounted &&
this.setState({
downloadingProgress: backupProgress.progress,
});
if (backupProgress.progress !== 100) {
this.timerId = setInterval(() => this.getProgress(), 5000);
}
}
setThirdPartyStorage(backupStorage);
setBackupSchedule(backupSchedule);
this.setState({
isLoading: false,
isInitialLoading: false,
enableRestore: canRestore,
enableAutoBackup: canAutoBackup,
backupSchedule,
commonThirdPartyList,
});
} catch (error) {
console.error(error);
toastr.error(error);
this.setState({
isLoading: false,
isInitialLoading: false,
});
}
};
@ -114,76 +95,18 @@ class BackupDesktopView extends React.Component {
history.push(e.target.pathname);
};
setBackupProgress = () => {
this.setState({
downloadingProgress: 1,
});
if (!this.timerId) {
this.timerId = setInterval(() => this.getProgress(), 1000);
}
};
getProgress = () => {
const { t } = this.props;
const { downloadingProgress } = this.state;
getBackupProgress()
.then((response) => {
if (response) {
if (response.error.length > 0 && response.progress !== 100) {
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
console.log("error", response.error);
this.timerId = null;
this.setState({
downloadingProgress: 100,
});
return;
}
if (this._isMounted) {
downloadingProgress !== response.progress &&
this.setState({
downloadingProgress: response.progress,
});
}
if (response.progress === 100) {
clearInterval(this.timerId);
this._isMounted &&
this.setState({
...(response.link &&
response.link.slice(0, 1) === "/" && { link: response.link }),
});
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
}
}
})
.catch((err) => {
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
console.log("err", err);
this.timerId = null;
if (this._isMounted) {
this.setState({
downloadingProgress: 100,
});
}
});
};
render() {
const { t, history, helpUrlCreatingBackup } = this.props;
const {
t,
history,
helpUrlCreatingBackup,
downloadingProgress,
isLoading,
} = this.props;
const {
isInitialLoading,
enableRestore,
enableAutoBackup,
backupSchedule,
commonThirdPartyList,
link,
} = this.state;
const renderTooltip = (helpInfo) => {
@ -221,7 +144,7 @@ class BackupDesktopView extends React.Component {
);
};
return isLoading ? (
return isInitialLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
) : (
<StyledBackup isDesktop={true}>
@ -234,12 +157,7 @@ class BackupDesktopView extends React.Component {
{t("ManualBackupDescription")}
</Text>
<ManualBackup
isDesktop
setBackupProgress={this.setBackupProgress}
isCopyingLocal={downloadingProgress}
temporaryLink={link}
/>
<ManualBackup />
</div>
{enableAutoBackup && (
@ -252,10 +170,7 @@ class BackupDesktopView extends React.Component {
{t("AutoBackupDescription")}
</Text>
<AutoBackup
backupSchedule={backupSchedule}
commonThirdPartyList={commonThirdPartyList}
/>
<AutoBackup commonThirdPartyList={commonThirdPartyList} />
</div>
)}
@ -267,11 +182,7 @@ class BackupDesktopView extends React.Component {
</Text>
{renderTooltip(t("RestoreBackupHelp"))}
</div>
<RestoreBackup
isDesktop
history={history}
isCopyingLocal={downloadingProgress}
/>
<RestoreBackup history={history} />
</>
)}
@ -291,12 +202,21 @@ class BackupDesktopView extends React.Component {
export default inject(({ auth, backup }) => {
const { language } = auth;
const { helpUrlCreatingBackup } = auth.settingsStore;
const { setThirdPartyStorage, setBackupSchedule } = backup;
const {
setThirdPartyStorage,
setBackupSchedule,
getProgress,
clearProgressInterval,
downloadingProgress,
} = backup;
return {
helpUrlCreatingBackup,
language,
setThirdPartyStorage,
setBackupSchedule,
getProgress,
clearProgressInterval,
downloadingProgress,
};
})(observer(withTranslation(["Settings", "Common"])(BackupDesktopView)));

View File

@ -10,18 +10,12 @@ import commonIconsStyles from "@appserver/components/utils/common-icons-style";
import Box from "@appserver/components/box";
import styled from "styled-components";
import FloatingButton from "@appserver/common/components/FloatingButton";
import {
enableAutoBackup,
enableRestore,
getBackupProgress,
getBackupSchedule,
} from "@appserver/common/api/portal";
import { enableAutoBackup, enableRestore } from "@appserver/common/api/portal";
import Loader from "@appserver/components/loader";
import { StyledBackup } from "./StyledBackup";
const { proxyURL } = AppServerConfig;
import toastr from "@appserver/components/toast/toastr";
import moment from "moment";
const StyledArrowRightIcon = styled(ArrowRightIcon)`
@ -40,47 +34,33 @@ class BackupMobileView extends React.Component {
moment.locale(this.lng);
this.state = {
downloadingProgress: 100,
enableRestore: false,
enableAutoBackup: false,
isLoading: true,
};
this._isMounted = false;
this.timerId = null;
this.scheduleInformation = "";
}
componentDidMount() {
this._isMounted = true;
this.setBasicSettings();
}
componentWillUnmount() {
const { clearProgressInterval } = this.props;
clearProgressInterval();
}
setBasicSettings = async () => {
const { t } = this.props;
const { t, getProgress } = this.props;
const requests = [enableRestore(), enableAutoBackup(), getBackupProgress()];
const requests = [enableRestore(), enableAutoBackup()];
try {
const [restore, autoBackup, progress] = await Promise.allSettled(
requests
);
getProgress(t);
const backupProgress = progress.value;
const [restore, autoBackup] = await Promise.allSettled(requests);
const canRestore = restore.value;
const canAutoBackup = autoBackup.value;
if (backupProgress && !backupProgress.error) {
this._isMounted &&
this.setState({
downloadingProgress: backupProgress.progress,
});
if (backupProgress.progress !== 100) {
this.timerId = setInterval(() => this.getProgress(), 5000);
}
}
this.setState({
isLoading: false,
enableRestore: canRestore,
@ -94,59 +74,11 @@ class BackupMobileView extends React.Component {
}
};
componentWillUnmount() {
this._isMounted = false;
clearInterval(this.timerId);
}
onClickLink = (e) => {
const { history } = this.props;
e.preventDefault();
history.push(e.target.pathname);
};
getProgress = () => {
const { t } = this.props;
const { downloadingProgress } = this.state;
getBackupProgress()
.then((response) => {
if (response) {
if (response.error.length > 0 && response.progress !== 100) {
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
console.log("error", response.error);
this.timerId = null;
this.setState({
downloadingProgress: 100,
});
return;
}
if (this._isMounted) {
downloadingProgress !== response.progress &&
this.setState({
downloadingProgress: response.progress,
});
}
if (response.progress === 100) {
clearInterval(this.timerId);
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
}
}
})
.catch((err) => {
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
console.log("err", err);
this.timerId = null;
if (this._isMounted) {
this.setState({
downloadingProgress: 100,
});
}
});
};
onClickFloatingButton = () => {
const { history } = this.props;
@ -155,13 +87,8 @@ class BackupMobileView extends React.Component {
);
};
render() {
const { t, helpUrlCreatingBackup } = this.props;
const {
downloadingProgress,
isLoading,
enableRestore,
enableAutoBackup,
} = this.state;
const { t, helpUrlCreatingBackup, downloadingProgress } = this.props;
const { isLoading, enableRestore, enableAutoBackup } = this.state;
return isLoading ? (
<Loader className="pageLoader" type="rombs" size="40px" />
@ -184,9 +111,6 @@ class BackupMobileView extends React.Component {
<StyledArrowRightIcon size="small" color="#333333" />
</div>
<Text className="schedule-information">
{this.scheduleInformation}
</Text>
<Text className="category-item-description">
{t("AutomaticBackupSettingsDescription")}
</Text>
@ -262,11 +186,15 @@ class BackupMobileView extends React.Component {
}
}
export default inject(({ auth }) => {
export default inject(({ auth, backup }) => {
const { language } = auth;
const { helpUrlCreatingBackup } = auth.settingsStore;
const { getProgress, downloadingProgress, clearProgressInterval } = backup;
return {
helpUrlCreatingBackup,
language,
getProgress,
downloadingProgress,
clearProgressInterval,
};
})(observer(withTranslation(["Settings", "Common"])(BackupMobileView)));

View File

@ -313,11 +313,6 @@ const StyledScheduleComponent = styled.div`
`;
const StyledBackup = styled.div`
.schedule-information {
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
}
${commonSettingsStyles}
.backup_modules-separation {

View File

@ -7,7 +7,6 @@ import moment from "moment";
import Button from "@appserver/components/button";
import {
deleteBackupSchedule,
getBackupProgress,
getBackupSchedule,
createBackupSchedule,
} from "@appserver/common/api/portal";
@ -52,7 +51,6 @@ class AutomaticBackup extends React.PureComponent {
isChangedInStorage: false,
isReset: false,
isSuccessSave: false,
downloadingProgress: 100,
};
this.periodsObject = [
@ -84,22 +82,22 @@ class AutomaticBackup extends React.PureComponent {
}
setBasicSettings = async () => {
const { downloadingProgress } = this.state;
const {
setDefaultOptions,
t,
setThirdPartyStorage,
setBackupSchedule,
getProgress,
} = this.props;
try {
getProgress(t);
const [
commonThirdPartyList,
backupProgress,
backupSchedule,
backupStorage,
] = await Promise.all([
SelectFolderDialog.getCommonThirdPartyList(),
getBackupProgress(),
getBackupSchedule(),
getBackupStorage(),
]);
@ -110,18 +108,6 @@ class AutomaticBackup extends React.PureComponent {
setDefaultOptions(t, this.periodsObject, this.weekdaysLabelArray);
if (backupProgress && !backupProgress.error) {
const { progress } = backupProgress;
this._isMounted && downloadingProgress !== progress;
this.setState({
downloadingProgress: progress,
});
if (progress !== 100 && !this.timerId) {
this.timerId = setInterval(() => this.getProgress(), 1000);
}
}
this.setState({
isEnable: !!backupSchedule,
isInitialLoading: false,
@ -174,60 +160,11 @@ class AutomaticBackup extends React.PureComponent {
}
componentWillUnmount() {
const { clearProgressInterval } = this.props;
this._isMounted = false;
clearInterval(this.timerId);
clearProgressInterval();
}
getProgress = () => {
const { t } = this.props;
const { downloadingProgress } = this.state;
getBackupProgress()
.then((res) => {
if (res) {
const { error, progress } = res;
if (error.length > 0 && progress !== 100) {
clearInterval(this.timerId);
this.timerId && toastr.error(`${error}`);
this.timerId = null;
this.setState({
downloadingProgress: 100,
});
return;
}
this._isMounted &&
downloadingProgress !== progress &&
this.setState({
downloadingProgress: progress,
});
if (progress === 100) {
clearInterval(this.timerId);
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
}
} else {
clearInterval(this.timerId);
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
this._isMounted &&
this.setState({
downloadingProgress: 100,
});
}
})
.catch((err) => {
clearInterval(this.timerId);
this.timerId && toastr.error(err);
this.timerId = null;
this._isMounted &&
this.setState({
downloadingProgress: 100,
});
});
};
getTime = () => {
for (let item = 0; item < 24; item++) {
let obj = {
@ -561,12 +498,11 @@ class AutomaticBackup extends React.PureComponent {
isCheckedThirdPartyStorage,
isCheckedThirdParty,
isCheckedDocuments,
backupSchedule,
downloadingProgress,
} = this.props;
const {
isInitialLoading,
downloadingProgress,
isEnable,
isReset,
isLoadingData,
@ -701,15 +637,17 @@ class AutomaticBackup extends React.PureComponent {
/>
</div>
)}
{downloadingProgress > 0 && downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
onClick={this.onClickFloatingButton}
/>
)}
{isMobileOnly &&
downloadingProgress > 0 &&
downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
onClick={this.onClickFloatingButton}
/>
)}
</StyledAutoBackup>
);
}
@ -739,12 +677,15 @@ export default inject(({ auth, backup }) => {
selectedFolderId,
selectedStorageId,
downloadingProgress,
clearProgressInterval,
getProgress,
} = backup;
const isCheckedDocuments = selectedStorageType === `${DocumentModuleType}`;
const isCheckedThirdParty = selectedStorageType === `${ResourcesModuleType}`;
const isCheckedThirdPartyStorage =
selectedStorageType === `${StorageModuleType}`;
return {
language,
setThirdPartyStorage,
@ -767,6 +708,9 @@ export default inject(({ auth, backup }) => {
selectedFolderId,
selectedStorageId,
selectedWeekday,
downloadingProgress,
clearProgressInterval,
getProgress,
isCheckedThirdPartyStorage,
isCheckedThirdParty,

View File

@ -1,22 +1,21 @@
import React from "react";
import Text from "@appserver/components/text";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import { getBackupProgress, startBackup } from "@appserver/common/api/portal";
import { startBackup } from "@appserver/common/api/portal";
import toastr from "@appserver/components/toast/toastr";
import ThirdPartyModule from "./sub-components/ThirdPartyModule";
import DocumentsModule from "./sub-components/DocumentsModule";
import ThirdPartyStorageModule from "./sub-components/ThirdPartyStorageModule";
import FloatingButton from "@appserver/common/components/FloatingButton";
import RadioButton from "@appserver/components/radio-button";
import { StyledModules, StyledManualBackup } from "./../StyledBackup";
import SelectFolderDialog from "files/SelectFolderDialog";
import Loader from "@appserver/components/loader";
import { saveToSessionStorage, getFromSessionStorage } from "../../../../utils";
import { isDesktop } from "@appserver/components/utils/device";
import { BackupTypes } from "@appserver/common/constants";
import { isMobileOnly } from "react-device-detect";
import { inject, observer } from "mobx-react";
let selectedStorageType = "";
@ -24,8 +23,6 @@ class ManualBackup extends React.Component {
constructor(props) {
super(props);
const { isDesktop } = this.props;
selectedStorageType = getFromSessionStorage("LocalCopyStorageType");
const checkedDocuments = selectedStorageType
@ -42,11 +39,9 @@ class ManualBackup extends React.Component {
: false;
this.state = {
downloadingProgress: 100,
link: "",
selectedFolder: "",
isPanelVisible: false,
isInitialLoading: isDesktop ? false : true,
isInitialLoading: isMobileOnly ? true : false,
isCheckedTemporaryStorage: checkedTemporary,
isCheckedDocuments: checkedDocuments,
isCheckedThirdParty: checkedThirdPartyResource,
@ -59,57 +54,14 @@ class ManualBackup extends React.Component {
"isCheckedThirdParty",
"isCheckedThirdPartyStorage",
];
this._isMounted = false;
this.timerId = null;
}
clearSessionStorage = () => {
saveToSessionStorage("LocalCopyStorageType", "");
getFromSessionStorage("LocalCopyPath") &&
saveToSessionStorage("LocalCopyPath", "");
getFromSessionStorage("LocalCopyFolder") &&
saveToSessionStorage("LocalCopyFolder", "");
getFromSessionStorage("LocalCopyStorage") &&
saveToSessionStorage("LocalCopyStorage", "");
getFromSessionStorage("LocalCopyThirdPartyStorageType") &&
saveToSessionStorage("LocalCopyThirdPartyStorageType", "");
};
checkDownloadingProgress = async () => {
setBasicSettings = async () => {
const { getProgress, t } = this.props;
try {
const [commonThirdPartyList, backupProgress] = await Promise.all([
SelectFolderDialog.getCommonThirdPartyList(),
getBackupProgress(),
]);
getProgress(t);
this.commonThirdPartyList = commonThirdPartyList;
if (backupProgress && !backupProgress.error) {
if (backupProgress.progress !== 100) {
this._isMounted &&
this.setState({
downloadingProgress: backupProgress.progress,
});
this.setIntervalProcess();
} else {
backupProgress.link &&
backupProgress.link.slice(0, 1) === "/" &&
this.setState({
link: backupProgress.link,
downloadingProgress: 100,
});
this.clearSessionStorage();
}
} else {
this.clearSessionStorage();
}
this.commonThirdPartyList = await SelectFolderDialog.getCommonThirdPartyList();
} catch (error) {
console.error(error);
this.clearSessionStorage();
@ -121,119 +73,34 @@ class ManualBackup extends React.Component {
};
componentDidMount() {
const { isDesktop } = this.props;
this._isMounted = true;
!isDesktop && this.checkDownloadingProgress();
isMobileOnly && this.setBasicSettings();
}
componentWillUnmount() {
this._isMounted = false;
clearInterval(this.timerId);
const { clearProgressInterval } = this.props;
clearProgressInterval();
}
setIntervalProcess = () => {
this.timerId = setInterval(() => this.getProgress(), 1000);
};
onMakeTemporaryBackup = () => {
const { isDesktop, setBackupProgress } = this.props;
onMakeTemporaryBackup = async () => {
const { getIntervalProgress, setDownloadingProgress, t } = this.props;
const { TemporaryModuleType } = BackupTypes;
saveToSessionStorage("LocalCopyStorageType", "TemporaryStorage");
if (isDesktop) {
startBackup(`${TemporaryModuleType}`, null)
.then(() => setBackupProgress())
.catch((err) => {
toastr.error(`${t("BackupCreatedError")}`);
console.error(err);
});
} else {
startBackup(`${TemporaryModuleType}`, null)
.then(() =>
this.setState({
downloadingProgress: 1,
})
)
.then(() => !this.timerId && this.setIntervalProcess())
.catch((err) => {
toastr.error(`${t("BackupCreatedError")}`);
console.error(err);
});
try {
await startBackup(`${TemporaryModuleType}`, null);
setDownloadingProgress(1);
getIntervalProgress(t);
} catch (e) {
toastr.error(`${t("BackupCreatedError")}`);
console.error(err);
}
};
getProgress = () => {
const { downloadingProgress } = this.state;
const { t } = this.props;
getBackupProgress()
.then((response) => {
if (response) {
const { progress, link, error } = response;
if (error.length > 0 && progress !== 100) {
console.log("error", error);
this.clearSessionStorage();
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
this.timerId = null;
this.setState({
downloadingProgress: 100,
});
return;
}
if (progress === 100) {
this.clearSessionStorage();
clearInterval(this.timerId);
this._isMounted &&
this.setState({
downloadingProgress: 100,
...(link && link.slice(0, 1) === "/" && { link: link }),
});
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
return;
}
this._isMounted &&
downloadingProgress !== progress &&
this.setState({
downloadingProgress: progress,
});
} else {
clearInterval(this.timerId);
}
})
.catch((err) => {
console.log("error", err);
this.clearSessionStorage();
clearInterval(this.timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
this.timerId = null;
this._isMounted &&
this.setState({
downloadingProgress: 100,
});
});
};
onClickDownloadBackup = () => {
const { temporaryLink } = this.props;
const { link } = this.state;
const url = window.location.origin;
const downloadUrl = `${url}` + `${link ? link : temporaryLink}`;
const downloadUrl = `${url}` + `${temporaryLink}`;
window.open(downloadUrl, "_self");
};
@ -261,12 +128,13 @@ class ManualBackup extends React.Component {
selectedStorage
) => {
const { isCheckedDocuments, isCheckedThirdParty } = this.state;
const { t, isDesktop, setBackupProgress, temporaryLink } = this.props;
!isDesktop &&
this.setState({
downloadingProgress: 1,
});
const {
t,
getIntervalProgress,
setDownloadingProgress,
clearSessionStorage,
setTemporaryLink,
} = this.props;
const storageValue =
isCheckedDocuments || isCheckedThirdParty ? selectedFolder : selectedId;
@ -300,26 +168,19 @@ class ManualBackup extends React.Component {
try {
await startBackup(moduleType, storageParams);
if (isDesktop) {
setBackupProgress();
} else {
!this.timerId && this.setIntervalProcess();
}
setDownloadingProgress(1);
setTemporaryLink("");
getIntervalProgress(t);
} catch (err) {
toastr.error(`${t("BackupCreatedError")}`);
console.error(err);
this.clearSessionStorage();
this.setState({
downloadingProgress: 100,
});
clearSessionStorage();
}
};
render() {
const { t, isDesktop, isCopyingLocal, temporaryLink } = this.props;
const { t, temporaryLink, downloadingProgress } = this.props;
const {
downloadingProgress,
link,
isInitialLoading,
isCheckedTemporaryStorage,
isCheckedDocuments,
@ -327,8 +188,7 @@ class ManualBackup extends React.Component {
isCheckedThirdPartyStorage,
} = this.state;
const isMaxProgress =
(isDesktop ? isCopyingLocal : downloadingProgress) === 100;
const isMaxProgress = downloadingProgress === 100;
const isDisabledThirdParty =
this.commonThirdPartyList && this.commonThirdPartyList.length === 0;
@ -371,7 +231,7 @@ class ManualBackup extends React.Component {
isDisabled={!isMaxProgress}
size="medium"
/>
{((link.length > 0 && isMaxProgress) || temporaryLink) && (
{temporaryLink?.length > 0 && isMaxProgress && (
<Button
label={t("DownloadCopy")}
onClick={this.onClickDownloadBackup}
@ -452,17 +312,41 @@ class ManualBackup extends React.Component {
)}
</StyledModules>
{downloadingProgress > 0 && downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
/>
)}
{isMobileOnly &&
downloadingProgress > 0 &&
downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
/>
)}
</StyledManualBackup>
);
}
}
export default withTranslation("Settings")(ManualBackup);
export default inject(({ backup }) => {
const {
setDownloadingProgress,
getProgress,
setTemporaryLink,
downloadingProgress,
temporaryLink,
clearProgressInterval,
getIntervalProgress,
clearSessionStorage,
} = backup;
return {
setDownloadingProgress,
getProgress,
getIntervalProgress,
setTemporaryLink,
downloadingProgress,
temporaryLink,
clearProgressInterval,
clearSessionStorage,
};
})(withTranslation("Settings")(observer(ManualBackup)));

View File

@ -1,7 +1,5 @@
import React from "react";
import { withTranslation } from "react-i18next";
import Button from "@appserver/components/button";
import Loader from "@appserver/components/loader";
import Checkbox from "@appserver/components/checkbox";
@ -15,13 +13,14 @@ import ThirdPartyResources from "./sub-components/ThirdPartyResourcesModule";
import ThirdPartyStorages from "./sub-components/ThirdPartyStoragesModule";
import LocalFile from "./sub-components/LocalFileModule";
import toastr from "@appserver/components/toast/toastr";
import { getBackupProgress, startRestore } from "@appserver/common/api/portal";
import { startRestore } from "@appserver/common/api/portal";
import { combineUrl } from "@appserver/common/utils";
import { AppServerConfig, BackupTypes } from "@appserver/common/constants";
import config from "../../../../../../../../package.json";
import FloatingButton from "@appserver/common/components/FloatingButton";
import { request } from "@appserver/common/api/client";
import { inject, observer } from "mobx-react";
import { isMobileOnly } from "react-device-detect";
const {
DocumentModuleType,
@ -32,7 +31,6 @@ const {
class RestoreBackup extends React.Component {
constructor(props) {
super(props);
const { isDesktop } = this.props;
this.state = {
isChecked: false,
@ -46,12 +44,10 @@ class RestoreBackup extends React.Component {
selectedFileId: "",
selectedFile: "",
isErrors: {},
downloadingProgress: 100,
isInitialLoading: isDesktop ? false : true,
isInitialLoading: isMobileOnly ? true : false,
};
this._isMounted = false;
this.timerId = null;
this.switches = [
"isCheckedLocalFile",
@ -64,25 +60,13 @@ class RestoreBackup extends React.Component {
this.formSettings = "";
}
checkDownloadingProgress = async () => {
setBasicSettings = async () => {
const { getProgress, t } = this.props;
try {
const [commonThirdPartyList, backupProgress] = await Promise.all([
SelectFolderDialog.getCommonThirdPartyList(),
getBackupProgress(),
]);
getProgress(t);
this.commonThirdPartyList = commonThirdPartyList;
if (backupProgress && !backupProgress.error) {
if (backupProgress.progress !== 100) {
this._isMounted &&
this.setState({
downloadingProgress: backupProgress.progress,
});
this.timerId = setInterval(() => this.getProgress(), 1000);
}
}
this.commonThirdPartyList = await SelectFolderDialog.getCommonThirdPartyList();
} catch (error) {
console.error(error);
}
@ -93,65 +77,16 @@ class RestoreBackup extends React.Component {
};
componentDidMount() {
const { isDesktop } = this.props;
this._isMounted = true;
!isDesktop && this.checkDownloadingProgress();
isMobileOnly && this.setBasicSettings();
}
componentWillUnmount() {
this._isMounted = false;
clearInterval(this.timerId);
const { clearProgressInterval } = this.props;
clearProgressInterval();
}
getProgress = () => {
const { t } = this.props;
getBackupProgress()
.then((res) => {
if (res) {
if (res.error) {
clearInterval(this.timerId);
this.timerId && toastr.error(`${res.error}`);
console.log("error", res.error);
this.timerId = null;
this.setState({
downloadingProgress: 100,
});
return;
}
this._isMounted &&
this.setState({
downloadingProgress: res.progress,
});
if (res.progress === 100) {
clearInterval(this.timerId);
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
this._isMounted &&
this.setState({
downloadingProgress: 100,
});
}
} else {
clearInterval(this.timerId);
}
})
.catch((err) => {
clearInterval(this.timerId);
this.timerId && toastr.error(err);
console.log("err", err);
this.timerId = null;
this._isMounted &&
this.setState({
downloadingProgress: 100,
});
});
};
onChangeCheckbox = () => {
this.setState({
@ -399,7 +334,7 @@ class RestoreBackup extends React.Component {
};
};
render() {
const { t, history, isCopyingLocal, isDesktop } = this.props;
const { t, history, downloadingProgress } = this.props;
const {
isChecked,
isInitialLoading,
@ -411,7 +346,6 @@ class RestoreBackup extends React.Component {
isCheckedThirdPartyStorage,
isCheckedLocalFile,
isErrors,
downloadingProgress,
} = this.state;
const commonRadioButtonProps = {
@ -425,8 +359,7 @@ class RestoreBackup extends React.Component {
const isDisabledThirdParty =
this.commonThirdPartyList && this.commonThirdPartyList.length === 0;
const isMaxProgress =
(isDesktop ? isCopyingLocal : downloadingProgress) === 100;
const isMaxProgress = downloadingProgress === 100;
console.log("render restore backup ", this.state, this.props);
return isInitialLoading ? (
@ -570,25 +503,31 @@ class RestoreBackup extends React.Component {
tabIndex={10}
/>
{downloadingProgress > 0 && downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
onClick={this.onClickFloatingButton}
/>
)}
{isMobileOnly &&
downloadingProgress > 0 &&
downloadingProgress !== 100 && (
<FloatingButton
className="layout-progress-bar"
icon="file"
alert={false}
percent={downloadingProgress}
onClick={this.onClickFloatingButton}
/>
)}
</StyledRestoreBackup>
);
}
}
export default inject(({ auth }) => {
export default inject(({ auth, backup }) => {
const { settingsStore } = auth;
const { socketHelper } = settingsStore;
const { downloadingProgress, getProgress, clearProgressInterval } = backup;
return {
socketHelper,
downloadingProgress,
getProgress,
clearProgressInterval,
};
})(withTranslation(["Settings", "Common"])(observer(RestoreBackup)));

View File

@ -1,5 +1,11 @@
import api from "@appserver/common/api";
import { getBackupProgress } from "@appserver/common/api/portal";
import { makeAutoObservable } from "mobx";
import {
saveToSessionStorage,
getFromSessionStorage,
} from "../components/pages/Settings/utils";
import toastr from "../helpers/toastr";
const DOCUMENT_MODULE_TYPE = 0;
const RESOURCES_MODULE_TYPE = 1;
@ -44,6 +50,11 @@ class BackupStore {
preparationPortalDialogVisible = false;
downloadingProgress = 100;
temporaryLink = null;
timerId = null;
constructor() {
makeAutoObservable(this);
}
@ -273,7 +284,105 @@ class BackupStore {
console.log("this.selectedStorageId", this.selectedStorageId);
};
clearSessionStorage = () => {
saveToSessionStorage("LocalCopyStorageType", "");
getFromSessionStorage("LocalCopyPath") &&
saveToSessionStorage("LocalCopyPath", "");
getFromSessionStorage("LocalCopyFolder") &&
saveToSessionStorage("LocalCopyFolder", "");
getFromSessionStorage("LocalCopyStorage") &&
saveToSessionStorage("LocalCopyStorage", "");
getFromSessionStorage("LocalCopyThirdPartyStorageType") &&
saveToSessionStorage("LocalCopyThirdPartyStorageType", "");
};
getProgress = async (t) => {
try {
const response = await getBackupProgress();
console.log(" this.downloadingProgress", this.downloadingProgress);
const { progress, link, error } = response;
if (!error) {
this.downloadingProgress = progress;
if (link && link.slice(0, 1) === "/") {
this.temporaryLink = link;
}
if (progress !== 100) {
this.getIntervalProgress(t);
} else {
this.clearSessionStorage();
}
}
} catch (e) {
toastr.error(`${t("BackupCreatedError")}`);
this.clearSessionStorage();
}
};
getIntervalProgress = (t) => {
console.log("this.timerId", this.timerId);
if (this.timerId) {
return;
}
this.timerId = setInterval(async () => {
try {
const response = await getBackupProgress();
const { progress, link, error } = response;
console.log("here");
if (error.length > 0 && progress !== 100) {
clearInterval(timerId);
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
this.timerId = null;
this.clearSessionStorage();
this.downloadingProgress = 100;
return;
}
if (progress !== this.downloadingProgress) {
this.downloadingProgress = progress;
}
if (progress === 100) {
clearInterval(this.timerId);
this.clearSessionStorage();
if (link && link.slice(0, 1) === "/") {
this.temporaryLink = link;
}
this.timerId && toastr.success(`${t("BackupCreatedSuccess")}`);
this.timerId = null;
console.log("this.timerId success", this.timerId);
return;
}
} catch (e) {
clearInterval(this.timerId);
this.clearSessionStorage();
this.downloadingProgress = 100;
this.timerId && toastr.error(`${t("BackupCreatedError")}`);
this.timerId = null;
}
}, 1000);
};
clearProgressInterval = () => {
console.log("clearInterval", this.timerId);
this.timerId && clearInterval(this.timerId);
this.timerId = null;
};
setDownloadingProgress = (progress) => {
this.downloadingProgress = progress;
};
setTemporaryLink = (link) => {
this.temporaryLink = link;
};
}
export default BackupStore;