Add bulk actions to abuse reports page

svelte/src/admin_panel/AbuseReport.svelte

@@ -5,28 +5,14 @@ import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher()
 
 export let report
+export let ip_report_count
 let preview = false
 
+$: can_grant = report.status !== "granted"
+$: can_reject = report.status !== "rejected"
+
 let set_status = async (action, report_type) => {
-	const form = new FormData()
-	form.append("action", action)
-	if (action === "grant") {
-		form.append("type", report_type)
-	}
-
-	try {
-		const resp = await fetch(
-			window.api_endpoint+"/admin/abuse_report/"+report.id,
-			{ method: "POST", body: form }
-		);
-		if(resp.status >= 400) {
-			throw new Error(resp.text())
-		}
-
-		dispatch("refresh");
-	} catch (err) {
-		alert(err);
-	}
+	dispatch("resolve_report", {action: action, report_type: report_type})
 }
 </script>
 
@@ -56,12 +42,16 @@ let set_status = async (action, report_type) => {
 				<button class:button_highlight={preview} on:click={() => {preview = !preview}}>
 					<i class="icon">visibility</i> Preview
 				</button>
-				<button class="button_highlight" on:click={() => {set_status("grant", report.type)}}>
-					<i class="icon">done</i> Block ({report.type})
-				</button>
-				<button class="button_red" on:click={() => {set_status("reject", "")}}>
-					<i class="icon">delete</i> Ignore
-				</button>
+				{#if can_grant}
+					<button class="button_highlight" on:click={() => {set_status("grant", report.type)}}>
+						<i class="icon">done</i> Block ({report.type})
+					</button>
+				{/if}
+				{#if can_reject}
+					<button class="button_red" on:click={() => {set_status("reject", "")}}>
+						<i class="icon">delete</i> Ignore
+					</button>
+				{/if}
 			</div>
 			<div style="flex: 0 1 auto">
 				<button on:click={() => {set_status("grant", "terrorism")}}>terrorism</button>
@@ -87,6 +77,7 @@ let set_status = async (action, report_type) => {
 				<td>IP</td>
 				<td>Type</td>
 				<td>Status</td>
+				<td colspan="2">Reports from this IP</td>
 			</tr>
 			{#each report.reports as user_report}
 				<tr>
@@ -94,6 +85,19 @@ let set_status = async (action, report_type) => {
 					<td>{user_report.ip_address}</td>
 					<td>{user_report.type}</td>
 					<td>{user_report.status}</td>
+					<td>{ip_report_count[user_report.ip_address]}</td>
+					<td>
+						{#if can_grant}
+							<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "grant"})}>
+								Accept all
+							</button>
+						{/if}
+						{#if can_reject}
+							<button on:click={() => dispatch("resolve_by_ip", {ip: user_report.ip_address, action: "reject"})}>
+								Ignore all
+							</button>
+						{/if}
+					</td>
 				</tr>
 			{/each}
 		</table>

svelte/src/admin_panel/AbuseReports.svelte

@@ -11,22 +11,12 @@ let endPicker
 
 let tab = "pending"
 
-let refresh_timeout = null
-const resolve_report = (remove = -1) => {
-	if (remove >= 0) {
-		console.debug("removing item", remove)
-		reports.splice(remove, 1)
-		reports = reports
-	}
-
-	// If a refresh is already scheduled we remove it and schedule a new one
-	clearTimeout(refresh_timeout)
-	refresh_timeout = setTimeout(get_reports, 5000)
-}
-
 const get_reports = async () => {
 	loading = true;
 
+	// Remove refresh timeout if there is one
+	clearTimeout(refresh_timeout)
+
 	try {
 		const resp = await fetch(
 			window.api_endpoint+
@@ -75,6 +65,8 @@ const get_reports = async () => {
 				}
 			})
 		})
+
+		count_ip_reports()
 	} catch (err) {
 		alert(err);
 	} finally {
@@ -82,6 +74,74 @@ const get_reports = async () => {
 	}
 };
 
+let ip_report_count = {}
+const count_ip_reports = () => {
+	ip_report_count = {}
+	reports.forEach(v => {
+		// Count the number of pending reports per IP address
+		v.reports.forEach(v => {
+			if (ip_report_count[v.ip_address] === undefined) {
+				ip_report_count[v.ip_address] = 0
+			}
+			ip_report_count[v.ip_address]++
+		})
+	})
+}
+
+const resolve_report = async (report_id, action, report_type) => {
+	const form = new FormData()
+	form.append("action", action)
+	if (action === "grant") {
+		form.append("type", report_type)
+	}
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/admin/abuse_report/"+report_id,
+			{ method: "POST", body: form }
+		);
+		if(resp.status >= 400) {
+			throw new Error(resp.text())
+		}
+
+		remove_report(report_id)
+	} catch (err) {
+		alert(err);
+	}
+}
+
+const resolve_by_ip = (ip = "", action = "grant") => {
+	// Find which files were reported by this IP address
+	reports.forEach(report => {
+		report.reports.forEach(v => {
+			if (v.ip_address === ip) {
+				// We found a file which was reported by the same IP address
+				resolve_report(report.id, action, v.type)
+			}
+		})
+	})
+}
+
+let refresh_timeout = null
+const remove_report = (id = "") => {
+	// Find the report with our ID and remove it from the array
+	for (let i = 0; i < reports.length; i++) {
+		if (reports[i].id === id) {
+			console.debug("removing item", id)
+			reports.splice(i, 1)
+			reports = reports
+
+			// Update the report counts per IP address
+			count_ip_reports()
+			break
+		}
+	}
+
+	// If a refresh is already scheduled we remove it and schedule a new one
+	clearTimeout(refresh_timeout)
+	refresh_timeout = setTimeout(get_reports, 5000)
+}
+
 onMount(() => {
 	let start = new Date()
 	start.setDate(start.getDate() - 28)
@@ -122,8 +182,13 @@ onMount(() => {
 		</button>
 	</div>
 
-	{#each reports as report, i (report.id)}
-		<AbuseReport report={report} on:refresh={() => resolve_report(i)}/>
+	{#each reports as report (report.id)}
+		<AbuseReport
+			report={report}
+			ip_report_count={ip_report_count}
+			on:resolve_report={e => resolve_report(report.id, e.detail.action, e.detail.report_type)}
+			on:resolve_by_ip={e => resolve_by_ip(e.detail.ip, e.detail.action)}
+		/>
 	{/each}
 </section>