Skip to content

Commit

Permalink
feat: configure router to go between pods and cronjobs page (#15)
Browse files Browse the repository at this point in the history
  • Loading branch information
davidhu2000 authored Jan 15, 2023
1 parent 3ea390e commit 592a430
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 34 deletions.
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;

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

0 comments on commit 592a430

Please sign in to comment.