102 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			102 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| import { execAsync } from "astal";
 | |
| import { Gtk } from "astal/gtk4";
 | |
| import sysinfo from "../sysinfo";
 | |
| 
 | |
| const info = () => {
 | |
|     return (
 | |
|         <box vertical>
 | |
|             <label
 | |
|                 label={"System Information"}
 | |
|                 cssClasses={["title-2"]}
 | |
|             ></label>
 | |
|             <Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
 | |
|             <label
 | |
|                 vexpand
 | |
|                 halign={Gtk.Align.START}
 | |
|                 hexpand
 | |
|                 label={sysinfo.ramUsed(used => {
 | |
|                     return "RAM: " + used + ` (${sysinfo.ramUtil.get()}%)`;
 | |
|                 })}
 | |
|             ></label>
 | |
|             <label
 | |
|                 label={sysinfo.systemStats(stats => {
 | |
|                     return `CPU: ${stats.cpuTemp}, ${stats.cpuClk}
 | |
| GPU: ${stats.gpuTemp}, ${stats.gpuClk} (${stats.vram} / ${stats.availableVRAM})
 | |
| Kernel: ${stats.kernel}`;
 | |
|                 })}
 | |
|             ></label>
 | |
|             <Gtk.Separator marginTop={10}></Gtk.Separator>
 | |
|             <button
 | |
|                 onClicked={() => execAsync(`/bin/sh -c "kitty --hold fish -c 'fastfetch'"`)}
 | |
|                 child={
 | |
|                     <label label={"View FastFetch"}></label>
 | |
|                 }></button>
 | |
|         </box>
 | |
|     );
 | |
| };
 | |
| 
 | |
| const SystemInformationPanel = () => {
 | |
|     const popover = new Gtk.Popover();
 | |
| 
 | |
|     popover.set_child(info());
 | |
| 
 | |
|     return popover;
 | |
| };
 | |
| 
 | |
| 
 | |
| const panel = SystemInformationPanel();
 | |
| 
 | |
| const SystemInfo = () => {
 | |
|     sysinfo.startSysInfoFetcher();
 | |
| 
 | |
|     const openSysInfo = async () => {
 | |
|         panel.popup();
 | |
|         sysinfo.refreshStats();
 | |
|     };
 | |
| 
 | |
|     if (sysinfo.enabled) {
 | |
|         return (
 | |
|             <button
 | |
|                 onClicked={() => openSysInfo()}
 | |
|                 child={
 | |
|                     <box tooltipText={sysinfo.ramUsed(v => v)}>
 | |
|                         <box
 | |
|                             cssClasses={[ 'quick-view-symbol' ]}
 | |
|                         >
 | |
|                             <image
 | |
|                                 iconName={"power-profile-performance-symbolic"}
 | |
|                                 marginEnd={1}
 | |
|                             ></image>
 | |
|                             <label
 | |
|                                 label={sysinfo.cpuUtil(util => util)}
 | |
|                                 marginEnd={5}
 | |
|                             ></label>
 | |
|                         </box>
 | |
|                         <box
 | |
|                             cssClasses={[ 'quick-view-symbol' ]}
 | |
|                         >
 | |
|                             <image iconName={"memory"}></image>
 | |
|                             <label label={sysinfo.ramUtil(util => util)}></label>
 | |
|                         </box>
 | |
|                         <box
 | |
|                             cssClasses={[ 'quick-view-symbol' ]}
 | |
|                         >
 | |
|                             <image iconName={"show-gpu-effects-symbolic"}></image>
 | |
|                             <label label={sysinfo.gpuUtil(util => util)}></label>
 | |
|                         </box>
 | |
|                         {panel}
 | |
|                     </box>
 | |
|                 }
 | |
|                 cssClasses={["bar-button"]}
 | |
|             ></button>
 | |
|         );
 | |
|     } else {
 | |
|         return <image iconName={"action-unavailable-symbolic"}></image>;
 | |
|     }
 | |
| };
 | |
| 
 | |
| export default {
 | |
|     SystemInfo,
 | |
|     panel,
 | |
| };
 |