diff --git a/src/page/Dashboard/FieldBox.js b/src/page/Dashboard/FieldBox.js
new file mode 100644
index 00000000..fa2c21d6
--- /dev/null
+++ b/src/page/Dashboard/FieldBox.js
@@ -0,0 +1,45 @@
+import Checkbox from "../../components/Checkbox";
+
+const Field = ({
+ logStreamSchema,
+ selectedLogSchema,
+ setSelectedLogSchema,
+}) => {
+ return (
+
+
+
Columns
+
+
+ {logStreamSchema?.data?.data?.fields
+ ?.filter((field) => field.name !== "p_metadata" && field.name !== "p_tags")
+ .map((key, index) => (
+
+ 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)}
+ />
+ ))}
+
+
+ );
+};
+
+export default Field;
diff --git a/src/page/Dashboard/index.js b/src/page/Dashboard/index.js
index 5cfe31d3..7758fdb1 100644
--- a/src/page/Dashboard/index.js
+++ b/src/page/Dashboard/index.js
@@ -1,5 +1,5 @@
import moment from "moment";
-import { useState, Fragment } from "react";
+import { useState, Fragment, useRef, useCallback, useEffect } from "react";
import Layout from "../../components/Layout";
import SideDialog from "../../components/SideDialog";
import { Listbox, Transition } from "@headlessui/react";
@@ -9,9 +9,13 @@ import { Combobox } from "@headlessui/react";
import { CheckIcon, XCircleIcon, SelectorIcon } from "@heroicons/react/solid";
import BeatLoader from "react-spinners/BeatLoader";
import { Menu } from "@headlessui/react";
-import { useGetLogStream, useQueryLogs } from "../../utils/api";
+import {
+ useGetLogStream,
+ useGetLogStreamSchema,
+ useQueryLogs,
+} from "../../utils/api";
import "./index.css";
-import Picker from "./DateTimeRangePicker";
+import Field from "./FieldBox";
import Calendar from "./DateRangeSeletor";
const override = {
@@ -21,6 +25,8 @@ const override = {
};
function hasSubArray(master, sub) {
+ master.sort();
+ sub.sort();
return sub.every(
(
(i) => (v) =>
@@ -28,6 +34,7 @@ function hasSubArray(master, sub) {
)(0),
);
}
+
const Dashboard = () => {
const getCurrentTime = () => {
let now = new Date();
@@ -45,6 +52,7 @@ const Dashboard = () => {
return moment(start);
};
+
const getRange = () => {
return {
// "Live tracking": [moment(start), moment(end)],
@@ -80,13 +88,24 @@ const Dashboard = () => {
const [searchSelected, setSearchSelected] = useState({});
const [interval, setInterval] = useState(null);
const [range, setRange] = useState(0);
- const [dateRangeValues, setDateRangeValues] = useState(getRange);
+ const [selectedLogSchema, setSelectedLogSchema] = useState([]);
+ const [availableTags, setAvailableTags] = useState([]);
+ const [selectedTags, setSelectedTags] = useState([]);
+ // const [dateRangeValues, setDateRangeValues] = useState(getRange);
const [startTime, setStartTime] = useState(
getCurrentTime().subtract(10, "minutes"),
// .utcOffset("+00:00")
// .format("YYYY-MM-DDThh:mm:ss),
);
+ const addAvailableTags = (label) => {
+ if (availableTags.includes(label)) {
+ return;
+ } else {
+ setAvailableTags([...availableTags, label]);
+ }
+ };
+
const [endTime, setEndTime] = useState(getCurrentTime());
const refreshInterval = [
@@ -135,38 +154,73 @@ const Dashboard = () => {
const logStream = useGetLogStream({
retry: false,
- staleTime: 60 * 1000,
refetchOnWindowFocus: false,
+ onSuccess: (data) => {
+ setSelectedLogStream(data.data[0]);
+ },
+ });
+
+ const logStreamSchema = useGetLogStreamSchema(selectedLogStream?.name, {
+ retry: false,
+ enabled: !!(selectedLogStream?.name != null),
+ refetchOnWindowFocus: false,
+ onSuccess: (data) => {
+ const allFields = data.data.fields.map((field) => {
+ return field.name;
+ });
+
+ setSelectedLogSchema([
+ ...allFields.filter(
+ (field) => field !== "p_metadata" && field !== "p_tags",
+ ),
+ ]);
+ },
});
- if (
- logStream.isSuccess &&
- logStream?.data?.data.length &&
- !selectedLogStream
- ) {
- setSelectedLogStream(logStream.data.data[0]);
- }
const logQueries = useQueryLogs(
selectedLogStream?.name,
moment(startTime).utcOffset("+00:00").format("YYYY-MM-DDTHH:mm:ssZ"),
moment(endTime).utcOffset("+00:00").format("YYYY-MM-DDTHH:mm:ssZ"),
+ selectedLogSchema,
() => {
if (range < 7) {
const rangeVal = getRange();
- setDateRangeValues(rangeVal);
setStartTime(rangeVal[rangeArr[range]][0]);
setEndTime(rangeVal[rangeArr[range]][1]);
}
},
{
+ onSuccess: () => {
+ setSelectedTags([]);
+ setAvailableTags([]);
+ },
retry: false,
- enabled: !!(selectedLogStream?.name != null),
+ enabled: !!(selectedLogSchema?.length !== 0),
refetchOnWindowFocus: false,
refetchInterval:
interval === null || range === 7 ? false : interval * 1000,
},
);
+ const { fetchNextPage } = logQueries;
+
+ useEffect(() => {
+ let fetching = false;
+ const handleScroll = async (e) => {
+ const { scrollHeight, scrollTop, clientHeight } =
+ e.target.scrollingElement;
+ if (!fetching && scrollHeight - scrollTop <= clientHeight * 1.2) {
+ fetching = true;
+ await fetchNextPage();
+ fetching = false;
+ }
+ };
+ document.addEventListener("scroll", handleScroll);
+ return () => {
+ document.removeEventListener("scroll", handleScroll);
+ };
+ }, [fetchNextPage]);
+
const timeZoneChange = (e) => {
setTimeZone(e.target.value);
};
@@ -187,21 +241,20 @@ const Dashboard = () => {
}
};
- const clearLabel = (label) => {
- const labelArray = labelSelected;
- const filteredArray = [...labelArray.filter((item) => item !== label)];
- setLabelSelected(filteredArray);
+ const removeTag = (tag) => {
+ setSelectedTags([...selectedTags.filter((item) => item !== tag)]);
};
return (
<>
0 && logQueries?.data?.data[0]?.labels
+ logQueries?.data?.data?.length > 0 &&
+ logQueries?.data?.data[0]?.labels
}
>
-
-
+
+
@@ -341,7 +394,7 @@ const Dashboard = () => {
/>
-
{
))
)}
-
+ */}
@@ -444,7 +497,7 @@ const Dashboard = () => {
}
>
{refreshInterval.map((interval) => (
-
+
{({ active, selected }) => (
setInterval(interval.value)}
@@ -467,18 +520,18 @@ const Dashboard = () => {
Tag filters
- {labelSelected.length > 0
- ? labelSelected.map((label) => (
+ {selectedTags.length > 0
+ ? selectedTags.map((tag) => (
- {label}
+ {tag}
clearLabel(label)}
+ onClick={() => removeTag(tag)}
className="hover:text-gray-600 transform duration-200 text-gray-700 w-4 absolute top-1 right-1"
/>
@@ -498,43 +551,39 @@ const Dashboard = () => {
leaveTo="opacity-0"
>
- {Object.keys(
- logQueries?.data?.data ? logQueries?.data?.data : [],
- ).length !== 0 ? (
- logQueries?.data?.data[0].labels
- ?.split(",")
- .map((person, personIdx) => (
-
- `relative cursor-default select-none py-2 px-2 ${
- active
- ? "bg-bluePrimary text-white"
- : "text-gray-900"
- }`
- }
- value={person}
- >
- {({ selected }) => (
- <>
-
- {selected ? (
-
-
-
- ) : (
-
- )}
- {person}
-
-
- )}
-
- ))
+ {availableTags.length !== 0 ? (
+ availableTags.map((person, personIdx) => (
+
+ `relative cursor-default select-none py-2 px-2 ${
+ active
+ ? "bg-bluePrimary text-white"
+ : "text-gray-900"
+ }`
+ }
+ value={person}
+ >
+ {({ selected }) => (
+ <>
+
+ {selected ? (
+
+
+
+ ) : (
+
+ )}
+ {person}
+
+
+ )}
+
+ ))
) : (
Nothing Found
)}
@@ -552,123 +601,118 @@ const Dashboard = () => {
*/}
-
-
-
-
-
-
- |
- Time
-
- |
+ {logQueries.isLoading &&
+ (!logQueries.data ||
+ !logQueries.data?.data ||
+ logQueries.data?.data?.length === 0) ? (
+
+
+ |
+
+ |
+
+
+ ) : (
+
+ {logQueries?.data?.pages?.map &&
+ logQueries.data.pages.map(
+ (page) =>
+ page?.data?.map &&
+ page?.data?.map(
+ (data, index) =>
+ hasSubArray(
+ data.p_tags?.split(","),
+ selectedTags,
+ ) &&
+ (searchQuery === "" ||
+ JSON.stringify(data)
+ .toLowerCase()
+ .includes(searchQuery.toLowerCase())) && (
+ {
+ console.log(JSON.stringify(data));
+ setOpen(true);
+ setClickedRow(data);
+ }}
+ className="cursor-pointer hover:bg-slate-100 hover:shadow"
+ key={index}
+ >
+ {selectedLogSchema.map((schema) => (
+ |
+ {data[schema] || ""}
+ |
+ ))}
+
+ {data.p_tags
+ ?.split(",")
+ .map((tag, index) => {
+ addAvailableTags(tag);
+ return (
+
+ {tag}
+
+ );
+ })}
+ |
+
+ ),
+ ),
+ )}
+
+ |
+
+ |
+
+
+ )}
+
+