OSB-31: add link to the inspection plot page

.gitattributes

@@ -1853,6 +1853,7 @@ LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.scss -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js -text
+LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/ObservationInspectTag.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.css -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.js -text
 LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationAutoComplete.scss -text

LCU/Maintenance/MDB_WebView/maintenancedb_view/package.json

@@ -31,6 +31,7 @@
     "react-dom": "^16.4.2",
     "react-grid-layout": "^0.16.6",
     "react-icons": "^3.2.2",
+    "react-popout": "^1.0.1",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/LatestObservations.js

@@ -4,7 +4,7 @@ import { unique_id } from '../utils/utils.js'
 import AutoLoadWrapper from '../utils/autoLoader.js'
 import * as moment from 'moment';
 import { datetime_format } from '../utils/constants'
-
+import ObservationInspectTag from './ObservationInspectTag.js'
 // CSS
 import './LatestObservations.css'
 
@@ -58,12 +58,13 @@ class SORow extends Component {
             </tr>);
         return (
             <tr id={this.id}  className="hoverable">
-                <th scope="row">{ this.renderObservationID() }</th>
+
+                <ObservationInspectTag observationId={this.props.data.observation_id} />
                 <td>{ moment.utc(start_datetime).format(datetime_format) }</td>
                 <td>{ station_involved_list.length }</td>
                 <td>{ this.renderStationsWithProblems(station_involved_list) }</td>
                 <td>{ total_component_errors }</td>
-
+                
                 <Tooltip placement="auto" isOpen={this.state.popoverOpen}
                     target={this.id }
                     toggle={this.togglePopover}

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/ObservationInspectTag.js

+import React, { Component } from 'react';
+import { getInspectPageURLFromSASid } from '../utils/LOFARDefinitions.js'
+
+class ObservationInspectTag extends Component {
+
+    clicked = () => {
+        const url = getInspectPageURLFromSASid(this.props.observationId)
+        window.open(url)
+    }
+
+    render () {
+        const observationId = this.props.observationId;
+        return (
+            <div onClick={this.clicked} style={{fontWeight:'600'}}>{observationId}</div>
+        )
+    }
+}
+export default ObservationInspectTag;

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationTestView.js

@@ -24,7 +24,6 @@ import '../themes/lofar-styles.css'
 import './StationOverview.css'
 import './StationTestView.css'
 
-
 function antennaNumberFromRCUID(rcuID, componentType) {
     if (componentType === "LBH" || componentType === "HBA") {
         const result = {}

LCU/Maintenance/MDB_WebView/maintenancedb_view/src/utils/LOFARDefinitions.js

@@ -22,3 +22,8 @@ export function stationTypeFromName(stationName){
   if(stationName.includes('RS')) return 'R';
   return 'I'
 }
+
+export function getInspectPageURLFromSASid(sasId){
+  const url =`https://proxy.lofar.eu/inspect/HTML/${sasId}/index.html`
+  return url
+}