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.

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

feat: configure router to go between pods and cronjobs page #15

Merged
merged 1 commit into from
Jan 15, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
"@heroicons/react": "^2.0.13",
"@kubernetes/client-node": "^0.18.0",
"@tanstack/react-query": "^4.22.0",
"@tanstack/react-query-devtools": "^4.22.0",
"@tanstack/react-router": "beta",
"@tauri-apps/api": "^1.2.0",
"date-fns": "^2.29.3",
"react": "^18.2.0",
Expand Down
2 changes: 0 additions & 2 deletions src-tauri/src/resources/cron_jobs.rs
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
use k8s_openapi::api::batch::v1::CronJob;
use kube::core::ObjectList;

// use crate::internal::get_resource_list;

use super::internal::get_resource_list;

#[tauri::command]
Expand Down
18 changes: 18 additions & 0 deletions src/app-providers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { type PropsWithChildren } from "react";

import { NamespaceProvider, CurrentNamespaceProvider } from "./namespaces/namespaces";

type Provider = ({ children }: PropsWithChildren) => JSX.Element;

const providers = [NamespaceProvider, CurrentNamespaceProvider];

const composeProviders = (providers: Provider[]) => {
// eslint-disable-next-line react/display-name
return providers.reduce((Prev, Curr) => ({ children }: PropsWithChildren) => (
<Prev>
<Curr>{children}</Curr>
</Prev>
));
};

export const AppProviders = composeProviders(providers);
31 changes: 5 additions & 26 deletions src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,16 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { PropsWithChildren } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { RouterProvider } from "@tanstack/react-router";

import { CronJobs } from "./cron-jobs/cron-jobs";
import { Layout } from "./layout";
import { CurrentNamespaceProvider, NamespaceProvider } from "./namespaces/namespaces";
import { Pods } from "./pods/pods";
import { router } from "./router";

const queryClient = new QueryClient();

type Provider = ({ children }: PropsWithChildren) => JSX.Element;

const providers = [NamespaceProvider, CurrentNamespaceProvider];

const composeProviders = (providers: Provider[]) => {
// eslint-disable-next-line react/display-name
return providers.reduce((Prev, Curr) => ({ children }: PropsWithChildren) => (
<Prev>
<Curr>{children}</Curr>
</Prev>
));
};

const AppProviders = composeProviders(providers);

export function App() {
return (
<QueryClientProvider client={queryClient}>
<AppProviders>
<Layout>
{/* <Pods /> */}
<CronJobs />
</Layout>
</AppProviders>
<RouterProvider router={router} />
<ReactQueryDevtools />
</QueryClientProvider>
);
}
13 changes: 7 additions & 6 deletions src/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Link } from "@tanstack/react-router";
import type { PropsWithChildren } from "react";

import { NamespaceSelect } from "./namespaces/namespace-select";

const navigation = [
{ name: "Pods", href: "#" },
{ name: "Cron Jobs", href: "#" },
];
{ name: "Pods", href: "/pods" },
{ name: "Cron Jobs", href: "/cron-jobs" },
] as const;
Copy link
Owner Author

Choose a reason for hiding this comment

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

as const makes sure we have full type safety when definiting links


