Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 1 addition & 14 deletions src/components/SideDialog/index.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
/* This example requires Tailwind CSS v2.0+ */
import { Fragment, useEffect, useState } from "react";
import { Fragment } from "react";
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;
Expand All @@ -21,8 +11,6 @@ const removeMeta = (data) => {
};

export default function SideDialog({ open, setOpen, data }) {
const [log, setLog] = useState({});

return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={setOpen}>
Expand Down Expand Up @@ -71,7 +59,6 @@ export default function SideDialog({ open, setOpen, data }) {
</div>
</div>
<div className="relative flex-1 py-1 px-4 sm:px-6">
{/* Replace with your content */}
<div className="absolute inset-0 py-1 px-4 sm:px-6">
<div className="flex flex-wrap items-center">
{data.p_tags?.split("^").map((tag, index) => (
Expand Down
5 changes: 2 additions & 3 deletions src/page/Dashboard/DateRangeSeletor.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import moment from "moment";
import { useState, useEffect, useRef } from "react";
import DatePicker from "./DatePicker";
import { SelectorIcon } from "@heroicons/react/solid";
import { CalculatorIcon, ClockIcon } from "@heroicons/react/outline";
import { ClockIcon } from "@heroicons/react/outline";

const FORMAT = "DD-MM-YYYY HH:mm";

Expand Down Expand Up @@ -32,7 +31,7 @@ const DateRangeSelector = ({
const [isOpen, setIsOpen] = useState(false);

const [fromInput, setFromInput] = useState(
moment().subtract(10, "minutes").format(FORMAT),
moment().subtract(10, "minutes").format(FORMAT)
);

const [toInput, setToInput] = useState(moment().format(FORMAT));
Expand Down
117 changes: 16 additions & 101 deletions src/page/Dashboard/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import moment from "moment";
import { useState, Fragment, useRef, useCallback, useEffect } from "react";
import { useState, Fragment, useEffect } from "react";
import Layout from "../../components/Layout";
import SideDialog from "../../components/SideDialog";
import { Listbox, Transition } from "@headlessui/react";
Expand Down Expand Up @@ -31,7 +31,7 @@ function hasSubArray(master, sub) {
(
(i) => (v) =>
(i = master.indexOf(v, i) + 1)
)(0),
)(0)
);
}

Expand All @@ -46,8 +46,8 @@ const Dashboard = () => {
now.getHours(),
now.getMinutes(),
0,
0,
),
0
)
);

return moment(start);
Expand Down Expand Up @@ -80,22 +80,17 @@ const Dashboard = () => {

const [open, setOpen] = useState(false);
const [clickedRow, setClickedRow] = useState({});
const [timeZone, setTimeZone] = useState("UTC");
const [searchOpen, setSearchOpen] = useState(false);
const [query, setQuery] = useState("");
const [searchQuery, setSearchQuery] = useState("");
const [labelSelected, setLabelSelected] = useState([]);
const [searchSelected, setSearchSelected] = useState({});
const [interval, setInterval] = useState(null);
const [range, setRange] = useState(0);
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),
getCurrentTime().subtract(10, "minutes")
);

const addAvailableTags = (label) => {
Expand Down Expand Up @@ -171,7 +166,7 @@ const Dashboard = () => {

setSelectedLogSchema([
...allFields.filter(
(field) => field !== "p_metadata" && field !== "p_tags",
(field) => field !== "p_metadata" && field !== "p_tags"
),
]);
},
Expand Down Expand Up @@ -206,7 +201,7 @@ const Dashboard = () => {
refetchOnWindowFocus: false,
refetchInterval:
interval === null || range === 7 ? false : interval * 1000,
},
}
);

const { fetchNextPage } = logQueries;
Expand All @@ -228,10 +223,6 @@ const Dashboard = () => {
};
}, [fetchNextPage]);

const timeZoneChange = (e) => {
setTimeZone(e.target.value);
};

const getFilteredArray = (data, searchString, key) => {
if (!data) {
return [];
Expand All @@ -243,7 +234,7 @@ const Dashboard = () => {
data[key]
.toLowerCase()
.replace(/\s+/g, "")
.includes(searchQuery.toLowerCase().replace(/\s+/g, "")),
.includes(searchQuery.toLowerCase().replace(/\s+/g, ""))
);
}
};
Expand Down Expand Up @@ -304,7 +295,7 @@ const Dashboard = () => {
{getFilteredArray(
logStream?.data?.data,
query,
"name",
"name"
).length === 0 && query !== "" ? (
<div className="relative cursor-default select-none py-2 px-4 text-gray-700">
No log streams found
Expand All @@ -313,7 +304,7 @@ const Dashboard = () => {
getFilteredArray(
logStream?.data?.data,
query,
"name",
"name"
).map((stream, index) => (
<Combobox.Option
key={index}
Expand Down Expand Up @@ -401,74 +392,6 @@ const Dashboard = () => {
/>
</Combobox.Button>
</div>
{/* <Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
afterLeave={() => setSearchQuery("")}
>
<Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{getFilteredArray(
logQueries?.data?.data,
searchQuery,
"log",
).length === 0 && searchQuery !== "" ? (
<div className="relative cursor-default select-none py-2 px-4 text-gray-700">
Nothing found.
</div>
) : (
getFilteredArray(
logQueries?.data?.data,
searchQuery,
"log",
) &&
getFilteredArray(
logQueries?.data?.data,
searchQuery,
"log",
)?.map((data, index) => (
<Combobox.Option
key={index}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active
? "bg-bluePrimary text-white"
: "text-gray-900"
}`
}
value={data}
>
{({ selected, active }) => (
<>
<span
className={`block truncate ${
selected ? "font-medium" : "font-normal"
}`}
>
{data.log}
</span>
{selected ? (
<span
className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
active
? "text-white"
: "text-bluePrimary"
}`}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Combobox.Option>
))
)}
</Combobox.Options>
</Transition> */}
</div>
</Combobox>
</div>
Expand Down Expand Up @@ -602,12 +525,6 @@ const Dashboard = () => {
</div>
</div>

{/* <DatetimeRangePicker onChange={(e) => console.log('skhd',e)} /> */}

{/* <div className="w-44">
<AdvanceDateTimePicker />
</div> */}

<div className="overflow-auto">
<div className="flex min-w-full">
<div className=" min-w-[16rem]">
Expand Down Expand Up @@ -661,7 +578,7 @@ const Dashboard = () => {
(data, index) =>
hasSubArray(
data.p_tags?.split("^"),
selectedTags,
selectedTags
) &&
(searchQuery === "" ||
JSON.stringify(data)
Expand All @@ -681,14 +598,12 @@ const Dashboard = () => {
{data[schema] || ""}
</td>
))}
{data.p_tags
?.split("^")
.forEach((tag) => {
addAvailableTags(tag);
})}
{data.p_tags?.split("^").forEach((tag) => {
addAvailableTags(tag);
})}
</tr>
),
),
)
)
)}
<tr align={"center"}>
<td
Expand Down