Improve the history UI.

web/pgadmin/static/jsx/history/detail/history_error_message.jsx

@@ -0,0 +1,30 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2017, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////////////////
+
+import React from 'react';
+
+import Shapes from '../../react_shapes';
+
+export default class HistoryErrorMessage extends React.Component {
+
+  parseErrorMessage(message) {
+    return message.match(/ERROR:\s*([^\n\r]*)/i)[1];
+  }
+
+  render() {
+    return (
+      <div className='history-error-text'>
+        <span>Error Message</span> {this.parseErrorMessage(this.props.historyEntry.message)}
+      </div>);
+  }
+}
+
+HistoryErrorMessage.propTypes = {
+  historyEntry: Shapes.historyDetail,
+};

web/pgadmin/static/jsx/history/query_history_detail.jsx

@@ -11,14 +11,23 @@ import React from 'react';
 import HistoryDetailMetadata from './detail/history_detail_metadata';
 import HistoryDetailQuery from './detail/history_detail_query';
 import HistoryDetailMessage from './detail/history_detail_message';
+import HistoryErrorMessage from './detail/history_error_message';
 import Shapes from '../react_shapes';
 
 export default class QueryHistoryDetail extends React.Component {
 
   render() {
     if (!_.isUndefined(this.props.historyEntry)) {
+      let historyErrorMessage = null;
+      if (!this.props.historyEntry.status) {
+        historyErrorMessage = <div className='error-message-block'>
+          <HistoryErrorMessage {...this.props} />
+        </div>;
+      }
+
       return (
         <div id='query_detail' className='query-detail'>
+          {historyErrorMessage}
           <div className='metadata-block'>
             <HistoryDetailMetadata {...this.props} />
           </div>