migrate angular annotation editor (#196)

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

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": {

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<GitHubQuery, GithubDataSourceOptions> {
+export class GithubDataSource extends DataSourceWithBackend<GitHubQuery, GithubDataSourceOptions> {
   templateSrv = getTemplateSrv();
 
   constructor(instanceSettings: DataSourceInstanceSettings<GithubDataSourceOptions>) {
     super(instanceSettings);
+    this.annotations = {
+      QueryEditor,
+      prepareAnnotation,
+    };
   }
 
   // Only execute queries that have a query type

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;
+};

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, GitHubQuery, GithubDataSourceOptions, GithubSecureJsonData>(
-  DataSource
-)
+export const plugin = new DataSourcePlugin<
+  GithubDataSource,
+  GitHubQuery,
+  GithubDataSourceOptions,
+  GithubSecureJsonData
+>(GithubDataSource)
   .setConfigEditor(ConfigEditor)
   .setVariableQueryEditor(VariableQueryEditor)
-  .setQueryEditor(QueryEditor)
-  .setAnnotationQueryCtrl(AnnotationCtrl);
+  .setQueryEditor(QueryEditor);

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<DataSource, GitHubQuery, GithubDataSourceOptions> {
+interface Props extends QueryEditorProps<GithubDataSource, GitHubQuery, GithubDataSourceOptions> {
   queryTypes?: string[];
 }
 export const LeftColumnWidth = 10;

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<string>(props.repository || '');
   const [owner, setOwner] = useState<string>(props.owner || '');
 
+  useEffect(() => {
+    setRepository(props.repository || '');
+  }, [props.repository]);
+
+  useEffect(() => {
+    setOwner(props.owner || '');
+  }, [props.owner]);
+
   return (
     <QueryEditorRow>
       <InlineFormLabel

src/views/VariableQueryEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 
 import QueryEditor from './QueryEditor';
-import { DataSource } from '../DataSource';
+import { GithubDataSource } from '../DataSource';
 import { GitHubVariableQuery, DefaultQueryType, QueryType } from '../types';
 import { QueryInlineField } from '../components/Forms';
 import FieldSelect from '../components/FieldSelect';
@@ -10,7 +10,7 @@ import { isValid } from '../validation';
 interface Props {
   query: GitHubVariableQuery;
   onChange: (query: GitHubVariableQuery, definition: string) => void;
-  datasource: DataSource;
+  datasource: GithubDataSource;
 }
 
 const VariableQueryEditor = (props: Props) => {