From a098bb72d4c0aabee8bdb8316f93ad6c409dd245 Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Tue, 24 Oct 2023 14:01:04 +0200
Subject: [PATCH 1/7] Experimenting with layout

---
 web/package-lock.json | 15 +++++++++
 web/package.json      |  1 +
 web/src/App.js        |  3 +-
 web/src/FluxState.js  |  2 +-
 web/src/Footer.js     | 73 +++++++++++++++++++++++++++++++++++++++++++
 web/src/index.css     |  4 +++
 6 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 web/src/Footer.js

diff --git a/web/package-lock.json b/web/package-lock.json
index 0bffa4c..9396d64 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "capacitor",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2159,6 +2160,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -19296,6 +19305,12 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.51.0.tgz",
       "integrity": "sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg=="
     },
+    "@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/web/package.json b/web/package.json
index e4f5b0d..fedce91 100644
--- a/web/package.json
+++ b/web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/web/src/App.js b/web/src/App.js
index c4a9003..1c81e3f 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -4,6 +4,7 @@ import CapacitorClient from "./client";
 import { createStore } from 'redux'
 import { rootReducer } from './redux';
 import FluxState from "./FluxState";
+import Footer from "./Footer";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -13,7 +14,6 @@ function App() {
   );
 
   const store = createStore(rootReducer);
-  // store.subscribe(() => console.log(store.getState()))
 
   return (
     <>
@@ -22,6 +22,7 @@ function App() {
     <div className="App">
       <FluxState store={store}/>
     </div>
+    <Footer />
     </>
   );
 }
