Update RedisGears Script Editor Execution modes (#57)

* Update RedisGears Execution Modes

* Fix tests

Author: mikhail-vl

src/redis-gears-panel/components/redis-gears-panel/redis-gears-panel.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import { shallow } from 'enzyme';
+import React from 'react';
 import { Observable } from 'rxjs';
 import { FieldType, LoadingState, toDataFrame } from '@grafana/data';
-import { Alert, Button, Input, Switch, Table } from '@grafana/ui';
+import { Alert, Button, Input, RadioButtonGroup, Table } from '@grafana/ui';
+import { ExecutionMode } from '../../constants';
 import { CodeEditor } from '../code-editor';
 import { RedisGearsPanel } from './redis-gears-panel';
 
@@ -66,11 +67,18 @@ describe('RedisGearsPanel', () => {
 
   it('Should update unblocking', () => {
     const wrapper = shallow<RedisGearsPanel>(getComponent());
-    const component = wrapper.find(Switch);
-    component.simulate('change', { target: { checked: true } });
+    const component = wrapper.find(RadioButtonGroup);
+    component.simulate('change', ExecutionMode.Unblocking);
     expect(wrapper.state().unblocking).toEqual(true);
   });
 
+  it('Should not update unblocking', () => {
+    const wrapper = shallow<RedisGearsPanel>(getComponent());
+    const component = wrapper.find(RadioButtonGroup);
+    component.simulate('change', ExecutionMode.Blocking);
+    expect(wrapper.state().unblocking).toEqual(false);
+  });
+
   /**
    * Run script button
    */

src/redis-gears-panel/components/redis-gears-panel/redis-gears-panel.tsx

@@ -1,6 +1,5 @@
 import { css } from 'emotion';
 import React, { ChangeEvent, createRef, PureComponent, RefObject } from 'react';
-import { DefaultScript } from 'redis-gears-panel/constants';
 import { Observable } from 'rxjs';
 import {
   DataFrame,
@@ -15,7 +14,8 @@ import {
   toDataFrame,
 } from '@grafana/data';
 import { getDataSourceSrv, toDataQueryError } from '@grafana/runtime';
-import { Alert, Button, InlineField, InlineFormLabel, Input, Switch, Table } from '@grafana/ui';
+import { Alert, Button, InlineField, InlineFormLabel, Input, RadioButtonGroup, Table } from '@grafana/ui';
+import { DefaultScript, ExecutionMode, ExecutionOptions } from '../../constants';
 import { PanelOptions } from '../../types';
 import { CodeEditor } from '../code-editor';
 
@@ -141,7 +141,7 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
     /**
      * Error
      */
-    if (!response || response.state === LoadingState.Error) {
+    if (!response || response.state === LoadingState.Error || !response.data.length) {
       this.setState({
         result: undefined,
         isRunning: false,
@@ -166,7 +166,6 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
     }
 
     let resultDataFrame: DataFrame = response.data[0];
-
     if (resultDataFrame.length === 0) {
       resultDataFrame = toDataFrame({
         fields: [
@@ -236,9 +235,9 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
    *
    * @param event {HTMLInputElement}
    */
-  onChangeUnblocking = (event: ChangeEvent<HTMLInputElement>) => {
+  onChangeUnblocking = (event?: ExecutionMode) => {
     this.setState({
-      unblocking: event.target.checked,
+      unblocking: event ? true : false,
     });
   };
 
@@ -269,15 +268,6 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
     const { height, width } = this.props;
     const { script, result, unblocking, requirements, isRunning, footerHeight, error } = this.state;
 
-    let resultComponent = null;
-
-    /**
-     * Show result table If there is a result
-     */
-    if (result) {
-      resultComponent = <Table noHeader={true} data={result} width={width} height={100} />;
-    }
-
     return (
       <div
         className={css`
@@ -303,23 +293,31 @@ export class RedisGearsPanel extends PureComponent<Props, State> {
         <div ref={this.footerRef}>
           {error && error.message && <Alert title={error.message} onRemove={this.onClearError} />}
 
-          <div className="gf-form-inline">
+          <div className="gf-form">
             <InlineField label={<InlineFormLabel width={6}>Requirements</InlineFormLabel>}>
               <Input css="" value={requirements} onChange={this.onChangeRequirements} width={40} />
             </InlineField>
 
-            <InlineField label={<InlineFormLabel width={6}>Unblocking</InlineFormLabel>}>
-              <Switch css="" value={unblocking} onChange={this.onChangeUnblocking} />
-            </InlineField>
-
-            <div className="gf-form">
-              <Button onClick={this.onRunScript} disabled={isRunning}>
-                {isRunning ? 'Running...' : 'Run script'}
-              </Button>
-            </div>
-
-            {resultComponent}
+            <RadioButtonGroup
+              className={css`
+                margin-right: 4px;
+              `}
+              value={unblocking ? ExecutionMode.Unblocking : ExecutionMode.Blocking}
+              options={ExecutionOptions}
+              onChange={this.onChangeUnblocking}
+            />
+
+            <Button onClick={this.onRunScript} disabled={isRunning}>
+              {isRunning ? 'Running...' : 'Run script'}
+            </Button>
           </div>
+
+          {result && (
+            <>
+              <hr />
+              <Table noHeader={true} data={result} width={width} height={100} />
+            </>
+          )}
         </div>
       </div>
     );

src/redis-gears-panel/constants.ts

@@ -2,3 +2,25 @@
  * Default script
  */
 export const DefaultScript = 'gb = GearsBuilder()';
+
+/**
+ * Execution Mode
+ */
+export enum ExecutionMode {
+  Blocking = 0,
+  Unblocking = 1,
+}
+
+/**
+ * Unblocking options
+ */
+export const ExecutionOptions = [
+  {
+    label: 'Blocking',
+    value: ExecutionMode.Blocking,
+  },
+  {
+    label: 'Unblocking',
+    value: ExecutionMode.Unblocking,
+  },
+];