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: Improve alerts names visibility on narrow panels (#72104)

Browse Source
This commit is contained in:
Konrad Lalik
2023-07-25 12:26:53 +02:00
committed by GitHub
parent 1110cb4d44
commit 32e2304f10
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@@ -104,6 +104,8 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
const somePromRulesDispatched = isAsyncRequestMapSlicePartiallyDispatched(promRulesRequests); const somePromRulesDispatched = isAsyncRequestMapSlicePartiallyDispatched(promRulesRequests);
const hideViewRuleLinkText = props.width < 320;
// backwards compat for "Inactive" state filter // backwards compat for "Inactive" state filter
useEffect(() => { useEffect(() => {
if (props.options.stateFilter.inactive === true) { if (props.options.stateFilter.inactive === true) {
@@ -222,6 +224,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
options={parsedOptions} options={parsedOptions}
handleInstancesLimit={handleInstancesLimit} handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances} limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/> />
)} )}
</section> </section>
@@ -414,5 +417,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
link: css` link: css`
word-break: break-all; word-break: break-all;
color: ${theme.colors.primary.text}; color: ${theme.colors.primary.text};
display: flex;
align-items: center;
gap: ${theme.spacing(1)};
`,
hidden: css`
display: none;
`, `,
}); });

19
public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
View File

@@ -1,4 +1,4 @@
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React from 'react'; import React from 'react';
import { useLocation } from 'react-use'; import { useLocation } from 'react-use';
@@ -28,6 +28,7 @@ type Props = {
options: UnifiedAlertListOptions; options: UnifiedAlertListOptions;
handleInstancesLimit?: (limit: boolean) => void; handleInstancesLimit?: (limit: boolean) => void;
limitInstances: boolean; limitInstances: boolean;
hideViewRuleLinkText?: boolean;
}; };
function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState, number>>) { function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState, number>>) {
@@ -36,7 +37,7 @@ function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState
.reduce((total, currentTotal) => total + currentTotal, 0); .reduce((total, currentTotal) => total + currentTotal, 0);
} }
const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstances }: Props) => { const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstances, hideViewRuleLinkText }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const stateStyle = useStyles2(getStateTagStyles); const stateStyle = useStyles2(getStateTagStyles);
const { href: returnTo } = useLocation(); const { href: returnTo } = useLocation();
@@ -89,11 +90,15 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
</div> </div>
<Spacer /> <Spacer />
{href && ( {href && (
<a href={href} target="__blank" className={styles.link} rel="noopener"> <a
<Stack alignItems="center" gap={1}> href={href}
View alert rule target="__blank"
<Icon name={'external-link-alt'} size="sm" /> className={styles.link}
</Stack> rel="noopener"
aria-label="View alert rule"
>
<span className={cx({ [styles.hidden]: hideViewRuleLinkText })}>View alert rule</span>
<Icon name={'external-link-alt'} size="sm" />
</a> </a>
)} )}
</Stack> </Stack>