1
0
Fork 0
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:
Sonja Happ 2020-03-20 12:51:28 +01:00
parent 58809e3e41
commit 1fdef9b404
4 changed files with 93 additions and 35 deletions

View file

@ -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>

View file

@ -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' />

View file

@ -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')}>

View file

@ -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 />