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] 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">