export function Layout({ children }: PropsWithChildren) {
return (
Expand All @@ -21,13 +22,13 @@ export function Layout({ children }: PropsWithChildren) {
<div className="flex flex-1 flex-col overflow-y-auto">
<nav className="flex-1 space-y-1 px-2 py-4">
{navigation.map((item) => (
<a
<Link
key={item.name}
href={item.href}
to={item.href}
className="group flex items-center rounded-md p-2 text-sm font-medium text-gray-800 hover:bg-gray-400"
>
{item.name}
</a>
</Link>
))}
</nav>
</div>
Expand Down
42 changes: 42 additions & 0 deletions src/router.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Outlet, createReactRouter, createRouteConfig } from "@tanstack/react-router";

import { AppProviders } from "./app-providers";
import { CronJobs } from "./cron-jobs/cron-jobs";
import { Layout } from "./layout";
import { Pods } from "./pods/pods";

const rootRoute = createRouteConfig({
component: () => (
<AppProviders>
<Layout>
<Outlet />
</Layout>
<ReactQueryDevtools />
</AppProviders>
),
});

const homeRoute = rootRoute.createRoute({
path: "/",
component: () => <div>TODO: figure out what to show by default</div>,
});

const podsRoute = rootRoute.createRoute({
path: "/pods",
component: Pods,
});

const cronJobsRoute = rootRoute.createRoute({
path: "/cron-jobs",
component: CronJobs,
});

const routeConfig = rootRoute.addChildren([homeRoute, podsRoute, cronJobsRoute]);
export const router = createReactRouter({ routeConfig });

declare module "@tanstack/react-router" {
interface RegisterRouter {
router: typeof router;
}
}
127 changes: 127 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,15 @@ __metadata:
languageName: node
linkType: hard

"@babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.7.6":
version: 7.20.7
resolution: "@babel/runtime@npm:7.20.7"
dependencies:
regenerator-runtime: ^0.13.11
checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3
languageName: node
linkType: hard

"@babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7":
version: 7.20.7
resolution: "@babel/template@npm:7.20.7"
Expand Down Expand Up @@ -694,6 +703,13 @@ __metadata:
languageName: node
linkType: hard

"@solidjs/reactivity@npm:^0.0.6":
version: 0.0.6
resolution: "@solidjs/reactivity@npm:0.0.6"
checksum: bdfb951b3a20248562b0e4e76c417becbaf564401af4a6b1c89dd95c8686496025629183d6574f1b53f477570a08646f52a316572783ab5ca7efe6bc66b3d6ae
languageName: node
linkType: hard

"@tailwindcss/forms@npm:^0.5.3":
version: 0.5.3
resolution: "@tailwindcss/forms@npm:0.5.3"
Expand All @@ -705,13 +721,37 @@ __metadata:
languageName: node
linkType: hard

"@tanstack/match-sorter-utils@npm:^8.7.0":
version: 8.7.6
resolution: "@tanstack/match-sorter-utils@npm:8.7.6"
dependencies:
remove-accents: 0.4.2
checksum: 3f3dda277e6e55ca1224a28b38a2deb3ac912c2f2f5263a32fa0d9126c6b6d05feb475539729fd248f1eb88b612109db90b847ec8fdfc05d0f4073c900a2d3f6
languageName: node
linkType: hard

"@tanstack/query-core@npm:4.22.0":
version: 4.22.0
resolution: "@tanstack/query-core@npm:4.22.0"
checksum: d24c13f8e21b65380230055a6673ae670aca5ee550c2f9a24b89fd3ac5243b465bb25f61b29da8ca285fc7fb0f4c2f8add3864f742eafac5131e777f3e52767a
languageName: node
linkType: hard

"@tanstack/react-query-devtools@npm:^4.22.0":
version: 4.22.0
resolution: "@tanstack/react-query-devtools@npm:4.22.0"
dependencies:
"@tanstack/match-sorter-utils": ^8.7.0
superjson: ^1.10.0
use-sync-external-store: ^1.2.0
peerDependencies:
"@tanstack/react-query": 4.22.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 458cbc23e00f8e798022bb22d42fcb833f8b3ffd69d7d99d78d050b77dbe34cde264f18d41e6372c72264de4550fbf3e2947ee2581cb10fb5b3aa90d9f92f6e4
languageName: node
linkType: hard

"@tanstack/react-query@npm:^4.22.0":
version: 4.22.0
resolution: "@tanstack/react-query@npm:4.22.0"
Expand All @@ -731,6 +771,36 @@ __metadata:
languageName: node
linkType: hard

"@tanstack/react-router@npm:beta":
version: 0.0.1-beta.48
resolution: "@tanstack/react-router@npm:0.0.1-beta.48"
dependencies:
"@babel/runtime": ^7.16.7
"@solidjs/reactivity": ^0.0.6
"@tanstack/router-core": 0.0.1-beta.45
use-sync-external-store: ^1.2.0
peerDependencies:
react: ">=16"
react-dom: ">=16"
checksum: 889e8506da32a3ecec35b71844bdc23feee98bba3cb55d85a4845e7b03b941af5ec94dadccc645f8067ad3b0448b5c4b3f4aca0b207c0d13b196f03dd360a38e
languageName: node
linkType: hard

"@tanstack/router-core@npm:0.0.1-beta.45":
version: 0.0.1-beta.45
resolution: "@tanstack/router-core@npm:0.0.1-beta.45"
dependencies:
"@babel/runtime": ^7.16.7
"@solidjs/reactivity": ^0.0.6
history: ^5.2.0
tiny-invariant: ^1.3.1
peerDependencies:
react: ">=16"
react-dom: ">=16"
checksum: 3deab3a90b060a85b451531e993c9d432803a96b636a1857726e747f57f3c20ef45127d9c2a022d3c5ee62e1b16617cd298676f90bb2b19bd5046d98d42671ba
languageName: node
linkType: hard

"@tauri-apps/api@npm:^1.2.0":
version: 1.2.0
resolution: "@tauri-apps/api@npm:1.2.0"
Expand Down Expand Up @@ -1638,6 +1708,15 @@ __metadata:
languageName: node
linkType: hard

"copy-anything@npm:^3.0.2":
version: 3.0.3
resolution: "copy-anything@npm:3.0.3"
dependencies:
is-what: ^4.1.8
checksum: d456dc5ec98dee7c7cf87d809eac30dc2ac942acd4cf970fab394e280ceb6dd7a8a7a5a44fcbcc50e0206658de3cc20b92863562f5797930bb2619f164f4c182
languageName: node
linkType: hard

"core-util-is@npm:1.0.2":
version: 1.0.2
resolution: "core-util-is@npm:1.0.2"
Expand Down Expand Up @@ -2681,6 +2760,15 @@ __metadata:
languageName: node
linkType: hard

"history@npm:^5.2.0":
version: 5.3.0
resolution: "history@npm:5.3.0"
dependencies:
"@babel/runtime": ^7.7.6
checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
languageName: node
linkType: hard

"http-cache-semantics@npm:^4.1.0":
version: 4.1.0
resolution: "http-cache-semantics@npm:4.1.0"
Expand Down Expand Up @@ -3022,6 +3110,13 @@ __metadata:
languageName: node
linkType: hard

"is-what@npm:^4.1.8":
version: 4.1.8
resolution: "is-what@npm:4.1.8"
checksum: b9bec3acff102d14ad467f4c74c9886af310fa160e07a63292c8c181e6768c7c4c1054644e13d67185b963644e4a513bce8c6b8ce3d3ca6f9488a69fccad5f97
languageName: node
linkType: hard

"isexe@npm:^2.0.0":
version: 2.0.0
resolution: "isexe@npm:2.0.0"
Expand Down Expand Up @@ -3175,6 +3270,8 @@ __metadata:
"@kubernetes/client-node": ^0.18.0
"@tailwindcss/forms": ^0.5.3
"@tanstack/react-query": ^4.22.0
"@tanstack/react-query-devtools": ^4.22.0
"@tanstack/react-router": beta
"@tauri-apps/api": ^1.2.0
"@tauri-apps/cli": ^1.2.2
"@trivago/prettier-plugin-sort-imports": ^4.0.0
Expand Down Expand Up @@ -4074,6 +4171,13 @@ __metadata:
languageName: node
linkType: hard

"regenerator-runtime@npm:^0.13.11":
version: 0.13.11
resolution: "regenerator-runtime@npm:0.13.11"
checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
languageName: node
linkType: hard

"regexp.prototype.flags@npm:^1.4.3":
version: 1.4.3
resolution: "regexp.prototype.flags@npm:1.4.3"
Expand All @@ -4092,6 +4196,13 @@ __metadata:
languageName: node
linkType: hard

"remove-accents@npm:0.4.2":
version: 0.4.2
resolution: "remove-accents@npm:0.4.2"
checksum: 84a6988555dea24115e2d1954db99509588d43fe55a1590f0b5894802776f7b488b3151c37ceb9e4f4b646f26b80b7325dcea2fae58bc3865df146e1fa606711
languageName: node
linkType: hard

"request@npm:^2.88.0":
version: 2.88.2
resolution: "request@npm:2.88.2"
Expand Down Expand Up @@ -4509,6 +4620,15 @@ __metadata:
languageName: node
linkType: hard

"superjson@npm:^1.10.0":
version: 1.12.1
resolution: "superjson@npm:1.12.1"
dependencies:
copy-anything: ^3.0.2
checksum: d69badde9892bd2acfb6a2c37f233b7018b64fe88357568a7ab480547d6755ac1ed33a8d438d7ca856178312f5367574de180774d558bc0b75d1439efdfc53ba
languageName: node
linkType: hard

"supports-color@npm:^5.3.0":
version: 5.5.0
resolution: "supports-color@npm:5.5.0"
Expand Down Expand Up @@ -4591,6 +4711,13 @@ __metadata:
languageName: node
linkType: hard

"tiny-invariant@npm:^1.3.1":
version: 1.3.1
resolution: "tiny-invariant@npm:1.3.1"
checksum: 872dbd1ff20a21303a2fd20ce3a15602cfa7fcf9b228bd694a52e2938224313b5385a1078cb667ed7375d1612194feaca81c4ecbe93121ca1baebe344de4f84c
languageName: node
linkType: hard

"tmp-promise@npm:^3.0.2":
version: 3.0.3
resolution: "tmp-promise@npm:3.0.3"
Expand Down