change(ui) - assist filter box

frontend/app/components/BugFinder/SessionList/SessionList.js

@@ -74,7 +74,6 @@ export default class SessionList extends React.PureComponent {
 
   componentDidMount() {
     const { scrollY } = this.props;
-    console.log('scrollY', scrollY);
     window.scrollTo(0, scrollY);
   }
 

frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx

@@ -11,7 +11,8 @@ interface Props {
 }
 function WidgetPreview(props: Props) {
     const { className = '' } = props;
-    const { metricStore } = useStore();
+    const { metricStore, dashboardStore } = useStore();
+    const period = useObserver(() => dashboardStore.period);
     const metric: any = useObserver(() => metricStore.instance);
     const isTimeSeries = metric.metricType === 'timeseries';
     const isTable = metric.metricType === 'table';
@@ -20,11 +21,6 @@ function WidgetPreview(props: Props) {
         metric.update({ [ name ]: value });
     }
 
-    const onDateChange = (changedDates) => {
-        // setPeriod({  ...changedDates, rangeName: changedDates.rangeValue })
-        metric.update({  ...changedDates, rangeName: changedDates.rangeValue });
-    }
-
     return useObserver(() => (
         <div className={cn(className)}>
             <div className="flex items-center justify-between">
@@ -68,10 +64,10 @@ function WidgetPreview(props: Props) {
                     <div className="mx-4" />
                         <span className="mr-1 color-gray-medium">Time Range</span>
                         <DateRange
-                            rangeValue={metric.rangeName}
-                            startDate={metric.startDate}
-                            endDate={metric.endDate}
-                            onDateChange={onDateChange}
+                            rangeValue={period.rangeName}
+                            startDate={period.startDate}
+                            endDate={period.endDate}
+                            onDateChange={(period) => dashboardStore.setPeriod(period)}
                             customRangeRight
                             direction="left"
                         />

frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx

@@ -3,20 +3,26 @@ import { NoContent } from 'UI';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import SessionItem from 'Shared/SessionItem';
-
+import { useObserver } from 'mobx-react-lite';
+import { DateTime } from 'luxon';
 interface Props {
     className?: string;
 }
 function WidgetSessions(props: Props) {
     const { className = '' } = props;
     const { dashboardStore } = useStore();
+    const period = useObserver(() => dashboardStore.period);
     const widget = dashboardStore.currentWidget;
 
-    return (
+    const range = period.toTimestamps()
+    const startTime = DateTime.fromMillis(range.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
+    const endTime = DateTime.fromMillis(range.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
+
+    return useObserver(() => (
         <div className={cn(className)}>
-            <div>
+            <div className="flex items-baseline">
                 <h2 className="text-2xl">Sessions</h2>
-                {/* <div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div> */}
+                <div className="ml-2 color-gray-medium">between <span className="font-medium color-gray-darkest">{startTime}</span> and <span className="font-medium color-gray-darkest">{endTime}</span> </div>
             </div>
 
             <div className="mt-3">
@@ -31,7 +37,7 @@ function WidgetSessions(props: Props) {
                 </NoContent>
             </div>
         </div>
-    );
+    ));
 }
 
 export default WidgetSessions;

frontend/app/components/shared/LiveSessionSearch/LiveSessionSearch.tsx

@@ -4,9 +4,9 @@ import { connect } from 'react-redux';
 import { edit, addFilter, addFilterByKeyAndValue } from 'Duck/liveSearch';
 import FilterSelection from 'Shared/Filters/FilterSelection';
 import { IconButton } from 'UI';
-import { FilterKey } from 'App/types/filter/filterType';
 
 interface Props {
+  list: any,
   appliedFilter: any;
   edit: typeof edit;
   addFilter: typeof addFilter;
@@ -53,16 +53,18 @@ function LiveSessionSearch(props: Props) {
     });
   }
 
-  return  (
+  return props.list.size > 0 ? (
     <div className="border bg-white rounded mt-4">
-      <div className="p-5">
-        <FilterList
-          filter={appliedFilter}
-          onUpdateFilter={onUpdateFilter}
-          onRemoveFilter={onRemoveFilter}
-          onChangeEventsOrder={onChangeEventsOrder}
-        />
-      </div>
+      { hasEvents || hasFilters && (
+        <div className="p-5">
+          <FilterList
+            filter={appliedFilter}
+            onUpdateFilter={onUpdateFilter}
+            onRemoveFilter={onRemoveFilter}
+            onChangeEventsOrder={onChangeEventsOrder}
+          />
+        </div>
+      )}
 
       <div className="border-t px-5 py-1 flex items-center -mx-2">
         <div>
@@ -75,9 +77,10 @@ function LiveSessionSearch(props: Props) {
         </div>
       </div>
     </div>
-  );
+  ) : <></>;
 }
 
 export default connect(state => ({
   appliedFilter: state.getIn([ 'liveSearch', 'instance' ]),
+  list: state.getIn(['sessions', 'liveSessions']),
 }), { edit, addFilter, addFilterByKeyAndValue })(LiveSessionSearch);