Merge pull request #2 from gitcoindev/move-log-app

Move log app
ubiquity · Oct 5, 2023 · 16e28ff · 16e28ff
2 parents a2cd6d6 + 0ab3135
commit 16e28ff
Show file tree

Hide file tree

Showing 16 changed files with 3,596 additions and 4,589 deletions.
diff --git a/.commitlintrc b/.commitlintrc
@@ -1,3 +1,3 @@
 {
-    "extends": ["@commitlint/config-conventional"]
-  }
+  "extends": ["@commitlint/config-conventional"]
+}
diff --git a/README.md b/README.md
@@ -1,8 +1 @@
-# `@ubiquity/ts-template`
-
-This template repository includes support for the following:
-
-- TypeScript
-- Environment Variables
-- Conventional Commits
-- Automatic publishing of pull requests to Cloudflare Pages
+# Ubiquibot-logging App
diff --git a/_worker.ts b/_worker.ts
@@ -0,0 +1,9 @@
+import { Env } from "./types/global";
+
+export default {
+  async fetch(request: Request, env: Env) {
+    // Otherwise, serve the static assets.
+    // Without this, the Worker will error and no assets will be served.
+    return env.ASSETS.fetch(request);
+  },
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Log Viewer</title>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+
+  <body>
+    <div class="log-container">
+      <select id="filter">
+        <option value="all">All</option>
+        <option value="error">Error</option>
+        <option value="warn">Warning</option>
+        <option value="info">Info</option>
+        <option value="verbose">Verbose</option>
+        <option value="debug">Debug</option>
+      </select>
+      <button id="clear">Clear</button>
+    </div>
+    <table id="log-table">
+      <thead>
+        <tr>
+          <th>Message</th>
+          <th>Level</th>
+          <th>Timestamp</th>
+          <th>Comment URL</th>
+        </tr>
+      </thead>
+      <tbody id="log-body"></tbody>
+    </table>
+    <div id="json-modal" class="modal">
+      <div class="modal-content">
+        <span id="close-modal" class="close">&times;</span>
+        <pre id="json-content" class="json-content"></pre>
+      </div>
+    </div>
+    <script>
+      var exports = {};
+    </script>
+    <script type="application/javascript" src="./scripts/index.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,39 +1,38 @@
 {
-  "name": "ts-template",
+  "name": "ubiquibot-logging",
   "version": "1.0.0",
-  "description": "Template repository with TypeScript support.",
+  "description": "UbiquiBot Public Log Viewer",
   "main": "index.ts",
   "author": "Ubiquity DAO",
   "license": "MIT",
   "engines": {
-    "node": ">=v20.3.0"
+    "node": ">=v20.3.2"
   },
   "scripts": {
     "format": "run-s format:prettier format:lint",
     "format:lint": "eslint --fix .",
     "format:prettier": "prettier --write ."
   },
-  "keywords": [
-    "typescript",
-    "template",
-    "dao",
-    "ubiquity",
-    "open-source"
-  ],
-  "dependencies": {
-    "dotenv": "^16.3.1"
-  },
   "devDependencies": {
+    "@cloudflare/workers-types": "^3.2.0",
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
+    "@supabase/supabase-js": "^2.32.0",
     "@types/node": "^20.3.2",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
+    "esbuild": "^0.19.2",
     "eslint": "^8.43.0",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "tsx": "^3.12.7",
     "typescript": "^5.1.0"
-  }
-}
+  },
+  "keywords": [
+    "typescript",
+    "dao",
+    "ubiquity",
+    "open-source"
+  ]
+}
diff --git a/scripts/constants/index.ts b/scripts/constants/index.ts
@@ -0,0 +1,3 @@
+export const SUPABASE_URL = "https://qzfjblxdroqrmlheoajw.supabase.co";
+export const SUPABASE_KEY =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF6ZmpibHhkcm9xcm1saGVvYWp3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODA4NTMwMzMsImV4cCI6MTk5NjQyOTAzM30.BM_qkpX-egNdiMc0PDO_34bIaXHB7ewnr2k4U2hGFMM";
diff --git a/scripts/esbuild-config.ts b/scripts/esbuild-config.ts
@@ -0,0 +1,19 @@
+import esbuild from "esbuild";
+const typescriptEntries = ["scripts/helpers/utils.ts", "scripts/index.ts", "scripts/constants/index.ts"];
+export const entries = [...typescriptEntries];
+
+export const esBuildContext = {
+  sourcemap: false,
+  entryPoints: entries,
+  bundle: true,
+  minify: false,
+  loader: {
+    ".png": "dataurl",
+    ".woff": "dataurl",
+    ".woff2": "dataurl",
+    ".eot": "dataurl",
+    ".ttf": "dataurl",
+    ".svg": "dataurl",
+  },
+  outdir: "scripts",
+} as esbuild.BuildOptions;
diff --git a/scripts/esbuild.ts b/scripts/esbuild.ts
@@ -0,0 +1,3 @@
+import esbuild from "esbuild";
+import { esBuildContext } from "./esbuild-config";
+await esbuild.build(esBuildContext);
diff --git a/scripts/helpers/utils.ts b/scripts/helpers/utils.ts
@@ -0,0 +1,66 @@
+export enum Level {
+  ERROR = "error",
+  WARN = "warn",
+  INFO = "info",
+  HTTP = "http",
+  VERBOSE = "verbose",
+  DEBUG = "debug",
+  SILLY = "silly",
+}
+
+export const createGitHubCommentURL = (orgName: string, repoName: string, issueNumber: number, commentId: number) => {
+  return `https://github.com/${orgName}/${repoName}/issues/${issueNumber}#issuecomment-${commentId}`;
+};
+
+export const isValidJson = (jsonString) => {
+  try {
+    JSON.parse(jsonString);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const generateRandomId = (length) => {
+  return [...Array(length)].map(() => Math.random().toString(36)[2]).join("");
+};
+
+export const containsValidJson = (message: string): [boolean, string, string] => {
+  const jsonMatches = message.match(/\{.*\}/g); // Find JSON-like substrings
+  if (!jsonMatches) {
+    return [false, "", ""];
+  }
+
+  for (const match of jsonMatches) {
+    if (isValidJson(match)) {
+      const braceIndex = message.indexOf("{");
+      if (braceIndex !== -1) {
+        return [true, match, message.substring(0, braceIndex)];
+      }
+      return [true, match, ""];
+    }
+  }
+
+  return [false, "", ""];
+};
+
+export const getLevelString = (level: number) => {
+  switch (level) {
+    case 0:
+      return Level.ERROR;
+    case 1:
+      return Level.WARN;
+    case 2:
+      return Level.INFO;
+    case 3:
+      return Level.HTTP;
+    case 4:
+      return Level.VERBOSE;
+    case 5:
+      return Level.DEBUG;
+    case 6:
+      return Level.SILLY;
+    default:
+      return -1; // Invalid level
+  }
+};
diff --git a/scripts/index.ts b/scripts/index.ts
@@ -0,0 +1,99 @@
+import { containsValidJson, createGitHubCommentURL, generateRandomId, getLevelString } from "./helpers/utils";
+import { Logs } from "./types/log";
+import { createClient } from "@supabase/supabase-js";
+import { SUPABASE_URL, SUPABASE_KEY } from "./constants/index";
+
+const filterSelect = document.getElementById("filter") as unknown as HTMLSelectElement;
+const clearButton = document.getElementById("clear") as HTMLButtonElement;
+const logBody = document.getElementById("log-body") as HTMLDivElement;
+
+const jsonModal = document.getElementById("json-modal") as HTMLDivElement;
+const closeModalButton = document.getElementById("close-modal") as HTMLButtonElement;
+const jsonContent = document.getElementById("json-content") as HTMLDivElement;
+
+const openJsonModal = (validJson) => {
+  jsonContent.textContent = validJson;
+
+  jsonModal.style.display = "flex";
+};
+
+const updateLogTable = () => {
+  const selectedFilter = filterSelect.value;
+  const filteredLogs = selectedFilter === "all" ? logs : logs.filter((log) => getLevelString(log.level) === selectedFilter);
+
+  logBody.innerHTML = "";
+  filteredLogs.forEach((log) => {
+    const classId = generateRandomId(10);
+    const commentUrl = createGitHubCommentURL(log.org_name, log.repo_name, log.issue_number, log.comment_id);
+    const row = document.createElement("tr");
+    const [validJson, match, beforeText] = containsValidJson(log.log_message);
+    row.innerHTML = `
+        ${
+          validJson
+            ? `<td class="log-cell">${beforeText} - <button id="button_${classId}">Show JSON</button></td>`
+            : `<td class="log-cell">${log.log_message}</td>`
+        }
+        <td>${getLevelString(log.level)}</td>
+        <td>${log.timestamp}</td>
+        <td><a href="${commentUrl}">Comment - ${log.comment_id}</a></td>
+    `;
+    logBody.appendChild(row);
+    const logCell = document.getElementsByClassName("log-cell");
+    if (validJson) {
+      // show modal button for valid json row
+      const showMoreButton = document.getElementById(`button_${classId}`) as HTMLButtonElement;
+      showMoreButton.addEventListener("click", () => {
+        if (validJson) {
+          openJsonModal(JSON.stringify(JSON.parse(match), null, 2)); // properly formatted json
+        }
+      });
+    }
+    // scroll to last added data
+    logCell[logCell.length - 1].scrollIntoView();
+  });
+};
+
+let logs: Logs[] = [];
+
+const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);
+
+supabaseClient
+  .channel("table-db-changes")
+  .on(
+    "postgres_changes",
+    {
+      event: "INSERT",
+      schema: "public",
+      table: "logs",
+    },
+    (payload) => handlePayload(payload)
+  )
+  .subscribe();
+
+const handlePayload = (logEntry) => {
+  if (logEntry?.eventType !== "INSERT") return;
+  logs.push(logEntry.new);
+  updateLogTable();
+};
+
+filterSelect.addEventListener("change", () => {
+  updateLogTable();
+});
+
+clearButton.addEventListener("click", () => {
+  logs = [];
+  updateLogTable();
+});
+
+closeModalButton.addEventListener("click", () => {
+  jsonModal.style.display = "none";
+});
+
+window.addEventListener("click", (event) => {
+  if (event.target === jsonModal) {
+    jsonModal.style.display = "none";
+  }
+});
+
+// Initial update
+updateLogTable();
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "esModuleInterop": true,
+    "module": "CommonJS",
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "lib": ["esnext", "dom", "dom.iterable"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+  },
+  "include": ["./helpers", "./constants", "./index.ts"],
+  "exclude": ["./esbuild.ts", "./esbuild-config.ts"]
+}
diff --git a/scripts/types/log.ts b/scripts/types/log.ts
@@ -0,0 +1,9 @@
+export type Logs = {
+  timestamp: string;
+  log_message: string;
+  level: number;
+  repo_name: string;
+  org_name: string;
+  comment_id: number;
+  issue_number: number;
+};