mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Revise IC table; move details to IC dialog; disable checkbox for non-external ICs
This commit is contained in:
Sonja Happ
parent
cdb8cdf672
commit
859fed46c0
3 changed files with 131 additions and 77 deletions
|
|
@ -58,7 +58,7 @@ class CustomTable extends Component {
|
|||
|
||||
const modifier = child.props.modifier;
|
||||
if (modifier && content != null) {
|
||||
content = modifier(content);
|
||||
content = modifier(content, data);
|
||||
}
|
||||
|
||||
let cell = [];
|
||||
|
|
@ -71,7 +71,7 @@ class CustomTable extends Component {
|
|||
cell.push(<Link to={child.props.link + data[linkKey]}>{content}</Link>);
|
||||
} else if (child.props.clickable) {
|
||||
cell.push(<Button variant="link" onClick={() => child.props.onClick(index)}>{content}</Button>);
|
||||
} else if (linkKey == 'filebuttons') {
|
||||
} else if (linkKey === 'filebuttons') {
|
||||
content.forEach(element => {
|
||||
cell.push(<OverlayTrigger key={element} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"export"}`}>Download {element}</Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDownload(element)} disabled={child.props.onDownload == null}>{element + ' ' }
|
||||
|
|
@ -117,7 +117,14 @@ class CustomTable extends Component {
|
|||
if (child.props.checkbox) {
|
||||
const checkboxKey = child.props.checkboxKey;
|
||||
|
||||
cell.push(<FormCheck className="table-control-checkbox" inline checked={checkboxKey ? data[checkboxKey] : null} onChange={e => child.props.onChecked(index, e)} />);
|
||||
cell.push(
|
||||
<FormCheck
|
||||
className="table-control-checkbox"
|
||||
inline
|
||||
disabled = {!data.managedexternally}
|
||||
checked={checkboxKey ? data[checkboxKey] : null}
|
||||
onChange={e => child.props.onChecked(index, e)}
|
||||
/>);
|
||||
}
|
||||
|
||||
if (child.props.exportButton) {
|
||||
|
|
|
|||
|
|
@ -68,8 +68,28 @@ class ICDialog extends React.Component {
|
|||
<form>
|
||||
<Row>
|
||||
<Col>
|
||||
<h5>Status:</h5>
|
||||
<h5>State: {this.props.ic.state}</h5>
|
||||
<h5>Category: {this.props.ic.category}</h5>
|
||||
<h5>Type: {this.props.ic.type}</h5>
|
||||
<h5>Uptime: {this.props.ic.uptime}</h5>
|
||||
<h5>Location: {this.props.ic.location}</h5>
|
||||
<h5>Description: {this.props.ic.description}</h5>
|
||||
<h5>Websocket URL: {this.props.ic.websocketurl}</h5>
|
||||
<h5>API URL: {this.props.ic.apiurl}</h5>
|
||||
<h5>Start parameter scheme:</h5>
|
||||
<ReactJson
|
||||
src={this.props.ic.startParameterScheme}
|
||||
name={false}
|
||||
displayDataTypes={false}
|
||||
displayObjectSize={false}
|
||||
enableClipboard={false}
|
||||
collapsed={0}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col>
|
||||
|
||||
<h5>Raw Status:</h5>
|
||||
<ReactJson
|
||||
src={this.props.ic.statusupdateraw}
|
||||
name={false}
|
||||
|
|
@ -79,37 +99,36 @@ class ICDialog extends React.Component {
|
|||
collapsed={1}
|
||||
/>
|
||||
|
||||
</Col>
|
||||
{this.props.ic.type === "villas-node" || this.props.ic.type === "villas-relay" ? (
|
||||
<>
|
||||
<div className='section-buttons-group-right'>
|
||||
<Button style={{margin: '5px'}} size='sm' onClick={() => this.downloadGraph(graphURL)}><Icon
|
||||
icon="download"/></Button>
|
||||
</div>
|
||||
<h5>Graph:</h5>
|
||||
<div>
|
||||
<img alt={"Graph image download failed and/or incorrect image API URL"} src={graphURL}/>
|
||||
</div>
|
||||
|
||||
{this.props.ic.type === "villas-node" || this.props.ic.type === "villas-relay" ? (
|
||||
<Col>
|
||||
<div className='section-buttons-group-right'>
|
||||
<Button style={{margin: '5px'}} size='sm' onClick={() => this.downloadGraph(graphURL)}><Icon
|
||||
icon="download"/></Button>
|
||||
</div>
|
||||
<h5>Graph:</h5>
|
||||
<div>
|
||||
<img alt={"Graph image download failed and/or incorrect image URL"} src={graphURL}/>
|
||||
</div>
|
||||
|
||||
{this.props.userRole === "Admin" ? (
|
||||
<div>
|
||||
<h5>Controls:</h5>
|
||||
{this.props.userRole === "Admin" ? (
|
||||
<div>
|
||||
<Button style={{margin: '5px'}} size='lg'
|
||||
onClick={() => this.setState({confirmCommand: true, command: 'restart'})}>Restart</Button>
|
||||
<Button style={{margin: '5px'}} size='lg' onClick={() => this.setState({
|
||||
confirmCommand: true,
|
||||
command: 'shutdown'
|
||||
})}>Shutdown</Button>
|
||||
</div>
|
||||
</div>)
|
||||
: (<div/>)}
|
||||
<h5>Controls:</h5>
|
||||
<div>
|
||||
<Button style={{margin: '5px'}} size='lg'
|
||||
onClick={() => this.setState({confirmCommand: true, command: 'restart'})}>Restart</Button>
|
||||
<Button style={{margin: '5px'}} size='lg' onClick={() => this.setState({
|
||||
confirmCommand: true,
|
||||
command: 'shutdown'
|
||||
})}>Shutdown</Button>
|
||||
</div>
|
||||
</div>)
|
||||
: (<div/>)}
|
||||
|
||||
<ConfirmCommand show={this.state.confirmCommand} command={this.state.command} name={this.props.ic.name}
|
||||
onClose={c => this.closeConfirmModal(c)}/>
|
||||
</Col>
|
||||
): (<div/>)}
|
||||
<ConfirmCommand show={this.state.confirmCommand} command={this.state.command} name={this.props.ic.name}
|
||||
onClose={c => this.closeConfirmModal(c)}/>
|
||||
|
||||
</>) : (<div/>)}
|
||||
</Col>
|
||||
</Row>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
|
|
|||
118
src/ic/ics.js
118
src/ic/ics.js
|
|
@ -74,9 +74,18 @@ class InfrastructureComponents extends Component {
|
|||
}
|
||||
});
|
||||
|
||||
let externalICs = ics.find(ic => ic.managedexternally === true)
|
||||
|
||||
let numberOfExternalICs = 0
|
||||
if (externalICs !== undefined && !Array.isArray(externalICs)) {
|
||||
externalICs = [externalICs];
|
||||
numberOfExternalICs = externalICs.length;
|
||||
}
|
||||
|
||||
return {
|
||||
sessionToken: localStorage.getItem("token"),
|
||||
ics: ics,
|
||||
numberOfExternalICs,
|
||||
modalIC: {},
|
||||
deleteModal: false,
|
||||
icModal: false,
|
||||
|
|
@ -305,13 +314,13 @@ class InfrastructureComponents extends Component {
|
|||
return style.join(' ')
|
||||
}
|
||||
|
||||
stateUpdateModifier(updatedAt) {
|
||||
stateUpdateModifier(updatedAt, component) {
|
||||
let dateFormat = 'ddd, DD MMM YYYY HH:mm:ss ZZ';
|
||||
let dateTime = moment(updatedAt, dateFormat);
|
||||
return dateTime.fromNow()
|
||||
}
|
||||
|
||||
modifyManagedExternallyColumn(managedExternally){
|
||||
modifyManagedExternallyColumn(managedExternally, component){
|
||||
|
||||
if(managedExternally){
|
||||
return <Icon icon='check' />
|
||||
|
|
@ -321,7 +330,7 @@ class InfrastructureComponents extends Component {
|
|||
|
||||
}
|
||||
|
||||
modifyUptimeColumn(uptime){
|
||||
modifyUptimeColumn(uptime, component){
|
||||
if(uptime >= 0){
|
||||
return <span>{uptime + "s"}</span>
|
||||
}
|
||||
|
|
@ -330,20 +339,13 @@ class InfrastructureComponents extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
modifyNameColumn(name){
|
||||
let ic = this.state.ics.find(ic => ic.name === name);
|
||||
|
||||
if(ic.type === "villas-node" || ic.type === "villas-relay" || ic.managedexternally){
|
||||
return <Button variant="link" onClick={() => this.openICStatus(ic)}>{name}</Button> }
|
||||
else{
|
||||
return <span>{name}</span>
|
||||
}
|
||||
modifyNameColumn(name, component){
|
||||
let index = this.state.ics.indexOf(component);
|
||||
return <Button variant="link" style={{color: '#047cab'}} onClick={() => this.openICStatus(component)}>{name}</Button>
|
||||
}
|
||||
|
||||
openICStatus(ic){
|
||||
|
||||
let index = this.state.ics.indexOf(ic);
|
||||
|
||||
this.setState({ icModal: true, modalIC: ic, modalIndex: index })
|
||||
}
|
||||
|
||||
|
|
@ -366,36 +368,70 @@ class InfrastructureComponents extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
const buttonStyle = {
|
||||
marginLeft: '10px'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='section'>
|
||||
<h1>Infrastructure Components</h1>
|
||||
|
||||
<h1>Infrastructure Components
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
(<span>
|
||||
<Button onClick={() => this.setState({newModal: true})} style={buttonStyle}><Icon icon="plus"
|
||||
/></Button>
|
||||
<Button onClick={() => this.setState({importModal: true})} style={buttonStyle}><Icon icon="upload"
|
||||
/></Button>
|
||||
</span>)
|
||||
:
|
||||
(<span> </span>)
|
||||
}
|
||||
</h1>
|
||||
<Table data={this.state.ics}>
|
||||
<TableColumn checkbox onChecked={(index, event) => this.onICChecked(index, event)} width='30' />
|
||||
<TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} modifier={(name) => this.modifyNameColumn(name)}/>
|
||||
<TableColumn title='State' labelKey='state' tooltipKey='error' labelStyle={(state, component) => this.stateLabelStyle(state, component)} />
|
||||
<TableColumn title='Category' dataKeys={['category', 'rawProperties.category']} />
|
||||
<TableColumn title='Type' dataKeys={['type', 'rawProperties.type']} />
|
||||
<TableColumn title='Managed externally' dataKey='managedexternally' modifier={(managedexternally) => this.modifyManagedExternallyColumn(managedexternally)} width='105' />
|
||||
<TableColumn title='Uptime' dataKey='uptime' modifier={(uptime) => this.modifyUptimeColumn(uptime)}/>
|
||||
<TableColumn title='Location' dataKey='location' />
|
||||
{/* <TableColumn title='Realm' dataKeys={['properties.realm', 'rawProperties.realm']} /> */}
|
||||
<TableColumn title='WebSocket URL' dataKey='websocketurl' />
|
||||
<TableColumn title='API URL' dataKey='apiurl' />
|
||||
<TableColumn title='Last Update' dataKey='stateUpdateAt' modifier={(stateUpdateAt) => this.stateUpdateModifier(stateUpdateAt)} />
|
||||
<TableColumn
|
||||
checkbox
|
||||
onChecked={(index, event) => this.onICChecked(index, event)}
|
||||
width='30'
|
||||
/>
|
||||
<TableColumn
|
||||
title='Name'
|
||||
dataKeys={['name']}
|
||||
modifier={(name, component) => this.modifyNameColumn(name, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='State'
|
||||
labelKey='state'
|
||||
tooltipKey='error'
|
||||
labelStyle={(state, component) => this.stateLabelStyle(state, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Category'
|
||||
dataKeys={['category']}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
dataKeys={['type']}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Uptime'
|
||||
dataKey='uptime'
|
||||
modifier={(uptime, component) => this.modifyUptimeColumn(uptime, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Last Update'
|
||||
dataKey='stateUpdateAt'
|
||||
modifier={(stateUpdateAt, component) => this.stateUpdateModifier(stateUpdateAt, component)}
|
||||
/>
|
||||
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<TableColumn
|
||||
width='200'
|
||||
editButton
|
||||
exportButton
|
||||
deleteButton
|
||||
onEdit={index => this.setState({ editModal: true, modalIC: this.state.ics[index], modalIndex: index })}
|
||||
onEdit={index => 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 })}
|
||||
onDelete={index => this.setState({deleteModal: true, modalIC: this.state.ics[index], modalIndex: index})}
|
||||
/>
|
||||
:
|
||||
<TableColumn
|
||||
|
|
@ -405,29 +441,21 @@ class InfrastructureComponents extends Component {
|
|||
/>
|
||||
}
|
||||
</Table>
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<div style={{ float: 'left' }}>
|
||||
|
||||
{this.state.currentUser.role === "Admin" && this.state.numberOfExternalICs > 0 ?
|
||||
<div style={{float: 'left'}}>
|
||||
<ICAction
|
||||
runDisabled={this.state.selectedICs.length === 0}
|
||||
runAction={action => this.runAction(action)}
|
||||
actions={[
|
||||
{ id: '-1', title: 'Select command', data: { action: 'none' } },
|
||||
{ id: '0', title: 'Reset', data: { action: 'reset' } },
|
||||
{ id: '1', title: 'Shutdown', data: { action: 'shutdown' } },
|
||||
]}
|
||||
{id: '-1', title: 'Select command', data: {action: 'none'}},
|
||||
{id: '0', title: 'Reset', data: {action: 'reset'}},
|
||||
{id: '1', title: 'Shutdown', data: {action: 'shutdown'}},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div> </div>
|
||||
}
|
||||
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
<div style={{ float: 'right' }}>
|
||||
<Button onClick={() => this.setState({ newModal: true })} style={buttonStyle}><Icon icon="plus" /> Infrastructure Component</Button>
|
||||
<Button onClick={() => this.setState({ importModal: true })} style={buttonStyle}><Icon icon="upload" /> Import</Button>
|
||||
</div>
|
||||
:
|
||||
<div> </div>
|
||||
<div/>
|
||||
}
|
||||
|
||||
<div style={{ clear: 'both' }} />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue