├── .env.example
├── .gitignore
├── README.md
├── cmd
    └── main.go
├── go.mod
├── go.sum
├── internal
    └── server
    │   └── http_server.go
├── pkg
    └── util
    │   ├── helper.go
    │   └── helper_test.go
├── screenshot.png
└── views
    └── index.html


/.env.example:
--------------------------------------------------------------------------------
1 | APP_ENV=local
2 | APP_PORT=8000


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Mac OS X files
 2 | .DS_Store
 3 | 
 4 | # Binaries for programs and plugins
 5 | *.exe
 6 | *.exe~
 7 | *.dll
 8 | *.so
 9 | *.dylib
10 | 
11 | # Test binary, build with `go test -c`
12 | *.test
13 | 
14 | # Output of the go coverage tool, specifically when used with LiteIDE
15 | *.out
16 | 
17 | # Project-local glide cache, RE: https://github.com/Masterminds/glide/issues/736
18 | .glide/
19 | 
20 | # Dependency directories (remove the comment below to include it)
21 | # vendor/
22 | 
23 | # env variables
24 | .env


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GoSysMon
 2 | 
 3 | Is a simple web based System Monitoring built with Go. It displays computer informations such are host, processes, memory, CPU, and disk. By using websocket, the data will automatically been refreshed within 5 seconds.
 4 | 
 5 | ![alt text](screenshot.png "screenshot of system monitor")
 6 | 
 7 | > Learning reference: [https://www.youtube.com/watch?v=fBDUn7b9plw&list=LL&index=3&ab_channel=sigfault](https://www.youtube.com/watch?v=fBDUn7b9plw&list=LL&index=3&ab_channel=sigfault)
 8 | 
 9 | ## Stacks
10 | 
11 | + Go 1.23.1
12 | + HTMX
13 | + Websocket HTMX Extension
14 | + Tailwindcss
15 | + [Gopsutil](https://pkg.go.dev/github.com/shirou/gopsutil/v4)
16 | + [Websocket](https://github.com/coder/websocket)
17 | 
18 | ## Running The Application
19 | 
20 | + Copy env file `cp .env.example .env` and adjust you desire port (default port is `8000`)
21 | + Install dependencies
22 | 
23 | ```bash
24 | go mod tidy
25 | ```
26 | 
27 | + Run the application locally
28 | 
29 | ```bash
30 | go run ./cmd/main.go
31 | ```
32 | 
33 | + Visit `localhost:8000` or using your desired port defined in `.env` file
34 | 


--------------------------------------------------------------------------------
/cmd/main.go:
--------------------------------------------------------------------------------
  1 | package main
  2 | 
  3 | import (
  4 | 	"context"
  5 | 	"errors"
  6 | 	"fmt"
  7 | 	"log"
  8 | 	"net/http"
  9 | 	"os"
 10 | 	"os/signal"
 11 | 	"sort"
 12 | 	"strconv"
 13 | 	"syscall"
 14 | 	"time"
 15 | 
 16 | 	"github.com/didikz/gosysmon/internal/server"
 17 | 	"github.com/didikz/gosysmon/pkg/util"
 18 | 	"github.com/joho/godotenv"
 19 | 	"github.com/shirou/gopsutil/v4/cpu"
 20 | 	"github.com/shirou/gopsutil/v4/disk"
 21 | 	"github.com/shirou/gopsutil/v4/host"
 22 | 	"github.com/shirou/gopsutil/v4/mem"
 23 | 	"github.com/shirou/gopsutil/v4/process"
 24 | )
 25 | 
 26 | func main() {
 27 | 	fmt.Println("Starting system monitor")
 28 | 	s := server.NewHttpServer()
 29 | 
 30 | 	go func(s *server.HttpServer) {
 31 | 		for {
 32 | 			hostStat, _ := host.Info()
 33 | 			vmStat, _ := mem.VirtualMemory()
 34 | 
 35 | 			cpus, _ := cpu.Info()
 36 | 			var cpuInfo string
 37 | 			for _, cpu := range cpus {
 38 | 				cpuInfo += `
 39 | 				<li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 40 | 					<span class="mx-2 p-1">Manufacturer</span>
 41 | 					<span class="mx-2 p-1" id="cpu-manufacturer">` + cpu.VendorID + `</span>
 42 | 				</li>
 43 | 				<li class="flex justify-between gap-x-4 py-1 rounded-sm">
 44 | 					<span class="mx-2 p-1">Model</span>
 45 | 					<span class="mx-2 p-1" id="cpu-model">` + cpu.ModelName + `</span>
 46 | 				</li>
 47 | 				<li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 48 | 					<span class="mx-2 p-1">Family</span>
 49 | 					<span class="mx-2 p-1" id="cpu-family">` + cpu.Family + `</span>
 50 | 				</li>
 51 | 				<li class="flex justify-between gap-x-4 py-1 rounded-sm">
 52 | 					<span class="mx-2 p-1">Speed</span>
 53 | 					<span class="mx-2 p-1" id="cpu-speed">` + fmt.Sprintf("%.2f MHz", cpu.Mhz) + `</span>
 54 | 				</li>
 55 | 				<li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 56 | 					<span class="mx-2 p-1">Cores</span>
 57 | 					<span class="mx-2 p-1" id="cpu-cores">` + fmt.Sprintf("%d cores", cpu.Cores) + `</span>
 58 | 				</li>
 59 | 				`
 60 | 			}
 61 | 
 62 | 			partitionStats, _ := disk.Partitions(true)
 63 | 			partitions, totalStorage, usedStorage, freeStorage := "", "", "", ""
 64 | 
 65 | 			for _, partition := range partitionStats {
 66 | 				diskUsage, _ := disk.Usage(partition.Mountpoint)
 67 | 				if partitions == "" {
 68 | 					partitions = fmt.Sprintf("%s (%s)", partition.Mountpoint, partition.Fstype)
 69 | 				} else {
 70 | 					partitions += fmt.Sprintf(", %s (%s)", partition.Mountpoint, partition.Fstype)
 71 | 				}
 72 | 
 73 | 				if diskUsage != nil {
 74 | 					if totalStorage == "" {
 75 | 						totalStorage = fmt.Sprintf("%s %dGB", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Total))
 76 | 					} else {
 77 | 						totalStorage += fmt.Sprintf(", %s %dGB", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Total))
 78 | 					}
 79 | 
 80 | 					if usedStorage == "" {
 81 | 						usedStorage = fmt.Sprintf("%s %dGB (%.2f%%)", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Used), diskUsage.UsedPercent)
 82 | 					} else {
 83 | 						usedStorage += fmt.Sprintf(", %s %dGB (%.2f%%)", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Used), diskUsage.UsedPercent)
 84 | 					}
 85 | 
 86 | 					if freeStorage == "" {
 87 | 						freeStorage = fmt.Sprintf("%s %dGB", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Free))
 88 | 					} else {
 89 | 						freeStorage += fmt.Sprintf(", %s %dGB", partition.Mountpoint, util.BytesToGigabyte(diskUsage.Free))
 90 | 					}
 91 | 				}
 92 | 			}
 93 | 
 94 | 			processess, _ := process.Processes()
 95 | 			sort.Slice(processess, func(i, j int) bool {
 96 | 				p1, _ := processess[i].CPUPercent()
 97 | 				p2, _ := processess[j].CPUPercent()
 98 | 				return p1 > p2
 99 | 			})
100 | 
101 | 			processessRow := ""
102 | 			for i := 0; i < 10; i++ {
103 | 				n, _ := processess[i].Name()
104 | 				cp, _ := processess[i].CPUPercent()
105 | 				rowColor := ""
106 | 				if i%2 == 0 {
107 | 					rowColor = "bg-gray-500"
108 | 				}
109 | 				processessRow += fmt.Sprintf(`
110 |                 <li class="flex justify-between gap-x-4 py-1 rounded-sm %s">
111 |                     <span class="mx-2 p-1">%s (PID %d)</span>
112 |                     <span class="mx-2 p-1">%.2f%% CPU</span>
113 |                 </li>
114 |                 `, rowColor, n, processess[i].Pid, cp)
115 | 			}
116 | 
117 | 			timestamp := time.Now().Format("2006-01-02 15:04:05")
118 | 			html := `
119 | 			<span hx-swap-oob="innerHTML:#data-timestamp">` + timestamp + `</span>
120 | 			<span hx-swap-oob="innerHTML:#system-hostname">` + hostStat.Hostname + `</span>
121 | 			<span hx-swap-oob="innerHTML:#system-os">` + hostStat.OS + `</span>
122 | 			<span hx-swap-oob="innerHTML:#system-platform">` + fmt.Sprintf("%s (%s)", hostStat.Platform, hostStat.PlatformFamily) + `</span>
123 | 			<span hx-swap-oob="innerHTML:#system-version">` + hostStat.PlatformVersion + `</span>
124 | 			<span hx-swap-oob="innerHTML:#system-arch">` + fmt.Sprintf("%s (%s)", hostStat.KernelArch, hostStat.KernelVersion) + `</span>
125 | 			<span hx-swap-oob="innerHTML:#system-running-processess">` + strconv.Itoa(int(hostStat.Procs)) + `</span>
126 | 			<span hx-swap-oob="innerHTML:#system-total-memory">` + strconv.Itoa(int(util.BytesToGigabyte(vmStat.Total))) + `GB </span>
127 | 			<span hx-swap-oob="innerHTML:#system-used-memory">` + strconv.Itoa(int(util.BytesToGigabyte(vmStat.Used))) + `GB (` + fmt.Sprintf("%.2f%%", vmStat.UsedPercent) + `)</span>
128 | 			<span hx-swap-oob="innerHTML:#system-free-memory">` + strconv.Itoa(int(util.BytesToGigabyte(vmStat.Free))) + `GB </span>
129 | 			<div hx-swap-oob="innerHTML:#cpu-data">` + cpuInfo + `</div>
130 | 			<span hx-swap-oob="innerHTML:#disk-partitions">` + partitions + `</span>
131 | 			<span hx-swap-oob="innerHTML:#disk-total-storage">` + totalStorage + `</span>
132 | 			<span hx-swap-oob="innerHTML:#disk-usage">` + usedStorage + `</span>
133 | 			<span hx-swap-oob="innerHTML:#disk-free">` + freeStorage + `</span>
134 | 			<span hx-swap-oob="innerHTML:#processess">` + processessRow + `</span>
135 | 			`
136 | 			s.Broadcast([]byte(html))
137 | 			time.Sleep(time.Second * 5)
138 | 		}
139 | 	}(s)
140 | 
141 | 	err := godotenv.Load()
142 | 	if err != nil {
143 | 		log.Fatal(err)
144 | 	}
145 | 
146 | 	port := os.Getenv("APP_PORT")
147 | 	if port == "" {
148 | 		port = "8000"
149 | 	}
150 | 
151 | 	server := &http.Server{
152 | 		Addr:    fmt.Sprintf(":%s", port),
153 | 		Handler: &s.Mux,
154 | 	}
155 | 
156 | 	stop := make(chan os.Signal, 1)
157 | 	signal.Notify(stop, os.Interrupt, syscall.SIGTERM)
158 | 
159 | 	go func() {
160 | 		if err = server.ListenAndServe(); !errors.Is(err, http.ErrServerClosed) {
161 | 			log.Fatal(err)
162 | 		}
163 | 		log.Println("Stopped serving new connections")
164 | 	}()
165 | 
166 | 	<-stop
167 | 	log.Println("Shutting down gracefully...")
168 | 
169 | 	shutdownCtx, shutdownRelease := context.WithTimeout(context.Background(), 10*time.Second)
170 | 	defer shutdownRelease()
171 | 
172 | 	if err := server.Shutdown(shutdownCtx); err != nil {
173 | 		log.Printf("server shutdown error: %v\n", err)
174 | 	}
175 | 
176 | 	log.Println("Server stoppped")
177 | }
178 | 


