From c1d76142dc71e46f6e486455b1bdb37ac48f1918 Mon Sep 17 00:00:00 2001 From: Sonja Happ Date: Fri, 12 Feb 2021 13:53:40 +0100 Subject: [PATCH] Split IC table into managers, gateways, simulators, services and equipment - Tables appear only if ICs of this category are present - IC creation has drop down to select manager (if managed externally is checked) closes #284 --- src/common/table.js | 2 +- src/ic/edit-ic.js | 2 +- src/ic/ics.js | 157 ++++++++++++++++++++++++++------------------ src/ic/new-ic.js | 65 +++++++++++++----- 4 files changed, 144 insertions(+), 82 deletions(-) diff --git a/src/common/table.js b/src/common/table.js index f87df60..1a1dd90 100644 --- a/src/common/table.js +++ b/src/common/table.js @@ -126,7 +126,7 @@ class CustomTable extends Component { inline disabled = {isDisabled} checked={checkboxKey ? data[checkboxKey] : null} - onChange={e => child.props.onChecked(index, e)} + onChange={e => child.props.onChecked(data, e)} />); } diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js index 1742560..69ba89b 100644 --- a/src/ic/edit-ic.js +++ b/src/ic/edit-ic.js @@ -158,10 +158,10 @@ class EditICDialog extends React.Component { Category this.handleChange(e)}> - + diff --git a/src/ic/ics.js b/src/ic/ics.js index 2bfea75..d995348 100644 --- a/src/ic/ics.js +++ b/src/ic/ics.js @@ -75,17 +75,26 @@ class InfrastructureComponents extends Component { } }); - let externalICs = ics.find(ic => ic.managedexternally === true) + // collect number of external ICs + let externalICs = ics.filter(ic => ic.managedexternally === true) + let numberOfExternalICs = externalICs.length; + + // collect all IC categories + let managers = ics.filter(ic => ic.category === "manager") + let gateways = ics.filter(ic => ic.category === "gateway") + let simulators = ics.filter(ic => ic.category === "simulator") + let services = ics.filter(ic => ic.category === "service") + let equipment = ics.filter(ic => ic.category === "equipment") - let numberOfExternalICs = 0 - if (externalICs !== undefined && !Array.isArray(externalICs)) { - externalICs = [externalICs]; - numberOfExternalICs = externalICs.length; - } return { sessionToken: localStorage.getItem("token"), ics: ics, + managers: managers, + gateways: gateways, + simulators: simulators, + services: services, + equipment: equipment, numberOfExternalICs, modalIC: {}, deleteModal: false, @@ -205,7 +214,9 @@ class InfrastructureComponents extends Component { } } - onICChecked(index, event) { + onICChecked(ic, event) { + + let index = this.state.ics.indexOf(ic); const selectedICs = Object.assign([], this.state.selectedICs); for (let key in selectedICs) { if (selectedICs[key] === index) { @@ -377,12 +388,80 @@ class InfrastructureComponents extends Component { return ic.managedexternally } + getICCategoryTable(ics, editable, title){ + if (ics && ics.length > 0) { + return (
+

{title}

