Skip to content

Commit

Permalink
feat: Update the way to store data in the context
Browse files Browse the repository at this point in the history
  • Loading branch information
@tbalar-splunk
tbalar-splunk committed Mar 11, 2021
1 parent 6763ef9 commit 8d11e7d
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 73 deletions.
45 changes: 24 additions & 21 deletions ...rc/main/webapp/components/table/Table.jsx → ...n/webapp/components/table/CustomTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@ import Tooltip from '@splunk/react-ui/Tooltip';
import { _ } from '@splunk/ui-utils/i18n';
import PropTypes from 'prop-types';

import { ActionButtonComponent } from './TableStyle';
import { ActionButtonComponent } from './CustomTableStyle';
import { getUnifiedConfigs } from '../../util/util';
import { getExpansionRow } from './TableExpansionRow';

function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
function CustomTable({ isInput, serviceName, data, handleToggleActionClick }) {

const [sortKey, setSortKey] = useState('name');
const [sortDir, setSortDir] = useState('asc');

const generateColumns = () => {
const unifiedConfigs = getUnifiedConfigs();
let column = [];
const column = [];
if (isInput) {
let headers = unifiedConfigs.pages.inputs.table.header;
const headers = unifiedConfigs.pages.inputs.table.header;
if (headers && headers.length) {
headers.forEach((header) => {
column.push({
Expand Down Expand Up @@ -54,7 +54,7 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
key={headData.field}
onSort={headData.sortKey ? handleSort : null}
sortKey={headData.sortKey ? headData.sortKey : null}
sortDir={headData.sortKey ? headData.sortKey === sortKey ? sortDir : 'none' : null}
sortDir={headData.sortKey && headData.sortKey === sortKey ? sortDir : 'none'}
>
{headData.label}
</Table.HeadCell>
Expand Down Expand Up @@ -83,7 +83,7 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
content={_('Edit')}
>
<ActionButtonComponent
appearance="primary"
appearance="flat"
icon={<Pencil screenReaderText={null} size={1} />}
onClick={() => handleEditActionClick(row)}
/>
Expand All @@ -92,7 +92,7 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
content={_('Clone')}
>
<ActionButtonComponent
appearance="primary"
appearance="flat"
icon={<Clone screenReaderText={null} size={1} />}
onClick={() => handleCloneActionClick(row)}
/>
Expand All @@ -101,7 +101,7 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
content={_('Delete')}
>
<ActionButtonComponent
appearance="primary"
appearance="destructive"
icon={<Trash screenReaderText={null} size={1} />}
onClick={() => handleDeleteActionClick(row)}
/>
Expand Down Expand Up @@ -132,15 +132,18 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
</Switch>
</Table.Cell>
)
} else if (header.field == "actions") {
return rowActionsPrimaryButton(row);
} else {
return (
<Table.Cell key={header.field}>
{row[header.field]}
</Table.Cell>
)
}

if (header.field === "actions") {
return rowActionsPrimaryButton(row);
}

return (
<Table.Cell key={header.field}>
{row[header.field]}
</Table.Cell>
)

})}
</Table.Row>
);
Expand Down Expand Up @@ -170,7 +173,7 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
return (
<>
{ columns && columns.length &&
<Table stripeRows rowExpansion="single">
<Table key={columns.length} stripeRows rowExpansion="single">
{getTableHeaders()}
{getTableBody()}
</Table>
Expand All @@ -179,11 +182,11 @@ function InputTable({ isInput, serviceName, data, handleToggleActionClick }) {
);
}

InputTable.propTypes = {
isInput: PropTypes.boolean,
CustomTable.propTypes = {
isInput: PropTypes.bool,
serviceName: PropTypes.string.isRequired,
data: PropTypes.object.isRequired,
data: PropTypes.array.isRequired,
handleToggleActionClick: PropTypes.func
};

export default InputTable;
export default CustomTable;
3 changes: 2 additions & 1 deletion ...in/webapp/components/table/TableStyle.jsx → ...app/components/table/CustomTableStyle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import Button from '@splunk/react-ui/Button';
import WaitSpinner from '@splunk/react-ui/WaitSpinner';

export const ActionButtonComponent = styled(Button)`
margin: 0px 5px;
margin: 0px 1px;
border: none;
`;

export const WaitSpinnerWrapper = styled(WaitSpinner)`
Expand Down
4 changes: 3 additions & 1 deletion ...app/components/table/TableExpansionRow.js → ...pp/components/table/TableExpansionRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import { _ } from '@splunk/ui-utils/i18n';
import { getUnifiedConfigs } from '../../util/util';

function getExpansionRowData(row) {

const unifiedConfigs = getUnifiedConfigs();
let moreInfo = unifiedConfigs.pages.inputs.table.moreInfo;
const {moreInfo} = unifiedConfigs.pages.inputs.table;

return (
moreInfo &&
moreInfo.length &&
Expand Down
79 changes: 38 additions & 41 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableWrapper.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React, { useState, useContext, useEffect } from 'react';
import React, { useState, useContext, useEffect, useCallback, memo } from 'react';
import ColumnLayout from '@splunk/react-ui/ColumnLayout';
import TableFilter from '../../components/table/TableFilter';
import Table from '../../components/table/Table';
import { TableCaptionComponent } from './TableStyle';
import Select from '@splunk/react-ui/Select';
import { getUnifiedConfigs } from '../../util/util';
import update from 'immutability-helper';

import Select from '@splunk/react-ui/Select';
import PropTypes from 'prop-types';
import { TableSelectBoxWrapper } from './TableStyle';
import TableFilter from "./TableFilter";
import CustomTable from "./CustomTable";
import { TableCaptionComponent, TableSelectBoxWrapper, WaitSpinnerWrapper } from './CustomTableStyle';
import { getUnifiedConfigs } from '../../util/util';
import InputRowContext from '../../context/InputRowContext';
import { WaitSpinnerWrapper } from './TableStyle';

function TableWrapper({ isInput, serviceName }) {

Expand All @@ -21,9 +20,9 @@ function TableWrapper({ isInput, serviceName }) {

useEffect(() => {
fetchInputs();
}, []);
}, [fetchInputs]);

const fetchInputs = () => {
const fetchInputs = useCallback(() => {
setLoading(true);
setTimeout(() => {
// API call response
Expand Down Expand Up @@ -557,34 +556,36 @@ function TableWrapper({ isInput, serviceName }) {
]];
modifyAPIResponse(data);
}, 1000);
}
}, [modifyAPIResponse]);

const modifyAPIResponse = (data) => {
const modifyAPIResponse = useCallback((data) => {
const unifiedConfigs = getUnifiedConfigs();
let obj = {};
const obj = {};
unifiedConfigs.pages.inputs.services.forEach((service, index) => {
if (service && service.name && data) {
let modifiedResponse = [];
const tmpObj = {};
data[index].forEach((val) => {
modifiedResponse.push({
tmpObj[val.name] = {
...val.content,
id: val.id,
name: val.name
});
name: val.name,
serviceName: service.name
}
});
obj[service.name] = modifiedResponse;
obj[service.name] = tmpObj;
}
});
setRowData(obj);
setLoading(false);
}
}, [setRowData]);

/**
*
* @param row {Object} row
*/
const changeStatus = (row) => {

const updatedRowData = update(rowData, { [row.serviceName]: { [row.name]: { disabled: { $set: !row.disabled }}}})
setRowData(updatedRowData);
}

const handleFilterChange = (e, { value }) => {
Expand All @@ -597,14 +598,14 @@ function TableWrapper({ isInput, serviceName }) {

const getSearchTypeDropdown = () => {
const unifiedConfigs = getUnifiedConfigs();
const services = unifiedConfigs.pages.inputs.services;
const { services } = unifiedConfigs.pages.inputs;

let arr = [];
arr = services.map((service) => {
return <Select.Option label={service.title} value={service.name} />
return <Select.Option key={service.name} label={service.title} value={service.name} />
});

arr.unshift(<Select.Option label="All" value="all" />);
arr.unshift(<Select.Option key="all" label="All" value="all" />);
return arr;
}

Expand All @@ -615,41 +616,39 @@ function TableWrapper({ isInput, serviceName }) {
* It will return a new array which will match with searchText
*/
const findByMatchingValue = (data) => {
console.log("data: ", data);
let arr = [];
data.forEach((val) => {
const arr = [];
Object.keys(data).forEach((v) => {
let found = false;
Object.keys(val).forEach((key) => {
if (typeof val[key] == 'string' && val[key].toLowerCase().includes(searchText.toLowerCase())) {
Object.keys(data[v]).forEach((vv) => {
if (typeof data[v][vv] === 'string' && data[v][vv].toLowerCase().includes(searchText.toLowerCase())) {
if (!found) {
arr.push(val);
arr.push(data[v]);
found = true;
}
}
})
});
});
return arr;
}

const getRowData = () => {
if (searchType == "all") {
if (searchType === "all") {
let arr = [];
Object.keys(rowData).forEach((key) => {
let newArr = [];
if (searchText && searchText.length) {
newArr = findByMatchingValue(rowData[key]);
} else {
newArr = rowData[key];
newArr = Object.keys(rowData[key]).map((val) => rowData[key][val])
}
arr = arr.concat(newArr);
});
return arr;
} else {
return findByMatchingValue(rowData[searchType]);
}
return findByMatchingValue(rowData[searchType]);
}

const filteredData = getRowData();
const filteredData = !loading && getRowData();

return (
<>
Expand All @@ -676,13 +675,11 @@ function TableWrapper({ isInput, serviceName }) {
<ColumnLayout.Column span={4}>
<TableFilter handleChange={handleFilterChange} />
</ColumnLayout.Column>
<ColumnLayout.Column span={4}>

</ColumnLayout.Column>
<ColumnLayout.Column span={4} />
</ColumnLayout.Row>
</ColumnLayout>

<Table
<CustomTable
isInput={isInput}
serviceName={serviceName}
data={filteredData}
Expand All @@ -695,8 +692,8 @@ function TableWrapper({ isInput, serviceName }) {
}

TableWrapper.propTypes = {
isInput: PropTypes.boolean,
isInput: PropTypes.bool,
serviceName: PropTypes.string.isRequired
};

export default TableWrapper;
export default memo(TableWrapper);
18 changes: 9 additions & 9 deletions splunk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/util/configManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class ConfigManager extends Component {
}
}

componentWillMount() {
componentDidMount() {
this.setState({loading: true});
loadGlobalConfig().then((val) => {
// The configuration object should be attached to global object,
Expand Down Expand Up @@ -57,27 +57,27 @@ class ConfigManager extends Component {
setUnifiedConfig(unifiedConfig);
setMetaInfo(appData);
this.setState({
appData: appData,
validationResult: validationResult,
unifiedConfig: unifiedConfig,
appData,
validationResult,
unifiedConfig,
loading: false
});
}

renderComponents() {
if (this.state.validationResult.failed) {
return (
<ErrorModal message={getFormattedMessage(110, [_.unescape(this.state.validationResult.errors[0].stack)])} open={true} />
<ErrorModal message={getFormattedMessage(110, [_.unescape(this.state.validationResult.errors[0].stack)])} open />
);
} else if (this.state.syntaxError) {
} if (this.state.syntaxError) {
return (
<ErrorModal message={getFormattedMessage(110, [getFormattedMessage(20)])} open={true} />
<ErrorModal message={getFormattedMessage(110, [getFormattedMessage(20)])} open />
);
} else {
}
return (
this.props.children(this.state)
);
}

}

render() {
Expand Down

0 comments on commit 8d11e7d

Please sign in to comment.