2698 plugin selector UI schema

monkey/monkey_island/cc/ui/src/components/configuration-components/PluginSelectorTemplate.tsx

@@ -0,0 +1,48 @@
+import {ObjectFieldTemplateProps} from '@rjsf/utils';
+import React, {useState} from 'react';
+import {Dropdown} from 'react-bootstrap';
+
+const PluginSelector = (props) => {
+  let selectOptions = [];
+  for (const [name, plugin] of Object.entries(props.plugins)) {
+    selectOptions.push(
+      <Dropdown.Item onClick={() => props.onClick(name)}
+                     eventKey={`plugin['title']`}>
+                     {plugin['title']}</Dropdown.Item>
+  )}
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="success" id="dropdown-basic">
+        Select a plugin
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {selectOptions}
+      </Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+
+export default function PluginSelectorTemplate(props: ObjectFieldTemplateProps) {
+
+  function getPluginDisplay(plugin, allPlugins){
+    let selectedPlugin = allPlugins.filter((pluginInArray) => pluginInArray.name == plugin)
+    if(selectedPlugin.length === 1){
+      return <div className="property-wrapper">{selectedPlugin[0].content}</div>
+    }
+  }
+
+  let [element, setElement] = useState(null);
+  return (
+    <div>
+      {props.title}
+      {props.description}
+      <PluginSelector plugins={{"TODO": {"title": "pass in actual schema"}}}
+                      onClick={(pluginName) => {
+        setElement(pluginName)
+      }}/>
+      {getPluginDisplay(element, props.properties)}
+    </div>
+  );
+}

monkey/monkey_island/cc/ui/src/components/configuration-components/UiSchema.js

@@ -3,14 +3,15 @@ import InfoBox from './InfoBox';
 import TextBox from './TextBox.js';
 import WarningBox from './WarningBox';
 import SensitiveTextInput from '../ui-components/SensitiveTextInput';
+import PluginSelectorTemplate from './PluginSelectorTemplate';
 
 export default function UiSchema(props) {
   const UiSchema = {
     propagation: {
       exploitation: {
         exploiters: {
           classNames: 'config-template-no-header',
-          'ui:widget': AdvancedMultiSelect
+          'ui:ObjectFieldTemplate': PluginSelectorTemplate
         },
         options: {
           http_ports: {

monkey/monkey_island/cc/ui/src/components/pages/ConfigurePage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Form from '@rjsf/bootstrap-4';
 import {Col, Nav} from 'react-bootstrap';
+import _ from 'lodash';
 import AuthComponent from '../AuthComponent';
 import UiSchema from '../configuration-components/UiSchema';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
@@ -26,6 +27,7 @@ import {
 import validator from '@rjsf/validator-ajv8';
 
 const CONFIG_URL = '/api/agent-configuration';
+const SCHEMA_URL = '/api/agent-configuration-schema';
 const RESET_URL = '/api/reset-agent-configuration';
 const CONFIGURED_PROPAGATION_CREDENTIALS_URL = '/api/propagation-credentials/configured-credentials';
 
@@ -46,7 +48,7 @@ class ConfigurePageComponent extends AuthComponent {
       currentFormData: {},
       importCandidateConfig: null,
       lastAction: 'none',
-      schema: {},
+      schema: SCHEMA,
       sections: [],
       selectedSection: this.currentSection,
       showUnsafeOptionsConfirmation: false,
@@ -77,7 +79,21 @@ class ConfigurePageComponent extends AuthComponent {
     this.initialConfig = JSON.parse(JSON.stringify(config));
   }
 
+  injectExploitersIntoLegacySchema = (newSchema) => {
+    // legacy schema is defined in UI,
+    // but we should use the schema provided by "/api/agent-configuration-schema"
+    // Remove when #2750 is done
+    let injectedSchema = _.cloneDeep(this.state.schema);
+    injectedSchema['properties']['propagation']['properties']['exploitation']['properties']['exploiters'] =
+      newSchema['definitions']['ExploitationConfiguration']['properties']['exploiters']
+    return injectedSchema;
+  }
+
   componentDidMount = () => {
+    this.authFetch(SCHEMA_URL).then(res => res.json())
+      .then(schema => {
+        this.setState({schema: this.injectExploitersIntoLegacySchema(schema)})
+      })
     this.authFetch(CONFIG_URL).then(res => res.json())
       .then(monkeyConfig => {
         let sections = [];
@@ -92,7 +108,6 @@ class ConfigurePageComponent extends AuthComponent {
         }
 
         this.setState({
-          schema: SCHEMA,
           configuration: monkeyConfig,
           sections: sections,
           currentFormData: monkeyConfig[this.state.selectedSection]

monkey/monkey_island/cc/ui/src/services/configuration/propagation/exploitation.js

@@ -1,15 +1,13 @@
 import EXPLOITATION_OPTIONS_CONFIGURATION_SCHEMA from '../exploitationOptions.js';
-import {EXPLOITERS} from '../exploiterClasses';
+
 
 const EXPLOITATION_CONFIGURATION_SCHEMA = {
   'title': 'Propagation',
   'properties': {
     'exploiters': {
-      'items': EXPLOITERS,
-      'title': 'Exploiters',
-      'type': 'array',
-      'uniqueItems': true
-    },
+      // Exploiters get injected from schema generated on the back end
+       },
+
     'options': EXPLOITATION_OPTIONS_CONFIGURATION_SCHEMA
   },
   'type': 'object'