Port BackgroundJob admin settings to vue

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

6 files changed, 248 insertions, 135 deletions

diff --git a/apps/settings/lib/Settings/Admin/Server.php b/apps/settings/lib/Settings/Admin/Server.php
index 0fe98f21c8f..0d8ef00a1fd 100644
--- a/apps/settings/lib/Settings/Admin/Server.php
+++ b/apps/settings/lib/Settings/Admin/Server.php
@@ -33,28 +33,25 @@ use OCP\AppFramework\Utility\ITimeFactory;
 use OCP\IConfig;
 use OCP\IDBConnection;
 use OCP\IL10N;
+use OCP\IURLGenerator;
 use OCP\Settings\IDelegatedSettings;
 
 class Server implements IDelegatedSettings {
 	use TProfileHelper;
 
-	/** @var IDBConnection */
-	private $connection;
-	/** @var IInitialState */
-	private $initialStateService;
-	/** @var ProfileManager */
-	private $profileManager;
-	/** @var ITimeFactory */
-	private $timeFactory;
-	/** @var IConfig */
-	private $config;
-	/** @var IL10N $l */
-	private $l;
+	private IDBConnection $connection;
+	private IInitialState $initialStateService;
+	private ProfileManager $profileManager;
+	private ITimeFactory $timeFactory;
+	private IConfig $config;
+	private IL10N $l;
+	private IURLGenerator $urlGenerator;
 
 	public function __construct(IDBConnection $connection,
 								IInitialState $initialStateService,
 								ProfileManager $profileManager,
 								ITimeFactory $timeFactory,
+								IURLGenerator $urlGenerator,
 								IConfig $config,
 								IL10N $l) {
 		$this->connection = $connection;
@@ -63,27 +60,29 @@ class Server implements IDelegatedSettings {
 		$this->timeFactory = $timeFactory;
 		$this->config = $config;
 		$this->l = $l;
+		$this->urlGenerator = $urlGenerator;
 	}
 
 	/**
 	 * @return TemplateResponse
 	 */
 	public function getForm() {
-		$parameters = [
-			// Background jobs
-			'backgroundjobs_mode' => $this->config->getAppValue('core', 'backgroundjobs_mode', 'ajax'),
-			'lastcron' => $this->config->getAppValue('core', 'lastcron', false),
-			'cronMaxAge' => $this->cronMaxAge(),
-			'cronErrors' => $this->config->getAppValue('core', 'cronErrors'),
-			'cli_based_cron_possible' => function_exists('posix_getpwuid'),
-			'cli_based_cron_user' => function_exists('posix_getpwuid') ? posix_getpwuid(fileowner(\OC::$configDir . 'config.php'))['name'] : '',
-			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
-		];
+		// Background jobs
+		$this->initialStateService->provideInitialState('backgroundJobsMode', $this->config->getAppValue('core', 'backgroundjobs_mode', 'ajax'));
+		$this->initialStateService->provideInitialState('lastCron', (int)$this->config->getAppValue('core', 'lastcron', '0'));
+		$this->initialStateService->provideInitialState('cronMaxAge', $this->cronMaxAge());
+		$this->initialStateService->provideInitialState('cronErrors', $this->config->getAppValue('core', 'cronErrors'));
+		$this->initialStateService->provideInitialState('cliBasedCronPossible', function_exists('posix_getpwuid'));
+		$this->initialStateService->provideInitialState('cliBasedCronUser', function_exists('posix_getpwuid') ? posix_getpwuid(fileowner(\OC::$configDir . 'config.php'))['name'] : '');
+		$this->initialStateService->provideInitialState('backgroundJobsDocUrl', $this->urlGenerator->linkToDocs('admin-background-jobs'));
 
+		// Profile page
 		$this->initialStateService->provideInitialState('profileEnabledGlobally', $this->profileManager->isProfileEnabled());
 		$this->initialStateService->provideInitialState('profileEnabledByDefault', $this->isProfileEnabledByDefault($this->config));
 
-		return new TemplateResponse('settings', 'settings/admin/server', $parameters, '');
+		return new TemplateResponse('settings', 'settings/admin/server', [
+			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
+		], '');
 	}
 
 	protected function cronMaxAge(): int {
diff --git a/apps/settings/src/admin.js b/apps/settings/src/admin.js
index 8012dcb8863..833ed3e1ea9 100644
--- a/apps/settings/src/admin.js
+++ b/apps/settings/src/admin.js
@@ -14,22 +14,6 @@ window.addEventListener('DOMContentLoaded', () => {
 		})
 	})
 
-	$('#backgroundjobs span.crondate').tooltip({ placement: 'top' })
-
-	$('#backgroundjobs input').change(() => {
-		if ($(this).is(':checked')) {
-			const mode = $(this).val()
-			if (mode === 'ajax' || mode === 'webcron' || mode === 'cron') {
-				OCP.AppConfig.setValue('core', 'backgroundjobs_mode', mode, {
-					success: () => {
-						// clear cron errors on background job mode change
-						OCP.AppConfig.deleteKey('core', 'cronErrors')
-					}
-				})
-			}
-		}
-	})
-
 	$('#shareAPIEnabled').change(() => {
 		$('#shareAPI p:not(#enable)').toggleClass('hidden', !this.checked)
 	})
diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
new file mode 100644
index 00000000000..5413db38f91
--- /dev/null
+++ b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -0,0 +1,212 @@
+<!--
+	- @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+	-
+	- @author Carl Schwan <carl@carlschwan.eu>
+	-
+	- @license GNU AGPL version 3 or any later version
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+	-
+-->
+
+<template>
+	<SettingsSection :title="t('settings', 'Background jobs')"
+		:description="t('settings', `For the server to work properly, it's important to configure background jobs correctly. Cron is the recommended setting. Please see the documentation for more information.`)"
+		:doc-url="backgroundJobsDocUrl">
+
+		<template v-if="lastCron !== 0">
+			<span v-if="oldExecution" class="error">
+				{{ t('settings', 'Last job execution ran {time}. Something seems wrong.', {time: relativeTime}) }}
+			</span>
+
+			<span v-else-if="longExecutionNotCron" class="warning">
+				{{ t('settings', "Some jobs haven’t been executed since {maxAgeRelativeTime}. Please consider increasing the execution frequency.", {maxAgeRelativeTime}) }}
+			</span>
+
+			<span class="warning" v-else-if="longExecutionCron">
+				{{ t('settings', "Some jobs haven’t been executed since {maxAgeRelativeTime}. Please consider switching to system cron.", {maxAgeRelativeTime}) }}
+			</span>
+
+			<span v-else>
+				{{ t('settings', 'Last job ran {relativeTime}.', {relativeTime}) }}
+			</span>
+		</template>
+
+		<span class="error" v-else>
+			{{ t('settings', 'Background job didn’t run yet!') }}
+		</span>
+
+		<CheckboxRadioSwitch type="radio"
+			:checked.sync="backgroundJobsMode"
+			name="backgroundJobsMode"
+			value="ajax"
+			class="ajaxSwitch"
+			@update:checked="onBackgroundJobModeChanged">
+			{{ t('settings', 'AJAX') }}
+		</CheckboxRadioSwitch>
+		<em>{{ t('settings', 'Execute one task with each page loaded. Use case: Single user instance.') }}</em>
+
+		<CheckboxRadioSwitch type="radio"
+			:checked.sync="backgroundJobsMode"
+			name="backgroundJobsMode"
+			value="webcron"
+			@update:checked="onBackgroundJobModeChanged">
+			{{ t('settings', 'Webcron') }}
+		</CheckboxRadioSwitch>
+		<em>{{ t('settings', 'cron.php is registered at a webcron service to call cron.php every 5 minutes over HTTP. Use case: Very small instance (1–5 users depending on the usage).') }}</em>
+
+		<CheckboxRadioSwitch type="radio"
+			:checked.sync="backgroundJobsMode"
+			value="cron"
+			name="backgroundJobsMode"
+			v-if="cliBasedCronPossible"
+			@update:checked="onBackgroundJobModeChanged">
+			{{ t('settings', 'Cron (Recommended)') }}
+		</CheckboxRadioSwitch>
+		<em v-if="cliBasedCronPossible">{{ cronLabel }}</em>
+		<em v-else>
+			{{ t('settings', 'To run this you need the PHP POSIX extension. See {linkstart}PHP documentation{linkend} for more details.', {
+				linkstart: '<a href="https://www.php.net/manual/en/book.posix.php">',
+				linkend: '</a>',
+			}) }}
+		</em>
+	</SettingsSection>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import { showError } from '@nextcloud/dialogs'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import moment from '@nextcloud/moment'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+import confirmPassword from '@nextcloud/password-confirmation'
+
+const lastCron = loadState('settings', 'lastCron')
+const cronMaxAge = loadState('settings', 'cronMaxAge', '')
+const backgroundJobsMode = loadState('settings', 'backgroundJobsMode', 'cron')
+const cliBasedCronPossible = loadState('settings', 'cliBasedCronPossible', true)
+const cliBasedCronUser = loadState('settings', 'cliBasedCronUser', 'www-data')
+const backgroundJobsDocUrl = loadState('settings', 'backgroundJobsDocUrl')
+
+export default {
+	name: 'BackgroundJob',
+
+	components: {
+		CheckboxRadioSwitch,
+		SettingsSection,
+	},
+
+	data() {
+		return {
+			lastCron,
+			cronMaxAge,
+			backgroundJobsMode,
+			cliBasedCronPossible,
+			cliBasedCronUser,
+			backgroundJobsDocUrl,
+			relativeTime: moment(lastCron * 1000).fromNow(),
+			maxAgeRelativeTime: moment(cronMaxAge * 1000).fromNow(),
+		}
+	},
+	computed: {
+		cronLabel() {
+			let desc = t('settings', 'Use system cron service to call the cron.php file every 5 minutes. Recommended for all instances.')
+			if (this.cliBasedCronPossible) {
+				desc += ' ' + t('settings', 'The cron.php needs to be executed by the system user "{user}".', { user: this.cliBasedCronUser })
+			}
+			return desc
+		},
+		oldExecution() {
+			return Date.now() / 1000 - this.lastCron > 600
+		},
+		longExecutionNotCron() {
+			return Date.now() / 1000 - this.cronMaxAge > 12 * 3600 && this.backgroundJobsMode !== 'cron'
+		},
+		longExecutionCron() {
+			return Date.now() / 1000 - this.cronMaxAge > 12 * 3600 && this.backgroundJobsMode === 'cron'
+		}
+	},
+	methods: {
+		async onBackgroundJobModeChanged(backgroundJobsMode) {
+			const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
+				appId: 'core',
+				key: 'backgroundjobs_mode',
+			})
+
+			await confirmPassword()
+
+			try {
+				const { data } = await axios.post(url, {
+					value: backgroundJobsMode
+				})
+				this.handleResponse({
+					status: data.ocs?.meta?.status
+				})
+			} catch (e) {
+				this.handleResponse({
+					errorMessage: t('settings', 'Unable to update background job mode'),
+					error: e,
+				})
+			}
+		},
+		async handleResponse({ status, errorMessage, error }) {
+			if (status === 'ok') {
+				await this.deleteError()
+			} else {
+				showError(errorMessage)
+				console.error(errorMessage, error)
+			}
+		},
+		async deleteError() {
+			// clear cron errors on background job mode change
+			const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
+				appId: 'core',
+				key: 'cronErrors',
+			})
+
+			await confirmPassword()
+
+			try {
+				await axios.delete(url)
+			} catch (error) {
+				console.error(error)
+			}
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.error {
+	margin-top: 8px;
+	padding: 5px;
+	border-radius: var(--border-radius);
+	color: var(--color-primary-text);
+	background-color: var(--color-error);
+	width: initial;
+}
+.warning {
+	margin-top: 8px;
+	padding: 5px;
+	border-radius: var(--border-radius);
+	color: var(--color-primary-text);
+	background-color: var(--color-warning);
+	width: initial;
+}
+.ajaxSwitch {
+	margin-top: 1rem;
+}
+</style>
diff --git a/apps/settings/src/main-admin-basic-settings.js b/apps/settings/src/main-admin-basic-settings.js
index 522ca392e77..5a694f54e90 100644
--- a/apps/settings/src/main-admin-basic-settings.js
+++ b/apps/settings/src/main-admin-basic-settings.js
@@ -29,6 +29,7 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import logger from './logger'
 
 import ProfileSettings from './components/BasicSettings/ProfileSettings'
