Skip to content

Commit d606221

Browse files
mainawycliffemainawycliffe
committed
chore: wip
1 parent b160b0b commit d606221

12 files changed

+421
-237
lines changed

‎src/App.tsx

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
SchemaResourceType,
3636
schemaResourceTypes
3737
} from "./components/SchemaResourcePage/resourceTypes";
38+
import { TopologyPageWrapper } from "./components/Topology/TopologyPageWrapper";
3839
import { ConfigPageContextProvider } from "./context/ConfigPageContext";
3940
import { useFeatureFlagsContext } from "./context/FeatureFlagsContext";
4041
import { HealthPageContextProvider } from "./context/HealthPageContext";
@@ -266,15 +267,63 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
266267
/>
267268

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