Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature added #12, clickable links on output #39

Merged
merged 4 commits into from
Mar 22, 2020
Merged

feature added #12, clickable links on output #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
750d737
feature added #12, clickable links on output
sudipt1999 Mar 18, 2020
4bd395f
added generic methods for producing output, replaced the older ones
sudipt1999 Mar 21, 2020
cbb1d5a
added docstring to describe what each method does, also added the met…
sudipt1999 Mar 21, 2020
fdf795a
Merge branch 'develop' into c-links
sudipt1999 Mar 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions console-frontend/build/asset-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"files": {
"main.css": "/static/css/main.93ae310b.chunk.css",
"main.js": "/static/js/main.e7739c82.chunk.js",
"main.js.map": "/static/js/main.e7739c82.chunk.js.map",
"main.css": "/static/css/main.b015b8f6.chunk.css",
"main.js": "/static/js/main.45544355.chunk.js",
"main.js.map": "/static/js/main.45544355.chunk.js.map",
"runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
"runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
"static/js/2.e70a2f99.chunk.js": "/static/js/2.e70a2f99.chunk.js",
"static/js/2.e70a2f99.chunk.js.map": "/static/js/2.e70a2f99.chunk.js.map",
"static/js/2.cd05a796.chunk.js": "/static/js/2.cd05a796.chunk.js",
"static/js/2.cd05a796.chunk.js.map": "/static/js/2.cd05a796.chunk.js.map",
"index.html": "/index.html",
"precache-manifest.36a12be35751b328cbcf9d68d6cce629.js": "/precache-manifest.36a12be35751b328cbcf9d68d6cce629.js",
"precache-manifest.40e886a9bb06244d628b18a2de4f21a4.js": "/precache-manifest.40e886a9bb06244d628b18a2de4f21a4.js",
"service-worker.js": "/service-worker.js",
"static/css/main.93ae310b.chunk.css.map": "/static/css/main.93ae310b.chunk.css.map"
"static/css/main.b015b8f6.chunk.css.map": "/static/css/main.b015b8f6.chunk.css.map"
}
}
2 changes: 1 addition & 1 deletion console-frontend/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/Hydra.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" crossorigin="use-credentials" href="/manifest.json"/><title>Hydra Agent</title><link href="/static/css/main.93ae310b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.e70a2f99.chunk.js"></script><script src="/static/js/main.e7739c82.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/Hydra.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" crossorigin="use-credentials" href="/manifest.json"/><title>Hydra Agent</title><link href="/static/css/main.b015b8f6.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.cd05a796.chunk.js"></script><script src="/static/js/main.45544355.chunk.js"></script></body></html>
22 changes: 22 additions & 0 deletions console-frontend/build/precache-manifest.40e886a9bb06244d628b18a2de4f21a4.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
self.__precacheManifest = (self.__precacheManifest || []).concat([
{
"revision": "0a2113343873c3ed559106b8a48b144c",
"url": "/index.html"
},
{
"revision": "b328bb9d8acc0cbc1c78",
"url": "/static/css/main.b015b8f6.chunk.css"
},
{
"revision": "a60891681800a984f7f5",
"url": "/static/js/2.cd05a796.chunk.js"
},
{
"revision": "b328bb9d8acc0cbc1c78",
"url": "/static/js/main.45544355.chunk.js"
},
{
"revision": "42ac5946195a7306e2a5",
"url": "/static/js/runtime~main.a8a9905a.js"
}
]);
4 changes: 2 additions & 2 deletions console-frontend/build/service-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

importScripts(
"/precache-manifest.36a12be35751b328cbcf9d68d6cce629.js"
"/precache-manifest.40e886a9bb06244d628b18a2de4f21a4.js"
);

self.addEventListener('message', (event) => {
Expand All @@ -35,5 +35,5 @@ workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {

blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
blacklist: [/^\/_/,/\/[^/]+\.[^/]+$/],
});
2 changes: 2 additions & 0 deletions console-frontend/build/static/js/main.45544355.chunk.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions console-frontend/build/static/js/main.45544355.chunk.js.map
View file
Open in desktop

Large diffs are not rendered by default.

196 changes: 191 additions & 5 deletions console-frontend/src/components/hydra-console/HydraConsole.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,42 @@ const styles = theme => ({
backgroundColor: GuiTheme.palette.secondary.light,
color: GuiTheme.palette.primary.dark,
},
},
outputConsoleBraces: {
marginLeft: '20px'
},
objectValue: {
display: 'flex'
},
objectValueKeyValueLink: {
marginLeft: '10px',
color: '#0276FD',
cursor: 'pointer'
},
objectValueKey: {
marginLeft: '5px'
},
objectValueKeyValue: {
marginLeft: '10px'
}
});


function isObject(value) {
// utility method that returns boolean value
return value && typeof value === "object" && value.constructor === Object;
}

function isArray(value) {
// utility method that returns boolean value
return value && typeof value === "object" && value.constructor === Array;
}

function isString(value) {
// utility method that returns boolean value
return typeof value === "string" || value instanceof String;
}

class HydraConsole extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -233,6 +266,7 @@ class HydraConsole extends React.Component {
// Fetch will work by URL
this.getURL = true;

console.log(e.target.name +" "+ e.target.value)
let resourcesIDs = Object.assign({}, this.state.resourcesIDs);
resourcesIDs[e.target.name]['ResourceID'] = e.target.value;

Expand Down Expand Up @@ -265,7 +299,149 @@ class HydraConsole extends React.Component {
})
}

