added type support to listStream, listSchema

added type support to loadSchemaOption

changes in the hook[]

Author: abhishek1305

dist/module.js

@@ -17,7 +17,7 @@
     "links": [],
     "screenshots": [],
     "version": "1.0.0",
-    "updated": "2022-12-27"
+    "updated": "2023-01-10"
   },
   "routes": [
     {

dist/plugin.json

@@ -2,7 +2,7 @@ import React, { ComponentType, ChangeEvent, useState } from 'react';
 import { LegacyForms, AsyncSelect, Label, InlineField, InlineFieldRow } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from '../datasource';
-import { MyDataSourceOptions, MyQuery } from '../types';
+import { Fields, MyDataSourceOptions, MyQuery } from '../types';
 
 const { FormField } = LegacyForms;
 
@@ -13,40 +13,44 @@ interface Props extends QueryEditorProps<DataSource, MyQuery, MyDataSourceOption
 export const QueryEditor: ComponentType<Props> = ({ datasource, onChange, onRunQuery, query }) => {
 
   const { queryText } = query;
-  const [stream, setStream] = React.useState<SelectableValue<string | number>>();
+  //const [stream, setStream] = React.useState<SelectableValue<string | number>>();
 
   const loadAsyncOptions = React.useCallback(() => {
-    return datasource.listMetrics().then(
+    return datasource.listStreams().then(
       (result) => {
         const stream = result.map((data) => ({ label: data.name, value: data.name }));
-        setStream(stream);
         return stream;
       },
       (response) => {
-        setStream({ label: '', value: '' });
+        //setStream({ label: '', value: '' });
         throw new Error(response.statusText);
       }
     );
   }, [datasource]);
 
   const [value, setValue] = useState<SelectableValue<string>>();
-  const [schema, setSchema] = React.useState<string | number>();
+  const [schema = '', setSchema] = React.useState<string | number>();
+  //const [fielder, setFielder] = React.useState<string | number>();
 
   const loadSchemaOptions = React.useCallback((value) => {
     if (value) {
       return datasource.listSchema(value).then(
         (result) => {
-          const schema = result.map((data) => (data.name));
-          const schemaToText = schema.join(", ")
-          setSchema(schemaToText);
+          if (result.fields) {
+            const schema = result.fields.map((data: Fields) => (data.name));
+            const schemaToText = schema.join(", ")
+            setSchema(schemaToText);
+            return schema;
+          }
           return schema;
         },
         (response) => {
           throw new Error(response.statusText);
         }
       );
     }
-  }, [value]);
+    return '';
+  }, [datasource, schema]);
 
   const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange({ ...query, queryText: event.target.value });
@@ -58,11 +62,11 @@ export const QueryEditor: ComponentType<Props> = ({ datasource, onChange, onRunQ
     },
       2000)
     return () => clearTimeout(getData)
-  }, [queryText])
+  }, [onRunQuery, queryText])
 
   React.useEffect(() => {
     loadSchemaOptions(value)
-  }, [value]);
+  }, [loadSchemaOptions, value]);
 
   return (
     <>
@@ -102,4 +106,4 @@ export const QueryEditor: ComponentType<Props> = ({ datasource, onChange, onRunQ
       />
     </>
   );
-};
+};

src/components/QueryEditor.tsx

@@ -1,5 +1,4 @@
-import { getBackendSrv, BackendSrvRequest, FetchResponse, getTemplateSrv } from "@grafana/runtime";
-
+import { getBackendSrv, BackendSrvRequest, FetchResponse } from "@grafana/runtime";
 import {
   DataQueryRequest,
   DataQueryResponse,
@@ -9,19 +8,20 @@ import {
   DataFrame,
   FieldType,
   guessFieldTypeFromValue,
-  ScopedVars
 } from '@grafana/data';
 import { lastValueFrom, of } from 'rxjs';
-import { isArray } from 'lodash';
+import { catchError, map } from 'rxjs/operators';
+import { isArray, isNull } from "lodash";
+
 import {
   MyQuery,
   MyDataSourceOptions,
-  StreamConfig,
-  StreamPayloadConfig,
   QueryEditorMode,
+  StreamName,
+  StreamList,
+  //Fields,
+  ListSchemaResponse
 } from './types';
-import { catchError, map } from 'rxjs/operators';
-
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
   url: string;
   withCredentials: boolean;
@@ -118,48 +118,50 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     return dataFrame;
   }
 
-  async listMetrics() {
-    const errorMessageBase = 'Parseable server is not reachable';
-    try {
-      const response = await lastValueFrom(
-        this.doFetch({
-          url: this.url + '/api/v1/logstream',
-          method: 'GET',
-        }).pipe(map((response) => response))
-      );
-      return response.data;
-    } catch (err) {
-      if (typeof err === 'string') {
-        return {
-          status: 'error',
-          message: err,
-        };
-      }
-    }
+  async listStreams(): Promise<StreamList[]> {
+    return lastValueFrom(
+      this.doFetch({
+        url: this.url + '/api/v1/logstream',
+        method: 'GET',
+      }).pipe(
+        map((response) =>
+          isArray(response.data)
+            ? response.data
+            : []
+        ),
+        catchError((err) => {
+          console.error(err);
+
+          return of([]);
+        }))
+    );
   }
 
-  async listSchema(streamname) {
-    const errorMessageBase = 'Parseable server is not reachable';
-    try {
-      const response = await lastValueFrom(
+  async listSchema(streamname: StreamName): Promise<ListSchemaResponse> {
+    if (streamname) {
+      return lastValueFrom(
         this.doFetch({
           url: this.url + '/api/v1/logstream/' + streamname.value + '/schema',
           method: 'GET',
-        }).pipe(map((response) => response))
-      );
-      return response.data.fields;
-    } catch (err) {
-      if (typeof err === 'string') {
-        return {
-          status: 'error',
-          message: err,
-        };
-      }
+        }).pipe(
+          map((response) =>
+            (typeof response.data === 'object' && !isNull(response.data))
+              ? response.data
+              : {}
+          ),
+          catchError((err) => {
+            console.error(err);
+            return of({
+              status: 'error',
+              message: err.statusText
+            })
+
+          }))
+      )
     }
+    return { fields: [] }
   }
 
-
-
   async testDatasource() {
     const errorMessageBase = 'Parseable server is not reachable';
     try {

src/datasource.ts

@@ -31,13 +31,6 @@ export interface MyDataSourceOptions extends DataSourceJsonData {
 export interface MySecureJsonData {
   password?: string;
 }
-
-declare module 'react' {
-  interface DOMAttributes<T> {
-    css?: InterpolationWithTheme<any>;
-  }
-}
-
 export interface StreamPayloadConfig {
   width?: number;
   placeholder?: string;
@@ -55,4 +48,30 @@ export interface StreamConfig {
   payloads?: StreamPayloadConfig[];
 }
 
+export interface StreamName {
+  label: String | Number;
+  value: String | Number;
+}
+
+export interface ListSchemaResponse {
+  fields?: [] | undefined;
+  status?: string;
+  message?: string;
+}
+
+export interface Fields {
+  name?: string;
+  data_type?: "Utf8";
+  nullable?: boolean;
+  dict_id?: number;
+  dict_is_ordered?: boolean;
+}
+
+export interface Schema {
+  schema?: string[];
+}
+export interface StreamList {
+  name?: string;
+}
+
 export type QueryEditorMode = "code" | "builder";