Skip to content

Commit

Permalink
response viewer updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrmerugu
rrmerugu committed May 29, 2021
1 parent 4b2ebf3 commit 07f31ed
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 25 deletions.
18 changes: 12 additions & 6 deletions src/connector/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class ConnectorBase {
}


flushResponses(){
flushResponses() {
this.responsesList = [];
}

Expand All @@ -59,21 +59,25 @@ class ConnectorBase {
this.responsesList = [];
}

gatherDataFromStream(response, transportStatusCode) {
gatherDataFromStream(response, transportStatusCode, transportTime) {
console.log("onmessage received", response);
const responseObject = new this.responseCls(response, transportStatusCode);
const responseObject = new this.responseCls(response, transportStatusCode, transportTime);
if (transportStatusCode >= 200 && transportStatusCode < 300) {
if (transportStatusCode === 206) {
this.responseEventsCallback({
statusMessage: "Gathering example-data from the stream",
statusCode: transportStatusCode,
lastResponseStatusCode: transportStatusCode,
lastResponseElapsedTime: responseObject.transportTime,

isStreaming: true
})
this.addResponse2List(responseObject);
} else {
this.responseEventsCallback({
statusMessage: "Responded to the Query Successfully",
statusCode: transportStatusCode,
lastResponseStatusCode: transportStatusCode,
lastResponseElapsedTime: responseObject.transportTime,

isStreaming: false
})
this.addResponse2List(responseObject);
Expand All @@ -87,7 +91,9 @@ class ConnectorBase {
// const responses = Object.assign(this.responsesList);
this.responseEventsCallback({
statusMessage: "Query Failed with " + transportStatusCode + " error.",
statusCode: transportStatusCode,
lastResponseStatusCode: transportStatusCode,
lastResponseElapsedTime: responseObject.transportTime,

isStreaming: false
})
this.responseCallback(responseObject);
Expand Down
6 changes: 5 additions & 1 deletion src/connector/invana-engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@ export default class InvanaEngineHTTPConnector extends ConnectorBase {
postData(this.serverUrl, extraHeaders, queryPayload).then((data) => {
// check the status and response type and change isConnected
console.log("InvanaEngineHTTPConnector", data);
_this.gatherDataFromStream(data.response, data.transporterStatusCode);
_this.gatherDataFromStream(
data.response,
data.transporterStatusCode,
data.transportTime
);
});
}
}
3 changes: 2 additions & 1 deletion src/connector/responses/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@

export default class ResponseBase {

constructor(response, transporterStatusCode) {
constructor(response, transporterStatusCode, transportTime) {
this.response = response;
this.transporterStatusCode = transporterStatusCode;
this.transportTime = transportTime
}

getResponseData() {
Expand Down
13 changes: 10 additions & 3 deletions src/connector/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,12 @@ export async function postData(url = '', extraHeaders = {}, data = {}) {
const connectionUrl = urlAnalysed.origin + urlAnalysed.pathname;
// let response = null
let transporterStatusCode = null;
let transportTime = 0;
let responseJson = {};

try {
const startTime = Date.now();

const response = await fetch(connectionUrl, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
Expand All @@ -24,7 +27,7 @@ export async function postData(url = '', extraHeaders = {}, data = {}) {
body: JSON.stringify(data) // body example-data type must match "Content-Type" header
});
console.log("response========", response);

transportTime= Date.now() - startTime;
transporterStatusCode = response.status
try {
responseJson = await response.json();
Expand All @@ -36,7 +39,11 @@ export async function postData(url = '', extraHeaders = {}, data = {}) {
transporterStatusCode = 999;
}

// let statusCode = response.status; // response from the server.
// let lastResponseStatusCode = response.status; // response from the server.

return {"response": responseJson, transporterStatusCode: transporterStatusCode}
return {
response: responseJson,
transporterStatusCode: transporterStatusCode,
transportTime: transportTime
}
}
11 changes: 7 additions & 4 deletions src/web/layouts/default-remote.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ export default class DefaultRemoteComponent extends React.Component {
isConnected2Gremlin: null,
isStreaming: null,
isQuerying: null,
statusCode: null,

lastResponseStatusCode: null,
lastResponseElapsedTime: 0,

statusMessage: null,

showQueryConsole: false,
Expand All @@ -44,7 +47,7 @@ export default class DefaultRemoteComponent extends React.Component {
// console.log("===eventName", eventName, eventValue);
if (eventName === "statusMessage") {
this.setStatusMessage(eventValue);
} else if (eventName === "statusCode") {
} else if (eventName === "lastResponseStatusCode") {
this.setstatusCode(eventValue);
} else if (eventName === "isStreaming") {
this.setIsStreaming(eventValue);
Expand All @@ -61,8 +64,8 @@ export default class DefaultRemoteComponent extends React.Component {
this.setState({isStreaming: status});
}

setstatusCode(statusCode) {
this.setState({statusCode: statusCode});
setstatusCode(lastResponseStatusCode) {
this.setState({lastResponseStatusCode: lastResponseStatusCode});
}

setErrorMessage(message) {
Expand Down
30 changes: 20 additions & 10 deletions src/web/viewlets/canvas/graph-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ export default class GraphCanvas extends DefaultRemoteComponent {
showWelcome: true,


statusCode: null,
lastResponseStatusCode: null,

nodes: [],
edges: [],
nodeGroups: {},
Expand Down Expand Up @@ -99,7 +100,7 @@ export default class GraphCanvas extends DefaultRemoteComponent {
// if (lastResponse) {
// const {nodes, edges} = this.separateNodesAndEdges(data);
// this.addNewData(nodes, edges);
// this.setState({statusCode: response.transporterStatusCode});
// this.setState({lastResponseStatusCode: response.transporterStatusCode});
// if (response.transporterStatusCode !== 200) {
// this.setState({rightContentName: "response-viewer"})
// }
Expand Down Expand Up @@ -385,7 +386,7 @@ export default class GraphCanvas extends DefaultRemoteComponent {
if (lastResponse) {
const {nodes, edges} = this.separateNodesAndEdges(data);
this.addNewData(nodes, edges);
this.setState({statusCode: response.transporterStatusCode});
this.setState({lastResponseStatusCode: response.transporterStatusCode});
if (response.transporterStatusCode !== 200) {
this.setState({rightContentName: "response-viewer"})
}
Expand Down Expand Up @@ -609,18 +610,18 @@ export default class GraphCanvas extends DefaultRemoteComponent {
<ListGroup.Item
className={"pt-0 pb-0 border-0 pl-3 pr-2"}>{this.state.statusMessage}</ListGroup.Item>
{
this.state.statusCode
this.state.lastResponseStatusCode
? <ListGroup.Item className={"pt-0 pb-0 border-0 pl-2 pr-2"}>

<Button variant={"link"} className={"p-0"}
onClick={() => this.setModalContentName("last-response")}
style={{"font-size": "inherit", "marginTop": "-4px"}}>
style={{"fontSize": "inherit", "marginTop": "-4px"}}>
<span style={{
'color': ` ${this.state.statusCode === 200 ? 'green' : 'red'}`,
'color': ` ${this.state.lastResponseStatusCode === 200 ? 'green' : 'red'}`,
"fontWeight": "bold"
}}>

{this.state.statusCode}</span> <span
{this.state.lastResponseStatusCode}</span> <span
className={"text-muted"}>response</span>
</Button>
</ListGroup.Item>
Expand Down Expand Up @@ -813,17 +814,26 @@ export default class GraphCanvas extends DefaultRemoteComponent {
>{JSON.stringify(this.state.lastResponse, null, 2)}</pre>
</code>
<div className="row mt-2">
<div className="col col-4">
<div className="col col-9">

<Nav className="">

<Nav.Item className={"mr-3 "}>
Took {
this.state.lastResponseElapsedTime > 0
?
<React.Fragment>{this.state.lastResponseElapsedTime} seconds</React.Fragment>
: <React.Fragment>less than a second</React.Fragment>
}

</Nav.Item>
<Nav.Item className={"mr-3 "}>
<span style={{
'color': ` ${this.state.statusCode === 200 ? 'green' : 'red'}`,
'color': ` ${this.state.lastResponseStatusCode === 200 ? 'green' : 'red'}`,
"fontWeight": "bold"
}}>

{this.state.statusCode} response</span>
{this.state.lastResponseStatusCode} response</span>
</Nav.Item>
<Nav.Item className={"mr-3 "}>
<Button variant={"link"}
Expand Down

0 comments on commit 07f31ed

Please sign in to comment.