Merge pull request #174 from sasaki77/editor-ui

ENH: remove gf-form appearances in QueryEditor
sasaki77 · Nov 15, 2024 · 32355fe · 32355fe
2 parents 420e70d + 90386ea
commit 32355fe
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 139 deletions.
diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx
@@ -66,6 +66,7 @@ export class ConfigEditor extends PureComponent<Props> {
               label="Use Backend"
               labelWidth={LABEL_WIDTH}
               tooltip="Checking this option will enable the data retrieval with backend. The archived data is retrieved and processed on Grafana server, then the data is sent to Grafana client."
+              interactive={true}
             >
               <InlineSwitch value={options.jsonData.useBackend ?? false} onChange={this.onUseBEChange} />
             </InlineField>
@@ -74,6 +75,7 @@ export class ConfigEditor extends PureComponent<Props> {
             <InlineField
               label="Default Operator"
               labelWidth={LABEL_WIDTH}
+              interactive={true}
               tooltip={
                 <p>
                   Controls processing of data during data retrieval. Refer{' '}
@@ -102,13 +104,19 @@ export class ConfigEditor extends PureComponent<Props> {
             <InlineField
               label="Use live feature (Alpha)"
               labelWidth={LABEL_WIDTH}
+              interactive={true}
               tooltip="(Caution) This is a alpha feature. Live feature provides live updating with PVWS WebSocket server."
             >
               <InlineSwitch value={options.jsonData.useLiveUpdate ?? false} onChange={this.onUseLiveUpdateChange} />
             </InlineField>
           </div>
           <div className="gf-form-inline">
-            <InlineField label="PVWS URI (Alpha)" labelWidth={LABEL_WIDTH} tooltip="URI for PVWS WebSocket server.">
+            <InlineField
+              label="PVWS URI (Alpha)"
+              labelWidth={LABEL_WIDTH}
+              interactive={true}
+              tooltip="URI for PVWS WebSocket server."
+            >
               <input
                 type="text"
                 value={options.jsonData.liveUpdateURI}

diff --git a/src/components/Functions.tsx b/src/components/Functions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { InlineFormLabel } from '@grafana/ui';
+import { InlineFieldRow, InlineLabel } from '@grafana/ui';
 import { createFuncDescriptor } from '../aafunc';
 import { FuncDef, FunctionDescriptor } from '../types';
 
@@ -77,44 +77,36 @@ class Functions extends React.PureComponent<FunctionsProps> {
   render() {
     const { funcs, onRunQuery } = this.props;
     return (
-      <div className="gf-form-inline">
-        <div className="gf-form">
-          <InlineFormLabel
-            width={6}
-            className="query-keyword"
-            tooltip={
-              <p>
-                Functions are used to apply post processing to the data. You can add, move and remove functions. Select
-                preffered functions from categoires. Some functions require parameters. You can edit parameters after
-                adding the function. Functions are applied from left to right.
-              </p>
-            }
-          >
-            Functions
-          </InlineFormLabel>
-        </div>
-        <div className="gf-form">
-          {funcs &&
-            funcs.map((func, index) => (
-              <FunctionElem
-                key={index}
-                index={index}
-                func={func}
-                onMoveLeft={this.handleMoveLeft}
-                onMoveRight={this.handleMoveRight}
-                onRemove={this.handleRemoveFunction}
-                onChange={this.onFuncChange}
-                onRunQuery={onRunQuery}
-              />
-            ))}
-        </div>
-        <div className="gf-form">
-          <FunctionAdd addFunc={this.addFunction} />
-        </div>
-        <div className="gf-form gf-form--grow">
-          <div className="gf-form-label gf-form-label--grow"></div>
-        </div>
-      </div>
+      <InlineFieldRow>
+        <InlineLabel
+          width={12}
+          interactive={true}
+          tooltip={
+            <p>
+              Functions are used to apply post processing to the data. You can add, move and remove functions. Select
+              preffered functions from categoires. Some functions require parameters. You can edit parameters after
+              adding the function. Functions are applied from left to right.
+            </p>
+          }
+        >
+          Functions
+        </InlineLabel>
+        {funcs &&
+          funcs.map((func, index) => (
+            <FunctionElem
+              key={index}
+              index={index}
+              func={func}
+              onMoveLeft={this.handleMoveLeft}
+              onMoveRight={this.handleMoveRight}
+              onRemove={this.handleRemoveFunction}
+              onChange={this.onFuncChange}
+              onRunQuery={onRunQuery}
+            />
+          ))}
+        <FunctionAdd addFunc={this.addFunction} />
+        <div className="gf-form-label gf-form-label--grow"></div>
+      </InlineFieldRow>
     );
   }
 }