From 011f865ae2687e7c12a26ecb26dd43a708157371 Mon Sep 17 00:00:00 2001 From: David Hu Date: Fri, 20 Jan 2023 21:02:07 -0800 Subject: [PATCH] chore: create useInvoke hook to reduce repetition (#45) --- src/queries/invoke.ts | 26 ++++++++++++++++++++++++++ src/workloads/cron-jobs.tsx | 33 +++++++-------------------------- src/workloads/deployments.tsx | 21 ++++++--------------- src/workloads/jobs.tsx | 16 +++++----------- src/workloads/pods.tsx | 17 +++++------------ src/workloads/replica-sets.tsx | 16 +++++----------- src/workloads/stateful-sets.tsx | 7 +++++-- 7 files changed, 59 insertions(+), 77 deletions(-) create mode 100644 src/queries/invoke.ts diff --git a/src/queries/invoke.ts b/src/queries/invoke.ts new file mode 100644 index 0000000..d2d18e4 --- /dev/null +++ b/src/queries/invoke.ts @@ -0,0 +1,26 @@ +import { useQuery } from "@tanstack/react-query"; +import { invoke } from "@tauri-apps/api"; + +import { useCurrentNamespace } from "../namespaces/namespaces"; + +type Commands = + | "get_cron_jobs" + | "get_deployments" + | "get_jobs" + | "get_pods" + | "get_replica_sets" + | "get_stateful_sets"; + +export function useGetResourceList(command: Commands) { + const { namespace } = useCurrentNamespace(); + const result = useQuery( + [command, namespace], + () => { + return invoke<{ items: T[] }>(command, { namespace }); + }, + // TODO: maybe make this configurable? + { refetchInterval: 2000 } + ); + + return { ...result, data: result.data ?? { items: [] } }; +} diff --git a/src/workloads/cron-jobs.tsx b/src/workloads/cron-jobs.tsx index 9b11bed..aa8cec5 100644 --- a/src/workloads/cron-jobs.tsx +++ b/src/workloads/cron-jobs.tsx @@ -1,39 +1,20 @@ -import type { V1CronJob } from "@kubernetes/client-node"; -import { useQuery } from "@tanstack/react-query"; -import { invoke } from "@tauri-apps/api"; -import { format, formatDistance, formatRelative, subDays } from "date-fns"; +import { V1CronJob } from "@kubernetes/client-node"; +import { formatDistance } from "date-fns"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; -import { useCurrentNamespace } from "../namespaces/namespaces"; - -const noData = { - metadata: { - uid: "no-cron-jobs-found", - name: "No CronJobs found", - }, - spec: { - schedule: "---", - }, - status: { - lastScheduleTime: null, - }, -}; +import { useGetResourceList } from "../queries/invoke"; export function CronJobs() { - const { namespace } = useCurrentNamespace(); - - const result = useQuery(["cron-jobs", namespace], () => { - return invoke<{ items: V1CronJob[] }>(`get_cron_jobs`, { namespace }); - }); - - const data = result.data?.items?.length ? result.data?.items : [noData]; + const { + data: { items }, + } = useGetResourceList("get_cron_jobs"); return (
- {data.map((item) => ( + {items.map((item) => ( {item.metadata?.name}{item.spec?.schedule} diff --git a/src/workloads/deployments.tsx b/src/workloads/deployments.tsx index b356a8a..f1e8ead 100644 --- a/src/workloads/deployments.tsx +++ b/src/workloads/deployments.tsx @@ -1,13 +1,12 @@ -import { ArrowPathIcon, PencilIcon, ArrowsUpDownIcon } from "@heroicons/react/20/solid"; import type { V1Deployment } from "@kubernetes/client-node"; -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation } from "@tanstack/react-query"; import { invoke } from "@tauri-apps/api"; import { lazy, Suspense, useState } from "react"; import { ActionButton, ActionGroup } from "../components/action-group"; import { ScaleModal } from "../components/scale-modal"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; -import { useCurrentNamespace } from "../namespaces/namespaces"; +import { useGetResourceList } from "../queries/invoke"; const ResourceEditDrawer = lazy(() => import("../components/resource-edit-drawer").then((module) => ({ @@ -16,17 +15,9 @@ const ResourceEditDrawer = lazy(() => ); export function Deployments() { - const { namespace } = useCurrentNamespace(); - - const result = useQuery( - ["deployments", namespace], - () => { - return invoke<{ items: V1Deployment[] }>(`get_deployments`, { namespace }); - }, - { refetchInterval: 1000 } - ); - - const data = result.data?.items ?? []; + const { + data: { items }, + } = useGetResourceList("get_deployments"); const restartMutation = useMutation({ mutationFn: (deployment: V1Deployment) => { @@ -58,7 +49,7 @@ export function Deployments() {
- {data.map((item) => ( + {items.map((item) => ( {item.metadata?.name}{item.spec?.template.spec?.containers[0].image} diff --git a/src/workloads/jobs.tsx b/src/workloads/jobs.tsx index 505dcc4..d5a5db8 100644 --- a/src/workloads/jobs.tsx +++ b/src/workloads/jobs.tsx @@ -1,26 +1,20 @@ import type { V1Job } from "@kubernetes/client-node"; -import { useQuery } from "@tanstack/react-query"; -import { invoke } from "@tauri-apps/api"; import { formatDistance } from "date-fns"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; -import { useCurrentNamespace } from "../namespaces/namespaces"; +import { useGetResourceList } from "../queries/invoke"; export function Jobs() { - const { namespace } = useCurrentNamespace(); - - const result = useQuery(["jobs", namespace], () => { - return invoke<{ items: V1Job[] }>(`get_jobs`, { namespace }); - }); - - const data = result.data?.items ?? []; + const { + data: { items }, + } = useGetResourceList("get_jobs"); return (
- {data.map((item) => ( + {items.map((item) => ( {item.metadata?.name}{item.spec?.template.spec?.containers[0].image} diff --git a/src/workloads/pods.tsx b/src/workloads/pods.tsx index b6481ed..f26a27f 100644 --- a/src/workloads/pods.tsx +++ b/src/workloads/pods.tsx @@ -1,12 +1,9 @@ -import { BarsArrowDownIcon, PencilIcon } from "@heroicons/react/20/solid"; import type { V1Pod } from "@kubernetes/client-node"; -import { useQuery } from "@tanstack/react-query"; -import { invoke } from "@tauri-apps/api"; import { useState, lazy, Suspense } from "react"; import { ActionButton, ActionGroup } from "../components/action-group"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; -import { useCurrentNamespace } from "../namespaces/namespaces"; +import { useGetResourceList } from "../queries/invoke"; const PodLogs = lazy(() => import("./pod-logs").then((module) => ({ default: module.PodLogs }))); @@ -16,13 +13,9 @@ const ResourceEditDrawer = lazy(() => })) ); export function Pods() { - const { namespace } = useCurrentNamespace(); - - const result = useQuery(["pods", namespace], () => { - return invoke<{ items: V1Pod[] }>("get_pods", { namespace }); - }); - - const pods = result.data?.items ?? []; + const { + data: { items }, + } = useGetResourceList("get_pods"); const [podAction, setPodAction] = useState<"logs" | "edit" | null>(null); const [selectedPod, setSelectedPod] = useState(null); @@ -41,7 +34,7 @@ export function Pods() {
- {pods.map((pod) => ( + {items.map((pod) => ( {pod.metadata?.name}{pod.status?.phase} diff --git a/src/workloads/replica-sets.tsx b/src/workloads/replica-sets.tsx index 5c4793e..003b542 100644 --- a/src/workloads/replica-sets.tsx +++ b/src/workloads/replica-sets.tsx @@ -1,25 +1,19 @@ import type { V1ReplicaSet } from "@kubernetes/client-node"; -import { useQuery } from "@tanstack/react-query"; -import { invoke } from "@tauri-apps/api"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; -import { useCurrentNamespace } from "../namespaces/namespaces"; +import { useGetResourceList } from "../queries/invoke"; export function ReplicaSets() { - const { namespace } = useCurrentNamespace(); - - const result = useQuery(["replica-sets", namespace], () => { - return invoke<{ items: V1ReplicaSet[] }>(`get_replica_sets`, { namespace }); - }); - - const data = result.data?.items ?? []; + const { + data: { items }, + } = useGetResourceList("get_replica_sets"); return (
- {data.map((item) => ( + {items.map((item) => ( {item.metadata?.name}{item.spec?.template?.spec?.containers[0].image} diff --git a/src/workloads/stateful-sets.tsx b/src/workloads/stateful-sets.tsx index a1cb0ce..639ee2e 100644 --- a/src/workloads/stateful-sets.tsx +++ b/src/workloads/stateful-sets.tsx @@ -7,6 +7,7 @@ import { ActionButton, ActionGroup } from "../components/action-group"; import { ScaleModal } from "../components/scale-modal"; import { Table, TableHeader, TableBody, TableCell } from "../components/table"; import { useCurrentNamespace } from "../namespaces/namespaces"; +import { useGetResourceList } from "../queries/invoke"; const ResourceEditDrawer = lazy(() => import("../components/resource-edit-drawer").then((module) => ({ @@ -27,7 +28,9 @@ export function StatefulSets() { { refetchInterval: 1000 } ); - const data = result.data?.items ?? []; + const { + data: { items }, + } = useGetResourceList("get_stateful_sets"); const [action, setAction] = useState(null); const [selected, setSelected] = useState(null); @@ -47,7 +50,7 @@ export function StatefulSets() {
- {data.map((item) => ( + {items.map((item) => ( {item.metadata?.name}{item.spec?.template.spec?.containers[0].image}