Typescript conversion

web/package.json

@@ -5,12 +5,15 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.0.18",
+    "@kubernetes-models/flux-cd": "^2.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
+    "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
     "jsonpath": "^1.1.1",
+    "kubernetes-types": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

web/src/App.tsx

@@ -0,0 +1,78 @@
+import APIBackend from "./apiBackend.ts";
+import StreamingBackend from "./streamingBackend.ts";
+import CapacitorClient from "./client.ts";
+import { createStore } from 'redux'
+import { rootReducer } from './redux.ts';
+import Footer from "./Footer.tsx";
+import FilterBar from "./FilterBar.tsx";
+import Services from "./Services.tsx";
+import ToastNotifications from "./ToastNotifications.tsx";
+import React, { useState, useEffect, useCallback } from "react";
+import { TargetReference } from "./types/targetReference.ts";
+import { FilterType } from "./types/filterType.ts";
+import { ContextProvider } from "./context.tsx";
+
+function App() {
+  const capacitorClient = new CapacitorClient(
+    (response) => {
+      console.log(`${response.status}: ${response.statusText} on ${response.path}`);
+    }
+  );
+
+  const store = createStore(rootReducer);
+
+  const [filters, setFilters] = useState<FilterType[]>(JSON.parse(localStorage.getItem("filters")?? '[]') )
+  const [expanded, setExpanded] = useState(false);
+  const [selected, setSelected] = useState('Kustomizations');
+  const [targetReference, setTargetReference] = useState<TargetReference | null>(null)
+
+  const handleNavigationSelect = useCallback((selectedNav, objectNs, objectName, objectKind) => {
+    setExpanded(true)
+    setSelected(selectedNav);
+    setTargetReference({ objectNs, objectName, objectKind })
+  },
+    [setSelected, setTargetReference]
+  )
+
+  const handleToggle = () => {
+    setExpanded(!expanded)
+  }
+
+  useEffect(() => {
+    localStorage.setItem("filters", JSON.stringify(filters));
+  }, [filters]);
+
+  return (
+    <ContextProvider client={capacitorClient}>
+      <APIBackend capacitorClient={capacitorClient} store={store} />
+      <StreamingBackend store={store} />
+      <ToastNotifications store={store} handleNavigationSelect={handleNavigationSelect} />
+      <div className="max-w-6xl mx-auto">
+        <div className="my-16">
+          <FilterBar
+            properties={["Service", "Namespace", "Domain"]}
+            filters={filters}
+            change={setFilters}
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-y-4 pb-32">
+          <Services
+            store={store}
+            filters={filters}
+            handleNavigationSelect={handleNavigationSelect}
+          />
+        </div>
+      </div>
+      <Footer
+        store={store}
+        expanded={expanded}
+        selected={selected}
+        targetReference={targetReference}
+        handleToggle={handleToggle}
+        handleNavigationSelect={handleNavigationSelect}
+      />
+    </ContextProvider>
+  );
+}
+
+export default App;

web/src/CompactService.jsx → web/src/CompactService.tsx

@@ -1,28 +1,35 @@
 import React from 'react';
-import { Logs } from './Logs'
-import { Describe } from './Describe'
-import { Pod, podContainers } from './Service'
+import { Logs } from './Logs.tsx'
+import { Describe } from './Describe.tsx'
+import { Pod, podContainers } from './Service.tsx'
+import type { Deployment } from 'kubernetes-types/apps/v1';
+import { Store } from 'redux';
+import { FluxService } from './types/service.ts';
 
