| /*- |
| * ============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'; |
| |
| 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, |
| 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.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))}); |
| } |
| |
| 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: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />), |
| 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 |
| }} |
| 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 ( |
| <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> |
| ); |
| } |
| } |