let's insert data the right way this time
This commit is contained in:
parent
ebc142a94c
commit
093f2b483c
1 changed files with 19 additions and 19 deletions
|
@ -26,11 +26,12 @@ export default class App extends Component {
|
|||
metrics: null,
|
||||
};
|
||||
|
||||
_send(payload) {
|
||||
this.websocket.send(JSON.stringify(payload));
|
||||
async componentDidMount() {
|
||||
await this.loadMetrics();
|
||||
this.connect();
|
||||
}
|
||||
|
||||
_subscribe() {
|
||||
subscribeToChannels() {
|
||||
const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`);
|
||||
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;
|
||||
|
||||
if (op !== OP.DATA) {
|
||||
|
@ -52,22 +53,21 @@ export default class App extends Component {
|
|||
|
||||
const { metrics } = this.state;
|
||||
const graph = metrics.graph[name].slice(1);
|
||||
const newGraph = [...graph, data];
|
||||
const newGraph = [data, ...graph];
|
||||
|
||||
log('adding data:', data);
|
||||
|
||||
const clone = Object.assign({}, this.state.metrics);
|
||||
clone.graph[name] = newGraph;
|
||||
this.setState((prevState, _props) => {
|
||||
const clone = Object.assign({}, prevState.metrics);
|
||||
clone.graph[name] = newGraph;
|
||||
|
||||
log('current graph:', graph, 'new graph:', newGraph);
|
||||
log('current state', this.state, 'new state:', { metrics: clone });
|
||||
|
||||
this.setState({
|
||||
metrics: clone,
|
||||
return {
|
||||
metrics: clone,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
_connectWs() {
|
||||
connect() {
|
||||
log('connecting to ws');
|
||||
|
||||
const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss');
|
||||
|
@ -75,7 +75,7 @@ export default class App extends Component {
|
|||
|
||||
this.websocket.onopen = () => {
|
||||
log('ws opened');
|
||||
this._subscribe();
|
||||
this.subscribeToChannels();
|
||||
};
|
||||
|
||||
this.websocket.onmessage = (message) => {
|
||||
|
@ -83,7 +83,7 @@ export default class App extends Component {
|
|||
const parsed = JSON.parse(data);
|
||||
log('ws recv:', parsed);
|
||||
|
||||
this._handleMessage(parsed);
|
||||
this.handlePacket(parsed);
|
||||
};
|
||||
|
||||
this.websocket.onerror = (error) => {
|
||||
|
@ -91,12 +91,12 @@ export default class App extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
await this._loadMetrics();
|
||||
this._connectWs();
|
||||
|
||||
_send(payload) {
|
||||
this.websocket.send(JSON.stringify(payload));
|
||||
}
|
||||
|
||||
async _loadMetrics() {
|
||||
async loadMetrics() {
|
||||
log('loading metrics');
|
||||
|
||||
try {
|
||||
|
|
Loading…
Reference in a new issue