feat: Added button for create new input

splunk · Mar 16, 2021 · 979b058 · 979b058
1 parent ab41e36
commit 979b058
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 18 deletions.
diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/CustomTable.jsx
@@ -17,9 +17,11 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
 
     const [sortKey, setSortKey] = useState('name');
     const [sortDir, setSortDir] = useState('asc');
+    const unifiedConfigs = getUnifiedConfigs();
+    const { moreInfo } = unifiedConfigs.pages.inputs.table;
+    const statusMapping = moreInfo.filter(a => a.mapping);
 
     const generateColumns = () => {
-        const unifiedConfigs = getUnifiedConfigs();
         const column = [];
         if (isInput) {
             const headers = unifiedConfigs.pages.inputs.table.header;
@@ -32,8 +34,8 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
                 });
             }
             column.push({ label: 'Actions', field: 'actions', sortKey: '' });
-            return column;
         }
+        return column;
     }
 
     const [columns, setColumns] = useState(() => generateColumns());
@@ -128,22 +130,22 @@ function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {
                                     selected={!row.disabled}
                                     appearance="toggle"
                                 >
-                                    {row.disabled ? "Disabled" : "Enabled"}
+                                    {statusMapping[0].mapping[row.disabled]}
                                 </Switch>
                             </Table.Cell>
                         )
                     }
-                    
+
                     if (header.field === "actions") {
                         return rowActionsPrimaryButton(row);
-                    } 
-                    
+                    }
+
                     return (
                         <Table.Cell key={header.field}>
                             {row[header.field]}
                         </Table.Cell>
                     )
-                    
+
                 })}
             </Table.Row>
         );
@@ -190,3 +192,4 @@ CustomTable.propTypes = {
 };
 
 export default CustomTable;
+
diff --git a/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx b/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx
@@ -8,7 +8,7 @@ import { getUnifiedConfigs } from '../../util/util';
 function getExpansionRowData(row) {
 
     const unifiedConfigs = getUnifiedConfigs();
-    const {moreInfo} = unifiedConfigs.pages.inputs.table;
+    const { moreInfo } = unifiedConfigs.pages.inputs.table;
 
     return (
         moreInfo &&
@@ -17,15 +17,11 @@ function getExpansionRowData(row) {
             const label = _(val.label);
             return (
                 <>
-                    {(row[val.field] || val.label == 'Status') && (
+                    {(row[val.field]) && (
                         <>
                             <DL.Term>{label}</DL.Term>
                             <DL.Description>
-                                {val.label == 'Status'
-                                    ? row[val.field]
-                                        ? 'Disabled'
-                                        : 'Enabled'
-                                    : `${row[val.field]}`}
+                                {val.field === 'disabled' ? val.mapping[row[val.field]] : `${row[val.field]}`}
                             </DL.Description>
                         </>
                     )}

diff --git a/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx b/splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/pages/Input/InputPage.jsx
@@ -1,27 +1,66 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import Select from '@splunk/react-ui/Select';
+import ColumnLayout from '@splunk/react-ui/ColumnLayout';
+import Button from '@splunk/react-ui/Button';
 import { _ } from '@splunk/ui-utils/i18n';
 
 import { getUnifiedConfigs } from '../../util/util';
 import { TitleComponent, SubTitleComponent } from './InputPageStyle';
-import TableWrapper from '../../components/table/TableWrapper';
 import { InputRowContextProvider } from '../../context/InputRowContext';
+import TableWrapper from '../../components/table/TableWrapper';
 
 function InputPage({ isInput, serviceName }) {
 
     const [title, setTitle] = useState(null);
     const [description, setDescription] = useState(null);
 
+    const unifiedConfigs = getUnifiedConfigs();
+    const { services } = unifiedConfigs.pages.inputs;
+
     useEffect(() => {
-        const unifiedConfigs = getUnifiedConfigs();
         setTitle(_(unifiedConfigs.pages.inputs.title));
         setDescription(_(unifiedConfigs.pages.inputs.description));
     }, []);
 
+    const getSearchTypeDropdown = () => {
+        let arr = [];
+        arr = services.map((service) => {
+            return <Select.Option key={service.name} label={service.title} value={service.name} />;
+        });
+        arr.unshift(<Select.Option key="createNew" value="" selected disabled hidden label="Create New Input" />);
+        return arr;
+    };
+
     return (
         <>
-            <TitleComponent>{title}</TitleComponent>
-            <SubTitleComponent>{description}</SubTitleComponent>
+            <ColumnLayout gutter={8}>
+                <ColumnLayout.Row style={{ padding: '5px 0px' }}>
+                    <ColumnLayout.Column span={9}>
+                        <TitleComponent>{title}</TitleComponent>
+                        <SubTitleComponent>{description}</SubTitleComponent>
+                    </ColumnLayout.Column>
+                    {services && services.length > 1 &&
+                        <ColumnLayout.Column span={3} style={{ 'textAlign': 'right' }}>
+                            <Select onChange={(e, { value }) => {
+                                console.log("On create new", value);
+                            }}>
+                                {getSearchTypeDropdown()}
+                            </Select>
+                        </ColumnLayout.Column>
+                    }
+                    {services && services.length === 1 &&
+                        <Button
+                            label="Create New Input"
+                            appearance="flat"
+                            onClick={() => {
+                                console.log("On create new", services[0].name);
+                            }}
+                        />
+                    }
+
+                </ColumnLayout.Row>
+            </ColumnLayout>
             <InputRowContextProvider value={null}>
                 <TableWrapper isInput={isInput} serviceName={serviceName} />
             </InputRowContextProvider>
@@ -35,3 +74,4 @@ InputPage.propTypes = {
 };
 
 export default InputPage;
+