Add field fix

src/components/Checkbox/index.js

@@ -0,0 +1,17 @@
+const Checkbox = ({ name, selected, onClick }) => {
+  return (
+    <div className="mx-1 my-1 flex">
+      <label className="px-5 w-full py-3 hover:bg-blue-50 rounded">
+        <input
+          onChange={onClick}
+          type="checkbox"
+          checked={selected}
+          className="mb-1 h-5 w-5 mr-2 border-2 custom-focus border-gray-400 rounded-sm"
+        />
+        <span className="font-semibold">{name}</span>
+      </label>
+    </div>
+  );
+};
+
+export default Checkbox;

src/components/Layout/Navbar.js

@@ -15,7 +15,7 @@ const Navbar = ({setSidebarOpen}) => {
   return (
     <>
       <Dialogue isOpen={isHelpDialogueOpen} setIsOpen={setIsHelpDialogueOpen} />
-      <div className=" sticky top-0 z-10 px-10 flex-shrink-0 flex h-16 bg-bluePrimary border-b-2 border-gray-500 shadow">
+      <div className=" top-0 z-10 px-10 flex-shrink-0 flex h-16 bg-bluePrimary border-b-2 border-gray-500 shadow">
         <button
           type="button"
           className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-bluePrimary md:hidden"

src/components/SideDialog/index.js

@@ -4,8 +4,24 @@ import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
 import moment from "moment";
 
+function isJsonString(str) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+const removeMeta = (data) => {
+  let res = { ...data };
+  delete res.p_tags;
+  delete res.p_metadata;
+  return { ...res };
+};
+
 export default function SideDialog({ open, setOpen, data }) {
-  const [log, setLog] = useState({})
+  const [log, setLog] = useState({});
 
   // const str =
   //   Object.keys(data).length !== 0
@@ -24,12 +40,12 @@ export default function SideDialog({ open, setOpen, data }) {
   //   )
   // );
 
-  useEffect(() => {
-    if (Object.keys(data).length !== 0) {
-      setLog(JSON.parse(`${data?.log}`));
-    } else {
-    }
-  }, [data]);
+  // useEffect(() => {
+  //   if (Object.keys(data).length !== 0) {
+  //     setLog(JSON.parse(`${data?.log}`));
+  //   } else {
+  //   }
+  // }, [data]);
 
   return (
     <Transition.Root show={open} as={Fragment}>
@@ -95,7 +111,7 @@ export default function SideDialog({ open, setOpen, data }) {
                       {/* Replace with your content */}
                       <div className="absolute inset-0 py-1 px-4 sm:px-6">
                         <div className="flex flex-wrap items-center">
-                          {data.labels?.split(",").map((tag, index) => (
+                          {data.p_tags?.split(",").map((tag, index) => (
                             <div className="mx-1 h-6 text-xs mt-2 bg-slate-200 rounded-md flex justify-center items-center px-2 py-1">
                               {tag}
                             </div>
@@ -114,62 +130,16 @@ export default function SideDialog({ open, setOpen, data }) {
                         </div> */}
 
                         <div className="border-y border-gray-300 grid md:grid-cols-2">
-                          <div className=" border-r py-3 border-gray-300">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              Container Name
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_ContainerName}
-                            </div>
-                          </div>
-                          <div className="py-3 px-3">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              Container Image
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_ContainerImage}
-                            </div>
-                          </div>
-                          <div className="border-r py-3 border-gray-300">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              Host
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_Host}
-                            </div>
-                          </div>
-                          <div className="py-3 px-3">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              Namespace
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_Namespace}
-                            </div>
-                          </div>
-                          <div className="border-r py-3 border-gray-300">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              PodLabels
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_PodLabels}
-                            </div>
-                          </div>
-                          <div className="py-3 px-3">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              PodName
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_PodName}
-                            </div>
-                          </div>
-                          <div className="md:colspan-2 border-r py-3 border-gray-300">
-                            <div className="text-xs font-bold text-gray-700 ">
-                              Source
-                            </div>
-                            <div className="text-xs text-gray-600 ">
-                              {data?.meta_Source}
+                          {data.p_metadata?.split(",").map((field) => (
+                            <div className="ml-2 py-3 border-gray-300">
+                              <div className="text-xs font-bold text-gray-700 ">
+                                {field.split("=")[0]}
+                              </div>
+                              <div className="text-xs text-gray-600 ">
+                                {field.split("=")[1]}
+                              </div>
                             </div>
-                          </div>
+                          ))}
                         </div>
 
                         <div className="mt-2">
@@ -185,7 +155,7 @@ export default function SideDialog({ open, setOpen, data }) {
                             <div className="bg-codeBack h-500 scrollbar-thin  scrollbar-thumb-white scrollbar-codeBlack overflow-y-scroll scrollbar-thumb-rounded-full scrollbar-track-rounded-full py-3 px-3">
                               <div>
                                 <pre className="text-white text-xs font-light">
-                                  {JSON.stringify(log, null, 2)}
+                                  {JSON.stringify(removeMeta(data), null, 2)}
                                 </pre>
                                 {/* <pre className="text-white text-xs font-light">
                                   {data.log}

src/page/Dashboard/DateRangeSeletor.js

@@ -37,16 +37,31 @@ const DateRangeSelector = ({
 
   const [toInput, setToInput] = useState(moment().format(FORMAT));
 
+  const toDateRef = useRef(null);
+
   const getDate = (index) => {
     const rangeVal = getRange();
     setFromInput(moment(rangeVal[rangeArr[index]][0]).format(FORMAT));
     setToInput(moment(rangeVal[rangeArr[index]][1]).format(FORMAT));
-
     setFromDate(moment(rangeVal[rangeArr[index]][0]));
     setToDate(moment(rangeVal[rangeArr[index]][1]));
     setRange(index);
   };
 
+  const submitDate = (e) => {
+    e.preventDefault();
+    if (checkValidDate()) {
+      submitCal();
+    }
+  };
+
+  const handleFromDateSubmit = (e) => {
+    e.preventDefault();
+    if (checkValidDate()) {
+      toDateRef?.current?.focus();
+    }
+  };
+
   const checkValidDate = () => {
     return (
       moment(toInput, FORMAT).isValid() &&
@@ -107,7 +122,10 @@ const DateRangeSelector = ({
               {rangeArr.map((item, index) => (
                 <button
                   key={index}
-                  onClick={() => getDate(index)}
+                  onClick={() => {
+                    setIsOpen(false);
+                    getDate(index);
+                  }}
                   className={`w-40 hover:bg-bluePrimary text-left px-3 hover:border-bluePrimary hover:text-gray-100 py-2 border border-gray-200 text-sm text-gray-600 font-medium`}
                 >
                   {item}
@@ -116,64 +134,53 @@ const DateRangeSelector = ({
             </div>
             <div className="flex flex-grow-1 w-full flex-col mx-4">
               <div className="mt-2 relative">
-                <label className="text-xs " htmlFor="">
-                  From
-                </label>
-                <input
-                  value={fromInput}
-                  onBlur={() => {
-                    if (moment(fromInput, FORMAT).isValid)
-                      setFromInput(moment(fromInput, FORMAT).format(FORMAT));
-                  }}
-                  onChange={(e) => {
-                    setFromInput(e.target.value);
-                  }}
-                  className="custom-focus custom-input text-xs"
-                  type="text"
-                />
-                {/* <div className="absolute right-2 top-[1.85rem]">
-                  <DatePicker
-                    setStartDate={setFromInput}
-                    setEndDate={setToInput}
-                    start={fromInput}
-                    end={toInput}
+                <form onSubmit={handleFromDateSubmit}>
+                  <label className="text-xs " htmlFor="">
+                    From
+                  </label>
+                  <input
+                    value={fromInput}
+                    onBlur={() => {
+                      if (moment(fromInput, FORMAT).isValid)
+                        setFromInput(moment(fromInput, FORMAT).format(FORMAT));
+                    }}
+                    onChange={(e) => {
+                      setFromInput(e.target.value);
+                    }}
+                    className="custom-focus custom-input text-xs"
+                    type="text"
                   />
-                </div> */}
+                </form>
               </div>
               <div className="mt-2 relative">
-                <label className="text-xs mt-2" htmlFor="">
-                  To
-                </label>
-                <input
-                  value={toInput}
-                  onBlur={() => {
-                    if (moment(toInput, FORMAT).isValid)
-                      setToInput(moment(toInput, FORMAT).format(FORMAT));
-                  }}
-                  onChange={(e) => {
-                    setToInput(e.target.value);
-                  }}
-                  className="custom-input custom-focus text-xs"
-                  type="text"
-                />
-                {/* <div className="absolute right-2 top-[1.85rem]">
-                  <DatePicker
-                    setStartDate={setFromInput}
-                    setEndDate={setToInput}
-                    start={fromInput}
-                    end={toInput}
+                <form onSubmit={submitDate}>
+                  <label className="text-xs mt-2" htmlFor="">
+                    To
+                  </label>
+                  <input
+                    value={toInput}
+                    ref={toDateRef}
+                    onBlur={() => {
+                      if (moment(toInput, FORMAT).isValid)
+                        setToInput(moment(toInput, FORMAT).format(FORMAT));
+                    }}
+                    onChange={(e) => {
+                      setToInput(e.target.value);
+                    }}
+                    className="custom-input custom-focus text-xs"
+                    type="text"
                   />
-                </div> */}
+                </form>
               </div>
               <div className="ml-auto">
-                <button className="mt-3 px-2 pt-2 rounded-md py-1 bg-bluePrimary">
+                <div className="mt-3 px-2 pt-2 rounded-md py-1 bg-bluePrimary">
                   <DatePicker
                     setStartDate={setFromInput}
                     setEndDate={setToInput}
                     start={fromInput}
                     end={toInput}
                   />
-                </button>
+                </div>
               </div>
               {!checkValidDate() && (
                 <div className="text-red-600 mt-2 font-semibold text-sm">

src/page/Dashboard/FieldBox.js

@@ -0,0 +1,45 @@
+import Checkbox from "../../components/Checkbox";
+
+const Field = ({
+  logStreamSchema,
+  selectedLogSchema,
+  setSelectedLogSchema,
+}) => {
+  return (
+    <div className="flex flex-col">
+      <div className="bg-gray-200 py-3 px-5">
+        <h3 className=" font-semibold text-gray-600 ">Columns</h3>
+      </div>
+      <div>
+        {logStreamSchema?.data?.data?.fields
+          ?.filter((field) => field.name !== "p_metadata" && field.name !== "p_tags")
+          .map((key, index) => (
+            <Checkbox
+              key={index}
+              name={key.name}
+              onClick={(e) =>
+                e.target.checked
+                  ? setSelectedLogSchema(
+                      logStreamSchema.data.data.fields
+                        .map((x) => x.name)
+                        .filter(
+                          (schema) =>
+                            selectedLogSchema.includes(schema) ||
+                            schema === key.name,
+                        ),
+                    )
+                  : setSelectedLogSchema(
+                      selectedLogSchema.filter(
+                        (clickedName) => clickedName !== key.name,
+                      ),
+                    )
+              }
+              selected={selectedLogSchema?.includes(key.name)}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default Field;