add graph in command ui page

.gitignore

@@ -1,3 +1,6 @@
 *.log
 *.code-workspace
 var
+gcron
+gcrond
+.DS_Store

README.md

@@ -6,13 +6,11 @@
 - Skip a command's execution if the previous run is not completed yet
 - Delay a command's execution
 - Log a command's output plus stats (systime, usrtime, status, duration, ...)
-- Centalize all logs in gcrond server 
-- GUI server interface
 - Override command status by using regex pattern
-- Skip a command's execution if the previous run IN OTHER SERVER is not completed yet
-- IN PROGRESS 
-  - Duration graph in command page (gcrond)
-  - Status graph in command page (gcrond) 
+- Skip a command's execution if the previous run IN OTHER SERVER is not completed yet (gcrond)
+- Centalize all logs in gcrond server  (gcrond)
+- GUI server interface (gcrond)
+- Duration graph in command page (gcrond)
 
 
 ### gcron IS NOT
@@ -155,6 +153,7 @@ gcron -c="echo Server1HelloWorld" --server.rpc.enable --lock.enable --lock.remot
   - [ ] Search logs (tag, hostname, uid, command, guid, output)
   - [x] Bundle JS with webpack
   - [ ] Bundle CSS with webpack
+  - [x] Command page duration graph
 - [ ] Log stream proxy... (remote third party log server, REST Api, tcp/udp)
 - [ ] TLS enabled over RPC
 - [ ] Client authentication + (caching system)

go.mod

