aboutsummaryrefslogtreecommitdiffstats
path: root/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
diff options
context:
space:
mode:
Diffstat (limited to 'runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js')
-rw-r--r--runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js754
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>
+ );
+ }
+}