feat: better UI

united-manufacturing-hub · Nov 2, 2022 · bd4a96b · bd4a96b
1 parent 9cb2484
commit bd4a96b
Showing 1 changed file with 42 additions and 38 deletions.
diff --git a/src/QueryEditor.tsx b/src/QueryEditor.tsx
@@ -679,55 +679,59 @@ export class QueryEditor extends PureComponent<Props> {
                 error={'This input is required and must be a valid number'}
                 disabled={!this.timeBucketEnabled}
               >
-                <Input label={'Size'} value={this.selectedTimeBucketSize} onChange={this.onTimeBucketSizeChange} />
+                <Input
+                  label={'Size'}
+                  value={this.selectedTimeBucketSize}
+                  onChange={this.onTimeBucketSizeChange}
+                  width={20}
+                />
               </InlineField>
               <InlineField label={'Unit'} disabled={!this.timeBucketEnabled}>
                 <Select
                   options={this.tagTimeBucketUnitOptions}
-                  width={30}
+                  width={20}
                   defaultValue={this.defaultTimeBucketUnit.value}
                   value={this.selectedTimeBucketUnit}
                   onChange={this.onTimeBucketUnitChange}
                 />
               </InlineField>
             </InlineFieldRow>
           </div>
-          <div className={'gf-form'}>
-            <InlineLabel
-              width={'auto'}
-              tooltip={'How missing data should be filled. For more information, please visit our documentation.'}
-            >
-              Handling missing values
-            </InlineLabel>
-            <Select
-              options={this.tagGapfillingOptions}
-              width={30}
-              defaultValue={this.tagGapfillingOptions[0]}
-              value={this.selectedConfigurationGapfilling}
-              onChange={this.onConfigurationGapfillingChange}
-              disabled={!this.timeBucketEnabled}
-            />
-          </div>
-          <div className={'gf-form'}>
-            <InlineLabel width={'auto'} tooltip={'Include last datapoint before time interval'}>
-              Include last datapoint before time interval
-            </InlineLabel>
-            <InlineSwitch
-              value={this.selectedConfigurationIncludeLastDatapoint}
-              onClick={this.onConfigurationIncludeLastDatapointChange}
-              disabled={!this.timeBucketEnabled}
-            />
-          </div>
-          <div className={'gf-form'}>
-            <InlineLabel width={'auto'} tooltip={'Include next datapoint after time interval'}>
-              Include next datapoint after time interval
-            </InlineLabel>
-            <InlineSwitch
-              value={this.selectedConfigurationIncludeNextDatapoint}
-              onClick={this.onConfigurationIncludeNextDatapointChange}
-              disabled={!this.timeBucketEnabled}
-            />
-          </div>
+          <FieldSet hidden={!this.timeBucketEnabled}>
+            <div className={'gf-form'}>
+              <InlineLabel
+                width={60}
+                tooltip={'How missing data should be filled. For more information, please visit our documentation.'}
+              >
+                Handling missing values
+              </InlineLabel>
+              <Select
+                options={this.tagGapfillingOptions}
+                width={30}
+                defaultValue={this.tagGapfillingOptions[0]}
+                value={this.selectedConfigurationGapfilling}
+                onChange={this.onConfigurationGapfillingChange}
+              />
+            </div>
+            <div className={'gf-form'}>
+              <InlineLabel width={60} tooltip={'Include last datapoint before time interval'}>
+                Include last datapoint before time interval
+              </InlineLabel>
+              <InlineSwitch
+                value={this.selectedConfigurationIncludeLastDatapoint}
+                onClick={this.onConfigurationIncludeLastDatapointChange}
+              />
+            </div>
+            <div className={'gf-form'}>
+              <InlineLabel width={60} tooltip={'Include next datapoint after time interval'}>
+                Include next datapoint after time interval
+              </InlineLabel>
+              <InlineSwitch
+                value={this.selectedConfigurationIncludeNextDatapoint}
+                onClick={this.onConfigurationIncludeNextDatapointChange}
+              />
+            </div>
+          </FieldSet>
         </FieldSet>
       </div>
     );