@@ -18,7 +18,7 @@ require (
 	github.com/pkg/errors v0.8.0
 	github.com/rs/xid v1.2.1
 	github.com/shirou/gopsutil v2.20.2+incompatible
-	github.com/siddontang/go v0.0.0-20180604090527-bdc77568d726 // indirect
+	github.com/siddontang/go v0.0.0-20180604090527-bdc77568d726
 	github.com/siddontang/ledisdb v0.0.0-20190202134119-8ceb77e66a92
 	github.com/siddontang/rdb v0.0.0-20150307021120-fc89ed2e418d // indirect
 	github.com/sirupsen/logrus v1.5.0

internal/db/ledis.go

@@ -60,7 +60,7 @@ func (l LedisDB) Store(uid uint32, task *pb.Task) (string, error) {
 // Get members of a key
 func (l LedisDB) Get(uid uint32, start int, stop int) *TaskCollection {
 	byteKeys := (*[4]byte)(unsafe.Pointer(&uid))[:] // 32 bit id (4 byte)
-	scorePairs, _ := l.db.ZRange(byteKeys, start, stop)
+	scorePairs, _ := l.db.ZRevRange(byteKeys, start, stop)
 	tasks := make(map[int]*pb.Task)
 	for index, scorePair := range scorePairs {
 		score := scorePair.Score

pkg/formatters/timestamp.go

@@ -0,0 +1,23 @@
+package formatters
+
+import (
+	"fmt"
+	"strconv"
+
+	"github.com/golang/protobuf/ptypes/timestamp"
+)
+
+// GetTimestampDiffMS returns diff between given timestamps in ms
+func GetTimestampDiffMS(startTime *timestamp.Timestamp, endTime *timestamp.Timestamp) (float64, error) {
+	durationSecond := endTime.Seconds - startTime.Seconds
+	nanosDiff := (endTime.Nanos - startTime.Nanos) / 1e6
+	if nanosDiff < 0 {
+		nanosDiff = 0
+	}
+	duration := fmt.Sprintf(
+		"%d.%d",
+		durationSecond,
+		nanosDiff,
+	)
+	return strconv.ParseFloat(duration, 8)
+}

web/main.go

@@ -3,6 +3,7 @@ package web
 import (
 	// Import the gorilla/mux library we just installed
 
+	"encoding/json"
 	"fmt"
 	"html/template"
 	"strings"
@@ -15,6 +16,7 @@ import (
 	"github.com/mbrostami/gcron/internal/config"
 	"github.com/mbrostami/gcron/internal/db"
 	pb "github.com/mbrostami/gcron/internal/grpc"
+	"github.com/mbrostami/gcron/pkg/formatters"
 	"github.com/mbrostami/gcron/web/pages"
 	log "github.com/sirupsen/logrus"
 )
@@ -93,15 +95,37 @@ func loadTemplate() (*template.Template, error) {
 			res := fmt.Sprintf("%04f", float64(value)/float64(time.Millisecond))
 			return template.HTML(res)
 		},
+	}).Funcs(template.FuncMap{
+		"stringArrayToJson": func(array []string) template.JS {
+			var res string
+			encjson, _ := json.Marshal(array)
+			res = string(encjson)
+			log.Debugf("TemplateFunction: stringArrayToJson %v, %v", array, res)
+			return template.JS(res)
+		},
+	}).Funcs(template.FuncMap{
+		"floatArrayToJson": func(array []float64) template.JS {
+			var res string
+			log.Debugf("TemplateFunction: floatArrayToJson %v, %v", array, res)
+			encjson, _ := json.Marshal(array)
+			res = string(encjson)
+			return template.JS(res)
+		},
+	}).Funcs(template.FuncMap{
+		"subStringOfByte": func(value []byte) template.HTML {
+			res := []rune(string(value))
+			len := len(res)
+			result := string(value)
+			if len > 50 {
+				result = string(res[0:50]) + " ... "
+			}
+			log.Debugf("TemplateFunction: subStringOfByte %v to %v", string(value), result)
+			return template.HTML(result)
+		},
 	}).Funcs(template.FuncMap{
 		"getDuration": func(task *pb.Task) string {
-			durationSecond := task.EndTime.Seconds - task.StartTime.Seconds
-			duration := fmt.Sprintf(
-				"%d.%d",
-				durationSecond,
-				int32(task.EndTime.Nanos-task.StartTime.Nanos)/int32(time.Millisecond),
-			)
-			return duration
+			value, _ := formatters.GetTimestampDiffMS(task.StartTime, task.EndTime)
+			return fmt.Sprintf("%.2f", value)
 		},
 	})
 	_, err := t.ParseGlob("web/static/*.tmpl")

web/pages/task.go

@@ -3,10 +3,12 @@ package pages
 import (
 	"net/http"
 	"strconv"
+	"time"
 
 	"github.com/gin-gonic/gin"
 	"github.com/mbrostami/gcron/internal/db"
 	pb "github.com/mbrostami/gcron/internal/grpc"
+	"github.com/mbrostami/gcron/pkg/formatters"
 )
 
 // TaskPage using Page interface
@@ -53,14 +55,23 @@ func (p *TaskPage) Handler(method string, c *gin.Context) Response {
 
 	// As all tasks coming by uid has same command
 	// Get first one to extract command name
-	var command *pb.Task
-	for _, task := range taskCollection.Tasks {
-		command = task
-		break
+	command := taskCollection.Tasks[0]
+	var xAxis []string
+	var yAxis []float64
+	var task *pb.Task
+	// Make sorted list
+	for i := len(taskCollection.Tasks) - 1; i >= 0; i-- {
+		task = taskCollection.Tasks[i]
+		startTimeUTC := time.Unix(task.StartTime.Seconds, 0)
+		xAxis = append(xAxis, startTimeUTC.Format("15:04:05"))
+		floatVal, _ := formatters.GetTimestampDiffMS(task.StartTime, task.EndTime)
+		yAxis = append(yAxis, floatVal)
 	}
 	res = gin.H{
 		"user":    user,
 		"command": command,
+		"xAxis":   xAxis,
+		"yAxis":   yAxis,
 		"tasks":   taskCollection.Tasks,
 	}
 	c.HTML(200, "task.tmpl", res)

web/static/public/app/index.js

@@ -1,4 +1,5 @@
 import './css/style.css';
+import Chart from 'chart.js'
 import UIkit from 'uikit';
 import Icons from 'uikit/dist/js/uikit-icons';
 

web/static/public/package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "chart.js": "^2.9.3",
     "css-loader": "^3.4.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "less": "^3.11.1",

web/static/task.tmpl

@@ -6,6 +6,8 @@
     <h3>{{.message}}</h3>
 {{end}}
 
+<canvas id="taskChart"  height="100"></canvas>
+
 <ul class="uk-list uk-list-divider uk-dark uk-padding" uk-accordion>
 {{range $element := .tasks}}
     <li>
@@ -15,7 +17,9 @@
             {{else}}
                 <span class="uk-label uk-label-danger">{{$element.StartTime.Seconds | secondsToDate}}</span>
             {{end}}
-            <a href="#">Duration: {{$element | getDuration}}s - Host: {{$element.Hostname}} </a>
+            <a href="#">{{ $element.Output | subStringOfByte }} </a>
+            <span class="uk-label uk-label-primary uk-align-right uk-margin-small-bottom uk-margin-small-left">{{ $element.Username }}</span>
+            <span class="uk-label uk-label-primary uk-align-right uk-margin-small-bottom uk-margin-small-left">{{$element | getDuration}} s</span>
         </div>
         <div class="uk-accordion-content">
             <div class="uk-light uk-background-secondary uk-padding">
@@ -39,4 +43,50 @@
 {{end}}
 </ul>
 
+<script>
+    document.addEventListener("DOMContentLoaded", function(){
+        var ctx = document.getElementById('taskChart').getContext('2d');
+        var chart = new Chart(ctx, {
+            // The type of chart we want to create
+            type: 'line',
+
+            // The data for our dataset
+            data: {
+                labels: {{ .xAxis | stringArrayToJson }},
+                datasets: [{
+                    fill: false,
+                    label: 'Duration',
+                    backgroundColor: 'rgb(255, 99, 132)',
+                    borderColor: 'rgb(255, 99, 132)',
+                    data: {{ .yAxis | floatArrayToJson }}
+                }]
+            },
+
+            // Configuration options go here
+            options: {
+                responsive: true,
+                scales: {
+                    yAxes: [{
+                        display: true,
+                        ticks: {
+                            min: 0,
+                            stepSize: 0.5
+                        },
+						scaleLabel: {
+							display: true,
+							labelString: 'Duration'
+						}
+					}],
+                    xAxes: [{
+						display: true,
+						scaleLabel: {
+							display: true,
+							labelString: 'Time'
+						}
+					}]
+                }
+            }
+        });
+    });
+</script>
 {{ template "footer.tmpl" }}