mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
adapting IC to revised infrastructure component model
This commit is contained in:
parent
58809e3e41
commit
1fdef9b404
4 changed files with 93 additions and 35 deletions
|
@ -30,23 +30,38 @@ class EditICDialog extends React.Component {
|
|||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: ''
|
||||
host: '',
|
||||
type: '',
|
||||
category: '',
|
||||
properties: {},
|
||||
};
|
||||
}
|
||||
|
||||
onClose(canceled) {
|
||||
if (canceled === false) {
|
||||
if (this.valid) {
|
||||
let data = this.props.ic.properties;
|
||||
let data = this.props.ic;
|
||||
|
||||
if (this.state.name != null && this.state.name !== "" && this.state.name !== _.get(this.props.ic, 'rawProperties.name')) {
|
||||
if (this.state.name != null && this.state.name !== "" && this.state.name !== this.props.ic.name) {
|
||||
data.name = this.state.name;
|
||||
}
|
||||
|
||||
if (this.state.endpoint != null && this.state.endpoint !== "" && this.state.endpoint !== "http://" && this.state.endpoint !== _.get(this.props.ic, 'rawProperties.endpoint')) {
|
||||
data.endpoint = this.state.endpoint;
|
||||
if (this.state.host != null && this.state.host !== "" && this.state.host !== "http://" && this.state.host !== this.props.ic.host) {
|
||||
data.host = this.state.host;
|
||||
}
|
||||
|
||||
if (this.state.type != null && this.state.type !== "" && this.state.type !== this.props.ic.type) {
|
||||
data.type = this.state.type;
|
||||
}
|
||||
|
||||
if (this.state.category != null && this.state.category !== "" && this.state.category !== this.props.ic.category) {
|
||||
data.category = this.state.category;
|
||||
}
|
||||
if (this.state.properties !== {}) {
|
||||
data.properties = this.state.properties
|
||||
}
|
||||
|
||||
|
||||
this.props.onClose(data);
|
||||
}
|
||||
} else {
|
||||
|
@ -60,8 +75,11 @@ class EditICDialog extends React.Component {
|
|||
|
||||
resetState() {
|
||||
this.setState({
|
||||
name: _.get(this.props.ic, 'properties.name') || _.get(this.props.ic, 'rawProperties.name'),
|
||||
endpoint: _.get(this.props.ic, 'properties.endpoint') || _.get(this.props.ic, 'rawProperties.endpoint')
|
||||
name: this.props.ic.name,
|
||||
host: this.props.ic.host,
|
||||
type: this.props.ic.type,
|
||||
category: this.props.ic.category,
|
||||
properties: _.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -71,17 +89,27 @@ class EditICDialog extends React.Component {
|
|||
<form>
|
||||
<FormGroup controlId="name">
|
||||
<FormLabel column={false}>Name</FormLabel>
|
||||
<FormControl type="text" placeholder={_.get(this.props.ic, 'properties.name')} value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint">
|
||||
<FormLabel column={false}>Endpoint</FormLabel>
|
||||
<FormControl type="text" placeholder={_.get(this.props.ic, 'properties.endpoint')} value={this.state.endpoint || 'http://' } onChange={(e) => this.handleChange(e)} />
|
||||
<FormGroup controlId="host">
|
||||
<FormLabel column={false}>Host</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.host} value={this.state.host || 'http://' } onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="category">
|
||||
<FormLabel column={false}>Category (e.g. Simulator, Gateway, ...)</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.category} value={this.state.category} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="type">
|
||||
<FormLabel column={false}>Type (e.g. RTDS, VILLASnode, ...)</FormLabel>
|
||||
<FormControl type="text" placeholder={this.props.ic.type} value={this.state.type} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId='properties'>
|
||||
<FormLabel column={false}>Properties</FormLabel>
|
||||
<ParametersEditor content={_.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))} disabled={true} />
|
||||
<ParametersEditor content={this.state.properties} disabled={false} />
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
|
|
@ -127,13 +127,13 @@ class InfrastructureComponents extends Component {
|
|||
this.setState({ editModal : false });
|
||||
|
||||
if (data) {
|
||||
let ic = this.state.ics[this.state.modalIndex];
|
||||
ic.properties = data;
|
||||
this.setState({ ic: ic });
|
||||
//let ic = this.state.ics[this.state.modalIndex];
|
||||
//ic = data;
|
||||
//this.setState({ ic: ic });
|
||||
|
||||
AppDispatcher.dispatch({
|
||||
type: 'ics/start-edit',
|
||||
data: ic,
|
||||
data: data,
|
||||
token: this.state.sessionToken,
|
||||
});
|
||||
}
|
||||
|
@ -272,10 +272,10 @@ class InfrastructureComponents extends Component {
|
|||
|
||||
<Table data={this.state.ics}>
|
||||
<TableColumn checkbox onChecked={(index, event) => this.onICChecked(index, event)} width='30' />
|
||||
<TableColumn title='Name' dataKeys={['properties.name', 'rawProperties.name']} />
|
||||
<TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} />
|
||||
<TableColumn title='State' labelKey='state' tooltipKey='error' labelModifier={InfrastructureComponents.stateLabelModifier} labelStyle={InfrastructureComponents.stateLabelStyle} />
|
||||
<TableColumn title='Category' dataKeys={['properties.category', 'rawProperties.category']} />
|
||||
<TableColumn title='Type' dataKeys={['properties.type', 'rawProperties.type']} />
|
||||
<TableColumn title='Category' dataKeys={['category', 'rawProperties.category']} />
|
||||
<TableColumn title='Type' dataKeys={['type', 'rawProperties.type']} />
|
||||
<TableColumn title='Location' dataKeys={['properties.location', 'rawProperties.location']} />
|
||||
{/* <TableColumn title='Realm' dataKeys={['properties.realm', 'rawProperties.realm']} /> */}
|
||||
<TableColumn title='Host' dataKey='host' />
|
||||
|
|
|
@ -123,9 +123,9 @@ class ImportICDialog extends React.Component {
|
|||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint">
|
||||
<FormGroup controlId="host">
|
||||
<FormLabel>Endpoint</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl type="text" placeholder="Enter host" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>
|
||||
|
|
|
@ -28,8 +28,10 @@ class NewICDialog extends React.Component {
|
|||
|
||||
this.state = {
|
||||
name: '',
|
||||
endpoint: '',
|
||||
uuid: ''
|
||||
host: '',
|
||||
uuid: '',
|
||||
type: '',
|
||||
category: '',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -37,14 +39,14 @@ class NewICDialog extends React.Component {
|
|||
if (canceled === false) {
|
||||
if (this.valid) {
|
||||
const data = {
|
||||
properties: {
|
||||
name: this.state.name
|
||||
},
|
||||
name: this.state.name,
|
||||
type: this.state.type,
|
||||
category: this.state.category,
|
||||
uuid: this.state.uuid
|
||||
};
|
||||
|
||||
if (this.state.endpoint != null && this.state.endpoint !== "" && this.state.endpoint !== 'http://') {
|
||||
data.properties.endpoint = this.state.endpoint;
|
||||
if (this.state.host != null && this.state.host !== "" && this.state.host !== 'http://') {
|
||||
data.host = this.state.host;
|
||||
}
|
||||
|
||||
this.props.onClose(data);
|
||||
|
@ -59,13 +61,16 @@ class NewICDialog extends React.Component {
|
|||
}
|
||||
|
||||
resetState() {
|
||||
this.setState({ name: '', endpoint: 'http://', uuid: this.uuidv4()});
|
||||
this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: ''});
|
||||
}
|
||||
|
||||
validateForm(target) {
|
||||
// check all controls
|
||||
let name = true;
|
||||
let uuid = true;
|
||||
let host = true;
|
||||
let type = true;
|
||||
let category = true;
|
||||
|
||||
if (this.state.name === '') {
|
||||
name = false;
|
||||
|
@ -75,11 +80,26 @@ class NewICDialog extends React.Component {
|
|||
uuid = false;
|
||||
}
|
||||
|
||||
this.valid = name && uuid;
|
||||
if (this.state.host === '') {
|
||||
host = false;
|
||||
}
|
||||
|
||||
if (this.state.type === '') {
|
||||
type = false;
|
||||
}
|
||||
|
||||
if (this.state.category === '') {
|
||||
category = false;
|
||||
}
|
||||
|
||||
this.valid = name && uuid && host && type && category;
|
||||
|
||||
// return state to control
|
||||
if (target === 'name') return name ? "success" : "error";
|
||||
if (target === 'uuid') return uuid ? "success" : "error";
|
||||
if (target === 'host') return host ? "success" : "error";
|
||||
if (target === 'type') return type ? "success" : "error";
|
||||
if (target === 'category') return category ? "success" : "error";
|
||||
}
|
||||
|
||||
uuidv4() {
|
||||
|
@ -94,17 +114,27 @@ class NewICDialog extends React.Component {
|
|||
return (
|
||||
<Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
|
||||
<form>
|
||||
<FormGroup controlId="name" validationState={this.validateForm('name')}>
|
||||
<FormGroup controlId="name" valid={this.validateForm('name')}>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="endpoint">
|
||||
<FormLabel>Endpoint</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter endpoint" value={this.state.endpoint} onChange={(e) => this.handleChange(e)} />
|
||||
<FormGroup controlId="host">
|
||||
<FormLabel>Host</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter host" value={this.state.host} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="uuid" validationState={this.validateForm('uuid')}>
|
||||
<FormGroup controlId="category">
|
||||
<FormLabel>Category of component (e.g. Simulator, Gateway, ...)</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter category" value={this.state.category} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="type">
|
||||
<FormLabel>Type of component (e.g. RTDS, VILLASnode, ...)</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter type" value={this.state.type} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
</FormGroup>
|
||||
<FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
|
||||
<FormLabel>UUID</FormLabel>
|
||||
<FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />
|
||||
<FormControl.Feedback />
|
||||
|
|
Loading…
Add table
Reference in a new issue