deduplicate log logic (#3447)

api/server/handlers/porter_app/get_logs_within_time_range.go

@@ -166,9 +166,9 @@ func trimPodSelector(podSelector string) string {
 	if !strings.HasSuffix(podSelector, ".*") {
 		return podSelector
 	}
-	podSelector = strings.TrimSuffix(podSelector, ".*")
-	if len(podSelector) <= 58 {
+	podSelectorWithoutWildcard := strings.TrimSuffix(podSelector, ".*")
+	if len(podSelectorWithoutWildcard) <= 58 {
 		return podSelector
 	}
-	return fmt.Sprintf("%s.*", podSelector[:58])
+	return fmt.Sprintf("%s.*", podSelectorWithoutWildcard[:58])
 }

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/cards/PreDeployEventCard.tsx

@@ -11,7 +11,7 @@ import Container from "components/porter/Container";
 import Spacer from "components/porter/Spacer";
 import Icon from "components/porter/Icon";
 
-import { getDuration, getStatusIcon, triggerWorkflow } from '../utils';
+import { getDuration, getStatusColor, getStatusIcon, triggerWorkflow } from '../utils';
 import { StyledEventCard } from "./EventCard";
 import Link from "components/porter/Link";
 import document from "assets/document.svg";
@@ -26,11 +26,11 @@ const PreDeployEventCard: React.FC<Props> = ({ event, appData }) => {
   const renderStatusText = (event: PorterAppEvent) => {
     switch (event.status) {
       case "SUCCESS":
-        return <Text color="#68BF8B">Pre-deploy succeeded</Text>;
+        return <Text color={getStatusColor(event.status)}>Pre-deploy succeeded</Text>;
       case "FAILED":
-        return <Text color="#FF6060">Pre-deploy failed</Text>;
+        return <Text color={getStatusColor(event.status)}>Pre-deploy failed</Text>;
       default:
-        return <Text color="helper">Pre-deploy in progress...</Text>;
+        return <Text color={getStatusColor(event.status)}>Pre-deploy in progress...</Text>;
     }
   };
 

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

@@ -11,7 +11,7 @@ import styled from "styled-components";
 import spinner from "assets/loading.gif";
 import { Context } from "shared/Context";
 import api from "shared/api";
-import { useLogs } from "./utils";
+import { getPodSelectorFromServiceName, useLogs } from "./utils";
 import { Direction, GenericFilterOption, GenericLogFilter, LogFilterName, LogFilterQueryParamOpts } from "./types";
 import dayjs, { Dayjs } from "dayjs";
 import Loading from "components/Loading";
@@ -61,20 +61,11 @@ const LogSection: React.FC<Props> = ({
   const [isPorterAgentInstalling, setIsPorterAgentInstalling] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [logsError, setLogsError] = useState<string | undefined>(undefined);
-  const getSelectorFromServiceQueryParam = (serviceName: string | null | undefined) => {
-    if (serviceName == null) {
-      return undefined;
-    }
-    const match = services?.find(s => s.name == serviceName);
-    if (match == null) {
-      return undefined;
-    }
-    return `${match.name}-${match.type == "worker" ? "wkr" : match.type}`;
-  }
+
   const [selectedFilterValues, setSelectedFilterValues] = useState<Record<LogFilterName, string>>({
     revision: filterOpts?.revision ?? GenericLogFilter.getDefaultOption("revision").value,
     output_stream: filterOpts?.output_stream ?? GenericLogFilter.getDefaultOption("output_stream").value,
-    pod_name: getSelectorFromServiceQueryParam(filterOpts?.service) ?? GenericLogFilter.getDefaultOption("pod_name").value,
+    pod_name: getPodSelectorFromServiceName(filterOpts?.service, services) ?? GenericLogFilter.getDefaultOption("pod_name").value,
   });
 
   const createVersionOptions = (number: number) => {
@@ -197,7 +188,7 @@ const LogSection: React.FC<Props> = ({
     setSelectedFilterValues({
       revision: filterOpts?.revision ?? GenericLogFilter.getDefaultOption("revision").value,
       output_stream: filterOpts?.output_stream ?? GenericLogFilter.getDefaultOption("output_stream").value,
-      pod_name: getSelectorFromServiceQueryParam(filterOpts?.service) ?? GenericLogFilter.getDefaultOption("pod_name").value,
+      pod_name: getPodSelectorFromServiceName(filterOpts?.service, services) ?? GenericLogFilter.getDefaultOption("pod_name").value,
     });
   };
 

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

@@ -3,19 +3,22 @@ import { GenericLogFilter, PorterLog } from "./types";
 import styled from "styled-components";
 import Anser from "anser";
 import dayjs from "dayjs";
-import { getPodSelectorFromPodNameAndAppName, getServiceNameFromPodNameAndAppName, getVersionTagColor } from "./utils";
+import { getPodSelectorFromServiceName, getServiceNameFromPodNameAndAppName, getVersionTagColor } from "./utils";
+import { Service } from "../../new-app-flow/serviceTypes";
 
 
 type Props = {
     logs: PorterLog[];
     appName: string;
     filters: GenericLogFilter[];
+    services?: Service[];
 };
 
 const StyledLogs: React.FC<Props> = ({
     logs,
     appName,
     filters,
+    services,
 }) => {
     const renderFilterTagForLog = (filter: GenericLogFilter, log: PorterLog, index: number) => {
         if (log.metadata == null) {
@@ -46,7 +49,7 @@ const StyledLogs: React.FC<Props> = ({
                         <LogInnerPill
                             color={"white"}
                             key={index}
-                            onClick={() => filter.setValue(getPodSelectorFromPodNameAndAppName(log.metadata.pod_name, appName))}
+                            onClick={() => filter.setValue(getPodSelectorFromServiceName(getServiceNameFromPodNameAndAppName(log.metadata.pod_name, appName), services) ?? GenericLogFilter.getDefaultOption("pod_name").value)}
                         >
                             {getServiceNameFromPodNameAndAppName(log.metadata.pod_name, appName)}
                         </LogInnerPill>
@@ -95,7 +98,6 @@ const StyledLogs: React.FC<Props> = ({
                     )
                 })}
             </StyledLogsTableBody>
-
         </StyledLogsTable>
     );
 };

dashboard/src/main/home/app-dashboard/expanded-app/logs/utils.ts

@@ -7,6 +7,7 @@ import { Context } from "shared/Context";
 import { useWebsockets, NewWebsocketOptions } from "shared/hooks/useWebsockets";
 import { ChartType } from "shared/types";
 import { AgentLog, AgentLogSchema, Direction, PorterLog, PaginationInfo, GenericLogFilter, LogFilterName } from "./types";
+import { Service } from "../../new-app-flow/serviceTypes";
 
 const MAX_LOGS = 5000;
 const MAX_BUFFER_LOGS = 1000;
@@ -163,12 +164,14 @@ export const useLogs = (
 
     const websocketBaseURL = `/api/projects/${currentProject.id}/clusters/${currentCluster.id}/namespaces/${namespace}/logs/loki`;
 
-    const q = new URLSearchParams({
+    const searchParams = {
       pod_selector: currentPodSelector,
       namespace,
       search_param: searchParam,
       revision: currentChart.version.toString(),
-    }).toString();
+    }
+
+    const q = new URLSearchParams(searchParams).toString();
 
     const endpoint = `${websocketBaseURL}?${q}`;
 
@@ -511,28 +514,13 @@ export const getServiceNameFromPodNameAndAppName = (podName: string, porterAppNa
   return "";
 }
 
-export const getPodSelectorFromPodNameAndAppName = (podName: string, porterAppName: string) => {
-  const prefix: string = porterAppName + "-";
-  if (!podName.startsWith(prefix)) {
-    return "";
-  }
-
-  podName = podName.replace(prefix, "");
-  const suffixes: string[] = ["-web", "-wkr", "-job"];
-  let index: number = -1;
-  let type = ""
-
-  for (const suffix of suffixes) {
-    const newIndex: number = podName.lastIndexOf(suffix);
-    if (newIndex > index) {
-      index = newIndex;
-      type = suffix;
-    }
+export const getPodSelectorFromServiceName = (serviceName: string | null | undefined, services?: Service[]): string | undefined => {
+  if (serviceName == null) {
+    return undefined;
   }
-
-  if (index !== -1) {
-    return podName.substring(0, index) + type;
+  const match = services?.find(s => s.name === serviceName);
+  if (match == null) {
+    return undefined;
   }
-
-  return "";
+  return `${match.name}-${match.type == "worker" ? "wkr" : match.type}`;
 }