mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
decrease code redundancy, use exported static functions
This commit is contained in:
Sonja Happ
parent
c835d6fe0c
commit
909a6aee17
6 changed files with 49 additions and 119 deletions
|
|
@ -20,6 +20,8 @@ import {Col, Container, Row} from "react-bootstrap";
|
|||
import IconButton from "../../common/icon-button";
|
||||
import Table from '../../common/table';
|
||||
import TableColumn from '../../common/table-column';
|
||||
import { stateLabelStyle } from "../ics";
|
||||
import { refresh, ICParamsTable } from "../ic"
|
||||
|
||||
class DefaultManagerPage extends React.Component {
|
||||
|
||||
|
|
@ -31,98 +33,14 @@ class DefaultManagerPage extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let sortedICs = this.props.ics.filter(ic => ic.category !== "manager" && parseInt(ic.manager,10) === parseInt(this.props.ic.uuid,10));
|
||||
|
||||
this.setState({managedICs: sortedICs});
|
||||
}
|
||||
|
||||
static calculateState(prevState, props) {
|
||||
|
||||
|
||||
let sortedICs = props.ics.filter(ic => ic.category !== "manager" && parseInt(ic.manager,10) === parseInt(props.ic.uuid,10));
|
||||
return {
|
||||
managedICs: sortedICs
|
||||
}
|
||||
}
|
||||
|
||||
stateLabelStyle(state, component){
|
||||
var style = [ 'badge' ];
|
||||
|
||||
switch (state) {
|
||||
case 'error':
|
||||
style.push('badge-danger');
|
||||
break;
|
||||
case 'idle':
|
||||
style.push('badge-primary');
|
||||
break;
|
||||
case 'starting':
|
||||
style.push('badge-info');
|
||||
break;
|
||||
case 'running':
|
||||
style.push('badge-success');
|
||||
break;
|
||||
case 'pausing':
|
||||
style.push('badge-info');
|
||||
break;
|
||||
case 'paused':
|
||||
style.push('badge-info');
|
||||
break;
|
||||
case 'resuming':
|
||||
style.push('badge-warning');
|
||||
break;
|
||||
case 'stopping':
|
||||
style.push('badge-warning');
|
||||
break;
|
||||
case 'resetting':
|
||||
style.push('badge-warning');
|
||||
break;
|
||||
case 'shuttingdown':
|
||||
style.push('badge-warning');
|
||||
break;
|
||||
case 'shutdown':
|
||||
style.push('badge-warning');
|
||||
break;
|
||||
|
||||
default:
|
||||
style.push('badge-default');
|
||||
|
||||
/* Possible states of ICs
|
||||
* 'error': ['resetting', 'error'],
|
||||
* 'idle': ['resetting', 'error', 'idle', 'starting', 'shuttingdown'],
|
||||
* 'starting': ['resetting', 'error', 'running'],
|
||||
* 'running': ['resetting', 'error', 'pausing', 'stopping'],
|
||||
* 'pausing': ['resetting', 'error', 'paused'],
|
||||
* 'paused': ['resetting', 'error', 'resuming', 'stopping'],
|
||||
* 'resuming': ['resetting', 'error', 'running'],
|
||||
* 'stopping': ['resetting', 'error', 'idle'],
|
||||
* 'resetting': ['resetting', 'error', 'idle'],
|
||||
* 'shuttingdown': ['shutdown', 'error'],
|
||||
* 'shutdown': ['starting', 'error']
|
||||
*/
|
||||
}
|
||||
|
||||
return style.join(' ')
|
||||
}
|
||||
|
||||
stateUpdateModifier(updatedAt, component) {
|
||||
let dateFormat = 'ddd, DD MMM YYYY HH:mm:ss ZZ';
|
||||
let dateTime = moment(updatedAt, dateFormat);
|
||||
return dateTime.fromNow()
|
||||
}
|
||||
|
||||
modifyUptimeColumn(uptime, component){
|
||||
if(uptime >= 0){
|
||||
let momentDurationFormatSetup = require("moment-duration-format");
|
||||
momentDurationFormatSetup(moment)
|
||||
|
||||
let timeString = moment.duration(uptime, "seconds").humanize();
|
||||
return <span>{timeString}</span>
|
||||
}
|
||||
else{
|
||||
return <Badge variant="secondary">Unknown</Badge>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (<div className='section'>
|
||||
|
|
@ -134,7 +52,7 @@ class DefaultManagerPage extends React.Component {
|
|||
<IconButton
|
||||
childKey={2}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.props.refresh(this.props.ic, this.props.sessionToken)}
|
||||
onClick={() => refresh(this.props.ic, this.props.sessionToken)}
|
||||
icon='sync-alt'
|
||||
buttonStyle={this.props.buttonStyle}
|
||||
iconStyle={this.props.iconStyle}
|
||||
|
|
@ -145,7 +63,7 @@ class DefaultManagerPage extends React.Component {
|
|||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.ICParamsTable(this.props.ic)}
|
||||
{ICParamsTable(this.props.ic)}
|
||||
</Col>
|
||||
<Col>
|
||||
<h3>Managed ICs:</h3>
|
||||
|
|
@ -167,7 +85,7 @@ class DefaultManagerPage extends React.Component {
|
|||
title='State'
|
||||
labelKey='state'
|
||||
tooltipKey='error'
|
||||
labelStyle={(state, component) => this.stateLabelStyle(state, component)}
|
||||
labelStyle={(state, component) => stateLabelStyle(state, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
|
||||
import React from 'react';
|
||||
import {Col, Container, Row} from "react-bootstrap";
|
||||
import IconButton from "../../common/icon-button";
|
||||
import {refresh, ICParamsTable } from "../ic"
|
||||
|
||||
class DefaultICPage extends React.Component {
|
||||
|
||||
|
|
@ -26,11 +28,23 @@ class DefaultICPage extends React.Component {
|
|||
|
||||
render() {
|
||||
return (<div className='section'>
|
||||
<h1>{this.props.ic.name} </h1>
|
||||
<h1>{this.props.ic.name}
|
||||
<span className='icon-button'>
|
||||
|
||||
<IconButton
|
||||
childKey={1}
|
||||
tooltip='Refresh'
|
||||
onClick={() => refresh(this.props.ic, this.props.sessionToken)}
|
||||
icon='sync-alt'
|
||||
buttonStyle={this.props.buttonStyle}
|
||||
iconStyle={this.props.iconStyle}
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.ICParamsTable(this.props.ic)}
|
||||
{ICParamsTable(this.props.ic)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import IconButton from "../../common/icon-button";
|
|||
import ConfirmCommand from "../confirm-command";
|
||||
import FileSaver from 'file-saver';
|
||||
import AppDispatcher from "../../common/app-dispatcher";
|
||||
import { refresh, ICParamsTable, rawDataTable } from "../ic"
|
||||
|
||||
class GatewayVillasNode extends React.Component {
|
||||
|
||||
|
|
@ -78,7 +79,7 @@ class GatewayVillasNode extends React.Component {
|
|||
<IconButton
|
||||
childKey={2}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.props.refresh(this.props.ic, this.props.sessionToken)}
|
||||
onClick={() => refresh(this.props.ic, this.props.sessionToken)}
|
||||
icon='sync-alt'
|
||||
buttonStyle={this.props.buttonStyle}
|
||||
iconStyle={this.props.iconStyle}
|
||||
|
|
@ -89,7 +90,7 @@ class GatewayVillasNode extends React.Component {
|
|||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.ICParamsTable(this.props.ic)}
|
||||
{ICParamsTable(this.props.ic)}
|
||||
</Col>
|
||||
<Col>
|
||||
<div className='section-buttons-group-right'>
|
||||
|
|
@ -142,15 +143,15 @@ class GatewayVillasNode extends React.Component {
|
|||
<Row>
|
||||
<Col>
|
||||
<b>Raw Status</b>
|
||||
{this.props.rawDataTable(this.props.ic.statusupdateraw)}
|
||||
{rawDataTable(this.props.ic.statusupdateraw)}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Config</b>
|
||||
{this.props.rawDataTable(this.props.ic.statusupdateraw != null ? this.props.ic.statusupdateraw.config : null )}
|
||||
{rawDataTable(this.props.ic.statusupdateraw != null ? this.props.ic.statusupdateraw.config : null )}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Statistics</b>
|
||||
{this.props.rawDataTable(this.props.ic.statusupdateraw != null ? this.props.ic.statusupdateraw.statistics : null)}
|
||||
{rawDataTable(this.props.ic.statusupdateraw != null ? this.props.ic.statusupdateraw.statistics : null)}
|
||||
</Col>
|
||||
<Col>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
import React from 'react';
|
||||
import IconButton from "../../common/icon-button";
|
||||
import {Col, Container, Row} from "react-bootstrap";
|
||||
import { refresh, ICParamsTable, rawDataTable } from "../ic"
|
||||
|
||||
class ManagerVillasRelay extends React.Component {
|
||||
|
||||
|
|
@ -34,7 +35,7 @@ class ManagerVillasRelay extends React.Component {
|
|||
<IconButton
|
||||
childKey={2}
|
||||
tooltip='Refresh'
|
||||
onClick={() => this.props.refresh(this.props.ic, this.props.sessionToken)}
|
||||
onClick={() => refresh(this.props.ic, this.props.sessionToken)}
|
||||
icon='sync-alt'
|
||||
buttonStyle={this.props.buttonStyle}
|
||||
iconStyle={this.props.iconStyle}
|
||||
|
|
@ -45,11 +46,11 @@ class ManagerVillasRelay extends React.Component {
|
|||
<Container>
|
||||
<Row>
|
||||
<Col>
|
||||
{this.props.ICParamsTable(this.props.ic)}
|
||||
{ICParamsTable(this.props.ic)}
|
||||
</Col>
|
||||
<Col>
|
||||
<b>Raw Status</b>
|
||||
{this.props.rawDataTable(this.props.ic.statusupdateraw)}
|
||||
{rawDataTable(this.props.ic.statusupdateraw)}
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
|
|
|||
15
src/ic/ic.js
15
src/ic/ic.js
|
|
@ -164,9 +164,6 @@ class InfrastructureComponent extends React.Component {
|
|||
ic = {this.state.ic}
|
||||
currentUser = {this.state.currentUser}
|
||||
sessionToken = {this.state.sessionToken}
|
||||
ICParamsTable = {(ic) => InfrastructureComponent.ICParamsTable(ic)}
|
||||
rawDataTable = {(rawData) => InfrastructureComponent.rawDataTable(rawData)}
|
||||
refresh = {(ic, token) => InfrastructureComponent.refresh(ic, token)}
|
||||
buttonStyle = {buttonStyle}
|
||||
iconStyle = {iconStyle}
|
||||
/>
|
||||
|
|
@ -176,9 +173,6 @@ class InfrastructureComponent extends React.Component {
|
|||
ics = {this.state.ics}
|
||||
currentUser = {this.state.currentUser}
|
||||
sessionToken = {this.state.sessionToken}
|
||||
ICParamsTable = {(ic) => InfrastructureComponent.ICParamsTable(ic)}
|
||||
rawDataTable = {(rawData) => InfrastructureComponent.rawDataTable(rawData)}
|
||||
refresh = {(ic, token) => InfrastructureComponent.refresh(ic, token)}
|
||||
buttonStyle = {buttonStyle}
|
||||
iconStyle = {iconStyle}
|
||||
/>
|
||||
|
|
@ -188,16 +182,14 @@ class InfrastructureComponent extends React.Component {
|
|||
ics = {this.state.ics}
|
||||
currentUser = {this.state.currentUser}
|
||||
sessionToken = {this.state.sessionToken}
|
||||
ICParamsTable = {(ic) => InfrastructureComponent.ICParamsTable(ic)}
|
||||
rawDataTable = {(rawData) => InfrastructureComponent.rawDataTable(rawData)}
|
||||
refresh = {(ic, token) => InfrastructureComponent.refresh(ic, token)}
|
||||
buttonStyle = {buttonStyle}
|
||||
iconStyle = {iconStyle}
|
||||
/>
|
||||
}else {
|
||||
page = <DefaultICPage
|
||||
ic = {this.state.ic}
|
||||
ICParamsTable = {(ic) => InfrastructureComponent.ICParamsTable(ic)}
|
||||
buttonStyle = {buttonStyle}
|
||||
iconStyle = {iconStyle}
|
||||
/>
|
||||
}
|
||||
return page
|
||||
|
|
@ -206,3 +198,6 @@ class InfrastructureComponent extends React.Component {
|
|||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default FluxContainer.create(fluxContainerConverter.convert(InfrastructureComponent), { withProps: true });
|
||||
export const refresh = InfrastructureComponent.refresh;
|
||||
export const ICParamsTable = InfrastructureComponent.ICParamsTable;
|
||||
export const rawDataTable = InfrastructureComponent.rawDataTable;
|
||||
|
|
|
|||
|
|
@ -270,8 +270,8 @@ class InfrastructureComponents extends Component {
|
|||
return Date.now() - new Date(component.stateUpdateAt) > fiveMinutes;
|
||||
}
|
||||
|
||||
stateLabelStyle(state, component){
|
||||
var style = [ 'badge' ];
|
||||
static stateLabelStyle(state, component){
|
||||
let style = [ 'badge' ];
|
||||
|
||||
if (InfrastructureComponents.isICOutdated(component) && state !== 'shutdown') {
|
||||
style.push('badge-outdated');
|
||||
|
|
@ -333,13 +333,13 @@ class InfrastructureComponents extends Component {
|
|||
return style.join(' ')
|
||||
}
|
||||
|
||||
stateUpdateModifier(updatedAt, component) {
|
||||
static stateUpdateModifier(updatedAt, component) {
|
||||
let dateFormat = 'ddd, DD MMM YYYY HH:mm:ss ZZ';
|
||||
let dateTime = moment(updatedAt, dateFormat);
|
||||
return dateTime.fromNow()
|
||||
}
|
||||
|
||||
modifyUptimeColumn(uptime, component){
|
||||
static modifyUptimeColumn(uptime, component){
|
||||
if(uptime >= 0){
|
||||
let momentDurationFormatSetup = require("moment-duration-format");
|
||||
momentDurationFormatSetup(moment)
|
||||
|
|
@ -352,7 +352,7 @@ class InfrastructureComponents extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
isLocalIC(index, ics){
|
||||
static isLocalIC(index, ics){
|
||||
let ic = ics[index]
|
||||
return !ic.managedexternally
|
||||
}
|
||||
|
|
@ -364,7 +364,7 @@ class InfrastructureComponents extends Component {
|
|||
<Table data={ics}>
|
||||
<TableColumn
|
||||
checkbox
|
||||
checkboxDisabled={(index) => this.isLocalIC(index, ics) === true}
|
||||
checkboxDisabled={(index) => InfrastructureComponents.isLocalIC(index, ics) === true}
|
||||
onChecked={(ic, event) => this.onICChecked(ic, event)}
|
||||
width='30'
|
||||
/>
|
||||
|
|
@ -385,7 +385,7 @@ class InfrastructureComponents extends Component {
|
|||
title='State'
|
||||
labelKey='state'
|
||||
tooltipKey='error'
|
||||
labelStyle={(state, component) => this.stateLabelStyle(state, component)}
|
||||
labelStyle={(state, component) => InfrastructureComponents.stateLabelStyle(state, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Type'
|
||||
|
|
@ -394,12 +394,12 @@ class InfrastructureComponents extends Component {
|
|||
<TableColumn
|
||||
title='Uptime'
|
||||
dataKey='uptime'
|
||||
modifier={(uptime, component) => this.modifyUptimeColumn(uptime, component)}
|
||||
modifier={(uptime, component) => InfrastructureComponents.modifyUptimeColumn(uptime, component)}
|
||||
/>
|
||||
<TableColumn
|
||||
title='Last Update'
|
||||
dataKey='stateUpdateAt'
|
||||
modifier={(stateUpdateAt, component) => this.stateUpdateModifier(stateUpdateAt, component)}
|
||||
modifier={(stateUpdateAt, component) => InfrastructureComponents.stateUpdateModifier(stateUpdateAt, component)}
|
||||
/>
|
||||
|
||||
{this.state.currentUser.role === "Admin" ?
|
||||
|
|
@ -407,10 +407,10 @@ class InfrastructureComponents extends Component {
|
|||
width='150'
|
||||
align='right'
|
||||
editButton
|
||||
showEditButton ={(index) => this.isLocalIC(index, ics)}
|
||||
showEditButton ={(index) => InfrastructureComponents.isLocalIC(index, ics)}
|
||||
exportButton
|
||||
deleteButton
|
||||
showDeleteButton = {(index) => this.isLocalIC(index, ics)}
|
||||
showDeleteButton = {(index) => InfrastructureComponents.isLocalIC(index, ics)}
|
||||
onEdit={index => 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})}
|
||||
|
|
@ -508,3 +508,4 @@ class InfrastructureComponents extends Component {
|
|||
|
||||
let fluxContainerConverter = require('../common/FluxContainerConverter');
|
||||
export default Container.create(fluxContainerConverter.convert(InfrastructureComponents));
|
||||
export const stateLabelStyle = InfrastructureComponents.stateLabelStyle;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue