Making the "Broadcast Message System/Wall Banner" feature UI operable

[jc-obermeier]

Hi,
I love the Broadcast Message System/Wall Banner Message v8.0 feature. 🫶

This comes in really handy for when you just want to make sure anyone logging into a concourse instance is aware of whatever it is they should be aware of (maintenance, outages, ...).

Currently the feature is aimed at the "Pet" use case (Cattle vs Pets), having one large concourse instance, as per this excerpt from the docu

Concourse Admins who operate a big Concourse with many teams often want a way to communicate to everyone that the system is unstable/recovering.

which somewhat implies that it is operated with a lot of attention and extra care, so an active fly CLI session is likely ready at all times.

My (team's) use case is more the "Cattle" one, where we have 10s of concourse instances (like 60+), which are also all loved but less individually ( 😉 ) and we mostly only use the UI due to the many instances.

Therefore, I would like to suggest/discuss a feature request to make the Broadcast Message System/Wall Banner Message feature UI operable, as being able to set, change and clear it via UI (concourse admins only).

I have added a screenshot below where I think would be a good/logical place to add such an UI feature, if this would be accepted to be worked on.

Cheers,
JC

[taylorsilva]

This sounds fine to me if someone wants to implement it. I'd follow a similar design as the comments one can add to builds

[ceco556]

Awesome idea!

I will try to implement it.

[richo6030]

One thing I'm thinking of here - when saying "Concourse admins" I guess we mean members of the "main" team, correct? So that we are on the same page. Overall I like the idea a lot, it would definitely be helpful for operators of Concourse instances to spread out messages to developers when needed and we often see use cases for the same.

[jc-obermeier]

Yes, with "Concourse admins", I meant members of the "main" team.

Thanks for double-checking.

[ceco556]

I’ve started implementing this feature and i am currently focusing only on the design.

So far, I’ve added a message icon button at the top of the page. When the user clicks it, a container appears at the top where they can enter the message and set the TTL. After the user fills in the fields and clicks Set, the container dissapears and the broadcast message appears. If the user clicks the message icon again later, a Clear button will also appear.

I’m also considering an alternative approach: when the user clicks the message icon, a larger container could open in the center of the page. However, I’m not sure which design to pick and which one will provide the better user experience.

Additionally, I plan to hide the button for users who do not have permission to set a broadcast message.

What do you think?

[taylorsilva]

Solid start already!

I'd go with your current/first setup, or what Kalin said basically. It's similar to the commenting workflow, creating a similar pattern for users to follow within Concourse.

We can ignore the TTL in the web UI for now. Manually setting/unsetting seems good for now. TTL option is always there via fly if users want it.

I'd change the icon to a megaphone/bullhorn (📢) or something similar instead. Not a designer, but I figure it's best to not conflate the use of the comments icon.

Sidenote: I'm actually not sure where we pull these icons from. I thought it might be from https://pictogrammers.com/library/mdi/ but looking at #5410 we don't say where and they just added an SVG from somewhere 😬

[taylorsilva]

Potential icons:
https://pictogrammers.com/library/mdi/icon/bullhorn-variant/
https://pictogrammers.com/library/mdi/icon/bullhorn/

First one is my preference right now.

[ceco556]

The icons are stored in https://github.com/concourse/concourse/tree/master/web/public/images. All icons go through here :

concourse/web/elm/src/Views/Icon.elm

Lines 8 to 23 in 483ff09

	icon :
	{ sizePx : Int, image : Assets.Asset }
	-> List (Html.Attribute msg)
	-> Html msg
	icon { sizePx, image } attrs =
	Html.div
	([ style "background-image" <|
	Assets.backgroundImage <|
	Just image
	, style "height" (String.fromInt sizePx ++ "px")
	, style "width" (String.fromInt sizePx ++ "px")
	, style "background-position" "50% 50%"
	, style "background-repeat" "no-repeat"
	, style "background-size" "cover"
	]
	++ attrs

which renders a div with the SVG as a CSS. Example:

[ Icon.icon { sizePx = 20, image = Assets.MessageIcon } [] ]

I don't see a bullhorn in the icons, so i will need to add it.

I agree with the first design, let me try to make it as much as i can similar to the comments. Also the TTL is not needed so i will remove it.

[ceco556]

I did some changes to the design, making it similar to the comments as much as i can. Also removed the TTL.

@taylorsilva, the bullhorn icon which you proposed is black which doesn't work for our design and i couldn't find a white on in the website so i downloaded different one. Let me know you if you like it, i can change it if needed.

[taylorsilva]

Just add fill="#fff" to the SVG to make it white:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M20 2V4L4 8V6H2V18H4V16L6 16.5V18.5C6 20.4 7.6 22 9.5 22S13 20.4 13 18.5V18.3L20 20V22H22V2H20M11 18.5C11 19.3 10.3 20 9.5 20S8 19.3 8 18.5V17L11 17.8V18.5Z" /></svg>

It looks great though! I'm looking forward to the PR.

[ceco556]

I've created a PR for this feature.
#9484