[Bug] Skywalking UI topology page stuck with over 100+ nodes.

[tsuijie]

Search before asking

• I had searched in the issues and found no similar issues.

Apache SkyWalking Component

UI (apache/skywalking-booster-ui)

What happened

Skywalking UI topology page stuck with over 100+ nodes.

What you expected to happen

Function normally.

How to reproduce

service/endpoint exceed 100+ and more.

Anything else

No response

Are you willing to submit a pull request to fix on your own?

• Yes I am willing to submit a pull request on my own!

Code of Conduct

• I agree to follow this project's Code of Conduct

[wu-sheng]

If you could provide topology response, we may be able to try.
We had users visualising more han 200, it seems good.
TBH, 200 nodes topo could be only a tech show, it doesn't have any real meaning in operation daily work.

[tsuijie]

The exact number I last checked is (in our production environment):
First req: 1 service, First resp: 86 nodes.
Second req: 86 service, Second resp: 226 nodes.
So the actual node number is around 300 nodes.
We have experienced out of memory situation varied due to user desktop performance.

[wu-sheng]

For now(latest version), we usually expect service oriented topology, rather than global topo, although we provided that.
As replied, if you want us to take a look, please provide that large response. We don't have that data to reproduce at our end.

[tsuijie]

Thanks, I use python script to simulate large amount of entities, will provide request samples later when convenient.

[tsuijie]

Finally we have found a dead lock in ui source code.
Change:
useExpressionsProcessor.ts line 28

function chunkArray(array: any[], chunkSize: number) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}

Add the following code:

function chunkArray(array: any[], chunkSize: number) {
  if (chunkSize == 0) {
    chinkSize = 1
  }
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}

This will solve fronend dead lock and trigger backend error:
More than 15,000 ‘grammar‘ tokens have been presented.
Some of the request will be denied due to large request entities.

[wu-sheng]

@tsuijie The request should be cut into several requests, and GraphQL will reject too large requests to protect OAP from OOM.

@Fine0830 could you take a look at here about the code? And separate the nodes into different requests when it gets too large.

[wu-sheng]

This should resolve large topology conflicts that are caused by GraphQL limitations.
apache/skywalking-booster-ui#485

This patch will be included in 10.3.0 release.

[tsuijie]

#11884

[dongjiang1989]

It is recommended to use the Grafana dashboard and set the size of the endpoint limit.

[dongjiang1989]

It is recommended to use the Grafana dashboard and set the size of the endpoint limit.
@tsuijie

[wu-sheng]

It is recommended to use the Grafana dashboard and set the size of the endpoint limit.

This is not a recommendation from the maintainer team. That is only an extension for Grafana users.