[ui] Init Web UI using echarts #19

- need to test the read API, and write a web UI would save the time for writing e2e tests
xephonhq · Apr 3, 2017 · 7797ef1 · 7797ef1
1 parent 29e0168
commit 7797ef1
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 5 deletions.
diff --git a/pkg/server/service/read.go b/pkg/server/service/read.go
@@ -4,8 +4,10 @@ import (
 	"context"
 	"net/http"
 
+	"encoding/json"
 	"github.com/go-kit/kit/endpoint"
 	httptransport "github.com/go-kit/kit/transport/http"
+	"github.com/pkg/errors"
 	"github.com/xephonhq/xephon-k/pkg/common"
 	"github.com/xephonhq/xephon-k/pkg/storage"
 	"github.com/xephonhq/xephon-k/pkg/storage/cassandra"
@@ -38,33 +40,47 @@ type ReadServiceHTTPFactory struct {
 }
 
 func (ReadServiceHTTPFactory) MakeEndpoint(service Service) endpoint.Endpoint {
-	//_, ok := service.(ReadService)
+	// TODO: test it
 	readSvc, ok := service.(ReadService)
 	if !ok {
 		log.Panic("must pass read service to read service factory")
 	}
 	return func(_ context.Context, request interface{}) (interface{}, error) {
 		req, ok := request.(readRequest)
-		// TODO: auto fill start and end time for each query
 		if !ok {
 			log.Panic("should be readRequest")
 		}
+		res := readResponse{}
+		// TODO: check start end time and return 400
+		if req.StartTime == 0 || req.EndTime == 0 {
+			return res, errors.New("must set start and end time")
+		}
 		// for all the queries query the data
 		results := []common.IntSeries{}
 		for _, query := range req.Queries {
+			// TODO: is the zero check really working?
+			if query.StartTime == 0 {
+				query.StartTime = req.StartTime
+			}
+			if query.EndTime == 0 {
+				query.EndTime = query.EndTime
+			}
 			// merge it
 			// http://stackoverflow.com/questions/16248241/concatenate-two-slices-in-go
 			results = append(results, readSvc.QueryInt(query)...)
 		}
-		res := readResponse{}
+
 		return res, nil
 	}
 }
 
-// TODO: real decode logic
 func (ReadServiceHTTPFactory) MakeDecode() httptransport.DecodeRequestFunc {
 	return func(_ context.Context, r *http.Request) (interface{}, error) {
-		return readRequest{}, nil
+		var req readRequest
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			return nil, err
+		}
+		return req, nil
 	}
 }
 

diff --git a/web/README.md b/web/README.md
@@ -0,0 +1,11 @@
+# Web UI
+
+A simple UI using echarts
+
+## Ref 
+
+- Line stack http://gallery.echartsjs.com/editor.html?c=line-stack
+- Dynamic time series http://gallery.echartsjs.com/editor.html?c=dynamic-data2
+- Heat map (like GitHub strike) http://gallery.echartsjs.com/editor.html?c=calendar-heatmap
+- http://gallery.echartsjs.com/editor.html?c=mix-timeline-finance
+- http://gallery.echartsjs.com/editor.html?c=candlestick-sh
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Xephon-K UI</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
+</head>
+<body>
+<div id="canvas" style="width: 600px;height:400px;"></div>
+<script type="text/javascript">
+    var onlyChart = echarts.init(document.getElementById('canvas'));
+
+    var option = {
+        title: {
+            text: 'stack lines'
+        },
+        tooltip: {},
+        toolbox: {
+            feature: {
+                dataView: {show: true, readOnly: true},
+                magicType: {show: true, type: ['line', 'bar']},
+                restore: {show: true},
+                saveAsImage: {show: true}
+            }
+        },
+        legend: {
+            data: ['Xephon-K(Mem)', 'Xephon-K(Cassandra)', 'KairosDB', 'InfluxDB'],
+//            orient: 'vertical',
+            orient: 'horizontal',
+//            left: 'right',
+            top: 'bottom'
+        },
+        xAxis: {
+            name: 'number of concurrent clients',
+            nameLocation: 'middle',
+            nameGap: 20,
+            data: ["10", "100", "1000", "5000"]
+        },
+        yAxis: {
+            name: 'total requests'
+        },
+        series: [
+            {
+                name: 'Xephon-K(Mem)',
+                type: 'line',
+                data: [12327, 21099, 31791, 12279]
+            }, {
+                name: 'Xephon-K(Cassandra)',
+                type: 'line',
+                data: [7931, 11336, 14590, 8703]
+            },
+            {
+                name: 'KairosDB',
+                type: 'line',
+                data: [15561, 26154, 26939, 16506]
+            },
+            {
+                name: 'InfluxDB',
+                type: 'line',
+                data: [118, 139, 131, 130]
+            }
+        ]
+    };
+
+    onlyChart.setOption(option);
+</script>
+</body>
+</html>