diff --git a/web/src/FluxState.js b/web/src/FluxState.js
index 3fdb3a6..8178b92 100644
--- a/web/src/FluxState.js
+++ b/web/src/FluxState.js
@@ -11,7 +11,7 @@ function FluxState(props) {
 
   return (
     <div>
-      <h2 className='text-xl text-red-500'>GitRepositories</h2>
+      <h2 className='text-xl'>GitRepositories</h2>
       <table>
         <thead>
         <tr>
diff --git a/web/src/Footer.js b/web/src/Footer.js
new file mode 100644
index 0000000..2a30f3e
--- /dev/null
+++ b/web/src/Footer.js
@@ -0,0 +1,73 @@
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
+
+// https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
+
+const navigation = [
+  { name: 'Sources', href: '#', count: '5', current: true },
+  { name: 'Kustomizations', href: '#', count: 10, current: false },
+  { name: 'Runtime', href: '#', current: false },
+  { name: 'Logs', href: '#', current: false },
+]
+
+function Footer() {
+  return (
+    <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
+      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-zinc-900 text-gray-300 shadow-xl">
+        <div className="absolute top-0 right-0 p-4">
+          <button
+            onClick={() => console.log("close")}
+            type="button" className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+            <span className="sr-only">Close panel</span>
+            <ArrowUpRightIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+          <button
+            onClick={() => console.log("close")}
+            type="button" className="ml-2 rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+            <span className="sr-only">Close panel</span>
+            <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+        <div className='w-48 px-4 mt-4 border-r-2 border-red-600'>
+          <SideBar navigation={navigation} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+function SideBar(props) {
+  return (
+    <nav className="flex flex-1 flex-col" aria-label="Sidebar">
+      <ul role="list" className="-mx-2 space-y-1">
+        {props.navigation.map((item) => (
+          <li key={item.name}>
+            <a
+              href={item.href}
+              className={classNames(
+                item.current ? 'bg-gray-50 text-indigo-600' : 'text-gray-700 hover:text-indigo-600 hover:bg-gray-50',
+                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 font-semibold'
+              )}
+            >
+              {item.name}
+              {item.count ? (
+                <span
+                  className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200"
+                  aria-hidden="true"
+                >
+                  {item.count}
+                </span>
+              ) : null}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export default Footer;
diff --git a/web/src/index.css b/web/src/index.css
index b5c61c9..d39d474 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply bg-zinc-800 text-zinc-300
+}

From f93c5bfb2711d362a91d5a7134138b6d41c1bfe8 Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 08:34:11 +0100
Subject: [PATCH 2/7] Styling

---
 web/package-lock.json | 22 ++++++++---
 web/src/App.js        |  6 +--
 web/src/FluxState.js  | 92 ++++++++++++++++++++++++++++---------------
 web/src/Footer.js     | 36 +++++++++++------
 web/src/index.css     |  6 ++-
 5 files changed, 108 insertions(+), 54 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 9396d64..c676e21 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -22232,6 +22232,7 @@
       "integrity": "sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==",
       "dev": true,
       "requires": {
+        "cosmiconfig": "^7",
         "ts-node": "^10.7.0"
       }
     },
@@ -22319,7 +22320,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -23406,7 +23409,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -26702,7 +26707,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -27752,6 +27759,7 @@
         "css-has-pseudo": "^2.0.0",
         "css-prefers-color-scheme": "^5.0.0",
         "cssdb": "^5.0.0",
+        "postcss": "^8.3",
         "postcss-attribute-case-insensitive": "^5.0.0",
         "postcss-color-functional-notation": "^4.0.1",
         "postcss-color-hex-alpha": "^8.0.0",
@@ -30035,7 +30043,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -30115,7 +30125,9 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
diff --git a/web/src/App.js b/web/src/App.js
index 1c81e3f..4e73f51 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -3,7 +3,6 @@ import StreamingBackend from "./streamingBackend";
 import CapacitorClient from "./client";
 import { createStore } from 'redux'
 import { rootReducer } from './redux';
-import FluxState from "./FluxState";
 import Footer from "./Footer";
 
 function App() {
@@ -19,10 +18,7 @@ function App() {
     <>
     <APIBackend capacitorClient={capacitorClient} store={store}/>
     <StreamingBackend capacitorClient={capacitorClient} store={store}/>
-    <div className="App">
-      <FluxState store={store}/>
-    </div>
-    <Footer />
+    <Footer store={store} />
     </>
   );
 }
diff --git a/web/src/FluxState.js b/web/src/FluxState.js
index 8178b92..ebb8379 100644
--- a/web/src/FluxState.js
+++ b/web/src/FluxState.js
@@ -7,40 +7,9 @@ function FluxState(props) {
   const [fluxState, setFluxState] = useState(store.getState().fluxState);
   store.subscribe(() => setFluxState(store.getState().fluxState))
 
-  console.log(fluxState)
-
   return (
     <div>
-      <h2 className='text-xl'>GitRepositories</h2>
-      <table>
-        <thead>
-        <tr>
-          <th>NAMESPACE</th>
-          <th>NAME</th>
-          <th>URL</th>
-          <th>READY</th>
-          <th>STATUS</th>
-        </tr>
-        </thead>
-          <tbody>
-          {
-            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>
-              )
-            })
-          }
-        </tbody>
-      </table> 
+      <GitRepositories gitRepositories={fluxState.gitRepositories} />
       <h2>Kustomizations</h2>
       <table>
         <thead>
@@ -75,4 +44,63 @@ function FluxState(props) {
   )
 }
 
+export function GitRepositories(props){
+  const { gitRepositories } = props
+
+  return (
+    <div className="grid gap-y-4 grid-cols-1">
+      {
+        gitRepositories?.map(gitRepository => {
+          const message = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")].message');
+          const revision = gitRepository.status.artifact.revision
+          const hash = revision.slice(revision.indexOf(':') + 1);
+          const url = gitRepository.spec.url.slice(gitRepository.spec.url.indexOf('@') + 1)
+
+          return (
+            <div 
+              className="rounded border border-neutral-300 p-4 grid grid-cols-12 gap-x-2"
+              key={`${gitRepository.metadata.namespace}/${gitRepository.metadata.name}`}
+              >
+              <div className="col-span-2">
+                <span className="block font-medium text-black">
+                  {gitRepository.metadata.name}
+                </span>
+                <span className="block text-neutral-600">
+                  {gitRepository.metadata.namespace}
+                </span>
+              </div>
+              <div className="col-span-5">
+                <span className="block font-medium text-neutral-700"><Ready gitRepository={gitRepository}/></span>
+                <span className="block text-neutral-600 field">{message}</span>
+              </div>
+              <div className="col-span-5">
+                <span className="block field font-medium text-neutral-700">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" className="h4 w-4 inline fill-current"><path d="M320 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm156.8-48C462 361 397.4 416 320 416s-142-55-156.8-128H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H163.2C178 151 242.6 96 320 96s142 55 156.8 128H608c17.7 0 32 14.3 32 32s-14.3 32-32 32H476.8z"/></svg>
+                  <span className="pl-1"><a href={`https://${url}/commit/${hash}`} target="_blank" rel="noopener noreferrer">{hash.slice(0, 8)}</a></span>
+                </span>
+                <span className="block field text-neutral-600">{url}</span>
+              </div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+function Ready(props) {
+  const { gitRepository } = props
+  const readyConditions = jp.query(gitRepository.status, '$..conditions[?(@.type=="Ready")].status');
+  const ready = readyConditions.includes("True")
+
+  const label = ready ? "Ready" : "Not Ready"
+
+  return (
+    <span className="relative">
+      <span className="absolute -left-4 top-1 rounded-full h-3 w-3 bg-teal-400 inline-block"></span>
+      <span >{label}</span>
+    </span>
+  )
+}
+
 export default FluxState;
diff --git a/web/src/Footer.js b/web/src/Footer.js
index 2a30f3e..46db03c 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -1,5 +1,7 @@
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
+import React, { useState } from 'react';
+import { GitRepositories } from './FluxState';
 
 // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
 
@@ -10,26 +12,38 @@ const navigation = [
   { name: 'Logs', href: '#', current: false },
 ]
 
-function Footer() {
+function Footer(props) {
+  const { store } = props
+
+  const [fluxState, setFluxState] = useState(store.getState().fluxState);
+  store.subscribe(() => setFluxState(store.getState().fluxState))
+
   return (
     <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
-      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-zinc-900 text-gray-300 shadow-xl">
-        <div className="absolute top-0 right-0 p-4">
+      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-white border-t border-neutral-300 shadow-xl">
+        <div className="absolute top-0 right-0 px-2 pt-1">
           <button
             onClick={() => console.log("close")}
-            type="button" className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+            type="button" className="rounded-md bg-white hover:bg-neutral-200 text-neutral-400 p-1">
             <span className="sr-only">Close panel</span>
             <ArrowUpRightIcon className="h-5 w-5" aria-hidden="true" />
           </button>
           <button
             onClick={() => console.log("close")}
-            type="button" className="ml-2 rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+            type="button" className="ml-1 rounded-md bg-white hover:bg-neutral-200 text-neutral-400 p-1">
             <span className="sr-only">Close panel</span>
             <XMarkIcon className="h-5 w-5" aria-hidden="true" />
           </button>
         </div>
-        <div className='w-48 px-4 mt-4 border-r-2 border-red-600'>
-          <SideBar navigation={navigation} />
+        <div className="flex pt-10">
+          <div className='w-48 px-4 border-r border-neutral-300'>
+            <SideBar navigation={navigation} />
+          </div>
+          <div className="w-full px-4">
+            <div className="w-full max-w-6xl mx-auto">
+              <GitRepositories gitRepositories={fluxState.gitRepositories} />
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -43,20 +57,20 @@ function classNames(...classes) {
 function SideBar(props) {
   return (
     <nav className="flex flex-1 flex-col" aria-label="Sidebar">
-      <ul role="list" className="-mx-2 space-y-1">
+      <ul className="-mx-2 space-y-1">
         {props.navigation.map((item) => (
           <li key={item.name}>
             <a
               href={item.href}
               className={classNames(
-                item.current ? 'bg-gray-50 text-indigo-600' : 'text-gray-700 hover:text-indigo-600 hover:bg-gray-50',
-                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 font-semibold'
+                item.current ? 'bg-neutral-100 text-black' : 'text-neutral-700 hover:bg-neutral-100 hover:text-black',
+                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded'
               )}
             >
               {item.name}
               {item.count ? (
                 <span
-                  className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200"
+                  className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-neutral-700 ring-1 ring-inset ring-neutral-200"
                   aria-hidden="true"
                 >
                   {item.count}
diff --git a/web/src/index.css b/web/src/index.css
index d39d474..e6b1d63 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3,5 +3,9 @@
 @tailwind utilities;
 
 body {
-  @apply bg-zinc-800 text-zinc-300
+  @apply bg-neutral-50 text-neutral-800
 }
+
+.field {
+  @apply text-ellipsis overflow-hidden whitespace-nowrap
+}
\ No newline at end of file

From 0513f97dd471dbc71725e9bfb409fbbfd9cbfe45 Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 08:58:48 +0100
Subject: [PATCH 3/7] Scroll

---
 web/src/Footer.js | 10 ++++++----
 web/src/index.css |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/Footer.js b/web/src/Footer.js
index 46db03c..fbac484 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -20,7 +20,7 @@ function Footer(props) {
 
   return (
     <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
-      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-white border-t border-neutral-300 shadow-xl">
+      <div className="fixed inset-x-0 bottom-0 h-3/4 z-40 bg-white border-t border-neutral-300 shadow-xl">
         <div className="absolute top-0 right-0 px-2 pt-1">
           <button
             onClick={() => console.log("close")}
@@ -36,10 +36,12 @@ function Footer(props) {
           </button>
         </div>
         <div className="flex pt-10">
-          <div className='w-48 px-4 border-r border-neutral-300'>
-            <SideBar navigation={navigation} />
+          <div>
+            <div className="w-48 px-4 border-r border-neutral-300">
+              <SideBar navigation={navigation} />
+            </div>
           </div>
-          <div className="w-full px-4">
+          <div className="w-full px-4 h-[calc(60vh)] overflow-x-hidden overflow-y-scroll">
             <div className="w-full max-w-6xl mx-auto">
               <GitRepositories gitRepositories={fluxState.gitRepositories} />
             </div>
diff --git a/web/src/index.css b/web/src/index.css
index e6b1d63..1596eeb 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -8,4 +8,4 @@ body {
 
 .field {
   @apply text-ellipsis overflow-hidden whitespace-nowrap
-}
\ No newline at end of file
+}

From 525cc4f708c30cd2665a51a50a2ae538f83dff5e Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 09:01:22 +0100
Subject: [PATCH 4/7] Edits

---
 web/src/FluxState.js |  2 +-
 web/src/Footer.js    | 10 ++--------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/web/src/FluxState.js b/web/src/FluxState.js
index ebb8379..eb632e1 100644
--- a/web/src/FluxState.js
+++ b/web/src/FluxState.js
@@ -58,7 +58,7 @@ export function GitRepositories(props){
 
           return (
             <div 
-              className="rounded border border-neutral-300 p-4 grid grid-cols-12 gap-x-2"
+              className="rounded border border-neutral-300 p-4 grid grid-cols-12 gap-x-4"
               key={`${gitRepository.metadata.namespace}/${gitRepository.metadata.name}`}
               >
               <div className="col-span-2">
diff --git a/web/src/Footer.js b/web/src/Footer.js
index fbac484..62de636 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -21,13 +21,7 @@ function Footer(props) {
   return (
     <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
       <div className="fixed inset-x-0 bottom-0 h-3/4 z-40 bg-white border-t border-neutral-300 shadow-xl">
-        <div className="absolute top-0 right-0 px-2 pt-1">
-          <button
-            onClick={() => console.log("close")}
-            type="button" className="rounded-md bg-white hover:bg-neutral-200 text-neutral-400 p-1">
-            <span className="sr-only">Close panel</span>
-            <ArrowUpRightIcon className="h-5 w-5" aria-hidden="true" />
-          </button>
+        <div className="absolute top-0 right-0 px-4 py-2">
           <button
             onClick={() => console.log("close")}
             type="button" className="ml-1 rounded-md bg-white hover:bg-neutral-200 text-neutral-400 p-1">
@@ -59,7 +53,7 @@ function classNames(...classes) {
 function SideBar(props) {
   return (
     <nav className="flex flex-1 flex-col" aria-label="Sidebar">
-      <ul className="-mx-2 space-y-1">
+      <ul className="space-y-1">
         {props.navigation.map((item) => (
           <li key={item.name}>
             <a

From be616c3b49aa413b9e7b51e6e45b9e75de0cd26d Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 12:07:46 +0100
Subject: [PATCH 5/7] TODO: navigation handler

---
 web/src/Footer.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/Footer.js b/web/src/Footer.js
index 62de636..1fe2e94 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -1,13 +1,12 @@
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
 import React, { useState } from 'react';
 import { GitRepositories } from './FluxState';
 
 // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
 
-const navigation = [
-  { name: 'Sources', href: '#', count: '5', current: true },
+const navigationDefault = [
   { name: 'Kustomizations', href: '#', count: 10, current: false },
+  { name: 'Sources', href: '#', count: '5', current: true },
   { name: 'Runtime', href: '#', current: false },
   { name: 'Logs', href: '#', current: false },
 ]
@@ -15,9 +14,16 @@ const navigation = [
 function Footer(props) {
   const { store } = props
 
+  const [navigation, setNavigation] = useState(navigationDefault);
   const [fluxState, setFluxState] = useState(store.getState().fluxState);
   store.subscribe(() => setFluxState(store.getState().fluxState))
 
+  const navigate = (selected) => {
+    setNavigation(navigationDefault)
+    // TODO
+    // How to update array element: https://react.dev/learn/updating-arrays-in-state#replacing-items-in-an-array
+  }
+
   return (
     <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
       <div className="fixed inset-x-0 bottom-0 h-3/4 z-40 bg-white border-t border-neutral-300 shadow-xl">
@@ -32,7 +38,7 @@ function Footer(props) {
         <div className="flex pt-10">
           <div>
             <div className="w-48 px-4 border-r border-neutral-300">
-              <SideBar navigation={navigation} />
+              <SideBar navigation={navigation} navigate={navigate} />
             </div>
           </div>
           <div className="w-full px-4 h-[calc(60vh)] overflow-x-hidden overflow-y-scroll">
@@ -62,6 +68,7 @@ function SideBar(props) {
                 item.current ? 'bg-neutral-100 text-black' : 'text-neutral-700 hover:bg-neutral-100 hover:text-black',
                 'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded'
               )}
+              onClick={() => props.navigate(item.name)}
             >
               {item.name}
               {item.count ? (

From 15becf67fa9db9801c067b2f73d2b574277e4079 Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 14:18:56 +0100
Subject: [PATCH 6/7] Service render

---
 web/package-lock.json |  24 ++++++
 web/package.json      |   1 +
 web/src/App.js        |  33 ++++++++
 web/src/FluxState.js  |   2 +-
 web/src/Footer.js     |  36 ++++----
 web/src/Service.jsx   | 193 ++++++++++++++++++++++++++++++++++++++++++
 web/src/Timeline.jsx  | 118 ++++++++++++++++++++++++++
 7 files changed, 391 insertions(+), 16 deletions(-)
 create mode 100644 web/src/Service.jsx
 create mode 100644 web/src/Timeline.jsx

diff --git a/web/package-lock.json b/web/package-lock.json
index c676e21..dd8b796 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.5.1",
+        "date-fns": "^2.30.0",
         "jsonpath": "^1.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6524,6 +6525,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -22535,6 +22551,14 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/web/package.json b/web/package.json
index fedce91..9f74220 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
+    "date-fns": "^2.30.0",
     "jsonpath": "^1.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/web/src/App.js b/web/src/App.js
index 4e73f51..16d888f 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -4,6 +4,7 @@ import CapacitorClient from "./client";
 import { createStore } from 'redux'
 import { rootReducer } from './redux';
 import Footer from "./Footer";
+import Service from "./Service";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -18,6 +19,38 @@ function App() {
     <>
     <APIBackend capacitorClient={capacitorClient} store={store}/>
     <StreamingBackend capacitorClient={capacitorClient} store={store}/>
+    <div className="mt-16 max-w-6xl mx-auto grid grid-cols-1 gap-y-4">
+      <Service 
+        stack={{
+          deployment: {
+            pods: [
+              {name: "xxx", status: "Running"},
+              {name: "xxx", status: "Running"}
+            ]
+          },
+          service: {
+            name: "my-app",
+            namespace: "default"
+          }
+        }}
+        alerts={[]}
+      />
+      <Service 
+        stack={{
+          deployment: {
+            pods: [
+              {name: "xxx", status: "Running"},
+              {name: "xxx", status: "Running"}
+            ]
+          },
+          service: {
+            name: "your-app",
+            namespace: "default"
+          }
+        }}
+        alerts={[]}
+      />
+    </div>
     <Footer store={store} />
     </>
   );
diff --git a/web/src/FluxState.js b/web/src/FluxState.js
index eb632e1..8927e52 100644
--- a/web/src/FluxState.js
+++ b/web/src/FluxState.js
@@ -58,7 +58,7 @@ export function GitRepositories(props){
 
           return (
             <div 
-              className="rounded border border-neutral-300 p-4 grid grid-cols-12 gap-x-4"
+              className="rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow"
               key={`${gitRepository.metadata.namespace}/${gitRepository.metadata.name}`}
               >
               <div className="col-span-2">
diff --git a/web/src/Footer.js b/web/src/Footer.js
index 1fe2e94..56ba1ac 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -2,35 +2,41 @@ import { XMarkIcon } from '@heroicons/react/24/outline'
 import React, { useState } from 'react';
 import { GitRepositories } from './FluxState';
 
-// https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
-
-const navigationDefault = [
-  { name: 'Kustomizations', href: '#', count: 10, current: false },
-  { name: 'Sources', href: '#', count: '5', current: true },
-  { name: 'Runtime', href: '#', current: false },
-  { name: 'Logs', href: '#', current: false },
-]
-
 function Footer(props) {
   const { store } = props
 
-  const [navigation, setNavigation] = useState(navigationDefault);
+  const [expanded, setExpanded] = useState(true);
   const [fluxState, setFluxState] = useState(store.getState().fluxState);
   store.subscribe(() => setFluxState(store.getState().fluxState))
 
+  return expanded ? ExpandedFooter(fluxState) : null
+}
+
+function ExpandedFooter(fluxState) {
+
+  // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
+  const navigationDefault = [
+    { name: 'Kustomizations', href: '#', count: 10, current: false },
+    { name: 'Sources', href: '#', count: '5', current: true },
+    { name: 'Runtime', href: '#', current: false },
+    { name: 'Logs', href: '#', current: false },
+  ]
+  
+  const [navigation, setNavigation] = useState(navigationDefault);
+  
   const navigate = (selected) => {
     setNavigation(navigationDefault)
     // TODO
     // How to update array element: https://react.dev/learn/updating-arrays-in-state#replacing-items-in-an-array
   }
-
+  
   return (
     <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
-      <div className="fixed inset-x-0 bottom-0 h-3/4 z-40 bg-white border-t border-neutral-300 shadow-xl">
+      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-neutral-200 border-t border-neutral-300 shadow-xl">
         <div className="absolute top-0 right-0 px-4 py-2">
           <button
             onClick={() => console.log("close")}
-            type="button" className="ml-1 rounded-md bg-white hover:bg-neutral-200 text-neutral-400 p-1">
+            type="button" className="ml-1 rounded-md hover:bg-white hover:text-black text-neutral-700 p-1">
             <span className="sr-only">Close panel</span>
             <XMarkIcon className="h-5 w-5" aria-hidden="true" />
           </button>
@@ -65,8 +71,8 @@ function SideBar(props) {
             <a
               href={item.href}
               className={classNames(
-                item.current ? 'bg-neutral-100 text-black' : 'text-neutral-700 hover:bg-neutral-100 hover:text-black',
-                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded'
+                item.current ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
+                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md'
               )}
               onClick={() => props.navigate(item.name)}
             >
diff --git a/web/src/Service.jsx b/web/src/Service.jsx
new file mode 100644
index 0000000..834899c
--- /dev/null
+++ b/web/src/Service.jsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import Timeline from './Timeline';
+
+function Service(props) {
+  const { stack, alerts } = props;
+
+  const deployment = stack.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">{stack.service.name}</span>
+            <>
+            <div className="flex items-center ml-auto space-x-2">
+              { deployment &&
+              <>
+              <button
+                className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded"
+                >
+                Logs
+              </button>
+              <button
+                className="bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded">
+                Describe
+              </button>
+              </>
+              }
+            </div>
+            </>
+          </h3>
+          <div>
+            <div className="grid grid-cols-12 mt-4 px-4">
+              <div className="col-span-5 border-r space-y-4">
+                <div>
+                  <p className="text-base text-neutral-600">Pods</p>
+                  {
+                    deployment && deployment.pods && deployment.pods.map((pod) => (
+                      <Pod key={pod.name} pod={pod} />
+                    ))
+                  }
+                </div>
+                <div>
+                  <p className="text-base text-neutral-600">Links</p>
+                  <div className="text-neutral-700 text-sm mt-2">
+                  <a
+                    className="text-neutral-600 hover:text-black"
+                    href="">
+                    Docs
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                      className="inline fill-current h-4 w-4"
+                      viewBox="0 0 24 24">
+                      <path d="M0 0h24v24H0z" fill="none" />
+                      <path
+                        d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                    </svg>
+                  </a>
+                  <span className="px-2">|</span>
+                  <a
+                    className="text-neutral-600 hover:text-black" 
+                    href="">
+                    Logs
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                      className="inline fill-current h-4 w-4"
+                      viewBox="0 0 24 24">
+                      <path d="M0 0h24v24H0z" fill="none" />
+                      <path
+                        d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                    </svg>
+                  </a>
+                  <span className="px-2">|</span>
+                  <a
+                    className="text-neutral-600 hover:text-black"
+                    href="">
+                    Metrics
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                      className="inline fill-current h-4 w-4"
+                      viewBox="0 0 24 24">
+                      <path d="M0 0h24v24H0z" fill="none" />
+                      <path
+                        d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                    </svg>
+                  </a>
+                  <span className="px-2">|</span>
+                  <a
+                    className="text-neutral-600 hover:text-black"
+                    href="">
+                    Traces
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                      className="inline fill-current h-4 w-4"
+                      viewBox="0 0 24 24">
+                      <path d="M0 0h24v24H0z" fill="none" />
+                      <path
+                        d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                    </svg>
+                  </a>
+                  <span className="px-2">|</span>
+                  <a
+                    className="text-neutral-600 hover:text-black"
+                    href="">
+                    Issues
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                      className="inline fill-current h-4 w-4"
+                      viewBox="0 0 24 24">
+                      <path d="M0 0h24v24H0z" fill="none" />
+                      <path
+                        d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                    </svg>
+                  </a>
+                </div>
+                </div>
+              </div>
+              <div className="col-span-7 space-y-4 pl-2">
+                { deployment &&
+                <div>
+                  <p className="text-base text-neutral-600">Address</p>
+                  <div className="text-neutral-900 text-sm">
+                    <div className="relative">
+                    {stack.service.name}.{stack.service.namespace}.svc.cluster.local
+                    <button
+                      className="absolute right-0 bg-transparent hover:bg-neutral-100 font-medium text-sm text-neutral-700 py-1 px-4 border border-neutral-300 rounded">
+                      Port-forward command
+                    </button>
+                    </div>
+                    {stack.ingresses ? stack.ingresses.map((ingress) =>
+                      <p key={`${ingress.namespace}/${ingress.name}`}>
+                        <a href={'https://' + ingress.url} target="_blank" rel="noopener noreferrer">{ingress.url}
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                          className="inline fill-current ml-1 h-4 w-4"
+                          viewBox="0 0 24 24">
+                          <path d="M0 0h24v24H0z" fill="none" />
+                          <path
+                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+                        </svg>
+                        </a>
+                      </p>
+                      ) : null
+                    }
+                  </div>
+                </div>
+                }
+                { deployment &&
+                <div>
+                  <p className="text-base text-neutral-600">Health</p>
+                  <div className="text-neutral-900 text-sm">
+                    <Timeline alerts={alerts} />
+                  </div>
+                </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Service;
+
+function Pod(props) {
+  const {pod} = props;
+
+  let color;
+  let pulsar;
+  switch (pod.status) {
+    case 'Running':
+      color = 'bg-green-200';
+      pulsar = '';
+      break;
+    case 'PodInitializing':
+    case 'ContainerCreating':
+    case 'Pending':
+      color = 'bg-blue-300';
+      pulsar = 'animate-pulse';
+      break;
+    case 'Terminating':
+      color = 'bg-neutral-500';
+      pulsar = 'animate-pulse';
+      break;
+    default:
+      color = 'bg-red-600';
+      pulsar = '';
+      break;
+  }
+
+  return (
+    <span className={`inline-block mr-1 mt-2 shadow-lg ${color} ${pulsar} font-bold px-2 cursor-default`} title={`${pod.name} - ${pod.status}`}>
+      {pod.status}
+    </span>
+  );
+}
diff --git a/web/src/Timeline.jsx b/web/src/Timeline.jsx
new file mode 100644
index 0000000..3bca894
--- /dev/null
+++ b/web/src/Timeline.jsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { format } from "date-fns";
+
+const Timeline = ({ alerts }) => {
+  const [hours, setHours] = useState([
+    { hour: 24, current: false },
+    { hour: 6, current: false },
+    { hour: 1, current: true }
+  ]);
+  const selected = "font-medium"
+
+  if (!alerts) {
+    alerts=[];
+  }
+
+  const hourHandler = (input) => {
+    setHours(hours.map(hour => {
+      if (hour.hour === input) {
+        return { ...hour, current: true }
+      } else {
+        return { ...hour, current: false }
+      }
+    }))
+  }
+
+  const currentHour = hours.find(hour => hour.current)
+  const endDate = new Date();
+  const startDate = new Date();
+  startDate.setHours(endDate.getHours() - currentHour.hour);
+
+  return (
+    <div>
+      <div className="h-8">
+        <div className="flex justify-end divide-x space-x-1 divide-neutral-300 text-neutral-600 text-xs">
+          {hours.map(hour => {
+            return (
+              <button
+                  key={hour.hour}
+                  type="button"
+                  onClick={() => hourHandler(hour.hour)}
+                  className={(hour.current ? selected : "") + ' pl-1'}
+                >
+                  {hour.hour === 1 ? "Last hour" : ` Last ${hour.hour} hours`}
+                 
+                </button>
+            )
+          })}
+        </div>
+        <div className="relative flex bg-green-300 h-6">
+          {alerts.map((alert, index) => {
+            const pendingAt = new Date(alert.pendingAt * 1000);
+            const resolvedAt = new Date(alert.resolvedAt ? (alert.resolvedAt * 1000) : Date.now());
+            const startPosition = Math.max(0, (pendingAt - startDate) / (60 * 60 * 1000));
+            const endPosition = Math.min(currentHour.hour, (resolvedAt - startDate) / (60 * 60 * 1000));
+
+            const endDateUnix = (new Date(endDate).getTime() / 1000).toFixed(0)
+            const total = (alert.resolvedAt && alert.resolvedAt !== 0 ? alert.resolvedAt : endDateUnix) - alert.pendingAt
+            let pendingInterval = 0
+            let firingInterval = 0
+
+            if (alert.status === "Pending") {
+              pendingInterval = endDateUnix - alert.pendingAt
+            } else if (alert.status === "Firing") {
+              pendingInterval = alert.firedAt - alert.pendingAt
+              firingInterval = endDateUnix - alert.firedAt
+            } else if (alert.status === "Resolved") {
+              pendingInterval = (alert.firedAt !== 0 ? alert.firedAt : alert.resolvedAt) - alert.pendingAt
+              firingInterval = alert.firedAt !== 0 ? alert.resolvedAt - alert.firedAt : 0
+            }
+
+            const alertStyle = {
+              left: `${(startPosition / currentHour.hour) * 100}%`,
+              width: `${((endPosition - startPosition) / currentHour.hour) * 100}%`,
+            };
+
+            if (((endPosition - startPosition) / currentHour.hour) < 0) {
+              return null
+            }
+
+            const resolvedAtLabel = alert.resolvedAt !== 0 ? `Resolved at ${format(alert.resolvedAt * 1000, 'h:mm:ss a, MMMM do yyyy')}` : "";
+            const firedAtLabel = alert.firedAt !== 0 ? `Alert fired at ${format(alert.firedAt * 1000, 'h:mm:ss a, MMMM do yyyy')}` : "";
+
+            return (
+              <div
+                key={index}
+                className="absolute"
+                style={alertStyle}
+              >
+                <div
+                  className="flex h-6 bg-yellow-300">
+                  <div
+                    style={{ width: `${pendingInterval / total * 100}%` }}
+                    className="bg-yellow-300 transition-all duration-500 ease-out"
+                    title={`${alert.name} Alert Pending for pod ${alert.objectName}
+
+Since ${format(alert.pendingAt * 1000, 'h:mm:ss a, MMMM do yyyy')}
+`}
+                  ></div>
+                  <div
+                    style={{ width: `${firingInterval / total * 100}%` }}
+                    className="bg-red-300 transition-all duration-500 ease-out"
+                    title={`${alert.name} Alert Firing for pod ${alert.objectName}
+
+Problem first noticed at ${format(alert.pendingAt * 1000, 'h:mm:ss a, MMMM do yyyy')}
+${firedAtLabel}
+${resolvedAtLabel}`}
+                  ></div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;

From 1eebfd359cf79baefdf0a636910861380a5986ca Mon Sep 17 00:00:00 2001
From: Laszlo Fogas <laszlo@gimlet.io>
Date: Thu, 2 Nov 2023 14:38:53 +0100
Subject: [PATCH 7/7] Filter

---
 web/src/App.js        |  79 ++++++++++++++++-----------
 web/src/FilterBar.jsx | 122 ++++++++++++++++++++++++++++++++++++++++++
 web/src/Service.jsx   |   4 ++
 3 files changed, 174 insertions(+), 31 deletions(-)
 create mode 100644 web/src/FilterBar.jsx

diff --git a/web/src/App.js b/web/src/App.js
index 16d888f..52fbcb0 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -5,6 +5,7 @@ import { createStore } from 'redux'
 import { rootReducer } from './redux';
 import Footer from "./Footer";
 import Service from "./Service";
+import FilterBar from "./FilterBar";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -19,37 +20,53 @@ function App() {
     <>
     <APIBackend capacitorClient={capacitorClient} store={store}/>
     <StreamingBackend capacitorClient={capacitorClient} store={store}/>
-    <div className="mt-16 max-w-6xl mx-auto grid grid-cols-1 gap-y-4">
-      <Service 
-        stack={{
-          deployment: {
-            pods: [
-              {name: "xxx", status: "Running"},
-              {name: "xxx", status: "Running"}
-            ]
-          },
-          service: {
-            name: "my-app",
-            namespace: "default"
-          }
-        }}
-        alerts={[]}
-      />
-      <Service 
-        stack={{
-          deployment: {
-            pods: [
-              {name: "xxx", status: "Running"},
-              {name: "xxx", status: "Running"}
-            ]
-          },
-          service: {
-            name: "your-app",
-            namespace: "default"
-          }
-        }}
-        alerts={[]}
-      />
+    <div className="max-w-6xl mx-auto">
+      <div className="my-16">
+        <FilterBar 
+          filters={[
+            {
+              property: "Owner",
+              value: "backend-team"
+            },
+            {
+              property: "App",
+              value: "*app*"
+            },
+          ]}
+        />
+      </div>
+      <div className="grid grid-cols-1 gap-y-4">
+        <Service 
+          stack={{
+            deployment: {
+              pods: [
+                {name: "xxx", status: "Running"},
+                {name: "xxx", status: "Running"}
+              ]
+            },
+            service: {
+              name: "my-app",
+              namespace: "default"
+            }
+          }}
+          alerts={[]}
+        />
+        <Service 
+          stack={{
+            deployment: {
+              pods: [
+                {name: "xxx", status: "Running"},
+                {name: "xxx", status: "Running"}
+              ]
+            },
+            service: {
+              name: "your-app",
+              namespace: "default"
+            }
+          }}
+          alerts={[]}
+        />
+      </div>
     </div>
     <Footer store={store} />
     </>
diff --git a/web/src/FilterBar.jsx b/web/src/FilterBar.jsx
new file mode 100644
index 0000000..8f5e8b7
--- /dev/null
+++ b/web/src/FilterBar.jsx
@@ -0,0 +1,122 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline'
+
+function FilterBar(props) {
+  return (
+    <div className="w-full">
+      <div className="relative">
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+          <FunnelIcon className="h-5 w-5 text-neutral-400" aria-hidden="true" />
+          {props.filters.map(filter => (
+            <Filter key={filter.property + filter.value} filter={filter} deleteFilter={props.deleteFilter} />
+          ))}
+          <FilterInput addFilter={props.addFilter} />
+        </div>
+        <div className="block w-full rounded-lg border-0 bg-white py-1.5 pl-10 pr-3 text-neutral-900 ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+          &nbsp;
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FilterBar;
+
+function Filter(props) {
+  const { filter } = props;
+  return (
+    <span className="ml-1 text-blue-50 bg-blue-600 rounded-full pl-3 pr-1" aria-hidden="true">
+      <span>{filter.property}</span>: <span>{filter.value}</span>
+      <span className="ml-1 px-1 bg-blue-400 rounded-full ">
+        <XMarkIcon className="cursor-pointer text-white inline h-3 w-3" aria-hidden="true" onClick={() => props.deleteFilter(filter)}/>
+      </span>
+    </span>
+  )
+}
+
+function FilterInput(props) {
+  const [active, setActive] = useState(false)
+  const [property, setProperty] = useState("")
+  const [value, setValue] = useState("")
+  const properties=["Repository", "Service", "Namespace", "Owner", "Starred", "Domain"]
+  const { addFilter } = props;
+	const inputRef = useRef(null);
+
+  const reset = () => {
+    setActive(false)
+    setProperty("")
+    setValue("")
+  }
+
+  useEffect(() => {
+    if (property !== "") {
+      inputRef.current.focus();
+    }  
+  });
+
+  return (
+    <span className="relative w-48 ml-2">
+      <span className="items-center flex">
+        {property !== "" &&
+          <span>{property}: </span>
+        }
+        <input
+          ref={inputRef}
+          key={property}
+          className={`${property ? "ml-10" : "" }block border-0 border-t border-b border-neutral-300 pt-1.5 pb-1 px-1 text-neutral-900 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6`}
+          placeholder='Enter Filter'
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onFocus={() => {setActive(true)}}
+          onBlur={() => {
+            setTimeout(() => {
+              setActive(false);
+              if (value !== "") {
+                if (property === "") {
+                  addFilter({property: "Repository", value: value})
+                } else {
+                  addFilter({property, value})
+                }
+                reset()
+              } else {
+                if (property !== "") {
+                  reset()
+                }
+              }
+            }, 200);}
+          }
+          onKeyUp={(e) => {
+            if (e.keyCode === 13){
+              setActive(false)
+              if (property === "") {
+                addFilter({property: "Repository", value: value})
+              } else {
+                addFilter({property, value})
+              }
+              reset()
+            }
+            if (e.keyCode === 27){
+              reset()
+              // inputRef.current.blur();
+            }
+          }}
+          type="search"
+        />
+      </span>
+      {active && property === "" &&
+      <div className="z-10 absolute bg-blue-100 w-48 p-2 text-blue-800">
+        <ul className="">
+          {properties.map(p => (
+            <li
+              key={p}
+              className="cursor-pointer hover:bg-blue-200"
+              onClick={() => {setProperty(p); setActive(false); }}>
+              {p}
+            </li>
+          ))}
+        </ul>
+      </div>
+      }
+    </span>
+  )
+}
diff --git a/web/src/Service.jsx b/web/src/Service.jsx
index 834899c..ee21bc1 100644
--- a/web/src/Service.jsx
+++ b/web/src/Service.jsx
@@ -41,6 +41,10 @@ function Service(props) {
                     ))
                   }
                 </div>
+                <div>
+                  <p className="text-base text-neutral-600">Dependencies</p>
+                  configmaps.. secrets.. (with view action)
+                </div>
                 <div>
                   <p className="text-base text-neutral-600">Links</p>
                   <div className="text-neutral-700 text-sm mt-2">