Tabular rendering of Flux state 🤦

gimlet-io · Oct 23, 2023 · d4a3c3d · d4a3c3d
1 parent 19b9754
commit d4a3c3d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
+    "jsonpath": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/web/src/App.js b/web/src/App.js
@@ -3,6 +3,7 @@ import StreamingBackend from "./streamingBackend";
 import CapacitorClient from "./client";
 import { createStore } from 'redux'
 import { rootReducer } from './redux';
+import FluxState from "./FluxState";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -12,14 +13,14 @@ function App() {
   );
 
   const store = createStore(rootReducer);
-  store.subscribe(() => console.log(store.getState()))
+  // store.subscribe(() => console.log(store.getState()))
 
   return (
     <>
     <APIBackend capacitorClient={capacitorClient} store={store}/>
     <StreamingBackend capacitorClient={capacitorClient} store={store}/>
     <div className="App">
-      <div>hello</div>
+      <FluxState store={store}/>
     </div>
     </>
   );

diff --git a/web/src/FluxState.js b/web/src/FluxState.js
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import jp from 'jsonpath'
+
+function FluxState(props) {
+  const { store } = props
+
+  const [fluxState, setFluxState] = useState(store.getState().fluxState);
+  store.subscribe(() => setFluxState(store.getState().fluxState))
+
+  console.log(fluxState)
+
+  return (
+    <div>
+      <h2>GitRepositories</h2>
+      <table>
+        <tr>
+          <th>NAMESPACE</th>
+          <th>NAME</th>
+          <th>URL</th>
+          <th>READY</th>
+          <th>STATUS</th>
+        </tr>
+      {
+        fluxState.gitRepositories?.map(gitRepository => {
+          const ready = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")].status');
+          const message = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")].message');
+
+          return (
+            <tr key={gitRepository.metadata.namespace/gitRepository.metadata.name}>
+              <td>{gitRepository.metadata.namespace}</td>
+              <td>{gitRepository.metadata.name}</td>
+              <td>{gitRepository.spec.url}</td>
+              <td>{ready}</td>
+              <td>{message}</td>
+            </tr>
+          )
+        })
+      }
+      </table> 
+      <h2>Kustomizations</h2>
+      <table>
+        <tr>
+          <th>NAMESPACE</th>
+          <th>NAME</th>
+          <th>URL</th>
+          <th>READY</th>
+          <th>STATUS</th>
+        </tr>
+        {
+        fluxState.kustomizations?.map(kustomization => {
+          const ready = jp.query(kustomization.status, '$..conditions[?(@.type=="Ready")].status');
+          const message = jp.query(kustomization.status, '$..conditions[?(@.type=="Ready")].message');
+
+          return (
+            <tr key={kustomization.metadata.namespace/kustomization.metadata.name}>
+              <td>{kustomization.metadata.namespace}</td>
+              <td>{kustomization.metadata.name}</td>
+              <td>{kustomization.status.lastAppliedRevision}</td>
+              <td>{ready}</td>
+              <td>{message}</td>
+            </tr>
+          )
+        })
+      }
+      </table>
+    </div>
+  )
+}
+
+export default FluxState;