--------------------------------------------------------------------------------
/go.mod:
--------------------------------------------------------------------------------
 1 | module github.com/didikz/gosysmon
 2 | 
 3 | go 1.23.2
 4 | 
 5 | require (
 6 | 	github.com/coder/websocket v1.8.12
 7 | 	github.com/joho/godotenv v1.5.1
 8 | 	github.com/shirou/gopsutil/v4 v4.24.10
 9 | )
10 | 
11 | require (
12 | 	github.com/ebitengine/purego v0.8.1 // indirect
13 | 	github.com/go-ole/go-ole v1.2.6 // indirect
14 | 	github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 // indirect
15 | 	github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c // indirect
16 | 	github.com/tklauser/go-sysconf v0.3.12 // indirect
17 | 	github.com/tklauser/numcpus v0.6.1 // indirect
18 | 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
19 | 	golang.org/x/sys v0.26.0 // indirect
20 | )
21 | 


--------------------------------------------------------------------------------
/go.sum:
--------------------------------------------------------------------------------
 1 | github.com/coder/websocket v1.8.12 h1:5bUXkEPPIbewrnkU8LTCLVaxi4N4J8ahufH2vlo4NAo=
 2 | github.com/coder/websocket v1.8.12/go.mod h1:LNVeNrXQZfe5qhS9ALED3uA+l5pPqvwXg3CKoDBB2gs=
 3 | github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 4 | github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 5 | github.com/ebitengine/purego v0.8.1 h1:sdRKd6plj7KYW33EH5As6YKfe8m9zbN9JMrOjNVF/BE=
 6 | github.com/ebitengine/purego v0.8.1/go.mod h1:iIjxzd6CiRiOG0UyXP+V1+jWqUXVjPKLAI0mRfJZTmQ=
 7 | github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 8 | github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
 9 | github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
