IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 00:25:46 -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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show Stats 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 hideViewRuleLinkText = props.width < 320;
// backwards compat for "Inactive" state filter
useEffect(() => {
if (props.options.stateFilter.inactive === true) {
@ -222,6 +224,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
options={parsedOptions}
handleInstancesLimit={handleInstancesLimit}
limitInstances={limitInstances}
hideViewRuleLinkText={hideViewRuleLinkText}
/>
)}
</section>
@ -414,5 +417,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
link: css`
word-break: break-all;
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 { useLocation } from 'react-use';
@ -28,6 +28,7 @@ type Props = {
options: UnifiedAlertListOptions;
handleInstancesLimit?: (limit: boolean) => void;
limitInstances: boolean;
hideViewRuleLinkText?: boolean;
};
function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState, number>>) {
@ -36,7 +37,7 @@ function getGrafanaInstancesTotal(totals: Partial<Record<AlertInstanceTotalState
.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 stateStyle = useStyles2(getStateTagStyles);
const { href: returnTo } = useLocation();
@ -89,11 +90,15 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
</div>
<Spacer />
{href && (
<a href={href} target="__blank" className={styles.link} rel="noopener">
<Stack alignItems="center" gap={1}>
View alert rule
<Icon name={'external-link-alt'} size="sm" />
</Stack>
<a
href={href}
target="__blank"
className={styles.link}
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>
)}
</Stack>