From b496fda34d1bd11b1e747145b9a242c61ab8dc27 Mon Sep 17 00:00:00 2001 From: sebdet Date: Tue, 30 Mar 2021 00:30:49 +0200 Subject: Add new component to support Tree view Add treeview component to show subset of policies by prefix (using .) Issue-ID: POLICY-3165 Signed-off-by: sebdet Change-Id: I1365695f03086beda36a6bafddd9ad0f52944b6d --- .../components/dialogs/Policy/ViewAllPolicies.js | 285 +++++++++++---------- 1 file changed, 153 insertions(+), 132 deletions(-) (limited to 'ui-react/src/components/dialogs/Policy/ViewAllPolicies.js') diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index f986dff29..0fd0d13e5 100644 --- a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -44,7 +44,6 @@ import DehazeIcon from '@material-ui/icons/Dehaze'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; import AddIcon from '@material-ui/icons/Add'; import PublishIcon from '@material-ui/icons/Publish'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; import Switch from '@material-ui/core/Switch'; import MaterialTable from "material-table"; import PolicyService from '../../../api/PolicyService'; @@ -56,6 +55,7 @@ import Tab from 'react-bootstrap/Tab'; import PolicyEditor from './PolicyEditor'; import ToscaViewer from './ToscaViewer'; import PolicyDeploymentEditor from './PolicyDeploymentEditor'; +import PoliciesTreeViewer from './PoliciesTreeViewer'; const DivWhiteSpaceStyled = styled.div` white-space: pre; @@ -79,6 +79,18 @@ const DetailedRow = styled.div` margin-top: 20px; ` +const PoliciesTreeViewerDiv = styled.div` + width: 20%; + float: left; + left: 0; + overflow: auto; +` + +const MaterialTableDiv = styled.div` + float: right; + width: 80%; + left: 20%; +` const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' }; const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; @@ -87,13 +99,11 @@ const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', export default class ViewAllPolicies extends React.Component { state = { show: true, - showPolicyDeploymentDialog: false, - content: 'Please select a policy to display it', - selectedRowId: -1, policiesListData: [], + policiesListDataFiltered: [], toscaModelsListData: [], + toscaModelsListDataFiltered: [], jsonEditorForPolicy: new Map(), - prefixGrouping: false, showSuccessAlert: false, showFailAlert: false, policyColumnsDefinition: [ @@ -179,12 +189,13 @@ export default class ViewAllPolicies extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.handlePrefixGrouping = this.handlePrefixGrouping.bind(this); this.handleDeletePolicy = this.handleDeletePolicy.bind(this); this.disableAlert = this.disableAlert.bind(this); this.getAllPolicies = this.getAllPolicies.bind(this); this.getAllToscaModels = this.getAllToscaModels.bind(this); this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this); + this.filterPolicies = this.filterPolicies.bind(this); + this.filterTosca = this.filterTosca.bind(this); this.getAllPolicies(); this.getAllToscaModels(); } @@ -217,14 +228,18 @@ export default class ViewAllPolicies extends React.Component { getAllToscaModels() { PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => { - this.setState({ toscaModelsListData: toscaModelsList }); + this.setState({ toscaModelsListData: toscaModelsList, + toscaModelsListDataFiltered: toscaModelsList + }); }); } getAllPolicies() { PolicyService.getPoliciesList().then(allPolicies => { this.generateAdditionalPolicyColumns(allPolicies["policies"]) - this.setState({ policiesListData: allPolicies["policies"] }) + this.setState({ policiesListData: allPolicies["policies"], + policiesListDataFiltered: allPolicies["policies"], + }) }); } @@ -234,10 +249,6 @@ export default class ViewAllPolicies extends React.Component { this.props.history.push('/') } - handlePrefixGrouping(event) { - this.setState({prefixGrouping: event.target.checked}); - } - handleDeletePolicy(event, rowData) { PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then( respPolicyDeletion => { @@ -262,74 +273,84 @@ export default class ViewAllPolicies extends React.Component { this.setState ({ showSuccessAlert: false, showFailAlert: false }); } + filterPolicies(prefixForFiltering) { + this.setState({policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering))}); + } + + filterTosca(prefixForFiltering) { + this.setState({toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering))}); + } + renderPoliciesTab() { return ( - } - label="Group by prefix" +
+ + + + + togglePanel()} + options={{ + grouping: true, + exportButton: true, + headerStyle:rowHeaderStyle, + actionsColumnIndex: -1 + }} + detailPanel={[ + { + icon: ArrowForwardIosIcon, + tooltip: 'Show Configuration', + render: rowData => { + return ( + + + + ) + }, + }, + { + icon: DehazeIcon, + openIcon: DehazeIcon, + tooltip: 'Show Raw Data', + render: rowData => { + return ( + + 
{JSON.stringify(rowData, null, 2)}
+ + ) + }, + }, + { + icon: PublishIcon, + openIcon: PublishIcon, + tooltip: 'PDP Group Deployment', + render: rowData => { + return ( + + + + ) + }, + } + ]} + actions={[ + { + icon: forwardRef((props, ref) => ), + tooltip: 'Delete Policy', + onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) + } + ]} /> - togglePanel()} - options={{ - grouping: true, - exportButton: true, - headerStyle:rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF' - }), - actionsColumnIndex: -1 - }} - detailPanel={[ - { - icon: ArrowForwardIosIcon, - tooltip: 'Show Configuration', - render: rowData => { - return ( - - - - ) - }, - }, - { - icon: DehazeIcon, - openIcon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - - 
{JSON.stringify(rowData, null, 2)}
- - ) - }, - }, - { - icon: PublishIcon, - openIcon: PublishIcon, - tooltip: 'PDP Group Deployment', - render: rowData => { - return ( - - - - ) - }, - } - ]} - actions={[ - { - icon: forwardRef((props, ref) => ), - tooltip: 'Delete Policy', - onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) - } - ]} - /> + +
); @@ -339,63 +360,63 @@ export default class ViewAllPolicies extends React.Component { return ( - } - label="Group by prefix" - /> - togglePanel()} - options={{ - grouping: true, - exportButton: true, - headerStyle:rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRowId !== -1 && this.state.selectedRowId === rowData.tableData.id) ? '#EEE' : '#FFF' - }), - actionsColumnIndex: -1 - }} - detailPanel={[ - { - icon: ArrowForwardIosIcon, - tooltip: 'Show Tosca', - render: rowData => { - return ( - - - - ) - }, - }, - { - icon: DehazeIcon, - openIcon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - - 
{JSON.stringify(rowData, null, 2)}
- - ) - }, - }, - { - icon: AddIcon, - openIcon: AddIcon, - tooltip: 'Create a policy from this model', - render: rowData => { - return ( - - - - ) - }, - }, - ]} - /> +
+ + + + + togglePanel()} + options={{ + grouping: true, + exportButton: true, + headerStyle:rowHeaderStyle, + actionsColumnIndex: -1 + }} + detailPanel={[ + { + icon: ArrowForwardIosIcon, + tooltip: 'Show Tosca', + render: rowData => { + return ( + + + + ) + }, + }, + { + icon: DehazeIcon, + openIcon: DehazeIcon, + tooltip: 'Show Raw Data', + render: rowData => { + return ( + + 
{JSON.stringify(rowData, null, 2)}
+ + ) + }, + }, + { + icon: AddIcon, + openIcon: AddIcon, + tooltip: 'Create a policy from this model', + render: rowData => { + return ( + + + + ) + }, + }, + ]} + /> + +
); -- cgit 1.2.3-korg