+import BackgroundJob from './components/BasicSettings/BackgroundJob'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
@@ -43,7 +44,10 @@ Vue.mixin({
 	},
 })
 
+const BackgroundJobView = Vue.extend(BackgroundJob)
+new BackgroundJobView().$mount('#vue-admin-background-job')
+
 if (profileEnabledGlobally) {
 	const ProfileSettingsView = Vue.extend(ProfileSettings)
-	new ProfileSettingsView().$mount('.vue-admin-profile-settings')
+	new ProfileSettingsView().$mount('#vue-admin-profile-settings')
 }
diff --git a/apps/settings/templates/settings/admin/server.php b/apps/settings/templates/settings/admin/server.php
index f3b8dc4aaad..fb26d0ac56d 100644
--- a/apps/settings/templates/settings/admin/server.php
+++ b/apps/settings/templates/settings/admin/server.php
@@ -29,93 +29,8 @@ script('settings', [
 ]);
 ?>
 
-<div class="section" id="backgroundjobs">
-	<h2 class="inlineblock"><?php p($l->t('Background jobs'));?></h2>
-	<p class="cronlog inlineblock">
-		<?php if ($_['lastcron'] !== false) {
-	$relative_time = relative_modified_date($_['lastcron']);
-	$maxAgeRelativeTime = relative_modified_date($_['cronMaxAge']);
-
-	$formatter = \OC::$server->getDateTimeFormatter();
-	$absolute_time = $formatter->formatDateTime($_['lastcron'], 'long', 'long');
-	$maxAgeAbsoluteTime = $formatter->formatDateTime($_['cronMaxAge'], 'long', 'long');
-	if (time() - $_['lastcron'] > 600) { ?>
-				<span class="status error"></span>
-				<span class="crondate" title="<?php p($absolute_time);?>">
-					<?php p($l->t("Last job execution ran %s. Something seems wrong.", [$relative_time]));?>
-				</span>
-			<?php } elseif (time() - $_['cronMaxAge'] > 12 * 3600) {
-		if ($_['backgroundjobs_mode'] === 'cron') { ?>
-						<span class="status warning"></span>
-						<span class="crondate" title="<?php p($maxAgeAbsoluteTime);?>">
-							<?php p($l->t("Some jobs haven’t been executed since %s. Please consider increasing the execution frequency.", [$maxAgeRelativeTime]));?>
-						</span>
-					<?php } else { ?>
-						<span class="status error"></span>
-						<span class="crondate" title="<?php p($maxAgeAbsoluteTime);?>">
-							<?php p($l->t("Some jobs didn’t execute since %s. Please consider switching to system cron.", [$maxAgeRelativeTime]));?>
-						</span>
-					<?php }
-	} else { ?>
-				<span class="status success"></span>
-				<span class="crondate" title="<?php p($absolute_time);?>">
-					<?php p($l->t("Last job ran %s.", [$relative_time]));?>
-				</span>
-			<?php }
-} else { ?>
-			<span class="status error"></span>
-			<?php p($l->t("Background job didn’t run yet!"));
-		} ?>
-	</p>
-	<a target="_blank" rel="noreferrer noopener" class="icon-info"
-	   title="<?php p($l->t('Open documentation'));?>"
-	   href="<?php p(link_to_docs('admin-background-jobs')); ?>"></a>
-
-	<p class="settings-hint"><?php p($l->t('For the server to work properly, it\'s important to configure background jobs correctly. "Cron" is the recommended setting. Please see the documentation for more information.'));?></p>
-	<form action="#">
-		<fieldset>
-			<legend class="hidden-visually"><?php p($l->t('Pick background job setting'));?></legend>
-			<p>
-				<input type="radio" name="mode" value="ajax" class="radio"
-					   id="backgroundjobs_ajax" <?php if ($_['backgroundjobs_mode'] === "ajax") {
-			print_unescaped('checked="checked"');
-		} ?>>
-				<label for="backgroundjobs_ajax">AJAX</label><br/>
-				<em><?php p($l->t("Execute one task with each page loaded. Use case: Single user instance.")); ?></em>
-			</p>
-			<p>
-				<input type="radio" name="mode" value="webcron" class="radio"
-					   id="backgroundjobs_webcron" <?php if ($_['backgroundjobs_mode'] === "webcron") {
-			print_unescaped('checked="checked"');
-		} ?>>
-				<label for="backgroundjobs_webcron">Webcron</label><br/>
-				<em><?php p($l->t("cron.php is registered at a webcron service to call cron.php every 5 minutes over HTTP. Use case: Very small instance (1–5 users depending on the usage).")); ?></em>
-			</p>
-			<p>
-				<input type="radio" name="mode" value="cron" class="radio"
-					   id="backgroundjobs_cron" <?php if ($_['backgroundjobs_mode'] === "cron") {
-			print_unescaped('checked="checked"');
-		}
-				if (!$_['cli_based_cron_possible']) {
-					print_unescaped('disabled');
-				}?>>
-				<label for="backgroundjobs_cron">Cron (<?php p($l->t("Recommended")); ?>)</label><br/>
-				<em><?php p($l->t("Use system cron service to call the cron.php file every 5 minutes. Recommended for all instances.")); ?>
-					<?php if ($_['cli_based_cron_possible']) {
-					p($l->t('The cron.php needs to be executed by the system user "%s".', [$_['cli_based_cron_user']]));
-				} else {
-					print_unescaped(str_replace(
-							['{linkstart}', '{linkend}'],
-							['<a href="https://www.php.net/manual/en/book.posix.php">', ' ↗</a>'],
-							$l->t('To run this you need the PHP POSIX extension. See {linkstart}PHP documentation{linkend} for more details.')
-						));
-				} ?></em>
-
-			</p>
-		</fieldset>
-	</form>
-</div>
+<div id="vue-admin-background-job"></div>
 
 <?php if ($_['profileEnabledGlobally']) : ?>
