IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Fix long Alertmanager names overflowing the window (#92023)

Browse Source 
fix long names overflowing the window
This commit is contained in:
Gilles De Mey 2024-08-20 17:02:35 +02:00 committed by GitHub
parent 0631322d36
commit 6f63def283
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/alerting/unified/components/AlertManagerPicker.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useMemo } from 'react'; import { useMemo, ComponentProps } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { InlineField, Select, useStyles2 } from '@grafana/ui'; import { InlineField, Select, SelectMenuOptions, useStyles2 } from '@grafana/ui';
import { useAlertmanager } from '../state/AlertmanagerContext'; import { useAlertmanager } from '../state/AlertmanagerContext';
import { AlertManagerDataSource, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource'; import { AlertManagerDataSource, GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
@ -12,15 +12,15 @@ interface Props {
} }
function getAlertManagerLabel(alertManager: AlertManagerDataSource) { function getAlertManagerLabel(alertManager: AlertManagerDataSource) {
return alertManager.name === GRAFANA_RULES_SOURCE_NAME ? 'Grafana' : alertManager.name.slice(0, 37); return alertManager.name === GRAFANA_RULES_SOURCE_NAME ? 'Grafana' : alertManager.name;
} }
export const AlertManagerPicker = ({ disabled = false }: Props) => { export const AlertManagerPicker = ({ disabled = false }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const { selectedAlertmanager, availableAlertManagers, setSelectedAlertmanager } = useAlertmanager(); const { selectedAlertmanager, availableAlertManagers, setSelectedAlertmanager } = useAlertmanager();
const options: Array<SelectableValue<string>> = useMemo(() => { const options = useMemo(() => {
return availableAlertManagers.map((ds) => ({ return availableAlertManagers.map<SelectableValue<string>>((ds) => ({
label: getAlertManagerLabel(ds), label: getAlertManagerLabel(ds),
value: ds.name, value: ds.name,
imgUrl: ds.imgUrl, imgUrl: ds.imgUrl,
@ -44,10 +44,10 @@ export const AlertManagerPicker = ({ disabled = false }: Props) => {
} }
}} }}
options={options} options={options}
maxMenuHeight={500}
noOptionsMessage="No datasources found" noOptionsMessage="No datasources found"
value={selectedAlertmanager} value={selectedAlertmanager}
getOptionLabel={(o) => o.label} getOptionLabel={(o) => o.label}
components={{ Option: CustomOption }}
/> />
</InlineField> </InlineField>
); );
@ -58,3 +58,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin: 0, margin: 0,
}), }),
}); });
// custom option that overwrites the default "white-space: nowrap" for Alertmanager names that are really long
const CustomOption = (props: ComponentProps<typeof SelectMenuOptions>) => (
<SelectMenuOptions
{...props}
renderOptionLabel={({ label }) => <div style={{ whiteSpace: 'pre-line' }}>{label}</div>}
/>
);