Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

App.js file #55

Open
wants to merge 1 commit into
base: monitoring-dashboard
Choose a base branch
from
Open

App.js file #55

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
146 changes: 138 additions & 8 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,29 @@ import {
useNavigate,
} from "react-router-dom";
import { Toaster } from "react-hot-toast";

import "./App.css";
import { SidebarComponent } from "./components/sidebar";
import { MDBCol, MDBRow } from "mdb-react-ui-kit";
import { useContext, useMemo, useState, useEffect } from "react";
import { useEffect, useMemo, useState } from "react";
import { AppContext } from "./provider/contextProvider";
import { useAuthContext } from "./provider/authProvider";
import RequireAuth from "./hoc/requireAuth";
import Loader from "./components/fullscreenLoader";
import { useStore } from "./store";
import { SuccessScreen, Dashboard, Login, Add } from "./pages";
import { SuccessScreen, Dashboard, Login, Add, Overview } from "./pages";
import { history } from "./utils/history";
import { useAuth } from "./hooks/useAuth";
import { AuthContext } from "./provider/authProvider";
import useWindowSize from "./hooks/useWindow";
import Uciapi from "./pages/monitoring/uci-api";
import Inbound from "./pages/monitoring/inbound";
import Orchestrator from "./pages/monitoring/orchestrator";
import BroadcastTransformer from "./pages/monitoring/broadcast-transformer";
import Outbound from "./pages/monitoring/outbound";
import Transformer from "./pages/monitoring/transformer";
import UCIAPIlogs from "./pages/monitoring/logs/uci-api";
import InboundLogs from "./pages/monitoring/logs/inbound";
import OrchestratorLogs from "./pages/monitoring/logs/orchestrator";
import TransformerLogs from "./pages/monitoring/logs/transformer";
import BroadcastTransformerLogs from "./pages/monitoring/logs/broadcast-transformer";
import OutboundLogs from "./pages/monitoring/logs/outbound";

function App() {
const [isLoading, setIsLoading] = useState(false);
Expand Down Expand Up @@ -57,20 +66,21 @@ function App() {
const user = useMemo(() => store.user, [store.user]);

return (
<div style={{ height: "100vh", overflow: "scroll", ...theme }}>
<div style={{ height: "100vh", overflow: "hidden", ...theme }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why overflow:hidden ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incase of scroll, we get a scrollbar both for vertical and horizontal in dashboard page

<AppContext.Provider value={values}>
<>
<Loader loading={showLoader} />
<MDBRow>
{user && (
<MDBCol size={collapsed ? 1 : 2} className="p-0">
{" "}
<SidebarComponent
collapsed={collapsed}
handleCollapse={handleCollapse}
/>
</MDBCol>
)}
<MDBCol size={collapsed ? 11 : 10}>
<MDBCol size={user && collapsed ? 11 : 10}>
<Routes>
{user ? (
<Route path="/login" element={<Navigate to={pathName} />} />
Expand Down Expand Up @@ -101,6 +111,126 @@ function App() {
</RequireAuth>
}
/>
<Route
path="/monitoring"
element={
<RequireAuth>
<Overview theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/overview"
element={
<RequireAuth>
<Overview theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/uci-api"
element={
<RequireAuth>
<Uciapi theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/inbound"
element={
<RequireAuth>
<Inbound theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/orchestrator"
element={
<RequireAuth>
<Orchestrator theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/broadcast-transformer"
element={
<RequireAuth>
<BroadcastTransformer theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/outbound"
element={
<RequireAuth>
<Outbound theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/transformer"
element={
<RequireAuth>
<Transformer theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs"
element={
<RequireAuth>
<UCIAPIlogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/uci-api"
element={
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why same component have 2 different routes ?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Monitoring is the main section and in that we have subsection. so if someone clicks on monitoring, if we do not have any route for it, it will show an err. So, just for that added the route of the first subsection

<RequireAuth>
<UCIAPIlogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/inbound"
element={
<RequireAuth>
<InboundLogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/orchestrator"
element={
<RequireAuth>
<OrchestratorLogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/transformer"
element={
<RequireAuth>
<TransformerLogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/broadcast-transformer"
element={
<RequireAuth>
<BroadcastTransformerLogs theme={store?.theme} />
</RequireAuth>
}
/>
<Route
path="/monitoring/logs/outbound"
element={
<RequireAuth>
<OutboundLogs theme={store?.theme} />
</RequireAuth>
}
/>
</Routes>
</MDBCol>
</MDBRow>
Expand Down