Merge branch 'main' into d-dev2

# Conflicts: # new-log-viewer/src/services/LogFileManager.ts # new-log-viewer/src/typings/decoders.ts
davemarco · Sep 2, 2024 · f6aabce · f6aabce
2 parents 4265e86 + 867b72e
commit f6aabce
Show file tree

Hide file tree

Showing 19 changed files with 420 additions and 79 deletions.
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
@@ -0,0 +1,44 @@
+name: "lint"
+
+on:
+  pull_request:
+    types: ["opened", "reopened"]
+  push:
+  schedule:
+    # Run at midnight UTC every day with 15 minutes delay added to avoid high load periods
+    - cron: "15 0 * * *"
+  workflow_dispatch:
+
+permissions:
+  # So the workflow can cancel in-progress jobs
+  actions: "write"
+
+concurrency:
+  group: "${{github.workflow}}-${{github.ref}}"
+  # Cancel in-progress jobs for efficiency
+  cancel-in-progress: true
+
+jobs:
+  lint-check:
+    runs-on: "ubuntu-latest"
+    permissions:
+      # So `eslint-annotate-action` can create / update status checks
+      checks: "write"
+      # So `eslint-annotate-action` can get pull request files
+      contents: "read"
+    steps:
+      - uses: "actions/checkout@v4"
+        with:
+          submodules: "recursive"
+      - uses: "actions/setup-node@v4"
+        with:
+          node-version: 22
+      - run: "npm --prefix new-log-viewer/ clean-install"
+      - run: "npm --prefix new-log-viewer/ run lint:ci"
+        continue-on-error: true
+      - uses: "ataylorme/eslint-annotate-action@v3"
+        with:
+          fail-on-error: true
+          fail-on-warning: true
+          only-pr-files: true
+          report-json: "./new-log-viewer/eslint-report.json"
diff --git a/new-log-viewer/package-lock.json b/new-log-viewer/package-lock.json
diff --git a/new-log-viewer/package.json b/new-log-viewer/package.json
@@ -5,6 +5,10 @@
   "main": "src/index.tsx",
   "scripts": {
     "build": "webpack --config webpack.prod.js",
+    "lint": "npm run lint:check",
+    "lint:ci": "npm run lint:check -- --output-file eslint-report.json --format json",
+    "lint:check": "eslint src webpack.*.js",
+    "lint:fix": "npm run lint:check -- --fix",
     "start": "webpack serve --open --config webpack.dev.js"
   },
   "repository": {
@@ -19,6 +23,7 @@
   "homepage": "https://github.com/y-scope/yscope-log-viewer#readme",
   "dependencies": {
     "axios": "^1.7.2",
+    "clp-ffi-js": "^0.1.0",
     "dayjs": "^1.11.11",
     "monaco-editor": "^0.50.0",
     "react": "^18.3.1",

diff --git a/new-log-viewer/public/index.html b/new-log-viewer/public/index.html
@@ -7,6 +7,9 @@
     <meta name="keywords"
           content="yscope clp debug debugging large log logs s3 scanner viewer vscode">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" crossorigin href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
 </head>
 <body>
 <div id="root"></div>

diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css
@@ -0,0 +1,31 @@
+.drop-file-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.drop-file-children {
+    width: 100%;
+    height: 100%;
+}
+
+.hover-mask {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(2, 88, 168, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--ylv-drop-file-container-hover-mask-z-index);
+}
+
+.hover-message {
+    padding: 8px;
+    color: #616161;
+    font-size: 0.875rem;
+    font-family: var(--ylv-ui-font-family), sans-serif;
+    background-color: #f3f3f3;
+    z-index: var(--ylv-drop-file-container-hover-message-z-index);
+}
diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx
@@ -0,0 +1,96 @@
+import React, {
+    useContext,
+    useState,
+} from "react";
+
+import {StateContext} from "../../contexts/StateContextProvider";
+import {CURSOR_CODE} from "../../typings/worker";
+
+import "./index.css";
+
+
+interface DropFileContextProviderProps {
+    children: React.ReactNode;
+}
+
+/**
+ * A container element to add drag & drop functionality to the child elements.
+ *
+ * @param props
+ * @param props.children
+ * @return
+ */
+const DropFileContainer = ({children}: DropFileContextProviderProps) => {
+    const {loadFile} = useContext(StateContext);
+    const [isFileHovering, setIsFileHovering] = useState(false);
+
+    const handleDrag = (ev: React.DragEvent<HTMLDivElement>) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        if ("dragenter" === ev.type) {
+            setIsFileHovering(true);
+        } else if ("dragleave" === ev.type) {
+            // Only stop the hover effect if the pointer leaves the bounding rectangle of the
+            // DropFileContainer.
+            //
+            // NOTE: "dragleave" could get fired when the wrapped `children` receive focus. Setting
+            // `pointer-events: none` on the children is viable but could cause the children to be
+            // unresponsive. So instead, we use the solution below.
+            const {bottom, left, right, top} = ev.currentTarget.getBoundingClientRect();
+            if (ev.clientX >= left && ev.clientX <= right &&
+                ev.clientY >= top && ev.clientY <= bottom) {
+                return;
+            }
+
+            setIsFileHovering(false);
+        }
+    };
+
+    const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        setIsFileHovering(false);
+
+        const [file] = ev.dataTransfer.files;
+        if ("undefined" === typeof file) {
+            console.warn("No file dropped.");
+
+            return;
+        }
+        loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
+    };
+
+    return (
+        <div
+            className={"drop-file-container"}
+            onDragEnter={handleDrag}
+            onDragLeave={handleDrag}
+            onDragOver={handleDrag}
+            onDrop={handleDrop}
+        >
+            <div
+                className={"drop-file-children"}
+                onDrop={handleDrop}
+            >
+                {children}
+                {isFileHovering && (
+                    <div
+                        className={"hover-mask"}
+                        onDrop={handleDrop}
+                    >
+                        <div
+                            className={"hover-message"}
+                            onDrop={handleDrop}
+                        >
+                            Drop file to view
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DropFileContainer;
diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts b/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts
@@ -41,6 +41,7 @@ const createMonacoEditor = (
     const editor = monaco.editor.create(
         editorContainer,
         {
+            // eslint-disable-next-line no-warning-comments
             // TODO: Add custom observer to debounce automatic layout
             automaticLayout: true,
             maxTokenizationLineLength: 30_000,

diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx
@@ -19,15 +19,18 @@ import {
     LOCAL_STORAGE_KEY,
     THEME_NAME,
 } from "../typings/config";
+import {CURSOR_CODE} from "../typings/worker";
 import {ACTION_NAME} from "../utils/actions";
 import {
     getConfig,
     setConfig,
 } from "../utils/config";
+import {openFile} from "../utils/file";
 import {
     getFirstItemNumInNextChunk,
     getLastItemNumInPrevChunk,
 } from "../utils/math";
+import DropFileContainer from "./DropFileContainer";
 import Editor from "./Editor";
 import {goToPositionAndCenter} from "./Editor/MonacoInstance/utils";
 
@@ -164,8 +167,10 @@ const handleLogEventNumInputChange = (ev: React.ChangeEvent<HTMLInputElement>) =
  */
 const Layout = () => {
     const {
-        pageNum,
+        fileName,
+        loadFile,
         numEvents,
+        pageNum,
     } = useContext(StateContext);
     const {logEventNum} = useContext(UrlContext);
 
@@ -176,6 +181,12 @@ const Layout = () => {
         copyPermalinkToClipboard({}, {logEventNum: numEvents});
     };
 
+    const handleOpenFileButtonClick = () => {
+        openFile((file) => {
+            loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null});
+        });
+    };
+
     /**
      * Handles custom actions in the editor.
      *
@@ -251,15 +262,25 @@ const Layout = () => {
                     PageNum -
                     {" "}
                     {pageNum}
+                    {" "}
+                    | FileName -
+                    {" "}
+                    {fileName}
                 </h3>
 
                 <button onClick={handleCopyLinkButtonClick}>
                     Copy link to last log
                 </button>
 
+                <button onClick={handleOpenFileButtonClick}>
+                    Open File
+                </button>
+
                 <ConfigForm/>
                 <div style={{flexDirection: "column", flexGrow: 1}}>
-                    <Editor onCustomAction={handleCustomAction}/>
+                    <DropFileContainer>
+                        <Editor onCustomAction={handleCustomAction}/>
+                    </DropFileContainer>
                 </div>
             </div>
         </>