fix: removed deprecated 'statistics' admin page, removed chart.js package

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/package-lock.json

@@ -3985,11 +3985,6 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
-    "chart.js": {
-      "version": "3.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.0.0-rc.2.tgz",
-      "integrity": "sha512-j/URLMDPYdJRcDft4bVtbeA48qDjitXNcAMGXhDzI+yenvgTyKe+TJvz0ISrqHvsk826w0BpaTTm9wmo4nSbUA=="
-    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",

frontend/package.json

@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "chart.js": "^3.0.0-rc.2",
     "config": "^3.3.6",
     "date-fns": "^2.19.0",
     "eslint-config-airbnb-base": "^13.2.0",

frontend/src/pages/Admin/index.vue

@@ -93,18 +93,6 @@
 						<span>&nbsp;Statistics</span>
 					</router-link>
 				</li>
-				<li
-					:class="{ 'is-active': currentTab == 'newstatistics' }"
-					@click="showTab('newstatistics')"
-				>
-					<router-link
-						class="tab newstatistics"
-						to="/admin/newstatistics"
-					>
-						<i class="material-icons">show_chart</i>
-						<span>&nbsp;New Statistics</span>
-					</router-link>
-				</li>
 				<li
 					:class="{ 'is-active': currentTab == 'punishments' }"
 					@click="showTab('punishments')"
@@ -129,7 +117,6 @@
 		<news v-if="currentTab == 'news'" />
 		<users v-if="currentTab == 'users'" />
 		<statistics v-if="currentTab == 'statistics'" />
-		<new-statistics v-if="currentTab == 'newstatistics'" />
 		<punishments v-if="currentTab == 'punishments'" />
 	</div>
 </template>
@@ -149,7 +136,6 @@ export default {
 		News: () => import("./tabs/News.vue"),
 		Users: () => import("./tabs/Users.vue"),
 		Statistics: () => import("./tabs/Statistics.vue"),
-		NewStatistics: () => import("./tabs/NewStatistics.vue"),
 		Punishments: () => import("./tabs/Punishments.vue")
 	},
 	data() {
@@ -195,9 +181,6 @@ export default {
 				case "/admin/statistics":
 					this.currentTab = "statistics";
 					break;
-				case "/admin/newstatistics":
-					this.currentTab = "newstatistics";
-					break;
 				case "/admin/punishments":
 					this.currentTab = "punishments";
 					break;
@@ -268,10 +251,6 @@ export default {
 		color: var(--orange);
 		border-color: var(--orange);
 	}
-	.newstatistics {
-		color: var(--orange);
-		border-color: var(--orange);
-	}
 	.punishments {
 		color: var(--dark-orange);
 		border-color: var(--dark-orange);

frontend/src/pages/Admin/tabs/NewStatistics.vue

@@ -1,298 +0,0 @@
-<template>
-	<div class="container">
-		<metadata title="Admin | Statistics" />
-		<div class="columns">
-			<div
-				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Average Logs</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Status</th>
-									<th>Stage</th>
-									<th>Jobs in queue</th>
-									<th>Jobs in progress</th>
-									<th>Jobs paused</th>
-									<th>Concurrency</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="moduleItem in modules"
-									:key="moduleItem.name"
-								>
-									<td>
-										<router-link
-											:to="
-												'?moduleName=' + moduleItem.name
-											"
-											>{{ moduleItem.name }}</router-link
-										>
-									</td>
-									<td>{{ moduleItem.status }}</td>
-									<td>{{ moduleItem.stage }}</td>
-									<td>{{ moduleItem.jobsInQueue }}</td>
-									<td>{{ moduleItem.jobsInProgress }}</td>
-									<td>{{ moduleItem.jobsPaused }}</td>
-									<td>{{ moduleItem.concurrency }}</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-		<br />
-		<div class="columns" v-if="module">
-			<div
-				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Running tasks</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.runningTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-			<div
-				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Paused tasks</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.pausedTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-			<div
-				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Queued tasks</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th>Payload</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="job in module.queuedTasks"
-									:key="JSON.stringify(job)"
-								>
-									<td>{{ job.name }}</td>
-									<td>
-										{{ JSON.stringify(job.payload) }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-		<br />
-		<div class="columns" v-if="module">
-			<div
-				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
-			>
-				<header class="card-header">
-					<p class="card-header-title">Average Logs</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<table class="table">
-							<thead>
-								<tr>
-									<th>Job name</th>
-									<th>Successful</th>
-									<th>Failed</th>
-									<th>Total</th>
-									<th>Average timing</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr
-									v-for="(job,
-									jobName) in module.jobStatistics"
-									:key="jobName"
-								>
-									<td>{{ jobName }}</td>
-									<td>
-										{{ job.successful }}
-									</td>
-									<td>
-										{{ job.failed }}
-									</td>
-									<td>
-										{{ job.total }}
-									</td>
-									<td>
-										{{ job.averageTiming }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-import ws from "../../../ws";
-
-export default {
-	components: {},
-	data() {
-		return {
-			modules: [],
-			module: null
-		};
-	},
-	computed: mapGetters({
-		socket: "websockets/getSocket"
-	}),
-	mounted() {
-		if (this.socket.readyState === 1) this.init();
-		ws.onConnect(() => this.init());
-	},
-	methods: {
-		init() {
-			this.socket.dispatch("utils.getModules", data => {
-				console.log(data);
-				if (data.status === "success") {
-					this.modules = data.modules;
-				}
-			});
-
-			if (this.$route.query.moduleName) {
-				this.socket.dispatch(
-					"utils.getModule",
-					this.$route.query.moduleName,
-					data => {
-						console.log(data);
-						if (data.status === "success") {
-							this.module = {
-								runningJobs: data.runningJobs,
-								jobStatistics: data.jobStatistics
-							};
-						}
-					}
-				);
-			}
-		},
-		round(number) {
-			return Math.round(number);
-		}
-	}
-};
-</script>
-
-//
-<style lang="scss" scoped>
-.night-mode {
-	.table {
-		color: var(--light-grey-2);
-		background-color: var(--dark-grey-3);
-
-		thead tr {
-			background: var(--dark-grey-3);
-			td {
-				color: var(--white);
-			}
-		}
-
-		tbody tr:hover {
-			background-color: var(--dark-grey-4) !important;
-		}
-
-		tbody tr:nth-child(even) {
-			background-color: var(--dark-grey-2);
-		}
-
-		strong {
-			color: var(--light-grey-2);
-		}
-	}
-
-	.card {
-		background-color: var(--dark-grey-3);
-
-		p {
-			color: var(--light-grey-2);
-		}
-	}
-}
-
-body {
-	font-family: "Hind", sans-serif;
-}
-
-.user-avatar {
-	display: block;
-	max-width: 50px;
-	margin: 0 auto;
-}
-
-td {
-	vertical-align: middle;
-}
-
-.is-primary:focus {
-	background-color: var(--primary-color) !important;
-}
-</style>

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -13,87 +13,176 @@
 						<table class="table">
 							<thead>
 								<tr>
-									<th />
-									<th>Success</th>
-									<th>Error</th>
-									<th>Info</th>
+									<th>Name</th>
+									<th>Status</th>
+									<th>Stage</th>
+									<th>Jobs in queue</th>
+									<th>Jobs in progress</th>
+									<th>Jobs paused</th>
+									<th>Concurrency</th>
 								</tr>
 							</thead>
 							<tbody>
-								<tr>
-									<th><strong>Average per second</strong></th>
-									<th :title="logs.second.success">
-										{{ round(logs.second.success) }}
-									</th>
-									<th :title="logs.second.error">
-										{{ round(logs.second.error) }}
-									</th>
-									<th :title="logs.second.info">
-										{{ round(logs.second.info) }}
-									</th>
+								<tr
+									v-for="moduleItem in modules"
+									:key="moduleItem.name"
+								>
+									<td>
+										<router-link
+											:to="
+												'?moduleName=' + moduleItem.name
+											"
+											>{{ moduleItem.name }}</router-link
+										>
+									</td>
+									<td>{{ moduleItem.status }}</td>
+									<td>{{ moduleItem.stage }}</td>
+									<td>{{ moduleItem.jobsInQueue }}</td>
+									<td>{{ moduleItem.jobsInProgress }}</td>
+									<td>{{ moduleItem.jobsPaused }}</td>
+									<td>{{ moduleItem.concurrency }}</td>
 								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+		<br />
+		<div class="columns" v-if="module">
+			<div
+				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
+			>
+				<header class="card-header">
+					<p class="card-header-title">Running tasks</p>
+				</header>
+				<div class="card-content">
+					<div class="content">
+						<table class="table">
+							<thead>
 								<tr>
-									<th><strong>Average per minute</strong></th>
-									<th :title="logs.minute.success">
-										{{ round(logs.minute.success) }}
-									</th>
-									<th :title="logs.minute.error">
-										{{ round(logs.minute.error) }}
-									</th>
-									<th :title="logs.minute.info">
-										{{ round(logs.minute.info) }}
-									</th>
+									<th>Name</th>
+									<th>Payload</th>
 								</tr>
-								<tr>
-									<th><strong>Average per hour</strong></th>
-									<th :title="logs.hour.success">
-										{{ round(logs.hour.success) }}
-									</th>
-									<th :title="logs.hour.error">
-										{{ round(logs.hour.error) }}
-									</th>
-									<th :title="logs.hour.info">
-										{{ round(logs.hour.info) }}
-									</th>
+							</thead>
+							<tbody>
+								<tr
+									v-for="job in module.runningTasks"
+									:key="JSON.stringify(job)"
+								>
+									<td>{{ job.name }}</td>
+									<td>
+										{{ JSON.stringify(job.payload) }}
+									</td>
 								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div
+				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
+			>
+				<header class="card-header">
+					<p class="card-header-title">Paused tasks</p>
+				</header>
+				<div class="card-content">
+					<div class="content">
+						<table class="table">
+							<thead>
 								<tr>
-									<th><strong>Average per day</strong></th>
-									<th :title="logs.day.success">
-										{{ round(logs.day.success) }}
-									</th>
-									<th :title="logs.day.error">
-										{{ round(logs.day.error) }}
-									</th>
-									<th :title="logs.day.info">
-										{{ round(logs.day.info) }}
-									</th>
+									<th>Name</th>
+									<th>Payload</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr
+									v-for="job in module.pausedTasks"
+									:key="JSON.stringify(job)"
+								>
+									<td>{{ job.name }}</td>
+									<td>
+										{{ JSON.stringify(job.payload) }}
+									</td>
 								</tr>
 							</tbody>
 						</table>
 					</div>
 				</div>
 			</div>
-		</div>
-		<br />
-		<div class="columns">
 			<div
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
+				<header class="card-header">
+					<p class="card-header-title">Queued tasks</p>
+				</header>
 				<div class="card-content">
 					<div class="content">
-						<canvas id="minuteChart" height="400" />
+						<table class="table">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Payload</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr
+									v-for="job in module.queuedTasks"
+									:key="JSON.stringify(job)"
+								>
+									<td>{{ job.name }}</td>
+									<td>
+										{{ JSON.stringify(job.payload) }}
+									</td>
+								</tr>
+							</tbody>
+						</table>
 					</div>
 				</div>
 			</div>
 		</div>
 		<br />
-		<div class="columns">
+		<div class="columns" v-if="module">
 			<div
 				class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
 			>
+				<header class="card-header">
+					<p class="card-header-title">Average Logs</p>
+				</header>
 				<div class="card-content">
 					<div class="content">
-						<canvas id="hourChart" height="400" />
+						<table class="table">
+							<thead>
+								<tr>
+									<th>Job name</th>
+									<th>Successful</th>
+									<th>Failed</th>
+									<th>Total</th>
+									<th>Average timing</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr
+									v-for="(job,
+									jobName) in module.jobStatistics"
+									:key="jobName"
+								>
+									<td>{{ jobName }}</td>
+									<td>
+										{{ job.successful }}
+									</td>
+									<td>
+										{{ job.failed }}
+									</td>
+									<td>
+										{{ job.total }}
+									</td>
+									<td>
+										{{ job.averageTiming }}
+									</td>
+								</tr>
+							</tbody>
+						</table>
 					</div>
 				</div>
 			</div>
@@ -103,7 +192,6 @@
 
 <script>
 import { mapGetters } from "vuex";
-import { LineElement } from "chart.js";
 
 import ws from "../../../ws";
 
@@ -111,212 +199,41 @@ export default {
 	components: {},
 	data() {
 		return {
-			successUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			errorUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			infoUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			successUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			errorUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			infoUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-			minuteChart: null,
-			hourChart: null,
-			logs: {
-				second: {
-					success: 0,
-					error: 0,
-					info: 0
-				},
-				minute: {
-					success: 0,
-					error: 0,
-					info: 0
-				},
-				hour: {
-					success: 0,
-					error: 0,
-					info: 0
-				},
-				day: {
-					success: 0,
-					error: 0,
-					info: 0
-				}
-			}
+			modules: [],
+			module: null
 		};
 	},
 	computed: mapGetters({
 		socket: "websockets/getSocket"
 	}),
 	mounted() {
-		const minuteCtx = document.getElementById("minuteChart");
-		const hourCtx = document.getElementById("hourChart");
-
-		this.minuteChart = new LineElement(minuteCtx, {
-			data: {
-				labels: [
-					"-10",
-					"-9",
-					"-8",
-					"-7",
-					"-6",
-					"-5",
-					"-4",
-					"-3",
-					"-2",
-					"-1"
-				],
-				datasets: [
-					{
-						label: "Success",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(75, 192, 192, 0.2)"],
-						borderColor: ["rgba(75, 192, 192, 1)"],
-						borderWidth: 1
-					},
-					{
-						label: "Error",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(255, 99, 132, 0.2)"],
-						borderColor: ["rgba(255,99,132,1)"],
-						borderWidth: 1
-					},
-					{
-						label: "Info",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(54, 162, 235, 0.2)"],
-						borderColor: ["rgba(54, 162, 235, 1)"],
-						borderWidth: 1
-					}
-				]
-			},
-			options: {
-				title: {
-					display: true,
-					text: "Logs per minute"
-				},
-				scales: {
-					yAxes: [
-						{
-							ticks: {
-								beginAtZero: true,
-								stepSize: 1
-							}
-						}
-					]
-				},
-				responsive: true,
-				maintainAspectRatio: false
-			}
-		});
-
-		this.hourChart = new LineElement(hourCtx, {
-			data: {
-				labels: [
-					"-10",
-					"-9",
-					"-8",
-					"-7",
-					"-6",
-					"-5",
-					"-4",
-					"-3",
-					"-2",
-					"-1"
-				],
-				datasets: [
-					{
-						label: "Success",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(75, 192, 192, 0.2)"],
-						borderColor: ["rgba(75, 192, 192, 1)"],
-						borderWidth: 1
-					},
-					{
-						label: "Error",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(255, 99, 132, 0.2)"],
-						borderColor: ["rgba(255,99,132,1)"],
-						borderWidth: 1
-					},
-					{
-						label: "Info",
-						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-						backgroundColor: ["rgba(54, 162, 235, 0.2)"],
-						borderColor: ["rgba(54, 162, 235, 1)"],
-						borderWidth: 1
-					}
-				]
-			},
-			options: {
-				title: {
-					display: true,
-					text: "Logs per hour"
-				},
-				scales: {
-					yAxes: [
-						{
-							ticks: {
-								beginAtZero: true,
-								stepSize: 1
-							}
-						}
-					]
-				},
-				responsive: true,
-				maintainAspectRatio: false
-			}
-		});
-
 		if (this.socket.readyState === 1) this.init();
 		ws.onConnect(() => this.init());
 	},
 	methods: {
 		init() {
-			this.socket.dispatch("apis.joinAdminRoom", "statistics", () => {});
-			this.socket.on(
-				"event:admin.statistics.success.units.minute",
-				units => {
-					this.successUnitsPerMinute = units;
-					this.minuteChart.data.datasets[0].data = units;
-					this.minuteChart.update();
-				}
-			);
-			this.socket.on(
-				"event:admin.statistics.error.units.minute",
-				units => {
-					this.errorUnitsPerMinute = units;
-					this.minuteChart.data.datasets[1].data = units;
-					this.minuteChart.update();
-				}
-			);
-			this.socket.on(
-				"event:admin.statistics.info.units.minute",
-				units => {
-					this.infoUnitsPerMinute = units;
-					this.minuteChart.data.datasets[2].data = units;
-					this.minuteChart.update();
+			this.socket.dispatch("utils.getModules", data => {
+				console.log(data);
+				if (data.status === "success") {
+					this.modules = data.modules;
 				}
-			);
-			this.socket.on(
-				"event:admin.statistics.success.units.hour",
-				units => {
-					this.successUnitsPerHour = units;
-					this.hourChart.data.datasets[0].data = units;
-					this.hourChart.update();
-				}
-			);
-			this.socket.on("event:admin.statistics.error.units.hour", units => {
-				this.errorUnitsPerHour = units;
-				this.hourChart.data.datasets[1].data = units;
-				this.hourChart.update();
-			});
-			this.socket.on("event:admin.statistics.info.units.hour", units => {
-				this.infoUnitsPerHour = units;
-				this.hourChart.data.datasets[2].data = units;
-				this.hourChart.update();
-			});
-			this.socket.on("event:admin.statistics.logs", logs => {
-				this.logs = logs;
 			});
+
+			if (this.$route.query.moduleName) {
+				this.socket.dispatch(
+					"utils.getModule",
+					this.$route.query.moduleName,
+					data => {
+						console.log(data);
+						if (data.status === "success") {
+							this.module = {
+								runningJobs: data.runningJobs,
+								jobStatistics: data.jobStatistics
+							};
+						}
+					}
+				);
+			}
 		},
 		round(number) {
 			return Math.round(number);
@@ -325,6 +242,7 @@ export default {
 };
 </script>
 
+//
 <style lang="scss" scoped>
 .night-mode {
 	.table {