TextBlock used for `text` in msteamsv2 receiver must have `wrap: true` to display the content correctly

[Lddeiva]

TextBlock used for title in msteamsv2 receiver needs wrap: true to display the content correctly.

{
    Type:   "TextBlock",
    Text:   title,
    Weight: "Bolder",
    Size:   "Medium",
    Wrap:   true,
    Style:  "heading",
    Color:  color,
},
{
    Type: "TextBlock",
    Text: text,
},

Note: - The TextBlock used for title is using wrap: true already. https://github.com/prometheus/alertmanager/blob/ff8c09d60174f27850830ceed6be38b3cf86974b/notify/msteamsv2/msteamsv2.go#L162

When there is a lengthy line, the title is displayed correctly but the text is not. So, please add wrap: true in text as well.

{
    Type:   "TextBlock",
    Text:   title,
    Weight: "Bolder",
    Size:   "Medium",
    Wrap:   true,
    Style:  "heading",
    Color:  color,
},
{
    Type: "TextBlock",
    Text: text,
    Wrap: true,
},

[grobinson-grafana]

Hi! 👋 Do you think you could open a PR with the fix (and some screenshots to show broken/fixed behavior)?

[Lddeiva]

Hi! 👋 Do you think you could open a PR with the fix (and some screenshots to show broken/fixed behavior)?

https://github.com/prometheus/alertmanager/issues/4088#issuecomment-2443832782

I couldn't paste any screenshots but I built the alertmanager locally (with wrap: true) and tested the Microsoft Teams messages.

The existing code without wrap when used will display messages like this. The lines which are lengthy will be shown like this.

Status: firing
Severity: warning
Description: Job ns-prod-app1/metric-exporter-2882016...
Instance: 10.79.0.233:8080

The new code (with wrap: true) wraps the text and shows the lines within the viewable area.

Status: firing
Severity: warning
Description: Job ns-prod-app1/metric-exporter-2882016
has failed to complete
Instance: 10.79.0.233:8080

Note: - This might be due to the AdaptiveCard format in which not entire screen area is used to display the message (we might need to use ColumnSet with Width but that requires additional changes and testing). As you can see in the screenshot below, only half of the viewable area is used to display the card.

The fix is something like this. I'll submit an MR by referring this issue.

{
    Type:   "TextBlock",
    Text:   title,
    Weight: "Bolder",
    Size:   "Medium",
    Wrap:   true,
    Style:  "heading",
    Color:  color,
},
{
    Type: "TextBlock",
    Text: text,
    Wrap: true,    # this line is introduced to fix the issue
},

[grobinson-grafana]

Hi! 👋 Thanks for this. Are you still planning to open a PR with the fix?

[Lddeiva]

Hi! 👋 Thanks for this. Are you still planning to open a PR with the fix?

@grobinson-grafana , I have submitted the PR now.

[gpcastaneda]

Can you also make the message to show as full width? To make a full width Adaptive Card, the width object in msteams property in the card content must be set to Full https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cdesktop1%2Cdesktop2%2Cconnector-html#full-width-adaptive-card

[grobinson-grafana]

Can you also make the message to show as full width? To make a full width Adaptive Card, the width object in msteams property in the card content must be set to Full https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cdesktop1%2Cdesktop2%2Cconnector-html#full-width-adaptive-card

We can accept a separate PR for that, if you would like to do it?

[dimahsu]

@grobinson-grafana I will raise a PR for the changes to support full width

Updated: PR has been raised. Please review. Thanks