show log table

s1rius · Mar 30, 2024 · df71b8d · df71b8d
1 parent af87315
commit df71b8d
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 146 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ui",
+  "name": "ezlog",
   "private": true,
   "version": "0.0.0",
   "type": "module",

diff --git a/ui/src-tauri/Cargo.toml b/ui/src-tauri/Cargo.toml
@@ -1,5 +1,5 @@
 [package]
-name = "ui"
+name = "ezlog-ui"
 version = "0.0.0"
 description = "A Tauri App"
 authors = ["you"]

diff --git a/ui/src-tauri/src/main.rs b/ui/src-tauri/src/main.rs
@@ -11,22 +11,13 @@ use std::{
 };
 
 use ezlog::EZLogConfigBuilder;
-use serde::ser::{
-    Serialize,
-    SerializeTupleStruct,
-    Serializer,
-};
-
-// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
-}
 
 fn main() {
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![greet])
-        .invoke_handler(tauri::generate_handler![parse_header_and_extra])
+        .invoke_handler(tauri::generate_handler![
+            parse_header_and_extra,
+            parse_log_file_to_records,
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
@@ -48,7 +39,11 @@ fn parse_header_and_extra(file_path: String) -> Result<String, String> {
                 "version",
                 Into::<u8>::into(*header_and_extra.0.version()),
                 "encrypt",
-                if header_and_extra.0.is_encrypt() {1} else {0},
+                if header_and_extra.0.is_encrypt() {
+                    1
+                } else {
+                    0
+                },
                 "extra",
                 extra_tuple.0,
                 "extra_encode",
@@ -77,7 +72,7 @@ fn parse_log_file_to_records(
     let (tx, rx) = channel();
 
     let json_closure = |data: &Vec<u8>, is_end: bool| {
-        if data.len() > 0 {
+        if !data.is_empty() {
             match ezlog::decode::decode_record(data) {
                 Ok(r) => array.push(serde_json::to_string(&r).unwrap_or_default()),
                 Err(e) => {

diff --git a/ui/src-tauri/tauri.conf.json b/ui/src-tauri/tauri.conf.json
@@ -7,8 +7,8 @@
     "withGlobalTauri": false
   },
   "package": {
-    "productName": "ui",
-    "version": "0.0.0"
+    "productName": "ezlog-ui",
+    "version": "0.1.0"
   },
   "tauri": {
     "allowlist": {
@@ -40,7 +40,7 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "ui",
+        "title": "ezlog",
         "width": 800,
         "height": 600
       }

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -2,10 +2,14 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import { invoke } from "@tauri-apps/api/tauri";
-import Greet from "./components/Greet.vue";
-import LogList from "./components/LogList.vue";
 
-import { listen } from '@tauri-apps/api/event'
+import { type Event, listen } from '@tauri-apps/api/event'
+import { ref } from "vue";
+
+const logs = ref<Record[]>([]);
+const add = (items: Record[]) => {
+  logs.value.push(...items)
+}
 
 type Header = {
   timestamp: 0,
@@ -15,84 +19,78 @@ type Header = {
   extra_encode: ""
 }
 
-var record = {
-
+export interface Record {
+  n: string,
+  l: string,
+  g: string,
+  t: string,
+  d: number,
+  m: string,
+  c: string,
+  f: string,
+  y: number
 }
 
-async function fetchLogs(path: string) {
-            await invoke('parse_log_file_to_records', {file_path: path})
-                .then((logs: any) => {
-                    ologs = logs;
-                })
-                .catch((error: any) => {
-                    console.error('Error fetching logs:', error);
-                });
-        }
+async function fetchLogs(path: string, k: string, n: string) {
+  await invoke('parse_log_file_to_records', { filePath: path, key: k, nonce: n })
+    .then((logs: any) => {
+      console.log(logs)
+      let records: Record[] = JSON.parse(logs).map((item: string) => <Record>JSON.parse(item));
+      add(records)
+    })
+    .catch((error: any) => {
+      console.error('Error fetching logs:', error);
+    });
+}
 
 async function parse_header_and_extra(path: string) {
   console.log('parse file dropped:', path);
-    await invoke('parse_header_and_extra', {filePath: path}).then((result: any) => {
-        console.error("sdfasdf", result);
-        const header = JSON.parse(result as string) as Header
-        if (header.encrypt == 0) {
+  await invoke('parse_header_and_extra', { filePath: path }).then(async (result: any) => {
+    const header = JSON.parse(result as string) as Header
+    console.log(header)
+    if (header.encrypt == 0) {
+      fetchLogs(path, "", "")
+    } else {
 
-        } else {
-          
-        }
-        console.log(header)
-    }).catch((error: any) => {
-      console.error("error", error);
-    })
+    }
+
+  }).catch((error: any) => {
+    console.error("error", error);
+  })
 }
 
-listen('tauri://file-drop', (event) => {
+listen('tauri://file-drop', (event: Event<string[]>) => {
   if (event.payload && event.payload.length > 0) {
-      const firstFilePath = event.payload[0];
-      console.log('First file dropped:', firstFilePath);
-      // Now you can do something with the first file path
-      // For example, reading the file content or processing the file
-      parse_header_and_extra(firstFilePath)
-    }
+    const firstFilePath = event.payload[0];
+    console.log('First file dropped:', firstFilePath);
+    // Now you can do something with the first file path
+    // For example, reading the file content or processing the file
+    parse_header_and_extra(firstFilePath)
+  }
 })
 
-
-
 </script>
 
 <template>
-  <div class="container mx-auto p-8">
-    <h1>Welcome to Tauri!</h1>
-
-    <div class=" bg-white justify-center rounded-lg border border-gray-100 ">
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="w-12 h-12 pt-2 drop-shadow-md hover:drop-shadow-xl" alt="Vite logo" />
-      </a>
-      <a href="https://tauri.app" target="_blank">
-        <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
-
-    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
-
-    <p>
-      Recommended IDE setup:
-      <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-      +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-      +
-      <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank"
-        >Tauri</a
-      >
-      +
-      <a href="https://github.com/rust-lang/rust-analyzer" target="_blank"
-        >rust-analyzer</a
-      >
-    </p>
-
-    <Greet />
+  <div class="container w-full max-w-full">
+    <table class="table table-striped table-bordered border-separate border-spacing-x-3">
+      <thead>
+        <tr>
+          <th class="text-left">Time</th>
+          <th class="text-left">Target</th>
+          <th class="text-left w-30 mx-3">Level</th>
+          <th class="text-left">Message</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(log, index) in logs" :key="index">
+          <td class="w-30 min-w-30 mx-1 h-full whitespace-nowrap">{{ log.t }}</td>
+          <td class="mx-1">{{ log.g }}</td>
+          <td class="w-30 mx-3">{{ log.l }}</td>
+          <td class="text-wrap text-left break-all">{{ log.c }}</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 

diff --git a/ui/src/components/Greet.vue b/ui/src/components/Greet.vue
diff --git a/ui/src/components/LogList.vue b/ui/src/components/LogList.vue
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
@@ -10,7 +10,11 @@ export default {
         '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
       }
     },
+    container: {
+      padding: '1rem',
+    },
   },
   plugins: [],
 }
 
+