-	<div class="vue-admin-profile-settings"></div>
+	<div id="vue-admin-profile-settings"></div>
 <?php endif; ?>
diff --git a/apps/settings/tests/Settings/Admin/ServerTest.php b/apps/settings/tests/Settings/Admin/ServerTest.php
index acabf9abf5e..c5958c29421 100644
--- a/apps/settings/tests/Settings/Admin/ServerTest.php
+++ b/apps/settings/tests/Settings/Admin/ServerTest.php
@@ -38,6 +38,7 @@ use OCP\AppFramework\Services\IInitialState;
 use OCP\AppFramework\Utility\ITimeFactory;
 use OCP\IConfig;
 use OCP\IDBConnection;
+use OCP\IUrlGenerator;
 use OCP\IL10N;
 use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
@@ -60,6 +61,8 @@ class ServerTest extends TestCase {
 	private $config;
 	/** @var IL10N|MockObject */
 	private $l10n;
+	/** @var IUrlGenerator|MockObject */
+	private $urlGenerator;
 
 	protected function setUp(): void {
 		parent::setUp();
@@ -69,6 +72,7 @@ class ServerTest extends TestCase {
 		$this->timeFactory = $this->createMock(ITimeFactory::class);
 		$this->config = $this->createMock(IConfig::class);
 		$this->l10n = $this->createMock(IL10N::class);
+		$this->urlGenerator = $this->createMock(IUrlGenerator::class);
 
 		$this->admin = $this->getMockBuilder(Server::class)
 			->onlyMethods(['cronMaxAge'])
@@ -77,6 +81,7 @@ class ServerTest extends TestCase {
 				$this->initialStateService,
 				$this->profileManager,
 				$this->timeFactory,
+				$this->urlGenerator,
 				$this->config,
 				$this->l10n,
 			])
@@ -95,8 +100,8 @@ class ServerTest extends TestCase {
 		$this->config
 			->expects($this->at(1))
 			->method('getAppValue')
-			->with('core', 'lastcron', false)
-			->willReturn(false);
+			->with('core', 'lastcron', '0')
+			->willReturn('0');
 		$this->config
 			->expects($this->at(2))
 			->method('getAppValue')
@@ -110,12 +115,6 @@ class ServerTest extends TestCase {
 			'settings',
 			'settings/admin/server',
 			[
-				'backgroundjobs_mode' => 'ajax',
-				'lastcron' => false,
-				'cronErrors' => '',
-				'cronMaxAge' => 1337,
-				'cli_based_cron_possible' => true,
-				'cli_based_cron_user' => function_exists('posix_getpwuid') ? posix_getpwuid(fileowner(\OC::$configDir . 'config.php'))['name'] : '', // to not explode here because of posix extension not being disabled - which is already checked in the line above
 				'profileEnabledGlobally' => true,
 			],
 			''