Remove (most) occurrences of HorizontalGroup within Alerting

This commit is contained in:
Tom Ratcliffe 2024-04-25 11:51:02 +01:00 committed by Tom Ratcliffe
parent e711d10925
commit f43762f39a
6 changed files with 19 additions and 31 deletions

View File

@ -1712,9 +1712,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "16"], [0, 0, 0, "Styles should be written using objects.", "16"],
[0, 0, 0, "Styles should be written using objects.", "17"] [0, 0, 0, "Styles should be written using objects.", "17"]
], ],
"public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx:5381": [ "public/app/features/alerting/unified/components/receivers/PayloadEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
@ -1893,9 +1890,8 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "1"] [0, 0, 0, "Styles should be written using objects.", "1"]
], ],
"public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/PreviewRule.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Styles should be written using objects.", "2"]
], ],
"public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/PreviewRuleResult.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
@ -1935,9 +1931,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"] [0, 0, 0, "Styles should be written using objects.", "1"]
], ],
"public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx:5381": [ "public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPolicyMatchers.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"] [0, 0, 0, "Styles should be written using objects.", "1"]
@ -2028,9 +2021,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"] [0, 0, 0, "Styles should be written using objects.", "3"]
], ],
"public/app/features/alerting/unified/components/rules/MultipleDataSourcePicker.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx:5381": [ "public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"] [0, 0, 0, "Styles should be written using objects.", "0"]
], ],
@ -2092,7 +2082,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "0"] [0, 0, 0, "Styles should be written using objects.", "0"]
], ],
"public/app/features/alerting/unified/components/rules/RulesGroup.tsx:5381": [ "public/app/features/alerting/unified/components/rules/RulesGroup.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"], [0, 0, 0, "Styles should be written using objects.", "3"],
@ -2103,8 +2093,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "8"], [0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"], [0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"], [0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"], [0, 0, 0, "Styles should be written using objects.", "11"]
[0, 0, 0, "Styles should be written using objects.", "12"]
], ],
"public/app/features/alerting/unified/components/rules/RulesTable.tsx:5381": [ "public/app/features/alerting/unified/components/rules/RulesTable.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useForm, FormProvider } from 'react-hook-form'; import { useForm, FormProvider } from 'react-hook-form';
import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui'; import { Alert, Button, Stack, LinkButton } from '@grafana/ui';
import { useCleanup } from 'app/core/hooks/useCleanup'; import { useCleanup } from 'app/core/hooks/useCleanup';
import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types'; import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
import { useDispatch } from 'app/types'; import { useDispatch } from 'app/types';
@ -87,7 +87,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => {
/> />
))} ))}
<div> <div>
<HorizontalGroup> <Stack>
{!readOnly && ( {!readOnly && (
<> <>
{loading && ( {loading && (
@ -106,7 +106,7 @@ export const GlobalConfigForm = ({ config, alertManagerSourceName }: Props) => {
> >
Cancel Cancel
</LinkButton> </LinkButton>
</HorizontalGroup> </Stack>
</div> </div>
</form> </form>
</FormProvider> </FormProvider>

View File

@ -6,7 +6,7 @@ import { takeWhile } from 'rxjs/operators';
import { dateTimeFormatISO, GrafanaTheme2, LoadingState } from '@grafana/data'; import { dateTimeFormatISO, GrafanaTheme2, LoadingState } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime'; import { getDataSourceSrv } from '@grafana/runtime';
import { Alert, Button, HorizontalGroup, useStyles2 } from '@grafana/ui'; import { Alert, Button, Stack, useStyles2 } from '@grafana/ui';
import { previewAlertRule } from '../../api/preview'; import { previewAlertRule } from '../../api/preview';
import { useAlertQueriesStatus } from '../../hooks/useAlertQueriesStatus'; import { useAlertQueriesStatus } from '../../hooks/useAlertQueriesStatus';
@ -32,7 +32,7 @@ export function PreviewRule(): React.ReactElement | null {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<HorizontalGroup> <Stack>
{allDataSourcesAvailable && ( {allDataSourcesAvailable && (
<Button disabled={!isPreviewAvailable} type="button" variant="primary" onClick={onPreview}> <Button disabled={!isPreviewAvailable} type="button" variant="primary" onClick={onPreview}>
Preview alerts Preview alerts
@ -43,7 +43,7 @@ export function PreviewRule(): React.ReactElement | null {
Cannot display the query preview. Some of the data sources used in the queries are not available. Cannot display the query preview. Some of the data sources used in the queries are not available.
</Alert> </Alert>
)} )}
</HorizontalGroup> </Stack>
<PreviewRuleResult preview={preview} /> <PreviewRuleResult preview={preview} />
</div> </div>
); );

View File

@ -5,7 +5,7 @@ import { Link, useParams } from 'react-router-dom';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Button, ConfirmModal, CustomScrollbar, HorizontalGroup, Spinner, Stack, useStyles2 } from '@grafana/ui'; import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui';
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
import { useAppNotification } from 'app/core/copy/appNotification'; import { useAppNotification } from 'app/core/copy/appNotification';
import { contextSrv } from 'app/core/core'; import { contextSrv } from 'app/core/core';
@ -184,7 +184,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]); useEffect(() => setEvaluateEvery(evaluateEveryInForm), [evaluateEveryInForm]);
const actionButtons = ( const actionButtons = (
<HorizontalGroup height="auto" justify="flex-end"> <Stack justifyContent="flex-end" alignItems="center">
{existing && ( {existing && (
<Button <Button
variant="primary" variant="primary"
@ -217,7 +217,6 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
Delete Delete
</Button> </Button>
) : null} ) : null}
{existing && isCortexLokiOrRecordingRule(watch) && ( {existing && isCortexLokiOrRecordingRule(watch) && (
<Button <Button
variant="secondary" variant="secondary"
@ -229,7 +228,7 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
Edit YAML Edit YAML
</Button> </Button>
)} )}
</HorizontalGroup> </Stack>
); );
const isPaused = existing && isGrafanaRulerRule(existing.rule) && isGrafanaRulerRulePaused(existing.rule); const isPaused = existing && isGrafanaRulerRule(existing.rule) && isGrafanaRulerRulePaused(existing.rule);

View File

@ -10,7 +10,7 @@ import {
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { getDataSourceSrv, DataSourcePickerState, DataSourcePickerProps } from '@grafana/runtime'; import { getDataSourceSrv, DataSourcePickerState, DataSourcePickerProps } from '@grafana/runtime';
import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend'; import { ExpressionDatasourceRef } from '@grafana/runtime/src/utils/DataSourceWithBackend';
import { ActionMeta, HorizontalGroup, PluginSignatureBadge, MultiSelect } from '@grafana/ui'; import { ActionMeta, Stack, PluginSignatureBadge, MultiSelect } from '@grafana/ui';
import { isDataSourceManagingAlerts } from '../../utils/datasource'; import { isDataSourceManagingAlerts } from '../../utils/datasource';
@ -168,9 +168,9 @@ export const MultipleDataSourcePicker = (props: MultipleDataSourcePickerProps) =
getOptionLabel={(o) => { getOptionLabel={(o) => {
if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) { if (o.meta && isUnsignedPluginSignature(o.meta.signature) && o !== value) {
return ( return (
<HorizontalGroup align="center" justify="space-between" height="auto"> <Stack alignItems="center" justifyContent="space-between">
<span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} /> <span>{o.label}</span> <PluginSignatureBadge status={o.meta.signature} />
</HorizontalGroup> </Stack>
); );
} }
return o.label || ''; return o.label || '';

View File

@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Badge, ConfirmModal, HorizontalGroup, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui'; import { Badge, ConfirmModal, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
import { useDispatch } from 'app/types'; import { useDispatch } from 'app/types';
import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting'; import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
@ -83,10 +83,10 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }:
// for grafana, link to folder views // for grafana, link to folder views
if (isDeleting) { if (isDeleting) {
actionIcons.push( actionIcons.push(
<HorizontalGroup key="is-deleting"> <Stack key="is-deleting">
<Spinner /> <Spinner />
deleting deleting
</HorizontalGroup> </Stack>
); );
} else if (rulesSource === GRAFANA_RULES_SOURCE_NAME) { } else if (rulesSource === GRAFANA_RULES_SOURCE_NAME) {
if (folderUID) { if (folderUID) {