10 | github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
11 | github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
12 | github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
13 | github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
14 | github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0 h1:6E+4a0GO5zZEnZ81pIr0yLvtUWk2if982qA3F3QD6H4=
15 | github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
16 | github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
17 | github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
18 | github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c h1:ncq/mPwQF4JjgDlrVEn3C11VoGHZN7m8qihwgMEtzYw=
19 | github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
20 | github.com/shirou/gopsutil/v4 v4.24.10 h1:7VOzPtfw/5YDU+jLEoBwXwxJbQetULywoSV4RYY7HkM=
21 | github.com/shirou/gopsutil/v4 v4.24.10/go.mod h1:s4D/wg+ag4rG0WO7AiTj2BeYCRhym0vM7DHbZRxnIT8=
22 | github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
23 | github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
24 | github.com/tklauser/go-sysconf v0.3.12 h1:0QaGUFOdQaIVdPgfITYzaTegZvdCjmYO52cSFAEVmqU=
25 | github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
26 | github.com/tklauser/numcpus v0.6.1 h1:ng9scYS7az0Bk4OZLvrNXNSAO2Pxr1XXRAPyjhIx+Fk=
27 | github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
28 | github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
29 | github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
30 | golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
31 | golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
32 | golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
33 | golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
34 | golang.org/x/sys v0.26.0 h1:KHjCJyddX0LoSTb3J+vWpupP9p0oznkqVk/IfjymZbo=
35 | golang.org/x/sys v0.26.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
36 | golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
37 | gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
38 | gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
39 | 


