diff options
Diffstat (limited to 'gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js')
| -rw-r--r-- | gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js | 434 |
1 files changed, 241 insertions, 193 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index a97deea..f571bc1 100644 --- a/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -43,24 +43,27 @@ import ViewColumn from '@material-ui/icons/ViewColumn'; import DehazeIcon from '@material-ui/icons/Dehaze'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; import AddIcon from '@material-ui/icons/Add'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; +import PublishIcon from '@material-ui/icons/Publish'; import Switch from '@material-ui/core/Switch'; import MaterialTable from "material-table"; import PolicyService from '../../../api/PolicyService'; import PolicyToscaService from '../../../api/PolicyToscaService'; -import Select from 'react-select'; +import Select from '@material-ui/core/Select'; import Alert from 'react-bootstrap/Alert'; import Tabs from 'react-bootstrap/Tabs'; import Tab from 'react-bootstrap/Tab'; import PolicyEditor from './PolicyEditor'; import ToscaViewer from './ToscaViewer'; +import PolicyDeploymentEditor from './PolicyDeploymentEditor'; +import PoliciesTreeViewer from './PoliciesTreeViewer'; +import PolicyToscaFileSelector from './PolicyToscaFileSelector'; const DivWhiteSpaceStyled = styled.div` white-space: pre; ` const ModalStyled = styled(Modal)` - @media (min-width: 1000px) { + @media (min-width: 800px) { .modal-xl { max-width: 96%; } @@ -73,26 +76,38 @@ const DetailedRow = styled.div` font-size: ${ props => props.theme.policyEditorFontSize }; width: 97%; margin-left: auto; - margin-right: 0; + margin-right: auto; + 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 cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black' }; const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' }; export default class ViewAllPolicies extends React.Component { state = { show: true, - content: 'Please select a policy to display it', - selectedRowId: -1, policiesListData: [], + policiesListDataFiltered: [], toscaModelsListData: [], + toscaModelsListDataFiltered: [], jsonEditorForPolicy: new Map(), - prefixGrouping: false, showSuccessAlert: false, showFailAlert: false, + showFileSelector: false, policyColumnsDefinition: [ { title: "Policy Name", field: "name", @@ -102,7 +117,7 @@ export default class ViewAllPolicies extends React.Component { { title: "Policy Version", field: "version", cellStyle: standardCellStyle, - headerStyle: headerStyle + headerStyle: headerStyle, }, { title: "Policy Type", field: "type", @@ -115,20 +130,13 @@ export default class ViewAllPolicies extends React.Component { headerStyle: headerStyle }, { - title: "Deployed in PDP", field: "pdpGroupInfo.pdpGroup", - cellStyle: cellPdpGroupStyle, - headerStyle: headerStyle, - render: rowData => this.renderPdpGroupDropBox(rowData), - grouping: false - }, - { - title: "PDP Group", field: "pdpGroupInfo.pdpGroup", - cellStyle: cellPdpGroupStyle, + title: "Deployable in PDP Group", field: "supportedPdpGroupsString", + cellStyle: standardCellStyle, headerStyle: headerStyle }, { - title: "PDP SubGroup", field: "pdpGroupInfo.pdpSubGroup", - cellStyle: cellPdpGroupStyle, + title: "Deployed in PDP Group", field: "pdpGroupInfoString", + cellStyle: standardCellStyle, headerStyle: headerStyle } ], @@ -183,62 +191,63 @@ export default class ViewAllPolicies extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this); - this.handlePdpGroupChange = this.handlePdpGroupChange.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.showFileSelector = this.showFileSelector.bind(this); + this.disableFileSelector = this.disableFileSelector.bind(this); this.getAllPolicies(); this.getAllToscaModels(); } - getAllToscaModels() { - PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => { - this.setState({ toscaModelsListData: toscaModelsList }); - }); - } - - handlePdpGroupChange(e) { - let pdpSplit = e.value.split("/"); - let selectedPdpGroup = pdpSplit[0]; - let selectedSubPdpGroup = pdpSplit[1]; - if (typeof selectedSubPdpGroup !== "undefined") { - let temp = this.state.policiesListData; - temp[this.state.selectedRowId]["pdpGroupInfo"] = { "pdpGroup": selectedPdpGroup, "pdpSubGroup": selectedSubPdpGroup }; - this.setState({ policiesListData: temp }); - } else { - delete this.state.policiesListData[this.state.selectedRowId]["pdpGroupInfo"]; - } - } + generateAdditionalPolicyColumns(policiesData) { + policiesData.forEach(policy => { + let supportedPdpGroupsString = ""; + if (typeof policy.supportedPdpGroups !== "undefined") { + for (const pdpGroup of policy["supportedPdpGroups"]) { + for (const pdpSubGroup of Object.values(pdpGroup)[0]) { + supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n"); + } + } + policy["supportedPdpGroupsString"] = supportedPdpGroupsString; + } - renderPdpGroupDropBox(dataRow) { - let optionItems = [{ label: "NOT DEPLOYED", value: "NOT DEPLOYED" }]; - let selectedItem = { label: "NOT DEPLOYED", value: "NOT DEPLOYED" }; - if (typeof dataRow.supportedPdpGroups !== "undefined") { - for (const pdpGroup of dataRow["supportedPdpGroups"]) { - for (const pdpSubGroup of Object.values(pdpGroup)[0]) { - optionItems.push({ - label: Object.keys(pdpGroup)[0] + "/" + pdpSubGroup, - value: Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + let infoPdpGroup = ""; + if (typeof policy.pdpGroupInfo !== "undefined") { + policy["pdpGroupInfo"].forEach(pdpGroupElem => { + let groupName = Object.keys(pdpGroupElem)[0]; + pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => { + infoPdpGroup += (groupName + "/" + pdpSubGroupElem["pdpType"] + " (" + + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n"); }); - } + policy["pdpGroupInfoString"] = infoPdpGroup; + }); } - } - if (typeof dataRow.pdpGroupInfo !== "undefined") { - selectedItem = { - label: dataRow["pdpGroupInfo"]["pdpGroup"] + "/" + dataRow["pdpGroupInfo"]["pdpSubGroup"], - value: dataRow["pdpGroupInfo"]["pdpGroup"] + "/" + dataRow["pdpGroupInfo"]["pdpSubGroup"] - }; - } - return (<div style={ { width: '250px' } }><Select value={ selectedItem } options={ optionItems } onChange={ this.handlePdpGroupChange }/></div>); + }); + } + + getAllToscaModels() { + PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => { + this.setState({ + toscaModelsListData: toscaModelsList, + toscaModelsListDataFiltered: toscaModelsList + }); + }); } getAllPolicies() { PolicyService.getPoliciesList().then(allPolicies => { - this.setState({ policiesListData: allPolicies["policies"] }) + this.generateAdditionalPolicyColumns(allPolicies["policies"]) + this.setState({ + policiesListData: allPolicies["policies"], + policiesListDataFiltered: allPolicies["policies"], + }) }); + } handleClose() { @@ -246,10 +255,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 => { @@ -264,8 +269,8 @@ export default class ViewAllPolicies extends React.Component { showSuccessAlert: true, showMessage: 'Policy successfully Deleted' }); + this.getAllPolicies(); } - this.getAllPolicies(); } ) } @@ -274,62 +279,92 @@ 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)) }); + } + + showFileSelector() { + this.setState({ showFileSelector: true }); + } + + disableFileSelector() { + this.setState({ showFileSelector: false }); + } + renderPoliciesTab() { return ( <Tab eventKey="policies" title="Policies in Policy Framework"> <Modal.Body> - <FormControlLabel - control={ <Switch checked={ this.state.prefixGrouping } onChange={ this.handlePrefixGrouping }/> } - label="Group by prefix" - /> - <MaterialTable - title={ "Policies" } - data={ this.state.policiesListData } - columns={ this.state.policyColumnsDefinition } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData, togglePanel) => 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 ( - <DetailedRow> - <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] } policyName={ rowData["name"] } policyVersion={ rowData["version"] } - policyProperties={ rowData["properties"] } policyUpdateFunction={ this.getAllPolicies }/> - </DetailedRow> - ) - }, - }, - { - icon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - <DetailedRow> - <pre>{ JSON.stringify(rowData, null, 2) }</pre> - </DetailedRow> - ) - }, - }, - ] } - actions={ [ - { - icon: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>), - tooltip: 'Delete Policy', - onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) - } - ] } - /> + <div> + <PoliciesTreeViewerDiv> + <PoliciesTreeViewer policiesData={ this.state.policiesListData } valueForTreeCreation="name" policiesFilterFunction={ this.filterPolicies }/> + </PoliciesTreeViewerDiv> + <MaterialTableDiv> + <MaterialTable + title={ "Policies" } + data={ this.state.policiesListDataFiltered } + columns={ this.state.policyColumnsDefinition } + icons={ this.state.tableIcons } + onRowClick={ (event, rowData, togglePanel) => togglePanel() } + options={ { + grouping: true, + exportButton: true, + headerStyle: rowHeaderStyle, + actionsColumnIndex: -1 + } } + detailPanel={ [ + { + icon: ArrowForwardIosIcon, + tooltip: 'Show Configuration', + render: rowData => { + return ( + <DetailedRow> + <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] } + policyName={ rowData["name"] } policyVersion={ rowData["version"] } policyProperties={ rowData["properties"] } + policiesTableUpdateFunction={ this.getAllPolicies }/> + </DetailedRow> + ) + }, + }, + { + icon: DehazeIcon, + openIcon: DehazeIcon, + tooltip: 'Show Raw Data', + render: rowData => { + return ( + <DetailedRow> + <pre>{ JSON.stringify(rowData, null, 2) }</pre> + </DetailedRow> + ) + }, + }, + { + icon: PublishIcon, + openIcon: PublishIcon, + tooltip: 'PDP Group Deployment', + render: rowData => { + return ( + <DetailedRow> + <PolicyDeploymentEditor policyData={ rowData } policiesTableUpdateFunction={ this.getAllPolicies }/> + </DetailedRow> + ) + }, + } + ] } + actions={ [ + { + icon: DeleteRoundedIcon, + tooltip: 'Delete Policy', + onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) + } + ] } + /> + </MaterialTableDiv> + </div> </Modal.Body> </Tab> ); @@ -339,61 +374,71 @@ export default class ViewAllPolicies extends React.Component { return ( <Tab eventKey="tosca models" title="Tosca Models in Policy Framework"> <Modal.Body> - <FormControlLabel - control={ <Switch checked={ this.state.prefixGrouping } onChange={ this.handlePrefixGrouping }/> } - label="Group by prefix" - /> - <MaterialTable - title={ "Tosca Models" } - data={ this.state.toscaModelsListData } - columns={ this.state.toscaColumnsDefinition } - icons={ this.state.tableIcons } - onRowClick={ (event, rowData, togglePanel) => 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 ( - <DetailedRow> - <ToscaViewer toscaData={ rowData }/> - </DetailedRow> - ) - }, - }, - { - icon: DehazeIcon, - tooltip: 'Show Raw Data', - render: rowData => { - return ( - <DetailedRow> - <pre>{ JSON.stringify(rowData, null, 2) }</pre> - </DetailedRow> - ) - }, - }, - { - icon: AddIcon, - tooltip: 'Create a policy from this model', - render: rowData => { - return ( - <DetailedRow> - <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policyUpdateFunction={ this.getAllPolicies }/> - </DetailedRow> - ) - }, - }, - ] } - /> + <div> + <PoliciesTreeViewerDiv> + <PoliciesTreeViewer policiesData={ this.state.toscaModelsListData } valueForTreeCreation="policyModelType" policiesFilterFunction={ this.filterTosca }/> + </PoliciesTreeViewerDiv> + <MaterialTableDiv> + <MaterialTable + title={ "Tosca Models" } + data={ this.state.toscaModelsListDataFiltered } + columns={ this.state.toscaColumnsDefinition } + icons={ this.state.tableIcons } + onRowClick={ (event, rowData, togglePanel) => togglePanel() } + options={ { + grouping: true, + exportButton: true, + headerStyle: rowHeaderStyle, + actionsColumnIndex: -1 + } } + actions={ [ + { + icon: AddIcon, + tooltip: 'Add New Tosca Model', + isFreeAction: true, + onClick: () => this.showFileSelector() + } + ] } + detailPanel={ [ + { + icon: ArrowForwardIosIcon, + tooltip: 'Show Tosca', + render: rowData => { + return ( + <DetailedRow> + <ToscaViewer toscaData={ rowData }/> + </DetailedRow> + ) + }, + }, + { + icon: DehazeIcon, + openIcon: DehazeIcon, + tooltip: 'Show Raw Data', + render: rowData => { + return ( + <DetailedRow> + <pre>{ JSON.stringify(rowData, null, 2) }</pre> + </DetailedRow> + ) + }, + }, + { + icon: AddIcon, + openIcon: AddIcon, + tooltip: 'Create a policy from this model', + render: rowData => { + return ( + <DetailedRow> + <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policiesTableUpdateFunction={ this.getAllPolicies }/> + </DetailedRow> + ) + }, + }, + ] } + /> + </MaterialTableDiv> + </div> </Modal.Body> </Tab> ); @@ -401,27 +446,30 @@ export default class ViewAllPolicies extends React.Component { render() { return ( - <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> - <Modal.Header closeButton> - </Modal.Header> - <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }> - { this.renderPoliciesTab() } - { this.renderToscaTab() } - </Tabs> - <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> - <DivWhiteSpaceStyled> - { this.state.showMessage } - </DivWhiteSpaceStyled> - </Alert> - <Modal.Footer> - <Button variant="secondary" onClick={ this.handleClose }>Close</Button> - </Modal.Footer> - </ModalStyled> + <React.Fragment> + <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }> + <Modal.Header closeButton> + </Modal.Header> + <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }> + { this.renderPoliciesTab() } + { this.renderToscaTab() } + </Tabs> + <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible> + <DivWhiteSpaceStyled> + { this.state.showMessage } + </DivWhiteSpaceStyled> + </Alert> + <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible> + <DivWhiteSpaceStyled> + { this.state.showMessage } + </DivWhiteSpaceStyled> + </Alert> + <Modal.Footer> + <Button variant="secondary" onClick={ this.handleClose }>Close</Button> + </Modal.Footer> + </ModalStyled> + <PolicyToscaFileSelector show={ this.state.showFileSelector } disableFunction={ this.disableFileSelector } toscaTableUpdateFunction={ this.getAllToscaModels }/> + </React.Fragment> ); } } |