add component ShowLog

2023-09-12 16:13:46 +07:00 · 2023-09-12 16:13:46 +07:00 · e62a4afe9a
parent a51028f16b
commit e62a4afe9a
10 changed files with 316 additions and 94 deletions
--- a/app/store/logs/20230912-fjghsk.log
+++ b/app/store/logs/20230912-fjghsk.log
@ -0,0 +1,2 @@
+sdfgsdfg
+sdf
--- a/app/store/logs/20230912-test-code.log
+++ b/app/store/logs/20230912-test-code.log
@ -23,4 +23,15 @@ anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
 anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
 anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
 123 PVDM3- hui 800G2-POE-2
-123 PVDM3- hui 800G2-POE-2
+123 PVDM3- hui 800G2-POE-2
+dfgkfdjkhlfdhkhjjkhjgf
+sdfsd DM3- hui 800G2-POE-
+123 PVDM3- hui 800G2-POE-2
+800G2-POE-2
+anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
+800G2-POE-2
+anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
+800G2-POE-2
+anfasll ak shflks as klhfalk la EHWIC- fsjklfjkl
+800G2-POE-2
+800G2-POE-2
--- a/app/utils/runtimeCheckLogs.ts
+++ b/app/utils/runtimeCheckLogs.ts
@ -45,18 +45,18 @@ export async function runtimeCheckLogs(folderPath) {
      if (
        //Sua \\ --> /
        filePath?.split(".")[filePath.split(".").length - 1] === "log" &&
-        filePath.split("/")[filePath.split("/").length - 1]?.split("-")[0] ===
+        filePath.split("\\")[filePath.split("\\").length - 1]?.split("-")[0] ===
          moment(Date.now()).format("YYYYMMDD").toString()
      ) {
        console.log("New file added: ", filePath);
-        await LogDetectFile.firstOrCreate(
-          { file_name: filePath.split("/")[filePath.split("/").length - 1] },
-          { file_name: filePath.split("/")[filePath.split("/").length - 1] }
-        );
        // await LogDetectFile.firstOrCreate(
-        //   { file_name: filePath.split("\\")[filePath.split("\\").length - 1] },
-        //   { file_name: filePath.split("\\")[filePath.split("\\").length - 1] }
+        //   { file_name: filePath.split("/")[filePath.split("/").length - 1] },
+        //   { file_name: filePath.split("/")[filePath.split("/").length - 1] }
        // );
+        await LogDetectFile.firstOrCreate(
+          { file_name: filePath.split("\\")[filePath.split("\\").length - 1] },
+          { file_name: filePath.split("\\")[filePath.split("\\").length - 1] }
+        );

        fileList_old = fileList;
        updateFileList();
@ -79,14 +79,27 @@ export async function runtimeCheckLogs(folderPath) {
          const filePath = `${folderPath}/${fileName}`;
          const scan = fs.watchFile(
            filePath,
-            { interval: 300000 },
+            { interval: 5000 },
            async (eventType) => {
              //check special item, extra RAM, error in log
              let lines = [];
+              let fileDetect = await LogDetectFile.findBy(
+                "file_name",
+                fileName
+              );
+
+              let logsDetect = await Database.rawQuery(
+                "select * from log_reports where id_file = " +
+                  fileDetect?.id_ldf
+              );
+
+              let lastLine = Math.max(...logsDetect[0].map((obj) => obj.line));
              let content = await fs
                .readFileSync(filePath)
                .toString()
-                ?.split("\n");
+                ?.split("\n")
+                .slice();
+
              let allValue = await KeyValue.all();
              let listKeyValues = allValue.filter(
                (i) =>
@ -122,6 +135,7 @@ export async function runtimeCheckLogs(folderPath) {
                        "file_name",
                        fileName
                      );
+
                      let checkLog = await Database.rawQuery(
                        "select * from log_reports where id_file = " +
                          log?.id_ldf +
@ -131,6 +145,7 @@ export async function runtimeCheckLogs(folderPath) {
                          value +
                          "'"
                      );
+
                      if (checkLog[0].length === 0) {
                        await LogReport.create({
                          detected_content: value,
@ -162,69 +177,14 @@ export async function runtimeCheckLogs(folderPath) {
                      fileDetect?.id_ldf
                  );

-                  let listReport = await getListLineByItem(logsDetect[0]);
+                  let listReport = await getListLineByItem(logsDetect[0].filter((l)=>l.line>lastLine));
                  let content =
-                    "|  |Last updated at | Item/error | Count | Report \n|---|:---:|:---|:---|:-----------:\n";
+                    "|  |Last updated at | Item/error | Line | Report \n|---|:---:|:---|:---|:-----------:\n";
                  let spoiler = "";
-                  // let file = await fs
-                  //   .readFileSync(filePath)
-                  //   .toString()
-                  //   ?.split("\n");
-                  // if (logsDetect[0].length > 10) {
-                  //   spoiler =
-                  //     spoiler +
-                  //     "```spoiler ..." +
-                  //     (logsDetect[0].length - 5) +
-                  //     " more items\n" +
-                  //     content;
-
-                  //   logsDetect[0]
-                  //     .reverse()
-                  //     .slice(0, 5)
-                  //     ?.map((log, index) => {
-                  //       content =
-                  //         content +
-                  //         "|" +
-                  //         (logsDetect[0].length - index) +
-                  //         "|**" +
-                  //         moment(log.created_at).format("HH:mm - DD/MM") +
-                  //         "**|" +
-                  //         log.line +
-                  //         "|" +
-                  //         log.detected_content +
-                  //         "|" +
-                  //         file[log.line - 1] +
-                  //         "|[View](https://logs.danielvu.com/api/log/showLog/" +
-                  //         fileName +
-                  //         ")\n";
-                  //     });
-
-                  //   logsDetect[0]
-                  //     .slice(5, logsDetect[0].length)
-                  //     ?.map((log, index) => {
-                  //       spoiler =
-                  //         spoiler +
-                  //         "|" +
-                  //         (logsDetect[0].length - index - 5) +
-                  //         "|**" +
-                  //         moment(log.created_at).format("HH:mm - DD/MM") +
-                  //         "**|" +
-                  //         log.line +
-                  //         "|" +
-                  //         log.detected_content +
-                  //         "|" +
-                  //         file[log.line - 1] +
-                  //         "|[View](https://logs.danielvu.com/api/log/showLog/" +
-                  //         fileName +
-                  //         ")\n";
-                  //     });
-
-                  //   spoiler = spoiler + "\n```\n\n";
-                  // } else {
                  listReport.map((log, index) => {
                    let item = listExtraItem.includes(log.detected_content)
-                      ? ":medal: **" + log.detected_content+"**"
-                      : ":small_orange_diamond: "+log.detected_content;
+                      ? ":medal: **" + log.detected_content + "**"
+                      : ":small_orange_diamond: " + log.detected_content;
                    content =
                      content +
                      "|" +
@ -234,12 +194,10 @@ export async function runtimeCheckLogs(folderPath) {
                      "**|" +
                      item +
                      "|" +
-                      log.line.length +
-                      // "|" +
-                      // file[log.line - 1] +
-                      "|[View](https://logs.danielvu.com/api/log/showLog/" +
+                      log.line +
+                      "|[View](https://logs.danielvu.com/logs/" +
                      fileName +
-                      ")\n";
+                      "#"+log.line+")\n";
                  });
                  // }
                  // setTimeout(() => {
@ -255,17 +213,17 @@ export async function runtimeCheckLogs(folderPath) {
                      spoiler
                  );

-                  sendMessToZulip(
-                    "stream",
-                    "AUS_VN_Test",
-                    "Test Log Alerts",
-                    ":warning: :warning: **" +
-                      fileName +
-                      "**\n\n" +
-                      content +
-                      "\n\n" +
-                      spoiler
-                  );
+                  // sendMessToZulip(
+                  //   "stream",
+                  //   "AUS_VN_Test",
+                  //   "Test Log Alerts",
+                  //   ":warning: :warning: **" +
+                  //     fileName +
+                  //     "**\n\n" +
+                  //     content +
+                  //     "\n\n" +
+                  //     spoiler
+                  // );
                  // }, 3000);
                }
              }, 3000);
--- a/manage-view/package-lock.json
+++ b/manage-view/package-lock.json
@ -14,6 +14,7 @@
        "axios": "^1.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }
@ -3237,6 +3238,14 @@
        }
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -14672,6 +14681,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -19842,6 +19881,11 @@
        "source-map": "^0.7.3"
      }
    },
+    "@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg=="
+    },
    "@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -28006,6 +28050,23 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
    },
+    "react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "requires": {
+        "@remix-run/router": "1.8.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "requires": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      }
+    },
    "react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
--- a/manage-view/package.json
+++ b/manage-view/package.json
@ -9,6 +9,7 @@
    "axios": "^1.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
--- a/manage-view/src/App.js
+++ b/manage-view/src/App.js
@ -2,13 +2,25 @@ import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { getKeyValues } from "./api/apiLog";
 import ManageValues from "./pages/ManageValues";
-
+import {
+  Routes,
+  Route,
+  Switch,
+  useParams,
+} from "react-router-dom";
+import ShowLog from "./components/ShowLog/ShowLog";
 function App() {
-  
-  
  return (
    <div className="App">
-      <ManageValues/>
+      <Routes>
+          {/* Define routes */}
+          <Route path="/" element={<ManageValues />}>
+            {/* Render the UserProfile component */}
+          </Route>
+            <Route path="/logs/:name" element={<ShowLog/>}>
+              
+            </Route>
+      </Routes>
    </div>
  );
 }
--- a/manage-view/src/api/apiLog.js
+++ b/manage-view/src/api/apiLog.js
@ -1,5 +1,6 @@
-// const API = "https://logs.danielvu.com/api";
-const API = "http://localhost:3333/api";
+const API = "https://logs.danielvu.com/api";
+// const API = "http://localhost:3333/api";
 export const getKeyValues = API + "/getKeyValue";
 export const deleteValue = API + "/deleteValue";
-export const addKeyValue = API + "/addValue";
+export const addKeyValue = API + "/addValue";
+export const getLog = API + "/log/showLog";
--- a/manage-view/src/components/ShowLog/ShowLog.css
+++ b/manage-view/src/components/ShowLog/ShowLog.css
@ -0,0 +1,84 @@
+.main{
+    display: flex;
+    height: 100vh;
+    flex-flow: column;
+    
+}
+
+.detectedDiv{
+    height: 40%;
+    word-wrap:break-word;
+    white-space:pre;
+    overflow: auto;
+    font-family: monospace;
+    text-rendering: auto;
+     color: fieldtext;
+     letter-spacing: normal;
+     word-spacing: normal;
+     line-height: normal;
+     text-transform: none;
+     text-indent: 0px;
+     text-shadow: none;
+     display: inline-block;
+     text-align: start;
+     appearance: auto;
+     -webkit-rtl-ordering: logical;
+     resize: auto;
+     cursor: text;
+     background-color: field;
+     column-count: initial !important;
+     writing-mode: horizontal-tb !important;
+     box-sizing: border-box;
+     margin: 0em;
+     border-width: 1px;
+     border-style: solid;
+     border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+     border-image: initial;
+     padding: 2px;
+}
+
+.logContent{
+    scroll-behavior: smooth;
+    width:100%;
+    height:60%;
+    word-wrap:break-word;
+    white-space:pre;
+    overflow: auto;
+    font-family: monospace;
+    text-rendering: auto;
+     color: fieldtext;
+     letter-spacing: normal;
+     word-spacing: normal;
+     line-height: normal;
+     text-transform: none;
+     text-indent: 0px;
+     text-shadow: none;
+     display: inline-block;
+     text-align: start;
+     appearance: auto;
+     -webkit-rtl-ordering: logical;
+     resize: auto;
+     cursor: text;
+     background-color: field;
+     column-count: initial !important;
+     writing-mode: horizontal-tb !important;
+     box-sizing: border-box;
+     margin: 0em;
+     border-width: 1px;
+     border-style: solid;
+     border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+     border-image: initial;
+     padding: 2px;
+}
+
+.itemDetected{
+    background-color: rgb(240, 155, 155);
+    cursor: pointer;
+}
+
+.itemDetected:hover{
+    background-color: rgba(240, 155, 155, 0.583);;
+}
+.lineNumberLog{
+    background-color: yellow;
+}
--- a/manage-view/src/components/ShowLog/ShowLog.jsx
+++ b/manage-view/src/components/ShowLog/ShowLog.jsx
@ -0,0 +1,87 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getLog } from "../../api/apiLog";
+import "./ShowLog.css";
+const ShowLog = () => {
+  let { name } = useParams();
+  const [log, setLog] = useState({});
+  const [content, setContent] = useState("");
+  const getContentLog = async () => {
+    try {
+      let tempContent = "";
+      const res = await axios.get(getLog + "/" + name);
+      setLog(res.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  useEffect(() => {
+    getContentLog();
+  }, []);
+  return (
+    <div className="main">
+      <div className="detectedDiv">
+        <h3
+          style={{
+            position: "sticky",
+            top: 0,
+            backgroundColor: "white",
+            textAlign: "center",
+          }}
+        >
+          {name}
+        </h3>
+        <h3>Extra items:</h3>
+        {log?.modelSpecial?.split("\n")?.map((line) => (
+          <span>
+            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
+            <span>{line.split("|-|")[1]}</span>
+            <span className="itemDetected">
+              <a
+                href={"#" + line.split("|-|")[0]}
+                style={{ textDecoration: "none", color: "black" }}
+              >
+                {line.split("|-|")[2]}
+              </a>
+            </span>
+            <span>{line.split("|-|")[3]}</span>
+            <br></br>
+          </span>
+        ))}
+        <h3>Issue found:</h3>
+        {log?.issueItem?.split("\n")?.map((line) => (
+          <span>
+            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
+            <span>{line.split("|-|")[1]}</span>
+            <span className="itemDetected">
+              <a
+                href={"#" + line.split("|-|")[0]}
+                style={{ textDecoration: "none", color: "black" }}
+              >
+                {line.split("|-|")[2]}{" "}
+              </a>
+            </span>
+            <span>{line.split("|-|")[3]}</span>
+            <br></br>
+          </span>
+        ))}
+      </div>
+      <div className="logContent">
+        {log?.contentFile?.split("\n")?.map((line) => (
+          <span>
+            <span className="lineNumberLog">{line.split("|-|")[0]}</span>
+            <span>{line.split("|-|")[1]}</span>
+            <span className="itemDetected">
+              <span id={line.split("|-|")[0]}>{line.split("|-|")[2]}</span>
+            </span>
+            <span>{line.split("|-|")[3]}</span>
+            <br></br>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ShowLog;
--- a/manage-view/src/index.js
+++ b/manage-view/src/index.js
@ -3,12 +3,17 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter, Route, Routes } from "react-router-dom";

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <BrowserRouter>
+      <Routes>
+        <Route path="*" element={<App />} />
+      </Routes>
+    </BrowserRouter>
+</React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function