architecture-viewer 0.0.1-security → 4.4.4

package/New Folder/architecture-viewer/src/assets/test_data.json

@@ -0,0 +1,32 @@
+{
+    "Service A": {
+        "type": "service",
+        "outbound": [
+            {
+                "name": "step 1",
+                "process": "init",
+                "endpoint": "Service B",
+                "step": 1,
+                "certainty_level": 2,
+                "alternate": false
+            }
+        ]
+    },
+    "Service B": {
+        "type": "service",
+        "outbound": [
+            {
+                "name": "step 2",
+                "process": "init",
+                "endpoint": "Service C",
+                "step": 2,
+                "certainty_level": 2,
+                "alternate": false
+            }
+        ]
+    },
+    "Service C": {
+        "type": "service",  
+        "outbound": []
+    }
+}

package/New Folder/architecture-viewer/src/components/app.js

@@ -0,0 +1,231 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { h, Component } from 'preact';
+import { Router } from 'preact-router';
+
+// import Header from './header';
+// import Home from '../routes/home';
+// import Profile from '../routes/profile';
+
+import DiagramArea from './diagramArea';
+import InfoArea from './infoArea'
+
+import { parseContents } from './../utils/parser';
+
+// import Home from 'async!./home';
+// import Profile from 'async!./profile';
+
+
+
+export default class App extends Component {
+	// /** Gets fired when the route changes.
+	//  *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
+	//  *	@param {string} event.url	The newly routed URL
+	//  */
+	// handleRoute = e => {
+	// 	this.currentUrl = e.url;
+	// };
+
+	constructor(props) {
+		super(props);
+		this.fillProps = this.fillProps.bind(this);
+		this.updateStep = this.updateStep.bind(this);
+		this.updateData = this.updateData.bind(this);
+		this.updateSelectedNode = this.updateSelectedNode.bind(this);
+		this.state = {
+			graphData: null,
+			stepData: null,
+			zoneData: null,
+			curStep: 0,
+			validJson: true,
+			selectedNode: null
+		};
+	}
+
+	componentDidMount() {
+		this.fillProps();
+	}
+
+	/*
+		sets selectedNode to null to clear out the greying out of
+		unrelated steps
+	*/
+	updateStep(step_num) {
+		this.setState(Object.assign(this.state, {
+			curStep: step_num,
+			selectedNode: null
+		}))
+	}
+
+	updateSelectedNode(id) {
+		this.setState(Object.assign(this.state, {
+			selectedNode: id
+		}))
+	}
+
+	updateData(data) {
+		this.setState(Object.assign(this.state, {
+			flowTitle: data.title,
+			graphData: data.graphData,
+			stepData: data.stepData,
+			zoneData: data.zoneData,
+			curStep: 0,
+			selectedNode: null
+		}));
+	}
+
+	getData() {
+		const queryParams = new URLSearchParams(window.location.search);
+		if (queryParams == undefined || queryParams == null || queryParams == "") {
+			return fetch('assets/data.json')
+				.then(res => res.json())
+				.then(json => ({
+					filename: "Wallet-Push Notifications-Subscription/Enrollment",
+					data: json
+				}))
+				.catch(err => {
+					alert(err);
+				});
+		} else {
+			const url = queryParams.get('url');
+			if (url == null) {
+				return fetch('assets/data.json')
+					.then(res => res.json())
+					.then(json => ({
+						filename: "Wallet-Push Notifications-Subscription/Enrollment",
+						data: json
+					}))
+					.catch(err => {
+						alert(err);
+					});
+			} else {
+				let filename = url.substring(url.lastIndexOf('/') + 1);
+				let ext = filename.substr(filename.lastIndexOf('.') + 1);
+				if (ext == "adoc") {
+					return fetch(url)
+						.then((res) => {
+							if (res.ok) {
+								return res.text()
+							} else {
+								throw {
+									errtype: "custom",
+									errmsg: "There seems to be an error with the page. Click 'OK' to open the page in a new tab and confirm it is a valid URL"
+								}
+							}
+						})
+						.then(text => ({
+							filename: filename,
+							data: parseContents(text.split("\n"))
+						}))
+						.catch(err => {
+							console.log(((typeof err) === "object"));
+							console.log(err.errtype === "custom");
+							if (((typeof err) === "object") && err.errtype === "custom") {
+								if (confirm(err.errmsg)) {
+									window.open(url);
+								}
+							} else {
+								alert(err);
+							}
+						});
+				} else if (ext == "json") {
+					return fetch(url)
+						.then(res => res.json())
+						.then(json => ({
+							filename: filename,
+							data: json
+						}))
+						.catch(err => {
+							alert(err);
+						});
+				} else {
+					return fetch('assets/data.json')
+						.then(res => res.json())
+						.then(json => ({
+							filename: "zones example",
+							data: json
+						}))
+						.catch(err => {
+							alert(err);
+						});
+				}
+
+			}
+		}
+	}
+
+	fillProps() {
+
+		let that = this;
+
+		this.getData()
+			.then((result) => {
+
+				// console.log(result);
+				const data = result.data;
+				// console.log(data);
+				data.title = data.title == undefined || data.title == "" ? result.filename : data.title;
+
+				that.setState(
+					Object.assign(this.state, {
+						graphData: data.graphData,
+						stepData: data.stepData,
+						// zoneData: data.zoneData,
+						flowTitle: data.title
+					})
+				);
+			})
+
+	}
+
+	render() {
+
+		let repoUrl = window.location.href.replace("pages/", "");
+
+		if (this.state.graphData && this.state.stepData) {
+			return (
+				<div id="container">
+					<div id="app">
+						<DiagramArea graphData={this.state.graphData}
+							stepData={this.state.stepData}
+							curStep={this.state.curStep}
+							updateSelectedNode={this.updateSelectedNode}
+							zoneData={this.state.zoneData}></DiagramArea>
+						<InfoArea title={this.state.title}
+							graphData={this.state.graphData}
+							stepData={this.state.stepData}
+							curStep={this.state.curStep}
+							selectedNode={this.state.selectedNode}
+							updateStep={this.updateStep}
+							updateData={this.updateData}
+							flowTitle={this.state.flowTitle}></InfoArea><br />
+					</div>
+					<div id="footer"> <a href={repoUrl}>{repoUrl}</a> </div>
+				</div>
+			);
+		} else {
+			return <div> Loading... </div>
+		}
+	}
+}
+
+/*<Header />
+				<Router onChange={this.handleRoute}>
+					<Home path="/" />
+					<Profile path="/profile/" user="me" />
+					<Profile path="/profile/:user" />
+				</Router>*/

