diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js index 90d8cf818..955aec509 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js +++ b/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 { + link={this.state.infoPaneParams.link} + showWarning={this.state.infoPaneParams.showWarning}/> ); } diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js b/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js index 6e50ca66d..f0545a5c6 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js +++ b/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 = [{props.body}]; + + if (props.showWarning) { + body.push(getWarning()); + } + return ( - {props.body} + {body} ) } +function getWarning() { + return ( +
+ 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. +
+ ); +} + export {getDefaultPaneParams, InfoPane} diff --git a/monkey/monkey_island/cc/ui/src/styles/components/InfoPane.scss b/monkey/monkey_island/cc/ui/src/styles/components/InfoPane.scss index 8c61d873f..a177ed7e1 100644 --- a/monkey/monkey_island/cc/ui/src/styles/components/InfoPane.scss +++ b/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; +}