Allow to set auto mode per scale

Author: asimonok

src/TimeSeriesPanel.tsx

@@ -113,11 +113,13 @@ export const TimeSeriesPanel = ({
 
   const onUpsertTimescale = useCallback(
     async (formData: TimescaleItem) => {
-      const { min, max, description, scale } = formData;
+      const { min, max, description, scale, auto } = formData;
       const user = config.bootData.user;
       const userId = user?.id;
       const sanitizedDescription = description.replace(/\"|\'/g, '');
-      const rawSql = `insert into scales values ('${well}', ${userId}, '${scale}', ${min}, ${max}, '${sanitizedDescription}') on conflict (well, user_id, metric) do update set min = excluded.min, max = excluded.max;`;
+      const rawSql = `insert into scales values ('${well}', ${userId}, '${scale}', ${auto ? null : min}, ${
+        auto ? null : max
+      }, '${sanitizedDescription}') on conflict (well, user_id, metric) do update set min = excluded.min, max = excluded.max;`;
       const target = data.request?.targets[0];
       const datasourceId = target?.datasource?.uid;
       const refId = target?.refId;

src/plugins/timescales/TimescaleEditorForm.tsx

@@ -29,21 +29,28 @@ export interface TimescaleItem {
    *
    * @type {number}
    */
-  min: number;
+  min: number | null;
 
   /**
    * Max
    *
    * @type {number}
    */
-  max: number;
+  max: number | null;
 
   /**
    * Description
    *
    * @type {string}
    */
   description: string;
+
+  /**
+   * Auto
+   *
+   * @type {boolean}
+   */
+  auto: boolean;
 }
 
 interface TimescaleEditorFormProps extends HTMLAttributes<HTMLDivElement> {
@@ -134,12 +141,19 @@ export const TimescaleEditorForm = React.forwardRef<HTMLDivElement, TimescaleEdi
        * Set Table Data
        */
       setEditableTableData(
-        scales.map((scale) => ({
-          scale,
-          min: scaleValuesMap.get(scale)?.min ?? 0,
-          max: scaleValuesMap.get(scale)?.max ?? 0,
-          description: '',
-        }))
+        scales.map((scale) => {
+          const min = scaleValuesMap.get(scale)?.min;
+          const max = scaleValuesMap.get(scale)?.max;
+          const auto = min === null || max === null;
+
+          return {
+            scale,
+            min: min ?? 0,
+            max: max ?? 0,
+            description: '',
+            auto,
+          };
+        })
       );
     }, [timescalesFrame, scales]);
 
@@ -155,6 +169,12 @@ export const TimescaleEditorForm = React.forwardRef<HTMLDivElement, TimescaleEdi
           cell: ({ getValue }) => getValue(),
           enableResizing: false,
         },
+        {
+          id: 'auto',
+          accessorKey: 'auto',
+          header: () => 'Auto',
+          enableResizing: false,
+        },
         {
           id: 'min',
           accessorKey: 'min',
@@ -223,6 +243,7 @@ export const TimescaleEditorForm = React.forwardRef<HTMLDivElement, TimescaleEdi
                 setEditableTableData((prev) =>
                   prev.map((scale) => ({
                     ...scale,
+                    auto: false,
                     min: 0,
                     max: 0,
                   }))

src/plugins/timescales/components/EditableTable/EditableTable.styles.ts

@@ -42,5 +42,8 @@ export const Styles = (theme: GrafanaTheme2) => {
         border-bottom: 0;
       }
     `,
+    cellCenter: css`
+      text-align: center;
+    `,
   };
 };

src/plugins/timescales/components/EditableTable/EditableTable.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Input, useStyles2 } from '@grafana/ui';
+import { Checkbox, Input, useStyles2 } from '@grafana/ui';
 import { ColumnDef, flexRender, getCoreRowModel, RowData, useReactTable } from '@tanstack/react-table';
 import { cx } from '@emotion/css';
 import { Styles } from './EditableTable.styles';
@@ -34,7 +34,7 @@ declare module '@tanstack/react-table' {
  * Default Column
  */
 const defaultColumn: Partial<ColumnDef<any>> = {
-  cell: ({ getValue, row: { index }, column: { id }, table }) => {
+  cell: ({ getValue, row: { index, original }, column: { id }, table }) => {
     const initialValue = getValue();
     /**
      *  We need to keep and update the state of the cell normally
@@ -45,7 +45,7 @@ const defaultColumn: Partial<ColumnDef<any>> = {
     /**
      * When the input is blurred, we'll call our table meta's updateData function
      */
-    const onBlur = () => {
+    const onSaveValue = (value: unknown) => {
       table.options.meta?.updateData(index, id, value);
     };
 
@@ -57,12 +57,26 @@ const defaultColumn: Partial<ColumnDef<any>> = {
       setValue(initialValue);
     }, [initialValue]);
 
+    if (id === 'auto') {
+      return (
+        <Checkbox
+          value={value as boolean}
+          onChange={(e) => {
+            setValue(e.currentTarget.checked);
+            onSaveValue(e.currentTarget.checked);
+          }}
+        />
+      );
+    }
+
     return (
       <Input
-        value={value as string}
+        value={original.auto ? '' : (value as string)}
+        placeholder={original ? 'Auto' : ''}
         onChange={(e) => setValue(e.currentTarget.value)}
-        onBlur={onBlur}
+        onBlur={() => onSaveValue(value)}
         type={typeof initialValue === 'number' ? 'number' : 'text'}
+        disabled={original.auto}
       />
     );
   },
@@ -121,7 +135,16 @@ export const EditableTable = <TData,>({ data, columns, onUpdateData }: Props<TDa
           return (
             <tr key={row.id} className={styles.row}>
               {row.getVisibleCells().map((cell) => {
-                return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>;
+                return (
+                  <td
+                    key={cell.id}
+                    className={cx({
+                      [styles.cellCenter]: cell.column.id === 'auto',
+                    })}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                );
               })}
             </tr>
           );