Merge pull request #69 from pacholoamit/master

0.4.0

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.4.0
+
+- Add `Settings` page
+- Make Pachtop start on system startup
+- Improvements to Disks UI
+- Add functionality to open folder directory if "Location" is clicked in Disks UI
+
 ## 0.3.8
 
 - Improve UI performance by utilizing High Charts library

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pachtop",
   "private": true,
-  "version": "0.3.8",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -28,13 +28,13 @@
     "react-apexcharts": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
+    "tauri-plugin-autostart-api": "https://github.com/tauri-apps/tauri-plugin-autostart",
     "tauri-plugin-log-api": "https://github.com/tauri-apps/tauri-plugin-log",
     "tauri-plugin-store": "https://github.com/tauri-apps/tauri-plugin-store"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.3.0",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/luxon": "^3.3.0",
     "@types/node": "^20.1.0",
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.4",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.3.8"
+version = "0.4.0"
 description = "Cross-platform (Linux, WIndows, MacOS) Desktop GUI system monitor"
 authors = ["Pacholo Amit"]
 license = "MIT"
@@ -23,6 +23,7 @@ tauri = { version = "1.2.3", features = ["api-all", "system-tray", "updater"] }
 sysinfo = "0.29.0"
 tauri-plugin-log = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
+tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 log = "^0.4"
 
 

src-tauri/src/app.rs

@@ -70,3 +70,29 @@ pub fn kill_process(state: State<'_, AppState>, pid: String) -> bool {
     );
     killed
 }
+
+#[tauri::command]
+pub fn show_folder(path: String) {
+    #[cfg(target_os = "macos")]
+    {
+        std::process::Command::new("open")
+            .arg(path)
+            .arg("-R")
+            .spawn()
+            .unwrap();
+    }
+    #[cfg(target_os = "linux")]
+    {
+        std::process::Command::new("xdg-open")
+            .arg(path)
+            .spawn()
+            .unwrap();
+    }
+    #[cfg(target_os = "windows")]
+    {
+        std::process::Command::new("explorer")
+            .arg(path)
+            .spawn()
+            .unwrap();
+    }
+}

src-tauri/src/main.rs

@@ -12,6 +12,7 @@ use app::AppState;
 use std::time::Duration;
 use tauri::api::path::cache_dir;
 use tauri::{CustomMenuItem, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu};
