aboutsummaryrefslogtreecommitdiffstats
path: root/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
diff options
context:
space:
mode:
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.js434
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>
);
}
}