Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Sep 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
def42c0
Fixing node details in message details on input extractor page.
linuspahl Sep 20, 2024
0a4c74d
Display only name instead of name with link for node in message details.
linuspahl Sep 20, 2024
70424f9
Use `NodeName` component for message details on input extractor page.
linuspahl Sep 20, 2024
a2f5c51
Adding changelog
linuspahl Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions changelog/unreleased/issue-20464.toml
View file
Open in desktop
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
Open in desktop
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>;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we were already considering the cloud env.

} 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
Open in desktop
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 />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nodes are currently nod provided by components which implement this component.

I did not migrate it to TS, because I want to keep the backport simple.

</Col>
Expand Down
53 changes: 34 additions & 19 deletions graylog2-web-interface/src/views/components/messagelist/NodeName.tsx
View file
Open in desktop
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
Loading