Improve the policy list react component
Add feature to the new policy list component, like grouping, sorting, CSV export, add delete/update button for future use
Issue-ID: POLICY-2925
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I5f6141eca43d750a7e8e8edf9b59cc6b1e53f0bb
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
index a93aa35..625aeb3 100644
--- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -25,13 +25,23 @@
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import styled from 'styled-components';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
import MaterialTable from "material-table";
import PolicyService from '../../../api/PolicyService';
import PolicyToscaService from '../../../api/PolicyToscaService';
@@ -46,6 +56,16 @@
}
background-color: transparent;
`
+const JsonEditorDiv = styled.div`
+ margin-top: 20px;
+ background-color: ${props => props.theme.toscaTextareaBackgroundColor};
+ text-align: justify;
+ font-size: ${props => props.theme.toscaTextareaFontSize};
+ width: 100%;
+ height: 30%;
+ border: 1px solid black;
+`
+
const standardCellStyle = { border: '1px solid black' };
const cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black'};
@@ -58,13 +78,9 @@
content: 'Please select a policy to display it',
selectedRow: -1,
policiesListData: [],
+ prefixGrouping: false,
policyColumnsDefinition: [
{
- title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
- cellStyle: standardCellStyle,
- headerStyle: headerStyle
- },
- {
title: "Policy Name", field: "name",
cellStyle: standardCellStyle,
headerStyle: headerStyle
@@ -88,7 +104,8 @@
title: "Deployed in PDP", field: "pdpGroupInfo.pdpGroup",
cellStyle: cellPdpGroupStyle,
headerStyle: headerStyle,
- render: rowData => this.renderPdpGroupDropBox(rowData)
+ render: rowData => this.renderPdpGroupDropBox(rowData),
+ grouping: false
},
{
title: "PDP Group", field: "pdpGroupInfo.pdpGroup",
@@ -102,13 +119,23 @@
}
],
tableIcons: {
+ Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
+ Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
+ Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+ Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+ DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+ Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
+ Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
+ Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
- SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
+ SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
+ ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
+ ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
}
};
@@ -118,6 +145,9 @@
this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
this.createJsonEditor = this.createJsonEditor.bind(this);
+ this.handlePrefixGrouping = this.handlePrefixGrouping.bind(this);
+ this.deletePolicy = this.deletePolicy.bind(this);
+ this.handleUpdatePolicy = this.handleUpdatePolicy.bind(this);
this.getAllPolicies();
}
@@ -136,6 +166,7 @@
}
createJsonEditor(toscaModel, editorData) {
+ document.getElementById("policy-editor").innerHTML = "";
JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({
getTab: function(text,tabId) {
var liel = document.createElement('li');
@@ -152,7 +183,8 @@
}
});
return new JSONEditor(document.getElementById("policy-editor"),
- { schema: toscaModel,
+ {
+ schema: toscaModel,
startval: editorData,
theme: 'myBootstrap4',
object_layout: 'grid',
@@ -201,6 +233,11 @@
this.props.history.push('/')
}
+ handleUpdatePolicy() {
+ this.setState({ show: false });
+ this.props.history.push('/')
+ }
+
handleOnRowClick(rowData) {
PolicyToscaService.getToscaPolicyModel(rowData["type"], rowData["type_version"]).then(respJsonPolicyTosca => {
this.setState({
@@ -212,12 +249,24 @@
});
}
+ handlePrefixGrouping(event) {
+ this.setState({prefixGrouping: event.target.checked});
+ };
+
+ deletePolicy(event, rowData) {
+ return null;
+ }
+
render() {
return (
- <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
<Modal.Header closeButton>
</Modal.Header>
<Modal.Body>
+ <FormControlLabel
+ control={<Switch checked={this.state.prefixGrouping} onChange={this.handlePrefixGrouping} />}
+ label="Group by prefix"
+ />
<MaterialTable
title={"View All Policies in Policy Engine"}
data={this.state.policiesListData}
@@ -225,13 +274,27 @@
icons={this.state.tableIcons}
onRowClick={(event, rowData) => {this.handleOnRowClick(rowData)}}
options={{
+ grouping: true,
+ exportButton: true,
headerStyle:rowHeaderStyle,
rowStyle: rowData => ({
- backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
})
}}
+ actions={[
+ {
+ icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+ tooltip: 'Delete Policy',
+ onClick: (event, rowData) => this.deletePolicy(event, rowData)
+ }
+ ]}
+
/>
- <div id="policy-editor" />
+ <JsonEditorDiv>
+ <h5>Policy Properties Editor</h5>
+ <div id="policy-editor" title="Policy Properties"/>
+ <Button variant="secondary" onClick={this.handleUpdatePolicy}>Update</Button>
+ </JsonEditorDiv>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.handleClose}>Close</Button>