OSB-13: Tiles page

.gitattributes

@@ -1976,6 +1976,11 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/com
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/index.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/components/StationTestView/styles.module.scss -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/StationOverviewPage/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.css -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.scss -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StationTestDetails/index.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StatusDetails/index.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/index.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/styles.module.scss -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaView/AntennaRTSMRows/index.js -text

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/index.js

+import React, {
+    Component
+} from 'react';
+import 'react-treeview/react-treeview.css';
+import {
+    Badge,
+    Card,
+    CardSubtitle,
+    CardBody,
+    Container,
+    Row,
+    Col
+} from 'reactstrap';
+import EnlargeableImage from 'components/EnlargeableImage'
+
+// CSS
+import styles from './styles.module.scss'
+
+
+/**
+ * RTSMDetails
+ */
+class RTSMDetails extends Component {
+
+    renderRTSMPolarizationDetails(polarization){
+        const RTSMPerPolarization = this.props.data.content[polarization];
+
+        if (!RTSMPerPolarization) {
+            return;
+        }
+
+        return (
+            <Card className={styles.rcucard}>
+                <CardBody>
+                    <CardSubtitle className={styles.header}>
+                        RCU {RTSMPerPolarization.rcu} - {polarization}
+                    </CardSubtitle>
+                    <Container>
+                        <Row noGutters={true}>
+                            <Col md="4">
+                                <Row>
+                                    <Badge color="danger">{this.props.data.error_type}</Badge>
+                                </Row>
+                                <Row>
+                                    <div>percentage: {RTSMPerPolarization.percentage.toFixed(2)} %</div>
+                                </Row>
+                                <Row>
+                                    <div>mode: {RTSMPerPolarization.mode}</div>
+                                </Row>
+                            </Col>
+                            <Col md="8">
+                                <EnlargeableImage url={RTSMPerPolarization.url} />
+                            </Col>
+                        </Row>
+                    </Container>
+                </CardBody>
+            </Card>
+        );
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                {this.renderRTSMPolarizationDetails('X')}
+                {this.renderRTSMPolarizationDetails('Y')}
+            </React.Fragment>
+        )
+
+    }
+}
+
+
+export default RTSMDetails;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.css

+/* COLORS */
+/* Color palette interface (created with https://material.io/tools/color/) */
+/* font color */
+/* font color */
+/* hover color, e.g. for background */
+/* Data colors */
+:local .rcucard {
+  margin-bottom: 1em; }

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.scss

+@import '../../../../../themes/lofar-variables.scss';
+
+
+:local .rcucard {
+    margin-bottom: 1em;
+}

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StationTestDetails/index.js

+import React, {
+    Component
+} from 'react';
+import TreeView from 'react-treeview';
+import 'react-treeview/react-treeview.css';
+import {Badge} from 'reactstrap';
+
+
+// CSS
+//import styles from './styles.module.scss'
+
+
+class StationTestDetails extends Component {
+
+    renderDetails(labelPrefix, details) {
+        if (!details) {
+            return null;
+        }
+        if (typeof details !== "object"){
+            return details;
+        }
+
+        const details_lines = [];
+
+        for (let entity_name of Object.keys(details)){
+            if (details.hasOwnProperty(entity_name)){
+                const element = details[entity_name];
+                const children = this.renderDetails("", details[entity_name]);
+
+                if (element === Object(element)){
+                    details_lines.push( <TreeView key={entity_name} nodeLabel={labelPrefix+entity_name}>
+                                            {children}
+                                        </TreeView>)
+                } else {
+                    details_lines.push( <div key={entity_name}>
+                                            {entity_name}: <em>{children}</em>
+                                        </div>)
+                }
+            }
+        }
+
+        return (
+            <React.Fragment>
+                {details_lines}
+            </React.Fragment>
+        );
+    }
+
+    renderElementErrors(){
+
+        if (!this.props.data.content.element_errors) {
+            return null;
+        }
+
+        const element_errors = this.props.data.content.element_errors;
+        const rendered_element_errors = [];
+
+        for(let element_id of Object.keys(element_errors)){
+            const element_error = (
+                <TreeView key={element_id} nodeLabel={"Element "+element_id}>
+                    {this.renderDetails("", element_errors[element_id])}
+                </TreeView>
+            );
+            rendered_element_errors.push(element_error)
+        }
+
+        return (
+            <TreeView nodeLabel="elements">
+                {rendered_element_errors}
+            </TreeView>
+        );
+    }
+
+    render() {
+        let data = this.props.data;
+        let isElement = data.hasOwnProperty('element_id')  // render element or component error type
+
+        let badge = isElement ? <Badge color="info">Element {data.element_id}</Badge> : <Badge color="danger">{data.error_type}</Badge>;
+
+        let detailsFragment = (
+            <TreeView nodeLabel="details">
+                {this.renderDetails((isElement ? "Error " : ""), data.content.details)}
+            </TreeView>
+        );
+
+        return (
+            <React.Fragment>
+                {badge}
+                {data.content.hasOwnProperty('details') ? detailsFragment : null}
+                {this.renderElementErrors()}
+            </React.Fragment>
+        );
+    }
+}
+
+
+export default StationTestDetails;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StatusDetails/index.js

