content: import React from 'react';
  import { inject, observer } from 'mobx-react';
  
  const StatusColorMapping = {
    OK: '#1C9063',
    NOT_READY: '#B43131',
    NOT_PRESENT: '#B43131',
    ERR: '#B43131',
    UNDEF: '#B43131',
  };
  
  @observer
  export default class StatusDisplay extends React.Component {
    constructor(props) {
      super(props);
  
      this.showStatusMessage = this.showStatusMessage.bind(this);
    }
  
    showStatusMessage() {
      if (this.props.status.message) {
        alert(`${this.props.title}: ${this.props.status.message}`);
      } else {
        alert(`No message from ${this.props.title}`);
      }
    }
  
    render() {
      const { title, status } = this.props;
      const status_code = status.status;
  
      return (
              <div className="status-display">
                  <div className="name">{title}</div>
                  <div className="status" onClick={this.showStatusMessage}>
                      <span>{status_code}</span>
                      <span
                          className="status-icon"
                          style={{
                            backgroundColor: StatusColorMapping[status_code],
                          }}
                      />
                  </div>
              </div>
      );
    }
  }
  