Add simulated mitigations functionality

src/AppContainer.jsx

@@ -16,6 +16,7 @@ import RawQuery from './components/RawQuery';
 import MenuContainer from './components/Menu/MenuContainer';
 import ExportContainer from './components/Float/ExportContainer';
 import Settings from './components/Float/Settings';
+import Mitigations from './components/Float/Mitigations'
 import ZoomContainer from './components/Zoom/ZoomContainer';
 import QueryNodeSelect from './components/Float/QueryNodeSelect';
 import SessionClearModal from './components/Modals/SessionClearModal';
@@ -148,6 +149,7 @@ export default class AppContainer extends Component {
                             <WarmupModal />
                             <RawQuery />
                             <MenuContainer />
+                            <Mitigations />
                             <Settings />
                             <ZoomContainer />
                             <QueryNodeSelect />

src/components/Float/Mitigations.jsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useState, useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import {
+    Panel,
+    Button,
+    FormControl,
+    ControlLabel,
+    FormGroup,
+    Form,
+    Col,
+    Checkbox,
+} from 'react-bootstrap';
+import styles from './Settings.module.css';
+import Draggable from 'react-draggable';
+import clsx from 'clsx';
+import { AppContext } from '../../AppContext';
+import PoseContainer from '../PoseContainer';
+
+const Mitigations = () => {
+    const [nodeCollapse, setNodeCollapse] = useState(appStore.performance.edge);
+    const [open, setOpen] = useState(false);
+    const context = useContext(AppContext);
+
+    const radios = useRef(null);
+
+    const intialMitiagtions = () => {
+        if (conf.get('mitigations')){
+            let initial = [];
+            for (let i = 1; i <= conf.get('mitigations'); i++){
+                initial.push({id: i, selected: false});
+            }
+            return initial;
+        } else {
+            return [{id: 1, selected: false}];
+        }
+
+    }
+
+    const [mitigations, setMitigations] = useState(intialMitiagtions());
+    const addMitigation = () => {
+        if (conf.get('mitigations')){
+            conf.set('mitigations',conf.get('mitigations') + 1);
+        } else {
+            conf.set('mitigations', 1)
+        }
+        setMitigations(mitigations => mitigations.concat({
+            id : mitigations.length + 1,
+            selected: false
+        }))
+    };
+
+
+    const [currentMitigation, setCurrentMitigation] = useState(null);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        emitter.on('openMitigations', handleOpen);
+        return () => {
+            emitter.removeListener('openMitigations', handleOpen);
+        };
+    }, []);
+
+    const mitigationClicked = (mitigationNumber) => {
+        if (currentMitigation) {
+            mitigations[currentMitigation - 1].selected = false;
+        }
+        mitigations[mitigationNumber - 1].selected = true;
+        setCurrentMitigation(mitigationNumber);
+        emitter.emit('changeCurrentMitigation', "mit" + mitigationNumber);
+    }
+
+    const deselectMitigation = () => {
+        if (currentMitigation){
+            mitigations[currentMitigation - 1].selected = false;
+            setCurrentMitigation(null)
+        }
+        emitter.emit('changeCurrentMitigation', null);
+    }
+
+    return (
+        <Draggable handle={'.panel-heading'}>
+            <PoseContainer
+                visible={open}
+                className={clsx(
+                    styles.container,
+                    context.darkMode ? styles.dark : null
+                )}
+            >
+            <Panel>
+                    <Panel.Heading>
+                        Mitigations
+                        <Button
+                            onClick={handleClose}
+                            className='close'
+                            aria-label='close'
+                        >
+                            <span aria-hidden='true'>&times;</span>
+                        </Button>
+                    </Panel.Heading>
+                    <Panel.Body>
+                    <div >{mitigations.map(mit => (
+                        <span key={mit.id}><MitigationComponent click={mitigationClicked} key={mit.id} mitigationNumber={mit.id} selected={mit.selected} /> <br /></span>
+                    ))}</div><br />
+                    <button
+                       type='button'
+                       size="lg"
+                       className={clsx(styles.button, context.darkMode ? styles.dark : null)}
+                       onClick={ () => addMitigation()}
+                       aria-label='Add Mitigation'
+                       >
+                       Add mitigation
+                    </button>&nbsp; 
+                    <button
+                        type='button'
+                        className='deselectMitigation'
+                        size="lg"
+                        onClick={ () => deselectMitigation()}
+                        aria-label='Deselect Mitigation'
+                        >
+                        Deselect mitigation
+                    </button> 
+                    </Panel.Body>
+            </Panel>
+            </PoseContainer>
+        </Draggable>
+    )
+}
+
+Mitigations.propTypes = {};
+export default Mitigations;
+
+const MitigationComponent = ({click, mitigationNumber, selected}) => { 
+    return (
+        <label><input 
+                type="radio" 
+                value={"mit" + mitigationNumber} 
+                key={"mit" + mitigationNumber}
+                checked={selected}
+                onChange={() => {click(mitigationNumber)}}/>
+        &nbsp;Mitigation {mitigationNumber} </label>
+    );
+}

src/components/Float/Settings.module.css

@@ -41,6 +41,14 @@
     color: white;
 }
 
