diff options
Diffstat (limited to 'runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js')
| -rw-r--r-- | runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js | 754 |
1 files changed, 378 insertions, 376 deletions
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js index 04965352b..f571bc16d 100644 --- a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js +++ b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js @@ -59,415 +59,417 @@ import PoliciesTreeViewer from './PoliciesTreeViewer'; import PolicyToscaFileSelector from './PolicyToscaFileSelector'; const DivWhiteSpaceStyled = styled.div` - white-space: pre; + white-space: pre; ` const ModalStyled = styled(Modal)` - @media (min-width: 800px) { - .modal-xl { - max-width: 96%; - } + @media (min-width: 800px) { + .modal-xl { + max-width: 96%; } - background-color: transparent; + } + 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; + 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; + width: 20%; + float: left; + left: 0; + overflow: auto; ` const MaterialTableDiv = styled.div` - float: right; - width: 80%; - left: 20%; + 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'}; +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(); + 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 }/>) } + }; - 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; - } + 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(); + } - 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; - }); - } - }); - } + 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; + } - getAllToscaModels() { - PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => { - this.setState({ toscaModelsListData: toscaModelsList, - toscaModelsListDataFiltered: toscaModelsList - }); + 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; }); - } + } + }); + } - getAllPolicies() { - PolicyService.getPoliciesList().then(allPolicies => { - this.generateAdditionalPolicyColumns(allPolicies["policies"]) - this.setState({ policiesListData: allPolicies["policies"], - policiesListDataFiltered: allPolicies["policies"], - }) - }); + 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(); - } - } - ) - } + handleClose() { + this.setState({ show: false }); + this.props.history.push('/') + } - disableAlert() { - this.setState ({ showSuccessAlert: false, showFailAlert: false }); - } + 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(); + } + } + ) + } - filterPolicies(prefixForFiltering) { - this.setState({policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering))}); - } + disableAlert() { + this.setState({ showSuccessAlert: false, showFailAlert: false }); + } - filterTosca(prefixForFiltering) { - this.setState({toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering))}); - } + filterPolicies(prefixForFiltering) { + this.setState({ policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering)) }); + } - showFileSelector() { - this.setState({showFileSelector:true}); - } + filterTosca(prefixForFiltering) { + this.setState({ toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering)) }); + } - disableFileSelector() { - this.setState({showFileSelector:false}); - } + showFileSelector() { + this.setState({ showFileSelector: true }); + } - 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> - ); - } + disableFileSelector() { + this.setState({ showFileSelector: false }); + } - 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> - ); - } + 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> + ); + } - 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> - ); - } - }
\ No newline at end of file + 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> + ); + } +} |