Log filter cleanup (#3569)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air-2.local>

dashboard/src/assets/filter.svg

@@ -1,6 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.4" d="M10.0833 15.958H3.50777C2.67555 15.958 2 16.6217 2 17.4393C2 18.2558 2.67555 18.9206 3.50777 18.9206H10.0833C10.9155 18.9206 11.5911 18.2558 11.5911 17.4393C11.5911 16.6217 10.9155 15.958 10.0833 15.958Z" fill="white"/>
-<path opacity="0.4" d="M22 6.37856C22 5.56203 21.3244 4.89832 20.4933 4.89832H13.9178C13.0856 4.89832 12.4101 5.56203 12.4101 6.37856C12.4101 7.19618 13.0856 7.85989 13.9178 7.85989H20.4933C21.3244 7.85989 22 7.19618 22 6.37856Z" fill="white"/>
-<path d="M8.87774 6.37856C8.87774 8.24523 7.33886 9.75821 5.43887 9.75821C3.53999 9.75821 2 8.24523 2 6.37856C2 4.51298 3.53999 3 5.43887 3C7.33886 3 8.87774 4.51298 8.87774 6.37856Z" fill="white"/>
-<path d="M22 17.3992C22 19.2648 20.4611 20.7778 18.5611 20.7778C16.6623 20.7778 15.1223 19.2648 15.1223 17.3992C15.1223 15.5325 16.6623 14.0196 18.5611 14.0196C20.4611 14.0196 22 15.5325 22 17.3992Z" fill="white"/>
-</svg>
+<svg className="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
+  <path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" d="m2.133 2.6 5.856 6.9L8 14l4 3 .011-7.5 5.856-6.9a1 1 0 0 0-.804-1.6H2.937a1 1 0 0 0-.804 1.6Z"/>
+</svg>

dashboard/src/components/LogQueryModeSelectionToggle.tsx

@@ -69,7 +69,7 @@ const ToggleOption = styled.div<{ selected: boolean; nudgeLeft?: boolean }>`
 `;
 
 const ToggleButton = styled.div`
-  background: #26292e;
+  background: #181B20;
   border-radius: 5px;
   font-size: 13px;
   height: 30px;

dashboard/src/components/LogSearchBar.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import Button from "./Button";
 import styled from "styled-components";
 import dayjs from "dayjs";
+import SearchBar from "./porter/SearchBar";
 
 interface Props {
   searchText: string;
@@ -21,63 +22,20 @@ const LogSearchBar: React.FC<Props> = ({
   setSelectedDate,
 }) => {
   return (
-    <SearchRowWrapper>
-      <SearchBarWrapper>
-        <i className="material-icons">search</i>
-        <SearchInput
-          value={searchText}
-          onChange={(e: any) => {
-            setSearchText(e.target.value);
-          }}
-          onKeyPress={(event) => {
-            if (event.key === "Enter") {
-              setEnteredSearchText(escapeRegExp(searchText));
-              setSelectedDate();
-            }
-          }}
-          placeholder="Search logs..."
-        />
-      </SearchBarWrapper>
-    </SearchRowWrapper>
+    <SearchBar
+      width="250px"
+      value={searchText}
+      setValue={(x: any): any => {
+        setSearchText(x);
+      }}
+      onEnter={() => {
+        alert("ok")
+        setEnteredSearchText(escapeRegExp(searchText));
+        setSelectedDate();
+      }}
+      placeholder="Search logs . . ."
+    />
   );
 };
 
-export default LogSearchBar;
-
-const SearchBarWrapper = styled.div`
-  display: flex;
-  flex: 1;
-
-  > i {
-    color: #aaaabb;
-    padding-top: 1px;
-    margin-left: 8px;
-    font-size: 16px;
-    margin-right: 8px;
-  }
-`;
-
-const SearchInput = styled.input`
-  outline: none;
-  border: none;
-  font-size: 13px;
-  background: none;
-  width: 100%;
-  color: white;
-  height: 100%;
-`;
-
-const SearchRow = styled.div`
-  display: flex;
-  align-items: center;
-  height: 30px;
-  margin-right: 10px;
-  background: #26292e;
-  border-radius: 5px;
-  border: 1px solid #aaaabb33;
-`;
-
-const SearchRowWrapper = styled(SearchRow)`
-  border-radius: 5px;
-  width: 250px;
-`;
+export default LogSearchBar;

dashboard/src/components/porter/Filter.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import Select from "./Select";
+import Spacer from "./Spacer";
+
+import filter from "assets/filter.svg";
+
+type Props = {
+  filters: any;
+  selectedFilterValues: Record<any, string>;
+  filterString: string;
+};
+
+const Filter: React.FC<Props> = ({
+  filters,
+  selectedFilterValues,
+  filterString,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Relative>
+      <StyledFilter onClick={() => setIsExpanded(!isExpanded)}>
+        <img src={filter} />
+        Filter
+        {filterString !== "" && (
+          <>
+            <Bar />
+            <Spacer width="10px" />
+            {filterString}
+          </>
+        )}
+      </StyledFilter>
+      <CloseOverlay onClick={() => setIsExpanded(false)} isExpanded={isExpanded} />
+      <Dropdown isExpanded={isExpanded}>
+        {filters.map((filter: any, i: number) => {
+          return (
+            <React.Fragment key={i}>
+              <FilterLabel>{filter.displayName}</FilterLabel>
+              <Spacer height="10px" />
+              <Select
+                options={[filter.default, ...filter.options]}
+                setValue={filter.setValue}
+              />
+              {i < filter.length && <Spacer height="15px" />}
+            </React.Fragment>
+          );
+        })}
+      </Dropdown>
+    </Relative>
+  );
+};
+
+export default Filter;
+
+const Bar = styled.div`
+  width: 1px;
+  height: calc(100%);
+  background: #494b4f;
+  margin: 0 10px;
+`;
+
+const CloseOverlay = styled.div<{ isExpanded: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 998;
+  width: 100vw;
+  height: 100vh;
+  display: ${props => props.isExpanded ? "block" : "none"};
+`;
+
+const FilterLabel = styled.div`
+`;
+
+const Dropdown = styled.div<{ isExpanded: boolean }>`
+  position: absolute;
+  top: 40px;
+  left: 0;
+  border-radius: 5px;
+  font-size: 13px;
+  background: #121212;
+  border: 1px solid #494B4F;
+  padding: 10px;
+  padding-bottom: 15px;
+  z-index: 999;
+  display: ${props => props.isExpanded ? "block" : "none"};
+`;
+
+const Relative = styled.div`
+  position: relative;
+`;
+
+const StyledFilter = styled.div<{
+}>`
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-size: 13px;
+  height: 30px;
+  border-radius: 5px;
+  background: ${props => props.theme.fg};
+  padding: 0px 10px;
+  cursor: pointer;
+
+  border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
+
+  > img {
+    height: 13px;
+    width: 13px;
+    margin-right: 8px;
+  }
+`;

dashboard/src/components/porter/SearchBar.tsx

@@ -14,6 +14,7 @@ type Props = {
   error?: string;
   children?: React.ReactNode;
   autoFocus?: boolean;
+  onEnter?: () => void;
 };
 
 const SearchBar: React.FC<Props> = ({
@@ -27,6 +28,7 @@ const SearchBar: React.FC<Props> = ({
   error,
   children,
   autoFocus,
+  onEnter,
 }) => {
   return (
     <Block width={width}>
@@ -39,6 +41,14 @@ const SearchBar: React.FC<Props> = ({
         width={width}
         height={height}
         hasError={(error && true) || (error === "")}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            if (onEnter) {
+              onEnter();
+            }
+          }
+        }}
       >
         <Icon src={search} />
         <Input

dashboard/src/main/home/app-dashboard/expanded-app/logs/LogSection.tsx

@@ -28,6 +28,7 @@ import Button from "components/porter/Button";
 import { Service } from "../../new-app-flow/serviceTypes";
 import LogFilterContainer from "./LogFilterContainer";
 import StyledLogs from "./StyledLogs";
+import Filter from "components/porter/Filter";
 
 type Props = {
   appName: string;
@@ -215,6 +216,22 @@ const LogSection: React.FC<Props> = ({
     }
   };
 
+  const generateFilterString = () => {
+    let filterString = "";
+    if (selectedFilterValues["service_name"] !== "all") {
+      filterString += selectedFilterValues["service_name"];
+    } else if (selectedFilterValues["pod_name"] !== "all") {
+      filterString += selectedFilterValues["pod_name"].replace(/-[^-]*$/, '');
+    }
+    if (selectedFilterValues["revision"] !== "all") {
+      if (filterString !== "") {
+        filterString += " ";
+      }
+      filterString += "v" + selectedFilterValues["revision"];
+    }
+    return filterString;
+  };
+
   const renderContents = () => {
     return (
       <>
@@ -226,6 +243,7 @@ const LogSection: React.FC<Props> = ({
               setEnteredSearchText={setEnteredSearchText}
               setSelectedDate={setSelectedDateIfUndefined}
             />
+            <Spacer inline width="10px" />
             <LogQueryModeSelectionToggle
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
@@ -233,6 +251,14 @@ const LogSection: React.FC<Props> = ({
             />
           </Flex>
           <Flex>
+            {showFilter && (
+              <Filter 
+                filters={filters}
+                selectedFilterValues={selectedFilterValues}
+                filterString={generateFilterString()}
+              />
+            )}
+            <Spacer inline width="10px" />
             <ScrollButton onClick={() => setScrollToBottomEnabled((s) => !s)}>
               <Checkbox checked={scrollToBottomEnabled}>
                 <i className="material-icons">done</i>
@@ -251,15 +277,6 @@ const LogSection: React.FC<Props> = ({
           </Flex>
         </FlexRow>
         <Spacer y={0.5} />
-        {showFilter &&
-          <>
-            <LogFilterContainer
-              filters={filters}
-              selectedFilterValues={selectedFilterValues}
-            />
-            <Spacer y={0.5} />
-          </>
-        }
         <LogsSectionWrapper>
           <StyledLogsSection>
             {isLoading && <Loading message="Waiting for logs..." />}
@@ -464,7 +481,7 @@ const Checkbox = styled.div<{ checked: boolean }>`
 `;
 
 const ScrollButton = styled.div`
-  background: #26292e;
+  background: #181B20;
   border-radius: 5px;
   height: 30px;
   font-size: 13px;
@@ -586,4 +603,5 @@ const NotificationWrapper = styled.div<{ active?: boolean }>`
 
 const LogsSectionWrapper = styled.div`
   position: relative;
+  margin-top: 10px;
 `;