--------------------------------------------------------------------------------
/internal/server/http_server.go:
--------------------------------------------------------------------------------
 1 | package server
 2 | 
 3 | import (
 4 | 	"context"
 5 | 	"fmt"
 6 | 	"net/http"
 7 | 	"sync"
 8 | 	"time"
 9 | 
10 | 	"github.com/coder/websocket"
11 | )
12 | 
13 | type HttpServer struct {
14 | 	subscriberMessageBuffer int
15 | 	Mux                     http.ServeMux
16 | 	subscribersMutex        sync.Mutex
17 | 	subscribers             map[*subscriber]struct{}
18 | }
19 | 
20 | type subscriber struct {
21 | 	msgs chan []byte
22 | }
23 | 
24 | func NewHttpServer() *HttpServer {
25 | 	s := &HttpServer{
26 | 		subscriberMessageBuffer: 10,
27 | 		subscribers:             make(map[*subscriber]struct{}),
28 | 	}
29 | 
30 | 	s.Mux.Handle("/", http.FileServer(http.Dir("./views")))
31 | 	s.Mux.HandleFunc("/ws", s.subscribeHandler)
32 | 	return s
33 | }
34 | 
35 | func (s *HttpServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
36 | 	err := s.subscribe(r.Context(), w, r)
37 | 	if err != nil {
38 | 		fmt.Println(err)
39 | 		return
40 | 	}
41 | }
42 | 
43 | func (s *HttpServer) subscribe(ctx context.Context, w http.ResponseWriter, r *http.Request) error {
44 | 	var c *websocket.Conn
45 | 	subscriber := &subscriber{
46 | 		msgs: make(chan []byte, s.subscriberMessageBuffer),
47 | 	}
48 | 
49 | 	s.addSubscriber(subscriber)
50 | 
51 | 	c, err := websocket.Accept(w, r, nil)
52 | 	if err != nil {
53 | 		return err
54 | 	}
55 | 
56 | 	defer c.CloseNow()
57 | 
58 | 	ctx = c.CloseRead(ctx)
59 | 	for {
60 | 		select {
61 | 		case msg := <-subscriber.msgs:
62 | 			ctx, cancel := context.WithTimeout(ctx, time.Second)
63 | 			defer cancel()
64 | 			err := c.Write(ctx, websocket.MessageText, msg)
65 | 			if err != nil {
66 | 				return err
67 | 			}
68 | 		case <-ctx.Done():
69 | 			return ctx.Err()
70 | 		}
71 | 	}
72 | }
73 | 
74 | func (s *HttpServer) addSubscriber(subscriber *subscriber) {
75 | 	s.subscribersMutex.Lock()
76 | 	s.subscribers[subscriber] = struct{}{}
77 | 	s.subscribersMutex.Unlock()
78 | 	fmt.Println("subscriber added", subscriber)
79 | }
80 | 
81 | func (s *HttpServer) Broadcast(msg []byte) {
82 | 	s.subscribersMutex.Lock()
83 | 	for subscriber := range s.subscribers {
84 | 		subscriber.msgs <- msg
85 | 	}
86 | 	s.subscribersMutex.Unlock()
87 | }
88 | 


