Integrating Vizceral with your ecosystem

[AnandJayaraman]

Hi

Are there steps/documentation that explains how to integrate Vizceral into your existing ecosystem.

Rgs
Anand

[JSONRice]

@AnandJayaraman your comment is ambiguous: integrate Vizceral into your existing ecosystem. If your ecosystem is React then you should have no problem. If you want a pure method to import the Vizceral JS into your html then check out the main Vizceral project and read the data format file.

[AnandJayaraman]

To elaborate:
Let's say I want to integrate this application with my data centers to see the traffic the way the applications shows.

1. How should I integrate with my data center? Does the data center need to emit a json file which is ingested by Vizceral?
2. How to make the experience realtime?
3. How has Netflix integrated with Vizceral?

[jrsquared]

@AnandJayaraman Thank you for your interest in Vizceral!

1. Vizceral just receives a json object describing your traffic graph, outlined here, passed as a parameter to updateData(traffic)
2. Anytime you have an update to your data, just call updateData(newTrafficData) again with the updated data.
3. We have a separate backend service that collects and merges all of the data we need to render in Vizceral. The client connects to this backend using socket.io, listens for new messages with updated data, and calls updateData everytime we get a new message.

[chennqqi]

@jrsquared I could not found any code which using socket.io...
I found these code at 'src/components/trafficFlow.jsx'

beginSampleData () {
request.get('sample_data.json')//I change to localhost:8080/data.json
.set('Accept', 'application/json')
.end((err, res) => {
if (res && res.status === 200) {
this.traffic.clientUpdateTime = Date.now();
this.updateData(res.body);
}
});
}
So I wrote a backend application that serve 'localhost:8080/data.json' as a json API. This api return a dynamic json data, but i don't known how to notify the frontend to update data

[jrsquared]

@chennqqi I cannot comment on the specifics of integrating with the backend that you created, but if it is just a GET endpoint at localhost:8080/data.json, you would have to implement some form of long-polling on the client to check for updated data. The configuration of client/server communication is outside the scope of this project, but there are many resources and tutorials available to help with that.

Once you do get the data updating in the client, all you have to do is call updateData() with the new traffic json.

[mrmarss]

Just to sheerly check if I can get the animation to update, I am calling the beginSampleData at a short, set interval. Naturally this function calls updateData(), and with each successful load of the json. This works initially and the custom json data loads up in the correct regions and subregions, but when I change the values of some of the metrics with new json information, the animation does not reflect the changes unless I refresh the page.

[hfaran]

@mrmarss I just came across this and was experiencing a similar issue. Assuming we were facing the same issue, my fix was to put the following at the top of updateData to make Vizceral always refresh to the view of the data we're giving it. This seems to be required because Vizceral seems designed to always display the "latest" data (and won't update to look at older data if we want to look at older data as well).

  updateData (newTraffic) {
    // We give new traffic the current time so vizceral always thinks this is the latest data (so the view updates properly)
    newTraffic.updated = Date.now();
    ... // remainder of the implementation
  }

@jrsquared you may want to clarify this behaviour in the How to Use on the wiki perhaps because this seems to trip people up. :)

[jrsquared]

Ah, nice. Yeah, it's a bug if you have to pass in updated. It should only skip an update if updated exists and is not greater than the last time it was updated. If the field is null, it should force update anyways...

[federicoboga]

Hi @jrsquared ! First, thanks for share. It is very useful to me. I have a question for you:
There is some service in Netflix that auto-generates the "data.json" content. Or do we have to implement it ourselves? In case it does not exist, do you know of an example that implements it? Thank you very much.

[JSONRice]

@federicoboga you have to provide your own data.json from a REST API or other service.

[denismakogon]

@jrsquared can you explain more clearly your statement:

We have a separate backend service that collects and merges all of the data we need to render in Vizceral. The client connects to this backend using socket.io, listens for new messages with updated data, and calls updateData everytime we get a new message.

So, if i understood correctly, there should be a service that can do traffic metering on each microservice, then be capable to render that into a sane format that vizceral can read, is that right?

[denismakogon]

@jrsquared
Can someone explain how to integrate a service that ships the config to a Vizceral app?
I've been facing a problem integrating the generated config file with example app, here's an original issue: #42.

Looking forward to getting the feedback as soon as possible.