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

2365-Catalog-filter-dropdowns-freeze-on-selection #2367

Merged
merged 5 commits into from
Oct 31, 2024
Merged

2365-Catalog-filter-dropdowns-freeze-on-selection #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7987a7
fix: lazy load individual pages for reduced bundle size
mainawycliffe Oct 22, 2024
b6e3127
fix: use react-selected-windowed for config dropdown for performance …
mainawycliffe Oct 22, 2024
b1dcb10
fix: optimize icons for imports
mainawycliffe Oct 23, 2024
8b023dc
fix: fix config insights filter by config type not working
mainawycliffe Oct 23, 2024
42102c4
test: remove flaky test
mainawycliffe Oct 29, 2024
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
3 changes: 2 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@ const config = {
// increase the default timeout for the proxy from 30s to 10m to allow for
// long running requests to the backend
proxyTimeout: 1000 * 60 * 10,
esmExternals: "loose"
esmExternals: "loose",
optimizePackageImports: ["@flanksource/icons"]
},
transpilePackages: ["monaco-editor"]
};
Expand Down
219 changes: 182 additions & 37 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { AdjustmentsIcon } from "@heroicons/react/solid";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Provider } from "jotai";
import dynamic from "next/dynamic";
import React, { ReactNode, useEffect, useState } from "react";
import { IconType } from "react-icons";
import { AiFillHeart } from "react-icons/ai";
Expand All @@ -21,14 +22,9 @@ import {
useLocation
} from "react-router-dom";
import { Canary, Icon } from "./components";
import AgentsPage from "./components/Agents/AgentPage";
import AuthProviderWrapper from "./components/Authentication/AuthProviderWrapper";
import { ErrorBoundary } from "./components/ErrorBoundary";
import EditIntegrationPage from "./components/Integrations/EditIntegrationPage";
import IntegrationsPage from "./components/Integrations/IntegrationsPage";
import JobsHistorySettingsPage from "./components/JobsHistory/JobsHistorySettingsPage";
import { withAuthorizationAccessCheck } from "./components/Permissions/AuthorizationAccessCheck";
import { SchemaResourcePage } from "./components/SchemaResourcePage";
import { SchemaResource } from "./components/SchemaResourcePage/SchemaResource";
import {
SchemaResourceType,
Expand All @@ -40,36 +36,6 @@ import { HealthPageContextProvider } from "./context/HealthPageContext";
import { IncidentPageContextProvider } from "./context/IncidentPageContext";
import { UserAccessStateContextProvider } from "./context/UserAccessContext/UserAccessContext";
import { tables } from "./context/UserAccessContext/permissions";
import {
ConfigChangesPage,
ConfigDetailsChangesPage,
ConfigDetailsPage,
ConfigListPage,
IncidentDetailsPage,
IncidentListPage,
LogsPage,
TopologyPage
} from "./pages";
import { ConnectionsPage } from "./pages/Settings/ConnectionsPage";
import { EventQueueStatusPage } from "./pages/Settings/EventQueueStatus";
import { FeatureFlagsPage } from "./pages/Settings/FeatureFlagsPage";
import NotificationSilencedAddPage from "./pages/Settings/notifications/NotificationSilencedAddPage";
import NotificationsPage from "./pages/Settings/notifications/NotificationsPage";
import NotificationRulesPage from "./pages/Settings/notifications/NotificationsRulesPage";
import NotificationsSilencedPage from "./pages/Settings/notifications/NotificationsSilencedPage";
import { TopologyCardPage } from "./pages/TopologyCard";
import { UsersPage } from "./pages/UsersPage";
import { ConfigInsightsPage } from "./pages/config/ConfigInsightsList";
import { ConfigDetailsChecksPage } from "./pages/config/details/ConfigDetailsChecksPage";
import { ConfigDetailsInsightsPage } from "./pages/config/details/ConfigDetailsInsightsPage";
import { ConfigDetailsPlaybooksPage } from "./pages/config/details/ConfigDetailsPlaybooks";
import { ConfigDetailsRelationshipsPage } from "./pages/config/details/ConfigDetailsRelationshipsPage";
import ConfigScrapersEditPage from "./pages/config/settings/ConfigScrapersEditPage";
import ConfigScrapersPage from "./pages/config/settings/ConfigScrapersPage";
import { HealthPage } from "./pages/health";
import PlaybookRunsDetailsPage from "./pages/playbooks/PlaybookRunsDetails";
import PlaybookRunsPage from "./pages/playbooks/PlaybookRunsPage";
import { PlaybooksListPage } from "./pages/playbooks/PlaybooksList";
import { features } from "./services/permissions/features";
import { Head } from "./ui/Head";
import { LogsIcon } from "./ui/Icons/LogsIcon";
Expand All @@ -79,6 +45,185 @@ import FullPageSkeletonLoader from "./ui/SkeletonLoader/FullPageSkeletonLoader";
import { ToasterWithCloseButton } from "./ui/ToasterWithCloseButton";
import { stringSortHelper } from "./utils/common";

const TopologyPage = dynamic(
import("@flanksource-ui/pages/TopologyPage").then((mod) => mod.TopologyPage)
);

const TopologyCardPage = dynamic(
import("@flanksource-ui/pages/TopologyCard").then(
(mod) => mod.TopologyCardPage
)
);

const IncidentDetailsPage = dynamic(
import("@flanksource-ui/pages/incident/IncidentDetails").then(
(mod) => mod.IncidentDetailsPage
)
);

const IncidentListPage = dynamic(
import("@flanksource-ui/pages/incident/IncidentListPage").then(
(mod) => mod.IncidentListPage
)
);

const ConfigListPage = dynamic(
import("@flanksource-ui/pages/config/ConfigList").then(
(mod) => mod.ConfigListPage
)
);

const ConfigDetailsPage = dynamic(
import("@flanksource-ui/pages/config/details/ConfigDetailsPage").then(
(mod) => mod.ConfigDetailsPage
)
);

const ConfigDetailsChangesPage = dynamic(
import("@flanksource-ui/pages/config/details/ConfigDetailsChangesPage").then(
(mod) => mod.ConfigDetailsChangesPage
)
);

const PlaybooksListPage = dynamic(
import("@flanksource-ui/pages/playbooks/PlaybooksList").then(
(mod) => mod.PlaybooksListPage
)
);

const LogsPage = dynamic(
import("@flanksource-ui/pages/LogsPage").then((mod) => mod.LogsPage)
);

const ConfigChangesPage = dynamic(
import("@flanksource-ui/pages/config/ConfigChangesPage").then(
(mod) => mod.ConfigChangesPage
)
);

const PlaybookRunsPage = dynamic(
import("@flanksource-ui/pages/playbooks/PlaybookRunsPage").then(
(mod) => mod.default
)
);

const PlaybookRunsDetailsPage = dynamic(
import("@flanksource-ui/pages/playbooks/PlaybookRunsDetails").then(
(mod) => mod.default
)
);

const ConfigInsightsPage = dynamic(
import("@flanksource-ui/pages/config/ConfigInsightsList").then(
(mod) => mod.ConfigInsightsPage
)
);

const HealthPage = dynamic(
import("@flanksource-ui/pages/health").then((mod) => mod.HealthPage)
);

const ConnectionsPage = dynamic(() =>
import("@flanksource-ui/pages/Settings/ConnectionsPage").then(
(m) => m.ConnectionsPage
)
);

const EventQueueStatusPage = dynamic(() =>
import("@flanksource-ui/pages/Settings/EventQueueStatus").then(
(m) => m.EventQueueStatusPage
)
);

const FeatureFlagsPage = dynamic(() =>
import("@flanksource-ui/pages/Settings/FeatureFlagsPage").then(
(m) => m.FeatureFlagsPage
)
);

const NotificationSilencedAddPage = dynamic(
() =>
import(
"@flanksource-ui/pages/Settings/notifications/NotificationSilencedAddPage"
)
);

const NotificationsPage = dynamic(
() => import("@flanksource-ui/pages/Settings/notifications/NotificationsPage")
);

const NotificationRulesPage = dynamic(
() =>
import(
"@flanksource-ui/pages/Settings/notifications/NotificationsRulesPage"
)
);

const NotificationsSilencedPage = dynamic(
() =>
import(
"@flanksource-ui/pages/Settings/notifications/NotificationsSilencedPage"
)
);

const UsersPage = dynamic(() =>
import("@flanksource-ui/pages/UsersPage").then((m) => m.UsersPage)
);

const ConfigDetailsChecksPage = dynamic(() =>
import("@flanksource-ui/pages/config/details/ConfigDetailsChecksPage").then(
(m) => m.ConfigDetailsChecksPage
)
);

const ConfigDetailsInsightsPage = dynamic(() =>
import("@flanksource-ui/pages/config/details/ConfigDetailsInsightsPage").then(
(m) => m.ConfigDetailsInsightsPage
)
);

const ConfigDetailsPlaybooksPage = dynamic(() =>
import("@flanksource-ui/pages/config/details/ConfigDetailsPlaybooks").then(
(m) => m.ConfigDetailsPlaybooksPage
)
);

const ConfigDetailsRelationshipsPage = dynamic(() =>
import(
"@flanksource-ui/pages/config/details/ConfigDetailsRelationshipsPage"
).then((mod) => mod.ConfigDetailsRelationshipsPage)
);

const ConfigScrapersEditPage = dynamic(
() => import("@flanksource-ui/pages/config/settings/ConfigScrapersEditPage")
);

const ConfigScrapersPage = dynamic(
() => import("@flanksource-ui/pages/config/settings/ConfigScrapersPage")
);

const EditIntegrationPage = dynamic(
() => import("./components/Integrations/EditIntegrationPage")
);

const IntegrationsPage = dynamic(
() => import("./components/Integrations/IntegrationsPage")
);

const JobsHistorySettingsPage = dynamic(
() => import("./components/JobsHistory/JobsHistorySettingsPage")
);

const AgentsPage = dynamic(
() => import("@flanksource-ui/components/Agents/AgentPage")
);

const SchemaResourcePage = dynamic(() =>
import("@flanksource-ui/components/SchemaResourcePage").then(
(mod) => mod.SchemaResourcePage
)
);

const isDevelopment = process.env.NODE_ENV === "development";

export type NavigationItems = {
Expand Down Expand Up @@ -265,8 +410,8 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
<Route
path=":id"
element={withAuthorizationAccessCheck(
<TopologyPage />,
tables.database,
<TopologyCardPage />,
tables.topologies,
"read",
true
)}
Expand Down
Loading
Loading