--------------------------------------------------------------------------------
/pkg/util/helper.go:
--------------------------------------------------------------------------------
1 | package util
2 | 
3 | import "math"
4 | 
5 | func BytesToGigabyte(b uint64) uint64 {
6 | 	return b / uint64(math.Pow(2, 30))
7 | }
8 | 


--------------------------------------------------------------------------------
/pkg/util/helper_test.go:
--------------------------------------------------------------------------------
 1 | package util
 2 | 
 3 | import (
 4 | 	"math"
 5 | 	"testing"
 6 | )
 7 | 
 8 | func TestByteToGigabyteIsValid(t *testing.T) {
 9 | 	got := BytesToGigabyte(uint64(math.Pow(2, 30) * 5))
10 | 	if got != uint64(5) {
11 | 		t.Errorf("BytesToGigabyte(%d) = %d; wants 5", uint64(math.Pow(2, 30)*5), got)
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/didikz/gosysmon-web/3cb2ac162d0828f6a4fb4eba26ab3b362cba4d77/screenshot.png


--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |     <title>GoSysMon - Go System Monitor</title>
  8 |     <script src="https://cdn.tailwindcss.com"></script>
  9 |   </head>
 10 |   <body class="bg-gray-700 text-white">
 11 |     <div class="container mx-auto p-8" hx-ext="ws" ws-connect="/ws">
 12 |         <div class="mb-2 text-3xl font-bold">System Monitor</div>
 13 |         <div class="flex flex-row items-center my-2">
 14 |           <div class="mr-2 h-2 w-2 bg-green-400 rounded-full"></div>
 15 |           <div id="data-timestamp"></div>
 16 |         </div>
 17 |         <hr class="my-4 h-1 bg-gray-200 border-0 dark:bg-gray-500">
 18 |         <div class="grid grid-cols-2 gap-10">
 19 |             <div>
 20 |                 <div class="flex flex-row items-center">
 21 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="size-10">
 22 |                         <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
 23 |                     </svg>
 24 |                     <span class="ml-2 text-lg font-medium">System</span>
 25 |                 </div>
 26 |                 <ul class="mt-4 divide-y divide-gray-400">
 27 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 28 |                         <span class="mx-2 p-1">Hostname</span>
 29 |                         <span class="mx-2 p-1" id="system-hostname"></span>
 30 |                     </li>
 31 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 32 |                         <span class="mx-2 p-1">Operating System</span>
 33 |                         <span class="mx-2 p-1" id="system-os"></span>
 34 |                     </li>
 35 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 36 |                         <span class="mx-2 p-1">Platform</span>
 37 |                         <span class="mx-2 p-1" id="system-platform"></span>
 38 |                     </li>
 39 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 40 |                       <span class="mx-2 p-1">Version</span>
 41 |                       <span class="mx-2 p-1" id="system-version"></span>
 42 |                     </li>
 43 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 44 |                       <span class="mx-2 p-1">Architecture</span>
 45 |                       <span class="mx-2 p-1" id="system-arch"></span>
 46 |                     </li>
 47 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 48 |                         <span class="mx-2 p-1">Running Processess</span>
 49 |                         <span class="mx-2 p-1" id="system-running-processess"></span>
 50 |                     </li>
 51 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 52 |                         <span class="mx-2 p-1">Total Memory</span>
 53 |                         <span class="mx-2 p-1" id="system-total-memory"></span>
 54 |                     </li>
 55 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 56 |                         <span class="mx-2 p-1">Used Memory</span>
 57 |                         <span class="mx-2 p-1" id="system-used-memory"></span>
 58 |                     </li>
 59 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 60 |                         <span class="mx-2 p-1">Free Memory</span>
 61 |                         <span class="mx-2 p-1" id="system-free-memory"></span>
 62 |                     </li>
 63 |                 </ul>
 64 |             </div>
 65 |             <div>
 66 |                 <div class="flex flex-row items-center">
 67 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
 68 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" />
 69 |                       </svg>                  
 70 |                     <span class="ml-2 text-lg font-medium">CPU</span>
 71 |                 </div>
 72 |                 <ul class="mt-4 divide-y divide-gray-400" id="cpu-data">
 73 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 74 |                         <span class="mx-2 p-1">Manufacturer</span>
 75 |                         <span class="mx-2 p-1" id="cpu-manufacturer"></span>
 76 |                     </li>
 77 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 78 |                         <span class="mx-2 p-1">Model</span>
 79 |                         <span class="mx-2 p-1" id="cpu-model"></span>
 80 |                     </li>
 81 |                     <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
 82 |                         <span class="mx-2 p-1">Family</span>
 83 |                         <span class="mx-2 p-1" id="cpu-family"></span>
 84 |                     </li>
 85 |                     <li class="flex justify-between gap-x-4 py-1 rounded-sm">
 86 |                         <span class="mx-2 p-1">Cores</span>
 87 |                         <span class="mx-2 p-1" id="cpu-cores"></span>
 88 |                     </li>
 89 |                 </ul>
 90 |             </div>
 91 |             <div>
 92 |                 <div class="flex flex-row items-center">
 93 |                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
 94 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z" />
 95 |                       </svg>                                        
 96 |                     <span class="ml-2 text-lg font-medium">Disk</span>
 97 |                 </div>
 98 |                 <ul class="mt-4 divide-y divide-gray-400" id="disk-data">
 99 |                   <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
100 |                     <span class="mx-2 p-1">Partitions</span>
101 |                     <span class="mx-2 p-1" id="disk-partitions"></span>
102 |                   </li>
103 |                   <li class="flex justify-between gap-x-4 py-1 rounded-sm">
104 |                     <span class="mx-2 p-1">Total Storage</span>
105 |                     <span class="mx-2 p-1" id="disk-total-storage"></span>
106 |                   </li>
107 |                   <li class="flex justify-between gap-x-4 py-1 bg-gray-500 rounded-sm">
108 |                     <span class="mx-2 p-1">Used Storage</span>
109 |                     <span class="mx-2 p-1" id="disk-usage"></span>
110 |                   </li>
111 |                   <li class="flex justify-between gap-x-4 py-1 rounded-sm">
112 |                     <span class="mx-2 p-1">Free Storage</span>
113 |                     <span class="mx-2 p-1" id="disk-free"></span>
114 |                   </li>
115 |                 </ul>
116 |             </div>
117 |             <div>
118 |               <div class="flex flex-row items-center">
119 |                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-10">
120 |                   <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z" />
121 |                   <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
122 |                 </svg>                                             
123 |                 <span class="ml-2 text-lg font-medium">10 Most CPU Processes</span>
124 |               </div>
125 |               <ul class="mt-4 divide-y divide-gray-400" id="processess">
126 |                 
127 |               </ul>
128 |             </div>
129 |         </div>
130 |     </div>
131 |     <script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
132 |     <script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
133 |   </body>
134 | </html>


--------------------------------------------------------------------------------