/*-
* ============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 Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import styled from 'styled-components';
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 DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
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 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 Switch from '@material-ui/core/Switch';
import MaterialTable from "material-table";
import PolicyService from '../../../api/PolicyService';
import PolicyToscaService from '../../../api/PolicyToscaService';
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: 800px) {
.modal-xl {
max-width: 96%;
}
}
background-color: transparent;
`
const DetailedRow = styled.div`
margin: 0 auto;
background-color: ${props => props.theme.policyEditorBackgroundColor};
font-size: ${props => props.theme.policyEditorFontSize};
width: 97%;
margin-left: auto;
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 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,
policiesListData: [],
policiesListDataFiltered: [],
toscaModelsListData: [],
toscaModelsListDataFiltered: [],
jsonEditorForPolicy: new Map(),
showSuccessAlert: false,
showFailAlert: false,
showFileSelector: false,
policyColumnsDefinition: [
{
title: "Policy Name", field: "name",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Policy Version", field: "version",
cellStyle: standardCellStyle,
headerStyle: headerStyle,
},
{
title: "Policy Type", field: "type",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Policy Type Version", field: "type_version",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Deployable in PDP Group", field: "supportedPdpGroupsString",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Deployed in PDP Group", field: "pdpGroupInfoString",
cellStyle: standardCellStyle,
headerStyle: headerStyle
}
],
toscaColumnsDefinition: [
{
title: "Policy Model Type", field: "policyModelType",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Policy Acronym", field: "policyAcronym",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Version", field: "version",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Uploaded By", field: "updatedBy",
cellStyle: standardCellStyle,
headerStyle: headerStyle
},
{
title: "Uploaded Date", field: "updatedDate", editable: 'never',
cellStyle: standardCellStyle,
headerStyle: headerStyle
}
],
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) => <DeleteRoundedIcon {...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) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
}
};
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.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();
}
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;
}
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;
});
}
});
}
getAllToscaModels() {
PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
this.setState({ toscaModelsListData: toscaModelsList,
toscaModelsListDataFiltered: toscaModelsList
});
});
}
getAllPolicies() {
PolicyService.getPoliciesList().then(allPolicies => {
this.generateAdditionalPolicyColumns(allPolicies["policies"])
this.setState({ policiesListData: allPolicies["policies"],
policiesListDataFiltered: allPolicies["policies"],
})
});
}
handleClose() {
this.setState({ show: false });
this.props.history.push('/')
}
handleDeletePolicy(event, rowData) {
PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then(
respPolicyDeletion => {
if (typeof(respPolicyDeletion) === "undefined") {
//it indicates a failure
this.setState({
showFailAlert: true,
showMessage: 'Policy Deletion Failure'
});
} else {
this.setState({
showSuccessAlert: true,
showMessage: 'Policy successfully Deleted'
});
this.getAllPolicies();
}
}
)
}
disableAlert() {
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>
<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>
);
}
renderToscaTab() {
return (
<Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
<Modal.Body>
<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>
);
}
render() {
return (
<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>
);
}
}