[feat]: Make search panel more compact, button more visible (jaegertr…

…acing#724) * feat: redesign the search box for jaeger-ui Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com> * chore: remove comments Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com> * design button Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com> Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>
vvvprabhakar · Jul 4, 2021 · cf893e5 · cf893e5
1 parent 060b708
commit cf893e5
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 36 deletions.
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.css b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.css
@@ -35,6 +35,12 @@ limitations under the License.
   margin-top: 0.5em;
 }
 
+.SearchForm--submit {
+  background-color: #11939a;
+  color: white;
+  float: right;
+}
+
 .SearchForm--tagsHintInfo {
   padding-left: 1.7em;
 }

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Form, Input, Button, Popover, Select } from 'antd';
+import { Form, Input, Button, Popover, Select, Row, Col } from 'antd';
 import _get from 'lodash/get';
 import logfmtParser from 'logfmt/lib/logfmt_parser';
 import { stringify as logfmtStringify } from 'logfmt/lib/stringify';
@@ -377,14 +377,21 @@ export class SearchFormImpl extends React.PureComponent {
               </div>
             }
           >
-            <Field
-              name="startDate"
-              type="date"
-              component={AdaptedInput}
-              placeholder="Start Date"
-              props={{ disabled }}
-            />
-            <Field name="startDateTime" type="time" component={AdaptedInput} props={{ disabled }} />
+            <Row gutter={16}>
+              <Col className="gutter-row" span={12}>
+                <Field
+                  name="startDate"
+                  type="date"
+                  component={AdaptedInput}
+                  placeholder="Start Date"
+                  props={{ disabled }}
+                />
+              </Col>
+
+              <Col className="gutter-row" span={12}>
+                <Field name="startDateTime" type="time" component={AdaptedInput} props={{ disabled }} />
+              </Col>
+            </Row>
           </FormItem>,
 
           <FormItem
@@ -406,36 +413,49 @@ export class SearchFormImpl extends React.PureComponent {
               </div>
             }
           >
-            <Field
-              name="endDate"
-              type="date"
-              component={AdaptedInput}
-              placeholder="End Date"
-              props={{ disabled }}
-            />
-            <Field name="endDateTime" type="time" component={AdaptedInput} props={{ disabled }} />
+            <Row gutter={16}>
+              <Col className="gutter-row" span={12}>
+                <Field
+                  name="endDate"
+                  type="date"
+                  component={AdaptedInput}
+                  placeholder="End Date"
+                  props={{ disabled }}
+                />
+              </Col>
+
+              <Col className="gutter-row" span={12}>
+                <Field name="endDateTime" type="time" component={AdaptedInput} props={{ disabled }} />
+              </Col>
+            </Row>
           </FormItem>,
         ]}
 
-        <FormItem label="Min Duration">
-          <Field
-            name="minDuration"
-            component={ValidatedAdaptedInput}
-            placeholder={placeholderDurationFields}
-            props={{ disabled }}
-            validate={validateDurationFields}
-          />
-        </FormItem>
-
-        <FormItem label="Max Duration">
-          <Field
-            name="maxDuration"
-            component={ValidatedAdaptedInput}
-            placeholder={placeholderDurationFields}
-            props={{ disabled }}
-            validate={validateDurationFields}
-          />
-        </FormItem>
+        <Row gutter={16}>
+          <Col className="gutter-row" span={12}>
+            <FormItem label="Max Duration">
+              <Field
+                name="maxDuration"
+                component={ValidatedAdaptedInput}
+                placeholder={placeholderDurationFields}
+                props={{ disabled }}
+                validate={validateDurationFields}
+              />
+            </FormItem>
+          </Col>
+
+          <Col className="gutter-row" span={12}>
+            <FormItem label="Min Duration">
+              <Field
+                name="minDuration"
+                component={ValidatedAdaptedInput}
+                placeholder={placeholderDurationFields}
+                props={{ disabled }}
+                validate={validateDurationFields}
+              />
+            </FormItem>
+          </Col>
+        </Row>
 
         <FormItem label="Limit Results">
           <Field
@@ -449,6 +469,7 @@ export class SearchFormImpl extends React.PureComponent {
 
         <Button
           htmlType="submit"
+          className="SearchForm--submit"
           disabled={disabled || noSelectedService || invalid}
           data-test={markers.SUBMIT_BTN}
         >