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: Smaller fixes for long namespace / group names (#69095)

Browse Source
This commit is contained in:
Gilles De Mey 2023-05-31 11:43:06 +02:00 committed by GitHub
parent d8b66d5c4b
commit 7e924e0d74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/alerting/unified/RuleViewer.tsx
View File

@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useObservable, useToggle } from 'react-use'; import { useObservable, useToggle } from 'react-use';
import { GrafanaTheme2, LoadingState, PanelData, RelativeTimeRange } from '@grafana/data'; import { GrafanaTheme2, LoadingState, PanelData, RelativeTimeRange } from '@grafana/data';
import { Stack } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { import {
Alert, Alert,
@ -168,9 +169,9 @@ export function RuleViewer({ match }: RuleViewerProps) {
{isProvisioned && <ProvisioningAlert resource={ProvisionedResource.AlertRule} />} {isProvisioned && <ProvisioningAlert resource={ProvisionedResource.AlertRule} />}
<RuleViewerLayoutContent> <RuleViewerLayoutContent>
<div> <div>
<h4> <Stack direction="row" alignItems="center" wrap={false} gap={1}>
<Icon name="bell" size="lg" /> {rule.name} <Icon name="bell" size="lg" /> <span className={styles.title}>{rule.name}</span>
</h4> </Stack>
<RuleState rule={rule} isCreating={false} isDeleting={false} /> <RuleState rule={rule} isCreating={false} isDeleting={false} />
<RuleDetailsActionButtons rule={rule} rulesSource={rulesSource} isViewMode={true} /> <RuleDetailsActionButtons rule={rule} rulesSource={rulesSource} isViewMode={true} />
</div> </div>
@ -295,6 +296,14 @@ const getStyles = (theme: GrafanaTheme2) => {
queryWarning: css` queryWarning: css`
margin: ${theme.spacing(4, 0)}; margin: ${theme.spacing(4, 0)};
`, `,
title: css`
font-size: ${theme.typography.h4.fontSize};
font-weight: ${theme.typography.fontWeightBold};
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`,
details: css` details: css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -305,6 +314,10 @@ const getStyles = (theme: GrafanaTheme2) => {
`, `,
rightSide: css` rightSide: css`
padding-right: ${theme.spacing(3)}; padding-right: ${theme.spacing(3)};
max-width: 360px;
word-break: break-all;
overflow: hidden;
`, `,
rightSideDetails: css` rightSideDetails: css`
& > div:first-child { & > div:first-child {

10
public/app/features/alerting/unified/components/rules/RulesGroup.tsx
View File

@ -286,13 +286,15 @@ export const getStyles = (theme: GrafanaTheme2) => {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0; padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0;
flex-wrap: wrap; flex-wrap: nowrap;
border-bottom: 1px solid ${theme.colors.border.weak}; border-bottom: 1px solid ${theme.colors.border.weak};
&:hover { &:hover {
background-color: ${theme.components.table.rowHoverBackground}; background-color: ${theme.components.table.rowHoverBackground};
} }
`, `,
headerStats: css` headerStats: css`
flex-shrink: 0;
span { span {
vertical-align: middle; vertical-align: middle;
} }
@ -307,6 +309,10 @@ export const getStyles = (theme: GrafanaTheme2) => {
margin-left: ${theme.spacing(1)}; margin-left: ${theme.spacing(1)};
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`, `,
spacer: css` spacer: css`
flex: 1; flex: 1;
@ -336,6 +342,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
actionIcons: css` actionIcons: css`
width: 80px; width: 80px;
align-items: center; align-items: center;
flex-shrink: 0;
`, `,
rulesTable: css` rulesTable: css`
margin: ${theme.spacing(2, 0)}; margin: ${theme.spacing(2, 0)};