Merge pull request #34 from sudipt1999/ux-enhancements

Added updates as per issue #10 fixes all of them
HTTP-APIs · Mar 10, 2020 · caf48e9 · caf48e9
2 parents d57355b + e85c5b4
commit caf48e9
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 50 deletions.
diff --git a/console-frontend/build/asset-manifest.json b/console-frontend/build/asset-manifest.json
@@ -1,14 +1,14 @@
 {
   "files": {
     "main.css": "/static/css/main.b015b8f6.chunk.css",
-    "main.js": "/static/js/main.2e5459c8.chunk.js",
-    "main.js.map": "/static/js/main.2e5459c8.chunk.js.map",
+    "main.js": "/static/js/main.4752fb84.chunk.js",
+    "main.js.map": "/static/js/main.4752fb84.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.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.dbd30e7bbeb78a0eae5dcb8a4e9d52e9.js": "/precache-manifest.dbd30e7bbeb78a0eae5dcb8a4e9d52e9.js",
+    "precache-manifest.a47b7618a9685028effd132c1ebe7989.js": "/precache-manifest.a47b7618a9685028effd132c1ebe7989.js",
     "service-worker.js": "/service-worker.js",
     "static/css/main.b015b8f6.chunk.css.map": "/static/css/main.b015b8f6.chunk.css.map"
   }

diff --git a/console-frontend/build/index.html b/console-frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.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.2e5459c8.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.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.4752fb84.chunk.js"></script></body></html>
diff --git a/...ifest.02b26fb4dc23ffa64a91945b5e98557b.js → ...ifest.a47b7618a9685028effd132c1ebe7989.js b/...ifest.02b26fb4dc23ffa64a91945b5e98557b.js → ...ifest.a47b7618a9685028effd132c1ebe7989.js
@@ -1,19 +1,19 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "fe4a385bf4b516d55b7c060d62114bb1",
+    "revision": "57112bdbc86edf3973a4712603b809c8",
     "url": "/index.html"
   },
   {
-    "revision": "f7ef9ccbb1937dd42789",
+    "revision": "e7064fa8b665d67aabd1",
     "url": "/static/css/main.b015b8f6.chunk.css"
   },
   {
     "revision": "a60891681800a984f7f5",
     "url": "/static/js/2.cd05a796.chunk.js"
   },
   {
-    "revision": "f7ef9ccbb1937dd42789",
-    "url": "/static/js/main.a1aa2e85.chunk.js"
+    "revision": "e7064fa8b665d67aabd1",
+    "url": "/static/js/main.4752fb84.chunk.js"
   },
   {
     "revision": "42ac5946195a7306e2a5",

diff --git a/console-frontend/build/precache-manifest.dbd30e7bbeb78a0eae5dcb8a4e9d52e9.js b/console-frontend/build/precache-manifest.dbd30e7bbeb78a0eae5dcb8a4e9d52e9.js
diff --git a/console-frontend/build/service-worker.js b/console-frontend/build/service-worker.js
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.dbd30e7bbeb78a0eae5dcb8a4e9d52e9.js"
+  "/precache-manifest.a47b7618a9685028effd132c1ebe7989.js"
 );
 
 self.addEventListener('message', (event) => {

diff --git a/console-frontend/build/static/js/main.2e5459c8.chunk.js b/console-frontend/build/static/js/main.2e5459c8.chunk.js
diff --git a/console-frontend/build/static/js/main.2e5459c8.chunk.js.map b/console-frontend/build/static/js/main.2e5459c8.chunk.js.map
diff --git a/console-frontend/build/static/js/main.4752fb84.chunk.js b/console-frontend/build/static/js/main.4752fb84.chunk.js
diff --git a/console-frontend/build/static/js/main.4752fb84.chunk.js.map b/console-frontend/build/static/js/main.4752fb84.chunk.js.map
diff --git a/console-frontend/build/static/js/main.a1aa2e85.chunk.js b/console-frontend/build/static/js/main.a1aa2e85.chunk.js
diff --git a/console-frontend/build/static/js/main.a1aa2e85.chunk.js.map b/console-frontend/build/static/js/main.a1aa2e85.chunk.js.map
diff --git a/console-frontend/src/components/hydra-console/HydraConsole.jsx b/console-frontend/src/components/hydra-console/HydraConsole.jsx
@@ -101,6 +101,16 @@ const styles = theme => ({
         boxShadow: '0 3px 5px 2px rgba(255, 255, 255, .3)',
         height: 48,
         width: '22%',
+    },
+    deleteIconButton: {
+        marginLeft: '60% !important',
+        marginBottom: '10px',
+        backgroundColor: GuiTheme.palette.primary.light,
+        color: GuiTheme.palette.primary.dark,
+        '&:hover': {
+            backgroundColor: GuiTheme.palette.secondary.light,
+            color: GuiTheme.palette.primary.dark,
+        },
     }
 });
 
@@ -110,6 +120,14 @@ class HydraConsole extends React.Component {
         var endpoints = null;
         var classesMapping = []
         this.agentEndpoint = ""
+        let selectedOperationIndex = 0
+
+        // util variables
+        this.temporaryEndpoint = null;
+        this.previousEndpointIndex = 0; // for managing the state and local storage
+        this.selectedEndpoint = null;
+        this.selectedOperation = null;
+        this.getURL = true;
 
         // Modifying reference from indexed array[0, 1, 2] to name ["vocab:Drone", "vocab:.."]
         for(var index in this.props.hydraClasses){
@@ -132,6 +150,20 @@ class HydraConsole extends React.Component {
                     classesMapping[auxClass].supportedProperty[auxProperty].title] = ""
             }
         }
+
+        // Initialize the local storage with the empty values
+        if (localStorage.getItem('properties') === null) {
+            localStorage.setItem('properties', JSON.stringify(classesProperties))
+        }else{
+            classesProperties = JSON.parse(localStorage.getItem('properties'))
+        }
+
+        if (localStorage.getItem('resourceIDs') === null) {
+            localStorage.setItem('resourceIDs', JSON.stringify(resourcesIDs))
+        }else{
+            resourcesIDs = JSON.parse(localStorage.getItem('resourceIDs'))
+        }
+
         this.state = {
             hydraClasses: classesMapping,
             endpoints: endpoints,
@@ -141,20 +173,51 @@ class HydraConsole extends React.Component {
             selectedOperationIndex: 0,
             outputText: " Your request output will be displayed here..."
         };      
-        this.temporaryEndpoint = null;
-        this.selectedEndpoint = null;
-        this.selectedOperation = null;
-        this.getURL = true;
+
     }
 
     componentDidMount() {
     }
 
+    componentDidUpdate() {
+        this.restorePropertiesAndResourceIDs()
+    }
+
+    restorePropertiesAndResourceIDs() {
+        if(this.previousEndpointIndex != this.state.selectedEndpointIndex) {
+            const storedProperties = JSON.parse(localStorage.getItem('properties'))
+            const storedResourceIDs = JSON.parse(localStorage.getItem('resourceIDs'))
+
+            this.setState({
+                properties: storedProperties,
+                resourcesIDs: storedResourceIDs
+            })
+
+            // updating for next time
+            this.previousEndpointIndex = this.state.selectedEndpointIndex 
+        }
+    }
+
     selectEndpoint(endpointIndex) {
-        this.setState(
-            {selectedEndpointIndex: endpointIndex,
-            selectedOperationIndex: 0}
-        )
+        const selectedEndpoint = this.state.endpoints[endpointIndex];
+        this.selectedEndpoint = selectedEndpoint;
+
+        const temporaryEndpoint = selectedEndpoint.property.range.replace("Collection", "")
+        this.temporaryEndpoint = temporaryEndpoint;
+
+        const selectedHydraClass = this.state.hydraClasses[temporaryEndpoint];       
+        const operations = selectedHydraClass.supportedOperation
+
+        let selectedOperationIndex = 0;
+        operations.map((operation, index) => {
+            if(operation.method == "GET")
+                selectedOperationIndex = index
+        })
+
+        this.setState({
+                selectedEndpointIndex: endpointIndex,
+                selectedOperationIndex: selectedOperationIndex
+        })
     }
 
     selectOperation(operationIndex) {
@@ -169,6 +232,9 @@ class HydraConsole extends React.Component {
 
         let auxProperties = Object.assign({}, this.state.properties);
         auxProperties[this.temporaryEndpoint][e.target.name] = e.target.value;
+
+        localStorage.setItem('properties', JSON.stringify(auxProperties))
+
         this.setState({
             properties: auxProperties
         })
@@ -180,11 +246,38 @@ class HydraConsole extends React.Component {
 
         let resourcesIDs = Object.assign({}, this.state.resourcesIDs);
         resourcesIDs[e.target.name]['ResourceID'] = e.target.value;
+
+        localStorage.setItem('resourceIDs', JSON.stringify(resourcesIDs))
+
         this.setState({
             resourcesIDs: resourcesIDs
         })
     }
 
+    clearAllInputs(e) {
+        // Will clear the current endpoints input 
+        let auxProperties = Object.assign({}, this.state.properties);
+        Object.keys(auxProperties[this.temporaryEndpoint]).map(name => {
+            auxProperties[this.temporaryEndpoint][name] = ""
+        })
+
+        let resourcesIDs = Object.assign({}, this.state.resourcesIDs);
+        Object.keys(resourcesIDs).map(name => {
+            resourcesIDs[name]['ResourceID'] = ""
+        })
+
+        localStorage.setItem('properties', JSON.stringify(auxProperties))
+        localStorage.setItem('resourceIDs', JSON.stringify(resourcesIDs))
+
+
+        this.setState({
+            properties: auxProperties,
+            resourcesIDs: resourcesIDs
+        })
+    }
+
+
+
     sendCommand(){
         const properties = this.state.properties[this.temporaryEndpoint];
         var filteredProperties = {}
@@ -312,11 +405,10 @@ class HydraConsole extends React.Component {
 
         const temporaryEndpoint = selectedEndpoint.property.range.replace("Collection", "")
         this.temporaryEndpoint = temporaryEndpoint;
-        
+
         var selectedHydraClass = this.state.hydraClasses[temporaryEndpoint];
 
-        const selectedOperation = selectedHydraClass.supportedOperation[
-            this.state.selectedOperationIndex];
+        const selectedOperation = selectedHydraClass.supportedOperation[this.state.selectedOperationIndex];
         this.selectedOperation = selectedOperation;
 
         var stringProps = JSON.stringify(this.state.properties[temporaryEndpoint], this.jsonStringifyReplacer);
@@ -363,6 +455,13 @@ class HydraConsole extends React.Component {
                     direction="column"
                     justify="center"
                     alignItems="center">
+                    <Button aria-label="delete" 
+                        size="medium"
+                        variant="contained" 
+                        className={classes.deleteIconButton}
+                        onClick={(e) => this.clearAllInputs(e)}>
+                        CLEAR
+                    </Button>
                     <Grid className={classes.propertiesContainer}
                         container
                         direction="row"

diff --git a/console-frontend/src/components/hydra-console/operations-buttons/OperationsButtons.jsx b/console-frontend/src/components/hydra-console/operations-buttons/OperationsButtons.jsx
@@ -12,11 +12,16 @@ class OperationsButtons extends React.Component {
         super(props);
         var buttons = []
 
-        Object.keys(this.props.operations).forEach( (operation) => {
+        let selectedButton = 0;
+
+        const operationsArray = Object.keys(this.props.operations);
+        operationsArray.forEach( (operation, index) => {
             buttons[operation] = false
+            if(this.props.operations[operation].method == "GET")
+                selectedButton = index
         })
 
-        const selectedButton = 0;
+
         buttons[ selectedButton ] = true
 
         this.state = {
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="/favicon.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.2e5459c8.chunk.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.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.4752fb84.chunk.js"></script></body></html>