ui: Show warning message when master checkbox selected with unsafe

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

@@ -3,7 +3,7 @@ import {Button, Card} from 'react-bootstrap';
 
 import {cloneDeep} from 'lodash';
 
-import {getDefaultPaneParams, InfoPane} from './InfoPane';
+import {getDefaultPaneParams, InfoPane, WarningType} from './InfoPane';
 import {MasterCheckbox, MasterCheckboxState} from './MasterCheckbox';
 import ChildCheckboxContainer from './ChildCheckbox';
 import {getFullDefinitionByKey} from './JsonSchemaHelpers';
@@ -41,7 +41,11 @@ class AdvancedMultiSelect extends React.Component {
     this.state = {
       masterCheckboxState: this.getMasterCheckboxState(props.value),
       hideReset: this.getHideResetState(props.value),
-      infoPaneParams: getDefaultPaneParams(this.infoPaneRefString, this.registry)
+      infoPaneParams: getDefaultPaneParams(
+        this.infoPaneRefString,
+        this.registry,
+        this.unsafeOptionsSelected(this.props.value)
+      )
     };
   }
 
@@ -55,6 +59,7 @@ class AdvancedMultiSelect extends React.Component {
     this.props.onChange(newValues);
     this.setMasterCheckboxState(newValues);
     this.setHideResetState(newValues);
+    this.setPaneInfoToDefault(this.unsafeOptionsSelected(newValues));
   }
 
   onChildCheckboxClick = (value) => {
@@ -98,7 +103,7 @@ class AdvancedMultiSelect extends React.Component {
     this.props.onChange(this.defaultValues);
     this.setHideResetState(this.defaultValues);
     this.setMasterCheckboxState(this.defaultValues);
-    this.setPaneInfoToDefault();
+    this.setPaneInfoToDefault(this.unsafeOptionsSelected(this.defaultValues));
   }
 
   setHideResetState(selectValues) {
@@ -108,7 +113,15 @@ class AdvancedMultiSelect extends React.Component {
   }
 
   getHideResetState(selectValues) {
-    return selectValues.every((value) => this.isSafe(value));
+    return !(this.unsafeOptionsSelected(selectValues))
+  }
+
+  unsafeOptionsSelected(selectValues) {
+    return !(selectValues.every((value) => this.isSafe(value)));
+  }
+
+  isSafe = (itemKey) => {
+    return getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey).safe;
   }
 
   setPaneInfo = (itemKey) =>  {
@@ -119,22 +132,22 @@ class AdvancedMultiSelect extends React.Component {
           title: definitionObj.title,
           content: definitionObj.info,
           link: definitionObj.link,
-          showWarning: !(this.isSafe(itemKey))
+          warningType: !(this.isSafe(itemKey)) ? WarningType.SINGLE : WarningType.NONE
         }
       }
     );
   }
 
-  setPaneInfoToDefault() {
+  setPaneInfoToDefault(unsafeOptionsSelected) {
     this.setState(() => ({
-      infoPaneParams: getDefaultPaneParams(this.props.schema.items.$ref, this.props.registry)
+      infoPaneParams: getDefaultPaneParams(
+        this.props.schema.items.$ref,
+        this.props.registry,
+        unsafeOptionsSelected
+      )
     }));
   }
 
-  isSafe = (itemKey) => {
-    return getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey).safe;
-  }
-
   render() {
     const {
       schema,
@@ -161,7 +174,7 @@ class AdvancedMultiSelect extends React.Component {
         <InfoPane title={this.state.infoPaneParams.title}
           body={this.state.infoPaneParams.content}
           link={this.state.infoPaneParams.link}
-          showWarning={this.state.infoPaneParams.showWarning}/>
+          warningType={this.state.infoPaneParams.warningType}/>
       </div>
     );
   }

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

@@ -6,13 +6,19 @@ import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 import {getObjectFromRegistryByRef} from './JsonSchemaHelpers';
 import WarningIcon from './WarningIcon';
 
-function getDefaultPaneParams(refString, registry) {
+const WarningType = {
+  NONE: 0,
+  SINGLE: 1,
+  MULTIPLE: 2
+}
+
+function getDefaultPaneParams(refString, registry, unsafeOptionsSelected) {
   let configSection = getObjectFromRegistryByRef(refString, registry);
   return (
     {
       title: configSection.title,
       content: configSection.description,
-      showWarning: false
+      warningType: unsafeOptionsSelected ? WarningType.Multiple : WarningType.NONE
     });
 }
 
@@ -56,8 +62,8 @@ function getSubtitle(props) {
 function getBody(props) {
   let body = [<span key={'body'}>{props.body}</span>];
 
-  if (props.showWarning) {
+  if (props.warningType != WarningType.NONE) {
-    body.push(getWarning());
+    body.push(getWarning(props.warningType));
   }
 
   return (
@@ -67,14 +73,25 @@ function getBody(props) {
   )
 }
 
-function getWarning() {
+function getWarning(warningType) {
-  return (
+  if (warningType == WarningType.SINGLE) {
-    <div className={'info-pane-warning'} key={'warning'}>
+    return (
-      <WarningIcon/>This option may cause a system to become unstable or
+      <div className={'info-pane-warning'} key={'warning'}>
-      change the system's state in undesirable ways. Therefore, this option
+        <WarningIcon/>This option may cause a system to become unstable or may
-      is not recommended for use in production or other sensitive environments.
+        change a system's state in undesirable ways. Therefore, this option
-    </div>
+        is not recommended for use in production or other sensitive environments.
-  );
+      </div>
+    );
+  } else {
+    return (
+      <div className={'info-pane-warning'} key={'warning'}>
+        <WarningIcon/>Some options have been selected that may cause a system
+        to become unstable or may change a system's state in undesirable ways.
+        Running Infection Monkey in a production or other sensitive environment
+        with this configuration is not recommended.
+      </div>
+    );
+  }
 }
 
-export {getDefaultPaneParams, InfoPane}
+export {getDefaultPaneParams, InfoPane, WarningType}