Skip to content

Commit

Permalink
Display only name instead of name with link for node in message detai…
Browse files Browse the repository at this point in the history 
…ls. (#20505)

* Fixing node details in message details on input extractor page.

* Display only name instead of name with link for node in message details.

* Use `NodeName` component for message details on input extractor page.

* Adding changelog
  • Loading branch information
@linuspahl
linuspahl authored Sep 23, 2024
1 parent f30cc1a commit ce77278
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 60 deletions.
5 changes: 5 additions & 0 deletions changelog/unreleased/issue-20464.toml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
type="f"
message="In cloud env display only node name instead of name with link in message details on the search page."

issues=["20464"]
pulls=["20505"]
38 changes: 5 additions & 33 deletions graylog2-web-interface/src/components/search/MessageDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ import StreamLink from 'components/streams/StreamLink';
import MessageFields from 'components/search/MessageFields';
import MessageDetailsTitle from 'components/search/MessageDetailsTitle';
import Routes from 'routing/Routes';
import AppConfig from 'util/AppConfig';
import MessagePermalinkButton from 'views/components/common/MessagePermalinkButton';
import type { Message } from 'views/components/messagelist/Types';
import type { Stream } from 'views/stores/StreamsStore';
import type { Input } from 'components/messageloaders/Types';
import NodeName from 'views/components/messagelist/NodeName';

const Span = styled.span`
word-break: break-word;
Expand All @@ -49,32 +49,6 @@ const InputName = ({ inputs, inputId }: { inputs: Immutable.Map<string, Input> |
return input ? <Span>{input.title}</Span> : <>deleted input</>;
};

const NodeName = ({ nodes, nodeId }: { nodes: Immutable.Map<string, { short_node_id: string, hostname: string }> | undefined, nodeId: string }) => {
const node = nodes?.get(nodeId);
let nodeInformation;

if (node) {
const nodeURL = Routes.node(nodeId);

const nodeContent = (
<>
<Icon name="fork_right" />
&nbsp;
<Span>{node.short_node_id}</Span>&nbsp;/&nbsp;
<Span>{node.hostname}</Span>
</>
);

nodeInformation = AppConfig.isCloud()
? nodeContent
: <a href={nodeURL}>{nodeContent}</a>;
} else {
nodeInformation = <Span>stopped node</Span>;
}

return nodeInformation;
};

const StreamLinks = ({ messageStreams, streamIds, streams }: {
messageStreams: Array<Stream>,
streamIds: Immutable.Set<string>,
Expand All @@ -100,13 +74,12 @@ const StreamLinks = ({ messageStreams, streamIds, streams }: {
type Props = {
message: Message & { streams?: Array<Stream> },
inputs?: Immutable.Map<string, Input>,
nodes?: Immutable.Map<string, { short_node_id: string, hostname: string }>,
streams?: Immutable.Map<string, Stream>,
renderForDisplay: (fieldName: string) => React.ReactNode,
customFieldActions?: React.ReactNode
}

const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, customFieldActions }: Props) => {
const MessageDetail = ({ renderForDisplay, inputs, streams, message, customFieldActions }: Props) => {
const streamIds = Immutable.Set(message.stream_ids);
const rawTimestamp = message.fields.timestamp;
const timestamp = [
Expand Down Expand Up @@ -136,20 +109,20 @@ const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, cust
<Col md={3}>
<MessageDetailsDefinitionList>
{timestamp}
{(message.source_input_id && message.source_node_id && nodes) && (
{(message.source_input_id && message.source_node_id) && (
<div>
<dt>Received by</dt>
<dd>
<em><InputName inputs={inputs} inputId={message.source_input_id} /></em>{' '}
on <NodeName nodes={nodes} nodeId={message.source_node_id} />
on <NodeName nodeId={message.source_node_id} />

{/* Legacy */}
{message.source_radio_id && (
<>
<br />
<span>
via <em><InputName inputs={inputs} inputId={message.source_radio_input_id} /></em> on
radio <NodeName nodes={nodes} nodeId={message.source_radio_id} />
radio <NodeName nodeId={message.source_radio_id} />
</span>
</>
)}
Expand Down Expand Up @@ -186,7 +159,6 @@ const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, cust

MessageDetail.defaultProps = {
inputs: undefined,
nodes: undefined,
streams: undefined,
customFieldActions: undefined,
};
Expand Down
15 changes: 7 additions & 8 deletions graylog2-web-interface/src/components/search/MessageShow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ import StringUtils from 'util/StringUtils';

import MessageDetail from './MessageDetail';

const getImmutableProps = (props) => ({
streams: props.streams ? Immutable.Map(props.streams) : props.streams,
});

class MessageShow extends React.Component {
static propTypes = {
message: PropTypes.object.isRequired,
Expand All @@ -40,18 +44,14 @@ class MessageShow extends React.Component {
constructor(props) {
super(props);

this.state = this._getImmutableProps(props);
this.state = getImmutableProps(props);
}

UNSAFE_componentWillReceiveProps(nextProps) {
this.setState(this._getImmutableProps(nextProps));
this.setState(getImmutableProps(nextProps));
}

// eslint-disable-next-line class-methods-use-this
_getImmutableProps = (props) => ({
streams: props.streams ? Immutable.Map(props.streams) : props.streams,
nodes: props.nodes ? Immutable.Map(props.nodes) : props.nodes,
});

renderForDisplay = (fieldName) => {
// No highlighting for the message details view.
Expand All @@ -62,7 +62,7 @@ class MessageShow extends React.Component {

render() {
const { inputs, message } = this.props;
const { streams, nodes } = this.state;
const { streams } = this.state;

return (
<Row className="content">
Expand All @@ -71,7 +71,6 @@ class MessageShow extends React.Component {
message={message}
inputs={inputs}
streams={streams}
nodes={nodes}
renderForDisplay={this.renderForDisplay}
showTimestamp />
</Col>
Expand Down
53 changes: 34 additions & 19 deletions graylog2-web-interface/src/views/components/messagelist/NodeName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,37 +23,52 @@ import { Icon } from 'components/common';
import { useStore } from 'stores/connect';
import { NodesStore } from 'stores/nodes/NodesStore';
import { Link } from 'components/common/router';
import AppConfig from 'util/AppConfig';

type NodeId = string;
type Props = {
nodeId: NodeId,
};

const BreakWord = styled.span`
word-break: break-word;
`;

type NodeTitleProps = {
shortNodeId: string,
hostname: string
}

const NodeTitle = ({ shortNodeId, hostname }: NodeTitleProps) => (
<>
<Icon name="lan" />
&nbsp;
<BreakWord>
{shortNodeId}
</BreakWord>&nbsp;/&nbsp;
<BreakWord>
{hostname}
</BreakWord>
</>
);

type Props = {
nodeId: NodeId,
};

const NodeName = ({ nodeId }: Props) => {
const node = useStore(NodesStore, (state) => state?.nodes?.[nodeId]);

if (node) {
const nodeURL = Routes.node(nodeId);

return (
<Link to={nodeURL}>
<Icon name="lan" />
&nbsp;
<BreakWord>
{node.short_node_id}
</BreakWord>&nbsp;/&nbsp;
<BreakWord>
{node.hostname}
</BreakWord>
</Link>
);
if (!node) {
return <BreakWord>stopped node</BreakWord>;
}

if (AppConfig.isCloud()) {
return <NodeTitle shortNodeId={node.short_node_id} hostname={node.hostname} />;
}

return <BreakWord>stopped node</BreakWord>;
return (
<Link to={Routes.node(nodeId)}>
<NodeTitle shortNodeId={node.short_node_id} hostname={node.hostname} />
</Link>
);
};

NodeName.propTypes = {
Expand Down

0 comments on commit ce77278

Please sign in to comment.