refactor(YouTube): Added logic for quota chart data

backend/logic/actions/youtube.js

@@ -29,6 +29,24 @@ export default {
 			});
 	}),
 
+	/**
+	 * Returns YouTube quota chart data
+	 *
+	 * @returns {{status: string, data: object}}
+	 */
+	getQuotaChartData: isAdminRequired(function getQuotaChartData(session, cb) {
+		YouTubeModule.runJob("GET_QUOTA_CHART_DATA", {}, this)
+			.then(data => {
+				this.log("SUCCESS", "YOUTUBE_GET_QUOTA_CHART_DATA", `Getting quota chart data was successful.`);
+				return cb({ status: "success", data });
+			})
+			.catch(async err => {
+				err = await UtilsModule.runJob("GET_ERROR", { error: err }, this);
+				this.log("ERROR", "YOUTUBE_GET_QUOTA_CHART_DATA", `Getting quota chart data failed. "${err}"`);
+				return cb({ status: "error", message: err });
+			});
+	}),
+
 	/**
 	 * Gets api requests, used in the admin youtube page by the AdvancedTable component
 	 *

backend/logic/youtube.js

@@ -268,6 +268,50 @@ class _YouTubeModule extends CoreClass {
 		});
 	}
 
+	GET_QUOTA_CHART_DATA(payload) {
+		return new Promise((resolve, reject) => {
+			const fromDate = new Date(new Date() - (8 * 24 * 60 * 60 * 1000));
+			YouTubeModule.youtubeApiRequestModel.aggregate([
+				{
+					$match: { date: { $gte: fromDate } }
+				},
+				{
+					$group: {
+						_id: { $dateToString: { format: "%Y-%m-%d", date: "$date" } },
+						usage: { $sum: "$quotaCost" },
+						count: { $sum: 1 }
+					}
+				},
+				{
+					$sort: { _id: 1 }
+				},
+				{
+					$project: { date: "$_id", usage: 1, count: 1 }
+				}
+			]).exec((err, data) => {
+				if (err) return reject(err);
+				return resolve({
+					quotaUsage: {
+						labels: data.map(row => row.date),
+						datasets: [{
+							label: "All",
+							data: data.map(row => row.usage),
+							borderColor: "rgb(2, 166, 242)"
+						}]
+					},
+					apiRequests: {
+						labels: data.map(row => row.date),
+						datasets: [{
+							label: "All",
+							data: data.map(row => row.count),
+							borderColor: "rgb(2, 166, 242)"
+						}]
+					}
+				});
+			});
+		});
+	}
+
 	/**
 	 * Gets the id of the channel upload playlist
 	 *

frontend/src/pages/Admin/YouTube/index.vue

@@ -13,10 +13,11 @@
 				<run-job-dropdown :jobs="jobs" />
 			</div>
 		</div>
-		<div class="card charts">
+		<div v-if="charts" class="card charts">
 			<div class="chart">
 				<h4 class="has-text-centered">Quota Usage</h4>
 				<line-chart
+					v-if="charts.quotaUsage"
 					chart-id="youtube-quota-usage"
 					:data="charts.quotaUsage"
 				/>
@@ -24,6 +25,7 @@
 			<div class="chart">
 				<h4 class="has-text-centered">API Requests</h4>
 				<line-chart
+					v-if="charts.apiRequests"
 					chart-id="youtube-api-requests"
 					:data="charts.apiRequests"
 				/>
@@ -239,43 +241,8 @@ export default {
 				}
 			},
 			charts: {
-				quotaUsage: {
-					labels: [
-						"Mon",
-						"Tues",
-						"Wed",
-						"Thurs",
-						"Fri",
-						"Sat",
-						"Sun"
-					],
-					datasets: [
-						{
-							label: "Type A",
-							data: [300, 122, 0, 67, 23, 280, 185],
-							fill: true,
-							borderColor: "rgb(2, 166, 242)"
-						}
-					]
-				},
-				apiRequests: {
-					labels: [
-						"Mon",
-						"Tues",
-						"Wed",
-						"Thurs",
-						"Fri",
-						"Sat",
-						"Sun"
-					],
-					datasets: [
-						{
-							label: "Type A",
-							data: [30, 6, 0, 9, 4, 26, 19],
-							borderColor: "rgb(2, 166, 242)"
-						}
-					]
-				}
+				quotaUsage: null,
+				apiRequests: null
 			},
 			jobs: [
 				{
@@ -304,6 +271,10 @@ export default {
 						this.quotaStatus = res.data.status;
 				}
 			);
+
+			this.socket.dispatch("youtube.getQuotaChartData", res => {
+				if (res.status === "success") this.charts = res.data;
+			});
 		},
 		getDateFormatted(createdAt) {
 			const date = new Date(createdAt);