+use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_log::LogTarget;
 
 fn build_and_run_app(app: AppState) {
@@ -21,9 +22,15 @@ fn build_and_run_app(app: AppState) {
 
     let store_plugin = tauri_plugin_store::Builder::default().build();
 
+    let auto_start_plugin = tauri_plugin_autostart::init(MacosLauncher::LaunchAgent, Some(vec![]));
+
+    let system_tray = SystemTray::new()
+        .with_menu(SystemTrayMenu::new().add_item(CustomMenuItem::new("quit".to_string(), "Quit")));
+
     tauri::Builder::default()
         .plugin(log_plugin)
         .plugin(store_plugin)
+        .plugin(auto_start_plugin)
         .setup(|app| {
             let window = app.get_window("main").unwrap();
             let state = AppState::new();
@@ -44,9 +51,7 @@ fn build_and_run_app(app: AppState) {
 
             Ok(())
         })
-        .system_tray(SystemTray::new().with_menu(
-            SystemTrayMenu::new().add_item(CustomMenuItem::new("quit".to_string(), "Quit")),
-        ))
+        .system_tray(system_tray)
         .on_system_tray_event(|app, event| match event {
             SystemTrayEvent::MenuItemClick { id, .. } => {
                 let window = app.get_window("main").unwrap();
@@ -67,7 +72,10 @@ fn build_and_run_app(app: AppState) {
             }
         })
         .manage(app)
-        .invoke_handler(tauri::generate_handler![app::kill_process,])
+        .invoke_handler(tauri::generate_handler![
+            app::kill_process,
+            app::show_folder
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src-tauri/src/metrics.rs

@@ -104,7 +104,7 @@ impl DisksTrait for Metrics {
                     _ => "Unknown".to_owned(),
                 };
                 let file_system = match str::from_utf8(disk.file_system()) {
-                    Ok(v) => v.to_owned(),
+                    Ok(v) => v.to_owned().to_ascii_uppercase(),
                     Err(e) => {
                         println!("Invalid UTF-8 sequence: {}", e);
                         "Unknown".to_owned()

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "pachtop",
-    "version": "0.3.8"
+    "version": "0.4.0"
   },
   "tauri": {
     "systemTray": {

src/api/client.ts

@@ -15,7 +15,3 @@ export const updateAppUser = async (id: string, input: Partial<User>) => {
   const appUser = await api.collection("app_users").update<User>(id, { id, ...input });
   return appUser;
 };
-
-export const updateUserLastActive = async (id: string) => {
-  await updateAppUser(id, { last_active: new Date() });
-};

src/components/page-wrapper.tsx

@@ -8,7 +8,7 @@ interface PageWrapperProps {
 const PageWrapper: React.FC<PageWrapperProps> = ({ children, name }) => {
   return (
     <Stack spacing="lg">
-      <Title>{name}</Title>
+      <Title order={2}>{name}</Title>
       {children}
     </Stack>
   );

src/features/metrics/components/disks/disk.info.tsx

@@ -1,27 +1,72 @@
 import DiskAreaChart from "@/features/metrics/components/disks/disk.area-chart";
-import { Box, Card, Center, Space, Stack, Text } from "@mantine/core";
+import { ActionIcon, Badge, Box, Card, Center, Group, HoverCard, Space, Stack, Text } from "@mantine/core";
 import { Enumerable } from "@/hooks/useServerEventsEnumerableStore";
-import { Disk } from "@/lib/types";
+import { Disk, commands } from "@/lib";
+import { IconCheck, IconX } from "@tabler/icons-react";
 
+interface RemovableIconProps {
+  isRemovable?: boolean;
+}
+
+const RemovableIcon: React.FC<RemovableIconProps> = (props) => {
+  return props.isRemovable ? (
+    <ActionIcon variant="transparent" color="green">
+      <IconCheck size={"1rem"} />
+    </ActionIcon>
+  ) : (
+    <ActionIcon variant="transparent" color="red">
+      <IconX size={"1rem"} />
+    </ActionIcon>
+  );
+};
 interface DiskInfoProps {
   disk: Enumerable<Disk>;
 }
+// TODO: Refactor this
 const DiskInfo: React.FC<DiskInfoProps> = ({ disk }) => {
+  const last = disk.data.at(-1);
+
+  const showDirectory = async () => {
+    if (!last?.mountPoint) return;
+    await commands.showInFolder(last.mountPoint);
+  };
+
   return (
     <Card shadow="xl" p="sm" radius={"md"} withBorder>
       <Stack spacing="xl">
         <Box style={{ height: "450px" }}>
-          <DiskAreaChart key={disk.id} disk={disk} />
+          <DiskAreaChart disk={disk} />
         </Box>
         <Center>
           <Stack spacing={"xs"}>
-            <Text>Name: {disk.data.at(-1)?.name}</Text>
-            <Text>Mount Point: {disk.data.at(-1)?.mountPoint}</Text>
+            <Group spacing="xs">
+              <Text size={"sm"}>Name</Text>
+              <Badge color="red">{last?.name}</Badge>
+            </Group>
+            <Group spacing={"xs"}>
+              <Text size={"sm"}>Location</Text>
+              <HoverCard>
+                <HoverCard.Target>
+                  <Badge color="yellow" style={{ cursor: "pointer" }} onClick={showDirectory}>
+                    {last?.mountPoint}
+                  </Badge>
+                </HoverCard.Target>
+                <HoverCard.Dropdown>
+                  <Text size="sm"> Open Folder</Text>
+                </HoverCard.Dropdown>
+              </HoverCard>
+            </Group>
           </Stack>
           <Space style={{ width: "120px" }} />
           <Stack spacing={"xs"}>
-            <Text>File System: {disk.data.at(-1)?.fileSystem}</Text>
-            <Text>Removable: {disk.data.at(-1)?.isRemovable.toString()}</Text>
+            <Group spacing={"xs"}>
+              <Text size={"sm"}>File System</Text>
+              <Badge>{last?.fileSystem}</Badge>
+            </Group>
+            <Group spacing={"xs"}>
+              <Text size={"sm"}>Removable </Text>
+              <RemovableIcon isRemovable={last?.isRemovable} />
+            </Group>
           </Stack>
         </Center>
       </Stack>

src/features/metrics/components/memory/memory.area-chart.tsx

@@ -4,10 +4,6 @@ import AreaChart, { useAreaChartState } from "@/components/area-chart";
 import useServerEventsContext from "@/hooks/useServerEventsContext";
 import { useEffect } from "react";
 
-// TODO: Remove Luxon and ChartJS
-// TODO: Make timestamp work automatically
-// TODO: fix time
-
 const MemoryAreaChart: React.FC = ({}) => {
   const { memory } = useServerEventsContext();
   const [chartOptions, setChartOptions] = useAreaChartState({

src/features/metrics/components/networks/networks.area-chart.tsx

@@ -44,7 +44,7 @@ const NetworksAreaChart: React.FC = ({}) => {
     });
   }, [JSON.stringify(networks)]);
 
-  console.log("render");
+
 
   return (
     <Card style={{ height: "450px" }}>

src/features/metrics/pages/disks.page.tsx

@@ -11,7 +11,6 @@ const DisksPage = () => {
       <Grid>
         {disks?.map((disk, i) => (
           <React.Fragment key={disk.id + i}>
-            {/* <Grid.Col md={6} sm={12}></Grid.Col> */}
             <Grid.Col span={12}>
               <DiskInfo key={disk.id} disk={disk} />
             </Grid.Col>