Isolating message list styling changes to extended search. (Graylog2/…

…graylog-plugin-enterprise#265)

In 28ee69b43f0906e0a1241f5aba568c1ed427e42f stylings were introduced which change the look of the message table widget globally (on the current and the new search page).

This PR is reverting this by isolating styling changes to the new search only.

Fixes Graylog2/graylog-plugin-enterprise#254.

enterprise/src/web/enterprise/ExtendedSearchPage.css

@@ -55,19 +55,3 @@ dl.message-details-fields {
 dl.message-details-fields dd {
     font-family: monospace;
 }
-
-/* the !important can go away when we removed the old search page and its stylesheet */
-table.messages thead th, table.messages thead  {
-    background-color: #eee !important;
-    color: #333;
-    border-bottom: 1px solid
-}
-
-/* the !important can go away when we removed the old search page and its stylesheet */
-table.messages {
-    margin-top: 0 !important;
-}
-
-#message-table-paginator-top {
-    margin-bottom: 12px;
-}

enterprise/src/web/enterprise/components/widgets/MessageList.css

@@ -0,0 +1,7 @@
+:local(.messageListTableHeader) table.messages thead th, :local(.messageListTableHeader) table.messages thead {
+    background-color: #eee;
+    color: #333;
+}
+:local(.messageListPaginator) #message-table-paginator-top {
+    margin-bottom: 12px;
+}

enterprise/src/web/enterprise/components/widgets/MessageList.jsx

@@ -16,6 +16,8 @@ import { SearchConfigStore } from 'enterprise/stores/SearchConfigStore';
 import FieldType from '../../logic/fieldtypes/FieldType';
 import { StreamsStore } from 'enterprise/stores/StreamsStore';
 
+import styles from './MessageList.css';
+
 const { InputsActions, InputsStore } = CombinedProvider.get('Inputs');
 const { NodesStore } = CombinedProvider.get('Nodes');
 const { RefreshActions } = CombinedProvider.get('Refresh');
@@ -130,23 +132,25 @@ const MessageList = createReactClass({
     const allStreams = Immutable.List(streams);
     return (
       <span>
-        <MessageTablePaginator currentPage={Number(this.state.currentPage)}
-          onPageChange={newPage => this.setState({ currentPage: newPage })}
-          pageSize={pageSize}
-          position="top"
-          resultCount={messages.length} />
+        <div className={styles.messageListPaginator}>
+          <MessageTablePaginator currentPage={Number(this.state.currentPage)}
+            onPageChange={newPage => this.setState({ currentPage: newPage })}
+            pageSize={pageSize}
+            position="top"
+            resultCount={messages.length} />
+        </div>
 
         <div className="search-results-table" style={{ overflow: 'auto', height: '100%' }}>
           <div className="table-responsive">
-            <div className="messages-container">
-              <table className="table table-condensed messages">
+            <div className={`messages-container ${styles.messageListTableHeader}`}>
+              <table className="table table-condensed messages" style={{ marginTop: 0 }}>
                 <thead>
                   <tr>
                     <th style={{ width: 180 }}><Field interactive name="Timestamp" queryId={activeQuery} type={this._fieldTypeFor('timestamp', fields)} /></th>
                     {selectedColumns.toSeq().map((selectedFieldName) => {
                       return (
                         <th key={selectedFieldName}
-                          style={this._columnStyle(selectedFieldName)}>
+                            style={this._columnStyle(selectedFieldName)}>
                           <Field interactive
                                  type={this._fieldTypeFor(selectedFieldName, fields)}
                                  name={selectedFieldName}