/*- * ============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) => ), Check: forwardRef((props, ref) => ), Clear: forwardRef((props, ref) => ), Delete: forwardRef((props, ref) => ), DetailPanel: forwardRef((props, ref) => ), Edit: forwardRef((props, ref) => ), Export: forwardRef((props, ref) => ), Filter: forwardRef((props, ref) => ), FirstPage: forwardRef((props, ref) => ), LastPage: forwardRef((props, ref) => ), NextPage: forwardRef((props, ref) => ), PreviousPage: forwardRef((props, ref) => ), ResetSearch: forwardRef((props, ref) => ), Search: forwardRef((props, ref) => ), SortArrow: forwardRef((props, ref) => ), ThirdStateCheck: forwardRef((props, ref) => ), ViewColumn: forwardRef((props, 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 ( 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: DeleteRoundedIcon, tooltip: 'Delete Policy', onClick: (event, rowData) => this.handleDeletePolicy(event, rowData) } ] } /> ); } renderToscaTab() { return ( 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 ( ) }, }, { 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 ( ) }, }, ] } /> ); } render() { return ( this.setState({ key, selectedRowData: {} }) }> { this.renderPoliciesTab() } { this.renderToscaTab() } { this.state.showMessage } { this.state.showMessage } Close ); } }
{ JSON.stringify(rowData, null, 2) }