IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-23 09:26:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

AnnotationsEditor: Remove deprecated components (#84538)

Browse Source 
* AnnotationEditorForm: Remove deprecated components

* AnnotationEditor2: Remove deprecated components
This commit is contained in:
Alex Khomenko 2024-03-16 08:48:17 +01:00 committed by GitHub
parent 1714d52f17
commit 39b32524e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/plugins/panel/timeseries/plugins/annotations/AnnotationEditorForm.tsx
View File

@ -1,10 +1,12 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { HTMLAttributes, useRef } from 'react'; import React, { HTMLAttributes, useRef } from 'react';
import { Controller } from 'react-hook-form';
import useAsyncFn from 'react-use/lib/useAsyncFn'; import useAsyncFn from 'react-use/lib/useAsyncFn';
import useClickAway from 'react-use/lib/useClickAway'; import useClickAway from 'react-use/lib/useClickAway';
import { AnnotationEventUIModel, GrafanaTheme2 } from '@grafana/data'; import { AnnotationEventUIModel, GrafanaTheme2 } from '@grafana/data';
import { Button, Field, Form, HorizontalGroup, InputControl, TextArea, usePanelContext, useStyles2 } from '@grafana/ui'; import { Button, Field, Stack, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
import { Form } from 'app/core/components/Form/Form';
import { TagFilter } from 'app/core/components/TagFilter/TagFilter'; import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
import { getAnnotationTags } from 'app/features/annotations/api'; import { getAnnotationTags } from 'app/features/annotations/api';
@ -73,10 +75,10 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
{...otherProps} {...otherProps}
> >
<div className={styles.header}> <div className={styles.header}>
<HorizontalGroup justify={'space-between'} align={'center'}> <Stack justifyContent={'space-between'} alignItems={'center'}>
<div className={styles.title}>Add annotation</div> <div className={styles.title}>Add annotation</div>
<div className={styles.ts}>{ts}</div> <div className={styles.ts}>{ts}</div>
</HorizontalGroup> </Stack>
</div> </div>
<div className={styles.editorForm}> <div className={styles.editorForm}>
<Form<AnnotationEditFormDTO> <Form<AnnotationEditFormDTO>
@ -94,7 +96,7 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
/> />
</Field> </Field>
<Field label={'Tags'}> <Field label={'Tags'}>
<InputControl <Controller
control={control} control={control}
name="tags" name="tags"
render={({ field: { ref, onChange, ...field } }) => { render={({ field: { ref, onChange, ...field } }) => {
@ -110,14 +112,14 @@ export const AnnotationEditorForm = React.forwardRef<HTMLDivElement, AnnotationE
}} }}
/> />
</Field> </Field>
<HorizontalGroup justify={'flex-end'}> <Stack justifyContent={'flex-end'}>
<Button size={'sm'} variant="secondary" onClick={onDismiss} fill="outline"> <Button size={'sm'} variant="secondary" onClick={onDismiss} fill="outline">
Cancel Cancel
</Button> </Button>
<Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}> <Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}>
{stateIndicator?.loading ? 'Saving' : 'Save'} {stateIndicator?.loading ? 'Saving' : 'Save'}
</Button> </Button>
</HorizontalGroup> </Stack>
</> </>
); );
}} }}

14
public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx
View File

@ -1,9 +1,11 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import { Controller } from 'react-hook-form';
import { useAsyncFn, useClickAway } from 'react-use'; import { useAsyncFn, useClickAway } from 'react-use';
import { AnnotationEventUIModel, GrafanaTheme2, dateTimeFormat, systemDateFormats } from '@grafana/data'; import { AnnotationEventUIModel, GrafanaTheme2, dateTimeFormat, systemDateFormats } from '@grafana/data';
import { Button, Field, Form, HorizontalGroup, InputControl, TextArea, usePanelContext, useStyles2 } from '@grafana/ui'; import { Button, Field, Stack, TextArea, usePanelContext, useStyles2 } from '@grafana/ui';
import { Form } from 'app/core/components/Form/Form';
import { TagFilter } from 'app/core/components/TagFilter/TagFilter'; import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
import { getAnnotationTags } from 'app/features/annotations/api'; import { getAnnotationTags } from 'app/features/annotations/api';
@ -67,10 +69,10 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
return ( return (
<div ref={clickAwayRef} className={styles.editor} {...otherProps}> <div ref={clickAwayRef} className={styles.editor} {...otherProps}>
<div className={styles.header}> <div className={styles.header}>
<HorizontalGroup justify={'space-between'} align={'center'}> <Stack justifyContent={'space-between'} alignItems={'center'}>
<div>{isUpdatingAnnotation ? 'Edit annotation' : 'Add annotation'}</div> <div>{isUpdatingAnnotation ? 'Edit annotation' : 'Add annotation'}</div>
<div>{time}</div> <div>{time}</div>
</HorizontalGroup> </Stack>
</div> </div>
<Form<AnnotationEditFormDTO> <Form<AnnotationEditFormDTO>
onSubmit={onSubmit} onSubmit={onSubmit}
@ -89,7 +91,7 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
/> />
</Field> </Field>
<Field label={'Tags'}> <Field label={'Tags'}>
<InputControl <Controller
control={control} control={control}
name="tags" name="tags"
render={({ field: { ref, onChange, ...field } }) => { render={({ field: { ref, onChange, ...field } }) => {
@ -107,14 +109,14 @@ export const AnnotationEditor2 = ({ annoVals, annoIdx, dismiss, timeZone, ...oth
</Field> </Field>
</div> </div>
<div className={styles.footer}> <div className={styles.footer}>
<HorizontalGroup justify={'flex-end'}> <Stack justifyContent={'flex-end'}>
<Button size={'sm'} variant="secondary" onClick={dismiss} fill="outline"> <Button size={'sm'} variant="secondary" onClick={dismiss} fill="outline">
Cancel Cancel
</Button> </Button>
<Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}> <Button size={'sm'} type={'submit'} disabled={stateIndicator?.loading}>
{stateIndicator?.loading ? 'Saving' : 'Save'} {stateIndicator?.loading ? 'Saving' : 'Save'}
</Button> </Button>
</HorizontalGroup> </Stack>
</div> </div>
</> </>
); );