Skip to content

Commit

Permalink
Isolating message list styling changes to extended search. (Graylog2/…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
dennisoelkers committed Jun 11, 2019
1 parent 60677c6 commit 7bfbd26
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 24 deletions.
16 changes: 0 additions & 16 deletions enterprise/src/web/enterprise/ExtendedSearchPage.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
}
20 changes: 12 additions & 8 deletions enterprise/src/web/enterprise/components/widgets/MessageList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 7bfbd26

Please sign in to comment.