diff --git a/package-lock.json b/package-lock.json
index a781f33..08f3c28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1654,6 +1654,11 @@
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.2.tgz",
"integrity": "sha1-ovuhsSLGmoXKoC0Q+ScMchlwmp0="
},
+ "abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
"accepts": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1663,6 +1668,11 @@
"negotiator": "0.6.2"
}
},
+ "ace-builds": {
+ "version": "1.4.7",
+ "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.7.tgz",
+ "integrity": "sha512-gwQGVFewBopRLho08BfahyvRa9FlB43JUig5ItAKTYc9kJJsbA9QNz75p28QtQomoPQ9rJx82ymL21x4ZSZmdg=="
+ },
"acorn": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
@@ -3577,6 +3587,15 @@
"typedarray": "^0.0.6"
}
},
+ "config-chain": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+ "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+ "requires": {
+ "ini": "^1.3.4",
+ "proto-list": "~1.2.1"
+ }
+ },
"confusing-browser-globals": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz",
@@ -4242,6 +4261,11 @@
"debug": "^2.6.0"
}
},
+ "diff-match-patch": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
+ "integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
+ },
"diff-sequences": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -4413,6 +4437,17 @@
"safer-buffer": "^2.1.0"
}
},
+ "editorconfig": {
+ "version": "0.15.3",
+ "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+ "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+ "requires": {
+ "commander": "^2.19.0",
+ "lru-cache": "^4.1.5",
+ "semver": "^5.6.0",
+ "sigmund": "^1.0.1"
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7795,6 +7830,18 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
+ "js-beautify": {
+ "version": "1.10.2",
+ "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.2.tgz",
+ "integrity": "sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==",
+ "requires": {
+ "config-chain": "^1.1.12",
+ "editorconfig": "^0.15.3",
+ "glob": "^7.1.3",
+ "mkdirp": "~0.5.1",
+ "nopt": "~4.0.1"
+ }
+ },
"js-levenshtein": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -8134,6 +8181,16 @@
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
},
+ "lodash.get": {
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+ "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+ },
+ "lodash.isequal": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+ "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+ },
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8189,6 +8246,15 @@
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
"integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
},
+ "lru-cache": {
+ "version": "4.1.5",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+ "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+ "requires": {
+ "pseudomap": "^1.0.2",
+ "yallist": "^2.1.2"
+ }
+ },
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8697,6 +8763,15 @@
"semver": "^5.3.0"
}
},
+ "nopt": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+ "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+ "requires": {
+ "abbrev": "1",
+ "osenv": "^0.1.4"
+ }
+ },
"normalize-package-data": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -9014,6 +9089,11 @@
"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
"integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
},
+ "os-homedir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+ "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+ },
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
@@ -9029,6 +9109,15 @@
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
},
+ "osenv": {
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+ "requires": {
+ "os-homedir": "^1.0.0",
+ "os-tmpdir": "^1.0.0"
+ }
+ },
"p-defer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -10433,6 +10522,11 @@
"react-is": "^16.8.1"
}
},
+ "proto-list": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+ "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+ },
"proxy-addr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -10447,6 +10541,11 @@
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
},
+ "pseudomap": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+ },
"psl": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.4.0.tgz",
@@ -10609,6 +10708,18 @@
"prop-types": "^15.6.2"
}
},
+ "react-ace": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-8.0.0.tgz",
+ "integrity": "sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==",
+ "requires": {
+ "ace-builds": "^1.4.6",
+ "diff-match-patch": "^1.0.4",
+ "lodash.get": "^4.4.2",
+ "lodash.isequal": "^4.5.0",
+ "prop-types": "^15.7.2"
+ }
+ },
"react-app-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.3.tgz",
@@ -11737,6 +11848,11 @@
"resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
"integrity": "sha1-1rkYHBpI05cyTISHHvvPxz/AZUs="
},
+ "sigmund": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+ "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+ },
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -13605,6 +13721,11 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
"integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms="
+ },
+ "yallist": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+ "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
}
}
}
diff --git a/package.json b/package.json
index 77be1ac..7ac0604 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "js-beautify": "^1.10.2",
"moment": "^2.24.0",
"perms": "^0.1.0",
"react": "^16.9.0",
+ "react-ace": "^8.0.0",
"react-dom": "^16.9.0",
"react-moment": "^0.9.6",
"react-router-dom": "^5.1.2",
diff --git a/src/views/home/Home.js b/src/views/home/Home.js
index 9b7c097..3b54f07 100644
--- a/src/views/home/Home.js
+++ b/src/views/home/Home.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
// Components
import UserInput from './UserInput';
diff --git a/src/views/tickets/JSViewer.js b/src/views/tickets/JSViewer.js
new file mode 100644
index 0000000..8c68f14
--- /dev/null
+++ b/src/views/tickets/JSViewer.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+
+import { Dropdown } from 'semantic-ui-react';
+
+import AceEditor from 'react-ace';
+import { js as beautify } from 'js-beautify';
+
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+export default class CodeBlock extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ ready: false,
+ };
+ }
+
+ fileList = [];
+
+ fetchArtifacts() {
+ const artifactURL = `http://localhost:8080/api/tickets/${this.props.ticketID}/artifacts`;
+ try {
+ fetch(artifactURL, { method: 'GET' })
+ .then(res => res.json())
+ .then(res => {
+ const artifacts = res.fileArtifacts.filter(artifact =>
+ artifact.filename.endsWith('.js')
+ );
+
+ const numberOfFiles = artifacts.count;
+
+ for (let i in artifacts) {
+ const name = artifacts[i].filename;
+
+ if (
+ this.fileList.find(i => {
+ return i.key === name;
+ }) === undefined
+ ) {
+ const fileURL = `http://localhost:8080/api/tickets/${this.props.ticketID}/artifacts/${name}`;
+
+ fetch(fileURL, {
+ method: 'GET',
+ responseType: 'text',
+ })
+ .then(res => res.text())
+ .then(res => {
+ this.fileList.push({
+ key: name,
+ text: {name},
+ value: beautify(res),
+ });
+
+ if (this.fileList.count === numberOfFiles) {
+ this.setState({ ready: true });
+ }
+ });
+ }
+ }
+ });
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ componentDidMount() {
+ this.fetchArtifacts();
+ }
+
+ handleOnChange = (e, data) => {
+ this.props.onFileSelectionChange(e, data);
+ };
+
+ render() {
+ return (
+ <>
+
+
+
+ );
+ }
+}
diff --git a/src/views/tickets/Screenshot.js b/src/views/tickets/Screenshot.js
index 00de6f6..03f8853 100644
--- a/src/views/tickets/Screenshot.js
+++ b/src/views/tickets/Screenshot.js
@@ -1,31 +1,20 @@
import React, { Component } from 'react';
-import { Header, Image, Segment } from 'semantic-ui-react';
+import { Image, Segment } from 'semantic-ui-react';
export default class Screenshot extends Component {
render() {
- const { ticketID, processed } = this.props.ticketInfo;
return (
-
-
-
- {' '}
- Screenshot for ticket #{ticketID}{' '}
-
- {processed && (
-
- )}
- {!processed && (
-
- {' '}
- This ticket has not been processed. Please wait.{' '}
-
- )}
-
-
+
+
+
);
}
}
diff --git a/src/views/tickets/Ticket.js b/src/views/tickets/Ticket.js
index 9b35015..ef555ee 100644
--- a/src/views/tickets/Ticket.js
+++ b/src/views/tickets/Ticket.js
@@ -1,5 +1,8 @@
import React, { Component } from 'react';
+import { Loader, Placeholder, Segment } from 'semantic-ui-react';
+
import Screenshot from './Screenshot';
+import JSViewer from './JSViewer';
const REFRESH_EVERY_MS = 1000;
@@ -12,14 +15,19 @@ export default class Ticket extends Component {
ticketID: props.match.params.ticketID,
processed: false,
},
- refreshInterval: setInterval(this.refreshTicketState, REFRESH_EVERY_MS),
+ currentCode: '',
};
+ this.refreshInterval = setInterval(
+ this.refreshTicketState,
+ REFRESH_EVERY_MS
+ );
+
this.refreshTicketState();
}
stopAutomaticRefreshing() {
- clearInterval(this.state.refreshInterval);
+ clearInterval(this.refreshInterval);
}
componentWillUnmount() {
@@ -51,11 +59,46 @@ export default class Ticket extends Component {
}
};
+ onFileSelectionChange = (e, data) => {
+ this.setState({ currentCode: data.value });
+ };
+
render() {
const { ticketInfo } = this.state;
return (
<>
-
+ {!this.state.ticketInfo.processed && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+