From 0f914569ef5eb0e1aa7d12b0abbc387bd64b525b Mon Sep 17 00:00:00 2001
From: Meenal Trivedi <79007582+meenal06@users.noreply.github.com>
Date: Wed, 7 Apr 2021 02:19:08 +0530
Subject: [PATCH] [feat]: Make search panel more compact, button more visible
 (#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>
---
 .../components/SearchTracePage/SearchForm.css |  6 ++
 .../components/SearchTracePage/SearchForm.js  | 93 ++++++++++++-------
 2 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.css b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.css
index f3320215fa..caa3c392fc 100644
--- 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
index e2cff1a185..3809143f4c 100644
--- 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}
         >