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 --- .../dialogs/Policy/PoliciesTreeViewer.js | 109 ++++++++ .../components/dialogs/Policy/ViewAllPolicies.js | 285 +++++++++++---------- 2 files changed, 262 insertions(+), 132 deletions(-) create mode 100644 ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js (limited to 'ui-react/src/components/dialogs') diff --git a/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js b/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js new file mode 100644 index 000000000..9c2f102b4 --- /dev/null +++ b/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js @@ -0,0 +1,109 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP POLICY-CLAMP + * ================================================================================ + * Copyright (C) 2021 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React, { forwardRef } from 'react' +import TreeView from '@material-ui/lab/TreeView'; +import TreeItem from '@material-ui/lab/TreeItem'; +import FolderIcon from '@material-ui/icons/Folder'; +import FolderOpenIcon from '@material-ui/icons/FolderOpen'; +import DescriptionIcon from '@material-ui/icons/Description'; + + +export default class PoliciesTreeViewer extends React.Component { + + separator = "."; + + nodesList = new Map(); + + constructor(props, context) { + super(props, context); + this.createPoliciesTree = this.createPoliciesTree.bind(this); + this.handleTreeItemClick = this.handleTreeItemClick.bind(this); + this.buildNameWithParent = this.buildNameWithParent.bind(this); + + } + + state = { + policiesTreeData: this.createPoliciesTree(this.props.policiesData), + } + + componentDidUpdate(prevProps) { + if (prevProps.policiesData !== this.props.policiesData) { + this.setState({policiesTreeData: this.createPoliciesTree(this.props.policiesData)}) + } + } + + createPoliciesTree(policiesArray) { + // put my policies array in a Json + let nodeId = 1; + let root = {id:nodeId, policyCount:0, name:"ROOT", children:[], parent: undefined}; + this.nodesList.set(nodeId++, root); + + policiesArray.forEach(policy => { + let currentTreeNode = root; + policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => { + let node = currentTreeNode["children"].find(element => element.name === policyNamePart); + if (typeof(node) === "undefined") { + node = {id:nodeId, policyCount:0, children:[], name:policyNamePart, parent:currentTreeNode}; + this.nodesList.set(nodeId++, node); + currentTreeNode["children"].push(node); + } + if ((index+1) === policyNamePartsArray.length) { + ++currentTreeNode["policyCount"]; + } + currentTreeNode = node; + }) + }) + return root; + } + + buildNameWithParent(node) { + let nameToBuild = node.name; + if (node.parent !== undefined) { + nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name; + } + return nameToBuild; + } + + handleTreeItemClick(event, value) { + let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5); + this.props.policiesFilterFunction(fullName); + } + + renderTreeItems(nodes) { + return ( + { + Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null + } + ); + }; + + render() { + return ( + } + defaultExpandIcon={} defaultEndIcon={} onNodeSelect={this.handleTreeItemClick} multiSelect> + {this.renderTreeItems(this.state.policiesTreeData)} + + ); + } +} \ No newline at end of file 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