{_('importConfig')}
diff --git a/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/backup-xo-config-modal.js b/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/backup-xo-config-modal.js
new file mode 100644
index 00000000000..bbd72de890a
--- /dev/null
+++ b/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/backup-xo-config-modal.js
@@ -0,0 +1,23 @@
+import _ from 'intl'
+import BaseComponent from 'base-component'
+import React from 'react'
+import { Password } from 'form'
+
+class BackupXoConfigModal extends BaseComponent {
+ get value() {
+ return {
+ passphrase: this.state.passphrase,
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+ )
+ }
+}
+
+export default BackupXoConfigModal
diff --git a/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/index.js b/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/index.js
new file mode 100644
index 00000000000..c6afc453e5b
--- /dev/null
+++ b/packages/xo-web/src/xo-app/settings/config/xo-cloud-config/index.js
@@ -0,0 +1,136 @@
+import _ from 'intl'
+import ActionButton from 'action-button'
+import addSubscriptions from 'add-subscriptions'
+import decorate from 'apply-decorators'
+import Icon from 'icon'
+import React from 'react'
+import { confirm } from 'modal'
+import { getApiApplianceInfo, subscribeCloudXoConfig, subscribeCloudXoConfigBackups } from 'xo'
+import { groupBy, sortBy } from 'lodash'
+import { injectState, provideState } from 'reaclette'
+import { SelectXoCloudConfig } from 'select-objects'
+
+import BackupXoConfigModal from './backup-xo-config-modal'
+
+const CloudConfig = decorate([
+ addSubscriptions({
+ cloudXoConfig: subscribeCloudXoConfig,
+ cloudXoConfigBackups: subscribeCloudXoConfigBackups,
+ }),
+ provideState({
+ initialState: () => ({ config: undefined }),
+ effects: {
+ downloadCloudXoConfig:
+ () =>
+ ({ config, isConfigDefined }) => {
+ if (isConfigDefined) {
+ window.open(config.content_href, '_blank')
+ }
+ },
+ uploadCloudXoConfig:
+ () =>
+ async ({ config, isConfigDefined }) => {
+ if (isConfigDefined) {
+ const resp = await fetch(`./rest/v0/cloud/xo-config/backups/${config.id}/actions/import?sync`, {
+ method: 'POST',
+ })
+ if (!resp.ok) {
+ throw new Error(resp.statusText)
+ }
+ return {
+ config: undefined,
+ }
+ }
+ },
+ onChangeCloudXoConfig: (_, config) => ({
+ config,
+ }),
+ toggleEnableCloudXoConfig:
+ () =>
+ async (state, { cloudXoConfig }) => {
+ let passphrase
+ if (!cloudXoConfig?.enabled) {
+ const params = await confirm({
+ icon: 'backup',
+ title: _('xoConfigCloudBackup'),
+ body:
,
+ })
+ passphrase = params.passphrase
+ }
+
+ const resp = await fetch('./rest/v0/cloud/xo-config', {
+ method: 'PATCH',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ enabled: !cloudXoConfig?.enabled,
+ passphrase,
+ }),
+ })
+ if (!resp.ok) {
+ throw new Error(resp.statusText)
+ }
+ subscribeCloudXoConfig.forceRefresh()
+ },
+ },
+ computed: {
+ applianceId: async () => {
+ const { id } = await getApiApplianceInfo()
+ return id
+ },
+ groupedConfigs: ({ applianceId, sortedConfigs }) =>
+ sortBy(groupBy(sortedConfigs, 'xoaId'), config => (config[0].xoaId === applianceId ? -1 : 1)),
+ isConfigDefined: ({ config }) => config != null,
+ sortedConfigs: (_, { cloudXoConfigBackups }) =>
+ cloudXoConfigBackups?.sort((config, nextConfig) => config.createdAt - nextConfig.createdAt),
+ },
+ }),
+ injectState,
+ ({ effects, state, cloudXoConfig }) => (
+
+
+
+ {_('manageXoConfigCloudBackup')}
+
+
+ {_('xoConfigCloudBackupTips')}
+
+
+
+ {cloudXoConfig?.enabled ? _('disable') : _('enable')}
+
+
+
+
+ {_('backedUpXoConfigs')}
+
+
+
+
+ {_('restore')}
+ {' '}
+
+ {_('download')}
+
+
+
+
+ ),
+])
+
+export default CloudConfig
diff --git a/packages/xo-web/src/xo-app/settings/index.js b/packages/xo-web/src/xo-app/settings/index.js
index bd9ce422351..6936473dd68 100644
--- a/packages/xo-web/src/xo-app/settings/index.js
+++ b/packages/xo-web/src/xo-app/settings/index.js
@@ -59,7 +59,7 @@ const HEADER = (
{_('settingsCloudConfigsPage')}
- {_('settingsConfigPage')}
+ {_('xoConfig')}