From def42c03774d966910e62bd349ad1c90e4b52529 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 20 Sep 2024 13:57:46 +0200 Subject: [PATCH 1/4] Fixing node details in message details on input extractor page. --- .../src/components/search/MessageDetail.tsx | 16 +++++++++------- .../src/components/search/MessageShow.jsx | 15 +++++++-------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/graylog2-web-interface/src/components/search/MessageDetail.tsx b/graylog2-web-interface/src/components/search/MessageDetail.tsx index 4f48c0903b55..b0077245ac23 100644 --- a/graylog2-web-interface/src/components/search/MessageDetail.tsx +++ b/graylog2-web-interface/src/components/search/MessageDetail.tsx @@ -30,6 +30,8 @@ import MessagePermalinkButton from 'views/components/common/MessagePermalinkButt import type { Message } from 'views/components/messagelist/Types'; import type { Stream } from 'views/stores/StreamsStore'; import type { Input } from 'components/messageloaders/Types'; +import { NodesStore } from 'stores/nodes/NodesStore'; +import { useStore } from 'stores/connect'; const Span = styled.span` word-break: break-word; @@ -49,7 +51,9 @@ const InputName = ({ inputs, inputId }: { inputs: Immutable.Map | return input ? {input.title} : <>deleted input; }; -const NodeName = ({ nodes, nodeId }: { nodes: Immutable.Map | undefined, nodeId: string }) => { +const NodeName = ({ nodeId }: { nodeId: string }) => { + const nodesStore = useStore(NodesStore); + const nodes = Immutable.Map(nodesStore.nodes); const node = nodes?.get(nodeId); let nodeInformation; @@ -100,13 +104,12 @@ const StreamLinks = ({ messageStreams, streamIds, streams }: { type Props = { message: Message & { streams?: Array }, inputs?: Immutable.Map, - nodes?: Immutable.Map, streams?: Immutable.Map, 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 = [ @@ -136,12 +139,12 @@ const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, cust {timestamp} - {(message.source_input_id && message.source_node_id && nodes) && ( + {(message.source_input_id && message.source_node_id) && (
Received by
{' '} - on + on {/* Legacy */} {message.source_radio_id && ( @@ -149,7 +152,7 @@ const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, cust
via on - radio + radio )} @@ -186,7 +189,6 @@ const MessageDetail = ({ renderForDisplay, inputs, nodes, streams, message, cust MessageDetail.defaultProps = { inputs: undefined, - nodes: undefined, streams: undefined, customFieldActions: undefined, }; diff --git a/graylog2-web-interface/src/components/search/MessageShow.jsx b/graylog2-web-interface/src/components/search/MessageShow.jsx index 1d95940e0192..063bb7d3869c 100644 --- a/graylog2-web-interface/src/components/search/MessageShow.jsx +++ b/graylog2-web-interface/src/components/search/MessageShow.jsx @@ -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, @@ -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. @@ -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 ( @@ -71,7 +71,6 @@ class MessageShow extends React.Component { message={message} inputs={inputs} streams={streams} - nodes={nodes} renderForDisplay={this.renderForDisplay} showTimestamp /> From 0a4c74db3f7d7fe3667cba41a59f99249e334c33 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 20 Sep 2024 14:12:31 +0200 Subject: [PATCH 2/4] Display only name instead of name with link for node in message details. --- .../views/components/messagelist/NodeName.tsx | 53 ++++++++++++------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/graylog2-web-interface/src/views/components/messagelist/NodeName.tsx b/graylog2-web-interface/src/views/components/messagelist/NodeName.tsx index 1e971cb534ac..2c93f77a1b20 100644 --- a/graylog2-web-interface/src/views/components/messagelist/NodeName.tsx +++ b/graylog2-web-interface/src/views/components/messagelist/NodeName.tsx @@ -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) => ( + <> + +   + + {shortNodeId} +  /  + + {hostname} + + +); + +type Props = { + nodeId: NodeId, +}; + const NodeName = ({ nodeId }: Props) => { const node = useStore(NodesStore, (state) => state?.nodes?.[nodeId]); - if (node) { - const nodeURL = Routes.node(nodeId); - - return ( - - -   - - {node.short_node_id} -  /  - - {node.hostname} - - - ); + if (!node) { + return stopped node; + } + + if (AppConfig.isCloud()) { + return ; } - return stopped node; + return ( + + + + ); }; NodeName.propTypes = { From 70424f9fe810d63b143c8570c05ea51b1c86fa41 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 20 Sep 2024 14:14:45 +0200 Subject: [PATCH 3/4] Use `NodeName` component for message details on input extractor page. --- .../src/components/search/MessageDetail.tsx | 32 +------------------ 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/graylog2-web-interface/src/components/search/MessageDetail.tsx b/graylog2-web-interface/src/components/search/MessageDetail.tsx index b0077245ac23..5d21ab5152bf 100644 --- a/graylog2-web-interface/src/components/search/MessageDetail.tsx +++ b/graylog2-web-interface/src/components/search/MessageDetail.tsx @@ -25,13 +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 { NodesStore } from 'stores/nodes/NodesStore'; -import { useStore } from 'stores/connect'; +import NodeName from 'views/components/messagelist/NodeName'; const Span = styled.span` word-break: break-word; @@ -51,34 +49,6 @@ const InputName = ({ inputs, inputId }: { inputs: Immutable.Map | return input ? {input.title} : <>deleted input; }; -const NodeName = ({ nodeId }: { nodeId: string }) => { - const nodesStore = useStore(NodesStore); - const nodes = Immutable.Map(nodesStore.nodes); - const node = nodes?.get(nodeId); - let nodeInformation; - - if (node) { - const nodeURL = Routes.node(nodeId); - - const nodeContent = ( - <> - -   - {node.short_node_id} /  - {node.hostname} - - ); - - nodeInformation = AppConfig.isCloud() - ? nodeContent - : {nodeContent}; - } else { - nodeInformation = stopped node; - } - - return nodeInformation; -}; - const StreamLinks = ({ messageStreams, streamIds, streams }: { messageStreams: Array, streamIds: Immutable.Set, From a2f5c51bcfe3dcc7660c84cc85fe141084dd6eb7 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 20 Sep 2024 14:23:41 +0200 Subject: [PATCH 4/4] Adding changelog --- changelog/unreleased/issue-20464.toml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelog/unreleased/issue-20464.toml diff --git a/changelog/unreleased/issue-20464.toml b/changelog/unreleased/issue-20464.toml new file mode 100644 index 000000000000..8208f20e8fe4 --- /dev/null +++ b/changelog/unreleased/issue-20464.toml @@ -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"]