apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Remove/replace `CustomScrollbar` in alerting (#96102)

Browse Source 
remove/replace CustomScrollbar in alerting code
pull/96148/head
Ashley Harrison 1 year ago committed by GitHub
parent 95692b3d68
commit 4a362d41a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 56 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      public/app/features/alerting/unified/PanelAlertTabContent.test.tsx
  2. 7
      public/app/features/alerting/unified/PanelAlertTabContent.tsx
  3. 64
      public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
  4. 44
      public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx

1
public/app/features/alerting/unified/PanelAlertTabContent.test.tsx
Unescape View File

@ -181,7 +181,6 @@ const server = setupMswServer();
describe('PanelAlertTabContent', () => { describe('PanelAlertTabContent', () => {
beforeEach(() => { beforeEach(() => {
jest.resetAllMocks();
grantUserPermissions([ grantUserPermissions([
AccessControlAction.AlertingRuleRead, AccessControlAction.AlertingRuleRead,
AccessControlAction.AlertingRuleUpdate, AccessControlAction.AlertingRuleUpdate,

7
public/app/features/alerting/unified/PanelAlertTabContent.tsx
Unescape View File

@ -2,7 +2,8 @@ import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { Alert, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; import { Alert, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
import { ScrollContainer } from '@grafana/ui/src/unstable';
import { contextSrv } from 'app/core/services/context_srv'; import { contextSrv } from 'app/core/services/context_srv';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state'; import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@ -46,7 +47,7 @@ export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
if (rules.length) { if (rules.length) {
return ( return (
<CustomScrollbar autoHeightMin="100%"> <ScrollContainer minHeight="100%">
<div className={styles.innerWrapper}> <div className={styles.innerWrapper}>
{alert} {alert}
<RulesTable rules={rules} /> <RulesTable rules={rules} />
@ -54,7 +55,7 @@ export const PanelAlertTabContent = ({ dashboard, panel }: Props) => {
<NewRuleFromPanelButton className={styles.newButton} panel={panel} dashboard={dashboard} /> <NewRuleFromPanelButton className={styles.newButton} panel={panel} dashboard={dashboard} />
)} )}
</div> </div>
</CustomScrollbar> </ScrollContainer>
); );
} }

64
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/AlertRuleForm.tsx
Unescape View File

@ -5,7 +5,7 @@ import { useParams } from 'react-router-dom-v5-compat';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { config, locationService } from '@grafana/runtime'; import { config, locationService } from '@grafana/runtime';
import { Button, ConfirmModal, CustomScrollbar, Spinner, Stack, useStyles2 } from '@grafana/ui'; import { Button, ConfirmModal, 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';
@ -285,38 +285,36 @@ export const AlertRuleForm = ({ existing, prefill }: Props) => {
<form onSubmit={(e) => e.preventDefault()} className={styles.form}> <form onSubmit={(e) => e.preventDefault()} className={styles.form}>
<div className={styles.contentOuter}> <div className={styles.contentOuter}>
{isPaused && <InfoPausedRule />} {isPaused && <InfoPausedRule />}
<CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}> <Stack direction="column" gap={3}>
<Stack direction="column" gap={3}> {/* Step 1 */}
{/* Step 1 */} <AlertRuleNameAndMetric />
<AlertRuleNameAndMetric /> {/* Step 2 */}
{/* Step 2 */} <QueryAndExpressionsStep editingExistingRule={!!existing} onDataChange={checkAlertCondition} />
<QueryAndExpressionsStep editingExistingRule={!!existing} onDataChange={checkAlertCondition} /> {/* Step 3-4-5 */}
{/* Step 3-4-5 */} {showDataSourceDependantStep && (
{showDataSourceDependantStep && ( <>
<> {/* Step 3 */}
{/* Step 3 */} {isGrafanaManagedRuleByType(type) && (
{isGrafanaManagedRuleByType(type) && ( <GrafanaEvaluationBehavior
<GrafanaEvaluationBehavior evaluateEvery={evaluateEvery}
evaluateEvery={evaluateEvery} setEvaluateEvery={setEvaluateEvery}
setEvaluateEvery={setEvaluateEvery} existing={Boolean(existing)}
existing={Boolean(existing)} enableProvisionedGroups={false}
enableProvisionedGroups={false} />
/> )}
)}
{type === RuleFormType.cloudAlerting && <CloudEvaluationBehavior />}
{type === RuleFormType.cloudAlerting && <CloudEvaluationBehavior />}
{type === RuleFormType.cloudRecording && <RecordingRulesNameSpaceAndGroupStep />}
{type === RuleFormType.cloudRecording && <RecordingRulesNameSpaceAndGroupStep />}
{/* Step 4 & 5 */}
{/* Step 4 & 5 */} {/* Notifications step*/}
{/* Notifications step*/} <NotificationsStep alertUid={uidFromParams} />
<NotificationsStep alertUid={uidFromParams} /> {/* Annotations only for cloud and Grafana */}
{/* Annotations only for cloud and Grafana */} {!isRecordingRuleByType(type) && <AnnotationsStep />}
{!isRecordingRuleByType(type) && <AnnotationsStep />} </>
</> )}
)} </Stack>
</Stack>
</CustomScrollbar>
</div> </div>
</form> </form>
{showDeleteModal ? ( {showDeleteModal ? (

44
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/ModifyExportRuleForm.tsx
Unescape View File

@ -2,7 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form'; import { FormProvider, useForm } from 'react-hook-form';
import { useAsync } from 'react-use'; import { useAsync } from 'react-use';
import { Button, CustomScrollbar, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui'; import { Button, LinkButton, LoadingPlaceholder, Stack } from '@grafana/ui';
import { useAppNotification } from 'app/core/copy/appNotification'; import { useAppNotification } from 'app/core/copy/appNotification';
import { useQueryParams } from 'app/core/hooks/useQueryParams'; import { useQueryParams } from 'app/core/hooks/useQueryParams';
@ -85,28 +85,26 @@ export function ModifyExportRuleForm({ ruleForm, alertUid }: ModifyExportRuleFor
<AppChromeUpdate actions={actionButtons} /> <AppChromeUpdate actions={actionButtons} />
<form onSubmit={(e) => e.preventDefault()}> <form onSubmit={(e) => e.preventDefault()}>
<div> <div>
<CustomScrollbar autoHeightMin="100%" hideHorizontalTrack={true}> <Stack direction="column" gap={3}>
<Stack direction="column" gap={3}> {/* Step 1 */}
{/* Step 1 */} <AlertRuleNameAndMetric />
<AlertRuleNameAndMetric /> {/* Step 2 */}
{/* Step 2 */} <QueryAndExpressionsStep editingExistingRule={existing} onDataChange={checkAlertCondition} />
<QueryAndExpressionsStep editingExistingRule={existing} onDataChange={checkAlertCondition} /> {/* Step 3-4-5 */}
{/* Step 3-4-5 */}
<GrafanaEvaluationBehavior
<GrafanaEvaluationBehavior evaluateEvery={evaluateEvery}
evaluateEvery={evaluateEvery} setEvaluateEvery={setEvaluateEvery}
setEvaluateEvery={setEvaluateEvery} existing={Boolean(existing)}
existing={Boolean(existing)} enableProvisionedGroups={true}
enableProvisionedGroups={true} />
/>
{/* Step 4 & 5 */}
{/* Step 4 & 5 */} {/* Notifications step*/}
{/* Notifications step*/} <NotificationsStep alertUid={alertUid} />
<NotificationsStep alertUid={alertUid} /> {/* Annotations only for cloud and Grafana */}
{/* Annotations only for cloud and Grafana */} <AnnotationsStep />
<AnnotationsStep /> </Stack>
</Stack>
</CustomScrollbar>
</div> </div>
</form> </form>
{exportData && <GrafanaRuleDesignExporter exportValues={exportData} onClose={onClose} uid={alertUid} />} {exportData && <GrafanaRuleDesignExporter exportValues={exportData} onClose={onClose} uid={alertUid} />}

Write Preview
Loading…
Cancel
Save