From 545eed44cd8a43e9b7ce8fe8f98b58bdfbe30d7f Mon Sep 17 00:00:00 2001 From: Daniel Legt Date: Sun, 21 Jan 2024 18:25:23 +0200 Subject: [PATCH] Implemented frontend + Graph Generation as images for frontend performance + A new decent style --- go.mod | 3 ++ go.sum | 36 ++++++++++++++ lib/hardware/logic.go | 2 - lib/svc/service.go | 113 ++++++++++++++++++++++++++++++++++++++++++ lib/web/api.go | 39 +++++++++++++++ static/style.css | 82 +++++++++++++++++++----------- templates/index.html | 80 ++++++++++++++++++++++++++---- 7 files changed, 315 insertions(+), 40 deletions(-) diff --git a/go.mod b/go.mod index 24072f6..a36143c 100644 --- a/go.mod +++ b/go.mod @@ -14,6 +14,7 @@ require ( github.com/go-playground/universal-translator v0.18.1 // indirect github.com/go-playground/validator/v10 v10.17.0 // indirect github.com/goccy/go-json v0.10.2 // indirect + github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 // indirect github.com/jinzhu/inflection v1.0.0 // indirect github.com/jinzhu/now v1.1.5 // indirect github.com/joho/godotenv v1.5.1 // indirect @@ -27,8 +28,10 @@ require ( github.com/pelletier/go-toml/v2 v2.1.1 // indirect github.com/twitchyliquid64/golang-asm v0.15.1 // indirect github.com/ugorji/go/codec v1.2.12 // indirect + github.com/wcharczuk/go-chart/v2 v2.1.1 // indirect golang.org/x/arch v0.7.0 // indirect golang.org/x/crypto v0.18.0 // indirect + golang.org/x/image v0.11.0 // indirect golang.org/x/net v0.20.0 // indirect golang.org/x/sys v0.16.0 // indirect golang.org/x/text v0.14.0 // indirect diff --git a/go.sum b/go.sum index 4029341..929f381 100644 --- a/go.sum +++ b/go.sum @@ -27,6 +27,8 @@ github.com/go-playground/validator/v10 v10.17.0 h1:SmVVlfAOtlZncTxRuinDPomC2DkXJ github.com/go-playground/validator/v10 v10.17.0/go.mod h1:9iXMNT7sEkjXb0I+enO7QXmzG6QCsPWY4zveKFVRSyU= github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU= github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I= +github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0 h1:DACJavvAHhabrF08vX0COfcOBJRhZ8lUbR+ZWIs0Y5g= +github.com/golang/freetype v0.0.0-20170609003504-e2365dfdc4a0/go.mod h1:E/TSTwGwJL78qG/PmXZO1EjYhfJinVAhrmmHX6Z8B9k= github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk= github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE= github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg= @@ -70,21 +72,55 @@ github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08= github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE= github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg= +github.com/wcharczuk/go-chart/v2 v2.1.1 h1:2u7na789qiD5WzccZsFz4MJWOJP72G+2kUuJoSNqWnE= +github.com/wcharczuk/go-chart/v2 v2.1.1/go.mod h1:CyCAUt2oqvfhCl6Q5ZvAZwItgpQKZOkCJGb+VGv6l14= +github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY= golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8= golang.org/x/arch v0.7.0 h1:pskyeJh/3AmoQ8CPE95vxHLqp1G1GfGNXTmcl9NEKTc= golang.org/x/arch v0.7.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys= +golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w= +golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc= golang.org/x/crypto v0.18.0 h1:PGVlW0xEltQnzFZ55hkuX5+KLyrMYhHld1YHO4AKcdc= golang.org/x/crypto v0.18.0/go.mod h1:R0j02AL6hcrfOiy9T4ZYp/rcWeMxM3L6QYxlOuEG1mg= +golang.org/x/image v0.11.0 h1:ds2RoQvBvYTiJkwpSFDwCcDFNX7DqjL2WsUgTNk0Ooo= +golang.org/x/image v0.11.0/go.mod h1:bglhjqbqVuEb9e9+eNR45Jfu7D+T4Qan+NhQk8Ck2P8= +golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4= +golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs= +golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s= +golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg= +golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c= +golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs= golang.org/x/net v0.20.0 h1:aCL9BSgETF1k+blQaYUBx9hJ9LOGP3gAVemcZlf1Kpo= golang.org/x/net v0.20.0/go.mod h1:z8BVo6PvndSri0LbOE3hAn0apkU+1YvI6E70E9jsnvY= +golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= +golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= +golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM= +golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY= +golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs= +golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= +golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= +golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.9.0 h1:KS/R3tvhPqvJvwcKfnBHJwwthS11LRhmM5D59eEXa0s= golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.16.0 h1:xWw16ngr6ZMtmxDyKyIgsE93KNKz5HKmMa3b8ALHidU= golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA= +golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo= +golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8= +golang.org/x/term v0.5.0/go.mod h1:jMB1sMXY+tzblOD4FWmEbocvup2/aLOaQEp7JmGp78k= +golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ= +golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ= +golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ= +golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8= +golang.org/x/text v0.12.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE= golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ= golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU= +golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ= +golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo= +golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc= +golang.org/x/tools v0.6.0/go.mod h1:Xwgl3UAJ/d3gWutnCtw505GrjyAbvKui8lOU390QaIU= +golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0= golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0= google.golang.org/protobuf v1.32.0 h1:pPC6BG5ex8PDFnkbrGU3EixyhKcQ2aDuBS36lqK/C7I= google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos= diff --git a/lib/hardware/logic.go b/lib/hardware/logic.go index 8f89be4..2bdf5af 100644 --- a/lib/hardware/logic.go +++ b/lib/hardware/logic.go @@ -67,8 +67,6 @@ func GetSystemHardDrives(db *gorm.DB, olderThan *time.Time, newerThan *time.Time q := db.Where("serial = ? AND model = ? AND type = ?", sysHDD.Serial, sysHDD.Model, sysHDD.Type) if newerThan != nil && olderThan != nil { - fmt.Printf("\nNewer Than: %s\n", newerThan) - fmt.Printf("Older Than: %s\n\n", olderThan) q = q.Preload("Temperatures", "time_stamp < ? AND time_stamp > ?", newerThan, olderThan) } diff --git a/lib/svc/service.go b/lib/svc/service.go index 8cf0e54..a33636b 100644 --- a/lib/svc/service.go +++ b/lib/svc/service.go @@ -1,9 +1,11 @@ package svc import ( + "bytes" "fmt" "time" + "github.com/wcharczuk/go-chart/v2" "gorm.io/driver/sqlite" "gorm.io/gorm" "tea.chunkbyte.com/kato/drive-health/lib/config" @@ -66,3 +68,114 @@ func RunLoggerService() { } }() } + +func GetDiskGraphImage(hddID int, newerThan *time.Time, olderThan *time.Time) (*bytes.Buffer, error) { + var hdd hardware.HardDrive + // Fetch by a combination of fields + q := db.Where("id = ?", hddID) + + if newerThan == nil && olderThan == nil { + q = q.Preload("Temperatures") + } else { + q = q.Preload("Temperatures", "time_stamp < ? AND time_stamp > ?", newerThan, olderThan) + } + + // Query for the instance + result := q.First(&hdd) + if result.Error != nil { + return nil, result.Error + } + + // Prepare slices for X (time) and Y (temperature) values + var xValues []time.Time + var yValues []float64 + for _, temp := range hdd.Temperatures { + xValues = append(xValues, temp.TimeStamp) + yValues = append(yValues, float64(temp.Temperature)) + } + + // Allocate a buffer for the graph image + graphImageBuffer := bytes.NewBuffer([]byte{}) + + // TODO: Graph dark theme + + // Generate the chart + graph := chart.Chart{ + Title: fmt.Sprintf("%s:%s[%s]", hdd.Name, hdd.Serial, hdd.Size), + TitleStyle: chart.Style{ + FontSize: 14, + }, + + // TODO: Implement customizable sizing + Width: 1280, + + Background: chart.Style{ + Padding: chart.Box{ + Top: 20, Right: 20, Bottom: 20, Left: 20, + }, + }, + + XAxis: chart.XAxis{ + Name: "Time", + ValueFormatter: func(v interface{}) string { + if ts, isValidTime := v.(float64); isValidTime { + t := time.Unix(int64(ts/1e9), 0) + + return t.Format("Jan 2 2006, 15:04") + } + + return "" + }, + Style: chart.Style{}, + GridMajorStyle: chart.Style{ + StrokeColor: chart.ColorAlternateGray, + StrokeWidth: 0.5, + }, + GridMinorStyle: chart.Style{ + StrokeColor: chart.ColorAlternateGray.WithAlpha(64), + StrokeWidth: 0.25, + }, + }, + YAxis: chart.YAxis{ + Name: "Temperature (C)", + Style: chart.Style{}, + GridMajorStyle: chart.Style{ + StrokeColor: chart.ColorAlternateGray, + StrokeWidth: 0.5, + }, + GridMinorStyle: chart.Style{ + StrokeColor: chart.ColorAlternateGray.WithAlpha(64), + StrokeWidth: 0.25, + }, + }, + Series: []chart.Series{ + chart.TimeSeries{ + Name: "Temperature", + XValues: xValues, + YValues: yValues, + Style: chart.Style{ + StrokeColor: chart.ColorCyan, + StrokeWidth: 2.0, + }, + }, + }, + } + + // Add a legend to the chart + graph.Elements = []chart.Renderable{ + chart.Legend(&graph, chart.Style{ + Padding: chart.Box{ + Top: 5, Right: 5, Bottom: 5, Left: 5, + }, + FontSize: 10, + }), + } + + // Render the chart into the byte buffer + err := graph.Render(chart.PNG, graphImageBuffer) + if err != nil { + return nil, err + } + + return graphImageBuffer, nil +} diff --git a/lib/web/api.go b/lib/web/api.go index 393eca2..4217346 100644 --- a/lib/web/api.go +++ b/lib/web/api.go @@ -2,6 +2,7 @@ package web import ( "net/http" + "strconv" "time" "github.com/gin-gonic/gin" @@ -12,6 +13,44 @@ import ( func setupApi(r *gin.Engine) { api := r.Group("/api/v1") + api.GET("/disks/:diskid/chart", func(ctx *gin.Context) { + diskIDString := ctx.Param("diskid") + diskId, err := strconv.Atoi(diskIDString) + if err != nil { + ctx.AbortWithStatusJSON(400, gin.H{ + "error": err.Error(), + "message": "Invalid Disk ID", + }) + + return + } + + graphData, err := svc.GetDiskGraphImage(diskId, nil, nil) + if err != nil { + ctx.AbortWithStatusJSON(500, gin.H{ + "error": err.Error(), + "message": "Graph generation issue", + }) + + return + } + + // Set the content type header + ctx.Writer.Header().Set("Content-Type", "image/png") + + // Write the image data to the response + ctx.Writer.WriteHeader(http.StatusOK) + _, err = graphData.WriteTo(ctx.Writer) + if err != nil { + ctx.AbortWithStatusJSON(500, gin.H{ + "error": err.Error(), + "message": "Write error", + }) + + return + } + }) + api.GET("/disks", func(ctx *gin.Context) { olderThan := time.Now().Add(time.Minute * time.Duration(10) * -1) diff --git a/static/style.css b/static/style.css index 7381c57..fc98ad3 100644 --- a/static/style.css +++ b/static/style.css @@ -1,45 +1,71 @@ -body { - font-family: Arial, sans-serif; - background-color: #333; - color: #fff; - margin: 0; +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Roboto:wght@100;300;400&display=swap'); + +:root { + --bg0: #202327; + --bg1: #282d33; + --bg2: #31373f; + + --fg0: #bbc0ca; + --fg0: #bbc0ca; + + --acc: #bbc0ca; +} + +:root { + color: var(--fg0); + font-family: "Noto Sans Mono", "Roboto", sans-serif; +} + +html, body { + margin: 0; padding: 0; + + width: 100vw; + height: 100vw; + + overflow: auto; + + background-color: var(--bg0); } .container { - width: 80%; - margin: auto; + margin: 1rem auto; + max-width: 768px; + + border-radius: 8px; + border: 1px solid var(--fg1); + + background-color: var(--bg1); overflow: hidden; } -h1 { - text-align: center; - padding: 20px 0; +.container-titlebar { + width: 100%; + + background-color: var(--bg2); } +.container .pad { + padding: .5rem 1rem; +} + +.container-titlebar h4 { + padding: 0; + margin: 0; +} + + +/* Table */ + table { width: 100%; - margin-top: 20px; border-collapse: collapse; } -table, th, td { - border: 1px solid #ddd; +table thead tr { + border-bottom: 1px solid var(--bg2); } -th, td { - text-align: left; - padding: 8px; -} - -th { - background-color: #555; -} - -tr:nth-child(even) { - background-color: #666; -} - -tr:hover { - background-color: #555; +.graph-image { + max-width: 100%; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 2354437..b7a79de 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,17 +8,77 @@
-

Drive Health Dashboard

- - - - - - - -
-
+
+
+

Available Disks

+
+
+ +
+
+ {{ if len .drives }} + + + + + + + + + + + + {{ range .drives }} + {{ $temp := .GetTemperature }} + + + + + + + + {{ if gt $temp 50 }} + + {{ else if gt $temp 30 }} + + {{ else }} + + {{ end }} + + {{ end }} + +
IDNameModelSerialTemperature
#{{ .ID }} {{ .Name }} {{ .Model }} {{ .Serial }}{{ $temp }}°C{{ $temp }}°C{{ $temp }}°C
+ {{ else }} +

No hard drives found.

+ {{ end }} +
+
+ +
+ +
+ +
+
+

Temperature Graph

+
+
+
+
+ {{ if len .drives }} + {{ range .drives }} +
+ + {{ .Model }} Image + +
+ {{ end }} + {{ else }} +

No hard drives found.

+ {{ end }} +
+