package/New Folder/architecture-viewer/src/components/controls.js

@@ -0,0 +1,195 @@
+/*
+ * Copyright 2017 Capital One Services, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { h, Component } from 'preact';
+import validate from '../utils/dataValidator.js';
+import { parseContents } from '../utils/parser.js';
+
+export default class Controls extends Component {
+
+    constructor(props) {
+        super(props);
+        this.decrementStep = this.decrementStep.bind(this);
+        this.incrementStep = this.incrementStep.bind(this);
+        this.firstStep = this.firstStep.bind(this);
+        this.lastStep = this.lastStep.bind(this);
+        this.handleKeyboardShortcuts = this.handleKeyboardShortcuts.bind(this);
+        this.updateData = this.updateData.bind(this);
+    }
+
+    componentWillMount() {
+        document.addEventListener("keydown", this.handleKeyboardShortcuts);
+    }
+
+    decrementStep() {
+        const step = parseInt(this.props.curStep);
+        if (step > 0) {
+            this.props.updateStep(step - 1);
+        }
+    }
+
+    incrementStep() {
+        const step = parseInt(this.props.curStep);
+        if (step < this.props.stepNum - 1) {
+            this.props.updateStep(step + 1);
+        }
+    }
+
+    firstStep() {
+        let step = 0;
+        this.props.updateStep(step);
+    }
+
+    lastStep() {
+        let step = this.props.stepNum - 1;
+        this.props.updateStep(step);
+    }
+
+    handleKeyboardShortcuts(event) {
+		switch (event.keyCode) {
+			case 37:
+				//left arrow key
+				this.decrementStep();
+                break;
+            case 38:
+                //up arrow key
+                this.decrementStep();
+                break;
+			case 39:
+				//right arrow key
+				this.incrementStep();
+                break;
+            case 40:
+                //down arrow key
+                this.incrementStep();
+                break;
+		}
+	}
+
+    updateData(evt) {
+        const file = evt.target.files[0];
+
+        const fileName = file.name.slice(0, -5);
+
+        // Clear out the file input.  This is necessary to force a refresh of 
+        // the file any time you select a file.  
+        //
+        // If you don't do this, then selecting a file with the same name will 
+        // cache the first version, and not load the newest version.
+        evt.target.value = '';
+
+        var reader = new FileReader();
+
+        reader.onload = (e) => {
+            //would update the data here
+            let empty_json = {
+                title: '',
+                graphData: {
+                    nodes: [],
+                    edges: []
+                },
+                stepData: [],
+                zoneData: []
+            };
+
+            let json = {};
+            try {
+
+                let ext = file.name.substr(file.name.lastIndexOf('.') + 1);
+                let validFileType = true;
+
+                //TODO: REUSABLE FROM APP.JS
+                if (ext == "json") {
+                    json = JSON.parse(reader.result);
+                } else if (ext == "adoc") {
+                    json = parseContents(reader.result.split("\n"));
+                } else {
+                    validFileType = false;
+                }
+                
+                json.title = json.title == "" ? fileName : json.title;
+                //this is where a parser would come in and check if the structure is correct
+                //the checker is very rough at this point
+                const validatorResult = validate(json);
+                console.log("valid?: ", validatorResult.valid);
+
+                var error = false;
+
+                if (!validFileType) {
+                    json = empty_json;
+                    console.log("invalid file type!");
+                }
+                else if (!validatorResult.valid) {
+                    json = empty_json;
+                    //TODO: RESERVE A SPOT ON THE SCREEN FOR ERRORS, put it in the TOC area
+                    console.log(validatorResult.errors);
+                }
+
+            } catch (e) {
+                console.error(e);
+                console.error('json could not be parsed!');
+                json = empty_json;
+            }
+            // console.log(json);
+            this.props.updateData(json);
+        }
+
+        reader.readAsText(file);
+    }
+
+    render() {
+
+        let controlsStyle = {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-around'
+        }
+
+        let stepElems;
+
+        //fix to be 1-started
+        const pNum = 1;
+
+        if (this.props.stepNum == 0) {
+            stepElems = null;
+        } else {
+            let iframeCheck;
+            if (window.self != window.top) {
+                iframeCheck = "iframe-button-style";
+            } else {
+                iframeCheck = "";
+            }
+            stepElems = <div id="move-steps">
+                    <button onClick={this.firstStep} className={iframeCheck}>{"<<"}</button>
+                    <button onClick={this.decrementStep} className={iframeCheck}>{"<"}</button>
+                    <span className="cur-step"> Step: {parseInt(this.props.curStep) + 1} </span>
+                    <button onClick={this.incrementStep} className={iframeCheck}>{">"}</button>
+                    <button onClick={this.lastStep} className={iframeCheck}>{">>"}</button>
+                </div>;
+        }
+
+        return (
+            <div id="controls" style={controlsStyle} className="sub-container-border">
+                { stepElems }
+                <div id="upload-plantuml">
+                    open a PlantUML file: &nbsp; <br/>
+                    <input type="file" onChange={this.updateData}/>
+                </div>
+            </div>
+        )
+    }
+}