+ + this.isExternalIC(index)} + onChecked={(ic, event) => this.onICChecked(ic, event)} + width='30' + /> + this.modifyNameColumn(name, component)} + /> + this.stateLabelStyle(state, component)} + /> + + this.modifyUptimeColumn(uptime, component)} + /> + this.stateUpdateModifier(stateUpdateAt, component)} + /> + + {this.state.currentUser.role === "Admin" && editable ? + this.setState({editModal: true, modalIC: ics[index], modalIndex: index})} + onExport={index => this.exportIC(index)} + onDelete={index => this.setState({deleteModal: true, modalIC: ics[index], modalIndex: index})} + /> + : + this.exportIC(index)} + /> + } +
+
); + } else { + return
+ } + + } + render() { const buttonStyle = { marginLeft: '10px' }; + let managerTable = this.getICCategoryTable(this.state.managers, false, "IC Managers") + let simulatorTable = this.getICCategoryTable(this.state.simulators, true, "Simulators") + let gatewayTable = this.getICCategoryTable(this.state.gateways, true, "Gateways") + let serviceTable = this.getICCategoryTable(this.state.services, true, "Services") + let equipmentTable = this.getICCategoryTable(this.state.equipment, true, "Equipment") + return (

Infrastructure Components @@ -407,61 +486,12 @@ class InfrastructureComponents extends Component { ( ) }

- - this.isExternalIC(index)} - onChecked={(index, event) => this.onICChecked(index, event)} - width='30' - /> - this.modifyNameColumn(name, component)} - /> - this.stateLabelStyle(state, component)} - /> - - - this.modifyUptimeColumn(uptime, component)} - /> - this.stateUpdateModifier(stateUpdateAt, component)} - /> - {this.state.currentUser.role === "Admin" ? - this.setState({editModal: true, modalIC: this.state.ics[index], modalIndex: index})} - onExport={index => this.exportIC(index)} - onDelete={index => this.setState({deleteModal: true, modalIC: this.state.ics[index], modalIndex: index})} - /> - : - this.exportIC(index)} - /> - } -
+ {managerTable} + {simulatorTable} + {gatewayTable} + {serviceTable} + {equipmentTable} {this.state.currentUser.role === "Admin" && this.state.numberOfExternalICs > 0 ?
@@ -481,9 +511,10 @@ class InfrastructureComponents extends Component {
- this.closeNewModal(data)} /> + this.closeNewModal(data)} managers={this.state.managers} /> this.closeEditModal(data)} ic={this.state.modalIC} /> this.closeImportModal(data)} /> + this.closeDeleteModal(e)} /> this.closeICModal(data)} @@ -492,8 +523,8 @@ class InfrastructureComponents extends Component { userRole={this.state.currentUser.role} sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/> - this.closeDeleteModal(e)} />
+ ); } } diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js index 70ba920..b95b543 100644 --- a/src/ic/new-ic.js +++ b/src/ic/new-ic.js @@ -34,7 +34,8 @@ class NewICDialog extends React.Component { category: '', managedexternally: false, description: '', - location: '' + location: '', + manager: '' }; } @@ -48,7 +49,8 @@ class NewICDialog extends React.Component { uuid: this.state.uuid, managedexternally: this.state.managedexternally, location: this.state.location, - description: this.state.description + description: this.state.description, + manager: this.state.manager }; if (this.state.websocketurl != null && this.state.websocketurl !== "" && this.state.websocketurl !== 'http://') { @@ -88,6 +90,7 @@ class NewICDialog extends React.Component { let websocketurl = true; let type = true; let category = true; + let manager = true; if (this.state.name === '') { name = false; @@ -97,6 +100,10 @@ class NewICDialog extends React.Component { uuid = false; } + if(this.state.managedexternally && manager === ''){ + manager = false; + } + if (this.state.type === '') { type = false; } @@ -105,7 +112,7 @@ class NewICDialog extends React.Component { category = false; } - this.valid = name && uuid && websocketurl && type && category; + this.valid = name && uuid && websocketurl && type && category && manager; // return state to control if (target === 'name') return name ? "success" : "error"; @@ -113,6 +120,7 @@ class NewICDialog extends React.Component { if (target === 'websocketurl') return websocketurl ? "success" : "error"; if (target === 'type') return type ? "success" : "error"; if (target === 'category') return category ? "success" : "error"; + if (target === 'manager') return manager ? "success" : "error"; return this.valid; } @@ -149,30 +157,49 @@ class NewICDialog extends React.Component { return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.validateForm()}>
- - An externally managed component will show up in the list only after a manager for the component type has created the component and cannot be edited by users} > - this.handleChange(e)}> - - - + {this.props.managers.length > 0 ? + <> + + An externally managed component is created and managed by an IC manager via AMQP} > + this.handleChange(e)}> + + + + {this.state.managedexternally === true ? + + Required field } > + Manager to create new IC * + + this.handleChange(e)}> + {this.props.managers.map((m) => ( + + ))} + + + :
+ + } + + :
+ } - Required field } > + Required field } > Name * this.handleChange(e)} /> - Required field } > + Required field } > Category of component * this.handleChange(e)}> - + @@ -206,11 +233,15 @@ class NewICDialog extends React.Component { this.handleChange(e)} /> - - UUID - this.handleChange(e)} /> - - + {this.state.managedexternally === false ? + + UUID + this.handleChange(e)}/> + + + :
+ }
);