From b38fbe1a3042e4a69d9f878ebde3a34357b8fd16 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 22 Jun 2022 18:33:32 +0200
Subject: [PATCH] fix(ui) - dropdown fixes

---
 .../Dashboard/components/WidgetSessions/WidgetSessions.tsx | 7 ++++---
 frontend/app/components/shared/Select/Select.tsx           | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index fa24575c1..64fa9db4c 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -24,8 +24,8 @@ function WidgetSessions(props: Props) {
     const filter = useObserver(() => dashboardStore.drillDownFilter);
     const widget: any = useObserver(() => metricStore.instance);
     // const drillDownPeriod = useObserver(() => dashboardStore.drillDownPeriod);
-    const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
-    const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
+    const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat('LLL dd, yyyy HH:mm');
+    const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat('LLL dd, yyyy HH:mm');
     // const [timestamps, setTimestamps] = useState<any>({
     //     startTimestamp: 0,
     //     endTimestamp: 0,
@@ -79,9 +79,10 @@ function WidgetSessions(props: Props) {
 
                 { widget.metricType !== 'table' && (
                     <div className="flex items-center ml-6">
-                        <span className="mr-2 color-gray-medium">Series</span>
+                        <span className="mr-2 color-gray-medium">Filter by Series</span>
                         <Select
                             options={ seriesOptions }
+                            defaultValue={ 'all' }
                             onChange={ writeOption }
                             plain
                         />
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index 6952874f5..bb0ae76ba 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -13,9 +13,10 @@ interface Props {
     styles?: any;
     onChange: (value: any) => void;
     name?: string;
+    placeholder?: string;
     [x:string]: any;
 }
-export default function({ name = '', onChange, right = false, plain = false, options, isSearchable = false, components = {}, styles = {}, defaultValue = '', ...rest }: Props) {
+export default function({ placeholder='Select', name = '', onChange, right = false, plain = false, options, isSearchable = false, components = {}, styles = {}, defaultValue = '', ...rest }: Props) {
     const defaultSelected = defaultValue ? (options.find(o => o.value === defaultValue) || options[0]): null;
     const customStyles = {
         option: (provided: any, state: any) => ({
@@ -133,7 +134,7 @@ export default function({ name = '', onChange, right = false, plain = false, opt
                 }
             })}
             blurInputOnSelect={true}
-            // menuPosition="fixed"
+            placeholder={placeholder}
             {...rest}
         />
     );