ui: add warning message to PBA/Exploiters InfoPane

monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js

@@ -113,7 +113,16 @@ class AdvancedMultiSelect extends React.Component {
 
   setPaneInfo = (itemKey) =>  {
     let definitionObj = getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey);
-    this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
+    this.setState(
+      {
+        infoPaneParams: {
+          title: definitionObj.title,
+          content: definitionObj.info,
+          link: definitionObj.link,
+          showWarning: !(this.isSafe(itemKey))
+        }
+      }
+    );
   }
 
   setPaneInfoToDefault() {
@@ -151,7 +160,8 @@ class AdvancedMultiSelect extends React.Component {
 
         <InfoPane title={this.state.infoPaneParams.title}
           body={this.state.infoPaneParams.content}
-          link={this.state.infoPaneParams.link}/>
+          link={this.state.infoPaneParams.link}
+          showWarning={this.state.infoPaneParams.showWarning}/>
       </div>
     );
   }

monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js

@@ -4,10 +4,16 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 
 import {getObjectFromRegistryByRef} from './JsonSchemaHelpers';
+import WarningIcon from './WarningIcon';
 
 function getDefaultPaneParams(refString, registry) {
   let configSection = getObjectFromRegistryByRef(refString, registry);
-  return ({title: configSection.title, content: configSection.description});
+  return (
+    {
+      title: configSection.title,
+      content: configSection.description,
+      showWarning: false
+    });
 }
 
 function InfoPane(props) {
@@ -48,11 +54,27 @@ function getSubtitle(props) {
 }
 
 function getBody(props) {
+  let body = [<span key={'body'}>{props.body}</span>];
+
+  if (props.showWarning) {
+    body.push(getWarning());
+  }
+
   return (
     <Card.Body className={'pane-body'}>
-      {props.body}
+      {body}
     </Card.Body>
   )
 }
 
+function getWarning() {
+  return (
+    <div className={'info-pane-warning'} key={'warning'}>
+      <WarningIcon/>This option may cause a system to become unstable or
+      change the system's state in undesirable ways. Therefore, this option
+      is not recommended for use in production or other sensitive environments.
+    </div>
+  );
+}
+
 export {getDefaultPaneParams, InfoPane}

monkey/monkey_island/cc/ui/src/styles/components/InfoPane.scss

@@ -27,3 +27,10 @@
   margin: 10px 15px;
   padding: 0;
 }
+
+.info-pane-warning {
+    margin-top: 1em;
+}
+.info-pane-warning .unsafe-indicator {
+    margin-left: 0em;
+}