refactor: cache page to table

display notif cache too

public/language/en-GB/admin/advanced/cache.json

@@ -4,6 +4,7 @@
 	"group-cache": "Group Cache",
 	"local-cache": "Local Cache",
 	"object-cache": "Object Cache",
+	"notification-cache": "Notification Cache",
 	"percent-full": "%1% Full",
 	"post-cache-size": "Post Cache Size",
 	"items-in-cache": "Items in Cache"

src/controllers/admin/cache.js

@@ -10,6 +10,7 @@ cacheController.get = async function (req, res) {
 	const groupCache = require('../../groups').cache;
 	const { objectCache } = require('../../database');
 	const localCache = require('../../cache');
+	const { delayCache } = require('../../notifications');
 	const uptimeInSeconds = process.uptime();
 	function getInfo(cache) {
 		return {
@@ -32,6 +33,7 @@ cacheController.get = async function (req, res) {
 		post: postCache,
 		group: groupCache,
 		local: localCache,
+		notification: delayCache,
 	};
 	if (objectCache) {
 		caches.object = objectCache;

src/notifications.js

@@ -30,6 +30,8 @@ const notificationCache = ttlCache({
 	dispose: sendEmail,
 });
 
+Notifications.delayCache = notificationCache;
+
 Notifications.baseTypes = [
 	'notificationType_upvote',
 	'notificationType_new-topic',

src/socket.io/admin/cache.js

@@ -6,13 +6,7 @@ const db = require('../../database');
 const plugins = require('../../plugins');
 
 SocketCache.clear = async function (socket, data) {
-	let caches = {
+	const caches = await getAvailableCaches();
-		post: require('../../posts/cache').getOrCreate(),
-		object: db.objectCache,
-		group: require('../../groups').cache,
-		local: require('../../cache'),
-	};
-	caches = await plugins.hooks.fire('filter:admin.cache.get', caches);
 	if (!caches[data.name]) {
 		return;
 	}
@@ -20,15 +14,20 @@ SocketCache.clear = async function (socket, data) {
 };
 
 SocketCache.toggle = async function (socket, data) {
-	let caches = {
+	const caches = await getAvailableCaches();
-		post: require('../../posts/cache').getOrCreate(),
-		object: db.objectCache,
-		group: require('../../groups').cache,
-		local: require('../../cache'),
-	};
-	caches = await plugins.hooks.fire('filter:admin.cache.get', caches);
 	if (!caches[data.name]) {
 		return;
 	}
 	caches[data.name].enabled = data.enabled;
 };
+
+async function getAvailableCaches() {
+	const caches = {
+		post: require('../../posts/cache').getOrCreate(),
+		object: db.objectCache,
+		group: require('../../groups').cache,
+		local: require('../../cache'),
+		notification: require('../../notifications').delayCache,
+	};
+	return await plugins.hooks.fire('filter:admin.cache.get', caches);
+}

src/views/admin/advanced/cache.tpl

@@ -9,66 +9,64 @@
 		</div>
 	</div>
 
-
+	<div>
-	<div class="row px-2">
+		<div class="table-responsive">
-		{{{ each caches }}}
+				<table class="table table-sm text-sm">
-		<div class="col-xl-3">
+					<thead>
-			<div class="card">
+						<tr>
-				<div class="card-header">
+							<td></td>
-					<div class="d-flex gap-2 justify-content-between align-items-center">
+							<td class="text-end">capacity</td>
-						<div class="d-flex gap-1 align-items-center">
+							<td class="text-end">count</td>
-							<div class="form-check form-switch text-sm" data-name="{@key}" style="min-height: initial;">
+							<td class="text-end">size</td>
-								<input class="form-check-input" type="checkbox" {{{if caches.enabled}}}checked{{{end}}}>
+							<td class="text-end">hits</td>
+							<td class="text-end">misses</td>
+							<td class="text-end">hit ratio</td>
+							<td class="text-end">hits/sec</td>
+							<td class="text-end">ttl</td>
+							<td></td>
+						</tr>
+					</thead>
+					<tbody class="text-xs">
+					{{{ each caches }}}
+					<tr class="align-middle">
+						<td>
+							<div class="d-flex gap-1 align-items-center">
+								<div class="form-check form-switch text-sm" data-name="{@key}" style="min-height: initial;">
+									<input class="form-check-input" type="checkbox" {{{if caches.enabled}}}checked{{{end}}}>
+								</div>
+								[[admin/advanced/cache:{@key}-cache]]
 							</div>
-							[[admin/advanced/cache:{@key}-cache]]
+						</td>
-						</div>
+						<td class="text-end">{./percentFull}%</td>
-						<div class="d-flex gap-1">
+						<td class="text-end">{{{if ./length}}}{./length}{{{else}}}{./itemCount}{{{end}}} </td>
-							<a href="{config.relative_path}/api/admin/advanced/cache/dump?name={@key}" class="btn btn-light btn-sm"><i class="fa fa-download"></i></a>
+						<td class="text-end">
-							<a class="btn btn-sm btn-danger clear" data-name="{@key}"><i class="fa fa-trash"></i></a>
+							{{{ if (@key == "post") }}}
-						</div>
+							<div class="d-flex justify-content-end align-items-center gap-1">
-					</div>
+							<a href="#" data-bs-toggle="tooltip" data-bs-title="Changing the post cache size requires a restart."><i class="fa-regular fa-circle-question"></i></a>
-				</div>
-				<div class="card-body">
-					<div class="progress mb-3" style="height:20px;">
-						<div class="progress-bar" role="progressbar" aria-valuenow="{./percentFull}" aria-valuemin="0" aria-valuemax="100" style="width: {./percentFull}%;">
-							[[admin/advanced/cache:percent-full, {./percentFull}]]
-						</div>
-					</div>
 
-					<div class="mb-2">
+							<input id="postCacheSize" style="width:100px;" type="text" class="text-end form-control form-control-sm" value="" data-field="postCacheSize">
-						<label>Size:</label> <span class="fw-bold">{{{if ./length}}}{./length}{{{else}}}{./itemCount}{{{end}}} / {{{if ./max}}}{./max}{{{else}}}{./maxSize}{{{end}}}</span>
-					</div>
 
-					<div class="mb-2">
+							</div>
-						<label>Hits:</label> <span class="fw-bold">{./hits}</span>
+							{{{ else }}}
-					</div>
+							{{{if ./max}}}{./max}{{{else}}}{./maxSize}{{{end}}}
-					<div class="mb-2">
+							{{{ end }}}
-						<label>Misses:</label> <span class="fw-bold">{./misses}</span>
+						</td>
-					</div>
+						<td class="text-end">{./hits}</td>
-					<div class="mb-2">
+						<td class="text-end">{./misses}</td>
-						<label>Hit Ratio:</label> <span class="fw-bold">{./hitRatio}</span>
+						<td class="text-end">{./hitRatio}</td>
-					</div>
+						<td class="text-end">{./hitsPerSecond}</td>
-					<div class="mb-2">
+						<td class="text-end">{./ttl}</td>
-						<label>Hits / Sec:</label> <span class="fw-bold">{./hitsPerSecond}</span>
+						<td class="">
-					</div>
+							<div class="d-flex justify-content-end gap-1">
-
+								<a href="{config.relative_path}/api/admin/advanced/cache/dump?name={@key}" class="btn btn-light btn-sm"><i class="fa fa-download"></i></a>
-					{{{ if ./ttl }}}
+								<a class="btn btn-sm btn-danger clear" data-name="{@key}"><i class="fa fa-trash"></i></a>
-					<div class="mb-2">
+							</div>
-						<label>TTL:</label> <span class="fw-bold">{./ttl}</span>
+						</td>
-					</div>
+					</tr>
 					{{{ end }}}
-					{{{ if (@key == "post") }}}
+					</tbody>
-					<hr/>
+				</table>
-					<div class="mb-3">
-						<label for="postCacheSize">[[admin/advanced/cache:post-cache-size]]</label>
-						<input id="postCacheSize" type="text" class="form-control" value="" data-field="postCacheSize">
-					</div>
-					{{{ end }}}
-
-				</div>
 			</div>
-		</div>
-		{{{ end }}}
 	</div>
 </div>