time conversion on fe, and feed from be into charts

dashboard/dashboard.go

@@ -10,7 +10,6 @@ import (
 	_ "github.com/flashmob/go-guerrilla/dashboard/statik"
 	"github.com/gorilla/mux"
 	"github.com/gorilla/websocket"
-	"github.com/rakyll/statik/fs"
 )
 
 const (
@@ -29,6 +28,7 @@ var (
 var upgrader = websocket.Upgrader{
 	ReadBufferSize:  1024,
 	WriteBufferSize: 1024,
+	CheckOrigin:     func(r *http.Request) bool { return true },
 }
 
 type Config struct {
@@ -36,12 +36,12 @@ type Config struct {
 }
 
 func Run(c *Config) {
-	statikFS, _ := fs.New()
+	// statikFS, _ := fs.New()
 	config = c
 	sessions = map[string]*session{}
 	r := mux.NewRouter()
 	r.HandleFunc("/ws", webSocketHandler)
-	r.PathPrefix("/").Handler(http.FileServer(statikFS))
+	r.PathPrefix("/").Handler(http.FileServer(http.Dir("dashboard/js/build")))
 
 	rand.Seed(time.Now().UnixNano())
 

dashboard/datastore.go

@@ -72,7 +72,7 @@ func (ds *dataStore) notify(p *dataFrame) {
 }
 
 type point struct {
-	T time.Time `json:"t"`
+	X time.Time `json:"x"`
 	Y uint64    `json:"y"`
 }
 

dashboard/js/src/action-creators.js

@@ -1,8 +1,20 @@
 import ActionTypes from './action-types';
+import Moment from 'moment';
 
-export const tick = payload => ({
+const TIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSSSSSSSZ';
+
+export const tick = ({ram, n_clients}) => ({
 	type: ActionTypes.TICK,
-	payload
+	payload: {
+		ram: {
+			x: Moment(ram.x, TIME_FORMAT),
+			y: ram.y
+		},
+		n_clients: {
+			x: Moment(n_clients.x, TIME_FORMAT),
+			y: n_clients.y
+		}
+	}
 });
 
 export const init = payload => ({

dashboard/js/src/components/App.js

@@ -7,6 +7,7 @@ const styles = {
 	container: {
 		backgroundSize: 'cover',
 		display: 'flex',
+		padding: 64,
 		flexDirection: 'column'
 	},
 	chartContainer: {
@@ -20,8 +21,13 @@ class App extends Component {
 	constructor(props) {
 		super();
 		const ws = new WebSocket(WS_URL);
+		ws.onerror = err => console.log(err);
+		ws.onopen = event => console.log(event);
 		ws.onclose = event => console.log(event);
-		ws.onmessage = ({data}) => props.dispatch(tick(data));
+		ws.onmessage = event => {
+			const data = JSON.parse(event.data);
+			props.dispatch(tick(data));
+		};
 
 		this.state = {ws};
 	}
@@ -29,10 +35,15 @@ class App extends Component {
 	render() {
 		return (
 			<div style={styles.container}>
-				<LineChart />
+				<LineChart data={this.props.ram} />
 			</div>
 		);
 	}
 }
 
-export default connect()(App);
+const mapStateToProps = state => ({
+	ram: state.get('ram').toArray(),
+	nClients: state.get('nClients').toArray()
+});
+
+export default connect(mapStateToProps)(App);

dashboard/js/src/components/LineChart.js

@@ -1,13 +1,16 @@
 import React, { PropTypes } from 'react';
-import { VictoryChart, VictoryLine } from 'victory';
+import { VictoryAxis, VictoryChart, VictoryLine } from 'victory';
 import Moment from 'moment';
 
 const LineChart = ({data}) => {
 	return (
 		<VictoryChart
 			height={200}
-			width={800}
-			scale={{x: "time", y: "linear"}}>
+			width={800}>
+			<VictoryAxis // 2017-02-04T10:52:20.765730186-08:00
+				scale="time"
+				tickCount={4}
+				tickFormat={tick => Moment(tick).format('HH:mm:ss')}/>
 			<VictoryLine data={data} />
 		</VictoryChart>
 	);

dashboard/js/src/index.js

@@ -4,9 +4,13 @@ import App from './components/App';
 import reducer from './reducer';
 import {applyMiddleware, createStore} from 'redux';
 import {Provider} from 'react-redux';
-import logger from 'redux-logger';
+import createLogger from 'redux-logger';
 import './index.css';
 
+const logger = createLogger({
+	stateTransformer: state => state.toJS()
+});
+
 const store = createStore(
 	reducer,
 	applyMiddleware(logger)

dashboard/js/src/reducer.js

@@ -1,6 +1,6 @@
 import Immutable from 'immutable';
 import ActionTypes from './action-types';
-console.log(ActionTypes);
+
 const initialState = Immutable.Map({
 	// Keep enough points for 24hrs at 30s resolution
 	maxPoints: 24 * 60 * 2,

dashboard/session.go

@@ -60,8 +60,8 @@ transmit:
 		select {
 		case p, ok := <-s.send:
 			data, err := json.Marshal(p)
-			log.Info("session:61", string(data), err)
-			log.Info("session:59", p.NClients, p.Ram)
+			log.Info("session:63", string(data), err)
+			log.Info("session:64", p.NClients, p.Ram)
 			s.ws.SetWriteDeadline(time.Now().Add(writeWait))
 			if !ok {
 				s.ws.WriteMessage(websocket.CloseMessage, []byte{})