!786 Fix WebUI issue due to network latency

Merge pull request !786 from Maxiaoqi/ui-enhancement
This commit is contained in:
i-robot 2021-03-28 11:18:57 +08:00 committed by Gitee
commit 571247be19
3 changed files with 49 additions and 53 deletions

View File

@ -56,10 +56,7 @@ import javax.annotation.PreDestroy;
import javax.annotation.concurrent.GuardedBy; import javax.annotation.concurrent.GuardedBy;
import javax.inject.Inject; import javax.inject.Inject;
import java.io.BufferedReader;
import java.io.IOException; import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URI;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.HashMap; import java.util.HashMap;
import java.util.HashSet; import java.util.HashSet;
@ -84,7 +81,6 @@ import static com.google.common.collect.ImmutableList.toImmutableList;
import static com.google.common.collect.ImmutableSet.toImmutableSet; import static com.google.common.collect.ImmutableSet.toImmutableSet;
import static com.google.common.collect.MoreCollectors.toOptional; import static com.google.common.collect.MoreCollectors.toOptional;
import static com.google.common.collect.Sets.difference; import static com.google.common.collect.Sets.difference;
import static io.airlift.http.client.HttpUriBuilder.uriBuilderFrom;
import static io.airlift.units.DataSize.succinctBytes; import static io.airlift.units.DataSize.succinctBytes;
import static io.airlift.units.Duration.nanosSince; import static io.airlift.units.Duration.nanosSince;
import static io.prestosql.ExceededMemoryLimitException.exceededGlobalTotalLimit; import static io.prestosql.ExceededMemoryLimitException.exceededGlobalTotalLimit;
@ -540,8 +536,9 @@ public class ClusterMemoryManager
// Add new nodes // Add new nodes
for (InternalNode node : aliveNodes) { for (InternalNode node : aliveNodes) {
if (!nodes.containsKey(node.getNodeIdentifier()) && shouldIncludeNode(node)) { if (!nodes.containsKey(node.getNodeIdentifier()) && shouldIncludeNode(node)) {
nodes.put(node.getNodeIdentifier(), new RemoteNodeMemory(node, httpClient, memoryInfoCodec, assignmentsRequestCodec, locationFactory.createMemoryInfoLocation(node), isBinaryEncoding)); // nodes.put(node.getNodeIdentifier(), new RemoteNodeMemory(node, httpClient, memoryInfoCodec, assignmentsRequestCodec, locationFactory.createMemoryInfoLocation(node), isBinaryEncoding));
allNodes.put(node.getNodeIdentifier(), new RemoteNodeMemory(node, httpClient, memoryInfoCodec, assignmentsRequestCodec, locationFactory.createMemoryInfoLocation(node), isBinaryEncoding)); nodes.put(node.getInternalUri().toString(), new RemoteNodeMemory(node, httpClient, memoryInfoCodec, assignmentsRequestCodec, locationFactory.createMemoryInfoLocation(node), isBinaryEncoding));
allNodes.put(node.getInternalUri().toString(), new RemoteNodeMemory(node, httpClient, memoryInfoCodec, assignmentsRequestCodec, locationFactory.createMemoryInfoLocation(node), isBinaryEncoding));
} }
} }
@ -614,29 +611,28 @@ public class ClusterMemoryManager
for (Entry<String, RemoteNodeMemory> entry : allNodes.entrySet()) { for (Entry<String, RemoteNodeMemory> entry : allNodes.entrySet()) {
// workerId is of the form "node_identifier [node_host] role" // workerId is of the form "node_identifier [node_host] role"
InternalNode node = entry.getValue().getNode(); InternalNode node = entry.getValue().getNode();
String role = node.isCoordinator() ? (node.isWorker() ? "Coordinator & Worker" : "Coordinator") : StringBuilder role = new StringBuilder(node.isCoordinator() ? (node.isWorker() ? "Coordinator & Worker" : "Coordinator") :
"Worker"; "Worker");
String workerId = "[" + entry.getValue().getNode().getInternalUri().toString() + "] " + role; role = new StringBuilder("\"" + role + "\"");
URI stateURI = uriBuilderFrom(entry.getValue().getNode().getInternalUri()) String workerId = entry.getValue().getNode().getInternalUri().toString();
.appendPath("/v1/info/state")
.build();
String stateTemp = "\"" + NodeState.DISCONNECTION + "\""; String stateTemp = "\"" + NodeState.DISCONNECTION + "\"";
try ( if (nodes.containsKey(entry.getKey())) {
InputStreamReader inputStreamReader = new InputStreamReader(stateURI.toURL().openStream()); stateTemp = "\"" + ACTIVE + "\"";
BufferedReader reader = new BufferedReader(inputStreamReader)) {
stateTemp = reader.readLine();
}
catch (IOException e) {
log.info("Worker disconnect");
} }
String state = stateTemp.substring(0, 2).toUpperCase(Locale.ENGLISH) + stateTemp.substring(2).toLowerCase(Locale.ENGLISH); String state = stateTemp.substring(0, 2).toUpperCase(Locale.ENGLISH) + stateTemp.substring(2).toLowerCase(Locale.ENGLISH);
String id = "\"" + node.getNodeIdentifier() + "\""; String id = "\"" + node.getNodeIdentifier() + "\"";
JsonNode jsonNode = null; JsonNode jsonNode = null;
try { try {
MemoryInfo info = entry.getValue().getInfo().orElse(new MemoryInfo(0, 0, 0, new DataSize(0, MemoryInfo activeInfo = new MemoryInfo(0, 0, 0, new DataSize(0,
DataSize.Unit.BYTE), new HashMap<>())); DataSize.Unit.BYTE), new HashMap<>());
for (Entry<String, RemoteNodeMemory> activeEntry : nodes.entrySet()) {
activeInfo = activeEntry.getValue().getInfo().orElse(new MemoryInfo(0, 0, 0, new DataSize(0,
DataSize.Unit.BYTE), new HashMap<>()));
break;
}
MemoryInfo info = entry.getValue().getInfo().orElse(activeInfo);
String memoryInfoJson = new ObjectMapper().writeValueAsString(info); String memoryInfoJson = new ObjectMapper().writeValueAsString(info);
StringBuilder memoryAndStateInfo = new StringBuilder(memoryInfoJson).insert(memoryInfoJson.length() - 1, ",\"state\":" + state + ",\"id\":" + id); StringBuilder memoryAndStateInfo = new StringBuilder(memoryInfoJson).insert(memoryInfoJson.length() - 1, ",\"state\":" + state + ",\"id\":" + id + ",\"role\":" + role);
jsonNode = new ObjectMapper().readTree(memoryAndStateInfo.toString()); jsonNode = new ObjectMapper().readTree(memoryAndStateInfo.toString());
} }
catch (JsonProcessingException e) { catch (JsonProcessingException e) {

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@ import React from "react";
import Header from '../queryeditor/components/Header'; import Header from '../queryeditor/components/Header';
import Footer from "../queryeditor/components/Footer"; import Footer from "../queryeditor/components/Footer";
import StatusFooter from "../queryeditor/components/StatusFooter"; import StatusFooter from "../queryeditor/components/StatusFooter";
import { formatDataSizeBytes } from "../utils"; import {formatDataSizeBytes} from "../utils";
import NavigationMenu from "../NavigationMenu"; import NavigationMenu from "../NavigationMenu";
import OverviewStore from "../overview/OverviewStore"; import OverviewStore from "../overview/OverviewStore";
import OverviewActions from "./OverviewActions"; import OverviewActions from "./OverviewActions";
@ -30,6 +30,7 @@ class NodesMain extends React.Component {
this._onChange = this._onChange.bind(this); this._onChange = this._onChange.bind(this);
this.lineDatas = this.lineDatas.bind(this); this.lineDatas = this.lineDatas.bind(this);
} }
componentDidMount() { componentDidMount() {
OverviewStore.listen(this._onChange); OverviewStore.listen(this._onChange);
this.lineDatas(); this.lineDatas();
@ -53,10 +54,9 @@ class NodesMain extends React.Component {
if (data.memoryData) { if (data.memoryData) {
Object.keys(data.memoryData).map(key => { Object.keys(data.memoryData).map(key => {
let obj = {}; let obj = {};
// obj.id = key.slice(0, key.indexOf(" "));
obj.id = data.memoryData[key].id; obj.id = data.memoryData[key].id;
obj.ip = key.slice(key.indexOf("[") + 1, key.indexOf("]")); obj.ip = key;
obj.role = key.slice(key.indexOf("]") + 2); obj.role = data.memoryData[key].role;
obj.count = data.memoryData[key].availableProcessors; obj.count = data.memoryData[key].availableProcessors;
let totalMemory = data.memoryData[key].totalNodeMemory.slice(0, -1); let totalMemory = data.memoryData[key].totalNodeMemory.slice(0, -1);
obj.nodeMemory = totalMemory; obj.nodeMemory = totalMemory;
@ -75,40 +75,40 @@ class NodesMain extends React.Component {
return ( return (
<div> <div>
<div className='flex flex-row flex-initial header'> <div className='flex flex-row flex-initial header'>
<Header /> <Header/>
</div> </div>
<div className='nodes'> <div className='nodes'>
<NavigationMenu active={"nodes"} /> <NavigationMenu active={"nodes"}/>
<div className="line-right"> <div className="line-right">
<div className="line-show"> <div className="line-show">
<div className="summary-table"> <div className="summary-table">
<h3>Cluster Nodes</h3> <h3>Cluster Nodes</h3>
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>IP</th> <th>IP</th>
<th>Role</th> <th>Role</th>
<th>CPU Count</th> <th>CPU Count</th>
<th>Usable Node Memory</th> <th>Usable Node Memory</th>
<th>Used Memory</th> <th>Used Memory</th>
<th>Free Memory</th> <th>Free Memory</th>
<th>State</th> <th>State</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.state.tableData.map((ele, index) => ( {this.state.tableData.map((ele, index) => (
<tr key={index}> <tr key={index}>
<td>{ele.id}</td> <td>{ele.id}</td>
<td>{ele.ip}</td> <td>{ele.ip}</td>
<td>{ele.role}</td> <td>{ele.role}</td>
<td>{ele.count}</td> <td>{ele.count}</td>
<td>{formatDataSizeBytes(ele.nodeMemory)}</td> <td>{formatDataSizeBytes(ele.nodeMemory)}</td>
<td>{formatDataSizeBytes(ele.usedMemory)}</td> <td>{formatDataSizeBytes(ele.usedMemory)}</td>
<td>{formatDataSizeBytes(ele.freeMemory)}</td> <td>{formatDataSizeBytes(ele.freeMemory)}</td>
<td>{ele.state}</td> <td>{ele.state}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -116,10 +116,10 @@ class NodesMain extends React.Component {
</div> </div>
</div> </div>
<div className='flex flex-row flex-initial statusFooter'> <div className='flex flex-row flex-initial statusFooter'>
<StatusFooter /> <StatusFooter/>
</div> </div>
<div className='flex flex-row flex-initial footer'> <div className='flex flex-row flex-initial footer'>
<Footer /> <Footer/>
</div> </div>
</div> </div>
) )