+.dark button {
+    background-color: black;
+}
+
+.dark button:hover {
+    background-color: #333;
+}
+
 .dark :global select {
     background-color: black;
     color: white;

src/components/Graph.jsx

@@ -25,6 +25,7 @@ class GraphContainer extends Component {
 
         this.state = {
             sigmaInstance: null,
+            currentMitigation: null,
             design: null,
             dragged: false,
             firstDraw: true,
@@ -108,6 +109,8 @@ class GraphContainer extends Component {
         emitter.on('toggleDarkMode', this.toggleDarkMode.bind(this));
         emitter.on('closeTooltip', this.hideTooltip.bind(this));
         emitter.on('confirmGraphDraw', this.sendToChild.bind(this));
+        emitter.on('addEdgeMitigation', this.addEdgeMitigation.bind(this));
+        emitter.on('changeCurrentMitigation', (value) => {this.state.currentMitigation = value});
     }
 
     componentDidMount() {
@@ -341,6 +344,43 @@ class GraphContainer extends Component {
         });
     }
 
+    addEdgeMitigation(id) {
+        if(!this.state.currentMitigation){
+            this.props.alert.error('No current mitigation set.');
+            closeTooltip();
+            return;
+        }
+        let instance = this.state.sigmaInstance;
+        let edge = instance.graph.edges(id);
+        let sourcenode = instance.graph.nodes(edge.source);
+        let targetnode = instance.graph.nodes(edge.target);
+
+        let sourcekey = sourcenode.type === 'OU' ? 'guid' : 'name';
+        let targetkey = targetnode.type === 'OU' ? 'guid' : 'name';
+
+
+        let statement = 'MATCH (n:{} {{}:\"{}\"}) MATCH (m:{} {{}:\"{}\"}) MATCH (n)-[r:{}]->(m) SET r.{}="true"'.format(
+            sourcenode.type,
+            sourcekey,
+            sourcenode.label,
+            targetnode.type,
+            targetkey,
+            targetnode.label,
+            edge.label,
+            this.state.currentMitigation
+        );
+
+        instance.refresh();
+
+        let q = driver.session();
+        q.run(statement, {}).then(x => {
+            q.close();
+        });
+
+        this.props.alert.success('Deleted edge in mitigation ' + this.state.currentMitigation.charAt(3));
+        closeTooltip();
+    }
+
     reload() {
         closeTooltip();
         this.doQueryNative(this.state.currentQuery);
@@ -733,14 +773,26 @@ class GraphContainer extends Component {
         let finaledges = edgearr.join('|');
         let statement = params.statement.format(finaledges);
 
+        if (this.state.currentMitigation) {
+            params.props['mitigation'] = this.state.currentMitigation;
+        }
+
         if (appStore.performance.debug) {
             let temp = statement;
             $.each(Object.keys(params.props), function (_, key) {
-                let propKey = `$${key}`;
+                let propKey;
+
+                if (key === "mitigation") {
+                    propKey = `$mitigation`;
+                } else {
+                    propKey = `$${key}`;
+                }
                 let replace = escapeRegExp(propKey);
                 let regexp = new RegExp(replace, 'g');
                 let props = `"${params.props[key]}"`;
 
+
+
                 temp = temp.replace(regexp, props);
             });
             emitter.emit('setRawQuery', temp);

src/components/Menu/MenuContainer.jsx

@@ -108,6 +108,11 @@ class MenuContainer extends Component {
         emitter.emit('openSettings');
     }
 
+
+    _mitigationsClick() {
+        emitter.emit('openMitigations');
+    }
+
     _cancelUploadClick() {
         emitter.emit('showCancelUpload');
     }
@@ -178,6 +183,7 @@ class MenuContainer extends Component {
         s.close();
     }
 
+
     async unzipNecessary(files) {
         var index = 0;
         var processed = [];
@@ -461,6 +467,13 @@ class MenuContainer extends Component {
                         glyphicon='fa fa-cogs'
                     />
                 </div>
+                <div>
+                    <MenuButton
+                        click={this._mitigationsClick.bind(this)}
+                        hoverVal='Mitigations'
+                        glyphicon='fas fa-tasks'
+                    />
+                </div>
                 <div>
                     <MenuButton
                         click={this._aboutClick.bind(this)}

src/components/SearchContainer/SearchContainer.jsx

@@ -22,13 +22,15 @@ const SearchContainer = () => {
 
     const [filterVisible, setFilterVisible] = useState(false);
     const [darkMode, setDarkMode] = useState(false);
+    const [currentMitigation, setCurrentMitigation] = useState(null);
 
     const pathfinding = useRef(null);
     const tabs = useRef(null);
 
     const mainSearchRef = useRef(null);
     const pathSearchRef = useRef(null);
 
+
     useEffect(() => {
         jQuery(pathfinding.current).slideToggle(0);
         jQuery(tabs.current).slideToggle(0);
@@ -37,6 +39,8 @@ const SearchContainer = () => {
         emitter.on('nodeClicked', openNodeTab);
         emitter.on('toggleDarkMode', toggleDarkMode);
 
+        emitter.on('changeCurrentMitigation', (value) => {setCurrentMitigation(value)})
+
         emitter.on('setStart', node => {
             let temp = {
                 name: node.label,
@@ -126,7 +130,8 @@ const SearchContainer = () => {
 
         let [query, props, startTarget, endTarget] = buildSelectQuery(
             mainSearchSelected,
-            pathSearchSelected
+            pathSearchSelected,
+            currentMitigation
         );
 
         mainSearchRef.current.getInstance().blur();