diff --git a/.gitattributes b/.gitattributes
index 9833032bd8e261980d6506224dfaa9883798ffb8..fa8e1df5f990c6ee47e8a0ae4e855230e61cf344 100644
--- a/.gitattributes
+++ b/.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
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..29b67fcc37e4cc231d443527b5658ae6421bde83
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/index.js
@@ -0,0 +1,73 @@
+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;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..00453a35f9c68c56d0bf1fb09e5ca06f1fdd05ec
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.css
@@ -0,0 +1,8 @@
+/* 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; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2658a991190b42fdc496cc30276f4e05ab5682be
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/RTSMDetails/styles.module.scss
@@ -0,0 +1,6 @@
+@import '../../../../../themes/lofar-variables.scss';
+
+
+:local .rcucard {
+ margin-bottom: 1em;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StationTestDetails/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StationTestDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..58be696aa22a4e439c545d15525989f1276fc14e
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StationTestDetails/index.js
@@ -0,0 +1,97 @@
+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;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StatusDetails/index.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StatusDetails/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3f381fa4e34558803af1f35e33b5dd3e10e04ae
--- /dev/null
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/TilesPage/components/AntennaErrorDetails/StatusDetails/index.js
@@ -0,0 +1,104 @@
+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;