From 5858c6405d40a6d47d3acc87a668e001c56a024d Mon Sep 17 00:00:00 2001
From: Meenal Trivedi <meenaltrivedi6102@gmail.com>
Date: Tue, 6 Apr 2021 16:26:58 +0530
Subject: [PATCH 1/3] feat: redesign the search box for jaeger-ui

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>
---
 .../components/SearchTracePage/SearchForm.js  | 100 +++++++++++-------
 1 file changed, 63 insertions(+), 37 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
index e2cff1a185..5113191ba1 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';
@@ -253,6 +253,10 @@ export function submitForm(fields, searchTraces) {
   });
 }
 
+// type FileLoaderProps = {
+//   loadJsonTraces: (fileList: FileList) => void;
+// // };
+
 export class SearchFormImpl extends React.PureComponent {
   render() {
     const {
@@ -377,14 +381,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 +417,50 @@ 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>
+        {/* <div className="inline"> */}
+
+        <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
@@ -446,6 +471,7 @@ export class SearchFormImpl extends React.PureComponent {
             props={{ disabled, min: 1, max: getConfigValue('search.maxLimit') }}
           />
         </FormItem>
+        {/* </div> */}
 
         <Button
           htmlType="submit"

From 98f598897c1c80f69c5dec7035dff837ad452a8d Mon Sep 17 00:00:00 2001
From: Meenal Trivedi <79007582+meenal06@users.noreply.github.com>
Date: Tue, 6 Apr 2021 20:26:10 +0530
Subject: [PATCH 2/3] chore: remove comments

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>
---
 .../jaeger-ui/src/components/SearchTracePage/SearchForm.js  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
index 5113191ba1..8e3357a46d 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
@@ -253,10 +253,6 @@ export function submitForm(fields, searchTraces) {
   });
 }
 
-// type FileLoaderProps = {
-//   loadJsonTraces: (fileList: FileList) => void;
-// // };
-
 export class SearchFormImpl extends React.PureComponent {
   render() {
     const {
@@ -434,7 +430,6 @@ export class SearchFormImpl extends React.PureComponent {
             </Row>
           </FormItem>,
         ]}
-        {/* <div className="inline"> */}
 
         <Row gutter={16}>
           <Col className="gutter-row" span={12}>
@@ -471,7 +466,6 @@ export class SearchFormImpl extends React.PureComponent {
             props={{ disabled, min: 1, max: getConfigValue('search.maxLimit') }}
           />
         </FormItem>
-        {/* </div> */}
 
         <Button
           htmlType="submit"

From 480d78e03d3248cde9d4ae0a3d7adcda649d3d9e Mon Sep 17 00:00:00 2001
From: Meenal Trivedi <meenaltrivedi6102@gmail.com>
Date: Wed, 7 Apr 2021 00:12:41 +0530
Subject: [PATCH 3/3] design button

Signed-off-by: Meenal Trivedi <meenaltrivedi6102@gmail.com>
---
 .../jaeger-ui/src/components/SearchTracePage/SearchForm.css | 6 ++++++
 .../jaeger-ui/src/components/SearchTracePage/SearchForm.js  | 1 +
 2 files changed, 7 insertions(+)

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 8e3357a46d..3809143f4c 100644
--- a/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
+++ b/packages/jaeger-ui/src/components/SearchTracePage/SearchForm.js
@@ -469,6 +469,7 @@ export class SearchFormImpl extends React.PureComponent {
 
         <Button
           htmlType="submit"
+          className="SearchForm--submit"
           disabled={disabled || noSelectedService || invalid}
           data-test={markers.SUBMIT_BTN}
         >