Skip to content

Commit 21eb6c7

Browse files
mainawycliffemainawycliffe
committed
chore: wip
1 parent 262f36f commit 21eb6c7

12 files changed

+421
-237
lines changed

‎src/App.tsx‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
SchemaResourceType,
3535
schemaResourceTypes
3636
} from "./components/SchemaResourcePage/resourceTypes";
37+
import { TopologyPageWrapper } from "./components/Topology/TopologyPageWrapper";
3738
import { ConfigPageContextProvider } from "./context/ConfigPageContext";
3839
import { useFeatureFlagsContext } from "./context/FeatureFlagsContext";
3940
import { HealthPageContextProvider } from "./context/HealthPageContext";
@@ -262,15 +263,63 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
262263
/>
263264

264265
<Route path="topology" element={sidebar}>
265-
<Route
266-
path=":id"
267-
element={withAuthorizationAccessCheck(
268-
<TopologyPage />,
269-
tables.database,
270-
"read",
271-
true
272-
)}
273-
/>
266+
<Route path=":id">
267+
<Route
268+
index
269+
element={withAuthorizationAccessCheck(
270+
<TopologyPage></TopologyPage>,
271+
tables.database,
272+
"read",
273+
true
274+
)}
275+
/>
276+
277+
<Route
278+
path="changes"
279+
element={withAuthorizationAccessCheck(
280+
<TopologyPageWrapper catalogTab="Changes" />,
281+
tables.database,
282+
"read",
283+
true
284+
)}
285+
/>
286+
<Route
287+
path="insights"
288+
element={withAuthorizationAccessCheck(
289+
<TopologyPageWrapper catalogTab="Insights" />,
290+
tables.database,
291+
"read",
292+
true
293+
)}
294+
/>
295+
<Route
296+
path="relationships"
297+
element={withAuthorizationAccessCheck(
298+
<TopologyPageWrapper catalogTab="Relationships" />,
299+
tables.database,
300+
"read",
301+
true
302+
)}
303+
/>
304+
<Route
305+
path="playbooks"
306+
element={withAuthorizationAccessCheck(
307+
<TopologyPageWrapper catalogTab="Playbooks" />,
308+
tables.database,
309+
"read",
310+
true
311+
)}
312+
/>
313+
<Route
314+
path="checks"
315+
element={withAuthorizationAccessCheck(
316+
<TopologyPageWrapper catalogTab="Checks" />,
317+
tables.database,
318+
"read"
319+
)}
320+
/>
321+
</Route>
322+
274323
<Route
275324
index
276325
element={withAuthorizationAccessCheck(

‎src/components/Configs/ConfigDetailsTabs.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,20 @@ import { TopologyCard } from "../Topology/TopologyCard";
1414
import { useConfigDetailsTabs } from "./ConfigTabsLinks";
1515
import ConfigSidebar from "./Sidebar/ConfigSidebar";
1616

17-
type ConfigDetailsTabsProps = {
17+
export type ConfigTab =
18+
| "Catalog"
19+
| "Changes"
20+
| "Insights"
21+
| "Relationships"
22+
| "Playbooks"
23+
| "Checks";
24+
25+
export type ConfigDetailsTabsProps = {
1826
refetch?: () => void;
1927
children: ReactNode;
2028
isLoading?: boolean;
2129
pageTitlePrefix: string;
22-
activeTabName:
23-
| "Catalog"
24-
| "Changes"
25-
| "Insights"
26-
| "Relationships"
27-
| "Playbooks"
28-
| "Checks";
30+
activeTabName: ConfigTab;
2931
className?: string;
3032
};
3133

‎src/components/Configs/ConfigTabsLinks.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { useParams } from "react-router-dom";
33
import { ConfigItemDetails } from "../../api/types/configs";
44

55
export function useConfigDetailsTabs(
6-
countSummary?: ConfigItemDetails["summary"]
6+
countSummary?: ConfigItemDetails["summary"],
7+
basePath: `/${string}` = "/catalog"
78
) {
89
const { id } = useParams<{ id: string }>();
910

1011
return [
11-
{ label: "Config", key: "Catalog", path: `/catalog/${id}` },
12+
{ label: "Config", key: "Catalog", path: `${basePath}/${id}` },
1213
{
1314
label: (
1415
<>
@@ -17,7 +18,7 @@ export function useConfigDetailsTabs(
1718
</>
1819
),
1920
key: "Changes",
20-
path: `/catalog/${id}/changes`
21+
path: `${basePath}/${id}/changes`
2122
},
2223
{
2324
label: (
@@ -27,7 +28,7 @@ export function useConfigDetailsTabs(
2728
</>
2829
),
2930
key: "Insights",
30-
path: `/catalog/${id}/insights`
31+
path: `${basePath}/${id}/insights`
3132
},
3233
{
3334
label: (
@@ -37,7 +38,7 @@ export function useConfigDetailsTabs(
3738
</>
3839
),
3940
key: "Relationships",
40-
path: `/catalog/${id}/relationships`
41+
path: `${basePath}/${id}/relationships`
4142
},
4243
{
4344
label: (
@@ -47,7 +48,7 @@ export function useConfigDetailsTabs(
4748
</>
4849
),
4950
key: "Playbooks",
50-
path: `/catalog/${id}/playbooks`
51+
path: `${basePath}/${id}/playbooks`
5152
},
5253
{
5354
label: (
@@ -57,7 +58,7 @@ export function useConfigDetailsTabs(
5758
</>
5859
),
5960
key: "Checks",
60-
path: `/catalog/${id}/checks`
61+
path: `${basePath}/${id}/checks`
6162
}
6263
];
6364
}

‎src/components/Topology/MergedTopologyConfigPage.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Topology } from "@flanksource-ui/api/types/topology";
2+
import IncidentDetailsPageSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/IncidentDetailsPageSkeletonLoader";
3+
import clsx from "clsx";
4+
import { useGetConfigByIdQuery } from "../../api/query-hooks";
5+
import TabbedLinks from "../../ui/Tabs/TabbedLinks";
6+
import { ConfigTab } from "../Configs/ConfigDetailsTabs";
7+
import { useConfigDetailsTabs } from "../Configs/ConfigTabsLinks";
8+
import { ErrorBoundary } from "../ErrorBoundary";
9+
import { TopologyCard } from "./TopologyCard";
10+
import { useTopologyCardWidth } from "./TopologyPopover/topologyPreference";
11+
12+
type ConfigDetailsTabsForTopologyPageProps = {
13+
configId: string;
14+
topologies: Topology[];
15+
activeTabName?: ConfigTab;
16+
className?: string;
17+
children: React.ReactNode;
18+
};
19+
20+
export function MergedTopologyConfigPage({
21+
children,
22+
activeTabName = "Catalog",
23+
className = "p-2",
24+
configId: id,
25+
topologies
26+
}: ConfigDetailsTabsForTopologyPageProps) {
27+
const { data: configItem, isLoading: isLoadingConfig } =
28+
useGetConfigByIdQuery(id!);
29+
30+
const configTabList = useConfigDetailsTabs(configItem?.summary, "/topology");
31+
32+
const [topologyCardSize] = useTopologyCardWidth();
33+
34+
return (
35+
// eslint-disable-next-line react/jsx-no-useless-fragment
36+
<>
37+
{isLoadingConfig ? (
38+
<IncidentDetailsPageSkeletonLoader />
39+
) : (
40+
<div className={`flex h-full flex-row bg-gray-100`}>
41+
<div className="flex flex-1 flex-col">
42+
{topologies.length > 0 && (
43+
<div className="flex max-h-[40%] w-full flex-wrap overflow-auto p-4">
44+
{topologies.map((topology) => (
45+
<TopologyCard
46+
key={topology.id}
47+
topology={topology}
48+
size={topologyCardSize}
49+
menuPosition="absolute"
50+
/>
51+
))}
52+
</div>
53+
)}
54+
55+
<TabbedLinks
56+
activeTabName={activeTabName}
57+
tabLinks={configTabList}
58+
contentClassName={clsx(
59+
"bg-white border border-t-0 border-gray-300 flex-1 overflow-y-auto",
60+
className
61+
)}
62+
>
63+
<ErrorBoundary>{children}</ErrorBoundary>
64+
</TabbedLinks>
65+
</div>
66+
</div>
67+
)}
68+
</>
69+
);
70+
}

‎src/components/Topology/TopologyPage/TopologyFilterBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm"
55
import { StateOption } from "@flanksource-ui/components/ReactSelectDropdown";
66
import { ComponentLabelsDropdown } from "@flanksource-ui/components/Topology/Dropdowns/ComponentLabelsDropdown";
77
import { ComponentTypesDropdown } from "@flanksource-ui/components/Topology/Dropdowns/ComponentTypesDropdown";
8-
import { allOption } from "@flanksource-ui/pages/TopologyPage";
98
import { useMemo } from "react";
9+
import { allOption } from "../TopologyPageWrapper";
1010
import TopologyPopOver from "../TopologyPopover";
1111
import { TopologySort } from "../TopologyPopover/topologySort";
1212

0 commit comments

Comments
 (0)