1 files changed, 79 insertions, 0 deletions
diff --git a/graphgraph-fe/src/graph_hops.js b/graphgraph-fe/src/graph_hops.js
new file mode 100644
index 0000000..da98db2
--- /dev/null
+++ b/graphgraph-fe/src/graph_hops.js
@@ -0,0 +1,79 @@
+/*
+ *  ============LICENSE_START=======================================================
+ * org.onap.aai
+ *  ================================================================================
+ *  Copyright © 2019-2020 Orange Intellectual Property. All rights reserved.
+ *  ================================================================================
+ *  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.
+ * ============LICENSE_END=========================================================
+ */
+
+import React from 'react';
+import { Label } from 'react-bootstrap';
+import NumericInput from 'react-numeric-input';
+import './graph_hops.css';
+
+var createNumInput = function (label, callback, current) {
+    return (
+            <div>
+            <Label>{label}</Label>
+            <NumericInput onChange={callback} min={1} max={500} value={current} className="hops-input-field"/>
+            </div>
+    );
+};
+
+class GraphHops extends React.Component {
+    constructor (props) {
+        super(props);
+
+        this.state = { value: this.props.defaultValue };
+        let p = props.parentHops;
+        let c = props.cousinHops;
+        let ch = props.childHops;
+
+        this.onChangeParent = (e) => this._onChangeParent(e);
+        this.onChangeCousin = (e) => this._onChangeCousin(e);
+        this.onChangeChild = (e) => this._onChangeChild(e);
+        this.onChange = (hopsName, num) => this._onChange(hopsName, num);
+        this.state = { parentHops: p, childHops: ch, cousinHops: c };
+    }
+
+    _onChange (hopsName, num) {
+        var s = this.state;
+        s[hopsName] = num;
+        this.setState(s);
+        this.props.updateHops(this.state.parentHops, this.state.cousinHops, this.state.childHops);
+    }
+
+    _onChangeParent (e) {
+        this.onChange('parentHops', e);
+    }
+
+    _onChangeCousin (e) {
+        this.onChange('cousinHops', e);
+    }
+
+    _onChangeChild (e) {
+        this.onChange('childHops', e);
+    }
+
+    render () {
+        if (this.props.edgeFilter === 'Edgerules') {
+            return <div className="hops-input">{createNumInput('edgerule hops', this.onChangeCousin, this.state.cousinHops)}</div>;
+        }
+
+        return <div className="hops-input">{createNumInput('parent hops', this.onChangeParent, this.state.parentHops)} {createNumInput('child hops', this.onChangeChild, this.state.childHops)}</div>;
+    }
+}
+
+export default GraphHops;