feat: Custom menu implementation

splunk · Apr 15, 2021 · 58b0571 · 58b0571
1 parent 5643ea1
commit 58b0571
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 4 deletions.
diff --git a/ui/src/main/webapp/components/CustomMenu.jsx b/ui/src/main/webapp/components/CustomMenu.jsx
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { _ } from '@splunk/ui-utils/i18n';
+import { getUnifiedConfigs } from '../util/util';
+
+class CustomMenu extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: true,
+        };
+        this.shouldRender = true;
+    }
+
+    componentDidMount() {
+        const globalConfig = getUnifiedConfigs();
+        this.setState({ loading: true });
+        this.loadCustomControl().then((Control) => {
+            const customControl = new Control(globalConfig, this.el, this.setValue);
+            customControl.render();
+            this.setState({ loading: false });
+        });
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        if (!nextState.loading && this.shouldRender) {
+            this.shouldRender = false;
+            return true;
+        }
+        return false;
+    }
+
+    setValue = (newValue) => {
+        this.props.handleChange(newValue);
+    };
+
+    loadCustomControl = () => {
+        const globalConfig = getUnifiedConfigs();
+        const appName = globalConfig.meta.name;
+        return new Promise((resolve) => {
+            __non_webpack_require__(
+                [`app/${appName}/js/build/custom/${this.props.fileName}`],
+                (Control) => resolve(Control)
+            );
+        });
+    };
+
+    render() {
+        return (
+            <>
+                {this.state.loading && _('Loading...')}
+                {
+                    <span
+                        ref={(el) => {
+                            this.el = el;
+                        }}
+                        style={{ visibility: this.state.loading ? 'hidden' : 'visible' }}
+                    />
+                }
+            </>
+        );
+    }
+}
+
+CustomMenu.propTypes = {
+    fileName: PropTypes.string.isRequired,
+    handleChange: PropTypes.func,
+};
+
+export default CustomMenu;
diff --git a/ui/src/main/webapp/pages/Input/InputPage.jsx b/ui/src/main/webapp/pages/Input/InputPage.jsx
@@ -15,6 +15,7 @@ import { TableContextProvider } from '../../context/TableContext';
 import { MODE_CREATE, MODE_CLONE, MODE_EDIT } from '../../constants/modes';
 import { PAGE_INPUT } from '../../constants/pages';
 import { STYLE_PAGE } from '../../constants/dialogStyles';
+import CustomMenu from '../../components/CustomMenu';
 import TableWrapper from '../../components/table/TableWrapper';
 import EntityModal from '../../components/EntityModal';
 import ErrorBoundary from '../../components/ErrorBoundary';
@@ -39,7 +40,7 @@ function InputPage() {
     const [entity, setEntity] = useState({ open: false });
 
     const unifiedConfigs = getUnifiedConfigs();
-    const { services, title, description } = unifiedConfigs.pages.inputs;
+    const { services, title, description, menu: customMenuField } = unifiedConfigs.pages.inputs;
     const toggle = <Button appearance="primary" label={_('Create New Input')} isMenu />;
     const PERMITTED_MODES = [MODE_CLONE, MODE_CREATE, MODE_EDIT];
 
@@ -167,6 +168,13 @@ function InputPage() {
         }
     }, [history.location.search]);
 
+    const changeRoute = (val) => {
+        Object.keys(val).forEach((key) => {
+            query.set(key, val[key]);
+        });
+        history.push({ search: query.toString() });
+    };
+
     return (
         <ErrorBoundary>
             <TableContextProvider value={null}>
@@ -184,7 +192,7 @@ function InputPage() {
                                 <TitleComponent>{_(title)}</TitleComponent>
                                 <SubTitleComponent>{_(description)}</SubTitleComponent>
                             </ColumnLayout.Column>
-                            {services && services.length > 1 && (
+                            {services && services.length > 1 && !customMenuField?.src && (
                                 <ColumnLayout.Column className="dropdown" span={3}>
                                     <Dropdown toggle={toggle}>
                                         <Menu
@@ -204,7 +212,7 @@ function InputPage() {
                                     </Dropdown>
                                 </ColumnLayout.Column>
                             )}
-                            {services && services.length === 1 && (
+                            {services && services.length === 1 && !customMenuField?.src && (
                                 <ColumnLayout.Column span={3} className="input_button">
                                     <Button
                                         label="Create New Input"
@@ -215,6 +223,14 @@ function InputPage() {
                                     />
                                 </ColumnLayout.Column>
                             )}
+                            {customMenuField?.src && (
+                                <ColumnLayout.Column span={3} className="input_button">
+                                    {React.createElement(CustomMenu, {
+                                        fileName: customMenuField.src,
+                                        handleChange: changeRoute,
+                                    })}
+                                </ColumnLayout.Column>
+                            )}
                         </Row>
                     </ColumnLayout>
 

diff --git a/ui/src/main/webapp/pages/style.scss b/ui/src/main/webapp/pages/style.scss
@@ -1,4 +1,4 @@
 body {
     min-width: 960px;
-    background-color: #eee;
+    background-color: #fff;
 }