From 6e37b60374de916948bfea914ce4902ff8062691 Mon Sep 17 00:00:00 2001 From: Taewoo K Date: Mon, 9 Jan 2023 16:36:11 -0500 Subject: [PATCH] migrate angular annotation editor (#196) --- CHANGELOG.md | 5 ++ package.json | 2 +- src/DataSource.ts | 8 +- src/annotations.ts | 32 -------- src/migrations.ts | 36 ++++++++ src/module.ts | 15 ++-- src/partials/annotations.editor.html | 5 -- src/views/AnnotationQueryEditor.tsx | 118 --------------------------- src/views/QueryEditor.tsx | 4 +- src/views/QueryEditorRepository.tsx | 10 ++- src/views/VariableQueryEditor.tsx | 4 +- 11 files changed, 70 insertions(+), 169 deletions(-) delete mode 100644 src/annotations.ts create mode 100644 src/migrations.ts delete mode 100644 src/partials/annotations.editor.html delete mode 100644 src/views/AnnotationQueryEditor.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index f88fd350..5836f4cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,12 @@ ## Entries +## [1.3.3] - 2023-01-09 + +- Chore - Remove angular dependency: migrate annotation editor + ## [1.3.2] - next + - Added a `$__toDay()` macro support ## [1.3.1] 2022-12-21 diff --git a/package.json b/package.json index 8677fdbf..a7f98dc6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grafana-github-datasource", - "version": "1.3.1", + "version": "1.3.3", "description": "loads data from github issues/Pr's to Grafana", "private": true, "scripts": { diff --git a/src/DataSource.ts b/src/DataSource.ts index 4463fe8a..c5aae017 100644 --- a/src/DataSource.ts +++ b/src/DataSource.ts @@ -12,12 +12,18 @@ import { GithubDataSourceOptions, GitHubQuery, GitHubVariableQuery, Label } from import { replaceVariables } from './variables'; import { isValid } from './validation'; import { getAnnotationsFromFrame } from 'common/annotationsFromDataFrame'; +import { prepareAnnotation } from 'migrations'; +import QueryEditor from 'views/QueryEditor'; -export class DataSource extends DataSourceWithBackend { +export class GithubDataSource extends DataSourceWithBackend { templateSrv = getTemplateSrv(); constructor(instanceSettings: DataSourceInstanceSettings) { super(instanceSettings); + this.annotations = { + QueryEditor, + prepareAnnotation, + }; } // Only execute queries that have a query type diff --git a/src/annotations.ts b/src/annotations.ts deleted file mode 100644 index ec32fc15..00000000 --- a/src/annotations.ts +++ /dev/null @@ -1,32 +0,0 @@ -import './views/AnnotationQueryEditor'; -import { GitHubAnnotationQuery, DefaultQueryType } from './types'; -import { DataSource } from './DataSource'; -import { AnnotationQueryRequest } from '@grafana/data'; -import { defaultsDeep } from 'lodash'; - -const defaultQuery: GitHubAnnotationQuery = { - queryType: DefaultQueryType, - refId: '', -}; - -export default class AnnotationCtrl { - // @ts-ignore - annotation: AnnotationQueryRequest; - - // @ts-ignore - private datasource?: DataSource; - - static templateUrl = 'partials/annotations.editor.html'; - - /** @ngInject */ - constructor() { - // @ts-ignore - this.annotation.annotation = defaultsDeep(this.annotation.annotation, defaultQuery); - // @ts-ignore - this.annotation.datasourceId = this.datasource.id; - } - - onChange = (query: AnnotationQueryRequest) => { - this.annotation.annotation = query.annotation; - }; -} diff --git a/src/migrations.ts b/src/migrations.ts new file mode 100644 index 00000000..e06089ff --- /dev/null +++ b/src/migrations.ts @@ -0,0 +1,36 @@ +import { AnnotationEventFieldSource } from '@grafana/data'; + +const isNewAnnotation = (json: any) => { + return !('annotation' in json); +}; + +export const prepareAnnotation = (json: any) => { + if (isNewAnnotation(json)) { + return json; + } + + const { annotation, ...annotationRest } = json; + const { field, timeField, ...targetRest } = annotation; + + const migratedAnnotation = { + ...annotationRest, + target: targetRest, + mappings: { + text: field + ? { + source: AnnotationEventFieldSource.Field, + value: field, + } + : undefined, + time: timeField + ? { + source: AnnotationEventFieldSource.Field, + value: timeField, + } + : undefined, + ...annotationRest.mappings, + }, + }; + + return migratedAnnotation; +}; diff --git a/src/module.ts b/src/module.ts index 52b4c801..ea2516ff 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,15 +1,16 @@ import { DataSourcePlugin } from '@grafana/data'; -import { DataSource } from './DataSource'; +import { GithubDataSource } from './DataSource'; import ConfigEditor from './views/ConfigEditor'; import QueryEditor from './views/QueryEditor'; import VariableQueryEditor from './views/VariableQueryEditor'; -import AnnotationCtrl from './annotations'; import { GitHubQuery, GithubDataSourceOptions, GithubSecureJsonData } from './types'; -export const plugin = new DataSourcePlugin( - DataSource -) +export const plugin = new DataSourcePlugin< + GithubDataSource, + GitHubQuery, + GithubDataSourceOptions, + GithubSecureJsonData +>(GithubDataSource) .setConfigEditor(ConfigEditor) .setVariableQueryEditor(VariableQueryEditor) - .setQueryEditor(QueryEditor) - .setAnnotationQueryCtrl(AnnotationCtrl); + .setQueryEditor(QueryEditor); diff --git a/src/partials/annotations.editor.html b/src/partials/annotations.editor.html deleted file mode 100644 index 2d700de6..00000000 --- a/src/partials/annotations.editor.html +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/src/views/AnnotationQueryEditor.tsx b/src/views/AnnotationQueryEditor.tsx deleted file mode 100644 index 6c9a84fa..00000000 --- a/src/views/AnnotationQueryEditor.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React, { useMemo, useState, useCallback } from 'react'; -import coreModule from 'grafana/app/core/core_module'; - -import { AnnotationQueryRequest } from '@grafana/data'; - -import QueryEditor from './QueryEditor'; -import { DataSource } from '../DataSource'; -import { GitHubAnnotationQuery, GitHubQuery, QueryType } from '../types'; -import { QueryInlineField } from '../components/Forms'; -import FieldSelect from '../components/FieldSelect'; -import { isValid } from '../validation'; -import { selectors } from 'components/selectors'; - -interface Props { - datasource: DataSource; - annotation: AnnotationQueryRequest; - change: (query: AnnotationQueryRequest) => void; -} - -const AnnotationQueryEditor = (props: Props) => { - const [choices, setChoices] = useState(); - const { annotation } = props; - - useMemo(async () => { - if (isValid(props.annotation.annotation as unknown as GitHubQuery)) { - setChoices(await props.datasource.getChoices(props.annotation.annotation as unknown as GitHubQuery)); - } - }, [props.annotation.annotation, props.datasource]); - - const onChange = useCallback( - (query: GitHubAnnotationQuery) => { - props.change({ - ...props.annotation, - annotation: { - ...annotation.annotation, - ...query, - datasource: props.datasource.name, - }, - }); - }, - [props, annotation.annotation] - ); - - return ( -
- - onChange({ - ...query, - field: annotation.annotation.field, - }) - } - onRunQuery={() => {}} - queryTypes={[ - QueryType.Commits, - QueryType.Releases, - QueryType.Pull_Requests, - QueryType.Issues, - QueryType.Milestones, - QueryType.Tags, - ]} - /> - - {/* Only display the field selection items when the user has created an actual query */} - {isValid(props.annotation.annotation as unknown as GitHubQuery) && ( - <> - - - onChange({ - ...annotation.annotation, - field: value, - } as unknown as GitHubQuery) - } - options={choices || []} - width={64} - value={annotation.annotation.field} - loading={!choices} - /> - - - - onChange({ - ...annotation.annotation, - timeField: value, - } as unknown as GitHubQuery) - } - options={choices || []} - width={64} - value={annotation.annotation.timeField} - loading={!choices} - /> - - - )} -
- ); -}; - -coreModule.directive('githubAnnotationEditor', [ - 'reactDirective', - (reactDirective: any) => { - return reactDirective(AnnotationQueryEditor, ['annotation', 'datasource', 'change']); - }, -]); diff --git a/src/views/QueryEditor.tsx b/src/views/QueryEditor.tsx index 1fcc90a3..089a425e 100644 --- a/src/views/QueryEditor.tsx +++ b/src/views/QueryEditor.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, useCallback } from 'react'; import { QueryEditorProps, SelectableValue } from '@grafana/data'; import { Select } from '@grafana/ui'; -import { DataSource } from '../DataSource'; +import { GithubDataSource } from '../DataSource'; import { GithubDataSourceOptions, GitHubQuery, QueryType, DefaultQueryType } from '../types'; import { QueryInlineField } from '../components/Forms'; import { isValid } from '../validation'; @@ -21,7 +21,7 @@ import QueryEditorPackages from './QueryEditorPackages'; import QueryEditorVulnerabilities from './QueryEditorVulnerabilities'; import QueryEditorProjects from './QueryEditorProjects'; -interface Props extends QueryEditorProps { +interface Props extends QueryEditorProps { queryTypes?: string[]; } export const LeftColumnWidth = 10; diff --git a/src/views/QueryEditorRepository.tsx b/src/views/QueryEditorRepository.tsx index dd94a8d0..b4c580e7 100644 --- a/src/views/QueryEditorRepository.tsx +++ b/src/views/QueryEditorRepository.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Input, InlineFormLabel } from '@grafana/ui'; import { QueryEditorRow } from '../components/Forms'; @@ -14,6 +14,14 @@ const QueryEditorRepositories = (props: Props) => { const [repository, setRepository] = useState(props.repository || ''); const [owner, setOwner] = useState(props.owner || ''); + useEffect(() => { + setRepository(props.repository || ''); + }, [props.repository]); + + useEffect(() => { + setOwner(props.owner || ''); + }, [props.owner]); + return ( void; - datasource: DataSource; + datasource: GithubDataSource; } const VariableQueryEditor = (props: Props) => {