feat: worked on YouTube module, adding api request results to api request view

backend/logic/youtube.js

@@ -896,11 +896,17 @@ class _YouTubeModule extends CoreClass {
 							table: "youtubeApiRequestParams",
 							key: apiRequestId.toString()
 						}).then(apiRequestParams => {
-							resolve({
-								apiRequest: {
-									...apiRequest._doc,
-									params: apiRequestParams
-								}
+							CacheModule.runJob("HGET", {
+								table: "youtubeApiRequestResults",
+								key: apiRequestId.toString()
+							}).then(apiRequestResults => {
+								resolve({
+									apiRequest: {
+										...apiRequest._doc,
+										params: apiRequestParams,
+										results: apiRequestResults
+									}
+								});
 							});
 						});
 					}

frontend/package-lock.json

@@ -22,6 +22,7 @@
         "toasters": "^2.3.1",
         "vue": "3.2.31",
         "vue-content-loader": "^2.0.1",
+        "vue-json-pretty": "^2.1.0",
         "vue-loader": "^17.0.0",
         "vue-router": "^4.0.14",
         "vue-tippy": "^6.0.0-alpha.57",
@@ -51,6 +52,7 @@
         "less": "^4.1.2",
         "less-loader": "^10.2.0",
         "prettier": "^2.6.2",
+        "style-loader": "^3.3.1",
         "style-resources-loader": "^1.5.0",
         "vue-style-loader": "^4.1.3",
         "webpack-cli": "^4.9.2",
@@ -7276,6 +7278,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/style-resources-loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.5.0.tgz",
@@ -7764,6 +7782,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-json-pretty": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-2.1.0.tgz",
+      "integrity": "sha512-SPSNacJCTKx52nEXB3Nl8cEFgW4j7DHbdb1w0BEQkGMjoM51Y/8Zj4QfjaoiHseDbBuG7CYjDTvIuKe9Ln5qRw==",
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 5.0.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",
@@ -13958,6 +13988,13 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
     },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "requires": {}
+    },
     "style-resources-loader": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.5.0.tgz",
@@ -14382,6 +14419,12 @@
         }
       }
     },
+    "vue-json-pretty": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-json-pretty/-/vue-json-pretty-2.1.0.tgz",
+      "integrity": "sha512-SPSNacJCTKx52nEXB3Nl8cEFgW4j7DHbdb1w0BEQkGMjoM51Y/8Zj4QfjaoiHseDbBuG7CYjDTvIuKe9Ln5qRw==",
+      "requires": {}
+    },
     "vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",

frontend/package.json

@@ -36,6 +36,7 @@
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "prettier": "^2.6.2",
+    "style-loader": "^3.3.1",
     "style-resources-loader": "^1.5.0",
     "vue-style-loader": "^4.1.3",
     "webpack-cli": "^4.9.2",
@@ -55,6 +56,7 @@
     "toasters": "^2.3.1",
     "vue": "3.2.31",
     "vue-content-loader": "^2.0.1",
+    "vue-json-pretty": "^2.1.0",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.14",
     "vue-tippy": "^6.0.0-alpha.57",

frontend/src/pages/Admin/YouTube.vue

@@ -87,6 +87,13 @@
 					</ul>
 					<span v-else>None/Not found</span>
 				</div>
+				<div>
+					<b>Results:</b>
+					<vue-json-pretty
+						:data="currentApiRequest.results"
+						:show-length="true"
+					></vue-json-pretty>
+				</div>
 				<p><b>Date:</b> {{ currentApiRequest.date }}</p>
 				<p><b>Quota cost:</b> {{ currentApiRequest.quotaCost }}</p>
 			</div>
@@ -95,12 +102,17 @@
 </template>
 
 <script>
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
 import { mapGetters } from "vuex";
 
 import ws from "@/ws";
 
 export default {
-	components: {},
+	components: {
+		VueJsonPretty
+	},
 	data() {
 		return {
 			quotaStatus: {},

frontend/webpack.common.js

@@ -147,6 +147,13 @@ module.exports = {
 				loader: "babel-loader",
 				exclude: /node_modules/
 			},
+			{
+				test: /\.css$/,
+				use: [
+				  'style-loader',
+				  'css-loader'
+				]
+			},
 			{
 				test: /\.less$/i,
 				exclude: /node_modules/,