+import React, {
+    Component
+} from 'react';
+import TreeView from 'react-treeview';
+import 'react-treeview/react-treeview.css';
+import {
+    Badge,
+    Card,
+    CardSubtitle,
+    CardBody,
+    Container,
+    Row,
+    Col,
+    Table
+} from 'reactstrap';
+import {formatDateUTC} from "utils/utils";
+
+// CSS
+//import styles from './styles.module.scss'
+
+
+class StatusDetails extends Component {
+
+    renderDetails(labelPrefix, details) {
+        if (!details) {
+            return null;
+        }
+        if (typeof details !== "object"){
+            return details;
+        }
+
+        const details_lines = [];
+
+        for (let entity_name of Object.keys(details)){
+            if (details.hasOwnProperty(entity_name)){
+                const element = details[entity_name];
+                const children = this.renderDetails("", details[entity_name]);
+
+                if (element === Object(element)){
+                    details_lines.push( <TreeView key={entity_name} nodeLabel={labelPrefix+entity_name}>
+                                            {children}
+                                        </TreeView>)
+                } else {
+                    details_lines.push( <div key={entity_name}>
+                                            {entity_name}: <em>{children}</em>
+                                        </div>)
+                }
+            }
+        }
+
+        return (
+            <React.Fragment>
+                {details_lines}
+            </React.Fragment>
+        );
+    }
+
+    renderElementErrors(){
+
+        if (!this.props.data.content.element_errors) {
+            return null;
+        }
+
+        const element_errors = this.props.data.content.element_errors;
+        const rendered_element_errors = [];
+
+        for(let element_id of Object.keys(element_errors)){
+            const element_error = (
+                <TreeView key={element_id} nodeLabel={"Element "+element_id}>
+                    {this.renderDetails("", element_errors[element_id])}
+                </TreeView>
+            );
+            rendered_element_errors.push(element_error)
+        }
+
+        return (
+            <TreeView nodeLabel="elements">
+                {rendered_element_errors}
+            </TreeView>
+        );
+    }
+
+    render() {
+        let content = this.props.data.content;
+
+        return (
+            <Card>
+                <CardBody>
+                    <Table borderless size="sm">
+                       <tbody>
+                           <tr><td>Component status:</td><td><Badge color="danger">{content.status}</Badge></td></tr>
+                           <tr><td>Code:</td><td>{content.status_code}</td></tr>
+                           <tr><td>Modified:</td><td>{formatDateUTC(content.last_modified)}</td></tr>
+                           <tr><td>Reason:</td><td>{content.reason}</td></tr>
+                       </tbody>
+                   </Table>
+                </CardBody>
+            </Card>
+        );
+    }
+}
+
+
+export default StatusDetails;