ashie
/
elstat
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

let's insert data the right way this time

This commit is contained in:
slice 2018-07-13 12:16:21 -07:00
parent ebc142a94c
commit 093f2b483c
No known key found for this signature in database
GPG Key ID: 1508C19D7436A26D
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
priv/frontend/src/App.js
View File

@ -26,11 +26,12 @@ export default class App extends Component {
metrics: null, metrics: null,
}; };
_send(payload) { async componentDidMount() {
this.websocket.send(JSON.stringify(payload)); await this.loadMetrics();
this.connect();
} }
_subscribe() { subscribeToChannels() {
const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`); const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`);
log('subscribing to channels:', channels); log('subscribing to channels:', channels);
@ -40,7 +41,7 @@ export default class App extends Component {
}); });
} }
_handleMessage(packet) { handlePacket(packet) {
const { op, c: channel, d: data } = packet; const { op, c: channel, d: data } = packet;
if (op !== OP.DATA) { if (op !== OP.DATA) {
@ -52,22 +53,21 @@ export default class App extends Component {
const { metrics } = this.state; const { metrics } = this.state;
const graph = metrics.graph[name].slice(1); const graph = metrics.graph[name].slice(1);
const newGraph = [...graph, data]; const newGraph = [data, ...graph];
log('adding data:', data); log('adding data:', data);
const clone = Object.assign({}, this.state.metrics); this.setState((prevState, _props) => {
clone.graph[name] = newGraph; const clone = Object.assign({}, prevState.metrics);
clone.graph[name] = newGraph;
log('current graph:', graph, 'new graph:', newGraph); return {
log('current state', this.state, 'new state:', { metrics: clone }); metrics: clone,
};
this.setState({
metrics: clone,
}); });
} }
_connectWs() { connect() {
log('connecting to ws'); log('connecting to ws');
const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss'); const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss');
@ -75,7 +75,7 @@ export default class App extends Component {
this.websocket.onopen = () => { this.websocket.onopen = () => {
log('ws opened'); log('ws opened');
this._subscribe(); this.subscribeToChannels();
}; };
this.websocket.onmessage = (message) => { this.websocket.onmessage = (message) => {
@ -83,7 +83,7 @@ export default class App extends Component {
const parsed = JSON.parse(data); const parsed = JSON.parse(data);
log('ws recv:', parsed); log('ws recv:', parsed);
this._handleMessage(parsed); this.handlePacket(parsed);
}; };
this.websocket.onerror = (error) => { this.websocket.onerror = (error) => {
@ -91,12 +91,12 @@ export default class App extends Component {
}; };
} }
async componentDidMount() {
await this._loadMetrics(); _send(payload) {
this._connectWs(); this.websocket.send(JSON.stringify(payload));
} }
async _loadMetrics() { async loadMetrics() {
log('loading metrics'); log('loading metrics');
try { try {