Add DatetimeField

pkg/plugin/types.go

@@ -3,8 +3,14 @@ package plugin
 import "github.com/aws/aws-sdk-go/service/dynamodb"
 
 type QueryModel struct {
-	QueryText string
-	Limit     int64
+	QueryText      string
+	Limit          int64
+	DatetimeFields []DatetimeField
+}
+
+type DatetimeField struct {
+	Name   string
+	Format int
 }
 
 type DynamoDBDataType int

src/components/QueryEditor.css

@@ -0,0 +1,4 @@
+.datetime-fields {
+    justify-content: start;
+    margin-bottom: 5px;
+}

src/components/QueryEditor.tsx

@@ -1,14 +1,30 @@
-import React, { useRef } from "react";
-import { Button, CodeEditor, Field, InlineField, Input } from "@grafana/ui";
-import { QueryEditorProps } from "@grafana/data";
+import React, { useRef, useState } from "react";
+import { Button, CodeEditor, Field, InlineField, InlineFieldRow, Input, Select, TagList } from "@grafana/ui";
+import { QueryEditorProps, SelectableValue } from "@grafana/data";
 import { DataSource } from "../datasource";
-import { DynamoDBDataSourceOptions, DynamoDBQuery } from "../types";
+import { DynamoDBDataSourceOptions, DynamoDBQuery, DatetimeFormat } from "../types";
 import * as monacoType from "monaco-editor/esm/vs/editor/editor.api";
+import "./QueryEditor.css"
 
 type Props = QueryEditorProps<DataSource, DynamoDBQuery, DynamoDBDataSourceOptions>;
 
+const datetimeFormatOptions: Array<SelectableValue<DatetimeFormat>> = [
+  {
+    label: "ISO 8601",
+    value: DatetimeFormat.ISO8601,
+    description: "Represents the date and time in UTC, e.g., 2023-05-23T12:34:56Z"
+  },
+  {
+    label: "Unix timestamp",
+    value: DatetimeFormat.UnixTimestamp,
+    description: "The number of seconds that have elapsed since January 1, 1970 (also known as the Unix epoch), e.g., 1674512096"
+  }
+]
+
 export function QueryEditor({ query, onChange }: Props) {
   const codeEditorRef = useRef<monacoType.editor.IStandaloneCodeEditor | null>(null);
+  const [datetimeFieldInput, setDatetimeFieldInput] = useState<string>("")
+  const [datetimeFormatInput, setDatetimeFormatInput] = useState<DatetimeFormat>(DatetimeFormat.ISO8601)
 
   const onQueryTextChange = (text: string) => {
     onChange({ ...query, queryText: text });
@@ -32,6 +48,23 @@ export function QueryEditor({ query, onChange }: Props) {
     }
   };
 
+  const onAddDatetimeField = (name: string, format: DatetimeFormat) => {
+    if (name) {
+      onChange({
+        ...query,
+        datetimeFields: [...query.datetimeFields, { name: name, format: format }]
+      });
+      setDatetimeFieldInput("")
+    }
+  }
+
+  const onRemoveDatetimeField = (name: string) => {
+    onChange({
+      ...query,
+      datetimeFields: query.datetimeFields.filter(e => e.name !== name)
+    });
+  }
+
   const onCodeEditorDidMount = (e: monacoType.editor.IStandaloneCodeEditor) => {
     codeEditorRef.current = e;
   };
@@ -41,9 +74,21 @@ export function QueryEditor({ query, onChange }: Props) {
       <InlineField label="Limit" tooltip="(Optional) The maximum number of items to evaluate">
         <Input type="number" min={0} value={query.limit} onChange={onLimitChange} aria-label="Limit" />
       </InlineField>
+      <InlineFieldRow label="Add datetime field">
+        <InlineField label="Field" tooltip="Field which has datetime data type">
+          <Input value={datetimeFieldInput} onChange={e => setDatetimeFieldInput(e.currentTarget.value)} />
+        </InlineField>
+        <InlineField label="Format">
+          <Select options={datetimeFormatOptions} value={datetimeFormatInput} width={30}
+            onChange={sv => sv.value && setDatetimeFormatInput(sv.value)}></Select>
+        </InlineField>
+        <Button onClick={() => onAddDatetimeField(datetimeFieldInput, datetimeFormatInput)}>Add</Button>
+      </InlineFieldRow>
+      <TagList className="datetime-fields" tags={query.datetimeFields.map(f => f.name)} onClick={(n, _) => onRemoveDatetimeField(n)} />
+
       <Field label="Query Text" description="The PartiQL statement representing the operation to run">
         <CodeEditor
-          onChange={onQueryTextChange}
+          onBlur={onQueryTextChange}
           value={query.queryText || ""}
           width="100%"
           height="300px"

src/types.ts

@@ -4,10 +4,12 @@ import { DataQuery } from '@grafana/schema';
 export interface DynamoDBQuery extends DataQuery {
   queryText?: string;
   limit?: number
+  datetimeFields: Array<DatetimeField>
 }
 
 export const DEFAULT_QUERY: Partial<DynamoDBQuery> = {
   queryText: "",
+  datetimeFields: []
 };
 
 export interface DynamoDBDataSourceOptions extends AwsAuthDataSourceJsonData {
@@ -16,4 +18,11 @@ export interface DynamoDBDataSourceOptions extends AwsAuthDataSourceJsonData {
 
 export interface DynamoDBDataSourceSecureJsonData extends AwsAuthDataSourceSecureJsonData { }
 
-
+export enum DatetimeFormat {
+  ISO8601 = 1,
+  UnixTimestamp
+}
+export interface DatetimeField {
+  name: string
+  format: DatetimeFormat
+}