setResourceID(name, value) {
// This is a ulitlity method to set the Resource Field id from clicking on the output link in output console
this.getURL = true;
let resourcesIDs = Object.assign({}, this.state.resourcesIDs);
resourcesIDs[name]['ResourceID'] = value.split('/').pop();

localStorage.setItem('resourceIDs', JSON.stringify(resourcesIDs))

this.setState({
resourcesIDs: resourcesIDs
})
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add proper comments/docstrings to explain what each function does

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great if you can do this for all the functions not just for the functions you wrote. 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing to do, my plan was to add them to every function once it was reviewed! Thank you

printObjectValue = (value) => {
// A helper method printObject() method to print its key value
const classes = this.props.classes

return Object.keys(value).map(key => {
if(key == '@id'){
// link has to be returned
return(
<div className={classes.objectValue}>
<div className={classes.objectValueKey}>{key} :</div>
<div className={classes.objectValueKeyValueLink} onClick={(e) => this.setResourceID(this.temporaryEndpoint, value[key])}>
{value[key]},
</div>
</div>
)
}

if (isString(value[key]))
return (
<div className={classes.objectValue}>
<div className={classes.objectValueKey}>{key} :</div>
<div className={classes.objectValueKeyValue}>{value[key]},</div>
</div>
);
if (isObject(value[key]))
return (
<div className={classes.objectValue}>
<div className={classes.objectValueKey}>{key} :</div>
<div className={classes.objectValueKeyValue}>{this.printObject(value[key])}</div>
</div>
);
if (isArray(value[key]))
return (
<div className={classes.objectValue}>
<div className={classes.objectValueKey}>{key} :</div>
<div className={classes.objectValueKeyValue}>{this.printArray(value[key])}</div>
</div>
);
});
}

printObject(value, isFirst=false) {
// Utility method to print key value pair of object
const classes = this.props.classes

if(Object.keys(value).length == 0){
// empty object, &#123; is code for '{' and &125; is for '}'
return(
<div className={classes.emptyObject}>&#123; &#125;</div>
)
}

return(
<div className={classes.printObjectClass}>
<div>&#123;</div>
<div className={classes.outputConsoleBraces}>
{this.printObjectValue(value)}
</div>
<div>&#125;{(!isFirst)?",":""}</div>
</div>
)

}

printArrayValue = (value) => {
// A helper method for printArray() to print all the values inside the Array
const classes = this.props.classes
return value.map(v => {
if (isString(v))
return (
<div className={classes.arrayValue}>
{v},
</div>
);
if (isObject(v))
return (
<div className={classes.arrayValue}>
{this.printObject(v)}
</div>
);
if (isArray(v))
return (
<div className={classes.arrayValue}>
{this.printArray(v)}
</div>
);
return null;
});
}

printArray = (value, isFirst=false) => {
// utility method to print values of array in output console
const classes = this.props.classes
if(value.length == 0){
// Empty Array
return (
<div className={classes.emptyArray}>[]</div>
)
}

return(
<div className={classes.printArrayClass}>
<div>[</div>
<div className={classes.outputConsoleBraces}>
{this.printArrayValue(value)}
</div>
<div>]{(!isFirst)?",":""}</div>
</div>
)
}


convertOutput = data => {
// a generic method to print output on console of any response provided by the server
if (isArray(data)) {
return (
<div>
{this.printArray(data, true)}
</div>
);
}
if (isObject(data)) {
return (
<div>
{this.printObject(data, true)}
</div>
);
}
return <div>{JSON.stringify(data, this.jsonStringifyReplacer, 8)}</div>
};

sendCommand(){
const properties = this.state.properties[this.temporaryEndpoint];
Expand Down Expand Up @@ -294,8 +470,10 @@ class HydraConsole extends React.Component {
}
axios.post(this.agentEndpoint + '/send-command', getBody)
.then( (response) => {
let outputText = ""
outputText = this.convertOutput(response.data)
this.setState({
outputText: JSON.stringify(response.data, this.jsonStringifyReplacer, 8),
outputText,
})
})
.catch(function (error) {
Expand All @@ -315,8 +493,10 @@ class HydraConsole extends React.Component {
//debugger
axios.post(this.agentEndpoint + '/send-command', putBody)
.then( (response) => {
let outputText = ""
outputText = this.convertOutput(response.data)
this.setState({
outputText: JSON.stringify(response.data, this.jsonStringifyReplacer, 8),
outputText,
})
})
.catch(function (error) {
Expand All @@ -335,8 +515,10 @@ class HydraConsole extends React.Component {
filteredProperties['@type'] = resourceType;
axios.post(this.agentEndpoint + '/send-command', postBody)
.then( (response) => {
let outputText = ""
outputText = this.convertOutput(response.data)
this.setState({
outputText: JSON.stringify(response.data, this.jsonStringifyReplacer, 8),
outputText,
})
})
.catch(function (error) {
Expand All @@ -352,8 +534,10 @@ class HydraConsole extends React.Component {
}
axios.post(this.agentEndpoint + '/send-command', deleteBody)
.then( (response) => {
let outputText = ""
outputText = this.convertOutput(response.data)
this.setState({
outputText: JSON.stringify(response.data, this.jsonStringifyReplacer, 8),
outputText,
})
})
.catch(function (error) {
Expand All @@ -367,8 +551,10 @@ class HydraConsole extends React.Component {
filters: this.state.properties[this.temporaryEndpoint],
})
.then(function (response) {
let outputText = ""
outputText = this.convertOutput(response)
this.setState({
outputText: response,
outputText,
})
console.log(response);
})
Expand Down