-export function CompactService(props) {
-  const { service, capacitorClient, store } = props;
-  const deployment = service.deployment;
+export type CompactServiceProps = {
+  service: FluxService
+  store: Store
+}
+
+export function CompactService(props: CompactServiceProps) {
+  const { service,  store } = props;
+
+  const deployment = service.deployment as Deployment;
 
   return (
     <div className="w-full flex items-center justify-between space-x-6 bg-white pb-6 rounded-lg border border-neutral-300 shadow-lg">
       <div className="flex-1">
         <h3 className="flex text-lg font-bold rounded p-4">
-          <span className="cursor-pointer">{deployment.metadata.name}</span>
+          <span className="cursor-pointer">{deployment.metadata?.name}</span>
           <div className="flex items-center ml-auto space-x-2">
             {deployment &&
               <>
                 <Logs
-                  capacitorClient={capacitorClient}
                   store={store}
                   deployment={deployment}
                   containers={podContainers(service.pods)}
                 />
                 <Describe
-                  capacitorClient={capacitorClient}
                   deployment={deployment}
                   pods={service.pods}
                 />
@@ -37,7 +44,7 @@ export function CompactService(props) {
                 <p className="text-base text-neutral-600">Pods</p>
                 {
                   service.pods.map((pod) => (
-                    <Pod key={pod.metadata.name} pod={pod} />
+                    <Pod key={pod.metadata?.name} pod={pod} />
                   ))
                 }
               </div>

web/src/CompactServices.tsx

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import { CompactService } from "./CompactService.tsx"
+import { FluxService } from './types/service.ts';
+import { Store } from 'redux';
+
+export type CompactServicesProps = {
+  store: Store;
+  services: FluxService[];
+}
+
+export const CompactServices = memo(function CompactServices(props: CompactServicesProps) {
+  const {  store, services } = props
+
+  return (
+    <div className="space-y-4">
+      {
+        services?.map((service) => {
+          return (
+            <CompactService
+              key={`${service.deployment.metadata?.namespace}/${service.deployment.metadata?.name}`}
+              service={service}
+              store={store}
+            />
+          )
+        })
+      }
+    </div>
+  )
+})

web/src/Describe.jsx → web/src/Describe.tsx

@@ -1,14 +1,23 @@
 import React, { useState } from 'react';
-import { SkeletonLoader } from './SkeletonLoader'
-import { Modal } from './Modal'
+import { SkeletonLoader } from './SkeletonLoader.tsx'
+import { Modal } from './Modal.tsx'
+import { Deployment } from 'kubernetes-types/apps/v1';
+import { Pod } from 'kubernetes-types/core/v1';
+import { useClient } from './context.tsx';
 
-export function Describe(props) {
-  const { capacitorClient, deployment, pods } = props;
-  const [details, setDetails] = useState(null)
+export type DescribeProps = {
+  deployment: Deployment;
+  pods: Pod[];
+}
+
+export function Describe(props: DescribeProps) {
+  const { deployment, pods } = props;
+  const capacitorClient = useClient();
+  const [details, setDetails] = useState<string | null>(null)
   const [showModal, setShowModal] = useState(false)
 
   const describeDeployment = () => {
-    capacitorClient.describeDeployment(deployment.metadata.namespace, deployment.metadata.name)
+    capacitorClient.describeDeployment(deployment.metadata?.namespace, deployment.metadata?.name)
       .then(data => setDetails(data))
   }
 

web/src/ExpandedFooter.jsx → web/src/ExpandedFooter.tsx

@@ -1,12 +1,26 @@
 import React, { useState } from 'react';
-import { Kustomizations } from './Kustomizations';
-import { HelmReleases } from './HelmReleases';
-import FluxEvents from './FluxEvents';
-import { Sources } from './Sources';
-import { CompactServices } from './CompactServices';
+import { Kustomizations } from './Kustomizations.tsx';
+import { HelmReleases } from './HelmReleases.tsx';
+import FluxEvents from './FluxEvents.tsx';
+import { Sources } from './Sources.tsx';
+import { CompactServices } from './CompactServices.tsx';
+import classNames from 'classnames';
+import { Store } from 'redux';
+
+
+export type ExpandedFooterProps = {
+  fluxState: any;
+  sources: any;
+  handleNavigationSelect: any;
+  targetReference: any;
+  selected: any;
+  store: Store;
+}
+
+export function ExpandedFooter(props: ExpandedFooterProps) {
+  const {  fluxState, sources, handleNavigationSelect, targetReference, selected, store } = props;
+
 
-export function ExpandedFooter(props) {
-  const { client, fluxState, sources, handleNavigationSelect, targetReference, selected, store } = props;
 
   const [fluxEvents, setFluxEvents] = useState(store.getState().fluxEvents);
   store.subscribe(() => setFluxEvents(store.getState().fluxEvents))
@@ -33,16 +47,16 @@ export function ExpandedFooter(props) {
         <div className="w-full max-w-7xl mx-auto flex-col h-full">
           <div className="pb-24 pt-2">
             {selected === "Kustomizations" &&
-              <Kustomizations capacitorClient={client} fluxState={fluxState} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
+              <Kustomizations fluxState={fluxState} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
             }
             {selected === "Helm Releases" &&
-              <HelmReleases capacitorClient={client} helmReleases={fluxState.helmReleases} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
+              <HelmReleases  helmReleases={fluxState.helmReleases} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
             }
             {selected === "Sources" &&
-              <Sources capacitorClient={client} fluxState={fluxState} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
+              <Sources fluxState={fluxState} targetReference={targetReference} handleNavigationSelect={handleNavigationSelect} />
             }
             {selected === "Flux Runtime" &&
-              <CompactServices capacitorClient={client} store={store} services={fluxState.fluxServices} />
+              <CompactServices  store={store} services={fluxState.fluxServices} />
             }
             {selected === "Flux Events" &&
               <FluxEvents events={fluxEvents} handleNavigationSelect={handleNavigationSelect} />
@@ -84,7 +98,3 @@ function SideBar(props) {
     </nav>
   );
 };
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}