add option to disable "View in alertmanager" links

[anarcat]

Hi!

We're deploying alertmanager through the debian package and do not have the web UI deployed by default. After deploying it by hand, i have found it doesn't bring any additional functionality on top of what Karma actually offered (or did I miss anything?), so I'm left wondering:

Why do we link to alertmanager in karma?

Is there a way to turn this off entirely?

I think there are a couple of places where this happens:

karma/ui/src/Components/ManagedSilence/SilenceDetails.tsx

Lines 123 to 139 in 7194906

	<div className="my-1">
	<span className="badge px-1 me-1 components-label silence-detail">
	<FontAwesomeIcon
	className="text-muted me-1"
	icon={faHome}
	fixedWidth
	/>
	View in Alertmanager:
	</span>
	{alertmanagers.map((alertmanager) => (
	<RenderLinkAnnotation
	key={alertmanager.name}
	name={alertmanager.name}
	value={`${alertmanager.publicURI}/#/silences/${silence.id}`}
	/>
	))}
	</div>

karma/ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitProgress.tsx

Lines 61 to 76 in 7194906

	useEffect(() => {
	if (!inProgress && error !== null) {
	silenceFormStore.data.setRequestsByClusterUpdate(cluster, {
	isDone: true,
	error: error,
	});
	} else if (!inProgress && response !== null) {
	silenceFormStore.data.setRequestsByClusterUpdate(cluster, {
	isDone: true,
	silenceID: response.silenceID,
	silenceLink: `${publicURIs[responseURI as string]}/#/silences/${
	response.silenceID
	}`,
	});
	}
	}, [cluster, error, inProgress, publicURIs, response, responseURI]); // eslint-disable-line react-hooks/exhaustive-deps

https://github.com/prymitive/karma/blob/main/ui/src/Components/SilenceModal/SilenceSubmit/MultiClusterStatus.tsx#L61-L67

https://github.com/prymitive/karma/blob/main/ui/src/Components/SilenceModal/SilenceSubmit/SingleClusterStatus.tsx#L54-L60

Some of those I don't care about too much (we don't have clustering right now), but the first two are kind of distracting and misleading for our users.

I was hoping I could use some CSS tweaking to get rid of those UI elements, but the tags are not quite set right, at least enough that it would be hard for me to figure out how to hide them.

e.g. the "view in alertmanager" span *does have a silence-detail class, but not the following <a> element, which is really what i want to get rid of). the submission confirmation is similarly cryptic, both in terms of UX (IMHO, it should say, with words "submitted!" or something, instead of just that checkbox and a UUID) and styling (the entire confirmation model doesn't have any styling indication that makes it distinguishible from other modals).

so perhaps a simple, elegant solution would be to pepper a few more UI elements with a silence-alertmanager-reference class that i could just display: hide in our CSS and we'd be fine?