Skip to content
Snippets Groups Projects
Commit 8916d561 authored by Reinoud Bokhorst's avatar Reinoud Bokhorst
Browse files

OSB-31: child panel implementation, V2

parent ba7f9238
No related branches found
No related tags found
2 merge requests!89Monitoring maintenance Epic branch merge,!1Resolve OSB-13 "Monitoringmaintenance "
Hide whitespace changes
Inline Side-by-side
Showing
with 163 additions and 77 deletions
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestChildView.js
+ 89
− 46
View file @ 8916d561
......@@ -32,56 +32,99 @@ import classnames from 'classnames';
class StationTestChildViewC extends Component {
render(){
let renderedErrorsPerPolarization = [];
let errorDetails = [];
if(this.props.data !== null){
for(let polarization of ['X', 'Y']){
renderedErrorsPerPolarization.push(
<tr key={polarization}><th scope="row">{polarization}</th>
if (this.props.data === null) {
return <i>Hover mouse over an error</i>;
}
let renderedErrorsPerPolarization = [];
let errorDetails = [];
for(let polarization of ['X', 'Y']){
renderedErrorsPerPolarization.push(
<tr key={polarization}>
<th scope="row">{polarization}</th>
{this.props.data[polarization].map((item, key) =>
<td key={key}><Badge className='error-type-badge'>{item.error_type}</Badge></td>)}
</tr>
)
this.props.data[polarization].forEach((item, key) => {
let renderDetails = <em>see element error</em>
if(Object.keys(item.details).length> 0){
renderDetails = (
<ul style={{listStyleType: 'none'}}>
{Object.keys(item.details).map((parameter, key) =>{
const parameter_value = item.details[parameter]
const rendered_parameter = parameter === 'percentage'? parameter_value.toFixed(2) + '%' : parameter_value
return (<li key={key}>{parameter}: {rendered_parameter}</li>)
})
}
</ul>)
<td key={key}>
<Badge className='error-type-badge'>{item.error_type}</Badge>
</td>)
}
errorDetails.push(
<React.Fragment key={key + polarization}>
<div><em>{polarization} - {item.error_type}</em></div>
{renderDetails}
</React.Fragment>
)
})
}
}
const jsx = (
<div>
<h5>Errors details</h5>
<Table size='sm'>
<tbody>
{renderedErrorsPerPolarization}
</tbody>
</Table>
{errorDetails}
</div>
)
return jsx
</tr>
)
this.props.data[polarization].forEach((item, key) => {
let renderDetails = <em>see element error</em>
if(Object.keys(item.details).length> 0){
renderDetails = (
<ul style={{listStyleType: 'none'}}>
{Object.keys(item.details).map((parameter, key) =>{
const parameter_value = item.details[parameter]
const rendered_parameter = parameter === 'percentage'? parameter_value.toFixed(2) + '%' : parameter_value
return (<li key={key}>{parameter}: {rendered_parameter}</li>)
})
}
</ul>)
}
errorDetails.push(
<React.Fragment key={key + polarization}>
<div><em>{polarization} - {item.error_type}</em></div>
{renderDetails}
</React.Fragment>
)
})
}
let rows = [];
for (let polarization of ['X', 'Y']){
let d = this.props.data[polarization];
let p = polarization;
let err_types = Object.keys(d);
d.forEach((item, key) => {
let err_details = Object.keys(item.details).map((parameter, key) =>{
const parameter_value = item.details[parameter]
const rendered_parameter = parameter === 'percentage'? parameter_value.toFixed(2) + '%' : parameter_value
return (<li key={key}>{parameter}: {rendered_parameter}</li>)
});
if (err_details.length === 0) {
err_details = <li><em>see element error</em></li>;
}
rows.push(
<tr key={p}>
<th scope="row">{p}</th>
<td key={key}>
<Badge className='error-type-badge'>{item.error_type}</Badge>
</td>
<td>
<ul style={{listStyleType: 'none'}}>
{ err_details }
</ul>
</td>
</tr>
);
p = "";
});
}
return <div>
<h5>Errors details</h5>
<Table size='sm'>
<tbody>
{rows}
</tbody>
</Table>
</div>;
}
}
......
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.css
+ 16
− 1
View file @ 8916d561
......@@ -14,20 +14,35 @@
tr:hover {
background-color: #e1e1e1 !important; }
.stv-table {
font-size: .9rem; }
.stv-table.table-sm td, .stv-table.table-sm th {
padding: .1rem;
min-width: 1.8em; }
.stv-tableheader {
position: relative;
background-color: white;
text-align: center; }
.stv-rtsm-summary-row {
background-color: #eeeeee; }
.error-type-badge {
color: black !important;
font-weight: 500 !important;
background-color: #e1e1e1 !important; }
.component-status {
text-align: center;
font-size: 90%; }
.rtsm-summary-badge {
background-color: #ffcd74;
text-shadow: 1px 2px white;
font-size: 80%; }
font-size: 80%;
text-align: center; }
.line-header {
width: 12rem !important;
......
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js
+ 14
− 13
View file @ 8916d561
......@@ -65,11 +65,11 @@ class GenericStatusC extends Component {
getClass(){
switch(this.props.status){
case 'ok':
return 'so-stationtestbadge so-good'
return 'component-status so-good'
case 'error':
return 'so-stationtestbadge so-serious'
return 'component-status so-serious'
default:
return 'so-stationtestbadge so-undefined'
return 'component-status so-undefined'
}
}
......@@ -89,13 +89,13 @@ class GenericStatusC extends Component {
let jsx = "";
if (this.props.errors_per_polarization) {
jsx = <td className='component-status' onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<div className={this.getClass()}>{this.props.n_errors}</div>
jsx = <td className={this.getClass()} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
{this.props.n_errors}
</td>
}
else {
jsx = <td className='component-status'>
<div className={this.getClass()}>{this.props.n_errors}</div>
jsx = <td className={this.getClass()}>
{this.props.n_errors === 0 ? ' ' : this.props.n_errors}
</td>
}
......@@ -118,7 +118,7 @@ class StationSummaryLine extends Component {
const date = this.formatDate(this.props.data.end_date);
const jsx = (
<td className={"line-header-text"}>{this.props.test_type} {date}</td>
<td>{this.props.test_type} {date}</td>
)
return jsx
}
......@@ -199,6 +199,7 @@ class RTSMSummaryLine extends Component {
if(data[item] > 0){
return (<td key={key} className={'rtsm-summary-badge'}>{data[item].toFixed(0) + '%'} </td> );
}else{
return <td></td>;
return (<GenericStatus key={key} status={'ok'} n_errors={data[item].toFixed(0)} />);
}
})
......@@ -258,9 +259,9 @@ class RTSMSummaryLine extends Component {
if(this.state.displaySingleTests) dropdownAdditionStyles += "line-header-dropdownbutton-up"
jsx = (
<React.Fragment>
<tr>
<td className="line-header btn" onClick={this.toggleDisplaySingleTests}>
<div className="line-header-text">RT {this.renderDateRange(this.props.data)}</div>
<tr className='stv-rtsm-summary-row'>
<td className="line-header" onClick={this.toggleDisplaySingleTests}>
RT {this.renderDateRange(this.props.data)}
<DropDownIcon className={"line-header-dropdownbutton " + dropdownAdditionStyles} color="black" />
</td>
{summaryLine}</tr>
......@@ -342,8 +343,8 @@ class ComponentClass extends Component {
const rows = this.renderTestLines(this.props.data)
const jsx = (
<ReactTableContainer width="98%" height="79vh">
<table className="table-sm table-hover">
<ReactTableContainer width="100%" height="79vh">
<table className="stv-table table-sm table-hover table-bordered">
{this.renderHeader()}
<tbody>
{rows}
......
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.scss
+ 17
− 0
View file @ 8916d561
@import '../themes/lofar-variables.scss';
.component-list {
width: fit-content !important;
text-align: center;
......@@ -14,12 +15,25 @@ tr:hover {
background-color: $secondary-light !important;
}
.stv-table {
font-size: .9rem;
}
.stv-table.table-sm td, .stv-table.table-sm th {
padding: .1rem;
min-width: 1.8em;
}
.stv-tableheader {
position: relative;
background-color: white;
text-align: center;
}
.stv-rtsm-summary-row {
background-color: #eeeeee;
}
.error-type-badge {
color: black !important;
font-weight: 500 !important;
......@@ -27,12 +41,15 @@ tr:hover {
}
.component-status{
text-align: center;
font-size: 90%;
}
.rtsm-summary-badge{
background-color: $alarming;
text-shadow: 1px 2px white;
font-size: 80%;
text-align: center;
}
.line-header {
......
LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage.js
+ 27
− 17
View file @ 8916d561
import React, { Component } from 'react';
import {connect} from "react-redux";
import {Responsive, WidthProvider} from 'react-grid-layout';
import {Alert, Button, ButtonGroup} from 'reactstrap';
import {Alert, Button, ButtonGroup, Container, Row, Col} from 'reactstrap';
import { setDateRange, setTestType, setStation } from "../redux/actions/mainFiltersActions";
import DatePicker from 'react-datepicker';
import moment from 'moment';
......@@ -185,28 +185,38 @@ class StationOverviewPageC extends Component {
<ToolBar/>
{this.renderErrorIfParameterMissing()}
<ResponsiveGridLayout className="layout" layouts={this.props.layout.panels} measureBeforeMount={true}
breakpoints={this.props.layout.breakpoints} cols={this.props.layout.cols}
onResizeStop={this.props.setNewLayout}>
{createGridPanel({
key: "ul",
renderHeader: false,
title: "Station overview",
body: <StationTestView url={this.getStationSummaryURL()}/>
})}
{createGridPanel({
key: "ur",
renderHeader: false,
title: "Latest observations",
body: <StationTestChildView />
})}
</ResponsiveGridLayout>
<Container fluid={true} style={{padding: '10px'}}>
<Row>
<Col md="8"><StationTestView url={this.getStationSummaryURL()} /></Col>
<Col md="4"><StationTestChildView /></Col>
</Row>
</Container>
</React.Fragment>
);
}
}
// <ResponsiveGridLayout className="layout" layouts={this.props.layout.panels} measureBeforeMount={true}
// breakpoints={this.props.layout.breakpoints} cols={this.props.layout.cols}
// onResizeStop={this.props.setNewLayout}>
// {createGridPanel({
// key: "ul",
// renderHeader: false,
// title: "Station overview",
// body: ""
// })}
// {createGridPanel({
// key: "ur",
// renderHeader: false,
// title: "Latest observations",
// body: <StationTestChildView />
// })}
// </ResponsiveGridLayout>
const StationOverviewPage = connect(state => {
return {
...state.mainFilters,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment