-
-
-
- {children}
-
- {disabled ? "None" : data.find((obj) => obj.value === value).name}
+ {disabled ? "Off" : data.find((obj) => obj.value === value).name}
-
+ {!Icon ? (
+
+ ) : (
+
+
-
+
-
-
+
-
+
{
localStorage.removeItem("auth");
navigate("/");
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 471a8cff..6a3dd8dc 100644
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -14,16 +14,8 @@ export default function Layout({ children, labels }) {
setSidebarOpen={setSidebarOpen}
labels={labels}
/>
-
{localStorage.getItem("username")?.length > 0
@@ -58,7 +53,7 @@ const Navbar = ({ setSidebarOpen }) => {
-
diff --git a/src/index.css b/src/index.css
index d94b4eac..4149a8ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,7 +4,7 @@
@layer components {
.focus {
- @apply focus:ring-secondary-700 focus:border-secondary-700 focus:ring-1 focus:outline-0;
+ @apply focus:ring-secondary focus:border-secondary focus:ring-0 focus:outline-0;
}
.text-input {
@@ -16,7 +16,7 @@
}
.input {
- @apply w-full rounded-lg py-2 px-3 border-2 bg-gray-50 border-gray-400 text-input focus;
+ @apply w-full rounded-md py-2 px-3 border bg-gray-50 border-gray-400 text-input focus;
}
}
diff --git a/src/page/Dashboard/DatePicker.css b/src/page/Dashboard/DatePicker.css
index 6709ccf2..49bc9798 100644
--- a/src/page/Dashboard/DatePicker.css
+++ b/src/page/Dashboard/DatePicker.css
@@ -1,5 +1,5 @@
.react-datepicker__day--in-range {
- @apply bg-bluePrimary;
+ @apply bg-primary-200;
opacity: 0.8;
}
@@ -34,7 +34,7 @@
.custom-date-picker-day-start {
opacity: 1;
- @apply bg-bluePrimary rounded-l-lg;
+ @apply bg-primary-200 rounded-l-lg;
}
.react-datepicker__day-name,
@@ -48,15 +48,20 @@
.react-datepicker__day--in-selecting-range {
color: #a1a1a1;
- @apply bg-bluePrimary;
+ @apply bg-primary-200;
}
.custom-date-picker-day-end {
opacity: 1;
- @apply bg-bluePrimary rounded-r-lg;
+ @apply bg-primary-200 rounded-r-lg;
+}
+
+.custom-date-picker-day-same {
+ opacity: 1;
+ @apply bg-primary-200 rounded-lg;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
- @apply bg-bluePrimary;
+ @apply bg-primary-200;
color: #eaeaea;
}
diff --git a/src/page/Dashboard/DatePicker.js b/src/page/Dashboard/DatePicker.js
index 769d784a..4ba676d7 100644
--- a/src/page/Dashboard/DatePicker.js
+++ b/src/page/Dashboard/DatePicker.js
@@ -11,18 +11,20 @@ const FORMAT = "DD-MM-YYYY HH:mm";
const Calendar = ({ setStartDate, setEndDate, start, end }) => {
const [dateRange, setDateRange] = useState([
- moment(start, FORMAT).toDate(),
- moment(end, FORMAT).toDate(),
+ moment(start, FORMAT).startOf("day").toDate(),
+ moment(end, FORMAT).startOf("day").toDate(),
]);
const [startDate, endDate] = dateRange;
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
));
+ console.log(startDate);
return (
{
filterDate={function (day) {
return moment(day).isBefore(moment());
}}
+ disabledKeyboardNavigation
className={"custom-date-picker"}
onChange={function (update) {
setDateRange(update);
@@ -42,10 +45,12 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
);
}}
dayClassName={function (date) {
- return moment(date).isSame(moment(startDate))
- ? "custom-date-picker-day-start"
+ return moment(date).isSame(moment(endDate)) && moment(date).isSame(moment(startDate))
+ ? "custom-date-picker-day-same"
: moment(date).isSame(moment(endDate))
? "custom-date-picker-day-end"
+ : moment(date).isSame(moment(startDate))
+ ? "custom-date-picker-day-start"
: "";
}}
customInput={
-
-
-
+
+ {children}
);
diff --git a/src/components/Pill/index.js b/src/components/Pill/index.js
index deb2f113..6ebc4383 100644
--- a/src/components/Pill/index.js
+++ b/src/components/Pill/index.js
@@ -1,14 +1,16 @@
import React from "react";
import { XCircleIcon } from "@heroicons/react/solid";
-const Pill = ({ text, onClose }) => {
+const Pill = ({ text, onClose, equal }) => {
return (
-
+
{text}
- onClick()}
+ className={className(
+ "block w-min py-2 px-3 max-w-[15rem] cursor-pointer hover:bg-gray-600 hover:text-gray-50 border-2 truncate mr-3 my-1 text-xs leading-3 rounded-xl",
+ { "bg-gray-600 font-semibold text-gray-50 border-gray-600": selected },
+ { "bg-gray-50 font-medium text-gray-600 border-gray-400": !selected }
+
+ )}
+ >
+ {text}
+
+ );
+};
+
+export default PillFilter;
diff --git a/src/components/PillFilterList/index.js b/src/components/PillFilterList/index.js
new file mode 100644
index 00000000..4970120b
--- /dev/null
+++ b/src/components/PillFilterList/index.js
@@ -0,0 +1,67 @@
+import React, { useRef, useState } from "react";
+
+import PillFilter from "../PillFilter";
+import className from "classnames";
+
+const useIsOverflow = (ref, callback) => {
+ const [isOverflow, setIsOverflow] = React.useState(undefined);
+
+ React.useLayoutEffect(() => {
+ const { current } = ref;
+ const trigger = () => {
+ const hasOverflow = current.scrollHeight > current.clientHeight;
+ setIsOverflow(hasOverflow);
+ if (callback) callback(hasOverflow);
+ };
+ if (current) {
+ trigger();
+ }
+ }, [callback, ref]);
+
+ return isOverflow;
+};
+
+export function PillFilterList({ x, onAdd, onRemove, values }) {
+ const [isOverflow, setIsOverflow] = useState(false);
+ const [selectedShowMore, setSelectedShowMore] = useState(false);
+ const [selected, setSelected] = useState(values);
+
+ const containerRef = useRef(null);
+
+ useIsOverflow(containerRef, (overflow) => setIsOverflow(overflow));
+
+ return (
+ <>
+
+ {x.map((x) => (
+ {
+ if (selected.includes(x)) {
+ onRemove(x)
+ setSelected([...selected.filter((val) => val !== x)]);
+ } else {
+ onAdd(x)
+ setSelected([...selected, x]);
+ }
+ }}
+ />
+ ))}
+
+
+ {isOverflow && (
+ setSelectedShowMore(true)}
+ text={"Show More"}
+ />
+ )}
+
+
+ );
+}
diff --git a/src/components/SearchableDropdown/index.js b/src/components/SearchableDropdown/index.js
index 954f768d..ed97977c 100644
--- a/src/components/SearchableDropdown/index.js
+++ b/src/components/SearchableDropdown/index.js
@@ -4,7 +4,7 @@ import { Combobox } from "@headlessui/react";
import DropdownButton from "../DropdownButton";
import { SelectorIcon } from "@heroicons/react/solid";
-const SearchableDropdown = ({ data, setValue, value, label }) => {
+const SearchableDropdown = ({ data, setValue, value, label, defaultValue }) => {
const [query, setQuery] = useState("");
const filteredData =
@@ -28,7 +28,7 @@ const SearchableDropdown = ({ data, setValue, value, label }) => {
setQuery(event.target.value);
}}
displayValue={function (val) {
- return data.length && val ? val.name : "No data found";
+ return data && data.length && val ? val.name : defaultValue || "No data found";
}}
/>
-
+
+
{rangeArr.map((item, index) => (
))}
-
+
-
+
)}
-
diff --git a/src/page/Dashboard/DateSearchField.js b/src/page/Dashboard/DateSearchField.js
index 7330f694..2bf9bd97 100644
--- a/src/page/Dashboard/DateSearchField.js
+++ b/src/page/Dashboard/DateSearchField.js
@@ -1,7 +1,6 @@
import Calendar from "./DateRangeSeletor";
-import { Combobox } from "@headlessui/react";
import React from "react";
-import { SearchIcon } from "@heroicons/react/solid";
+import RefreshInterval from "./RefreshInterval";
const DateSearchField = ({
range,
@@ -11,52 +10,31 @@ const DateSearchField = ({
endTime,
setRange,
getRange,
- searchSelected,
- setSearchSelected,
- setSearchOpen,
- setSearchQuery,
+ interval,
+ setInterval,
}) => (
-
+
GMT {moment().format("Z")}
-
-
-
-
+
-
-
- 'Search'}
- placeholder="Search"
- onChange={function (e) {
- setSearchQuery(e.target.value);
- }}
- />
-
-
-
-
-
+
);
diff --git a/src/page/Dashboard/FieldBox.js b/src/page/Dashboard/FieldBox.js
index b2d7014b..65422504 100644
--- a/src/page/Dashboard/FieldBox.js
+++ b/src/page/Dashboard/FieldBox.js
@@ -1,19 +1,46 @@
import Checkbox from "../../components/Checkbox";
import React from "react";
+import { ReactComponent as TableIcon } from "../../assets/images/table-icon.svg";
+import classNames from "classnames";
+import { useState } from "react";
const Field = ({
logStreamSchema,
selectedLogSchema,
setSelectedLogSchema,
}) => {
+ const [isOpen, setIsOpen] = useState(false);
return (
-
+
+
+
+
-
-
Columns
+
+
+
-
+
@@ -38,8 +64,8 @@ const Table = ({
{logQueries.isLoading &&
(!logQueries.data ||
- !logQueries.data?.data ||
- logQueries.data?.data?.length === 0) ? (
+ !logQueries.data?.pages ||
+ logQueries.data?.pages?.length === 0) ? (
{logStreamSchema?.data?.data?.fields
- ?.filter((field) => field.name !== "p_metadata" && field.name !== "p_tags")
+ ?.filter(
+ (field) => field.name !== "p_metadata" && field.name !== "p_tags"
+ )
.map((key, index) => (
selectedLogSchema.includes(schema) ||
- schema === key.name,
- ),
+ schema === key.name
+ )
)
: setSelectedLogSchema(
selectedLogSchema.filter(
- (clickedName) => clickedName !== key.name,
- ),
+ (clickedName) => clickedName !== key.name
+ )
)
}
selected={selectedLogSchema?.includes(key.name)}
diff --git a/src/page/Dashboard/Filters.js b/src/page/Dashboard/Filters.js
new file mode 100644
index 00000000..b631eb19
--- /dev/null
+++ b/src/page/Dashboard/Filters.js
@@ -0,0 +1,226 @@
+import { AdjustmentsIcon } from "@heroicons/react/outline";
+import Button from "../../components/Button";
+import Pill from "../../components/Pill";
+import { PillFilterList } from "./../../components/PillFilterList/index";
+import { Popover } from "@headlessui/react";
+import React from "react";
+import SearchableDropdown from "../../components/SearchableDropdown";
+import Searchbar from "./Searchbar";
+import { useEffect } from "react";
+import { useState } from "react";
+
+export default function Filters({
+ schema,
+ availableTags,
+ availableMeta,
+ removeTag,
+ removeMeta,
+ addTag,
+ addMeta,
+ addFilter,
+ removeFilter,
+}) {
+ const [columnValue, setColumnValue] = useState();
+ const [operator, setOperator] = useState({ name: "Contains" });
+ const [queryValue, setQueryValue] = useState("");
+ const [filter, setFilters] = useState([]);
+
+ useEffect(() => {
+ setFilters([]);
+ setColumnValue();
+ setOperator({ name: "Contains" });
+ setQueryValue("");
+ }, [schema]);
+
+ function removeTagOrMeta(type, val) {
+ setFilters([
+ ...filter.filter(
+ (field) => !(field.type === type && field.value === val)
+ ),
+ ]);
+ }
+
+ function removeGlobalFilter(column, contains, query) {
+ removeFilter(column, contains, query);
+ setFilters([
+ ...filter.filter(
+ (item) =>
+ !(
+ item.column === column &&
+ item.contains === contains &&
+ item.query === query
+ )
+ ),
+ ]);
+ }
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/page/Dashboard/RefreshInterval.js b/src/page/Dashboard/RefreshInterval.js
index 2500f63b..2839fe0c 100644
--- a/src/page/Dashboard/RefreshInterval.js
+++ b/src/page/Dashboard/RefreshInterval.js
@@ -1,5 +1,6 @@
import Dropdown from "../../components/Dropdown";
import React from "react";
+import { RefreshIcon } from "@heroicons/react/solid";
const RefreshInterval = ({ range, interval, setInterval }) => {
const refreshIntervalArray = [
@@ -40,7 +41,8 @@ const RefreshInterval = ({ range, interval, setInterval }) => {
data={refreshIntervalArray}
value={interval}
setValue={setInterval}
- name={"Refresh Interval"}
+ customStyle={"rounded-l-none"}
+ Icon={RefreshIcon}
/>
);
diff --git a/src/page/Dashboard/Searchbar.js b/src/page/Dashboard/Searchbar.js
new file mode 100644
index 00000000..2cb9d3eb
--- /dev/null
+++ b/src/page/Dashboard/Searchbar.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { SearchIcon } from "@heroicons/react/solid";
+
+function Searchbar(setSearchQuery) {
+ return (
+
+
+ Filter
+ {filter.length ?
+
+
+ filter.type === "Tag")
+ .reduce((prev, curr) => [...prev, curr.value], [])}
+ onAdd={(val) => {
+ addTag(val);
+ setFilters([
+ ...filter,
+ {
+ type: "Tag",
+ value: val,
+ },
+ ]);
+ }}
+ onRemove={(val) => {
+ removeTag(val);
+ removeTagOrMeta("Tag", val);
+ }}
+ />
+
+ )}
+
+ {!!availableMeta?.length && (
+ <>
+ filter.type === "Meta")
+ .reduce((prev, curr) => [...prev, curr.value], [])}
+ onAdd={(val) => {
+ addMeta(val);
+ setFilters([
+ ...filter,
+ {
+ type: "Meta",
+ value: val,
+ },
+ ]);
+ }}
+ onRemove={(val) => {
+ removeMeta(val);
+ removeTagOrMeta("Meta", val);
+ }}
+ />
+
+ )}
+ {filter.length ? (
+
+
+
+ field.name !== "p_metadata" && field.name !== "p_tags"
+ )}
+ label={"Column Filters"}
+ setValue={setColumnValue}
+ value={columnValue}
+ defaultValue={"Select column"}
+ />
+
+
+ {!!availableTags?.length && (
+ <>
+
+
+
+ setQueryValue(e.target.value)}
+ type="text"
+ className="input mt-7"
+ />
+
+
+
+
+ + Filter Tags +
++ Filter Metadata +
+Active Filter
+ ) : null} +
+ {filter.map((val) => {
+ if (val.type === "Column") {
+ return (
+
+ {
+ removeGlobalFilter(val.column, val.contains, val.query);
+ }}
+ />
+
+ );
+ } else {
+ return (
+
+ {
+ if (val.type === "Tag") {
+ removeTag(val.value);
+ } else {
+ removeMeta(val.value);
+ }
+ removeTagOrMeta(val.type, val.value);
+ }}
+ />
+
+ );
+ }
+ })}
+
+
+
+
+ Close
+
+
+
+ );
+}
+
+export default Searchbar;
diff --git a/src/page/Dashboard/Table.js b/src/page/Dashboard/Table.js
index 230f9eb4..9a7c4ec6 100644
--- a/src/page/Dashboard/Table.js
+++ b/src/page/Dashboard/Table.js
@@ -20,7 +20,33 @@ const Table = ({
setOpen,
setClickedRow,
addAvailableTags,
+ addAvailableMeta,
+ selectedMeta,
+ selectedFilters,
}) => {
+ function filterCheck(data) {
+ if (!selectedFilters.length) {
+ return true;
+ }
+
+ for (const filter of selectedFilters) {
+ const column = filter.column;
+ const query =
+ typeof filter.query === "number"
+ ? filter.query.toString()
+ : filter.query;
+ const dataField =
+ typeof data[column] === "number"
+ ? data[column].toString()
+ : data[column];
+ let fieldContains = dataField.toLowerCase().includes(query.toLowerCase());
+ if (fieldContains !== filter.contains) {
+ return false;
+ }
+ }
+ return true;
+ }
+
return (
<>
+
+
+
+ | + filterCheck(data) && + hasSubArray(data.p_metadata?.split("^"), selectedMeta) && hasSubArray(data.p_tags?.split("^"), selectedTags) && (searchQuery === "" || JSON.stringify(data) @@ -85,8 +113,13 @@ const Table = ({ {data[schema] || ""} | ))} + {data.p_tags?.split("^").forEach((tag) => { - addAvailableTags(tag); + tag && addAvailableTags(tag); + })} + + {data.p_metadata?.split("^").forEach((tag) => { + addAvailableMeta(tag); })}
- Please create a log stream first to search logs. Refer to the
- documentation{" "}
-
- here
-
- .
-
- ) : (
- <>
- )}
+ function addFilter(filter) {
+ setSelectedFilters([...selectedFilters, filter]);
+ }
+
+ function addMeta(tag) {
+ setSelectedMeta([...selectedMeta, tag]);
+ }
+
+ return (
+
+
- {Object.keys(searchSelected).length !== 0 && (
-
+
+
+
+
+
+
+
+ {!logStream.isLoading &&
+ (logStream.isError || !logStream?.data?.data.length) ? (
+
+ Please create a log stream first to search logs. Refer to the
+ documentation{" "}
+
+ here
+
+ .
+
+ ) : (
+ <>
)}
+