-
-
- );
-};
-
-export default Checkbox;
-
-Checkbox.propTypes = {
- name: PropTypes.string,
- selected: PropTypes.bool,
- onClick: PropTypes.func.isRequired,
-};
-
-Checkbox.defaultProps = {
- name: null,
- selected: false,
-};
diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
deleted file mode 100644
index 808a5926..00000000
--- a/src/components/Dropdown/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import Button from "../DropdownButton";
-import { Listbox } from "@headlessui/react";
-import React from "react";
-import PropTypes from 'prop-types';
-import { SelectorIcon } from "@heroicons/react/solid";
-
-const Dropdown = ({ name, disabled, value, setValue, customStyle, Icon }) => {
- const data = [
- {
- name: "1s",
- value: 1,
- },
- {
- name: "2s",
- value: 2,
- },
- {
- name: "5s",
- value: 5,
- },
- {
- name: "10s",
- value: 10,
- },
- {
- name: "20s",
- value: 20,
- },
- {
- name: "1m",
- value: 60,
- },
- {
- name: "Off",
- value: null,
- },
- ];
-
- return (
-
-
-
-
-
-
- {data.map((obj) => (
-
- {({ active, selected }) => (
-
- ))}
-
-
-
- );
-};
-
-export default Dropdown;
-
-Dropdown.propTypes = {
- name: PropTypes.string,
- disabled: PropTypes.bool,
- value: PropTypes.string,
- setValue: PropTypes.func.isRequired,
- customStyle: PropTypes.string,
- Icon: PropTypes.elementType,
-};
-
-Dropdown.defaultProps = {
- name: null,
- disabled: false,
- value: null,
- customStyle: '',
- Icon: null,
-};
diff --git a/src/components/DropdownButton/index.js b/src/components/DropdownButton/index.js
deleted file mode 100644
index d75e4a80..00000000
--- a/src/components/DropdownButton/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { CheckIcon } from "@heroicons/react/solid";
-import React from "react";
-import PropTypes from 'prop-types';
-import classNames from "classnames";
-
-const Button = ({ text, active, selected }) => {
- return (
-
- {disabled ? "Off" : data.find((obj) => obj.value === value).name}
-
- {!Icon ? (
-
- ) : (
-
-
-
-
- );
-};
-
-export default Navbar;
-
-Navbar.propTypes = {
- setSidebarOpen: PropTypes.func,
-};
-
-Navbar.defaultProps = {
- setSidebarOpen: () => null,
-};
diff --git a/src/components/Layout/Sidebar.js b/src/components/Layout/Sidebar.js
deleted file mode 100644
index 8ddd39af..00000000
--- a/src/components/Layout/Sidebar.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { ChevronDownIcon, XIcon } from "@heroicons/react/outline";
-import { Dialog, Disclosure, Transition } from "@headlessui/react";
-import React, { Fragment } from "react";
-import PropTypes from 'prop-types';
-
-import Logo from "../../assets/images/Group 295.svg";
-
-const Sidebar = ({ setSidebarOpen, sidebarOpen, labels }) => {
- function classNames(...classes) {
- return classes.filter(Boolean).join(" ");
- }
-
- const labelClickHandler = (label) => {
- const previousLabels = sessionStorage.getItem("labels");
- if (previousLabels !== null) {
- sessionStorage.setItem("labels", `${previousLabels},${label}`);
- } else {
- sessionStorage.setItem("labels", label);
- }
- };
-
- return (
- <>
-
-
-
- 
-
-
-
-
-
- 
-
-
- {localStorage.getItem("username")?.length > 0
- ? localStorage.getItem("username")
- : ""}
-
-
- {
- localStorage.removeItem("auth");
- navigate("/");
- }}
- />
-
-
- {children}
-
-
- );
-}
-
-Layout.propTypes = {
- children: PropTypes.node,
- labels: PropTypes.string,
-};
-
-Layout.defaultProps = {
- children: null,
- labels: null,
-};
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
new file mode 100644
index 00000000..ba573a2a
--- /dev/null
+++ b/src/components/Loading/index.tsx
@@ -0,0 +1,40 @@
+import type { LoaderProps, LoadingOverlayProps } from '@mantine/core';
+import { LoadingOverlay, useMantineTheme } from '@mantine/core';
+import type { FC } from 'react';
+
+interface LoadingProps {
+ variant?: LoaderProps['variant'];
+ position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+}
+
+const Loading: FC
-
-
-
-
-);
-
-export default MultipleSelectDropdown;
-
-MultipleSelectDropdown.propTypes = {
- name: PropTypes.string,
- values: PropTypes.arrayOf(PropTypes.string),
- setSelectedValues: PropTypes.func.isRequired,
- data: PropTypes.arrayOf(PropTypes.string),
- removeValue: PropTypes.func.isRequired,
-};
-
-MultipleSelectDropdown.defaultProps = {
- name: null,
- values: [],
- data: [],
-};
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
new file mode 100644
index 00000000..903f1580
--- /dev/null
+++ b/src/components/Navbar/index.tsx
@@ -0,0 +1,116 @@
+import type { NavbarProps as MantineNavbarProps } from '@mantine/core';
+import { Navbar as MantineNavbar, NavLink ,Select} from '@mantine/core';
+import { IconNews , IconCodeCircle2, IconDatabase ,IconCheck ,IconFileAlert, IconReload } from '@tabler/icons-react';
+import { FC ,useEffect, useState} from 'react';
+import { useNavbarStyles } from './styles';
+import { useParams } from "react-router-dom";
+import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
+import { notifications } from '@mantine/notifications';
+import { useNavigate } from 'react-router-dom';
+const links = [
+ { icon: IconNews , label: 'Logs', pathname: "/logs" },
+ { icon: IconCodeCircle2, label: 'Query', pathname: "/query" },
+];
+
+type NavbarProps = Omit
-
- {values.length > 0
- ? values.map((val) => (
-
-
- {data.length !== 0 ? (
- data.map((value) => (
-
- {({ active, selected }) => (
-
- )}
-
- ))
- ) : (
-
-
- Nothing Found
- )}
-
- {x.map((item) => (
- {
- if (selected.includes(item)) {
- onRemove(item)
- setSelected([...selected.filter((val) => val !== item)]);
- } else {
- onAdd(item)
- setSelected([...selected, item]);
- }
- }}
- />
- ))}
-
-
- {isOverflow && (
- setSelectedShowMore(true)}
- text={"Show More"}
- />
- )}
-
-
- );
-}
-
-PillFilterList.propTypes = {
- x: PropTypes.arrayOf(PropTypes.string),
- onAdd: PropTypes.func.isRequired,
- onRemove: PropTypes.func.isRequired,
- values: PropTypes.arrayOf(PropTypes.string),
-};
-
-PillFilterList.defaultProps = {
- x: [],
- values: [],
-};
diff --git a/src/components/SearchableDropdown/index.js b/src/components/SearchableDropdown/index.js
deleted file mode 100644
index bff50363..00000000
--- a/src/components/SearchableDropdown/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { memo, useState } from "react";
-import PropTypes from 'prop-types';
-
-import { Combobox } from "@headlessui/react";
-import DropdownButton from "../DropdownButton";
-import { SelectorIcon } from "@heroicons/react/solid";
-
-const SearchableDropdown = ({ data, setValue, value, label, defaultValue }) => {
- const [query, setQuery] = useState("");
-
- const filteredData =
- query === ""
- ? data
- : data.filter((obj) => {
- return obj.name.toLowerCase().includes(query.toLowerCase());
- });
-
- return (
-
-
-
-
-
- );
-};
-
-export default memo(SearchableDropdown);
-
-SearchableDropdown.propTypes = {
- data: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string,
- })),
- value: PropTypes.shape({
- name: PropTypes.string,
- }),
- setValue: PropTypes.func.isRequired,
- label: PropTypes.string,
- defaultValue: PropTypes.string,
-};
-
-SearchableDropdown.defaultProps = {
- data: [],
- value: null,
- label: null,
- defaultValue: null,
-};
diff --git a/src/components/SideDialog/index.js b/src/components/SideDialog/index.js
deleted file mode 100644
index 3d87a857..00000000
--- a/src/components/SideDialog/index.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import React, { Fragment } from "react";
-import PropTypes from 'prop-types';
-
-import { XIcon } from "@heroicons/react/outline";
-import moment from "moment";
-
-const removeMeta = (data) => {
- let res = { ...data };
- delete res.p_tags;
- delete res.p_metadata;
- return { ...res };
-};
-
-export default function SideDialog({ open, setOpen, data }) {
- return (
-
-
-
-
-
- {filteredData?.map ? (
- filteredData.map((obj) => (
-
- {({ active, selected }) => (
-
- ))
- ) : (
-
-
- No data
- )}
- {children}
-
- );
-};
-export default HomeLayout;
diff --git a/src/layouts/MainLayout/index.tsx b/src/layouts/MainLayout/index.tsx
new file mode 100644
index 00000000..3c8ac239
--- /dev/null
+++ b/src/layouts/MainLayout/index.tsx
@@ -0,0 +1,25 @@
+import Header from '@/components/Header';
+import Navbar from '@/components/Navbar';
+import { NAVBAR_WIDTH } from '@/constants/theme';
+import { Box } from '@mantine/core';
+import type { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+import { useMainLayoutStyles } from './styles';
+
+const MainLayout: FC = () => {
+ const { classes } = useMainLayoutStyles();
+
+ const { container, contentContainer } = classes;
+
+ return (
+
-
- );
-};
-
-export default PublicLayout;
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..26e93068
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,19 @@
+import './utils/dayjsLoader';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from '@/components/App';
+import Mantine from '@/components/Mantine';
+import { BrowserRouter } from 'react-router-dom';
+import ErrorBoundary from './components/ErrorBoundary';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ {children}
-
-
- {isOpen && (
-
- );
-};
-
-export default DateRangeSelector;
diff --git a/src/page/Dashboard/DateSearchField.js b/src/page/Dashboard/DateSearchField.js
deleted file mode 100644
index 2bf9bd97..00000000
--- a/src/page/Dashboard/DateSearchField.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Calendar from "./DateRangeSeletor";
-import React from "react";
-import RefreshInterval from "./RefreshInterval";
-
-const DateSearchField = ({
- range,
- setStartTime,
- setEndTime,
- startTime,
- endTime,
- setRange,
- getRange,
- interval,
- setInterval,
-}) => (
-
-
- )}
-
-
-
- {rangeArr.map((item, index) => (
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
- {!checkValidDate() && (
-
-
-
- Error dates are not valid
-
- )}
-
-
-
- GMT {moment().format("Z")}
-
-
-
-
-
-);
-
-export default DateSearchField;
diff --git a/src/page/Dashboard/DateTimeRangePicker.css b/src/page/Dashboard/DateTimeRangePicker.css
deleted file mode 100644
index 128bd26e..00000000
--- a/src/page/Dashboard/DateTimeRangePicker.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.form-control {
- @apply w-full rounded border border-grey font-medium text-sm text-textBlack text-center p-3;
- @apply focus:ring-yellowButton focus:border-yellowButton focus:ring-1 focus:outline-0;
-}
-
-.fromDateHourContainer {
- @apply px-3 py-1;
-}
-
-.maxDateLabel {
- display: none;
-}
-
-.calendarGrid {
- @apply font-medium;
-}
-
-.monthYearContainer {
- @apply mb-6;
-}
-
-#Hour_start,
-#Minutes_start,
-#Hour_end,
-#Minutes_end,
-#MonthSelector_start,
-#MonthSelector_end,
-#YearSelector_start,
-#YearSelector_end {
- @apply rounded py-1 px-2 border border-grey font-medium text-xs text-textBlack text-center;
- @apply focus:ring-yellowButton focus:border-yellowButton focus:ring-1 focus:outline-0;
-}
-
-.multipleContentOnLine {
- outline: none !important;
-}
-
-#Hour_start,
-#Minutes_start,
-#Hour_end,
-#Minutes_end {
- @apply w-16;
-}
-
-#MonthSelector_start,
-#MonthSelector_end,
-#YearSelector_start,
-#YearSelector_end {
- @apply w-28;
-}
-
-.applyButton {
- background-color: #F29C38!important;
- border: none;
-}
diff --git a/src/page/Dashboard/FieldBox.js b/src/page/Dashboard/FieldBox.js
deleted file mode 100644
index 65422504..00000000
--- a/src/page/Dashboard/FieldBox.js
+++ /dev/null
@@ -1,73 +0,0 @@
-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 (
-
-
-
-
-
-
-
- );
-};
-
-export default Field;
diff --git a/src/page/Dashboard/Filters.js b/src/page/Dashboard/Filters.js
deleted file mode 100644
index ff8975f5..00000000
--- a/src/page/Dashboard/Filters.js
+++ /dev/null
@@ -1,229 +0,0 @@
-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,
- setSearchQuery,
-}) {
- 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 (
-
-
-
-
- {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)}
- />
- ))}
-
-
-
-
- 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);
- }}
- />
-
- )}
-
- {Boolean(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"}
- />
-
-
- {Boolean(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 RefreshInterval;
diff --git a/src/page/Dashboard/Searchbar.js b/src/page/Dashboard/Searchbar.js
deleted file mode 100644
index 6901af98..00000000
--- a/src/page/Dashboard/Searchbar.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { SearchIcon } from "@heroicons/react/solid";
-
-function Searchbar({ setSearchQuery }) {
- return (
-
-
- );
-}
-
-export default Searchbar;
diff --git a/src/page/Dashboard/Table.js b/src/page/Dashboard/Table.js
deleted file mode 100644
index 4a43c47c..00000000
--- a/src/page/Dashboard/Table.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import BeatLoader from "react-spinners/BeatLoader";
-import React from "react";
-
-function hasSubArray(master, sub) {
- master.sort();
- sub.sort();
- return sub.every(
- (
- (i) => (v) =>
- (i = master.indexOf(v, i) + 1)
- )(0)
- );
-}
-
-const Table = ({
- selectedLogSchema,
- logQueries,
- selectedTags,
- searchQuery,
- setOpen,
- setClickedRow,
- addAvailableTags,
- addAvailableMeta,
- selectedMeta,
- selectedFilters,
- hideError,
-}) => {
- 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 (
- <>
-
-
-
-
- | - {name} - | - ))} -
|---|
|
- |
-
| - {data[schema] || ""} - | - ))} - - {data.p_tags?.split("^").forEach((tag) => { - tag && addAvailableTags(tag); - })} - - {data.p_metadata?.split("^").forEach((tag) => { - addAvailableMeta(tag); - })} -
| - No data found - | -
|
- |
-
-
-);
-
-export default TagFilters;
diff --git a/src/page/Dashboard/index.css b/src/page/Dashboard/index.css
deleted file mode 100644
index 5a62af71..00000000
--- a/src/page/Dashboard/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.search-button {
- @apply relative w-72 text-left rounded-r-none border-grey rounded py-2 px-3 border font-medium text-textBlack;
-}
-
-.search-input {
- @apply w-full rounded py-2 px-3 rounded-l-none border border-l-0 border-grey font-medium text-textBlack;
-}
\ No newline at end of file
diff --git a/src/page/Dashboard/index.js b/src/page/Dashboard/index.js
deleted file mode 100644
index 4ca0c44e..00000000
--- a/src/page/Dashboard/index.js
+++ /dev/null
@@ -1,342 +0,0 @@
-import "./index.css";
-
-import React, { useEffect, useState } from "react";
-import {
- useGetLogStream,
- useGetLogStreamSchema,
- useQueryLogs,
-} from "../../utils/api";
-
-import DateSearchField from "./DateSearchField";
-import Field from "./FieldBox";
-import Filters from "./Filters";
-import SearchableDropdown from "../../components/SearchableDropdown";
-import SideDialog from "../../components/SideDialog";
-import Table from "./Table";
-import moment from "moment";
-
-const getCurrentTime = () => {
- let now = new Date();
- let start = moment(
- new Date(
- now.getFullYear(),
- now.getMonth(),
- now.getDate(),
- now.getHours(),
- now.getMinutes(),
- 0,
- 0
- )
- );
-
- return moment(start);
-};
-
-function getRange() {
- return {
- "Past 10 Minutes": [
- getCurrentTime().subtract(10, "minutes"),
- getCurrentTime().add(1, "minutes"),
- ],
- "Past 1 Hour": [getCurrentTime().subtract(60, "minutes"), getCurrentTime().add(1, "minutes")],
- "Past 5 Hours": [getCurrentTime().subtract(5, "hours"), getCurrentTime().add(1, "minutes")],
- "Past 24 Hours": [getCurrentTime().subtract(24, "hours"), getCurrentTime().add(1, "minutes")],
- "Past 3 Days": [getCurrentTime().subtract(3, "days"), getCurrentTime().add(1, "minutes")],
- "Past 7 Days": [getCurrentTime().subtract(7, "days"), getCurrentTime().add(1, "minutes")],
- "Past 2 Months": [getCurrentTime().subtract(2, "months"), getCurrentTime().add(1, "minutes")],
- };
-}
-
-let rangeArr = [
- "Past 10 Minutes",
- "Past 1 Hour",
- "Past 5 Hours",
- "Past 24 Hours",
- "Past 3 Days",
- "Past 7 Days",
- "Past 2 Months",
-];
-
-const Dashboard = () => {
- const [open, setOpen] = useState(false);
- const [clickedRow, setClickedRow] = useState({});
- const [searchQuery, setSearchQuery] = useState("");
- const [interval, setInterval] = useState(null);
- const [range, setRange] = useState(0);
- const [selectedLogSchema, setSelectedLogSchema] = useState([]);
- const [availableTags, setAvailableTags] = useState([]);
- const [availableMeta, setAvailableMeta] = useState([]);
- const [selectedTags, setSelectedTags] = useState([]);
- const [selectedMeta, setSelectedMeta] = useState([]);
- const [selectedFilters, setSelectedFilters] = useState([]);
- const [filters, setFilters] = useState([]);
- const [startTime, setStartTime] = useState(
- getCurrentTime().subtract(10, "minutes")
- );
-
- function addAvailableTags(label) {
- if (availableTags.includes(label)) {
- return;
- } else {
- setAvailableTags([...availableTags, label]);
- }
- }
-
- function addAvailableMeta(label) {
- if (availableMeta.includes(label)) {
- return;
- } else {
- setAvailableMeta([...availableMeta, label]);
- }
- }
-
- const [endTime, setEndTime] = useState(getCurrentTime());
-
- const [selectedLogStream, setSelectedLogStream] = useState(null);
-
- const logStream = useGetLogStream({
- retry: false,
- refetchOnWindowFocus: false,
- onSuccess: (data) => {
- setSelectedLogStream(data.data[0]);
- setSelectedTags([]);
- setAvailableTags([]);
- setAvailableMeta([]);
- setSelectedFilters([]);
- setSelectedMeta([]);
- },
- });
-
- const logStreamSchema = useGetLogStreamSchema(selectedLogStream?.name, {
- retry: false,
- enabled: Boolean(selectedLogStream?.name != null),
- refetchOnWindowFocus: false,
- onSuccess: (data) => {
- if (data.data.fields) {
- const allFields = data.data.fields.map((field) => {
- return field.name;
- });
-
- setSelectedLogSchema([
- ...allFields.filter(
- (field) => field !== "p_metadata" && field !== "p_tags"
- ),
- ]);
- } else {
- setSelectedLogSchema([]);
- }
- },
- });
-
- 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"),
- logStreamSchema?.data?.data?.fields?.map((field) => {
- return field.name;
- }),
- () => {
- if (range < 7 && interval) {
- const rangeVal = getRange();
- setStartTime(rangeVal[rangeArr[range]][0]);
- setEndTime(rangeVal[rangeArr[range]][1]);
- }
- },
- {
- retry: false,
- enabled:
- Boolean(
- logStreamSchema?.data?.data?.fields?.map((field) => {
- return field.name;
- })?.length !== 0
- ) && Boolean(selectedLogStream?.name != null),
- refetchOnWindowFocus: false,
- refetchInterval:
- interval === null || range === 7 ? false : interval * 1000,
- }
- );
-
- function getData(logQueriesData) {
- let dataSet = [];
- logQueriesData?.data?.pages?.forEach &&
- logQueriesData?.data?.pages?.data?.forEach((element) => {
- dataSet = [...dataSet, element];
- });
-
- return dataSet;
- }
-
- 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]);
-
- function removeTag(tag) {
- setSelectedTags([...selectedTags.filter((item) => item !== tag)]);
- }
-
- function removeMeta(tag) {
- setSelectedMeta([...selectedMeta.filter((item) => item !== tag)]);
- }
-
- function removeFilter(column, contains, query) {
- setSelectedFilters([
- ...selectedFilters.filter(
- (item) =>
- !(
- item.column === column &&
- item.contains === contains &&
- item.query === query
- )
- ),
- ]);
- }
-
- function addTag(tag) {
- setSelectedTags([...selectedTags, tag]);
- }
-
- function addFilter(filter) {
- setSelectedFilters([...selectedFilters, filter]);
- }
-
- function addMeta(tag) {
- setSelectedMeta([...selectedMeta, tag]);
- }
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!logStream.isLoading &&
- (logStream.isError || !logStream?.data?.data.length) ? (
-
- Please create a log stream first to search logs. Refer to the
- documentation{" "}
-
- here
-
- .
-
- ) : (
- <>
- )}
-
- {!logStreamSchema.isLoading &&
- !logStreamSchema.isFetching &&
- (logStreamSchema.isError || !logStreamSchema?.data?.data) ? (
-
-
- ) : (
- <>
- )}
- - No events found, please send data to this stream before query. Refer to the documentation{" "} - - here - -
- . -
-
- );
-};
-
-export default ForgotPassword;
diff --git a/src/page/Login/index.js b/src/page/Login/index.js
deleted file mode 100644
index 1bd4f4ff..00000000
--- a/src/page/Login/index.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState } from "react";
-
-import logo from "../../assets/images/Group 308.svg";
-import { useGetLogStream } from "../../utils/api";
-import { useNavigate } from "react-router-dom";
-
-const Login = () => {
- const navigate = useNavigate();
- const isClientMode = process.env.REACT_APP_ENV === "client";
-
- const logStream = useGetLogStream({
- enabled: false,
- onSuccess: () => navigate("/index.html"),
- });
-
- const [url, setURL] = useState("");
- const [username, setUsername] = useState("");
- const [password, setPassword] = useState("");
-
- const validate = () => {
- if (username.trim() === "") {
- return false;
- } else if (password.trim() === "") {
- return false;
- } else {
- return true;
- }
- };
-
- const loginHandler = (e) => {
- e.preventDefault();
- if (isClientMode) {
- localStorage.setItem("CLIENT_URL", url);
- }
- if (validate()) {
- const credentials = btoa(username + ":" + password);
- localStorage.setItem("auth", credentials);
- localStorage.setItem("username", username);
- logStream.refetch();
- }
- };
-
- return (
-
- 
-
-
- How to reset your password
-
-
- Follow the steps below to reset your password
-
-
-
-
-
-
-
-
-
- 1
-
-
-
-
-
- Log into your console
-
-
- Small description of the step above to be added
-
-
-
-
-
-
-
- 2
-
-
-
-
-
- Update Password
-
-
- Small description of the step above to be added
-
-
-
-
-
-
-
-
- 3
-
-
-
-
- Reset the environment
-
-
- Small description of the step above to be added
-
-
-
- );
-};
-
-export default Login;
diff --git a/src/pages/Errors/Bug.tsx b/src/pages/Errors/Bug.tsx
new file mode 100644
index 00000000..8486ee94
--- /dev/null
+++ b/src/pages/Errors/Bug.tsx
@@ -0,0 +1,46 @@
+import bugError from '@/assets/images/bug_error.webp';
+import { HOME_ROUTE } from '@/constants/routes';
+import FullPageLayout from '@/layouts/FullPageLayout';
+import type { ImageProps } from '@mantine/core';
+import { Box, Button, Center, Group, Image, Text, Title } from '@mantine/core';
+import { useDocumentTitle } from '@mantine/hooks';
+import type { FC } from 'react';
+import { useErrorPageStyles } from './styles';
+
+const Illustration: FC
-
-
- Welcome!
-
- Add your credentials to login
-
-
-
-
-
-
-
+ Nothing to see here
+
+ Page you are trying to open does not exist. You may have mistyped the address, or the page has been moved to
+ another URL. If you think this is an error contact support.
+
+
+
+
+
+ | Feild | +Type | +
|---|
No Data
+ ) + ) : ( +loading..
+ ) + ) : ( +Error: {logStreamSchemaError}
+ )} + +