[POR-1859] change log filter component to new version (#3793)

porter-dev · Oct 11, 2023 · 5404641 · 5404641
1 parent c4acd6b
commit 5404641
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 20 deletions.
diff --git a/dashboard/src/components/porter/Filter.tsx b/dashboard/src/components/porter/Filter.tsx
@@ -1,20 +1,21 @@
-import React, { useEffect, useState } from "react";
+import React, {  useState } from "react";
 import styled from "styled-components";
 import Select from "./Select";
 import Spacer from "./Spacer";
 
 import filter from "assets/filter.svg";
+import { GenericLogFilter, LogFilterName } from "main/home/app-dashboard/expanded-app/logs/types";
 
 type Props = {
-  filters: any;
-  selectedFilterValues: Record<any, string>;
+  filters: GenericLogFilter[];
   filterString: string;
+  selectedFilterValues: Record<LogFilterName, string>;
 };
 
 const Filter: React.FC<Props> = ({
   filters,
-  selectedFilterValues,
   filterString,
+  selectedFilterValues,
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -33,16 +34,17 @@ const Filter: React.FC<Props> = ({
       </StyledFilter>
       <CloseOverlay onClick={() => setIsExpanded(false)} isExpanded={isExpanded} />
       <Dropdown isExpanded={isExpanded}>
-        {filters.map((filter: any, i: number) => {
+        {filters.map((filter: GenericLogFilter, i: number) => {
           return (
             <React.Fragment key={i}>
               <FilterLabel>{filter.displayName}</FilterLabel>
-              <Spacer height="10px" />
+              <Spacer y={0.5} />
               <Select
                 options={[filter.default, ...filter.options]}
                 setValue={filter.setValue}
+                value={selectedFilterValues[filter.name]}
               />
-              {i < filter.length && <Spacer height="15px" />}
+              {i !== filters.length - 1 && <Spacer y={0.5} />}
             </React.Fragment>
           );
         })}

diff --git a/...c/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/PreDeployEventCard.tsx b/...c/main/home/app-dashboard/app-view/tabs/activity-feed/events/cards/PreDeployEventCard.tsx
@@ -34,6 +34,8 @@ const PreDeployEventCard: React.FC<Props> = ({ event, appName, projectId, cluste
         return <Text color={getStatusColor(event.status)}>Pre-deploy succeeded</Text>;
       case "FAILED":
         return <Text color={getStatusColor(event.status)}>Pre-deploy failed</Text>;
+      case "CANCELED":
+        return <Text color={getStatusColor(event.status)}>Pre-deploy canceled</Text>;
       default:
         return <Text color={getStatusColor(event.status)}>Pre-deploy in progress...</Text>;
     }

diff --git a/dashboard/src/main/home/app-dashboard/expanded-app/logs/LogSection.tsx b/dashboard/src/main/home/app-dashboard/expanded-app/logs/LogSection.tsx
@@ -253,8 +253,8 @@ const LogSection: React.FC<Props> = ({
             {showFilter && (
               <Filter
                 filters={filters}
-                selectedFilterValues={selectedFilterValues}
                 filterString={generateFilterString()}
+                selectedFilterValues={selectedFilterValues}
               />
             )}
             <Spacer inline width="10px" />

diff --git a/dashboard/src/main/home/app-dashboard/validate-apply/logs/Logs.tsx b/dashboard/src/main/home/app-dashboard/validate-apply/logs/Logs.tsx
@@ -2,6 +2,7 @@ import React, {
     useCallback,
     useContext,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from "react";
@@ -23,11 +24,11 @@ import Text from "components/porter/Text";
 import Spacer from "components/porter/Spacer";
 import Container from "components/porter/Container";
 import Button from "components/porter/Button";
-import LogFilterContainer from "../../expanded-app/logs/LogFilterContainer";
 import StyledLogs from "../../expanded-app/logs/StyledLogs";
 import { useRevisionList } from "lib/hooks/useRevisionList";
 import { useLocation } from "react-router";
 import { useLatestRevision } from "../../app-view/LatestRevisionContext";
+import Filter from "components/porter/Filter";
 
 type Props = {
     projectId: number;
@@ -79,7 +80,7 @@ const Logs: React.FC<Props> = ({
 
     const [selectedFilterValues, setSelectedFilterValues] = useState<Record<LogFilterName, string>>({
         service_name: logQueryParamOpts?.service ?? GenericLogFilter.getDefaultOption("service_name").value,
-        pod_name: "", // not supported
+        pod_name: "", // not supported in v2
         revision: logQueryParamOpts.revision ?? GenericLogFilter.getDefaultOption("revision").value,
         output_stream: logQueryParamOpts.output_stream ?? GenericLogFilter.getDefaultOption("output_stream").value,
     });
@@ -266,7 +267,7 @@ const Logs: React.FC<Props> = ({
     const resetFilters = () => {
         setSelectedFilterValues({
             service_name: logQueryParamOpts?.service ?? GenericLogFilter.getDefaultOption("service_name").value,
-            pod_name: "", // not supported
+            pod_name: "", // not supported in v2
             revision: logQueryParamOpts.revision ?? GenericLogFilter.getDefaultOption("revision").value,
             output_stream: logQueryParamOpts.output_stream ?? GenericLogFilter.getDefaultOption("output_stream").value,
         });
@@ -293,6 +294,20 @@ const Logs: React.FC<Props> = ({
         }
     };
 
+    const filterLabelString = useMemo(() => {
+        let filterString = "";
+        if (selectedFilterValues["service_name"] !== null && selectedFilterValues["service_name"] !== "all") {
+          filterString += selectedFilterValues["service_name"];
+        } 
+        if (selectedFilterValues["revision"] != null && selectedFilterValues["revision"] !== "all") {
+          if (filterString !== "") {
+            filterString += " ";
+          }
+          filterString += "v" + selectedFilterValues["revision"];
+        }
+        return filterString;
+    },[JSON.stringify(selectedFilterValues)]);
+
     const renderContents = () => {
         return (
             <>
@@ -304,20 +319,27 @@ const Logs: React.FC<Props> = ({
                             setEnteredSearchText={setEnteredSearchText}
                             setSelectedDate={setSelectedDateIfUndefined}
                         />
+                        <Spacer inline x={1} />
                         <LogQueryModeSelectionToggle
                             selectedDate={selectedDate ?? timeRange?.endTime?.toDate()}
                             setSelectedDate={setSelectedDate}
                             resetSearch={resetSearch}
                         />
                     </Flex>
                     <Flex>
+                        <Filter
+                            filters={filters}
+                            filterString={filterLabelString} 
+                            selectedFilterValues={selectedFilterValues}
+                        />
+                        <Spacer inline x={1} />
                         <ScrollButton onClick={() => setScrollToBottomEnabled((s) => !s)}>
                             <Checkbox checked={scrollToBottomEnabled}>
                                 <i className="material-icons">done</i>
                             </Checkbox>
                             Scroll to bottom
                         </ScrollButton>
-                        <Spacer inline width="10px" />
+                        <Spacer inline x={1} />
                         <ScrollButton
                             onClick={() => {
                                 refresh({ isLive: selectedDate == null && timeRange?.endTime == null });
@@ -329,13 +351,6 @@ const Logs: React.FC<Props> = ({
                     </Flex>
                 </FlexRow>
                 <Spacer y={0.5} />
-                <>
-                    <LogFilterContainer
-                        filters={filters}
-                        selectedFilterValues={selectedFilterValues}
-                    />
-                    <Spacer y={0.5} />
-                </>
                 <LogsSectionWrapper>
                     <StyledLogsSection>
                         {isLoading && <Loading message="Waiting for logs..." />}
@@ -520,7 +535,7 @@ const Checkbox = styled.div<{ checked: boolean }>`
 `;
 
 const ScrollButton = styled.div`
-  background: #26292e;
+  background: ${props => props.theme.fg};
   border-radius: 5px;
   height: 30px;
   font-size: 13px;