Update Calendar (#8)

parseablehq · Aug 18, 2022 · a8ec7aa · a8ec7aa
1 parent a5de83c
commit a8ec7aa
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/src/page/Dashboard/DatePicker.css b/src/page/Dashboard/DatePicker.css
@@ -43,7 +43,7 @@
 }
 
 .react-datepicker__day--outside-month {
-  color: #a1a1a1;
+  color: #d9d9d9;
 }
 
 .react-datepicker__day--in-selecting-range {

diff --git a/src/page/Dashboard/DatePicker.js b/src/page/Dashboard/DatePicker.js
@@ -15,7 +15,7 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <button onClick={onClick} ref={ref}>
       <CalendarIcon
-        className="h-5 w-5 text-gray-600 block ml-auto"
+        className="h-[1.2rem] w-[1.2rem] text-white block ml-auto"
         aria-hidden="true"
       />
     </button>
@@ -25,12 +25,11 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
       selectsRange={true}
       startDate={startDate}
       endDate={endDate}
+      filterDate={(day) => moment(day).isBefore(moment())}
       className={"custom-date-picker"}
       onChange={(update) => {
         setDateRange(update);
-        setStartDate(
-          moment(update[0]).startOf("day").format(FORMAT),
-        );
+        setStartDate(moment(update[0]).startOf("day").format(FORMAT));
         setEndDate(
           moment(update[update[1] ? 1 : 0])
             .endOf("day")

diff --git a/src/page/Dashboard/DateRangeSeletor.js b/src/page/Dashboard/DateRangeSeletor.js
@@ -76,15 +76,15 @@ const DateRangeSelector = ({
   ];
 
   return (
-    <div className="relative">
+    <div className="relative z-50">
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={
-          "search-button flex disabled:text-gray-300 mt-1 custom-focus text-left"
+          "search-button flex disabled:text-gray-300 mt-1 h-[2.65rem] custom-focus text-left"
         }
       >
         {range === 7 ? (
-          <span className="text-sm mt-[0.125rem] mb-[0.125rem]">
+          <span className="text-xs mt-[0.30rem]">
             {moment(fromDate).format(FORMAT)} - {moment(toDate).format(FORMAT)}
           </span>
         ) : (
@@ -99,7 +99,7 @@ const DateRangeSelector = ({
         <div
           ref={wrapperRef}
           className={
-            "absolute left-0 mt-2 w-[28rem] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            "absolute z-50 left-0 mt-2 w-[28rem] origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
           }
         >
           <div className="flex my-2 w-full border border-grey-200">
@@ -131,14 +131,14 @@ const DateRangeSelector = ({
                   className="custom-focus custom-input text-xs"
                   type="text"
                 />
-                <div className="absolute right-2 top-[1.85rem]">
+                {/* <div className="absolute right-2 top-[1.85rem]">
                   <DatePicker
                     setStartDate={setFromInput}
                     setEndDate={setToInput}
                     start={fromInput}
                     end={toInput}
                   />
-                </div>
+                </div> */}
               </div>
               <div className="mt-2 relative">
                 <label className="text-xs mt-2" htmlFor="">
@@ -156,14 +156,24 @@ const DateRangeSelector = ({
                   className="custom-input custom-focus text-xs"
                   type="text"
                 />
-                <div className="absolute right-2 top-[1.85rem]">
+                {/* <div className="absolute right-2 top-[1.85rem]">
                   <DatePicker
                     setStartDate={setFromInput}
                     setEndDate={setToInput}
                     start={fromInput}
                     end={toInput}
                   />
-                </div>
+                </div> */}
+              </div>
+              <div className="ml-auto">
+                <button className="mt-3 px-2 pt-2 rounded-md py-1 bg-bluePrimary">
+                  <DatePicker
+                    setStartDate={setFromInput}
+                    setEndDate={setToInput}
+                    start={fromInput}
+                    end={toInput}
+                  />
+                </button>
               </div>
               {!checkValidDate() && (
                 <div className="text-red-600 mt-2 font-semibold text-sm">
@@ -172,7 +182,6 @@ const DateRangeSelector = ({
               )}
               <div className="mt-auto mb-2 flex">
                 <div className="mr-auto mt-2 font-semibold text-xs">
-
                   GMT {moment().format("Z")}
                 </div>
                 <button
@@ -184,7 +193,7 @@ const DateRangeSelector = ({
                 <button
                   disabled={!checkValidDate()}
                   onClick={submitCal}
-                  className="block custom-focus btn text-sm font-semibold text-white border-yellowButton disabled:border-yellow-400 disabled:bg-yellow-400 border-2 p-1 bg-yellowButton rounded px-3 px-2"
+                  className="block custom-focus btn text-sm font-semibold text-white border-bluePrimary disabled:border-blue-400 disabled:bg-blue-400 border-2 p-1 bg-bluePrimary rounded px-3 px-2"
                 >
                   apply
                 </button>

diff --git a/src/page/Dashboard/index.js b/src/page/Dashboard/index.js
@@ -671,6 +671,26 @@ const Dashboard = () => {
               </table>
             </div>
           </div>
+          {logStream.isError || !logStream?.data?.data.length ? (
+            <div
+              style={{ transform: "translateX(-50%) translateY(-50%)" }}
+              className="absolute -z-10 font-semibold text-gray-500 left-1/2 top-80"
+            >
+              Please create a log stream first to search logs. Refer to the
+              documentation{" "}
+              <a
+                rel="noreferrer"
+                target={"_blank"}
+                className="text-blue-500 hover:underline"
+                href="https://www.parseable.io/docs/intro"
+              >
+                here
+              </a>
+              .
+            </div>
+          ) : (
+            <></>
+          )}
         </div>
 
         {Object.keys(searchSelected).length !== 0 && (