What are the requirements for the endpoint response to make it work for .updateData?

[denismakogon]

So, i'm trying to implement simple thing - instead of relying on static JSON file call external service to return JSON object.

So, i have an endpoint that returns the following JSON:

{
    "connections": [
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "event-source",
            "target": "INTERNET"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "INTERNET",
            "target": "service-A"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-A",
            "target": "INTERNET"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-A",
            "target": "service-B"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "INTERNET",
            "target": "event-target"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "event-target",
            "target": "event-subscriber"
        },
        {
            "class": "normal",
            "metrics": {
                "danger": 10,
                "normal": 3000
            },
            "source": "service-B",
            "target": "event-target"
        }
    ],
    "name": "edge",
    "nodes": [
        {
            "class": "normal",
            "displayName": "INTERNET",
            "name": "INTERNET",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventSource",
            "name": "event-source",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "connections": [
                {
                    "class": "normal",
                    "metrics": {
                        "danger": 10,
                        "normal": 3000
                    },
                    "source": "INTERNET",
                    "target": "service-B"
                }
            ],
            "displayName": "ServiceA",
            "name": "service-A",
            "nodes": [
                {
                    "class": "normal",
                    "displayName": "INTERNET",
                    "name": "INTERNET",
                    "renderer": "focusedChild"
                },
                {
                    "class": "normal",
                    "displayName": "ServiceB",
                    "name": "service-B",
                    "renderer": "focusedChild"
                }
            ],
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "Service-A",
            "name": "service-A",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventTarget",
            "name": "event-target",
            "renderer": "focusedChild"
        },
        {
            "class": "normal",
            "displayName": "EventSubscriber",
            "name": "event-subscriber",
            "renderer": "focusedChild"
        }
    ],
    "renderer": "global"
}

cURL output:

* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /vizceral-config HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Content-Length: 1729
< Content-Type: application/json; charset=utf-8
< Date: Sat, 14 Apr 2018 20:40:17 GMT
< 

My code looks like this:

  beginSampleData () {
    this.traffic = { nodes: [], connections: [] };
    request.get(`https://<service-url>/vizceral-config`)
        .set('Accept', 'application/json')
        .end((err, res) => {
            if (res && res.status === 200) {
                this.traffic.clientUpdateTime = Date.now();
                this.updateData(res.body);
            }
        });
    }

  update () {
      request.get(`https://<service-url>/vizceral-config`)
          .set('Accept', 'application/json')
          .end((err, res) => {
              if (res && res.status === 200) {
                  this.traffic.clientUpdateTime = Date.now();
                  this.updateData(res.body);
              }
          });
    }

  componentDidMount () {
      this.checkInitialRoute();
      this.beginSampleData();

      // Listen for changes to the stores
      filterStore.addChangeListener(this.filtersChanged);
      this.timer = setInterval(this.update.bind(this), 100000);
  }

  componentWillUnmount () {
      filterStore.removeChangeListener(this.filtersChanged);
      clearInterval(this.timer);
  }

But i'm facing the problem, i can't get graph visualized, it stucks loading the graph for some reason:

I do see that vizceral app sends the request to the endpoint and it responds back with appropriate response (you can see that above). However, can't get graph visualized.

Looking forward to get help on this, thanks.

[denismakogon]

tried to do the same with fetch.get instead of request.get, but didn't work as well.

[denismakogon]

Tried a bit different approach to make the endpoint return a JSON file, nothing actually changed, UI still hangs.
Detailed response:

*   Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /config.json HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 200 OK
< Content-Disposition: attachment;filename=config.json
< Content-Length: 1704
< Content-Type: application/octet-stream
< Date: Sun, 15 Apr 2018 07:55:45 GMT
< 

[cglewis]

@denismakogon I'm doing a similar setup - chrome console logs is throwing the allow-origin error for me, so that might be what you're running into as well:

 No 'Access-Control-Allow-Origin' header is present on the requested resource.

[franpog859]

@cglewis Try to paste the first function at the beginning of your service - after the app declaration. It could be the issue with the CORS
https://enable-cors.org/server_expressjs.html

[nevosial]

I had a similar issue, but it worked after i did certain changes, so summing it up here,

1. My updated trafficFlow.jsx code is quite similar to what @denismakogon has shown above. I use request.get() and set the timer in the componentDidMount() to match the time required to fetch the data.

2. My backend api written using flask and returns a json object using the jsonify() function available from flask.

3. I enabled CORS using the following approach while declaring my flask app.

from flask_cors import CORS, cross_origin
app = Flask(__name__)
CORS(app)